Skip to content

Commit 43745d9

Browse files
mrholekmrholek
committed
refactor: migrate to <script setup> 
1 parent 86a084a commit 43745d9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1059
-1757
lines changed

‎.eslintrc.js renamed to ‎.eslintrc.cjs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
/* eslint-env node */
12
module.exports = {
23
extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
34
rules: {
45
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
56
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
7+
'vue/multi-word-component-names': 'off',
68
},
79
};

‎src/App.vue

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,36 @@
1-
<template>
2-
<router-view />
3-
</template>
4-
<script>
1+
<script setup>
52
import { onBeforeMount } from 'vue'
63
import { useStore } from 'vuex'
74
import { useColorModes } from '@coreui/vue'
85
9-
export default {
10-
setup() {
11-
const { isColorModeSet, setColorMode } = useColorModes(
12-
'coreui-free-vue-admin-template-theme',
13-
)
14-
const store = useStore()
15-
16-
onBeforeMount(() => {
17-
const urlParams = new URLSearchParams(window.location.href.split('?')[1])
18-
const theme =
19-
urlParams.get('theme') &&
20-
urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
21-
if (theme) {
22-
setColorMode(theme)
23-
return
24-
}
25-
26-
if (isColorModeSet()) {
27-
return
28-
}
29-
30-
setColorMode(store.state.theme)
31-
})
32-
},
33-
}
6+
const { isColorModeSet, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
7+
const store = useStore()
8+
9+
onBeforeMount(() => {
10+
const urlParams = new URLSearchParams(window.location.href.split('?')[1])
11+
let theme = urlParams.get('theme')
12+
13+
if (theme !== null && theme.match(/^[A-Za-z0-9\s]+/)) {
14+
theme = theme.match(/^[A-Za-z0-9\s]+/)[0]
15+
}
16+
17+
if (theme) {
18+
setColorMode(theme)
19+
return
20+
}
21+
22+
if (isColorModeSet()) {
23+
return
24+
}
25+
26+
setColorMode(store.state.theme)
27+
})
3428
</script>
3529

30+
<template>
31+
<router-view />
32+
</template>
33+
3634
<style lang="scss">
3735
// Import Main styles for this application
3836
@import 'styles/style';

‎src/_nav.js

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -282,21 +282,4 @@ export default [
282282
},
283283
],
284284
},
285-
286-
// {
287-
// component: 'CNavItem',
288-
// name: 'Download CoreUI',
289-
// href: 'http://coreui.io/vue/',
290-
// icon: { name: 'cil-cloud-download', class: 'text-white' },
291-
// _class: 'bg-success text-white',
292-
// target: '_blank'
293-
// },
294-
// {
295-
// component: 'CNavItem',
296-
// name: 'Try CoreUI PRO',
297-
// href: 'http://coreui.io/pro/vue/',
298-
// icon: { name: 'cil-layers', class: 'text-white' },
299-
// _class: 'bg-danger text-white',
300-
// target: '_blank'
301-
// }
302285
]

‎src/components/AppBreadcrumb.vue

