@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 CHANGED
@@ -1,125 +1,139 @@
1
- import { defineComponent as K, mergeDefaults as x, ref as N, toRef as b, createVNode as S, mergeProps as h } from "vue";
2
- import { classNames as O } from "@v-c/util";
3
- import I from "@v-c/util/dist/hooks/useMergedState";
4
- import M from "@v-c/util/dist/omit";
5
- import V from "@v-c/util/dist/pickAttrs";
6
- import { useItems as j } from "./hooks/useItems.js";
7
- function B(r) {
8
- let t = r;
9
- if (!Array.isArray(t)) {
10
- const a = typeof t;
11
- t = a === "number" || a === "string" ? [t] : [];
12
- }
13
- return t.map((a) => String(a));
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
- const F = {
16
- prefixCls: "vc-collapse"
17
- }, $ = /* @__PURE__ */ K({
18
- props: /* @__PURE__ */ x({
19
- prefixCls: {
20
- type: String,
21
- required: !1
22
- },
23
- activeKey: {
24
- type: [String, Number, Array],
25
- required: !1
26
- },
27
- defaultActiveKey: {
28
- type: [String, Number, Array],
29
- required: !1
30
- },
31
- openMotion: {
32
- type: null,
33
- required: !1
34
- },
35
- onChange: {
36
- type: Function,
37
- required: !1
38
- },
39
- accordion: {
40
- type: Boolean,
41
- required: !1
42
- },
43
- destroyOnHidden: {
44
- type: Boolean,
45
- required: !1
46
- },
47
- expandIcon: {
48
- type: Function,
49
- required: !1
50
- },
51
- collapsible: {
52
- type: String,
53
- required: !1
54
- },
55
- items: {
56
- type: Array,
57
- required: !1
58
- },
59
- classNames: {
60
- type: Object,
61
- required: !1
62
- },
63
- styles: {
64
- type: Object,
65
- required: !1
66
- }
67
- }, F),
68
- name: "VcCollapse",
69
- inheritAttrs: !1,
70
- setup(r, {
71
- attrs: t,
72
- expose: a,
73
- slots: u
74
- }) {
75
- const l = N(), [s, f] = I([], {
76
- value: b(r, "activeKey"),
77
- onChange: (e) => r.onChange?.(e),
78
- defaultValue: r.defaultActiveKey,
79
- postState: B
80
- }), d = (e) => r.accordion ? s.value[0] === e ? [] : [e] : s.value.indexOf(e) > -1 ? s.value.filter((i) => i !== e) : [...s.value, e], p = (e) => {
81
- s.value = d(e), f(s.value);
82
- };
83
- return a({
84
- ref: l
85
- }), () => {
86
- const {
87
- prefixCls: e = "vc-collapse",
88
- openMotion: n,
89
- expandIcon: o,
90
- collapsible: i,
91
- accordion: c,
92
- classNames: y,
93
- styles: m,
94
- items: v,
95
- destroyOnHidden: g
96
- } = r, A = O(e, t.class), q = {
97
- ...r,
98
- ...M(t, ["class", "style"])
99
- }, C = j(v, u.default, {
100
- prefixCls: e,
101
- accordion: c,
102
- openMotion: n,
103
- expandIcon: o,
104
- collapsible: i,
105
- onItemClick: p,
106
- activeKey: s.value,
107
- destroyOnHidden: g,
108
- classNames: y,
109
- styles: m
110
- });
111
- return S("div", h({
112
- ref: l,
113
- class: A,
114
- style: t.style,
115
- role: c ? "tablist" : void 0
116
- }, V(q, {
117
- aria: !0,
118
- data: !0
119
- })), [C]);
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
- export {
124
- $ as default
125
- };
138
+ //#endregion
139
+ export { Collapse as default };
package/dist/Panel.js CHANGED
@@ -1,185 +1,210 @@
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
- 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";
5
- import V from "./PanelContent.js";
6
- const W = {
7
- showArrow: !0,
8
- classNames: {},
9
- styles: {}
10
- }, _ = /* @__PURE__ */ j({
11
- props: /* @__PURE__ */ T({
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
- class: {
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
- }, W),
97
- name: "CollapsePanel",
98
- inheritAttrs: !1,
99
- setup(e, {
100
- attrs: q,
101
- expose: C
102
- }) {
103
- const d = u(() => e.collapsible === "disabled"), p = D(), b = 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
- class: v,
123
- expandIcon: y,
124
- forceRender: x,
125
- headerClass: N,
126
- collapsible: r,
127
- accordion: w,
128
- openMotion: g = {},
129
- onItemClick: G,
130
- classNames: n = {},
131
- showArrow: P = !0,
132
- destroyOnHidden: $,
133
- styles: i = {},
134
- header: A,
135
- panelKey: J,
136
- children: I,
137
- ...S
138
- } = e, k = o(`${a}-item`, {
139
- [`${a}-item-active`]: t,
140
- [`${a}-item-disabled`]: d.value
141
- }, v), E = {
142
- class: o(N, `${a}-header`, {
143
- [`${a}-collapsible-${r}`]: !!r
144
- }, n.header),
145
- style: i.header,
146
- ...["header", "icon"].includes(r) ? {} : c.value
147
- }, m = typeof y == "function" ? y(e) : l("i", {
148
- class: "arrow"
149
- }, null), K = m && l("div", f({
150
- class: o(`${a}-expand-icon`, n?.icon),
151
- style: i?.icon
152
- }, ["header", "icon"].includes(r) ? c.value : {}), [m]), R = F(l(V, {
153
- prefixCls: a,
154
- classNames: n,
155
- styles: i,
156
- isActive: t,
157
- forceRender: x,
158
- role: w ? "tabpanel" : void 0
159
- }, {
160
- default: () => I
161
- }), [[H, t]]), B = {
162
- appear: !1,
163
- // leaveToClass: `${prefixCls}-panel-hidden`,
164
- ...g
165
- }, O = {
166
- ...S,
167
- ...z(q, ["class"])
168
- };
169
- return l("div", f(O, {
170
- ref: p,
171
- class: k
172
- }), [l("div", E, [P && K, l("span", f({
173
- class: o(`${a}-title`, n?.title),
174
- style: i?.title
175
- }, r === "header" ? c.value : {}), [A]), b.value && l("div", {
176
- class: `${a}-extra`
177
- }, [s])]), l(M, B, {
178
- default: () => [!$ || t ? R : null]
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
- export {
184
- _ as default
185
- };
209
+ //#endregion
210
+ export { CollapsePanel as default };
@@ -1,126 +1,161 @@
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
- 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
- class: {
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
- class: o,
107
- classNames: u,
108
- styles: c
109
- } = e;
110
- return s("div", {
111
- class: a(`${r}-panel`, {
112
- [`${r}-panel-active`]: l,
113
- [`${r}-panel-inactive`]: !l
114
- }, o),
115
- style: n,
116
- role: d
117
- }, [s("div", {
118
- class: a(`${r}-body`, u?.body),
119
- style: c?.body
120
- }, [i.default?.()])]);
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
- export {
125
- v as default
126
- };
160
+ //#endregion
161
+ export { PanelContent as default };
@@ -1,100 +1,107 @@
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
- import { cloneElement as E } from "@v-c/util/dist/vnode";
5
- import P from "../Panel.js";
6
- function D(e, a) {
7
- const {
8
- prefixCls: s,
9
- accordion: l,
10
- collapsible: t,
11
- onItemClick: y,
12
- activeKey: d,
13
- openMotion: p,
14
- expandIcon: f,
15
- destroyOnHidden: C,
16
- classNames: u,
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 M(e, a, s) {
49
- if (v(e) || !e) return null;
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 z(e, a, s) {
96
- return Array.isArray(e) ? D(e, s) : h(a?.()).map((l, t) => M(l, t, s));
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
- export {
99
- z as useItems
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 e from "./Collapse.js";
2
- import { default as r } from "./Panel.js";
3
- export {
4
- r as Panel,
5
- e as default
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 };
@@ -1,4 +1,4 @@
1
- import { Key, VueNode } from '../../util/src/type';
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": "0.0.5",
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
- "require": "./dist/index.cjs"
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": "0.0.7"
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;
@@ -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;
@@ -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;
@@ -1 +0,0 @@
1
- "use strict";