@v-c/collapse 0.0.5 → 1.0.0

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.
Files changed (14) hide show
  1. package/dist/Collapse.cjs +146 -1
  2. package/dist/Collapse.js +135 -123
  3. package/dist/Panel.cjs +216 -1
  4. package/dist/Panel.js +207 -184
  5. package/dist/PanelContent.cjs +165 -1
  6. package/dist/PanelContent.js +158 -125
  7. package/dist/_virtual/rolldown_runtime.cjs +21 -0
  8. package/dist/hooks/useItems.cjs +81 -1
  9. package/dist/hooks/useItems.js +76 -97
  10. package/dist/index.cjs +9 -1
  11. package/dist/index.js +4 -6
  12. package/dist/interface.cjs +1 -1
  13. package/dist/interface.js +0 -1
  14. package/package.json +6 -5
package/dist/Panel.js CHANGED
@@ -1,185 +1,208 @@
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_default 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
+ var Panel_default = /* @__PURE__ */ defineComponent({
7
+ props: /* @__PURE__ */ mergeDefaults({
8
+ id: {
9
+ type: String,
10
+ required: false,
11
+ default: void 0
12
+ },
13
+ header: {
14
+ type: [
15
+ Object,
16
+ Function,
17
+ String,
18
+ Number,
19
+ null,
20
+ Boolean,
21
+ Array
22
+ ],
23
+ required: false,
24
+ default: void 0
25
+ },
26
+ prefixCls: {
27
+ type: String,
28
+ required: false,
29
+ default: void 0
30
+ },
31
+ headerClass: {
32
+ type: String,
33
+ required: false,
34
+ default: void 0
35
+ },
36
+ showArrow: {
37
+ type: Boolean,
38
+ required: false,
39
+ default: void 0
40
+ },
41
+ class: {
42
+ type: String,
43
+ required: false,
44
+ default: void 0
45
+ },
46
+ classNames: {
47
+ type: Object,
48
+ required: false,
49
+ default: void 0
50
+ },
51
+ style: {
52
+ type: Object,
53
+ required: false,
54
+ default: void 0
55
+ },
56
+ styles: {
57
+ type: Object,
58
+ required: false,
59
+ default: void 0
60
+ },
61
+ isActive: {
62
+ type: Boolean,
63
+ required: false,
64
+ default: void 0
65
+ },
66
+ openMotion: {
67
+ type: Object,
68
+ required: false,
69
+ default: void 0
70
+ },
71
+ destroyOnHidden: {
72
+ type: Boolean,
73
+ required: false,
74
+ default: void 0
75
+ },
76
+ accordion: {
77
+ type: Boolean,
78
+ required: false,
79
+ default: void 0
80
+ },
81
+ forceRender: {
82
+ type: Boolean,
83
+ required: false,
84
+ default: void 0
85
+ },
86
+ extra: {
87
+ type: [
88
+ Object,
89
+ Function,
90
+ String,
91
+ Number,
92
+ null,
93
+ Boolean,
94
+ Array
95
+ ],
96
+ required: false,
97
+ default: void 0
98
+ },
99
+ onItemClick: {
100
+ type: Function,
101
+ required: false,
102
+ default: void 0
103
+ },
104
+ expandIcon: {
105
+ type: Function,
106
+ required: false,
107
+ default: void 0
108
+ },
109
+ panelKey: {
110
+ type: [String, Number],
111
+ required: false,
112
+ default: void 0
113
+ },
114
+ role: {
115
+ type: String,
116
+ required: false,
117
+ default: void 0
118
+ },
119
+ collapsible: {
120
+ type: String,
121
+ required: false,
122
+ default: void 0
123
+ },
124
+ children: {
125
+ type: [
126
+ Object,
127
+ Function,
128
+ String,
129
+ Number,
130
+ null,
131
+ Boolean,
132
+ Array
133
+ ],
134
+ required: false,
135
+ default: void 0
136
+ }
137
+ }, {
138
+ showArrow: true,
139
+ classNames: {},
140
+ styles: {}
141
+ }),
142
+ name: "CollapsePanel",
143
+ inheritAttrs: false,
144
+ setup(props, { attrs, expose }) {
145
+ const disabled = computed(() => props.collapsible === "disabled");
146
+ const refWrapper = ref();
147
+ const ifExtraExist = computed(() => props.extra !== null && props.extra !== void 0 && typeof props.extra !== "boolean");
148
+ const collapsibleProps = computed(() => {
149
+ return {
150
+ "onClick": () => {
151
+ props.onItemClick?.(props.panelKey);
152
+ },
153
+ "onKeydown": (e) => {
154
+ if (e.key === "Enter" || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) props.onItemClick?.(props.panelKey);
155
+ },
156
+ "role": props.accordion ? "tab" : "button",
157
+ "aria-expanded": props.isActive,
158
+ "aria-disabled": disabled.value,
159
+ "tabIndex": disabled.value ? -1 : 0
160
+ };
161
+ });
162
+ expose({ ref: refWrapper });
163
+ return () => {
164
+ const { extra, prefixCls, isActive, class: className, expandIcon, forceRender, headerClass, collapsible, accordion, openMotion = {}, onItemClick, classNames: customizeClassNames = {}, showArrow = true, destroyOnHidden, styles = {}, header, panelKey, children, ...restProps } = props;
165
+ const collapsePanelClassNames = classNames(`${prefixCls}-item`, {
166
+ [`${prefixCls}-item-active`]: isActive,
167
+ [`${prefixCls}-item-disabled`]: disabled.value
168
+ }, className);
169
+ const headerProps = {
170
+ class: classNames(headerClass, `${prefixCls}-header`, { [`${prefixCls}-collapsible-${collapsible}`]: !!collapsible }, customizeClassNames.header),
171
+ style: styles.header,
172
+ ...["header", "icon"].includes(collapsible) ? {} : collapsibleProps.value
173
+ };
174
+ const iconNodeInner = typeof expandIcon === "function" ? expandIcon(props) : createVNode("i", { "class": "arrow" }, null);
175
+ const iconNode = iconNodeInner && createVNode("div", mergeProps({
176
+ "class": classNames(`${prefixCls}-expand-icon`, customizeClassNames?.icon),
177
+ "style": styles?.icon
178
+ }, ["header", "icon"].includes(collapsible) ? collapsibleProps.value : {}), [iconNodeInner]);
179
+ const panelContent = withDirectives(createVNode(PanelContent_default, {
180
+ "prefixCls": prefixCls,
181
+ "classNames": customizeClassNames,
182
+ "styles": styles,
183
+ "isActive": isActive,
184
+ "forceRender": forceRender,
185
+ "role": accordion ? "tabpanel" : void 0
186
+ }, { default: () => children }), [[vShow, isActive]]);
187
+ const transitionProps = {
188
+ appear: false,
189
+ ...openMotion
190
+ };
191
+ return createVNode("div", mergeProps({
192
+ ...restProps,
193
+ ...omit(attrs, ["class"])
194
+ }, {
195
+ "ref": refWrapper,
196
+ "class": collapsePanelClassNames
197
+ }), [createVNode("div", headerProps, [
198
+ showArrow && iconNode,
199
+ createVNode("span", mergeProps({
200
+ "class": classNames(`${prefixCls}-title`, customizeClassNames?.title),
201
+ "style": styles?.title
202
+ }, collapsible === "header" ? collapsibleProps.value : {}), [header]),
203
+ ifExtraExist.value && createVNode("div", { "class": `${prefixCls}-extra` }, [extra])
204
+ ]), createVNode(Transition, transitionProps, { default: () => [!destroyOnHidden || isActive ? panelContent : null] })]);
205
+ };
206
+ }
182
207
  });