Lines changed: 26 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1+
<script setup>
2+
import { onMounted, ref } from 'vue'
3+
import router from '@/router'
4+
5+
const breadcrumbs = ref()
6+
7+
const getBreadcrumbs = () => {
8+
return router.currentRoute.value.matched.map((route) => {
9+
return {
10+
active: route.path === router.currentRoute.value.fullPath,
11+
name: route.name,
12+
path: `${router.options.history.base}${route.path}`,
13+
}
14+
})
15+
}
16+
17+
router.afterEach(() => {
18+
breadcrumbs.value = getBreadcrumbs()
19+
})
20+
21+
onMounted(() => {
22+
breadcrumbs.value = getBreadcrumbs()
23+
})
24+
</script>
25+
126
<template>
227
<CBreadcrumb class="my-0">
328
<CBreadcrumbItem
@@ -9,38 +34,4 @@
934
{{ item.name }}
1035
</CBreadcrumbItem>
1136
</CBreadcrumb>
12-
</template>
13-
14-
<script>
15-
import { onMounted, ref } from 'vue'
16-
import router from '@/router'
17-
18-
export default {
19-
name: 'AppBreadcrumb',
20-
setup() {
21-
const breadcrumbs = ref()
22-
23-
const getBreadcrumbs = () => {
24-
return router.currentRoute.value.matched.map((route) => {
25-
return {
26-
active: route.path === router.currentRoute.value.fullPath,
27-
name: route.name,
28-
path: `${router.options.history.base}${route.path}`,
29-
}
30-
})
31-
}
32-
33-
router.afterEach(() => {
34-
breadcrumbs.value = getBreadcrumbs()
35-
})
36-
37-
onMounted(() => {
38-
breadcrumbs.value = getBreadcrumbs()
39-
})
40-
41-
return {
42-
breadcrumbs,
43-
}
44-
},
45-
}
46-
</script>
37+
</template>

‎src/components/AppFooter.vue

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,3 @@
1212
</div>
1313
</CFooter>
1414
</template>
15-
16-
<script>
17-
export default {
18-
name: 'AppFooter',
19-
}
20-
</script>

‎src/components/AppHeader.vue

Lines changed: 20 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,23 @@
1+
<script setup>
2+
import { onMounted, ref } from 'vue'
3+
import { useColorModes } from '@coreui/vue'
4+
import AppBreadcrumb from './AppBreadcrumb'
5+
import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
6+
7+
const headerClassNames = ref('mb-4 p-0')
8+
const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
9+
10+
onMounted(() => {
11+
document.addEventListener('scroll', () => {
12+
if (document.documentElement.scrollTop > 0) {
13+
headerClassNames.value = 'mb-4 p-0 shadow-sm'
14+
} else {
15+
headerClassNames.value = 'mb-4 p-0'
16+
}
17+
})
18+
})
19+
</script>
20+
121
<template>
222
<CHeader position="sticky" :class="headerClassNames">
323
<CContainer class="border-bottom px-4" fluid>
@@ -83,37 +103,3 @@
83103
</CContainer>
84104
</CHeader>
85105
</template>
86-
87-
<script>
88-
import { onMounted, ref } from 'vue'
89-
import { useColorModes } from '@coreui/vue'
90-
import AppBreadcrumb from './AppBreadcrumb'
91-
import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
92-
export default {
93-
name: 'AppHeader',
94-
components: {
95-
AppBreadcrumb,
96-
AppHeaderDropdownAccnt,
97-
},
98-
setup() {
99-
const headerClassNames = ref('mb-4 p-0')
100-
const { colorMode, setColorMode } = useColorModes('coreui-free-vue-admin-template-theme')
101-
102-
onMounted(() => {
103-
document.addEventListener('scroll', () => {
104-
if (document.documentElement.scrollTop > 0) {
105-
headerClassNames.value = 'mb-4 p-0 shadow-sm'
106-
} else {
107-
headerClassNames.value = 'mb-4 p-0'
108-
}
109-
})
110-
})
111-
112-
return {
113-
headerClassNames,
114-
colorMode,
115-
setColorMode,
116-
}
117-
},
118-
}
119-
</script>

‎src/components/AppHeaderDropdownAccnt.vue

