refactor: migrate to <script setup>

coreui · Apr 29, 2024 · 43745d9 · 43745d9
1 parent 86a084a
commit 43745d9
Show file tree

Hide file tree

Showing 63 changed files with 1,059 additions and 1,757 deletions.
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
@@ -1,7 +1,9 @@
+/* eslint-env node */
 module.exports = {
   extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'vue/multi-word-component-names': 'off',
   },
 };
diff --git a/src/App.vue b/src/App.vue
@@ -1,38 +1,36 @@
-<template>
-  <router-view />
-</template>
-<script>
+<script setup>
 import { onBeforeMount } from 'vue'
 import { useStore } from 'vuex'
 import { useColorModes } from '@coreui/vue'
 
-export default {
-  setup() {
-    const { isColorModeSet, setColorMode } = useColorModes(
-      'coreui-free-vue-admin-template-theme',
-    )
-    const store = useStore()
-
-    onBeforeMount(() => {
-      const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-      const theme =
-        urlParams.get('theme') &&
-        urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
-      if (theme) {
-        setColorMode(theme)
-        return
-      }
-
-      if (isColorModeSet()) {
-        return
-      }
-
-      setColorMode(store.state.theme)
-    })
-  },
-}
+const { isColorModeSet, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
+const store = useStore()
+
+onBeforeMount(() => {
+  const urlParams = new URLSearchParams(window.location.href.split('?')[1])
+  let theme = urlParams.get('theme')
+
+  if (theme !== null && theme.match(/^[A-Za-z0-9\s]+/)) {
+    theme = theme.match(/^[A-Za-z0-9\s]+/)[0]
+  }
+
+  if (theme) {
+    setColorMode(theme)
+    return
+  }
+
+  if (isColorModeSet()) {
+    return
+  }
+
+  setColorMode(store.state.theme)
+})
 </script>
 
+<template>
+  <router-view />
+</template>
+
 <style lang="scss">
 // Import Main styles for this application
 @import 'styles/style';

diff --git a/src/_nav.js b/src/_nav.js
@@ -282,21 +282,4 @@ export default [
       },
     ],
   },
-
-  // {
-  //   component: 'CNavItem',
-  //   name: 'Download CoreUI',
-  //   href: 'http://coreui.io/vue/',
-  //   icon: { name: 'cil-cloud-download', class: 'text-white' },
-  //   _class: 'bg-success text-white',
-  //   target: '_blank'
-  // },
-  // {
-  //   component: 'CNavItem',
-  //   name: 'Try CoreUI PRO',
-  //   href: 'http://coreui.io/pro/vue/',
-  //   icon: { name: 'cil-layers', class: 'text-white' },
-  //   _class: 'bg-danger text-white',
-  //   target: '_blank'
-  // }
 ]
diff --git a/src/components/AppBreadcrumb.vue b/src/components/AppBreadcrumb.vue
@@ -1,3 +1,28 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import router from '@/router'
+
+const breadcrumbs = ref()
+
+const getBreadcrumbs = () => {
+  return router.currentRoute.value.matched.map((route) => {
+    return {
+      active: route.path === router.currentRoute.value.fullPath,
+      name: route.name,
+      path: `${router.options.history.base}${route.path}`,
+    }
+  })
+}
+
+router.afterEach(() => {
+  breadcrumbs.value = getBreadcrumbs()
+})
+
+onMounted(() => {
+  breadcrumbs.value = getBreadcrumbs()
+})
+</script>
+
 <template>
   <CBreadcrumb class="my-0">
     <CBreadcrumbItem
@@ -9,38 +34,4 @@
       {{ item.name }}
     </CBreadcrumbItem>
   </CBreadcrumb>
-</template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import router from '@/router'
-
-export default {
-  name: 'AppBreadcrumb',
-  setup() {
-    const breadcrumbs = ref()
-
-    const getBreadcrumbs = () => {
-      return router.currentRoute.value.matched.map((route) => {
-        return {
-          active: route.path === router.currentRoute.value.fullPath,
-          name: route.name,
-          path: `${router.options.history.base}${route.path}`,
-        }
-      })
-    }
-
-    router.afterEach(() => {
-      breadcrumbs.value = getBreadcrumbs()
-    })
-
-    onMounted(() => {
-      breadcrumbs.value = getBreadcrumbs()
-    })
-
-    return {
-      breadcrumbs,
-    }
-  },
-}
-</script>
+</template>
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
@@ -12,9 +12,3 @@
     </div>
   </CFooter>
 </template>
-
-<script>
-export default {
-  name: 'AppFooter',
-}
-</script>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -1,3 +1,23 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useColorModes } from '@coreui/vue'
+import AppBreadcrumb from './AppBreadcrumb'
+import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
+
+const headerClassNames = ref('mb-4 p-0')
+const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
+
+onMounted(() => {
+  document.addEventListener('scroll', () => {
+    if (document.documentElement.scrollTop > 0) {
+      headerClassNames.value = 'mb-4 p-0 shadow-sm'
+    } else {
+      headerClassNames.value = 'mb-4 p-0'
+    }
+  })
+})
+</script>
+
 <template>
   <CHeader position="sticky" :class="headerClassNames">
     <CContainer class="border-bottom px-4" fluid>