183
- export {
184
- _ as default
185
- };
208
+ export { Panel_default as default };
package/dist/PanelContent.cjs CHANGED
@@ -1 +1,165 @@
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
+ Object.defineProperties(exports, {
2
+ __esModule: { value: true },
3
+ [Symbol.toStringTag]: { value: "Module" }
4
+ });
5
+ const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
6
+ let vue = require("vue");
7
+ let _v_c_util = require("@v-c/util");
8
+ var PanelContent = /* @__PURE__ */ (0, vue.defineComponent)({
9
+ props: {
10
+ id: {
11
+ type: String,
12
+ required: false,
13
+ default: void 0
14
+ },
15
+ header: {
16
+ type: [
17
+ Object,
18
+ Function,
19
+ String,
20
+ Number,
21
+ null,
22
+ Boolean,
23
+ Array
24
+ ],
25
+ required: false,
26
+ default: void 0
27
+ },
28
+ prefixCls: {
29
+ type: String,
30
+ required: false,
31
+ default: void 0
32
+ },
33
+ headerClass: {
34
+ type: String,
35
+ required: false,
36
+ default: void 0
37
+ },
38
+ showArrow: {
39
+ type: Boolean,
40
+ required: false,
41
+ default: void 0
42
+ },
43
+ class: {
44
+ type: String,
45
+ required: false,
46
+ default: void 0
47
+ },
48
+ classNames: {
49
+ type: Object,
50
+ required: false,
51
+ default: void 0
52
+ },
53
+ style: {
54
+ type: Object,
55
+ required: false,
56
+ default: void 0
57
+ },
58
+ styles: {
59
+ type: Object,
60
+ required: false,
61
+ default: void 0
62
+ },
63
+ isActive: {
64
+ type: Boolean,
65
+ required: false,
66
+ default: void 0
67
+ },
68
+ openMotion: {
69
+ type: Object,
70
+ required: false,
71
+ default: void 0
72
+ },
73
+ destroyOnHidden: {
74
+ type: Boolean,
75
+ required: false,
76
+ default: void 0
77
+ },
78
+ accordion: {
79
+ type: Boolean,
80
+ required: false,
81
+ default: void 0
82
+ },
83
+ forceRender: {
84
+ type: Boolean,
85
+ required: false,
86
+ default: void 0
87
+ },
88
+ extra: {
89
+ type: [
90
+ Object,
91
+ Function,
92
+ String,
93
+ Number,
94
+ null,
95
+ Boolean,
96
+ Array
97
+ ],
98
+ required: false,
99
+ default: void 0
100
+ },
101
+ onItemClick: {
102
+ type: Function,
103
+ required: false,
104
+ default: void 0
105
+ },
106
+ expandIcon: {
107
+ type: Function,
108
+ required: false,
109
+ default: void 0
110
+ },
111
+ panelKey: {
112
+ type: [String, Number],
113
+ required: false,
114
+ default: void 0
115
+ },
116
+ role: {
117
+ type: String,
118
+ required: false,
119
+ default: void 0
120
+ },
121
+ collapsible: {
122
+ type: String,
123
+ required: false,
124
+ default: void 0
125
+ },
126
+ children: {
127
+ type: [
128
+ Object,
129
+ Function,
130
+ String,
131
+ Number,
132
+ null,
133
+ Boolean,
134
+ Array
135
+ ],
136
+ required: false,
137
+ default: void 0
138
+ }
139
+ },
140
+ name: "PanelContent",
141
+ inheritAttrs: false,
142
+ setup(props, { slots }) {
143
+ const rendered = (0, vue.ref)(props.isActive || props.forceRender);
144
+ (0, vue.watch)(() => [props.isActive, props.forceRender], () => {
145
+ if (props.isActive || props.forceRender) rendered.value = true;
146
+ });
147
+ return () => {
148
+ if (!rendered.value) return null;
149
+ const { prefixCls, isActive, style, role, class: className, classNames: customizeClassNames, styles } = props;
150
+ return (0, vue.createVNode)("div", {
151
+ "class": (0, _v_c_util.classNames)(`${prefixCls}-panel`, {
152
+ [`${prefixCls}-panel-active`]: isActive,
153
+ [`${prefixCls}-panel-inactive`]: !isActive
154
+ }, className),
155
+ "style": style,
156
+ "role": role
157
+ }, [(0, vue.createVNode)("div", {
158
+ "class": (0, _v_c_util.classNames)(`${prefixCls}-body`, customizeClassNames?.body),
159
+ "style": styles?.body
160
+ }, [slots.default?.()])]);
161
+ };
162
+ }
163
+ });
164
+ var PanelContent_default = PanelContent;
165
+ exports.default = PanelContent_default;