Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit351bfc5

Browse files
committed
refactor(CSidebar): update proptypes and nested navigation behavior
1 parenteda6f8e commit351bfc5

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-
constCSidebarProps={
5-
/**
6-
* A string of all className you want applied to the base component.
3+
constCSidebar=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(typeofvalue==='string'){
39-
return['xs','sm','md','lg','xl','xxl'].includes(value)
40-
}elseif(typeofvalue==='boolean'){
41-
returntrue
42-
}else{
43-
returnfalse
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(typeofvalue==='string'){
44+
return['xs','sm','md','lg','xl','xxl'].includes(value)
45+
}elseif(typeofvalue==='boolean'){
46+
returntrue
47+
}else{
48+
returnfalse
49+
}
50+
},
5051
},
52+
/**
53+
* Expand narrowed sidebar on hover.
54+
*/
5155
unfoldable:{
52-
type:String,
53-
required:false
54-
}
55-
}
56-
57-
constCSidebar=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${typeofprops.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+
typeofprops.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}
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-
constCSidebarBrandProps={
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
constCSidebarBrand=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}
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-
constCSidebarFooterProps={
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
constCSidebarFooter=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}
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-
constCSidebarHeaderProps={
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
constCSidebarHeader=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}
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-
constCSidebarNavProps={
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
constCSidebarNav=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+
constvisibleGroup=ref()
7+
8+
consthandleVisibleChange=(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+
constisVisible=(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}
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-
constCSidebarTogglerProps={
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
constCSidebarToggler=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
constCSidebarPlugin={
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)
[8]ページ先頭
©2009-2025 Movatter.jp