@v-c/collapse 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Collapse.cjs +1 -1
- package/dist/Collapse.js +25 -23
- package/dist/Panel.cjs +1 -1
- package/dist/Panel.js +31 -30
- package/dist/PanelContent.cjs +1 -1
- package/dist/PanelContent.js +11 -11
- package/dist/hooks/useItems.cjs +1 -1
- package/dist/hooks/useItems.d.ts +1 -1
- package/dist/hooks/useItems.js +61 -55
- package/dist/interface.cjs +1 -1
- package/dist/interface.d.ts +3 -68
- package/dist/interface.js +1 -69
- package/docs/collapse.stories.vue +3 -1
- package/package.json +1 -1
- package/src/Collapse.tsx +2 -0
- package/src/Panel.tsx +4 -3
- package/src/PanelContent.tsx +1 -1
- package/src/hooks/useItems.tsx +8 -1
- package/src/interface.ts +3 -75
package/dist/Collapse.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),N=require("@v-c/util"),x=require("@v-c/util/dist/hooks/useMergedState"),O=require("@v-c/util/dist/pickAttrs"),h=require("./hooks/useItems.cjs");function I(t){let r=t;if(!Array.isArray(r)){const a=typeof r;r=a==="number"||a==="string"?[r]:[]}return r.map(a=>String(a))}const M={prefixCls:"vc-collapse"},j=i.defineComponent({props:i.mergeDefaults({prefixCls:{type:String,required:!1},activeKey:{type:[String,Number,Array],required:!1},defaultActiveKey:{type:[String,Number,Array],required:!1},openMotion:{type:null,required:!1},onChange:{type:Function,required:!1},accordion:{type:Boolean,required:!1},className:{type:String,required:!1},style:{type:Object,required:!1},destroyOnHidden:{type:Boolean,required:!1},expandIcon:{type:Function,required:!1},collapsible:{type:String,required:!1},items:{type:Array,required:!1},classNames:{type:Object,required:!1},styles:{type:Object,required:!1}},M),name:"VcCollapse",inheritAttrs:!1,setup(t,{attrs:r,expose:a,slots:d}){const n=i.ref(),[s,f]=x([],{value:i.toRef(t,"activeKey"),onChange:e=>t.onChange?.(e),defaultValue:t.defaultActiveKey,postState:I}),y=e=>t.accordion?s.value[0]===e?[]:[e]:s.value.indexOf(e)>-1?s.value.filter(l=>l!==e):[...s.value,e],p=e=>{s.value=y(e),f(s.value)};return a({ref:n}),()=>{const{prefixCls:e="vc-collapse",className:c,style:u,openMotion:l,expandIcon:v,collapsible:m,accordion:o,classNames:g,styles:q,items:A,destroyOnHidden:C}=t,b=N.classNames(e,c),K={...t,...r},S=h.useItems(A,d.default,{prefixCls:e,accordion:o,openMotion:l,expandIcon:v,collapsible:m,onItemClick:p,activeKey:s.value,destroyOnHidden:C,classNames:g,styles:q});return i.createVNode("div",i.mergeProps({ref:n,class:b,style:u,role:o?"tablist":void 0},O(K,{aria:!0,data:!0})),[S])}}});exports.default=j;
|
package/dist/Collapse.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { classNames as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { useItems as
|
|
6
|
-
function
|
|
1
|
+
import { defineComponent as b, mergeDefaults as x, ref as S, toRef as O, createVNode as h, mergeProps as I } from "vue";
|
|
2
|
+
import { classNames as j } from "@v-c/util";
|
|
3
|
+
import M from "@v-c/util/dist/hooks/useMergedState";
|
|
4
|
+
import V from "@v-c/util/dist/pickAttrs";
|
|
5
|
+
import { useItems as B } from "./hooks/useItems.js";
|
|
6
|
+
function F(t) {
|
|
7
7
|
let r = t;
|
|
8
8
|
if (!Array.isArray(r)) {
|
|
9
9
|
const s = typeof r;
|
|
@@ -11,10 +11,10 @@ function B(t) {
|
|
|
11
11
|
}
|
|
12
12
|
return r.map((s) => String(s));
|
|
13
13
|
}
|
|
14
|
-
const
|
|
14
|
+
const H = {
|
|
15
15
|
prefixCls: "vc-collapse"
|
|
16
|
-
},
|
|
17
|
-
props: /* @__PURE__ */
|
|
16
|
+
}, $ = /* @__PURE__ */ b({
|
|
17
|
+
props: /* @__PURE__ */ x({
|
|
18
18
|
prefixCls: {
|
|
19
19
|
type: String,
|
|
20
20
|
required: !1
|
|
@@ -71,7 +71,7 @@ const F = {
|
|
|
71
71
|
type: Object,
|
|
72
72
|
required: !1
|
|
73
73
|
}
|
|
74
|
-
},
|
|
74
|
+
}, H),
|
|
75
75
|
name: "VcCollapse",
|
|
76
76
|
inheritAttrs: !1,
|
|
77
77
|
setup(t, {
|
|
@@ -79,13 +79,13 @@ const F = {
|
|
|
79
79
|
expose: s,
|
|
80
80
|
slots: u
|
|
81
81
|
}) {
|
|
82
|
-
const l =
|
|
83
|
-
value:
|
|
82
|
+
const l = S(), [a, d] = M([], {
|
|
83
|
+
value: O(t, "activeKey"),
|
|
84
84
|
onChange: (e) => t.onChange?.(e),
|
|
85
85
|
defaultValue: t.defaultActiveKey,
|
|
86
|
-
postState:
|
|
87
|
-
}),
|
|
88
|
-
a.value =
|
|
86
|
+
postState: F
|
|
87
|
+
}), f = (e) => t.accordion ? a.value[0] === e ? [] : [e] : a.value.indexOf(e) > -1 ? a.value.filter((i) => i !== e) : [...a.value, e], p = (e) => {
|
|
88
|
+
a.value = f(e), d(a.value);
|
|
89
89
|
};
|
|
90
90
|
return s({
|
|
91
91
|
ref: l
|
|
@@ -100,11 +100,12 @@ const F = {
|
|
|
100
100
|
accordion: c,
|
|
101
101
|
classNames: v,
|
|
102
102
|
styles: g,
|
|
103
|
-
items: A
|
|
104
|
-
|
|
103
|
+
items: A,
|
|
104
|
+
destroyOnHidden: q
|
|
105
|
+
} = t, C = j(e, n), K = {
|
|
105
106
|
...t,
|
|
106
107
|
...r
|
|
107
|
-
},
|
|
108
|
+
}, N = B(A, u.default, {
|
|
108
109
|
prefixCls: e,
|
|
109
110
|
accordion: c,
|
|
110
111
|
openMotion: i,
|
|
@@ -112,21 +113,22 @@ const F = {
|
|
|
112
113
|
collapsible: m,
|
|
113
114
|
onItemClick: p,
|
|
114
115
|
activeKey: a.value,
|
|
116
|
+
destroyOnHidden: q,
|
|
115
117
|
classNames: v,
|
|
116
118
|
styles: g
|
|
117
119
|
});
|
|
118
|
-
return h("div",
|
|
120
|
+
return h("div", I({
|
|
119
121
|
ref: l,
|
|
120
|
-
class:
|
|
122
|
+
class: C,
|
|
121
123
|
style: o,
|
|
122
124
|
role: c ? "tablist" : void 0
|
|
123
|
-
},
|
|
125
|
+
}, V(K, {
|
|
124
126
|
aria: !0,
|
|
125
127
|
data: !0
|
|
126
|
-
})), [
|
|
128
|
+
})), [N]);
|
|
127
129
|
};
|
|
128
130
|
}
|
|
129
131
|
});
|
|
130
132
|
export {
|
|
131
|
-
|
|
133
|
+
$ as default
|
|
132
134
|
};
|
package/dist/Panel.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("@v-c/util"),y=require("@v-c/util/dist/KeyCode"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("@v-c/util"),y=require("@v-c/util/dist/KeyCode"),O=require("@v-c/util/dist/omit"),R=require("./PanelContent.cjs"),B={showArrow:!0,classNames:{},styles:{}},j=e.defineComponent({props:e.mergeDefaults({id:{type:String,required:!1},header:{type:null,required:!1},prefixCls:{type:String,required:!1},headerClass:{type:String,required:!1},showArrow:{type:Boolean,required:!1},class:{type:String,required:!1},classNames:{type:Object,required:!1},style:{type:Object,required:!1},styles:{type:Object,required:!1},isActive:{type:Boolean,required:!1},openMotion:{type:null,required:!1},destroyOnHidden:{type:Boolean,required:!1},accordion:{type:Boolean,required:!1},forceRender:{type:Boolean,required:!1},extra:{type:null,required:!1},onItemClick:{type:Function,required:!1},expandIcon:{type:Function,required:!1},panelKey:{type:[String,Number],required:!1},role:{type:String,required:!1},collapsible:{type:String,required:!1},children:{type:null,required:!1}},B),name:"CollapsePanel",inheritAttrs:!1,setup(a,{attrs:m,expose:q}){const d=e.computed(()=>a.collapsible==="disabled"),u=e.ref(),N=e.computed(()=>a.extra!==null&&a.extra!==void 0&&typeof a.extra!="boolean"),c=e.computed(()=>({onClick:()=>{a.onItemClick?.(a.panelKey)},onKeydown:l=>{(l.key==="Enter"||l.keyCode===y.ENTER||l.which===y.ENTER)&&a.onItemClick?.(a.panelKey)},role:a.accordion?"tab":"button","aria-expanded":a.isActive,"aria-disabled":d.value,tabIndex:d.value?-1:0}));return q({ref:u}),()=>{const{extra:l,prefixCls:s,isActive:r,class:h,expandIcon:f,forceRender:v,headerClass:C,collapsible:t,accordion:b,openMotion:x={},onItemClick:M,classNames:n={},showArrow:g=!0,destroyOnHidden:P,styles:i={},header:w,panelKey:T,children:S,...$}=a,A=o.classNames(`${s}-item`,{[`${s}-item-active`]:r,[`${s}-item-disabled`]:d.value},h),I={class:o.classNames(C,`${s}-header`,{[`${s}-collapsible-${t}`]:!!t},n.header),style:i.header,...["header","icon"].includes(t)?{}:c.value},p=typeof f=="function"?f(a):e.createVNode("i",{class:"arrow"},null),V=p&&e.createVNode("div",e.mergeProps({class:o.classNames(`${s}-expand-icon`,n?.icon),style:i?.icon},["header","icon"].includes(t)?c.value:{}),[p]),k=e.withDirectives(e.createVNode(R.default,{prefixCls:s,classNames:n,styles:i,isActive:r,forceRender:v,role:b?"tabpanel":void 0},{default:()=>S}),[[e.vShow,r]]),E={appear:!1,"leave-to-class":`${s}-panel-hidden`,...x},K={...$,...O(m,["class"])};return e.createVNode("div",e.mergeProps(K,{ref:u,class:A}),[e.createVNode("div",I,[g&&V,e.createVNode("span",e.mergeProps({class:o.classNames(`${s}-title`,n?.title),style:i?.title},t==="header"?c.value:{}),[w]),N.value&&e.createVNode("div",{class:`${s}-extra`},[l])]),e.createVNode(e.Transition,E,{default:()=>[!P||r?k:null]})])}}});exports.default=j;
|
package/dist/Panel.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as j, mergeDefaults as T, computed as u, ref as D, createVNode as l, mergeProps as f, withDirectives as F, vShow as H, Transition as M } from "vue";
|
|
2
2
|
import { classNames as o } from "@v-c/util";
|
|
3
3
|
import h from "@v-c/util/dist/KeyCode";
|
|
4
|
-
import z from "@v-c/util/dist/omit
|
|
5
|
-
import
|
|
6
|
-
const
|
|
4
|
+
import z from "@v-c/util/dist/omit";
|
|
5
|
+
import V from "./PanelContent.js";
|
|
6
|
+
const W = {
|
|
7
7
|
showArrow: !0,
|
|
8
8
|
classNames: {},
|
|
9
9
|
styles: {}
|
|
10
|
-
},
|
|
11
|
-
props: /* @__PURE__ */
|
|
10
|
+
}, _ = /* @__PURE__ */ j({
|
|
11
|
+
props: /* @__PURE__ */ T({
|
|
12
12
|
id: {
|
|
13
13
|
type: String,
|
|
14
14
|
required: !1
|
|
@@ -29,7 +29,7 @@ const V = {
|
|
|
29
29
|
type: Boolean,
|
|
30
30
|
required: !1
|
|
31
31
|
},
|
|
32
|
-
|
|
32
|
+
class: {
|
|
33
33
|
type: String,
|
|
34
34
|
required: !1
|
|
35
35
|
},
|
|
@@ -93,14 +93,14 @@ const V = {
|
|
|
93
93
|
type: null,
|
|
94
94
|
required: !1
|
|
95
95
|
}
|
|
96
|
-
},
|
|
96
|
+
}, W),
|
|
97
97
|
name: "CollapsePanel",
|
|
98
98
|
inheritAttrs: !1,
|
|
99
99
|
setup(e, {
|
|
100
100
|
attrs: q,
|
|
101
101
|
expose: C
|
|
102
102
|
}) {
|
|
103
|
-
const d = u(() => e.collapsible === "disabled"), p =
|
|
103
|
+
const d = u(() => e.collapsible === "disabled"), p = D(), v = u(() => e.extra !== null && e.extra !== void 0 && typeof e.extra != "boolean"), c = u(() => ({
|
|
104
104
|
onClick: () => {
|
|
105
105
|
e.onItemClick?.(e.panelKey);
|
|
106
106
|
},
|
|
@@ -119,25 +119,26 @@ const V = {
|
|
|
119
119
|
extra: s,
|
|
120
120
|
prefixCls: a,
|
|
121
121
|
isActive: t,
|
|
122
|
-
|
|
122
|
+
class: b,
|
|
123
123
|
expandIcon: y,
|
|
124
124
|
forceRender: x,
|
|
125
125
|
headerClass: N,
|
|
126
126
|
collapsible: r,
|
|
127
127
|
accordion: w,
|
|
128
128
|
openMotion: g = {},
|
|
129
|
-
onItemClick:
|
|
129
|
+
onItemClick: G,
|
|
130
130
|
classNames: n = {},
|
|
131
131
|
showArrow: P = !0,
|
|
132
|
+
destroyOnHidden: $,
|
|
132
133
|
styles: i = {},
|
|
133
|
-
header:
|
|
134
|
-
panelKey:
|
|
135
|
-
children:
|
|
136
|
-
...
|
|
137
|
-
} = e,
|
|
134
|
+
header: A,
|
|
135
|
+
panelKey: J,
|
|
136
|
+
children: I,
|
|
137
|
+
...S
|
|
138
|
+
} = e, k = o(`${a}-item`, {
|
|
138
139
|
[`${a}-item-active`]: t,
|
|
139
140
|
[`${a}-item-disabled`]: d.value
|
|
140
|
-
}, b),
|
|
141
|
+
}, b), E = {
|
|
141
142
|
class: o(N, `${a}-header`, {
|
|
142
143
|
[`${a}-collapsible-${r}`]: !!r
|
|
143
144
|
}, n.header),
|
|
@@ -145,10 +146,10 @@ const V = {
|
|
|
145
146
|
...["header", "icon"].includes(r) ? {} : c.value
|
|
146
147
|
}, m = typeof y == "function" ? y(e) : l("i", {
|
|
147
148
|
class: "arrow"
|
|
148
|
-
}, null),
|
|
149
|
+
}, null), K = m && l("div", f({
|
|
149
150
|
class: o(`${a}-expand-icon`, n?.icon),
|
|
150
151
|
style: i?.icon
|
|
151
|
-
}, ["header", "icon"].includes(r) ? c.value : {}), [m]),
|
|
152
|
+
}, ["header", "icon"].includes(r) ? c.value : {}), [m]), R = F(l(V, {
|
|
152
153
|
prefixCls: a,
|
|
153
154
|
classNames: n,
|
|
154
155
|
styles: i,
|
|
@@ -156,29 +157,29 @@ const V = {
|
|
|
156
157
|
forceRender: x,
|
|
157
158
|
role: w ? "tabpanel" : void 0
|
|
158
159
|
}, {
|
|
159
|
-
default: () =>
|
|
160
|
-
}), [[
|
|
160
|
+
default: () => I
|
|
161
|
+
}), [[H, t]]), B = {
|
|
161
162
|
appear: !1,
|
|
162
163
|
"leave-to-class": `${a}-panel-hidden`,
|
|
163
164
|
...g
|
|
164
|
-
},
|
|
165
|
-
...
|
|
165
|
+
}, O = {
|
|
166
|
+
...S,
|
|
166
167
|
...z(q, ["class"])
|
|
167
168
|
};
|
|
168
|
-
return l("div", f(
|
|
169
|
+
return l("div", f(O, {
|
|
169
170
|
ref: p,
|
|
170
|
-
class:
|
|
171
|
-
}), [l("div",
|
|
171
|
+
class: k
|
|
172
|
+
}), [l("div", E, [P && K, l("span", f({
|
|
172
173
|
class: o(`${a}-title`, n?.title),
|
|
173
174
|
style: i?.title
|
|
174
|
-
}, r === "header" ? c.value : {}), [
|
|
175
|
+
}, r === "header" ? c.value : {}), [A]), v.value && l("div", {
|
|
175
176
|
class: `${a}-extra`
|
|
176
|
-
}, [s])]), l(M,
|
|
177
|
-
default: () => [t ?
|
|
177
|
+
}, [s])]), l(M, B, {
|
|
178
|
+
default: () => [!$ || t ? R : null]
|
|
178
179
|
})]);
|
|
179
180
|
};
|
|
180
181
|
}
|
|
181
182
|
});
|
|
182
183
|
export {
|
|
183
|
-
|
|
184
|
+
_ as default
|
|
184
185
|
};
|
package/dist/PanelContent.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),a=require("@v-c/util"),f=r.defineComponent({props:{id:{type:String,required:!1},header:{type:null,required:!1},prefixCls:{type:String,required:!1},headerClass:{type:String,required:!1},showArrow:{type:Boolean,required:!1},
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("vue"),a=require("@v-c/util"),f=r.defineComponent({props:{id:{type:String,required:!1},header:{type:null,required:!1},prefixCls:{type:String,required:!1},headerClass:{type:String,required:!1},showArrow:{type:Boolean,required:!1},class:{type:String,required:!1},classNames:{type:Object,required:!1},style:{type:Object,required:!1},styles:{type:Object,required:!1},isActive:{type:Boolean,required:!1},openMotion:{type:null,required:!1},destroyOnHidden:{type:Boolean,required:!1},accordion:{type:Boolean,required:!1},forceRender:{type:Boolean,required:!1},extra:{type:null,required:!1},onItemClick:{type:Function,required:!1},expandIcon:{type:Function,required:!1},panelKey:{type:[String,Number],required:!1},role:{type:String,required:!1},collapsible:{type:String,required:!1},children:{type:null,required:!1}},name:"PanelContent",inheritAttrs:!1,setup(e,{slots:i}){const l=r.ref(e.isActive||e.forceRender);return r.watch(()=>[e.isActive,e.forceRender],()=>{(e.isActive||e.forceRender)&&(l.value=!0)}),()=>{if(!l.value)return null;const{prefixCls:t,isActive:s,style:n,role:d,class:u,classNames:o,styles:c}=e;return r.createVNode("div",{class:a.classNames(`${t}-panel`,{[`${t}-panel-active`]:s,[`${t}-panel-inactive`]:!s},u),style:n,role:d},[r.createVNode("div",{class:a.classNames(`${t}-body`,o?.body),style:c?.body},[i.default?.()])])}}});exports.default=f;
|
package/dist/PanelContent.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { classNames as
|
|
3
|
-
const v = /* @__PURE__ */
|
|
1
|
+
import { defineComponent as f, ref as y, watch as p, createVNode as s } from "vue";
|
|
2
|
+
import { classNames as a } from "@v-c/util";
|
|
3
|
+
const v = /* @__PURE__ */ f({
|
|
4
4
|
props: {
|
|
5
5
|
id: {
|
|
6
6
|
type: String,
|
|
@@ -22,7 +22,7 @@ const v = /* @__PURE__ */ c({
|
|
|
22
22
|
type: Boolean,
|
|
23
23
|
required: !1
|
|
24
24
|
},
|
|
25
|
-
|
|
25
|
+
class: {
|
|
26
26
|
type: String,
|
|
27
27
|
required: !1
|
|
28
28
|
},
|
|
@@ -103,20 +103,20 @@ const v = /* @__PURE__ */ c({
|
|
|
103
103
|
isActive: l,
|
|
104
104
|
style: n,
|
|
105
105
|
role: d,
|
|
106
|
-
|
|
106
|
+
class: o,
|
|
107
107
|
classNames: u,
|
|
108
|
-
styles:
|
|
108
|
+
styles: c
|
|
109
109
|
} = e;
|
|
110
|
-
return
|
|
111
|
-
class:
|
|
110
|
+
return s("div", {
|
|
111
|
+
class: a(`${r}-panel`, {
|
|
112
112
|
[`${r}-panel-active`]: l,
|
|
113
113
|
[`${r}-panel-inactive`]: !l
|
|
114
114
|
}, o),
|
|
115
115
|
style: n,
|
|
116
116
|
role: d
|
|
117
|
-
}, [
|
|
118
|
-
class:
|
|
119
|
-
style:
|
|
117
|
+
}, [s("div", {
|
|
118
|
+
class: a(`${r}-body`, u?.body),
|
|
119
|
+
style: c?.body
|
|
120
120
|
}, [i.default?.()])]);
|
|
121
121
|
};
|
|
122
122
|
}
|
package/dist/hooks/useItems.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("vue"),q=require("@v-c/util/dist/Children/toArray"),w=require("@v-c/util/dist/props-util"),K=require("@v-c/util/dist/vnode"),P=require("../Panel.cjs");function h(e,c){const{prefixCls:t,accordion:o,collapsible:l,onItemClick:u,activeKey:d,openMotion:p,expandIcon:m,destroyOnHidden:f,classNames:C,styles:b}=c;return e.map((k,r)=>{const{label:I,key:O,collapsible:g,onItemClick:H,destroyOnHidden:N,...a}=k,n=String(O??r),y=g??l,i=N??f,s=A=>{y!=="disabled"&&(u?.(A),H?.(A))};let v=!1;return o?v=d?.[0]===n:v=d.includes(n),x.createVNode(P.default,x.mergeProps(a,{classNames:C,styles:b,prefixCls:t,key:n,panelKey:n,isActive:v,accordion:o,openMotion:p,expandIcon:m,header:I,destroyOnHidden:i,collapsible:y,onItemClick:s}),null)})}function E(e,c,t){if(w.isEmptyElement(e)||!e)return null;if(typeof e=="boolean"||typeof e=="number"||typeof e=="string")return e;const{prefixCls:o,accordion:l,collapsible:u,onItemClick:d,activeKey:p,openMotion:m,expandIcon:f,classNames:C,styles:b,destroyOnHidden:k}=t,r=e.key||String(c),{header:I,headerClass:O,collapsible:g,onItemClick:H,destroyOnHidden:N}=e.props||{};let a=!1;l?a=p[0]===r:a=p.includes(r);const n=g??u,y=s=>{n!=="disabled"&&(d?.(s),H?.(s))},i={key:r,panelKey:r,header:I,headerClass:O,classNames:C,styles:b,isActive:a,prefixCls:o,destroyOnHidden:N??k,openMotion:m,accordion:l,children:e.children?.default?.(),onItemClick:y,expandIcon:f,collapsible:n};return Object.keys(i).forEach(s=>{typeof i[s]>"u"&&delete i[s]}),K.cloneElement(e,i)}function M(e,c,t){return Array.isArray(e)?h(e,t):q.toArray(c?.()).map((o,l)=>E(o,l,t))}exports.useItems=M;
|
package/dist/hooks/useItems.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { RendererElement, RendererNode, VNode, VNodeNormalizedChildren } from 'vue';
|
|
2
2
|
import { CollapsePanelProps, CollapseProps, ItemType, Key } from '../interface';
|
|
3
|
-
type Props = Pick<CollapsePanelProps, 'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon' | 'classNames' | 'styles'> & Pick<CollapseProps, 'accordion' | 'collapsible'> & {
|
|
3
|
+
type Props = Pick<CollapsePanelProps, 'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon' | 'classNames' | 'styles'> & Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyOnHidden'> & {
|
|
4
4
|
activeKey: Key[];
|
|
5
5
|
};
|
|
6
6
|
export declare function useItems(items?: ItemType[], children?: () => VNode | VNodeNormalizedChildren, props?: Props): (VNode<RendererNode, RendererElement, {
|
package/dist/hooks/useItems.js
CHANGED
|
@@ -1,94 +1,100 @@
|
|
|
1
|
-
import { createVNode as
|
|
2
|
-
import { toArray as
|
|
3
|
-
import { isEmptyElement as
|
|
1
|
+
import { createVNode as w, mergeProps as K } from "vue";
|
|
2
|
+
import { toArray as h } from "@v-c/util/dist/Children/toArray";
|
|
3
|
+
import { isEmptyElement as v } from "@v-c/util/dist/props-util";
|
|
4
4
|
import { cloneElement as E } from "@v-c/util/dist/vnode";
|
|
5
5
|
import P from "../Panel.js";
|
|
6
|
-
function
|
|
6
|
+
function D(e, a) {
|
|
7
7
|
const {
|
|
8
8
|
prefixCls: s,
|
|
9
|
-
accordion:
|
|
9
|
+
accordion: l,
|
|
10
10
|
collapsible: t,
|
|
11
11
|
onItemClick: y,
|
|
12
|
-
activeKey:
|
|
13
|
-
openMotion:
|
|
14
|
-
expandIcon:
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
activeKey: d,
|
|
13
|
+
openMotion: p,
|
|
14
|
+
expandIcon: f,
|
|
15
|
+
destroyOnHidden: C,
|
|
16
|
+
classNames: u,
|
|
17
|
+
styles: b
|
|
17
18
|
} = a;
|
|
18
|
-
return e.map((
|
|
19
|
+
return e.map((k, r) => {
|
|
19
20
|
const {
|
|
20
|
-
label:
|
|
21
|
-
key:
|
|
22
|
-
collapsible:
|
|
21
|
+
label: I,
|
|
22
|
+
key: O,
|
|
23
|
+
collapsible: H,
|
|
23
24
|
onItemClick: g,
|
|
25
|
+
destroyOnHidden: N,
|
|
24
26
|
...c
|
|
25
|
-
} =
|
|
26
|
-
|
|
27
|
+
} = k, n = String(O ?? r), m = H ?? t, i = N ?? C, o = (A) => {
|
|
28
|
+
m !== "disabled" && (y?.(A), g?.(A));
|
|
27
29
|
};
|
|
28
|
-
let
|
|
29
|
-
return
|
|
30
|
-
classNames:
|
|
31
|
-
styles:
|
|
30
|
+
let x = !1;
|
|
31
|
+
return l ? x = d?.[0] === n : x = d.includes(n), w(P, K(c, {
|
|
32
|
+
classNames: u,
|
|
33
|
+
styles: b,
|
|
32
34
|
prefixCls: s,
|
|
33
|
-
key:
|
|
34
|
-
panelKey:
|
|
35
|
-
isActive:
|
|
36
|
-
accordion:
|
|
37
|
-
openMotion:
|
|
38
|
-
expandIcon:
|
|
39
|
-
header:
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
key: n,
|
|
36
|
+
panelKey: n,
|
|
37
|
+
isActive: x,
|
|
38
|
+
accordion: l,
|
|
39
|
+
openMotion: p,
|
|
40
|
+
expandIcon: f,
|
|
41
|
+
header: I,
|
|
42
|
+
destroyOnHidden: i,
|
|
43
|
+
collapsible: m,
|
|
44
|
+
onItemClick: o
|
|
42
45
|
}), null);
|
|
43
46
|
});
|
|
44
47
|
}
|
|
45
48
|
function M(e, a, s) {
|
|
46
|
-
if (
|
|
49
|
+
if (v(e) || !e) return null;
|
|
47
50
|
if (typeof e == "boolean" || typeof e == "number" || typeof e == "string")
|
|
48
51
|
return e;
|
|
49
52
|
const {
|
|
50
|
-
prefixCls:
|
|
53
|
+
prefixCls: l,
|
|
51
54
|
accordion: t,
|
|
52
55
|
collapsible: y,
|
|
53
|
-
onItemClick:
|
|
54
|
-
activeKey:
|
|
55
|
-
openMotion:
|
|
56
|
-
expandIcon:
|
|
56
|
+
onItemClick: d,
|
|
57
|
+
activeKey: p,
|
|
58
|
+
openMotion: f,
|
|
59
|
+
expandIcon: C,
|
|
57
60
|
classNames: u,
|
|
58
|
-
styles: b
|
|
61
|
+
styles: b,
|
|
62
|
+
destroyOnHidden: k
|
|
59
63
|
} = s, r = e.key || String(a), {
|
|
60
|
-
header:
|
|
61
|
-
headerClass:
|
|
62
|
-
collapsible:
|
|
63
|
-
onItemClick: g
|
|
64
|
+
header: I,
|
|
65
|
+
headerClass: O,
|
|
66
|
+
collapsible: H,
|
|
67
|
+
onItemClick: g,
|
|
68
|
+
destroyOnHidden: N
|
|
64
69
|
} = e.props || {};
|
|
65
70
|
let c = !1;
|
|
66
|
-
t ? c =
|
|
67
|
-
const
|
|
68
|
-
|
|
71
|
+
t ? c = p[0] === r : c = p.includes(r);
|
|
72
|
+
const n = H ?? y, m = (o) => {
|
|
73
|
+
n !== "disabled" && (d?.(o), g?.(o));
|
|
69
74
|
}, i = {
|
|
70
75
|
key: r,
|
|
71
76
|
panelKey: r,
|
|
72
|
-
header:
|
|
73
|
-
headerClass:
|
|
77
|
+
header: I,
|
|
78
|
+
headerClass: O,
|
|
74
79
|
classNames: u,
|
|
75
80
|
styles: b,
|
|
76
81
|
isActive: c,
|
|
77
|
-
prefixCls:
|
|
78
|
-
|
|
82
|
+
prefixCls: l,
|
|
83
|
+
destroyOnHidden: N ?? k,
|
|
84
|
+
openMotion: f,
|
|
79
85
|
accordion: t,
|
|
80
86
|
children: e.children?.default?.(),
|
|
81
|
-
onItemClick:
|
|
82
|
-
expandIcon:
|
|
83
|
-
collapsible:
|
|
87
|
+
onItemClick: m,
|
|
88
|
+
expandIcon: C,
|
|
89
|
+
collapsible: n
|
|
84
90
|
};
|
|
85
|
-
return Object.keys(i).forEach((
|
|
86
|
-
typeof i[
|
|
91
|
+
return Object.keys(i).forEach((o) => {
|
|
92
|
+
typeof i[o] > "u" && delete i[o];
|
|
87
93
|
}), E(e, i);
|
|
88
94
|
}
|
|
89
|
-
function
|
|
90
|
-
return Array.isArray(e) ?
|
|
95
|
+
function z(e, a, s) {
|
|
96
|
+
return Array.isArray(e) ? D(e, s) : h(a?.()).map((l, t) => M(l, t, s));
|
|
91
97
|
}
|
|
92
98
|
export {
|
|
93
|
-
|
|
99
|
+
z as useItems
|
|
94
100
|
};
|
package/dist/interface.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
package/dist/interface.d.ts
CHANGED
|
@@ -1,46 +1,13 @@
|
|
|
1
1
|
import { Key, VueNode } from '../../util/src/type';
|
|
2
|
-
import { CSSProperties,
|
|
3
|
-
export type CollapsibleType = 'header' | 'icon' | 'disabled';
|
|
2
|
+
import { CSSProperties, Ref, TransitionProps } from 'vue';
|
|
4
3
|
export type SemanticName = 'header' | 'title' | 'body' | 'icon';
|
|
5
|
-
export declare function generatorCollapsePanelProps(): {
|
|
6
|
-
id: StringConstructor;
|
|
7
|
-
header: PropType<string | VNode>;
|
|
8
|
-
prefixCls: StringConstructor;
|
|
9
|
-
headerClass: StringConstructor;
|
|
10
|
-
showArrow: {
|
|
11
|
-
type: PropType<boolean | undefined>;
|
|
12
|
-
default: boolean;
|
|
13
|
-
};
|
|
14
|
-
className: StringConstructor;
|
|
15
|
-
classNames: {
|
|
16
|
-
type: PropType<Partial<Record<SemanticName, string>>>;
|
|
17
|
-
default: () => {};
|
|
18
|
-
};
|
|
19
|
-
style: PropType<Record<string, string>>;
|
|
20
|
-
styles: {
|
|
21
|
-
type: PropType<Partial<Record<SemanticName, CSSProperties>>>;
|
|
22
|
-
default: () => {};
|
|
23
|
-
};
|
|
24
|
-
isActive: BooleanConstructor;
|
|
25
|
-
openMotion: PropType<Partial<TransitionProps>>;
|
|
26
|
-
destroyInactivePanel: PropType<boolean | undefined>;
|
|
27
|
-
accordion: BooleanConstructor;
|
|
28
|
-
forceRender: PropType<boolean | undefined>;
|
|
29
|
-
onItemClick: PropType<(props: Key) => void>;
|
|
30
|
-
extra: PropType<string | VueNode>;
|
|
31
|
-
panelKey: (StringConstructor | NumberConstructor)[];
|
|
32
|
-
collapsible: PropType<CollapsibleType>;
|
|
33
|
-
expandIcon: PropType<(props: any) => VueNode>;
|
|
34
|
-
role: StringConstructor;
|
|
35
|
-
children: PropType<VueNode | string>;
|
|
36
|
-
};
|
|
37
4
|
export interface CollapsePanelProps {
|
|
38
5
|
id?: string;
|
|
39
6
|
header?: VueNode;
|
|
40
7
|
prefixCls?: string;
|
|
41
8
|
headerClass?: string;
|
|
42
9
|
showArrow?: boolean;
|
|
43
|
-
|
|
10
|
+
class?: string;
|
|
44
11
|
classNames?: Partial<Record<SemanticName, string>>;
|
|
45
12
|
style?: object;
|
|
46
13
|
styles?: Partial<Record<SemanticName, CSSProperties>>;
|
|
@@ -57,28 +24,12 @@ export interface CollapsePanelProps {
|
|
|
57
24
|
collapsible?: CollapsibleType;
|
|
58
25
|
children?: VueNode | string;
|
|
59
26
|
}
|
|
27
|
+
export type CollapsibleType = 'header' | 'icon' | 'disabled';
|
|
60
28
|
export interface ItemType extends Omit<CollapsePanelProps, 'header' | 'prefixCls' | 'panelKey' | 'isActive' | 'accordion' | 'openMotion' | 'expandIcon'> {
|
|
61
29
|
key?: CollapsePanelProps['panelKey'];
|
|
62
30
|
label?: CollapsePanelProps['header'];
|
|
63
|
-
children?: VueNode;
|
|
64
31
|
ref?: Ref<HTMLDivElement>;
|
|
65
32
|
}
|
|
66
|
-
export declare function generatorCollapseProps(): {
|
|
67
|
-
prefixCls: StringConstructor;
|
|
68
|
-
activeKey: PropType<Key | Key[]>;
|
|
69
|
-
defaultActiveKey: PropType<Key | Key[]>;
|
|
70
|
-
openMotion: ObjectConstructor;
|
|
71
|
-
onChange: PropType<(key: Key[]) => void>;
|
|
72
|
-
accordion: BooleanConstructor;
|
|
73
|
-
className: StringConstructor;
|
|
74
|
-
classNames: PropType<Partial<Record<SemanticName, string>>>;
|
|
75
|
-
style: ObjectConstructor;
|
|
76
|
-
styles: PropType<Partial<Record<SemanticName, CSSProperties>>>;
|
|
77
|
-
destroyInactivePanel: BooleanConstructor;
|
|
78
|
-
expandIcon: PropType<(props: any) => VueNode>;
|
|
79
|
-
collapsible: PropType<CollapsibleType>;
|
|
80
|
-
items: PropType<ItemType[]>;
|
|
81
|
-
};
|
|
82
33
|
export interface CollapseProps {
|
|
83
34
|
prefixCls?: string;
|
|
84
35
|
activeKey?: Key | Key[];
|
|
@@ -99,20 +50,4 @@ export interface CollapseProps {
|
|
|
99
50
|
classNames?: Partial<Record<SemanticName, string>>;
|
|
100
51
|
styles?: Partial<Record<SemanticName, CSSProperties>>;
|
|
101
52
|
}
|
|
102
|
-
export declare function generatorCollapsePanelContentProps(): {
|
|
103
|
-
isActive: BooleanConstructor;
|
|
104
|
-
prefixCls: StringConstructor;
|
|
105
|
-
className: StringConstructor;
|
|
106
|
-
classNames: PropType<{
|
|
107
|
-
header?: string;
|
|
108
|
-
body?: string;
|
|
109
|
-
}>;
|
|
110
|
-
style: PropType<Record<string, string>>;
|
|
111
|
-
styles: PropType<{
|
|
112
|
-
header?: CSSProperties;
|
|
113
|
-
body?: CSSProperties;
|
|
114
|
-
}>;
|
|
115
|
-
role: StringConstructor;
|
|
116
|
-
forceRender: BooleanConstructor;
|
|
117
|
-
};
|
|
118
53
|
export type { Key, };
|
package/dist/interface.js
CHANGED
|
@@ -1,69 +1 @@
|
|
|
1
|
-
|
|
2
|
-
return {
|
|
3
|
-
id: String,
|
|
4
|
-
header: [String, Object],
|
|
5
|
-
prefixCls: String,
|
|
6
|
-
headerClass: String,
|
|
7
|
-
showArrow: {
|
|
8
|
-
type: Boolean,
|
|
9
|
-
default: !0
|
|
10
|
-
},
|
|
11
|
-
className: String,
|
|
12
|
-
classNames: {
|
|
13
|
-
type: Object,
|
|
14
|
-
default: () => ({})
|
|
15
|
-
},
|
|
16
|
-
style: Object,
|
|
17
|
-
styles: {
|
|
18
|
-
type: Object,
|
|
19
|
-
default: () => ({})
|
|
20
|
-
},
|
|
21
|
-
isActive: Boolean,
|
|
22
|
-
openMotion: Object,
|
|
23
|
-
destroyInactivePanel: Boolean,
|
|
24
|
-
accordion: Boolean,
|
|
25
|
-
forceRender: Boolean,
|
|
26
|
-
onItemClick: Function,
|
|
27
|
-
extra: [String, Object],
|
|
28
|
-
panelKey: [String, Number],
|
|
29
|
-
collapsible: String,
|
|
30
|
-
expandIcon: Function,
|
|
31
|
-
role: String,
|
|
32
|
-
children: [Object, String]
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
function t() {
|
|
36
|
-
return {
|
|
37
|
-
prefixCls: String,
|
|
38
|
-
activeKey: [String, Number, Array],
|
|
39
|
-
defaultActiveKey: [String, Number, Array],
|
|
40
|
-
openMotion: Object,
|
|
41
|
-
onChange: Function,
|
|
42
|
-
accordion: Boolean,
|
|
43
|
-
className: String,
|
|
44
|
-
classNames: Object,
|
|
45
|
-
style: Object,
|
|
46
|
-
styles: Object,
|
|
47
|
-
destroyInactivePanel: Boolean,
|
|
48
|
-
expandIcon: Function,
|
|
49
|
-
collapsible: String,
|
|
50
|
-
items: Array
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
function n() {
|
|
54
|
-
return {
|
|
55
|
-
isActive: Boolean,
|
|
56
|
-
prefixCls: String,
|
|
57
|
-
className: String,
|
|
58
|
-
classNames: Object,
|
|
59
|
-
style: Object,
|
|
60
|
-
styles: Object,
|
|
61
|
-
role: String,
|
|
62
|
-
forceRender: Boolean
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
export {
|
|
66
|
-
n as generatorCollapsePanelContentProps,
|
|
67
|
-
e as generatorCollapsePanelProps,
|
|
68
|
-
t as generatorCollapseProps
|
|
69
|
-
};
|
|
1
|
+
|
|
@@ -9,7 +9,9 @@ import '../assets/index.less'
|
|
|
9
9
|
const basicCollapseItems: CollapseProps['items'] = [
|
|
10
10
|
{
|
|
11
11
|
label: h('input', {
|
|
12
|
-
|
|
12
|
+
onKeydown: (e: KeyboardEvent) => {
|
|
13
|
+
e.stopPropagation()
|
|
14
|
+
},
|
|
13
15
|
}),
|
|
14
16
|
children: 'content',
|
|
15
17
|
},
|
package/package.json
CHANGED
package/src/Collapse.tsx
CHANGED
|
@@ -72,6 +72,7 @@ const Collapse = defineComponent<CollapseProps>({
|
|
|
72
72
|
classNames,
|
|
73
73
|
styles,
|
|
74
74
|
items,
|
|
75
|
+
destroyOnHidden,
|
|
75
76
|
} = props
|
|
76
77
|
|
|
77
78
|
const collapseClassName = classnames(prefixCls, className)
|
|
@@ -86,6 +87,7 @@ const Collapse = defineComponent<CollapseProps>({
|
|
|
86
87
|
collapsible,
|
|
87
88
|
onItemClick,
|
|
88
89
|
activeKey: activeKey.value,
|
|
90
|
+
destroyOnHidden,
|
|
89
91
|
classNames,
|
|
90
92
|
styles,
|
|
91
93
|
})
|
package/src/Panel.tsx
CHANGED
|
@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'vue'
|
|
|
2
2
|
import type { CollapsePanelProps } from './interface'
|
|
3
3
|
import { classNames as classnames } from '@v-c/util'
|
|
4
4
|
import KeyCode from '@v-c/util/dist/KeyCode'
|
|
5
|
-
import omit from '@v-c/util/dist/omit
|
|
5
|
+
import omit from '@v-c/util/dist/omit'
|
|
6
6
|
import { computed, defineComponent, ref, Transition } from 'vue'
|
|
7
7
|
import PanelContent from './PanelContent'
|
|
8
8
|
|
|
@@ -55,7 +55,7 @@ const CollapsePanel = defineComponent<CollapsePanelProps>({
|
|
|
55
55
|
extra,
|
|
56
56
|
prefixCls,
|
|
57
57
|
isActive,
|
|
58
|
-
className,
|
|
58
|
+
class: className,
|
|
59
59
|
expandIcon,
|
|
60
60
|
forceRender,
|
|
61
61
|
headerClass,
|
|
@@ -65,6 +65,7 @@ const CollapsePanel = defineComponent<CollapsePanelProps>({
|
|
|
65
65
|
onItemClick,
|
|
66
66
|
classNames: customizeClassNames = {},
|
|
67
67
|
showArrow = true,
|
|
68
|
+
destroyOnHidden,
|
|
68
69
|
styles = {},
|
|
69
70
|
header,
|
|
70
71
|
panelKey,
|
|
@@ -166,7 +167,7 @@ const CollapsePanel = defineComponent<CollapsePanelProps>({
|
|
|
166
167
|
</div>
|
|
167
168
|
|
|
168
169
|
<Transition {...transitionProps}>
|
|
169
|
-
{isActive ? panelContent : null}
|
|
170
|
+
{ !destroyOnHidden || isActive ? panelContent : null}
|
|
170
171
|
</Transition>
|
|
171
172
|
</div>
|
|
172
173
|
)
|
package/src/PanelContent.tsx
CHANGED
package/src/hooks/useItems.tsx
CHANGED
|
@@ -25,7 +25,7 @@ type Props = Pick<
|
|
|
25
25
|
| 'classNames'
|
|
26
26
|
| 'styles'
|
|
27
27
|
> &
|
|
28
|
-
Pick<CollapseProps, 'accordion' | 'collapsible'> & {
|
|
28
|
+
Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyOnHidden'> & {
|
|
29
29
|
activeKey: Key[]
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -42,6 +42,7 @@ function convertItemsToNodes(items: ItemType[], props: Props) {
|
|
|
42
42
|
activeKey,
|
|
43
43
|
openMotion,
|
|
44
44
|
expandIcon,
|
|
45
|
+
destroyOnHidden,
|
|
45
46
|
classNames: collapseClassNames,
|
|
46
47
|
styles,
|
|
47
48
|
} = props
|
|
@@ -52,11 +53,13 @@ function convertItemsToNodes(items: ItemType[], props: Props) {
|
|
|
52
53
|
key: rawKey,
|
|
53
54
|
collapsible: rawCollapsible,
|
|
54
55
|
onItemClick: rawOnItemClick,
|
|
56
|
+
destroyOnHidden: rawDestroyOnHidden,
|
|
55
57
|
...restProps
|
|
56
58
|
} = item
|
|
57
59
|
|
|
58
60
|
const key = String(rawKey ?? index)
|
|
59
61
|
const mergeCollapsible = rawCollapsible ?? collapsible
|
|
62
|
+
const mergedDestroyOnHidden = rawDestroyOnHidden ?? destroyOnHidden
|
|
60
63
|
|
|
61
64
|
const handleItemClick = (value: Key) => {
|
|
62
65
|
if (mergeCollapsible === 'disabled')
|
|
@@ -88,6 +91,7 @@ function convertItemsToNodes(items: ItemType[], props: Props) {
|
|
|
88
91
|
openMotion={openMotion}
|
|
89
92
|
expandIcon={expandIcon}
|
|
90
93
|
header={label}
|
|
94
|
+
destroyOnHidden={mergedDestroyOnHidden}
|
|
91
95
|
collapsible={mergeCollapsible}
|
|
92
96
|
onItemClick={handleItemClick}
|
|
93
97
|
/>
|
|
@@ -124,6 +128,7 @@ function getNewChild(
|
|
|
124
128
|
expandIcon,
|
|
125
129
|
classNames: collapseClassNames,
|
|
126
130
|
styles,
|
|
131
|
+
destroyOnHidden,
|
|
127
132
|
} = props
|
|
128
133
|
|
|
129
134
|
const key = child.key || String(index)
|
|
@@ -133,6 +138,7 @@ function getNewChild(
|
|
|
133
138
|
headerClass,
|
|
134
139
|
collapsible: childCollapsible,
|
|
135
140
|
onItemClick: childOnItemClick,
|
|
141
|
+
destroyOnHidden: childDestroyOnHidden,
|
|
136
142
|
} = child.props || {}
|
|
137
143
|
|
|
138
144
|
let isActive = false
|
|
@@ -161,6 +167,7 @@ function getNewChild(
|
|
|
161
167
|
styles,
|
|
162
168
|
isActive,
|
|
163
169
|
prefixCls,
|
|
170
|
+
destroyOnHidden: childDestroyOnHidden ?? destroyOnHidden,
|
|
164
171
|
openMotion,
|
|
165
172
|
accordion,
|
|
166
173
|
children: (child.children as ChildrenSlots)?.default?.(),
|
package/src/interface.ts
CHANGED
|
@@ -1,58 +1,19 @@
|
|
|
1
1
|
import type { Key, VueNode } from '@v-c/util/dist/type'
|
|
2
2
|
import type {
|
|
3
3
|
CSSProperties,
|
|
4
|
-
PropType,
|
|
5
4
|
Ref,
|
|
6
5
|
TransitionProps,
|
|
7
|
-
VNode,
|
|
8
6
|
} from 'vue'
|
|
9
7
|
|
|
10
|
-
export type CollapsibleType = 'header' | 'icon' | 'disabled'
|
|
11
|
-
|
|
12
8
|
export type SemanticName = 'header' | 'title' | 'body' | 'icon'
|
|
13
9
|
|
|
14
|
-
export function generatorCollapsePanelProps() {
|
|
15
|
-
return {
|
|
16
|
-
id: String,
|
|
17
|
-
header: [String, Object] as PropType<string | VNode>,
|
|
18
|
-
prefixCls: String,
|
|
19
|
-
headerClass: String,
|
|
20
|
-
showArrow: {
|
|
21
|
-
type: Boolean as PropType<boolean | undefined>,
|
|
22
|
-
default: true,
|
|
23
|
-
},
|
|
24
|
-
className: String,
|
|
25
|
-
classNames: {
|
|
26
|
-
type: Object as PropType<Partial<Record<SemanticName, string>>>,
|
|
27
|
-
default: () => ({}),
|
|
28
|
-
},
|
|
29
|
-
style: Object as PropType<Record<string, string>>,
|
|
30
|
-
styles: {
|
|
31
|
-
type: Object as PropType<Partial<Record<SemanticName, CSSProperties>>>,
|
|
32
|
-
default: () => ({}),
|
|
33
|
-
},
|
|
34
|
-
isActive: Boolean,
|
|
35
|
-
openMotion: Object as PropType<Partial<TransitionProps>>,
|
|
36
|
-
destroyInactivePanel: Boolean as PropType<boolean | undefined>,
|
|
37
|
-
accordion: Boolean,
|
|
38
|
-
forceRender: Boolean as PropType<boolean | undefined>,
|
|
39
|
-
onItemClick: Function as PropType<(props: Key) => void>,
|
|
40
|
-
extra: [String, Object] as PropType<string | VueNode>,
|
|
41
|
-
panelKey: [String, Number],
|
|
42
|
-
collapsible: String as PropType<CollapsibleType>,
|
|
43
|
-
expandIcon: Function as PropType<(props: any) => VueNode>,
|
|
44
|
-
role: String,
|
|
45
|
-
children: [Object, String] as PropType<VueNode | string>,
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
10
|
export interface CollapsePanelProps {
|
|
50
11
|
id?: string
|
|
51
12
|
header?: VueNode
|
|
52
13
|
prefixCls?: string
|
|
53
14
|
headerClass?: string
|
|
54
15
|
showArrow?: boolean
|
|
55
|
-
|
|
16
|
+
class?: string
|
|
56
17
|
classNames?: Partial<Record<SemanticName, string>>
|
|
57
18
|
style?: object
|
|
58
19
|
styles?: Partial<Record<SemanticName, CSSProperties>>
|
|
@@ -70,6 +31,8 @@ export interface CollapsePanelProps {
|
|
|
70
31
|
children?: VueNode | string
|
|
71
32
|
}
|
|
72
33
|
|
|
34
|
+
export type CollapsibleType = 'header' | 'icon' | 'disabled'
|
|
35
|
+
|
|
73
36
|
export interface ItemType
|
|
74
37
|
extends Omit<
|
|
75
38
|
CollapsePanelProps,
|
|
@@ -83,29 +46,9 @@ export interface ItemType
|
|
|
83
46
|
> {
|
|
84
47
|
key?: CollapsePanelProps['panelKey']
|
|
85
48
|
label?: CollapsePanelProps['header']
|
|
86
|
-
children?: VueNode
|
|
87
49
|
ref?: Ref<HTMLDivElement>
|
|
88
50
|
}
|
|
89
51
|
|
|
90
|
-
export function generatorCollapseProps() {
|
|
91
|
-
return {
|
|
92
|
-
prefixCls: String,
|
|
93
|
-
activeKey: [String, Number, Array] as PropType<Key | Key[]>,
|
|
94
|
-
defaultActiveKey: [String, Number, Array] as PropType<Key | Key[]>,
|
|
95
|
-
openMotion: Object,
|
|
96
|
-
onChange: Function as PropType<(key: Key[]) => void>,
|
|
97
|
-
accordion: Boolean,
|
|
98
|
-
className: String,
|
|
99
|
-
classNames: Object as PropType<Partial<Record<SemanticName, string>>>,
|
|
100
|
-
style: Object,
|
|
101
|
-
styles: Object as PropType<Partial<Record<SemanticName, CSSProperties>>>,
|
|
102
|
-
destroyInactivePanel: Boolean,
|
|
103
|
-
expandIcon: Function as PropType<(props: any) => VueNode>,
|
|
104
|
-
collapsible: String as PropType<CollapsibleType>,
|
|
105
|
-
items: Array as PropType<ItemType[]>,
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
52
|
export interface CollapseProps {
|
|
110
53
|
prefixCls?: string
|
|
111
54
|
activeKey?: Key | Key[]
|
|
@@ -126,21 +69,6 @@ export interface CollapseProps {
|
|
|
126
69
|
classNames?: Partial<Record<SemanticName, string>>
|
|
127
70
|
styles?: Partial<Record<SemanticName, CSSProperties>>
|
|
128
71
|
}
|
|
129
|
-
export function generatorCollapsePanelContentProps() {
|
|
130
|
-
return {
|
|
131
|
-
isActive: Boolean,
|
|
132
|
-
prefixCls: String,
|
|
133
|
-
className: String,
|
|
134
|
-
classNames: Object as PropType<{ header?: string, body?: string }>,
|
|
135
|
-
style: Object as PropType<Record<string, string>>,
|
|
136
|
-
styles: Object as PropType<{
|
|
137
|
-
header?: CSSProperties
|
|
138
|
-
body?: CSSProperties
|
|
139
|
-
}>,
|
|
140
|
-
role: String,
|
|
141
|
-
forceRender: Boolean,
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
72
|
|
|
145
73
|
export type {
|
|
146
74
|
Key,
|