Skip to content

Commit fce76c0

Browse files
woothuwoothu
committed
refactor: Sidebar components refactor
- move scrollbar to seperate folder, - add size and overlaid props to CSidebar, - fix CSidebar classes, and provided state, - add x-icon as default in CSidebarClose, - remove unnecessary wrappers in CSidebarNav, - change component class names, - update typings and tests
1 parent 364aee6 commit fce76c0

22 files changed

+198
-157
lines changed

‎src/components/Sidebar/CPerfectScrollbar.vue renamed to ‎src/components/Scrollbar/CScrollbar.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import PerfectScrollbar from 'perfect-scrollbar'
44
55
export default {
6-
name: 'CPerfectScrollbar',
6+
name: 'CScrollbar',
77
props: {
88
settings: {
99
type: Object,

‎src/components/Scrollbar/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import CScrollbar from './CScrollbar'
2+
3+
export {
4+
CScrollbar
5+
}

‎src/components/Sidebar/tests/CPerfectScrollbar.spec.js renamed to ‎src/components/Scrollbar/tests/CScrollbar.spec.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { mount } from '@vue/test-utils'
2-
import CSidebarNav from '../CSidebarNav'
3-
import CSidebar from '../CSidebar'
4-
import Component from '../CPerfectScrollbar'
2+
import CSidebarNav from '../../Sidebar/CSidebarNav'
3+
import CSidebar from '../../Sidebar/CSidebar'
4+
import Component from '../CScrollbar'
55
import Vue from 'vue'
66

77

8-
const ComponentName = 'CPerfectScrollbar'
8+
const ComponentName = 'CScrollbar'
99
const wrapper = mount(Component, {
1010
propsData: {
1111
switcher: false

‎src/components/Scrollbar/tests/__snapshots__/CScrollbar.spec.js.snap

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`CPerfectScrollbar .vue renders correctly 1`] = `
4+
<div
5+
style="position: relative;"
6+
/>
7+
`;
8+
9+
exports[`CPerfectScrollbar .vue renders correctly in sidebar 1`] = `
10+
<div
11+
class="c-sidebar c-sidebar-dark c-sidebar-lg-show c-sidebar-fixed"
12+
>
13+
<ul
14+
class="c-scroll-area c-sidebar-nav ps"
15+
style="position: relative;"
16+
>
17+
<div
18+
class="ps__rail-x"
19+
style="left: 0px; top: 0px;"
20+
>
21+
<div
22+
class="ps__thumb-x"
23+
style="left: 0px; width: 0px;"
24+
tabindex="0"
25+
/>
26+
</div>
27+
<div
28+
class="ps__rail-y"
29+
style="top: 0px; left: 0px;"
30+
>
31+
<div
32+
class="ps__thumb-y"
33+
style="top: 0px; height: 0px;"
34+
tabindex="0"
35+
/>
36+
</div>
37+
</ul>
38+
</div>
39+
`;
40+
41+
exports[`CScrollbar .vue renders correctly 1`] = `
42+
<div
43+
style="position: relative;"
44+
/>
45+
`;
46+
47+
exports[`CScrollbar .vue renders correctly in sidebar 1`] = `
48+
<div
49+
class="c-sidebar c-sidebar-dark c-sidebar-lg-show c-sidebar-fixed"
50+
>
51+
<ul
52+
class="c-scroll-area c-sidebar-nav ps"
53+
style="position: relative;"
54+
>
55+
<div
56+
class="ps__rail-x"
57+
style="left: 0px; top: 0px;"
58+
>
59+
<div
60+
class="ps__thumb-x"
61+
style="left: 0px; width: 0px;"
62+
tabindex="0"
63+
/>
64+
</div>
65+
<div
66+
class="ps__rail-y"
67+
style="top: 0px; left: 0px;"
68+
>
69+
<div
70+
class="ps__thumb-y"
71+
style="top: 0px; height: 0px;"
72+
tabindex="0"
73+
/>
74+
</div>
75+
</ul>
76+
</div>
77+
`;

‎src/components/Sidebar/CSidebar.vue

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,12 @@
88
export default {
99
name: 'CSidebar',
1010
props: {
11-
fixed: Boolean,
11+
fixed: {
12+
type: Boolean,
13+
default: true
14+
},
1215
unfoldable: Boolean,
16+
overlaid: Boolean,
1317
breakpoint: {
1418
type: [String, Boolean],
1519
default: 'lg',
@@ -20,6 +24,10 @@ export default {
2024
type: Boolean,
2125
default: null
2226
},
27+
size: {
28+
type: String,
29+
validator: (val) => ['', 'sm', 'lg', 'xl'].includes(val)
30+
},
2331
hideOnMobileClick: {
2432
type: Boolean,
2533
default: true
@@ -42,7 +50,7 @@ export default {
4250
provide () {
4351
const state = {}
4452
Object.defineProperty(state, 'minimize', {
45-
get: () => this.minimize
53+
get: () => this.minimize && !this.unfoldable
4654
})
4755
return {
4856
state,
@@ -81,7 +89,9 @@ export default {
8189
'c-sidebar-fixed': this.fixed,
8290
'c-sidebar-right': this.aside,
8391
'c-sidebar-minimized': this.minimize && !this.unfoldable,
84-
'c-sidebar-minimized-unfoldable': this.minimize && this.unfoldable
92+
'c-sidebar-unfoldable': this.minimize && this.unfoldable,
93+
'c-sidebar-overlaid': this.overlaid,
94+
[`c-sidebar-${this.size}`]: this.size,
8595
}
8696
]
8797
}

‎src/components/Sidebar/CSidebarClose.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<template>
2-
<CButtonClose buttonClasses="c-sidebar-close"/>
2+
<CButtonClose buttonClasses="c-sidebar-close">
3+
<svg class="c-icon" width="24" height="24" viewBox="0 0 24 24">
4+
<title>x</title>
5+
<path d="M20.030 5.030l-1.061-1.061-6.97 6.97-6.97-6.97-1.061 1.061 6.97 6.97-6.97 6.97 1.061 1.061 6.97-6.97 6.97 6.97 1.061-1.061-6.97-6.97 6.97-6.97z"></path>
6+
</svg>
7+
</CButtonClose>
38
</template>
49

510
<script>

‎src/components/Sidebar/CSidebarNav.vue

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
<template>
2-
<nav class="c-sidebar-nav">
3-
<VuePerfectScrollbar
4-
class="c-scroll-area"
5-
:settings="psSettings"
6-
:switcher="!state.minimize"
7-
>
8-
<ul class="c-nav">
9-
<slot></slot>
10-
</ul>
11-
</VuePerfectScrollbar>
12-
</nav>
2+
<CScrollbar
3+
class="c-scroll-area c-sidebar-nav"
4+
:settings="psSettings"
5+
:switcher="!state.minimize"
6+
tag="ul"
7+
>
8+
<slot></slot>
9+
</CScrollbar>
1310
</template>
1411

1512
<script>
16-
import VuePerfectScrollbar from './CPerfectScrollbar'
13+
import CScrollbar from '../Scrollbar/CScrollbar'
1714
1815
export default {
1916
name: 'CSidebarNav',
2017
components: {
21-
VuePerfectScrollbar
18+
CScrollbar
2219
},
2320
inject: {
2421
state: {
@@ -42,6 +39,5 @@ export default {
4239
<style scoped>
4340
.c-scroll-area {
4441
height: 100%;
45-
margin: auto;
4642
}
4743
</style>

‎src/components/Sidebar/CSidebarNavDivider.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template functional>
2-
<li class="c-nav-divider"></li>
2+
<li class="c-sidebar-nav-divider"></li>
33
</template>
44

55
<script>

‎src/components/Sidebar/CSidebarNavDropdown.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<li :class="dropdownClasses">
3-
<a class="c-nav-link c-nav-dropdown-toggle" @click="handleClick">
3+
<a class="c-sidebar-nav-link c-sidebar-nav-dropdown-toggle" @click="handleClick">
44
<i v-if="icon" :class="classIcon"></i>
55
{{name}}
66
</a>
7-
<ul class="c-nav-dropdown-items" @click="itemClicked">
7+
<ul class="c-sidebar-nav-dropdown-items" @click="itemClicked">
88
<slot></slot>
99
</ul>
1010
</li>
@@ -55,12 +55,12 @@ export default {
5555
},
5656
computed: {
5757
classIcon () {
58-
return ['c-nav-icon', this.icon]
58+
return ['c-sidebar-nav-icon', this.icon]
5959
},
6060
dropdownClasses () {
6161
return [
62-
'c-nav-item c-nav-dropdown',
63-
{ 'c-open': this.open }
62+
'c-sidebar-nav-item c-sidebar-nav-dropdown',
63+
{ 'c-show': this.open }
6464
]
6565
}
6666
},

‎src/components/Sidebar/CSidebarNavLink.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<li class="c-nav-item">
2+
<li class="c-sidebar-nav-item">
33
<CLink
44
:class="linkClasses"
55
v-bind="computedLinkProps"
66
@click.native="click"
77
>
88
<slot>
9-
<i :class="['c-nav-icon', icon]"></i>
9+
<i :class="['c-sidebar-nav-icon', icon]"></i>
1010
{{name}}
1111
<CBadge
1212
v-if="badge"
@@ -51,7 +51,7 @@ export default {
5151
},
5252
linkClasses () {
5353
return [
54-
this.label ? 'c-nav-label' : 'c-nav-link',
54+
this.label ? 'c-sidebar-nav-label' : 'c-sidebar-nav-link',
5555
this.addLinkClasses
5656
]
5757
}

‎src/components/Sidebar/CSidebarNavTitle.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template functional>
2-
<li class="c-nav-title">
2+
<li class="c-sidebar-nav-title">
33
<slot></slot>
44
</li>
55
</template>

‎src/components/Sidebar/tests/CSidebarNavDropdown.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ describe(ComponentName, () => {
4343
expect(wrapper.vm.open).toBe(true)
4444
})
4545
it('changes state when clicked on toggle', () => {
46-
wrapper.find('.c-nav-link').trigger('click')
46+
wrapper.find('.c-sidebar-nav-link').trigger('click')
4747
expect(wrapper.vm.open).toBe(false)
4848
expect(wrapper.emitted()['update:show']).toBeTruthy()
4949
})

‎src/components/Sidebar/tests/__snapshots__/CPerfectScrollbar.spec.js.snap

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎src/components/Sidebar/tests/__snapshots__/CSidebar.spec.js.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22

33
exports[`CSidebar .vue renders correctly 1`] = `
44
<div
5-
class="c-sidebar c-sidebar-light c-sidebar-lg-show c-sidebar-right"
5+
class="c-sidebar c-sidebar-light c-sidebar-lg-show c-sidebar-fixed c-sidebar-right"
66
id="sidebar"
77
/>
88
`;
99

1010
exports[`CSidebar .vue renders correctly 2`] = `
1111
<div>
1212
<div
13-
class="c-sidebar c-sidebar-dark c-sidebar-show c-sidebar-lg-show"
13+
class="c-sidebar c-sidebar-dark c-sidebar-show c-sidebar-lg-show c-sidebar-fixed"
1414
>
1515
<a
1616
href="/some-path"

0 commit comments

Comments
 (0)