@v-c/collapse 0.0.5 → 1.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/dist/Collapse.js +137 -123
- package/dist/Panel.js +209 -184
- package/dist/PanelContent.js +160 -125
- package/dist/hooks/useItems.js +104 -97
- package/dist/index.js +6 -6
- package/dist/interface.d.ts +1 -1
- package/dist/interface.js +0 -1
- package/package.json +13 -6
- package/dist/Collapse.cjs +0 -1
- package/dist/Panel.cjs +0 -1
- package/dist/PanelContent.cjs +0 -1
- package/dist/hooks/useItems.cjs +0 -1
- package/dist/index.cjs +0 -1
- package/dist/interface.cjs +0 -1
package/dist/Collapse.js
CHANGED
|
@@ -1,125 +1,139 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import { useItems } from "./hooks/useItems.js";
|
|
2
|
+
import { createVNode, defineComponent, mergeDefaults, mergeProps, ref, toRef } from "vue";
|
|
3
|
+
import { classNames } from "@v-c/util";
|
|
4
|
+
import useMergedState from "@v-c/util/dist/hooks/useMergedState";
|
|
5
|
+
import omit from "@v-c/util/dist/omit";
|
|
6
|
+
import pickAttrs from "@v-c/util/dist/pickAttrs";
|
|
7
|
+
//#region src/Collapse.tsx
|
|
8
|
+
function getActiveKeysArray(activeKey) {
|
|
9
|
+
let currentActiveKey = activeKey;
|
|
10
|
+
if (!Array.isArray(currentActiveKey)) {
|
|
11
|
+
const activeKeyType = typeof currentActiveKey;
|
|
12
|
+
currentActiveKey = activeKeyType === "number" || activeKeyType === "string" ? [currentActiveKey] : [];
|
|
13
|
+
}
|
|
14
|
+
return currentActiveKey.map((key) => String(key));
|
|
14
15
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
16
|
+
var Collapse = /* @__PURE__ */ defineComponent({
|
|
17
|
+
props: /*@__PURE__*/ mergeDefaults({
|
|
18
|
+
prefixCls: {
|
|
19
|
+
type: String,
|
|
20
|
+
required: false,
|
|
21
|
+
default: void 0
|
|
22
|
+
},
|
|
23
|
+
activeKey: {
|
|
24
|
+
type: [
|
|
25
|
+
String,
|
|
26
|
+
Number,
|
|
27
|
+
Array
|
|
28
|
+
],
|
|
29
|
+
required: false,
|
|
30
|
+
default: void 0
|
|
31
|
+
},
|
|
32
|
+
defaultActiveKey: {
|
|
33
|
+
type: [
|
|
34
|
+
String,
|
|
35
|
+
Number,
|
|
36
|
+
Array
|
|
37
|
+
],
|
|
38
|
+
required: false,
|
|
39
|
+
default: void 0
|
|
40
|
+
},
|
|
41
|
+
openMotion: {
|
|
42
|
+
type: Object,
|
|
43
|
+
required: false,
|
|
44
|
+
default: void 0
|
|
45
|
+
},
|
|
46
|
+
onChange: {
|
|
47
|
+
type: Function,
|
|
48
|
+
required: false,
|
|
49
|
+
default: void 0
|
|
50
|
+
},
|
|
51
|
+
accordion: {
|
|
52
|
+
type: Boolean,
|
|
53
|
+
required: false,
|
|
54
|
+
default: void 0
|
|
55
|
+
},
|
|
56
|
+
destroyOnHidden: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
required: false,
|
|
59
|
+
default: void 0
|
|
60
|
+
},
|
|
61
|
+
expandIcon: {
|
|
62
|
+
type: Function,
|
|
63
|
+
required: false,
|
|
64
|
+
default: void 0
|
|
65
|
+
},
|
|
66
|
+
collapsible: {
|
|
67
|
+
type: String,
|
|
68
|
+
required: false,
|
|
69
|
+
default: void 0
|
|
70
|
+
},
|
|
71
|
+
items: {
|
|
72
|
+
type: Array,
|
|
73
|
+
required: false,
|
|
74
|
+
default: void 0
|
|
75
|
+
},
|
|
76
|
+
classNames: {
|
|
77
|
+
type: Object,
|
|
78
|
+
required: false,
|
|
79
|
+
default: void 0
|
|
80
|
+
},
|
|
81
|
+
styles: {
|
|
82
|
+
type: Object,
|
|
83
|
+
required: false,
|
|
84
|
+
default: void 0
|
|
85
|
+
}
|
|
86
|
+
}, { prefixCls: "vc-collapse" }),
|
|
87
|
+
name: "VcCollapse",
|
|
88
|
+
inheritAttrs: false,
|
|
89
|
+
setup(props, { attrs, expose, slots }) {
|
|
90
|
+
const refWrapper = ref();
|
|
91
|
+
const [activeKey, setActiveKey] = useMergedState([], {
|
|
92
|
+
value: toRef(props, "activeKey"),
|
|
93
|
+
onChange: (v) => props.onChange?.(v),
|
|
94
|
+
defaultValue: props.defaultActiveKey,
|
|
95
|
+
postState: getActiveKeysArray
|
|
96
|
+
});
|
|
97
|
+
const getActiveKey = (key) => {
|
|
98
|
+
if (props.accordion) return activeKey.value[0] === key ? [] : [key];
|
|
99
|
+
if (activeKey.value.indexOf(key) > -1) return activeKey.value.filter((item) => item !== key);
|
|
100
|
+
return [...activeKey.value, key];
|
|
101
|
+
};
|
|
102
|
+
const onItemClick = (key) => {
|
|
103
|
+
activeKey.value = getActiveKey(key);
|
|
104
|
+
setActiveKey(activeKey.value);
|
|
105
|
+
};
|
|
106
|
+
expose({ ref: refWrapper });
|
|
107
|
+
return () => {
|
|
108
|
+
const { prefixCls = "vc-collapse", openMotion, expandIcon, collapsible, accordion, classNames: classNames$1, styles, items, destroyOnHidden } = props;
|
|
109
|
+
const collapseClassName = classNames(prefixCls, attrs.class);
|
|
110
|
+
const mergedProps = {
|
|
111
|
+
...props,
|
|
112
|
+
...omit(attrs, ["class", "style"])
|
|
113
|
+
};
|
|
114
|
+
const mergedChildren = useItems(items, slots.default, {
|
|
115
|
+
prefixCls,
|
|
116
|
+
accordion,
|
|
117
|
+
openMotion,
|
|
118
|
+
expandIcon,
|
|
119
|
+
collapsible,
|
|
120
|
+
onItemClick,
|
|
121
|
+
activeKey: activeKey.value,
|
|
122
|
+
destroyOnHidden,
|
|
123
|
+
classNames: classNames$1,
|
|
124
|
+
styles
|
|
125
|
+
});
|
|
126
|
+
return createVNode("div", mergeProps({
|
|
127
|
+
"ref": refWrapper,
|
|
128
|
+
"class": collapseClassName,
|
|
129
|
+
"style": attrs.style,
|
|
130
|
+
"role": accordion ? "tablist" : void 0
|
|
131
|
+
}, pickAttrs(mergedProps, {
|
|
132
|
+
aria: true,
|
|
133
|
+
data: true
|
|
134
|
+
})), [mergedChildren]);
|
|
135
|
+
};
|
|
136
|
+
}
|
|
122
137
|
});
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
};
|
|
138
|
+
//#endregion
|
|
139
|
+
export { Collapse as default };
|
package/dist/Panel.js
CHANGED
|
@@ -1,185 +1,210 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
1
|
+
import PanelContent from "./PanelContent.js";
|
|
2
|
+
import { Transition, computed, createVNode, defineComponent, mergeDefaults, mergeProps, ref, vShow, withDirectives } from "vue";
|
|
3
|
+
import { classNames } from "@v-c/util";
|
|
4
|
+
import omit from "@v-c/util/dist/omit";
|
|
5
|
+
import KeyCode from "@v-c/util/dist/KeyCode";
|
|
6
|
+
//#region src/Panel.tsx
|
|
7
|
+
var CollapsePanel = /* @__PURE__ */ defineComponent({
|
|
8
|
+
props: /*@__PURE__*/ mergeDefaults({
|
|
9
|
+
id: {
|
|
10
|
+
type: String,
|
|
11
|
+
required: false,
|
|
12
|
+
default: void 0
|
|
13
|
+
},
|
|
14
|
+
header: {
|
|
15
|
+
type: [
|
|
16
|
+
Object,
|
|
17
|
+
Function,
|
|
18
|
+
String,
|
|
19
|
+
Number,
|
|
20
|
+
null,
|
|
21
|
+
Boolean,
|
|
22
|
+
Array
|
|
23
|
+
],
|
|
24
|
+
required: false,
|
|
25
|
+
default: void 0
|
|
26
|
+
},
|
|
27
|
+
prefixCls: {
|
|
28
|
+
type: String,
|
|
29
|
+
required: false,
|
|
30
|
+
default: void 0
|
|
31
|
+
},
|
|
32
|
+
headerClass: {
|
|
33
|
+
type: String,
|
|
34
|
+
required: false,
|
|
35
|
+
default: void 0
|
|
36
|
+
},
|
|
37
|
+
showArrow: {
|
|
38
|
+
type: Boolean,
|
|
39
|
+
required: false,
|
|
40
|
+
default: void 0
|
|
41
|
+
},
|
|
42
|
+
class: {
|
|
43
|
+
type: String,
|
|
44
|
+
required: false,
|
|
45
|
+
default: void 0
|
|
46
|
+
},
|
|
47
|
+
classNames: {
|
|
48
|
+
type: Object,
|
|
49
|
+
required: false,
|
|
50
|
+
default: void 0
|
|
51
|
+
},
|
|
52
|
+
style: {
|
|
53
|
+
type: Object,
|
|
54
|
+
required: false,
|
|
55
|
+
default: void 0
|
|
56
|
+
},
|
|
57
|
+
styles: {
|
|
58
|
+
type: Object,
|
|
59
|
+
required: false,
|
|
60
|
+
default: void 0
|
|
61
|
+
},
|
|
62
|
+
isActive: {
|
|
63
|
+
type: Boolean,
|
|
64
|
+
required: false,
|
|
65
|
+
default: void 0
|
|
66
|
+
},
|
|
67
|
+
openMotion: {
|
|
68
|
+
type: Object,
|
|
69
|
+
required: false,
|
|
70
|
+
default: void 0
|
|
71
|
+
},
|
|
72
|
+
destroyOnHidden: {
|
|
73
|
+
type: Boolean,
|
|
74
|
+
required: false,
|
|
75
|
+
default: void 0
|
|
76
|
+
},
|
|
77
|
+
accordion: {
|
|
78
|
+
type: Boolean,
|
|
79
|
+
required: false,
|
|
80
|
+
default: void 0
|
|
81
|
+
},
|
|
82
|
+
forceRender: {
|
|
83
|
+
type: Boolean,
|
|
84
|
+
required: false,
|
|
85
|
+
default: void 0
|
|
86
|
+
},
|
|
87
|
+
extra: {
|
|
88
|
+
type: [
|
|
89
|
+
Object,
|
|
90
|
+
Function,
|
|
91
|
+
String,
|
|
92
|
+
Number,
|
|
93
|
+
null,
|
|
94
|
+
Boolean,
|
|
95
|
+
Array
|
|
96
|
+
],
|
|
97
|
+
required: false,
|
|
98
|
+
default: void 0
|
|
99
|
+
},
|
|
100
|
+
onItemClick: {
|
|
101
|
+
type: Function,
|
|
102
|
+
required: false,
|
|
103
|
+
default: void 0
|
|
104
|
+
},
|
|
105
|
+
expandIcon: {
|
|
106
|
+
type: Function,
|
|
107
|
+
required: false,
|
|
108
|
+
default: void 0
|
|
109
|
+
},
|
|
110
|
+
panelKey: {
|
|
111
|
+
type: [String, Number],
|
|
112
|
+
required: false,
|
|
113
|
+
default: void 0
|
|
114
|
+
},
|
|
115
|
+
role: {
|
|
116
|
+
type: String,
|
|
117
|
+
required: false,
|
|
118
|
+
default: void 0
|
|
119
|
+
},
|
|
120
|
+
collapsible: {
|
|
121
|
+
type: String,
|
|
122
|
+
required: false,
|
|
123
|
+
default: void 0
|
|
124
|
+
},
|
|
125
|
+
children: {
|
|
126
|
+
type: [
|
|
127
|
+
Object,
|
|
128
|
+
Function,
|
|
129
|
+
String,
|
|
130
|
+
Number,
|
|
131
|
+
null,
|
|
132
|
+
Boolean,
|
|
133
|
+
Array
|
|
134
|
+
],
|
|
135
|
+
required: false,
|
|
136
|
+
default: void 0
|
|
137
|
+
}
|
|
138
|
+
}, {
|
|
139
|
+
showArrow: true,
|
|
140
|
+
classNames: {},
|
|
141
|
+
styles: {}
|
|
142
|
+
}),
|
|
143
|
+
name: "CollapsePanel",
|
|
144
|
+
inheritAttrs: false,
|
|
145
|
+
setup(props, { attrs, expose }) {
|
|
146
|
+
const disabled = computed(() => props.collapsible === "disabled");
|
|
147
|
+
const refWrapper = ref();
|
|
148
|
+
const ifExtraExist = computed(() => props.extra !== null && props.extra !== void 0 && typeof props.extra !== "boolean");
|
|
149
|
+
const collapsibleProps = computed(() => {
|
|
150
|
+
return {
|
|
151
|
+
"onClick": () => {
|
|
152
|
+
props.onItemClick?.(props.panelKey);
|
|
153
|
+
},
|
|
154
|
+
"onKeydown": (e) => {
|
|
155
|
+
if (e.key === "Enter" || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) props.onItemClick?.(props.panelKey);
|
|
156
|
+
},
|
|
157
|
+
"role": props.accordion ? "tab" : "button",
|
|
158
|
+
"aria-expanded": props.isActive,
|
|
159
|
+
"aria-disabled": disabled.value,
|
|
160
|
+
"tabIndex": disabled.value ? -1 : 0
|
|
161
|
+
};
|
|
162
|
+
});
|
|
163
|
+
expose({ ref: refWrapper });
|
|
164
|
+
return () => {
|
|
165
|
+
const { extra, prefixCls, isActive, class: className, expandIcon, forceRender, headerClass, collapsible, accordion, openMotion = {}, onItemClick, classNames: customizeClassNames = {}, showArrow = true, destroyOnHidden, styles = {}, header, panelKey, children, ...restProps } = props;
|
|
166
|
+
const collapsePanelClassNames = classNames(`${prefixCls}-item`, {
|
|
167
|
+
[`${prefixCls}-item-active`]: isActive,
|
|
168
|
+
[`${prefixCls}-item-disabled`]: disabled.value
|
|
169
|
+
}, className);
|
|
170
|
+
const headerProps = {
|
|
171
|
+
class: classNames(headerClass, `${prefixCls}-header`, { [`${prefixCls}-collapsible-${collapsible}`]: !!collapsible }, customizeClassNames.header),
|
|
172
|
+
style: styles.header,
|
|
173
|
+
...["header", "icon"].includes(collapsible) ? {} : collapsibleProps.value
|
|
174
|
+
};
|
|
175
|
+
const iconNodeInner = typeof expandIcon === "function" ? expandIcon(props) : createVNode("i", { "class": "arrow" }, null);
|
|
176
|
+
const iconNode = iconNodeInner && createVNode("div", mergeProps({
|
|
177
|
+
"class": classNames(`${prefixCls}-expand-icon`, customizeClassNames?.icon),
|
|
178
|
+
"style": styles?.icon
|
|
179
|
+
}, ["header", "icon"].includes(collapsible) ? collapsibleProps.value : {}), [iconNodeInner]);
|
|
180
|
+
const panelContent = withDirectives(createVNode(PanelContent, {
|
|
181
|
+
"prefixCls": prefixCls,
|
|
182
|
+
"classNames": customizeClassNames,
|
|
183
|
+
"styles": styles,
|
|
184
|
+
"isActive": isActive,
|
|
185
|
+
"forceRender": forceRender,
|
|
186
|
+
"role": accordion ? "tabpanel" : void 0
|
|
187
|
+
}, { default: () => children }), [[vShow, isActive]]);
|
|
188
|
+
const transitionProps = {
|
|
189
|
+
appear: false,
|
|
190
|
+
...openMotion
|
|
191
|
+
};
|
|
192
|
+
return createVNode("div", mergeProps({
|
|
193
|
+
...restProps,
|
|
194
|
+
...omit(attrs, ["class"])
|
|
195
|
+
}, {
|
|
196
|
+
"ref": refWrapper,
|
|
197
|
+
"class": collapsePanelClassNames
|
|
198
|
+
}), [createVNode("div", headerProps, [
|
|
199
|
+
showArrow && iconNode,
|
|
200
|
+
createVNode("span", mergeProps({
|
|
201
|
+
"class": classNames(`${prefixCls}-title`, customizeClassNames?.title),
|
|
202
|
+
"style": styles?.title
|
|
203
|
+
}, collapsible === "header" ? collapsibleProps.value : {}), [header]),
|
|
204
|
+
ifExtraExist.value && createVNode("div", { "class": `${prefixCls}-extra` }, [extra])
|
|
205
|
+
]), createVNode(Transition, transitionProps, { default: () => [!destroyOnHidden || isActive ? panelContent : null] })]);
|
|
206
|
+
};
|
|
207
|
+
}
|
|
182
208
|
});
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
};
|
|
209
|
+
//#endregion
|
|
210
|
+
export { CollapsePanel as default };
|
package/dist/PanelContent.js
CHANGED
|
@@ -1,126 +1,161 @@
|
|
|
1
|
-
import { defineComponent
|
|
2
|
-
import { classNames
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
1
|
+
import { createVNode, defineComponent, ref, watch } from "vue";
|
|
2
|
+
import { classNames } from "@v-c/util";
|
|
3
|
+
//#region src/PanelContent.tsx
|
|
4
|
+
var PanelContent = /* @__PURE__ */ defineComponent({
|
|
5
|
+
props: {
|
|
6
|
+
id: {
|
|
7
|
+
type: String,
|
|
8
|
+
required: false,
|
|
9
|
+
default: void 0
|
|
10
|
+
},
|
|
11
|
+
header: {
|
|
12
|
+
type: [
|
|
13
|
+
Object,
|
|
14
|
+
Function,
|
|
15
|
+
String,
|
|
16
|
+
Number,
|
|
17
|
+
null,
|
|
18
|
+
Boolean,
|
|
19
|
+
Array
|
|
20
|
+
],
|
|
21
|
+
required: false,
|
|
22
|
+
default: void 0
|
|
23
|
+
},
|
|
24
|
+
prefixCls: {
|
|
25
|
+
type: String,
|
|
26
|
+
required: false,
|
|
27
|
+
default: void 0
|
|
28
|
+
},
|
|
29
|
+
headerClass: {
|
|
30
|
+
type: String,
|
|
31
|
+
required: false,
|
|
32
|
+
default: void 0
|
|
33
|
+
},
|
|
34
|
+
showArrow: {
|
|
35
|
+
type: Boolean,
|
|
36
|
+
required: false,
|
|
37
|
+
default: void 0
|
|
38
|
+
},
|
|
39
|
+
class: {
|
|
40
|
+
type: String,
|
|
41
|
+
required: false,
|
|
42
|
+
default: void 0
|
|
43
|
+
},
|
|
44
|
+
classNames: {
|
|
45
|
+
type: Object,
|
|
46
|
+
required: false,
|
|
47
|
+
default: void 0
|
|
48
|
+
},
|
|
49
|
+
style: {
|
|
50
|
+
type: Object,
|
|
51
|
+
required: false,
|
|
52
|
+
default: void 0
|
|
53
|
+
},
|
|
54
|
+
styles: {
|
|
55
|
+
type: Object,
|
|
56
|
+
required: false,
|
|
57
|
+
default: void 0
|
|
58
|
+
},
|
|
59
|
+
isActive: {
|
|
60
|
+
type: Boolean,
|
|
61
|
+
required: false,
|
|
62
|
+
default: void 0
|
|
63
|
+
},
|
|
64
|
+
openMotion: {
|
|
65
|
+
type: Object,
|
|
66
|
+
required: false,
|
|
67
|
+
default: void 0
|
|
68
|
+
},
|
|
69
|
+
destroyOnHidden: {
|
|
70
|
+
type: Boolean,
|
|
71
|
+
required: false,
|
|
72
|
+
default: void 0
|
|
73
|
+
},
|
|
74
|
+
accordion: {
|
|
75
|
+
type: Boolean,
|
|
76
|
+
required: false,
|
|
77
|
+
default: void 0
|
|
78
|
+
},
|
|
79
|
+
forceRender: {
|
|
80
|
+
type: Boolean,
|
|
81
|
+
required: false,
|
|
82
|
+
default: void 0
|
|
83
|
+
},
|
|
84
|
+
extra: {
|
|
85
|
+
type: [
|
|
86
|
+
Object,
|
|
87
|
+
Function,
|
|
88
|
+
String,
|
|
89
|
+
Number,
|
|
90
|
+
null,
|
|
91
|
+
Boolean,
|
|
92
|
+
Array
|
|
93
|
+
],
|
|
94
|
+
required: false,
|
|
95
|
+
default: void 0
|
|
96
|
+
},
|
|
97
|
+
onItemClick: {
|
|
98
|
+
type: Function,
|
|
99
|
+
required: false,
|
|
100
|
+
default: void 0
|
|
101
|
+
},
|
|
102
|
+
expandIcon: {
|
|
103
|
+
type: Function,
|
|
104
|
+
required: false,
|
|
105
|
+
default: void 0
|
|
106
|
+
},
|
|
107
|
+
panelKey: {
|
|
108
|
+
type: [String, Number],
|
|
109
|
+
required: false,
|
|
110
|
+
default: void 0
|
|
111
|
+
},
|
|
112
|
+
role: {
|
|
113
|
+
type: String,
|
|
114
|
+
required: false,
|
|
115
|
+
default: void 0
|
|
116
|
+
},
|
|
117
|
+
collapsible: {
|
|
118
|
+
type: String,
|
|
119
|
+
required: false,
|
|
120
|
+
default: void 0
|
|
121
|
+
},
|
|
122
|
+
children: {
|
|
123
|
+
type: [
|
|
124
|
+
Object,
|
|
125
|
+
Function,
|
|
126
|
+
String,
|
|
127
|
+
Number,
|
|
128
|
+
null,
|
|
129
|
+
Boolean,
|
|
130
|
+
Array
|
|
131
|
+
],
|
|
132
|
+
required: false,
|
|
133
|
+
default: void 0
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
name: "PanelContent",
|
|
137
|
+
inheritAttrs: false,
|
|
138
|
+
setup(props, { slots }) {
|
|
139
|
+
const rendered = ref(props.isActive || props.forceRender);
|
|
140
|
+
watch(() => [props.isActive, props.forceRender], () => {
|
|
141
|
+
if (props.isActive || props.forceRender) rendered.value = true;
|
|
142
|
+
});
|
|
143
|
+
return () => {
|
|
144
|
+
if (!rendered.value) return null;
|
|
145
|
+
const { prefixCls, isActive, style, role, class: className, classNames: customizeClassNames, styles } = props;
|
|
146
|
+
return createVNode("div", {
|
|
147
|
+
"class": classNames(`${prefixCls}-panel`, {
|
|
148
|
+
[`${prefixCls}-panel-active`]: isActive,
|
|
149
|
+
[`${prefixCls}-panel-inactive`]: !isActive
|
|
150
|
+
}, className),
|
|
151
|
+
"style": style,
|
|
152
|
+
"role": role
|
|
153
|
+
}, [createVNode("div", {
|
|
154
|
+
"class": classNames(`${prefixCls}-body`, customizeClassNames?.body),
|
|
155
|
+
"style": styles?.body
|
|
156
|
+
}, [slots.default?.()])]);
|
|
157
|
+
};
|
|
158
|
+
}
|
|
123
159
|
});
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
};
|
|
160
|
+
//#endregion
|
|
161
|
+
export { PanelContent as default };
|
package/dist/hooks/useItems.js
CHANGED
|
@@ -1,100 +1,107 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
styles: b
|
|
18
|
-
} = a;
|
|
19
|
-
return e.map((k, r) => {
|
|
20
|
-
const {
|
|
21
|
-
label: I,
|
|
22
|
-
key: O,
|
|
23
|
-
collapsible: H,
|
|
24
|
-
onItemClick: g,
|
|
25
|
-
destroyOnHidden: N,
|
|
26
|
-
...c
|
|
27
|
-
} = k, n = String(O ?? r), m = H ?? t, i = N ?? C, o = (A) => {
|
|
28
|
-
m !== "disabled" && (y?.(A), g?.(A));
|
|
29
|
-
};
|
|
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,
|
|
34
|
-
prefixCls: s,
|
|
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
|
|
45
|
-
}), null);
|
|
46
|
-
});
|
|
1
|
+
import CollapsePanel from "../Panel.js";
|
|
2
|
+
import { createVNode, mergeProps } from "vue";
|
|
3
|
+
import { clsx } from "@v-c/util";
|
|
4
|
+
import { toArray } from "@v-c/util/dist/Children/toArray";
|
|
5
|
+
import { isEmptyElement } from "@v-c/util/dist/props-util";
|
|
6
|
+
import { cloneElement } from "@v-c/util/dist/vnode";
|
|
7
|
+
//#region src/hooks/useItems.tsx
|
|
8
|
+
function mergeSemantic(source, target, mergeFunc) {
|
|
9
|
+
if (!source && !target) return void 0;
|
|
10
|
+
const keys = /* @__PURE__ */ new Set([...Object.keys(source || {}), ...Object.keys(target || {})]);
|
|
11
|
+
const result = {};
|
|
12
|
+
keys.forEach((key) => {
|
|
13
|
+
const merged = mergeFunc(source?.[key], target?.[key]);
|
|
14
|
+
if (merged !== void 0) result[key] = merged;
|
|
15
|
+
});
|
|
16
|
+
return result;
|
|
47
17
|
}
|
|
48
|
-
function
|
|
49
|
-
|
|
50
|
-
if (typeof e == "boolean" || typeof e == "number" || typeof e == "string")
|
|
51
|
-
return e;
|
|
52
|
-
const {
|
|
53
|
-
prefixCls: l,
|
|
54
|
-
accordion: t,
|
|
55
|
-
collapsible: y,
|
|
56
|
-
onItemClick: d,
|
|
57
|
-
activeKey: p,
|
|
58
|
-
openMotion: f,
|
|
59
|
-
expandIcon: C,
|
|
60
|
-
classNames: u,
|
|
61
|
-
styles: b,
|
|
62
|
-
destroyOnHidden: k
|
|
63
|
-
} = s, r = e.key || String(a), {
|
|
64
|
-
header: I,
|
|
65
|
-
headerClass: O,
|
|
66
|
-
collapsible: H,
|
|
67
|
-
onItemClick: g,
|
|
68
|
-
destroyOnHidden: N
|
|
69
|
-
} = e.props || {};
|
|
70
|
-
let c = !1;
|
|
71
|
-
t ? c = p[0] === r : c = p.includes(r);
|
|
72
|
-
const n = H ?? y, m = (o) => {
|
|
73
|
-
n !== "disabled" && (d?.(o), g?.(o));
|
|
74
|
-
}, i = {
|
|
75
|
-
key: r,
|
|
76
|
-
panelKey: r,
|
|
77
|
-
header: I,
|
|
78
|
-
headerClass: O,
|
|
79
|
-
classNames: u,
|
|
80
|
-
styles: b,
|
|
81
|
-
isActive: c,
|
|
82
|
-
prefixCls: l,
|
|
83
|
-
destroyOnHidden: N ?? k,
|
|
84
|
-
openMotion: f,
|
|
85
|
-
accordion: t,
|
|
86
|
-
children: e.children?.default?.(),
|
|
87
|
-
onItemClick: m,
|
|
88
|
-
expandIcon: C,
|
|
89
|
-
collapsible: n
|
|
90
|
-
};
|
|
91
|
-
return Object.keys(i).forEach((o) => {
|
|
92
|
-
typeof i[o] > "u" && delete i[o];
|
|
93
|
-
}), E(e, i);
|
|
18
|
+
function mergeSemanticClassNames(source, target) {
|
|
19
|
+
return mergeSemantic(source, target, (s, t) => clsx(s, t) || void 0);
|
|
94
20
|
}
|
|
95
|
-
function
|
|
96
|
-
|
|
21
|
+
function mergeSemanticStyles(source, target) {
|
|
22
|
+
return mergeSemantic(source, target, (s, t) => {
|
|
23
|
+
if (!s && !t) return void 0;
|
|
24
|
+
return {
|
|
25
|
+
...s,
|
|
26
|
+
...t
|
|
27
|
+
};
|
|
28
|
+
});
|
|
97
29
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
30
|
+
function convertItemsToNodes(items, props) {
|
|
31
|
+
const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, destroyOnHidden, classNames: collapseClassNames, styles: collapseStyles } = props;
|
|
32
|
+
return items.map((item, index) => {
|
|
33
|
+
const { label, key: rawKey, collapsible: rawCollapsible, onItemClick: rawOnItemClick, destroyOnHidden: rawDestroyOnHidden, ...restProps } = item;
|
|
34
|
+
const key = String(rawKey ?? index);
|
|
35
|
+
const mergeCollapsible = rawCollapsible ?? collapsible;
|
|
36
|
+
const mergedDestroyOnHidden = rawDestroyOnHidden ?? destroyOnHidden;
|
|
37
|
+
const handleItemClick = (value) => {
|
|
38
|
+
if (mergeCollapsible === "disabled") return;
|
|
39
|
+
onItemClick?.(value);
|
|
40
|
+
rawOnItemClick?.(value);
|
|
41
|
+
};
|
|
42
|
+
let isActive = false;
|
|
43
|
+
if (accordion) isActive = activeKey?.[0] === key;
|
|
44
|
+
else isActive = activeKey.includes(key);
|
|
45
|
+
return createVNode(CollapsePanel, mergeProps(restProps, {
|
|
46
|
+
"classNames": mergeSemanticClassNames(collapseClassNames, restProps.classNames),
|
|
47
|
+
"styles": mergeSemanticStyles(collapseStyles, restProps.styles),
|
|
48
|
+
"prefixCls": prefixCls,
|
|
49
|
+
"key": key,
|
|
50
|
+
"panelKey": key,
|
|
51
|
+
"isActive": isActive,
|
|
52
|
+
"accordion": accordion,
|
|
53
|
+
"openMotion": openMotion,
|
|
54
|
+
"expandIcon": expandIcon,
|
|
55
|
+
"header": label,
|
|
56
|
+
"destroyOnHidden": mergedDestroyOnHidden,
|
|
57
|
+
"collapsible": mergeCollapsible,
|
|
58
|
+
"onItemClick": handleItemClick
|
|
59
|
+
}), null);
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* @deprecated The next major version will be removed
|
|
64
|
+
*/
|
|
65
|
+
function getNewChild(child, index, props) {
|
|
66
|
+
if (isEmptyElement(child) || !child) return null;
|
|
67
|
+
if (typeof child === "boolean" || typeof child === "number" || typeof child === "string") return child;
|
|
68
|
+
const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, classNames: collapseClassNames, styles: collapseStyles, destroyOnHidden } = props;
|
|
69
|
+
const key = child.key || String(index);
|
|
70
|
+
const { header, headerClass, collapsible: childCollapsible, onItemClick: childOnItemClick, destroyOnHidden: childDestroyOnHidden, classNames: childClassNames, styles: childStyles } = child.props || {};
|
|
71
|
+
let isActive = false;
|
|
72
|
+
if (accordion) isActive = activeKey[0] === key;
|
|
73
|
+
else isActive = activeKey.includes(key);
|
|
74
|
+
const mergeCollapsible = childCollapsible ?? collapsible;
|
|
75
|
+
const handleItemClick = (value) => {
|
|
76
|
+
if (mergeCollapsible === "disabled") return;
|
|
77
|
+
onItemClick?.(value);
|
|
78
|
+
childOnItemClick?.(value);
|
|
79
|
+
};
|
|
80
|
+
const childProps = {
|
|
81
|
+
key,
|
|
82
|
+
panelKey: key,
|
|
83
|
+
header,
|
|
84
|
+
headerClass,
|
|
85
|
+
classNames: mergeSemanticClassNames(collapseClassNames, childClassNames),
|
|
86
|
+
styles: mergeSemanticStyles(collapseStyles, childStyles),
|
|
87
|
+
isActive,
|
|
88
|
+
prefixCls,
|
|
89
|
+
destroyOnHidden: childDestroyOnHidden ?? destroyOnHidden,
|
|
90
|
+
openMotion,
|
|
91
|
+
accordion,
|
|
92
|
+
children: child.children?.default?.(),
|
|
93
|
+
onItemClick: handleItemClick,
|
|
94
|
+
expandIcon,
|
|
95
|
+
collapsible: mergeCollapsible
|
|
96
|
+
};
|
|
97
|
+
Object.keys(childProps).forEach((propName) => {
|
|
98
|
+
if (typeof childProps[propName] === "undefined") delete childProps[propName];
|
|
99
|
+
});
|
|
100
|
+
return cloneElement(child, childProps);
|
|
101
|
+
}
|
|
102
|
+
function useItems(items, children, props) {
|
|
103
|
+
if (Array.isArray(items)) return convertItemsToNodes(items, props);
|
|
104
|
+
return toArray(children?.()).map((target, index) => getNewChild(target, index, props));
|
|
105
|
+
}
|
|
106
|
+
//#endregion
|
|
107
|
+
export { useItems };
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
};
|
|
1
|
+
import CollapsePanel from "./Panel.js";
|
|
2
|
+
import Collapse from "./Collapse.js";
|
|
3
|
+
//#region src/index.ts
|
|
4
|
+
var src_default = Collapse;
|
|
5
|
+
//#endregion
|
|
6
|
+
export { CollapsePanel as Panel, src_default as default };
|
package/dist/interface.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Key, VueNode } from '
|
|
1
|
+
import { Key, VueNode } from '@v-c/util/dist/type';
|
|
2
2
|
import { CSSProperties, Ref, TransitionProps } from 'vue';
|
|
3
3
|
export type SemanticName = 'header' | 'title' | 'body' | 'icon';
|
|
4
4
|
export interface CollapsePanelProps {
|
package/dist/interface.js
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/package.json
CHANGED
|
@@ -1,28 +1,35 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@v-c/collapse",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "1.0.1",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/collapse",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/antdv-next/vue-components.git"
|
|
10
|
+
},
|
|
5
11
|
"publishConfig": {
|
|
6
12
|
"access": "public"
|
|
7
13
|
},
|
|
8
|
-
"files": [
|
|
9
|
-
"dist"
|
|
10
|
-
],
|
|
11
14
|
"exports": {
|
|
12
15
|
".": {
|
|
13
16
|
"types": "./dist/index.d.ts",
|
|
14
17
|
"import": "./dist/index.js",
|
|
15
|
-
"
|
|
18
|
+
"default": "./dist/index.js"
|
|
16
19
|
},
|
|
17
20
|
"./dist/*": "./dist/*",
|
|
18
21
|
"./package.json": "./package.json"
|
|
19
22
|
},
|
|
20
23
|
"main": "dist/index.js",
|
|
24
|
+
"files": [
|
|
25
|
+
"dist",
|
|
26
|
+
"package.json"
|
|
27
|
+
],
|
|
21
28
|
"peerDependencies": {
|
|
22
29
|
"vue": "^3.0.0"
|
|
23
30
|
},
|
|
24
31
|
"dependencies": {
|
|
25
|
-
"@v-c/util": "
|
|
32
|
+
"@v-c/util": "^1.0.21"
|
|
26
33
|
},
|
|
27
34
|
"scripts": {
|
|
28
35
|
"build": "vite build",
|
package/dist/Collapse.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),b=require("@v-c/util"),S=require("@v-c/util/dist/hooks/useMergedState"),x=require("@v-c/util/dist/omit"),N=require("@v-c/util/dist/pickAttrs"),O=require("./hooks/useItems.cjs");function h(r){let t=r;if(!Array.isArray(t)){const a=typeof t;t=a==="number"||a==="string"?[t]:[]}return t.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},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(r,{attrs:t,expose:a,slots:d}){const l=i.ref(),[s,f]=S([],{value:i.toRef(r,"activeKey"),onChange:e=>r.onChange?.(e),defaultValue:r.defaultActiveKey,postState:h}),y=e=>r.accordion?s.value[0]===e?[]:[e]:s.value.indexOf(e)>-1?s.value.filter(n=>n!==e):[...s.value,e],p=e=>{s.value=y(e),f(s.value)};return a({ref:l}),()=>{const{prefixCls:e="vc-collapse",openMotion:c,expandIcon:o,collapsible:n,accordion:u,classNames:v,styles:m,items:g,destroyOnHidden:q}=r,A=b.classNames(e,t.class),C={...r,...x(t,["class","style"])},K=O.useItems(g,d.default,{prefixCls:e,accordion:u,openMotion:c,expandIcon:o,collapsible:n,onItemClick:p,activeKey:s.value,destroyOnHidden:q,classNames:v,styles:m});return i.createVNode("div",i.mergeProps({ref:l,class:A,style:t.style,role:u?"tablist":void 0},N(C,{aria:!0,data:!0})),[K])}}});exports.default=M;
|
package/dist/Panel.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
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:r=>{(r.key==="Enter"||r.keyCode===y.ENTER||r.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:r,prefixCls:s,isActive:l,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`]:l,[`${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:l,forceRender:v,role:b?"tabpanel":void 0},{default:()=>S}),[[e.vShow,l]]),E={appear:!1,...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`},[r])]),e.createVNode(e.Transition,E,{default:()=>[!P||l?k:null]})])}}});exports.default=j;
|
package/dist/PanelContent.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
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/hooks/useItems.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
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/index.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Collapse.cjs"),l=require("./Panel.cjs");exports.default=e.default;exports.Panel=l.default;
|
package/dist/interface.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|