Lines changed: 10 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<script setup>
2+
import avatar from '@/assets/images/avatars/8.jpg'
3+
4+
const itemsCount = 42
5+
</script>
6+
17
<template>
28
<CDropdown placement="bottom-end" variant="nav-item">
39
<CDropdownToggle class="py-0 pe-0" :caret="false">
@@ -32,12 +38,8 @@
3238
>
3339
Settings
3440
</CDropdownHeader>
35-
<CDropdownItem>
36-
<CIcon icon="cil-user" /> Profile
37-
</CDropdownItem>
38-
<CDropdownItem>
39-
<CIcon icon="cil-settings" /> Settings
40-
</CDropdownItem>
41+
<CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
42+
<CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
4143
<CDropdownItem>
4244
<CIcon icon="cil-dollar" /> Payments
4345
<CBadge color="secondary" class="ms-auto">{{ itemsCount }}</CBadge>
@@ -47,25 +49,8 @@
4749
<CBadge color="primary" class="ms-auto">{{ itemsCount }}</CBadge>
4850
</CDropdownItem>
4951
<CDropdownDivider />
50-
<CDropdownItem>
51-
<CIcon icon="cil-shield-alt" /> Lock Account
52-
</CDropdownItem>
53-
<CDropdownItem>
54-
<CIcon icon="cil-lock-locked" /> Logout
55-
</CDropdownItem>
52+
<CDropdownItem> <CIcon icon="cil-shield-alt" /> Lock Account </CDropdownItem>
53+
<CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
5654
</CDropdownMenu>
5755
</CDropdown>
5856
</template>
59-
60-
<script>
61-
import avatar from '@/assets/images/avatars/8.jpg'
62-
export default {
63-
name: 'AppHeaderDropdownAccnt',
64-
setup() {
65-
return {
66-
avatar: avatar,
67-
itemsCount: 42,
68-
}
69-
},
70-
}
71-
</script>

‎src/components/AppSidebar.vue

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
2+
<script setup>
3+
import { computed } from 'vue'
4+
import { RouterLink } from 'vue-router'
5+
import { useStore } from 'vuex'
6+
import { AppSidebarNav } from './AppSidebarNav'
7+
import { logo } from '@/assets/brand/logo'
8+
import { sygnet } from '@/assets/brand/sygnet'
9+
10+
const store = useStore()
11+
const sidebarUnfoldable = computed(() => store.state.sidebarUnfoldable)
12+
const sidebarVisible = computed(() => store.state.sidebarVisible)
13+
</script>
14+
115
<template>
216
<CSidebar
317
class="border-end"
@@ -28,28 +42,3 @@
2842
</CSidebarFooter>
2943
</CSidebar>
3044
</template>
31-
32-
<script>
33-
import { computed } from 'vue'
34-
import { RouterLink } from 'vue-router'
35-
import { useStore } from 'vuex'
36-
import { AppSidebarNav } from './AppSidebarNav'
37-
import { logo } from '@/assets/brand/logo'
38-
import { sygnet } from '@/assets/brand/sygnet'
39-
export default {
40-
name: 'AppSidebar',
41-
components: {
42-
AppSidebarNav,
43-
RouterLink,
44-
},
45-
setup() {
46-
const store = useStore()
47-
return {
48-
logo,
49-
sygnet,
50-
sidebarUnfoldable: computed(() => store.state.sidebarUnfoldable),
51-
sidebarVisible: computed(() => store.state.sidebarVisible),
52-
}
53-
},
54-
}
55-
</script>

‎src/components/AppSidebarNav.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,4 +143,5 @@ const AppSidebarNav = defineComponent({
143143
)
144144
},
145145
})
146-
export { AppSidebarNav }
146+
147+
export { AppSidebarNav }

‎src/components/DocsExample.vue

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
<script setup>
2+
const props = defineProps({
3+
href: String,
4+
tabContentClass: String,
5+
})
6+
7+
const url = `https://coreui.io/vue/docs/${props.href}`
8+
const addClass = props.tabContentClass
9+
</script>
10+
111
<template>
212
<div class="example">
313
<CNav variant="underline-border">
@@ -21,22 +31,3 @@
2131
</CTabContent>
2232
</div>
2333
</template>
24-
25-
<script>
26-
export default {
27-
name: 'DocsExample',
28-
props: {
29-
href: String,
30-
tabContentClass: String,
31-
},
32-
setup(props) {
33-
const url = `https://coreui.io/vue/docs/${props.href}`
34-
const addClass = props.tabContentClass
35-
36-
return {
37-
addClass,
38-
url,
39-
}
40-
},
41-
}
42-
</script>

0 commit comments

Comments
 (0)