Skip to content

Commit 351bfc5

Browse files
mrholekmrholek
committed
refactor(CSidebar): update proptypes and nested navigation behavior
1 parent eda6f8e commit 351bfc5

File tree

9 files changed

+123
-585
lines changed

9 files changed

+123
-585
lines changed

‎src/components/sidebar/CCreateNavItem.ts‎

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

‎src/components/sidebar/CSidebar.ts‎

Lines changed: 73 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,89 @@
1-
import { defineComponent, h } from "vue"
1+
import { defineComponent, h } from 'vue'
22

3-
4-
const CSidebarProps = {
5-
/**
6-
* A string of all className you want applied to the base component.
3+
const CSidebar = defineComponent({
4+
name: 'CSidebar',
5+
props: {
6+
/**
7+
* Hide sidebar.
8+
*/
9+
hide: Boolean,
10+
/**
11+
* Make sidebar narrow.
712
*/
8-
className: {
9-
type: String,
10-
required: false
11-
},
12-
// hide?: boolean
1313
narrow: {
14-
type: Boolean,
15-
required: false
14+
type: Boolean,
15+
required: false,
1616
},
1717
/**
18-
* Method called before the hide animation has started.
19-
*/
20-
//onHide?: () => void,
21-
/**
22-
* Method called before the show animation has started.
23-
*/
24-
//onShow?: () => void,
25-
18+
* Set sidebar to overlaid variant.
19+
*/
2620
overlaid: {
27-
type: String,
28-
required: false
21+
type: Boolean,
22+
required: false,
2923
},
24+
/**
25+
* Place sidebar in non-static positions.
26+
*/
3027
position: {
31-
type: String,
32-
validator: function(value:string) {
33-
return ['fixed','sticky'].includes(value)
34-
}
28+
type: String,
29+
default: undefined,
30+
validator: (value: string) => {
31+
return ['fixed'].includes(value)
32+
},
3533
},
34+
/**
35+
* Make any sidebar self hiding across all viewports or pick a maximum breakpoint with which to have a self hiding up to.
36+
*
37+
* @values 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'
38+
*/
3639
selfHiding: {
37-
validator: function(value:any) {
38-
if(typeof value === 'string'){
39-
return ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
40-
}else if( typeof value === 'boolean' ){
41-
return true
42-
}else{
43-
return false
44-
}
45-
}
46-
},
47-
show: {
48-
type: String,
49-
required: false
40+
type: [Boolean, String],
41+
default: undefined,
42+
validator: (value: boolean | string) => {
43+
if (typeof value === 'string') {
44+
return ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
45+
} else if (typeof value === 'boolean') {
46+
return true
47+
} else {
48+
return false
49+
}
50+
},
5051
},
52+
/**
53+
* Expand narrowed sidebar on hover.
54+
*/
5155
unfoldable: {
52-
type: String,
53-
required: false
54-
}
55-
}
56-
57-
const CSidebar = defineComponent({
58-
name: 'CSidebar',
59-
props: CSidebarProps,
60-
setup ( props, { slots }) {
61-
return () => h(
62-
'div',
63-
{
64-
class: [
65-
'sidebar',
66-
{
67-
'sidebar-narrow': props.narrow,
68-
'sidebar-overlaid': props.overlaid,
69-
[`sidebar-${props.position}`]: props.position,
70-
[`sidebar-self-hiding${typeof props.selfHiding !== 'boolean' && '-' + props.selfHiding}`]: props.selfHiding,
71-
'sidebar-narrow-unfoldable': props.unfoldable,
72-
'show': props.show,
73-
},
74-
props.className,
75-
],
56+
type: String,
57+
default: undefined,
58+
required: false,
59+
},
60+
/**
61+
* Toggle the visibility of sidebar component.
62+
*/
63+
visible: Boolean,
64+
},
65+
setup(props, { slots }) {
66+
return () =>
67+
h(
68+
'div',
69+
{
70+
class: [
71+
'sidebar',
72+
{
73+
'sidebar-narrow': props.narrow,
74+
'sidebar-overlaid': props.overlaid,
75+
[`sidebar-${props.position}`]: props.position,
76+
[`sidebar-self-hiding${
77+
typeof props.selfHiding !== 'boolean' && '-' + props.selfHiding
78+
}`]: props.selfHiding,
79+
'sidebar-narrow-unfoldable': props.unfoldable,
80+
show: props.visible,
81+
},
82+
],
7683
},
77-
slots.default && slots.default()
84+
slots.default && slots.default(),
7885
)
79-
}
86+
},
8087
})
8188

82-
export { CSidebar }
89+
export { CSidebar }

‎src/components/sidebar/CSidebarBrand.ts‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,10 @@
1-
import { defineComponent, h } from "vue"
2-
3-
const CSidebarBrandProps = {
4-
/**
5-
* A string of all className you want applied to the base component.
6-
*/
7-
className: {
8-
type: String,
9-
required: false
10-
}
11-
}
1+
import { defineComponent, h } from 'vue'
122

133
const CSidebarBrand = defineComponent({
144
name: 'CSidebarBrand',
15-
props: CSidebarBrandProps,
16-
setup ( props, { slots }) {
17-
return () => h(
18-
'div',
19-
{ class: ['sidebar-brand', props.className] },
20-
slots.default && slots.default()
21-
)
22-
}
5+
setup(_, { slots }) {
6+
return () => h('div', { class: 'sidebar-brand' }, slots.default && slots.default())
7+
},
238
})
249

25-
export { CSidebarBrand }
10+
export { CSidebarBrand }

‎src/components/sidebar/CSidebarFooter.ts‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,10 @@
1-
import { defineComponent, h } from "vue"
2-
3-
const CSidebarFooterProps = {
4-
/**
5-
* A string of all className you want applied to the base component.
6-
*/
7-
className: {
8-
type: String,
9-
required: false
10-
}
11-
}
1+
import { defineComponent, h } from 'vue'
122

133
const CSidebarFooter = defineComponent({
144
name: 'CSidebarFooter',
15-
props: CSidebarFooterProps,
16-
setup ( props, { slots }) {
17-
return () => h(
18-
'div',
19-
{ class: ['sidebar-footer', props.className] },
20-
slots.default && slots.default()
21-
)
22-
}
5+
setup(_, { slots }) {
6+
return () => h('div', { class: 'sidebar-footer' }, slots.default && slots.default())
7+
},
238
})
249

25-
export { CSidebarFooter }
10+
export { CSidebarFooter }

‎src/components/sidebar/CSidebarHeader.ts‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,10 @@
1-
import { defineComponent, h } from "vue"
2-
3-
const CSidebarHeaderProps = {
4-
/**
5-
* A string of all className you want applied to the base component.
6-
*/
7-
className: {
8-
type: String,
9-
required: false
10-
}
11-
}
1+
import { defineComponent, h } from 'vue'
122

133
const CSidebarHeader = defineComponent({
144
name: 'CSidebarHeader',
15-
props: CSidebarHeaderProps,
16-
setup ( props, { slots }) {
17-
return () => h(
18-
'div',
19-
{ class: ['sidebar-header', props.className] },
20-
slots.default && slots.default()
21-
)
22-
}
5+
setup(_, { slots }) {
6+
return () => h('div', { class: 'sidebar-header' }, slots.default && slots.default())
7+
},
238
})
249

25-
export { CSidebarHeader }
10+
export { CSidebarHeader }

‎src/components/sidebar/CSidebarNav.ts‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,37 @@
1-
import { defineComponent, h } from "vue"
2-
3-
const CSidebarNavProps = {
4-
/**
5-
* A string of all className you want applied to the base component.
6-
*/
7-
className: {
8-
type: String,
9-
required: false
10-
}
11-
}
1+
import { defineComponent, h, ref } from 'vue'
122

133
const CSidebarNav = defineComponent({
144
name: 'CSidebarNav',
15-
props: CSidebarNavProps,
16-
setup ( props, { slots }) {
17-
return () => h(
18-
'ul',
19-
{
20-
class: ['sidebar-nav', props.className],
5+
setup(_, { slots }) {
6+
const visibleGroup = ref()
7+
8+
const handleVisibleChange = (visible: boolean, index: number) => {
9+
if (visible) {
10+
visibleGroup.value = index
11+
} else {
12+
if (visibleGroup.value === index) {
13+
visibleGroup.value = 0
14+
}
15+
}
16+
}
17+
18+
const isVisible = (index: number) => Boolean(visibleGroup.value === index)
19+
20+
return () =>
21+
h(
22+
'ul',
23+
{
24+
class: 'sidebar-nav',
2125
},
22-
slots.default && slots.default()
26+
slots.default &&
27+
slots.default().map((vnode, index) =>
28+
h(vnode, {
29+
onVisibleChange: (visible: boolean) => handleVisibleChange(visible, index),
30+
visible: isVisible(index),
31+
}),
32+
),
2333
)
24-
}
34+
},
2535
})
2636

27-
export { CSidebarNav }
37+
export { CSidebarNav }

‎src/components/sidebar/CSidebarToggler.ts‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,10 @@
1-
import { defineComponent, h } from "vue"
2-
3-
const CSidebarTogglerProps = {
4-
/**
5-
* A string of all className you want applied to the base component.
6-
*/
7-
className: {
8-
type: String,
9-
required: false
10-
}
11-
}
1+
import { defineComponent, h } from 'vue'
122

133
const CSidebarToggler = defineComponent({
144
name: 'CSidebarToggler',
15-
props: CSidebarTogglerProps,
16-
setup ( props, { slots }) {
17-
return () => h(
18-
'button',
19-
{ class: ['sidebar-toggler', props.className] },
20-
slots.default && slots.default()
21-
)
22-
}
5+
setup(_, { slots }) {
6+
return () => h('button', { class: 'sidebar-toggler' }, slots.default && slots.default())
7+
},
238
})
249

25-
export { CSidebarToggler }
10+
export { CSidebarToggler }

‎src/components/sidebar/index.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { App } from 'vue'
2-
import { CCreateNavItem } from './CCreateNavItem'
32
import { CSidebar } from './CSidebar'
43
import { CSidebarBrand } from './CSidebarBrand'
54
import { CSidebarFooter } from './CSidebarFooter'
@@ -9,7 +8,6 @@ import { CSidebarToggler } from './CSidebarToggler'
98

109
const CSidebarPlugin = {
1110
install: (app: App): void => {
12-
app.component(CCreateNavItem.name, CCreateNavItem)
1311
app.component(CSidebar.name, CSidebar)
1412
app.component(CSidebarBrand.name, CSidebarBrand)
1513
app.component(CSidebarFooter.name, CSidebarFooter)
@@ -21,7 +19,6 @@ const CSidebarPlugin = {
2119

2220
export {
2321
CSidebarPlugin,
24-
CCreateNavItem,
2522
CSidebar,
2623
CSidebarBrand,
2724
CSidebarFooter,

0 commit comments

Comments
 (0)