@v-c/collapse 0.0.1
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/LICENSE +21 -0
- package/assets/index.less +117 -0
- package/assets/motion.less +14 -0
- package/dist/Collapse.cjs +1 -0
- package/dist/Collapse.d.ts +3 -0
- package/dist/Collapse.js +132 -0
- package/dist/Panel.cjs +1 -0
- package/dist/Panel.d.ts +3 -0
- package/dist/Panel.js +184 -0
- package/dist/PanelContent.cjs +1 -0
- package/dist/PanelContent.d.ts +3 -0
- package/dist/PanelContent.js +126 -0
- package/dist/hooks/useItems.cjs +1 -0
- package/dist/hooks/useItems.d.ts +9 -0
- package/dist/hooks/useItems.js +94 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +6 -0
- package/dist/interface.cjs +1 -0
- package/dist/interface.d.ts +118 -0
- package/dist/interface.js +69 -0
- package/docs/collapse.stories.vue +43 -0
- package/docs/custom-icon.vue +185 -0
- package/docs/simple.vue +218 -0
- package/package.json +28 -0
- package/src/Collapse.tsx +108 -0
- package/src/Panel.tsx +177 -0
- package/src/PanelContent.tsx +63 -0
- package/src/hooks/useItems.tsx +195 -0
- package/src/index.ts +8 -0
- package/src/interface.ts +147 -0
- package/tests/__snapshots__/index.test.tsx.snap +3 -0
- package/tests/index.test.tsx +954 -0
- package/tsconfig.json +7 -0
- package/vite.config.ts +18 -0
- package/vitest.config.ts +11 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 antdv-community
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
@prefixCls: vc-collapse;
|
|
2
|
+
@text-color: #666;
|
|
3
|
+
@borderStyle: 1px solid #d9d9d9;
|
|
4
|
+
|
|
5
|
+
@import "./motion.less";
|
|
6
|
+
|
|
7
|
+
#arrow {
|
|
8
|
+
.common() {
|
|
9
|
+
width: 0;
|
|
10
|
+
height: 0;
|
|
11
|
+
font-size: 0;
|
|
12
|
+
line-height: 0;
|
|
13
|
+
}
|
|
14
|
+
.right(@w, @h, @color) {
|
|
15
|
+
border-top: @w solid transparent;
|
|
16
|
+
border-bottom: @w solid transparent;
|
|
17
|
+
border-left: @h solid @color;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.bottom(@w, @h, @color) {
|
|
21
|
+
border-left: @w solid transparent;
|
|
22
|
+
border-right: @w solid transparent;
|
|
23
|
+
border-top: @h solid @color;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.@{prefixCls} {
|
|
28
|
+
background-color: #f7f7f7;
|
|
29
|
+
border-radius: 3px;
|
|
30
|
+
border: @borderStyle;
|
|
31
|
+
|
|
32
|
+
// &-anim-active {
|
|
33
|
+
// transition: height 0.2s ease-out;
|
|
34
|
+
// }
|
|
35
|
+
|
|
36
|
+
& > &-item {
|
|
37
|
+
border-top: @borderStyle;
|
|
38
|
+
&:first-child {
|
|
39
|
+
border-top: none;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
> .@{prefixCls}-header {
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
line-height: 22px;
|
|
46
|
+
padding: 10px 16px;
|
|
47
|
+
color: #666;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
.arrow {
|
|
50
|
+
display: inline-block;
|
|
51
|
+
content: "\20";
|
|
52
|
+
#arrow > .common();
|
|
53
|
+
#arrow > .right(3px, 4px, #666);
|
|
54
|
+
vertical-align: middle;
|
|
55
|
+
margin-right: 8px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.@{prefixCls}-extra {
|
|
59
|
+
margin: 0 16px 0 auto;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
.@{prefixCls}-collapsible-header {
|
|
63
|
+
cursor: default;
|
|
64
|
+
.@{prefixCls}-title {
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
}
|
|
67
|
+
.@{prefixCls}-expand-icon {
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
.@{prefixCls}-collapsible-icon {
|
|
72
|
+
cursor: default;
|
|
73
|
+
.@{prefixCls}-expand-icon {
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
& > &-item-disabled > .@{prefixCls}-header {
|
|
80
|
+
cursor: not-allowed;
|
|
81
|
+
color: #999;
|
|
82
|
+
background-color: #f3f3f3;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&-panel {
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
color: @text-color;
|
|
88
|
+
padding: 0 16px;
|
|
89
|
+
background-color: #fff;
|
|
90
|
+
|
|
91
|
+
& > &-box {
|
|
92
|
+
margin-top: 16px;
|
|
93
|
+
margin-bottom: 16px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// &-inactive {
|
|
97
|
+
// display: none;
|
|
98
|
+
// }
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&-item:last-child {
|
|
102
|
+
> .@{prefixCls}-panel {
|
|
103
|
+
border-radius: 0 0 3px 3px;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
& > &-item-active {
|
|
108
|
+
> .@{prefixCls}-header {
|
|
109
|
+
.arrow {
|
|
110
|
+
position: relative;
|
|
111
|
+
top: 2px;
|
|
112
|
+
#arrow > .bottom(3px, 4px, #666);
|
|
113
|
+
margin-right: 6px;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),S=require("@v-c/util"),N=require("@v-c/util/dist/hooks/useMergedState"),x=require("@v-c/util/dist/pickAttrs"),O=require("./hooks/useItems.cjs");function h(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 I={prefixCls:"vc-collapse"},M=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}},I),name:"VcCollapse",inheritAttrs:!1,setup(t,{attrs:r,expose:a,slots:d}){const n=i.ref(),[s,f]=N([],{value:i.toRef(t,"activeKey"),onChange:e=>t.onChange?.(e),defaultValue:t.defaultActiveKey,postState:h}),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}=t,C=S.classNames(e,c),b={...t,...r},K=O.useItems(A,d.default,{prefixCls:e,accordion:o,openMotion:l,expandIcon:v,collapsible:m,onItemClick:p,activeKey:s.value,classNames:g,styles:q});return i.createVNode("div",i.mergeProps({ref:n,class:C,style:u,role:o?"tablist":void 0},x(b,{aria:!0,data:!0})),[K])}}});exports.default=M;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { CollapseProps } from './interface';
|
|
2
|
+
declare const Collapse: import('vue').DefineComponent<CollapseProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CollapseProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
3
|
+
export default Collapse;
|
package/dist/Collapse.js
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import { defineComponent as N, mergeDefaults as b, ref as x, toRef as S, createVNode as h, mergeProps as O } from "vue";
|
|
2
|
+
import { classNames as I } from "@v-c/util";
|
|
3
|
+
import j from "@v-c/util/dist/hooks/useMergedState";
|
|
4
|
+
import M from "@v-c/util/dist/pickAttrs";
|
|
5
|
+
import { useItems as V } from "./hooks/useItems.js";
|
|
6
|
+
function B(t) {
|
|
7
|
+
let r = t;
|
|
8
|
+
if (!Array.isArray(r)) {
|
|
9
|
+
const s = typeof r;
|
|
10
|
+
r = s === "number" || s === "string" ? [r] : [];
|
|
11
|
+
}
|
|
12
|
+
return r.map((s) => String(s));
|
|
13
|
+
}
|
|
14
|
+
const F = {
|
|
15
|
+
prefixCls: "vc-collapse"
|
|
16
|
+
}, W = /* @__PURE__ */ N({
|
|
17
|
+
props: /* @__PURE__ */ b({
|
|
18
|
+
prefixCls: {
|
|
19
|
+
type: String,
|
|
20
|
+
required: !1
|
|
21
|
+
},
|
|
22
|
+
activeKey: {
|
|
23
|
+
type: [String, Number, Array],
|
|
24
|
+
required: !1
|
|
25
|
+
},
|
|
26
|
+
defaultActiveKey: {
|
|
27
|
+
type: [String, Number, Array],
|
|
28
|
+
required: !1
|
|
29
|
+
},
|
|
30
|
+
openMotion: {
|
|
31
|
+
type: null,
|
|
32
|
+
required: !1
|
|
33
|
+
},
|
|
34
|
+
onChange: {
|
|
35
|
+
type: Function,
|
|
36
|
+
required: !1
|
|
37
|
+
},
|
|
38
|
+
accordion: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
required: !1
|
|
41
|
+
},
|
|
42
|
+
className: {
|
|
43
|
+
type: String,
|
|
44
|
+
required: !1
|
|
45
|
+
},
|
|
46
|
+
style: {
|
|
47
|
+
type: Object,
|
|
48
|
+
required: !1
|
|
49
|
+
},
|
|
50
|
+
destroyOnHidden: {
|
|
51
|
+
type: Boolean,
|
|
52
|
+
required: !1
|
|
53
|
+
},
|
|
54
|
+
expandIcon: {
|
|
55
|
+
type: Function,
|
|
56
|
+
required: !1
|
|
57
|
+
},
|
|
58
|
+
collapsible: {
|
|
59
|
+
type: String,
|
|
60
|
+
required: !1
|
|
61
|
+
},
|
|
62
|
+
items: {
|
|
63
|
+
type: Array,
|
|
64
|
+
required: !1
|
|
65
|
+
},
|
|
66
|
+
classNames: {
|
|
67
|
+
type: Object,
|
|
68
|
+
required: !1
|
|
69
|
+
},
|
|
70
|
+
styles: {
|
|
71
|
+
type: Object,
|
|
72
|
+
required: !1
|
|
73
|
+
}
|
|
74
|
+
}, F),
|
|
75
|
+
name: "VcCollapse",
|
|
76
|
+
inheritAttrs: !1,
|
|
77
|
+
setup(t, {
|
|
78
|
+
attrs: r,
|
|
79
|
+
expose: s,
|
|
80
|
+
slots: u
|
|
81
|
+
}) {
|
|
82
|
+
const l = x(), [a, f] = j([], {
|
|
83
|
+
value: S(t, "activeKey"),
|
|
84
|
+
onChange: (e) => t.onChange?.(e),
|
|
85
|
+
defaultValue: t.defaultActiveKey,
|
|
86
|
+
postState: B
|
|
87
|
+
}), d = (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 = d(e), f(a.value);
|
|
89
|
+
};
|
|
90
|
+
return s({
|
|
91
|
+
ref: l
|
|
92
|
+
}), () => {
|
|
93
|
+
const {
|
|
94
|
+
prefixCls: e = "vc-collapse",
|
|
95
|
+
className: n,
|
|
96
|
+
style: o,
|
|
97
|
+
openMotion: i,
|
|
98
|
+
expandIcon: y,
|
|
99
|
+
collapsible: m,
|
|
100
|
+
accordion: c,
|
|
101
|
+
classNames: v,
|
|
102
|
+
styles: g,
|
|
103
|
+
items: A
|
|
104
|
+
} = t, q = I(e, n), C = {
|
|
105
|
+
...t,
|
|
106
|
+
...r
|
|
107
|
+
}, K = V(A, u.default, {
|
|
108
|
+
prefixCls: e,
|
|
109
|
+
accordion: c,
|
|
110
|
+
openMotion: i,
|
|
111
|
+
expandIcon: y,
|
|
112
|
+
collapsible: m,
|
|
113
|
+
onItemClick: p,
|
|
114
|
+
activeKey: a.value,
|
|
115
|
+
classNames: v,
|
|
116
|
+
styles: g
|
|
117
|
+
});
|
|
118
|
+
return h("div", O({
|
|
119
|
+
ref: l,
|
|
120
|
+
class: q,
|
|
121
|
+
style: o,
|
|
122
|
+
role: c ? "tablist" : void 0
|
|
123
|
+
}, M(C, {
|
|
124
|
+
aria: !0,
|
|
125
|
+
data: !0
|
|
126
|
+
})), [K]);
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
export {
|
|
131
|
+
W as default
|
|
132
|
+
};
|
package/dist/Panel.cjs
ADDED
|
@@ -0,0 +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"),K=require("@v-c/util/dist/omit.ts"),R=require("./PanelContent.cjs"),B={showArrow:!0,classNames:{},styles:{}},O=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},className:{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:N}){const c=e.computed(()=>a.collapsible==="disabled"),u=e.ref(),q=e.computed(()=>a.extra!==null&&a.extra!==void 0&&typeof a.extra!="boolean"),d=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":c.value,tabIndex:c.value?-1:0}));return N({ref:u}),()=>{const{extra:l,prefixCls:s,isActive:r,className:h,expandIcon:f,forceRender:v,headerClass:C,collapsible:t,accordion:b,openMotion:x={},onItemClick:j,classNames:n={},showArrow:g=!0,styles:i={},header:P,panelKey:M,children:w,...S}=a,$=o.classNames(`${s}-item`,{[`${s}-item-active`]:r,[`${s}-item-disabled`]:c.value},h),A={class:o.classNames(C,`${s}-header`,{[`${s}-collapsible-${t}`]:!!t},n.header),style:i.header,...["header","icon"].includes(t)?{}:d.value},p=typeof f=="function"?f(a):e.createVNode("i",{class:"arrow"},null),I=p&&e.createVNode("div",e.mergeProps({class:o.classNames(`${s}-expand-icon`,n?.icon),style:i?.icon},["header","icon"].includes(t)?d.value:{}),[p]),V=e.withDirectives(e.createVNode(R.default,{prefixCls:s,classNames:n,styles:i,isActive:r,forceRender:v,role:b?"tabpanel":void 0},{default:()=>w}),[[e.vShow,r]]),k={appear:!1,"leave-to-class":`${s}-panel-hidden`,...x},E={...S,...K(m,["class"])};return e.createVNode("div",e.mergeProps(E,{ref:u,class:$}),[e.createVNode("div",A,[g&&I,e.createVNode("span",e.mergeProps({class:o.classNames(`${s}-title`,n?.title),style:i?.title},t==="header"?d.value:{}),[P]),q.value&&e.createVNode("div",{class:`${s}-extra`},[l])]),e.createVNode(e.Transition,k,{default:()=>[r?V:null]})])}}});exports.default=O;
|
package/dist/Panel.d.ts
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { CollapsePanelProps } from './interface';
|
|
2
|
+
declare const CollapsePanel: import('vue').DefineComponent<CollapsePanelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CollapsePanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
3
|
+
export default CollapsePanel;
|
package/dist/Panel.js
ADDED
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
import { defineComponent as O, mergeDefaults as j, computed as u, ref as T, createVNode as l, mergeProps as f, withDirectives as D, vShow as F, Transition as M } from "vue";
|
|
2
|
+
import { classNames as o } from "@v-c/util";
|
|
3
|
+
import h from "@v-c/util/dist/KeyCode";
|
|
4
|
+
import z from "@v-c/util/dist/omit.ts";
|
|
5
|
+
import H from "./PanelContent.js";
|
|
6
|
+
const V = {
|
|
7
|
+
showArrow: !0,
|
|
8
|
+
classNames: {},
|
|
9
|
+
styles: {}
|
|
10
|
+
}, Z = /* @__PURE__ */ O({
|
|
11
|
+
props: /* @__PURE__ */ j({
|
|
12
|
+
id: {
|
|
13
|
+
type: String,
|
|
14
|
+
required: !1
|
|
15
|
+
},
|
|
16
|
+
header: {
|
|
17
|
+
type: null,
|
|
18
|
+
required: !1
|
|
19
|
+
},
|
|
20
|
+
prefixCls: {
|
|
21
|
+
type: String,
|
|
22
|
+
required: !1
|
|
23
|
+
},
|
|
24
|
+
headerClass: {
|
|
25
|
+
type: String,
|
|
26
|
+
required: !1
|
|
27
|
+
},
|
|
28
|
+
showArrow: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
required: !1
|
|
31
|
+
},
|
|
32
|
+
className: {
|
|
33
|
+
type: String,
|
|
34
|
+
required: !1
|
|
35
|
+
},
|
|
36
|
+
classNames: {
|
|
37
|
+
type: Object,
|
|
38
|
+
required: !1
|
|
39
|
+
},
|
|
40
|
+
style: {
|
|
41
|
+
type: Object,
|
|
42
|
+
required: !1
|
|
43
|
+
},
|
|
44
|
+
styles: {
|
|
45
|
+
type: Object,
|
|
46
|
+
required: !1
|
|
47
|
+
},
|
|
48
|
+
isActive: {
|
|
49
|
+
type: Boolean,
|
|
50
|
+
required: !1
|
|
51
|
+
},
|
|
52
|
+
openMotion: {
|
|
53
|
+
type: null,
|
|
54
|
+
required: !1
|
|
55
|
+
},
|
|
56
|
+
destroyOnHidden: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
required: !1
|
|
59
|
+
},
|
|
60
|
+
accordion: {
|
|
61
|
+
type: Boolean,
|
|
62
|
+
required: !1
|
|
63
|
+
},
|
|
64
|
+
forceRender: {
|
|
65
|
+
type: Boolean,
|
|
66
|
+
required: !1
|
|
67
|
+
},
|
|
68
|
+
extra: {
|
|
69
|
+
type: null,
|
|
70
|
+
required: !1
|
|
71
|
+
},
|
|
72
|
+
onItemClick: {
|
|
73
|
+
type: Function,
|
|
74
|
+
required: !1
|
|
75
|
+
},
|
|
76
|
+
expandIcon: {
|
|
77
|
+
type: Function,
|
|
78
|
+
required: !1
|
|
79
|
+
},
|
|
80
|
+
panelKey: {
|
|
81
|
+
type: [String, Number],
|
|
82
|
+
required: !1
|
|
83
|
+
},
|
|
84
|
+
role: {
|
|
85
|
+
type: String,
|
|
86
|
+
required: !1
|
|
87
|
+
},
|
|
88
|
+
collapsible: {
|
|
89
|
+
type: String,
|
|
90
|
+
required: !1
|
|
91
|
+
},
|
|
92
|
+
children: {
|
|
93
|
+
type: null,
|
|
94
|
+
required: !1
|
|
95
|
+
}
|
|
96
|
+
}, V),
|
|
97
|
+
name: "CollapsePanel",
|
|
98
|
+
inheritAttrs: !1,
|
|
99
|
+
setup(e, {
|
|
100
|
+
attrs: q,
|
|
101
|
+
expose: C
|
|
102
|
+
}) {
|
|
103
|
+
const d = u(() => e.collapsible === "disabled"), p = T(), v = u(() => e.extra !== null && e.extra !== void 0 && typeof e.extra != "boolean"), c = u(() => ({
|
|
104
|
+
onClick: () => {
|
|
105
|
+
e.onItemClick?.(e.panelKey);
|
|
106
|
+
},
|
|
107
|
+
onKeydown: (s) => {
|
|
108
|
+
(s.key === "Enter" || s.keyCode === h.ENTER || s.which === h.ENTER) && e.onItemClick?.(e.panelKey);
|
|
109
|
+
},
|
|
110
|
+
role: e.accordion ? "tab" : "button",
|
|
111
|
+
"aria-expanded": e.isActive,
|
|
112
|
+
"aria-disabled": d.value,
|
|
113
|
+
tabIndex: d.value ? -1 : 0
|
|
114
|
+
}));
|
|
115
|
+
return C({
|
|
116
|
+
ref: p
|
|
117
|
+
}), () => {
|
|
118
|
+
const {
|
|
119
|
+
extra: s,
|
|
120
|
+
prefixCls: a,
|
|
121
|
+
isActive: t,
|
|
122
|
+
className: b,
|
|
123
|
+
expandIcon: y,
|
|
124
|
+
forceRender: x,
|
|
125
|
+
headerClass: N,
|
|
126
|
+
collapsible: r,
|
|
127
|
+
accordion: w,
|
|
128
|
+
openMotion: g = {},
|
|
129
|
+
onItemClick: W,
|
|
130
|
+
classNames: n = {},
|
|
131
|
+
showArrow: P = !0,
|
|
132
|
+
styles: i = {},
|
|
133
|
+
header: $,
|
|
134
|
+
panelKey: G,
|
|
135
|
+
children: A,
|
|
136
|
+
...I
|
|
137
|
+
} = e, S = o(`${a}-item`, {
|
|
138
|
+
[`${a}-item-active`]: t,
|
|
139
|
+
[`${a}-item-disabled`]: d.value
|
|
140
|
+
}, b), k = {
|
|
141
|
+
class: o(N, `${a}-header`, {
|
|
142
|
+
[`${a}-collapsible-${r}`]: !!r
|
|
143
|
+
}, n.header),
|
|
144
|
+
style: i.header,
|
|
145
|
+
...["header", "icon"].includes(r) ? {} : c.value
|
|
146
|
+
}, m = typeof y == "function" ? y(e) : l("i", {
|
|
147
|
+
class: "arrow"
|
|
148
|
+
}, null), E = m && l("div", f({
|
|
149
|
+
class: o(`${a}-expand-icon`, n?.icon),
|
|
150
|
+
style: i?.icon
|
|
151
|
+
}, ["header", "icon"].includes(r) ? c.value : {}), [m]), K = D(l(H, {
|
|
152
|
+
prefixCls: a,
|
|
153
|
+
classNames: n,
|
|
154
|
+
styles: i,
|
|
155
|
+
isActive: t,
|
|
156
|
+
forceRender: x,
|
|
157
|
+
role: w ? "tabpanel" : void 0
|
|
158
|
+
}, {
|
|
159
|
+
default: () => A
|
|
160
|
+
}), [[F, t]]), R = {
|
|
161
|
+
appear: !1,
|
|
162
|
+
"leave-to-class": `${a}-panel-hidden`,
|
|
163
|
+
...g
|
|
164
|
+
}, B = {
|
|
165
|
+
...I,
|
|
166
|
+
...z(q, ["class"])
|
|
167
|
+
};
|
|
168
|
+
return l("div", f(B, {
|
|
169
|
+
ref: p,
|
|
170
|
+
class: S
|
|
171
|
+
}), [l("div", k, [P && E, l("span", f({
|
|
172
|
+
class: o(`${a}-title`, n?.title),
|
|
173
|
+
style: i?.title
|
|
174
|
+
}, r === "header" ? c.value : {}), [$]), v.value && l("div", {
|
|
175
|
+
class: `${a}-extra`
|
|
176
|
+
}, [s])]), l(M, R, {
|
|
177
|
+
default: () => [t ? K : null]
|
|
178
|
+
})]);
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
export {
|
|
183
|
+
Z as default
|
|
184
|
+
};
|
|
@@ -0,0 +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},className:{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,className: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;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { CollapsePanelProps } from './interface';
|
|
2
|
+
declare const PanelContent: import('vue').DefineComponent<CollapsePanelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CollapsePanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
3
|
+
export default PanelContent;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { defineComponent as c, ref as y, watch as p, createVNode as a } from "vue";
|
|
2
|
+
import { classNames as s } from "@v-c/util";
|
|
3
|
+
const v = /* @__PURE__ */ c({
|
|
4
|
+
props: {
|
|
5
|
+
id: {
|
|
6
|
+
type: String,
|
|
7
|
+
required: !1
|
|
8
|
+
},
|
|
9
|
+
header: {
|
|
10
|
+
type: null,
|
|
11
|
+
required: !1
|
|
12
|
+
},
|
|
13
|
+
prefixCls: {
|
|
14
|
+
type: String,
|
|
15
|
+
required: !1
|
|
16
|
+
},
|
|
17
|
+
headerClass: {
|
|
18
|
+
type: String,
|
|
19
|
+
required: !1
|
|
20
|
+
},
|
|
21
|
+
showArrow: {
|
|
22
|
+
type: Boolean,
|
|
23
|
+
required: !1
|
|
24
|
+
},
|
|
25
|
+
className: {
|
|
26
|
+
type: String,
|
|
27
|
+
required: !1
|
|
28
|
+
},
|
|
29
|
+
classNames: {
|
|
30
|
+
type: Object,
|
|
31
|
+
required: !1
|
|
32
|
+
},
|
|
33
|
+
style: {
|
|
34
|
+
type: Object,
|
|
35
|
+
required: !1
|
|
36
|
+
},
|
|
37
|
+
styles: {
|
|
38
|
+
type: Object,
|
|
39
|
+
required: !1
|
|
40
|
+
},
|
|
41
|
+
isActive: {
|
|
42
|
+
type: Boolean,
|
|
43
|
+
required: !1
|
|
44
|
+
},
|
|
45
|
+
openMotion: {
|
|
46
|
+
type: null,
|
|
47
|
+
required: !1
|
|
48
|
+
},
|
|
49
|
+
destroyOnHidden: {
|
|
50
|
+
type: Boolean,
|
|
51
|
+
required: !1
|
|
52
|
+
},
|
|
53
|
+
accordion: {
|
|
54
|
+
type: Boolean,
|
|
55
|
+
required: !1
|
|
56
|
+
},
|
|
57
|
+
forceRender: {
|
|
58
|
+
type: Boolean,
|
|
59
|
+
required: !1
|
|
60
|
+
},
|
|
61
|
+
extra: {
|
|
62
|
+
type: null,
|
|
63
|
+
required: !1
|
|
64
|
+
},
|
|
65
|
+
onItemClick: {
|
|
66
|
+
type: Function,
|
|
67
|
+
required: !1
|
|
68
|
+
},
|
|
69
|
+
expandIcon: {
|
|
70
|
+
type: Function,
|
|
71
|
+
required: !1
|
|
72
|
+
},
|
|
73
|
+
panelKey: {
|
|
74
|
+
type: [String, Number],
|
|
75
|
+
required: !1
|
|
76
|
+
},
|
|
77
|
+
role: {
|
|
78
|
+
type: String,
|
|
79
|
+
required: !1
|
|
80
|
+
},
|
|
81
|
+
collapsible: {
|
|
82
|
+
type: String,
|
|
83
|
+
required: !1
|
|
84
|
+
},
|
|
85
|
+
children: {
|
|
86
|
+
type: null,
|
|
87
|
+
required: !1
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
name: "PanelContent",
|
|
91
|
+
inheritAttrs: !1,
|
|
92
|
+
setup(e, {
|
|
93
|
+
slots: i
|
|
94
|
+
}) {
|
|
95
|
+
const t = y(e.isActive || e.forceRender);
|
|
96
|
+
return p(() => [e.isActive, e.forceRender], () => {
|
|
97
|
+
(e.isActive || e.forceRender) && (t.value = !0);
|
|
98
|
+
}), () => {
|
|
99
|
+
if (!t.value)
|
|
100
|
+
return null;
|
|
101
|
+
const {
|
|
102
|
+
prefixCls: r,
|
|
103
|
+
isActive: l,
|
|
104
|
+
style: n,
|
|
105
|
+
role: d,
|
|
106
|
+
className: o,
|
|
107
|
+
classNames: u,
|
|
108
|
+
styles: f
|
|
109
|
+
} = e;
|
|
110
|
+
return a("div", {
|
|
111
|
+
class: s(`${r}-panel`, {
|
|
112
|
+
[`${r}-panel-active`]: l,
|
|
113
|
+
[`${r}-panel-inactive`]: !l
|
|
114
|
+
}, o),
|
|
115
|
+
style: n,
|
|
116
|
+
role: d
|
|
117
|
+
}, [a("div", {
|
|
118
|
+
class: s(`${r}-body`, u?.body),
|
|
119
|
+
style: f?.body
|
|
120
|
+
}, [i.default?.()])]);
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
export {
|
|
125
|
+
v as default
|
|
126
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("vue"),x=require("@v-c/util/dist/Children/toArray"),q=require("@v-c/util/dist/props-util"),K=require("@v-c/util/dist/vnode"),P=require("../Panel.cjs");function w(e,c){const{prefixCls:t,accordion:n,collapsible:o,onItemClick:f,activeKey:p,openMotion:u,expandIcon:y,classNames:d,styles:C}=c;return e.map((b,r)=>{const{label:k,key:I,collapsible:g,onItemClick:N,...a}=b,s=String(I??r),m=g??o,i=v=>{m!=="disabled"&&(f?.(v),N?.(v))};let l=!1;return n?l=p?.[0]===s:l=p.includes(s),A.createVNode(P.default,A.mergeProps(a,{classNames:d,styles:C,prefixCls:t,key:s,panelKey:s,isActive:l,accordion:n,openMotion:u,expandIcon:y,header:k,collapsible:m,onItemClick:i}),null)})}function E(e,c,t){if(q.isEmptyElement(e)||!e)return null;if(typeof e=="boolean"||typeof e=="number"||typeof e=="string")return e;const{prefixCls:n,accordion:o,collapsible:f,onItemClick:p,activeKey:u,openMotion:y,expandIcon:d,classNames:C,styles:b}=t,r=e.key||String(c),{header:k,headerClass:I,collapsible:g,onItemClick:N}=e.props||{};let a=!1;o?a=u[0]===r:a=u.includes(r);const s=g??f,m=l=>{s!=="disabled"&&(p?.(l),N?.(l))},i={key:r,panelKey:r,header:k,headerClass:I,classNames:C,styles:b,isActive:a,prefixCls:n,openMotion:y,accordion:o,children:e.children?.default?.(),onItemClick:m,expandIcon:d,collapsible:s};return Object.keys(i).forEach(l=>{typeof i[l]>"u"&&delete i[l]}),K.cloneElement(e,i)}function M(e,c,t){return Array.isArray(e)?w(e,t):x.toArray(c?.()).map((n,o)=>E(n,o,t))}exports.useItems=M;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { RendererElement, RendererNode, VNode, VNodeNormalizedChildren } from 'vue';
|
|
2
|
+
import { CollapsePanelProps, CollapseProps, ItemType, Key } from '../interface';
|
|
3
|
+
type Props = Pick<CollapsePanelProps, 'prefixCls' | 'onItemClick' | 'openMotion' | 'expandIcon' | 'classNames' | 'styles'> & Pick<CollapseProps, 'accordion' | 'collapsible'> & {
|
|
4
|
+
activeKey: Key[];
|
|
5
|
+
};
|
|
6
|
+
export declare function useItems(items?: ItemType[], children?: () => VNode | VNodeNormalizedChildren, props?: Props): (VNode<RendererNode, RendererElement, {
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}> | null)[];
|
|
9
|
+
export {};
|