@@ -83,37 +103,3 @@
     </CContainer>
   </CHeader>
 </template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import { useColorModes } from '@coreui/vue'
-import AppBreadcrumb from './AppBreadcrumb'
-import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
-export default {
-  name: 'AppHeader',
-  components: {
-    AppBreadcrumb,
-    AppHeaderDropdownAccnt,
-  },
-  setup() {
-    const headerClassNames = ref('mb-4 p-0')
-    const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
-
-    onMounted(() => {
-      document.addEventListener('scroll', () => {
-        if (document.documentElement.scrollTop > 0) {
-          headerClassNames.value = 'mb-4 p-0 shadow-sm'
-        } else {
-          headerClassNames.value = 'mb-4 p-0'
-        }
-      })
-    })
-
-    return {
-      headerClassNames,
-      colorMode,
-      setColorMode,
-    }
-  },
-}
-</script>
diff --git a/src/components/AppHeaderDropdownAccnt.vue b/src/components/AppHeaderDropdownAccnt.vue
@@ -1,3 +1,9 @@
+<script setup>
+import avatar from '@/assets/images/avatars/8.jpg'
+
+const itemsCount = 42
+</script>
+
 <template>
   <CDropdown placement="bottom-end" variant="nav-item">
     <CDropdownToggle class="py-0 pe-0" :caret="false">
@@ -32,12 +38,8 @@
       >
         Settings
       </CDropdownHeader>
-      <CDropdownItem>
-        <CIcon icon="cil-user" /> Profile
-      </CDropdownItem>
-      <CDropdownItem>
-        <CIcon icon="cil-settings" /> Settings
-      </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
       <CDropdownItem>
         <CIcon icon="cil-dollar" /> Payments
         <CBadge color="secondary" class="ms-auto">{{ itemsCount }}</CBadge>
@@ -47,25 +49,8 @@
         <CBadge color="primary" class="ms-auto">{{ itemsCount }}</CBadge>
       </CDropdownItem>
       <CDropdownDivider />
-      <CDropdownItem>
-        <CIcon icon="cil-shield-alt" /> Lock Account
-      </CDropdownItem>
-      <CDropdownItem>
-        <CIcon icon="cil-lock-locked" /> Logout
-      </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-shield-alt" /> Lock Account </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
     </CDropdownMenu>
   </CDropdown>
 </template>
-
-<script>
-import avatar from '@/assets/images/avatars/8.jpg'
-export default {
-  name: 'AppHeaderDropdownAccnt',
-  setup() {
-    return {
-      avatar: avatar,
-      itemsCount: 42,
-    }
-  },
-}
-</script>
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
@@ -1,3 +1,17 @@
+
+<script setup>
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useStore } from 'vuex'
+import { AppSidebarNav } from './AppSidebarNav'
+import { logo } from '@/assets/brand/logo'
+import { sygnet } from '@/assets/brand/sygnet'
+
+const store = useStore()
+const sidebarUnfoldable =  computed(() => store.state.sidebarUnfoldable)
+const sidebarVisible = computed(() => store.state.sidebarVisible)
+</script>
+
 <template>
   <CSidebar
     class="border-end"
@@ -28,28 +42,3 @@
     </CSidebarFooter>
   </CSidebar>
 </template>
-
-<script>
-import { computed } from 'vue'
-import { RouterLink } from 'vue-router'
-import { useStore } from 'vuex'
-import { AppSidebarNav } from './AppSidebarNav'
-import { logo } from '@/assets/brand/logo'
-import { sygnet } from '@/assets/brand/sygnet'
-export default {
-  name: 'AppSidebar',
-  components: {
-    AppSidebarNav,
-    RouterLink,
-  },
-  setup() {
-    const store = useStore()
-    return {
-      logo,
-      sygnet,
-      sidebarUnfoldable: computed(() => store.state.sidebarUnfoldable),
-      sidebarVisible: computed(() => store.state.sidebarVisible),
-    }
-  },
-}
-</script>
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
@@ -143,4 +143,5 @@ const AppSidebarNav = defineComponent({
       )
   },
 })
-export { AppSidebarNav }
+
+export { AppSidebarNav }
diff --git a/src/components/DocsExample.vue b/src/components/DocsExample.vue
@@ -1,3 +1,13 @@
+<script setup>
+const props = defineProps({
+  href: String,
+  tabContentClass: String,
+})
+
+const url = `https://coreui.io/vue/docs/${props.href}`
+const addClass = props.tabContentClass
+</script>
+
 <template>
   <div class="example">
     <CNav variant="underline-border">
@@ -21,22 +31,3 @@
     </CTabContent>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'DocsExample',
-  props: {
-    href: String,
-    tabContentClass: String,
-  },
-  setup(props) {
-    const url = `https://coreui.io/vue/docs/${props.href}`
-    const addClass = props.tabContentClass
- 
-    return {
-      addClass,
-      url,
-    }
-  },
-}
-</script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -143,4 +143,5 @@ const AppSidebarNav = defineComponent({ @@
           )
       },
     })
-    export { AppSidebarNav }
+    export { AppSidebarNav }