@v-c/collapse 1.0.0 → 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
@@ -4,6 +4,7 @@ import { classNames } from "@v-c/util";
4
4
  import useMergedState from "@v-c/util/dist/hooks/useMergedState";
5
5
  import omit from "@v-c/util/dist/omit";
6
6
  import pickAttrs from "@v-c/util/dist/pickAttrs";
7
+ //#region src/Collapse.tsx
7
8
  function getActiveKeysArray(activeKey) {
8
9
  let currentActiveKey = activeKey;
9
10
  if (!Array.isArray(currentActiveKey)) {
@@ -12,8 +13,8 @@ function getActiveKeysArray(activeKey) {
12
13
  }
13
14
  return currentActiveKey.map((key) => String(key));
14
15
  }
15
- var Collapse_default = /* @__PURE__ */ defineComponent({
16
- props: /* @__PURE__ */ mergeDefaults({
16
+ var Collapse = /* @__PURE__ */ defineComponent({
17
+ props: /*@__PURE__*/ mergeDefaults({
17
18
  prefixCls: {
18
19
  type: String,
19
20
  required: false,
@@ -134,4 +135,5 @@ var Collapse_default = /* @__PURE__ */ defineComponent({
134
135
  };
135
136
  }
136
137
  });
137
- export { Collapse_default as default };
138
+ //#endregion
139
+ export { Collapse as default };
package/dist/Panel.js CHANGED
@@ -1,10 +1,11 @@
1
- import PanelContent_default from "./PanelContent.js";
1
+ import PanelContent from "./PanelContent.js";
2
2
  import { Transition, computed, createVNode, defineComponent, mergeDefaults, mergeProps, ref, vShow, withDirectives } from "vue";
3
3
  import { classNames } from "@v-c/util";
4
4
  import omit from "@v-c/util/dist/omit";
5
5
  import KeyCode from "@v-c/util/dist/KeyCode";
6
- var Panel_default = /* @__PURE__ */ defineComponent({
7
- props: /* @__PURE__ */ mergeDefaults({
6
+ //#region src/Panel.tsx
7
+ var CollapsePanel = /* @__PURE__ */ defineComponent({
8
+ props: /*@__PURE__*/ mergeDefaults({
8
9
  id: {
9
10
  type: String,
10
11
  required: false,
@@ -176,7 +177,7 @@ var Panel_default = /* @__PURE__ */ defineComponent({
176
177
  "class": classNames(`${prefixCls}-expand-icon`, customizeClassNames?.icon),
177
178
  "style": styles?.icon
178
179
  }, ["header", "icon"].includes(collapsible) ? collapsibleProps.value : {}), [iconNodeInner]);
179
- const panelContent = withDirectives(createVNode(PanelContent_default, {
180
+ const panelContent = withDirectives(createVNode(PanelContent, {
180
181
  "prefixCls": prefixCls,
181
182
  "classNames": customizeClassNames,
182
183
  "styles": styles,
@@ -205,4 +206,5 @@ var Panel_default = /* @__PURE__ */ defineComponent({
205
206
  };
206
207
  }
207
208
  });
208
- export { Panel_default as default };
209
+ //#endregion
210
+ export { CollapsePanel as default };
@@ -1,6 +1,7 @@
1
1
  import { createVNode, defineComponent, ref, watch } from "vue";
2
2
  import { classNames } from "@v-c/util";
3
- var PanelContent_default = /* @__PURE__ */ defineComponent({
3
+ //#region src/PanelContent.tsx
4
+ var PanelContent = /* @__PURE__ */ defineComponent({
4
5
  props: {
5
6
  id: {
6
7
  type: String,
@@ -156,4 +157,5 @@ var PanelContent_default = /* @__PURE__ */ defineComponent({
156
157
  };
157
158
  }
158
159
  });
159
- export { PanelContent_default as default };
160
+ //#endregion
161
+ export { PanelContent as default };
@@ -1,10 +1,34 @@
1
- import Panel_default from "../Panel.js";
1
+ import CollapsePanel from "../Panel.js";
2
2
  import { createVNode, mergeProps } from "vue";
3
+ import { clsx } from "@v-c/util";
3
4
  import { toArray } from "@v-c/util/dist/Children/toArray";
4
5
  import { isEmptyElement } from "@v-c/util/dist/props-util";
5
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;
17
+ }
18
+ function mergeSemanticClassNames(source, target) {
19
+ return mergeSemantic(source, target, (s, t) => clsx(s, t) || void 0);
20
+ }
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
+ });
29
+ }
6
30
  function convertItemsToNodes(items, props) {
7
- const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, destroyOnHidden, classNames: collapseClassNames, styles } = props;
31
+ const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, destroyOnHidden, classNames: collapseClassNames, styles: collapseStyles } = props;
8
32
  return items.map((item, index) => {
9
33
  const { label, key: rawKey, collapsible: rawCollapsible, onItemClick: rawOnItemClick, destroyOnHidden: rawDestroyOnHidden, ...restProps } = item;
10
34
  const key = String(rawKey ?? index);
@@ -18,9 +42,9 @@ function convertItemsToNodes(items, props) {
18
42
  let isActive = false;
19
43
  if (accordion) isActive = activeKey?.[0] === key;
20
44
  else isActive = activeKey.includes(key);
21
- return createVNode(Panel_default, mergeProps(restProps, {
22
- "classNames": collapseClassNames,
23
- "styles": styles,
45
+ return createVNode(CollapsePanel, mergeProps(restProps, {
46
+ "classNames": mergeSemanticClassNames(collapseClassNames, restProps.classNames),
47
+ "styles": mergeSemanticStyles(collapseStyles, restProps.styles),
24
48
  "prefixCls": prefixCls,
25
49
  "key": key,
26
50
  "panelKey": key,
@@ -35,12 +59,15 @@ function convertItemsToNodes(items, props) {
35
59
  }), null);
36
60
  });
37
61
  }
62
+ /**
63
+ * @deprecated The next major version will be removed
64
+ */
38
65
  function getNewChild(child, index, props) {
39
66
  if (isEmptyElement(child) || !child) return null;
40
67
  if (typeof child === "boolean" || typeof child === "number" || typeof child === "string") return child;
41
- const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, classNames: collapseClassNames, styles, destroyOnHidden } = props;
68
+ const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, classNames: collapseClassNames, styles: collapseStyles, destroyOnHidden } = props;
42
69
  const key = child.key || String(index);
43
- const { header, headerClass, collapsible: childCollapsible, onItemClick: childOnItemClick, destroyOnHidden: childDestroyOnHidden } = child.props || {};
70
+ const { header, headerClass, collapsible: childCollapsible, onItemClick: childOnItemClick, destroyOnHidden: childDestroyOnHidden, classNames: childClassNames, styles: childStyles } = child.props || {};
44
71
  let isActive = false;
45
72
  if (accordion) isActive = activeKey[0] === key;
46
73
  else isActive = activeKey.includes(key);
@@ -55,8 +82,8 @@ function getNewChild(child, index, props) {
55
82
  panelKey: key,
56
83
  header,
57
84
  headerClass,
58
- classNames: collapseClassNames,
59
- styles,
85
+ classNames: mergeSemanticClassNames(collapseClassNames, childClassNames),
86
+ styles: mergeSemanticStyles(collapseStyles, childStyles),
60
87
  isActive,
61
88
  prefixCls,
62
89
  destroyOnHidden: childDestroyOnHidden ?? destroyOnHidden,
@@ -76,4 +103,5 @@ function useItems(items, children, props) {
76
103
  if (Array.isArray(items)) return convertItemsToNodes(items, props);
77
104
  return toArray(children?.()).map((target, index) => getNewChild(target, index, props));
78
105
  }
106
+ //#endregion
79
107
  export { useItems };
package/dist/index.js CHANGED
@@ -1,4 +1,6 @@
1
- import Panel_default from "./Panel.js";
2
- import Collapse_default from "./Collapse.js";
3
- var src_default = Collapse_default;
4
- export { Panel_default as Panel, src_default as default };
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/package.json CHANGED
@@ -1,7 +1,13 @@
1
1
  {
2
2
  "name": "@v-c/collapse",
3
3
  "type": "module",
4
- "version": "1.0.0",
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
  },
@@ -9,7 +15,7 @@
9
15
  ".": {
10
16
  "types": "./dist/index.d.ts",
11
17
  "import": "./dist/index.js",
12
- "require": "./dist/index.cjs"
18
+ "default": "./dist/index.js"
13
19
  },
14
20
  "./dist/*": "./dist/*",
15
21
  "./package.json": "./package.json"
@@ -23,7 +29,7 @@
23
29
  "vue": "^3.0.0"
24
30
  },
25
31
  "dependencies": {
26
- "@v-c/util": "^1.0.9"
32
+ "@v-c/util": "^1.0.21"
27
33
  },
28
34
  "scripts": {
29
35
  "build": "vite build",
package/dist/Collapse.cjs DELETED
@@ -1,146 +0,0 @@
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
- const require_useItems = require("./hooks/useItems.cjs");
7
- let vue = require("vue");
8
- let _v_c_util = require("@v-c/util");
9
- let _v_c_util_dist_hooks_useMergedState = require("@v-c/util/dist/hooks/useMergedState");
10
- _v_c_util_dist_hooks_useMergedState = require_rolldown_runtime.__toESM(_v_c_util_dist_hooks_useMergedState);
11
- let _v_c_util_dist_omit = require("@v-c/util/dist/omit");
12
- _v_c_util_dist_omit = require_rolldown_runtime.__toESM(_v_c_util_dist_omit);
13
- let _v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
14
- _v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(_v_c_util_dist_pickAttrs);
15
- function getActiveKeysArray(activeKey) {
16
- let currentActiveKey = activeKey;
17
- if (!Array.isArray(currentActiveKey)) {
18
- const activeKeyType = typeof currentActiveKey;
19
- currentActiveKey = activeKeyType === "number" || activeKeyType === "string" ? [currentActiveKey] : [];
20
- }
21
- return currentActiveKey.map((key) => String(key));
22
- }
23
- var Collapse = /* @__PURE__ */ (0, vue.defineComponent)({
24
- props: /* @__PURE__ */ (0, vue.mergeDefaults)({
25
- prefixCls: {
26
- type: String,
27
- required: false,
28
- default: void 0
29
- },
30
- activeKey: {
31
- type: [
32
- String,
33
- Number,
34
- Array
35
- ],
36
- required: false,
37
- default: void 0
38
- },
39
- defaultActiveKey: {
40
- type: [
41
- String,
42
- Number,
43
- Array
44
- ],
45
- required: false,
46
- default: void 0
47
- },
48
- openMotion: {
49
- type: Object,
50
- required: false,
51
- default: void 0
52
- },
53
- onChange: {
54
- type: Function,
55
- required: false,
56
- default: void 0
57
- },
58
- accordion: {
59
- type: Boolean,
60
- required: false,
61
- default: void 0
62
- },
63
- destroyOnHidden: {
64
- type: Boolean,
65
- required: false,
66
- default: void 0
67
- },
68
- expandIcon: {
69
- type: Function,
70
- required: false,
71
- default: void 0
72
- },
73
- collapsible: {
74
- type: String,
75
- required: false,
76
- default: void 0
77
- },
78
- items: {
79
- type: Array,
80
- required: false,
81
- default: void 0
82
- },
83
- classNames: {
84
- type: Object,
85
- required: false,
86
- default: void 0
87
- },
88
- styles: {
89
- type: Object,
90
- required: false,
91
- default: void 0
92
- }
93
- }, { prefixCls: "vc-collapse" }),
94
- name: "VcCollapse",
95
- inheritAttrs: false,
96
- setup(props, { attrs, expose, slots }) {
97
- const refWrapper = (0, vue.ref)();
98
- const [activeKey, setActiveKey] = (0, _v_c_util_dist_hooks_useMergedState.default)([], {
99
- value: (0, vue.toRef)(props, "activeKey"),
100
- onChange: (v) => props.onChange?.(v),
101
- defaultValue: props.defaultActiveKey,
102
- postState: getActiveKeysArray
103
- });
104
- const getActiveKey = (key) => {
105
- if (props.accordion) return activeKey.value[0] === key ? [] : [key];
106
- if (activeKey.value.indexOf(key) > -1) return activeKey.value.filter((item) => item !== key);
107
- return [...activeKey.value, key];
108
- };
109
- const onItemClick = (key) => {
110
- activeKey.value = getActiveKey(key);
111
- setActiveKey(activeKey.value);
112
- };
113
- expose({ ref: refWrapper });
114
- return () => {
115
- const { prefixCls = "vc-collapse", openMotion, expandIcon, collapsible, accordion, classNames, styles, items, destroyOnHidden } = props;
116
- const collapseClassName = (0, _v_c_util.classNames)(prefixCls, attrs.class);
117
- const mergedProps = {
118
- ...props,
119
- ...(0, _v_c_util_dist_omit.default)(attrs, ["class", "style"])
120
- };
121
- const mergedChildren = require_useItems.useItems(items, slots.default, {
122
- prefixCls,
123
- accordion,
124
- openMotion,
125
- expandIcon,
126
- collapsible,
127
- onItemClick,
128
- activeKey: activeKey.value,
129
- destroyOnHidden,
130
- classNames,
131
- styles
132
- });
133
- return (0, vue.createVNode)("div", (0, vue.mergeProps)({
134
- "ref": refWrapper,
135
- "class": collapseClassName,
136
- "style": attrs.style,
137
- "role": accordion ? "tablist" : void 0
138
- }, (0, _v_c_util_dist_pickAttrs.default)(mergedProps, {
139
- aria: true,
140
- data: true
141
- })), [mergedChildren]);
142
- };
143
- }
144
- });
145
- var Collapse_default = Collapse;
146
- exports.default = Collapse_default;
package/dist/Panel.cjs DELETED
@@ -1,216 +0,0 @@
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
- const require_PanelContent = require("./PanelContent.cjs");
7
- let vue = require("vue");
8
- let _v_c_util = require("@v-c/util");
9
- let _v_c_util_dist_omit = require("@v-c/util/dist/omit");
10
- _v_c_util_dist_omit = require_rolldown_runtime.__toESM(_v_c_util_dist_omit);
11
- let _v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
12
- _v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(_v_c_util_dist_KeyCode);
13
- var CollapsePanel = /* @__PURE__ */ (0, vue.defineComponent)({
14
- props: /* @__PURE__ */ (0, vue.mergeDefaults)({
15
- id: {
16
- type: String,
17
- required: false,
18
- default: void 0
19
- },
20
- header: {
21
- type: [
22
- Object,
23
- Function,
24
- String,
25
- Number,
26
- null,
27
- Boolean,
28
- Array
29
- ],
30
- required: false,
31
- default: void 0
32
- },
33
- prefixCls: {
34
- type: String,
35
- required: false,
36
- default: void 0
37
- },
38
- headerClass: {
39
- type: String,
40
- required: false,
41
- default: void 0
42
- },
43
- showArrow: {
44
- type: Boolean,
45
- required: false,
46
- default: void 0
47
- },
48
- class: {
49
- type: String,
50
- required: false,
51
- default: void 0
52
- },
53
- classNames: {
54
- type: Object,
55
- required: false,
56
- default: void 0
57
- },
58
- style: {
59
- type: Object,
60
- required: false,
61
- default: void 0
62
- },
63
- styles: {
64
- type: Object,
65
- required: false,
66
- default: void 0
67
- },
68
- isActive: {
69
- type: Boolean,
70
- required: false,
71
- default: void 0
72
- },
73
- openMotion: {
74
- type: Object,
75
- required: false,
76
- default: void 0
77
- },
78
- destroyOnHidden: {
79
- type: Boolean,
80
- required: false,
81
- default: void 0
82
- },
83
- accordion: {
84
- type: Boolean,
85
- required: false,
86
- default: void 0
87
- },
88
- forceRender: {
89
- type: Boolean,
90
- required: false,
91
- default: void 0
92
- },
93
- extra: {
94
- type: [
95
- Object,
96
- Function,
97
- String,
98
- Number,
99
- null,
100
- Boolean,
101
- Array
102
- ],
103
- required: false,
104
- default: void 0
105
- },
106
- onItemClick: {
107
- type: Function,
108
- required: false,
109
- default: void 0
110
- },
111
- expandIcon: {
112
- type: Function,
113
- required: false,
114
- default: void 0
115
- },
116
- panelKey: {
117
- type: [String, Number],
118
- required: false,
119
- default: void 0
120
- },
121
- role: {
122
- type: String,
123
- required: false,
124
- default: void 0
125
- },
126
- collapsible: {
127
- type: String,
128
- required: false,
129
- default: void 0
130
- },
131
- children: {
132
- type: [
133
- Object,
134
- Function,
135
- String,
136
- Number,
137
- null,
138
- Boolean,
139
- Array
140
- ],
141
- required: false,
142
- default: void 0
143
- }
144
- }, {
145
- showArrow: true,
146
- classNames: {},
147
- styles: {}
148
- }),
149
- name: "CollapsePanel",
150
- inheritAttrs: false,
151
- setup(props, { attrs, expose }) {
152
- const disabled = (0, vue.computed)(() => props.collapsible === "disabled");
153
- const refWrapper = (0, vue.ref)();
154
- const ifExtraExist = (0, vue.computed)(() => props.extra !== null && props.extra !== void 0 && typeof props.extra !== "boolean");
155
- const collapsibleProps = (0, vue.computed)(() => {
156
- return {
157
- "onClick": () => {
158
- props.onItemClick?.(props.panelKey);
159
- },
160
- "onKeydown": (e) => {
161
- if (e.key === "Enter" || e.keyCode === _v_c_util_dist_KeyCode.default.ENTER || e.which === _v_c_util_dist_KeyCode.default.ENTER) props.onItemClick?.(props.panelKey);
162
- },
163
- "role": props.accordion ? "tab" : "button",
164
- "aria-expanded": props.isActive,
165
- "aria-disabled": disabled.value,
166
- "tabIndex": disabled.value ? -1 : 0
167
- };
168
- });
169
- expose({ ref: refWrapper });
170
- return () => {
171
- const { extra, prefixCls, isActive, class: className, expandIcon, forceRender, headerClass, collapsible, accordion, openMotion = {}, onItemClick, classNames: customizeClassNames = {}, showArrow = true, destroyOnHidden, styles = {}, header, panelKey, children, ...restProps } = props;
172
- const collapsePanelClassNames = (0, _v_c_util.classNames)(`${prefixCls}-item`, {
173
- [`${prefixCls}-item-active`]: isActive,
174
- [`${prefixCls}-item-disabled`]: disabled.value
175
- }, className);
176
- const headerProps = {
177
- class: (0, _v_c_util.classNames)(headerClass, `${prefixCls}-header`, { [`${prefixCls}-collapsible-${collapsible}`]: !!collapsible }, customizeClassNames.header),
178
- style: styles.header,
179
- ...["header", "icon"].includes(collapsible) ? {} : collapsibleProps.value
180
- };
181
- const iconNodeInner = typeof expandIcon === "function" ? expandIcon(props) : (0, vue.createVNode)("i", { "class": "arrow" }, null);
182
- const iconNode = iconNodeInner && (0, vue.createVNode)("div", (0, vue.mergeProps)({
183
- "class": (0, _v_c_util.classNames)(`${prefixCls}-expand-icon`, customizeClassNames?.icon),
184
- "style": styles?.icon
185
- }, ["header", "icon"].includes(collapsible) ? collapsibleProps.value : {}), [iconNodeInner]);
186
- const panelContent = (0, vue.withDirectives)((0, vue.createVNode)(require_PanelContent.default, {
187
- "prefixCls": prefixCls,
188
- "classNames": customizeClassNames,
189
- "styles": styles,
190
- "isActive": isActive,
191
- "forceRender": forceRender,
192
- "role": accordion ? "tabpanel" : void 0
193
- }, { default: () => children }), [[vue.vShow, isActive]]);
194
- const transitionProps = {
195
- appear: false,
196
- ...openMotion
197
- };
198
- return (0, vue.createVNode)("div", (0, vue.mergeProps)({
199
- ...restProps,
200
- ...(0, _v_c_util_dist_omit.default)(attrs, ["class"])
201
- }, {
202
- "ref": refWrapper,
203
- "class": collapsePanelClassNames
204
- }), [(0, vue.createVNode)("div", headerProps, [
205
- showArrow && iconNode,
206
- (0, vue.createVNode)("span", (0, vue.mergeProps)({
207
- "class": (0, _v_c_util.classNames)(`${prefixCls}-title`, customizeClassNames?.title),
208
- "style": styles?.title
209
- }, collapsible === "header" ? collapsibleProps.value : {}), [header]),
210
- ifExtraExist.value && (0, vue.createVNode)("div", { "class": `${prefixCls}-extra` }, [extra])
211
- ]), (0, vue.createVNode)(vue.Transition, transitionProps, { default: () => [!destroyOnHidden || isActive ? panelContent : null] })]);
212
- };
213
- }
214
- });
215
- var Panel_default = CollapsePanel;
216
- exports.default = Panel_default;
@@ -1,165 +0,0 @@
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;
@@ -1,21 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __copyProps = (to, from, except, desc) => {
8
- if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
9
- key = keys[i];
10
- if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
11
- get: ((k) => from[k]).bind(null, key),
12
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
13
- });
14
- }
15
- return to;
16
- };
17
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
18
- value: mod,
19
- enumerable: true
20
- }) : target, mod));
21
- exports.__toESM = __toESM;
@@ -1,81 +0,0 @@
1
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
- const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
3
- const require_Panel = require("../Panel.cjs");
4
- let vue = require("vue");
5
- let _v_c_util_dist_Children_toArray = require("@v-c/util/dist/Children/toArray");
6
- let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
7
- let _v_c_util_dist_vnode = require("@v-c/util/dist/vnode");
8
- function convertItemsToNodes(items, props) {
9
- const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, destroyOnHidden, classNames: collapseClassNames, styles } = props;
10
- return items.map((item, index) => {
11
- const { label, key: rawKey, collapsible: rawCollapsible, onItemClick: rawOnItemClick, destroyOnHidden: rawDestroyOnHidden, ...restProps } = item;
12
- const key = String(rawKey ?? index);
13
- const mergeCollapsible = rawCollapsible ?? collapsible;
14
- const mergedDestroyOnHidden = rawDestroyOnHidden ?? destroyOnHidden;
15
- const handleItemClick = (value) => {
16
- if (mergeCollapsible === "disabled") return;
17
- onItemClick?.(value);
18
- rawOnItemClick?.(value);
19
- };
20
- let isActive = false;
21
- if (accordion) isActive = activeKey?.[0] === key;
22
- else isActive = activeKey.includes(key);
23
- return (0, vue.createVNode)(require_Panel.default, (0, vue.mergeProps)(restProps, {
24
- "classNames": collapseClassNames,
25
- "styles": styles,
26
- "prefixCls": prefixCls,
27
- "key": key,
28
- "panelKey": key,
29
- "isActive": isActive,
30
- "accordion": accordion,
31
- "openMotion": openMotion,
32
- "expandIcon": expandIcon,
33
- "header": label,
34
- "destroyOnHidden": mergedDestroyOnHidden,
35
- "collapsible": mergeCollapsible,
36
- "onItemClick": handleItemClick
37
- }), null);
38
- });
39
- }
40
- function getNewChild(child, index, props) {
41
- if ((0, _v_c_util_dist_props_util.isEmptyElement)(child) || !child) return null;
42
- if (typeof child === "boolean" || typeof child === "number" || typeof child === "string") return child;
43
- const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, classNames: collapseClassNames, styles, destroyOnHidden } = props;
44
- const key = child.key || String(index);
45
- const { header, headerClass, collapsible: childCollapsible, onItemClick: childOnItemClick, destroyOnHidden: childDestroyOnHidden } = child.props || {};
46
- let isActive = false;
47
- if (accordion) isActive = activeKey[0] === key;
48
- else isActive = activeKey.includes(key);
49
- const mergeCollapsible = childCollapsible ?? collapsible;
50
- const handleItemClick = (value) => {
51
- if (mergeCollapsible === "disabled") return;
52
- onItemClick?.(value);
53
- childOnItemClick?.(value);
54
- };
55
- const childProps = {
56
- key,
57
- panelKey: key,
58
- header,
59
- headerClass,
60
- classNames: collapseClassNames,
61
- styles,
62
- isActive,
63
- prefixCls,
64
- destroyOnHidden: childDestroyOnHidden ?? destroyOnHidden,
65
- openMotion,
66
- accordion,
67
- children: child.children?.default?.(),
68
- onItemClick: handleItemClick,
69
- expandIcon,
70
- collapsible: mergeCollapsible
71
- };
72
- Object.keys(childProps).forEach((propName) => {
73
- if (typeof childProps[propName] === "undefined") delete childProps[propName];
74
- });
75
- return (0, _v_c_util_dist_vnode.cloneElement)(child, childProps);
76
- }
77
- function useItems(items, children, props) {
78
- if (Array.isArray(items)) return convertItemsToNodes(items, props);
79
- return (0, _v_c_util_dist_Children_toArray.toArray)(children?.()).map((target, index) => getNewChild(target, index, props));
80
- }
81
- exports.useItems = useItems;
package/dist/index.cjs DELETED
@@ -1,9 +0,0 @@
1
- Object.defineProperties(exports, {
2
- __esModule: { value: true },
3
- [Symbol.toStringTag]: { value: "Module" }
4
- });
5
- const require_Panel = require("./Panel.cjs");
6
- const require_Collapse = require("./Collapse.cjs");
7
- var src_default = require_Collapse.default;
8
- exports.Panel = require_Panel.default;
9
- exports.default = src_default;
@@ -1 +0,0 @@
1
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });