@v-c/collapse 0.0.4 → 1.0.0

package/dist/PanelContent.js

@@ -1,126 +1,159 @@
-import { defineComponent as f, ref as y, watch as p, createVNode as s } from "vue";
-import { classNames as a } from "@v-c/util";
-const v = /* @__PURE__ */ f({
-  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 t = y(e.isActive || e.forceRender);
-    return p(() => [e.isActive, e.forceRender], () => {
-      (e.isActive || e.forceRender) && (t.value = !0);
-    }), () => {
-      if (!t.value)
-        return null;
-      const {
-        prefixCls: r,
-        isActive: l,
-        style: n,
-        role: d,
-        class: o,
-        classNames: u,
-        styles: c
-      } = e;
-      return s("div", {
-        class: a(`${r}-panel`, {
-          [`${r}-panel-active`]: l,
-          [`${r}-panel-inactive`]: !l
-        }, o),
-        style: n,
-        role: d
-      }, [s("div", {
-        class: a(`${r}-body`, u?.body),
-        style: c?.body
-      }, [i.default?.()])]);
-    };
-  }
+import { createVNode, defineComponent, ref, watch } from "vue";
+import { classNames } from "@v-c/util";
+var PanelContent_default = /* @__PURE__ */ defineComponent({
+	props: {
+		id: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		header: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		headerClass: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		showArrow: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		class: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		isActive: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		openMotion: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		accordion: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		forceRender: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		extra: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		onItemClick: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		expandIcon: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		panelKey: {
+			type: [String, Number],
+			required: false,
+			default: void 0
+		},
+		role: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		collapsible: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		children: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "PanelContent",
+	inheritAttrs: false,
+	setup(props, { slots }) {
+		const rendered = ref(props.isActive || props.forceRender);
+		watch(() => [props.isActive, props.forceRender], () => {
+			if (props.isActive || props.forceRender) rendered.value = true;
+		});
+		return () => {
+			if (!rendered.value) return null;
+			const { prefixCls, isActive, style, role, class: className, classNames: customizeClassNames, styles } = props;
+			return createVNode("div", {
+				"class": classNames(`${prefixCls}-panel`, {
+					[`${prefixCls}-panel-active`]: isActive,
+					[`${prefixCls}-panel-inactive`]: !isActive
+				}, className),
+				"style": style,
+				"role": role
+			}, [createVNode("div", {
+				"class": classNames(`${prefixCls}-body`, customizeClassNames?.body),
+				"style": styles?.body
+			}, [slots.default?.()])]);
+		};
+	}
 });
-export {
-  v as default
-};
+export { PanelContent_default as default };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/hooks/useItems.cjs

@@ -1 +1,81 @@
-"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;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_Panel = require("../Panel.cjs");
+let vue = require("vue");
+let _v_c_util_dist_Children_toArray = require("@v-c/util/dist/Children/toArray");
+let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+let _v_c_util_dist_vnode = require("@v-c/util/dist/vnode");
+function convertItemsToNodes(items, props) {
+	const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, destroyOnHidden, classNames: collapseClassNames, styles } = props;
+	return items.map((item, index) => {
+		const { label, key: rawKey, collapsible: rawCollapsible, onItemClick: rawOnItemClick, destroyOnHidden: rawDestroyOnHidden, ...restProps } = item;
+		const key = String(rawKey ?? index);
+		const mergeCollapsible = rawCollapsible ?? collapsible;
+		const mergedDestroyOnHidden = rawDestroyOnHidden ?? destroyOnHidden;
+		const handleItemClick = (value) => {
+			if (mergeCollapsible === "disabled") return;
+			onItemClick?.(value);
+			rawOnItemClick?.(value);
+		};
+		let isActive = false;
+		if (accordion) isActive = activeKey?.[0] === key;
+		else isActive = activeKey.includes(key);
+		return (0, vue.createVNode)(require_Panel.default, (0, vue.mergeProps)(restProps, {
+			"classNames": collapseClassNames,
+			"styles": styles,
+			"prefixCls": prefixCls,
+			"key": key,
+			"panelKey": key,
+			"isActive": isActive,
+			"accordion": accordion,
+			"openMotion": openMotion,
+			"expandIcon": expandIcon,
+			"header": label,
+			"destroyOnHidden": mergedDestroyOnHidden,
+			"collapsible": mergeCollapsible,
+			"onItemClick": handleItemClick
+		}), null);
+	});
+}
+function getNewChild(child, index, props) {
+	if ((0, _v_c_util_dist_props_util.isEmptyElement)(child) || !child) return null;
+	if (typeof child === "boolean" || typeof child === "number" || typeof child === "string") return child;
+	const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, classNames: collapseClassNames, styles, destroyOnHidden } = props;
+	const key = child.key || String(index);
+	const { header, headerClass, collapsible: childCollapsible, onItemClick: childOnItemClick, destroyOnHidden: childDestroyOnHidden } = child.props || {};
+	let isActive = false;
+	if (accordion) isActive = activeKey[0] === key;
+	else isActive = activeKey.includes(key);
+	const mergeCollapsible = childCollapsible ?? collapsible;
+	const handleItemClick = (value) => {
+		if (mergeCollapsible === "disabled") return;
+		onItemClick?.(value);
+		childOnItemClick?.(value);
+	};
+	const childProps = {
+		key,
+		panelKey: key,
+		header,
+		headerClass,
+		classNames: collapseClassNames,
+		styles,
+		isActive,
+		prefixCls,
+		destroyOnHidden: childDestroyOnHidden ?? destroyOnHidden,
+		openMotion,
+		accordion,
+		children: child.children?.default?.(),
+		onItemClick: handleItemClick,
+		expandIcon,
+		collapsible: mergeCollapsible
+	};
+	Object.keys(childProps).forEach((propName) => {
+		if (typeof childProps[propName] === "undefined") delete childProps[propName];
+	});
+	return (0, _v_c_util_dist_vnode.cloneElement)(child, childProps);
+}
+function useItems(items, children, props) {
+	if (Array.isArray(items)) return convertItemsToNodes(items, props);
+	return (0, _v_c_util_dist_Children_toArray.toArray)(children?.()).map((target, index) => getNewChild(target, index, props));
+}
+exports.useItems = useItems;

package/dist/hooks/useItems.js

@@ -1,100 +1,79 @@
-import { createVNode as w, mergeProps as K } from "vue";
-import { toArray as h } from "@v-c/util/dist/Children/toArray";
-import { isEmptyElement as v } from "@v-c/util/dist/props-util";
-import { cloneElement as E } from "@v-c/util/dist/vnode";
-import P from "../Panel.js";
-function D(e, a) {
-  const {
-    prefixCls: s,
-    accordion: l,
-    collapsible: t,
-    onItemClick: y,
-    activeKey: d,
-    openMotion: p,
-    expandIcon: f,
-    destroyOnHidden: C,
-    classNames: u,
-    styles: b
-  } = a;
-  return e.map((k, r) => {
-    const {
-      label: I,
-      key: O,
-      collapsible: H,
-      onItemClick: g,
-      destroyOnHidden: N,
-      ...c
-    } = k, n = String(O ?? r), m = H ?? t, i = N ?? C, o = (A) => {
-      m !== "disabled" && (y?.(A), g?.(A));
-    };
-    let x = !1;
-    return l ? x = d?.[0] === n : x = d.includes(n), w(P, K(c, {
-      classNames: u,
-      styles: b,
-      prefixCls: s,
-      key: n,
-      panelKey: n,
-      isActive: x,
-      accordion: l,
-      openMotion: p,
-      expandIcon: f,
-      header: I,
-      destroyOnHidden: i,
-      collapsible: m,
-      onItemClick: o
-    }), null);
-  });
+import Panel_default from "../Panel.js";
+import { createVNode, mergeProps } from "vue";
+import { toArray } from "@v-c/util/dist/Children/toArray";
+import { isEmptyElement } from "@v-c/util/dist/props-util";
+import { cloneElement } from "@v-c/util/dist/vnode";
+function convertItemsToNodes(items, props) {
+	const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, destroyOnHidden, classNames: collapseClassNames, styles } = props;
+	return items.map((item, index) => {
+		const { label, key: rawKey, collapsible: rawCollapsible, onItemClick: rawOnItemClick, destroyOnHidden: rawDestroyOnHidden, ...restProps } = item;
+		const key = String(rawKey ?? index);
+		const mergeCollapsible = rawCollapsible ?? collapsible;
+		const mergedDestroyOnHidden = rawDestroyOnHidden ?? destroyOnHidden;
+		const handleItemClick = (value) => {
+			if (mergeCollapsible === "disabled") return;
+			onItemClick?.(value);
+			rawOnItemClick?.(value);
+		};
+		let isActive = false;
+		if (accordion) isActive = activeKey?.[0] === key;
+		else isActive = activeKey.includes(key);
+		return createVNode(Panel_default, mergeProps(restProps, {
+			"classNames": collapseClassNames,
+			"styles": styles,
+			"prefixCls": prefixCls,
+			"key": key,
+			"panelKey": key,
+			"isActive": isActive,
+			"accordion": accordion,
+			"openMotion": openMotion,
+			"expandIcon": expandIcon,
+			"header": label,
+			"destroyOnHidden": mergedDestroyOnHidden,
+			"collapsible": mergeCollapsible,
+			"onItemClick": handleItemClick
+		}), null);
+	});
 }
-function M(e, a, s) {
-  if (v(e) || !e) return null;
-  if (typeof e == "boolean" || typeof e == "number" || typeof e == "string")
-    return e;
-  const {
-    prefixCls: l,
-    accordion: t,
-    collapsible: y,
-    onItemClick: d,
-    activeKey: p,
-    openMotion: f,
-    expandIcon: C,
-    classNames: u,
-    styles: b,
-    destroyOnHidden: k
-  } = s, r = e.key || String(a), {
-    header: I,
-    headerClass: O,
-    collapsible: H,
-    onItemClick: g,
-    destroyOnHidden: N
-  } = e.props || {};
-  let c = !1;
-  t ? c = p[0] === r : c = p.includes(r);
-  const n = H ?? y, m = (o) => {
-    n !== "disabled" && (d?.(o), g?.(o));
-  }, i = {
-    key: r,
-    panelKey: r,
-    header: I,
-    headerClass: O,
-    classNames: u,
-    styles: b,
-    isActive: c,
-    prefixCls: l,
-    destroyOnHidden: N ?? k,
-    openMotion: f,
-    accordion: t,
-    children: e.children?.default?.(),
-    onItemClick: m,
-    expandIcon: C,
-    collapsible: n
-  };
-  return Object.keys(i).forEach((o) => {
-    typeof i[o] > "u" && delete i[o];
-  }), E(e, i);
+function getNewChild(child, index, props) {
+	if (isEmptyElement(child) || !child) return null;
+	if (typeof child === "boolean" || typeof child === "number" || typeof child === "string") return child;
+	const { prefixCls, accordion, collapsible, onItemClick, activeKey, openMotion, expandIcon, classNames: collapseClassNames, styles, destroyOnHidden } = props;
+	const key = child.key || String(index);
+	const { header, headerClass, collapsible: childCollapsible, onItemClick: childOnItemClick, destroyOnHidden: childDestroyOnHidden } = child.props || {};
+	let isActive = false;
+	if (accordion) isActive = activeKey[0] === key;
+	else isActive = activeKey.includes(key);
+	const mergeCollapsible = childCollapsible ?? collapsible;
+	const handleItemClick = (value) => {
+		if (mergeCollapsible === "disabled") return;
+		onItemClick?.(value);
+		childOnItemClick?.(value);
+	};
+	const childProps = {
+		key,
+		panelKey: key,
+		header,
+		headerClass,
+		classNames: collapseClassNames,
+		styles,
+		isActive,
+		prefixCls,
+		destroyOnHidden: childDestroyOnHidden ?? destroyOnHidden,
+		openMotion,
+		accordion,
+		children: child.children?.default?.(),
+		onItemClick: handleItemClick,
+		expandIcon,
+		collapsible: mergeCollapsible
+	};
+	Object.keys(childProps).forEach((propName) => {
+		if (typeof childProps[propName] === "undefined") delete childProps[propName];
+	});
+	return cloneElement(child, childProps);
 }
-function z(e, a, s) {
-  return Array.isArray(e) ? D(e, s) : h(a?.()).map((l, t) => M(l, t, s));
+function useItems(items, children, props) {
+	if (Array.isArray(items)) return convertItemsToNodes(items, props);
+	return toArray(children?.()).map((target, index) => getNewChild(target, index, props));
 }
-export {
-  z as useItems
-};
+export { useItems };

package/dist/index.cjs

@@ -1 +1,9 @@
-"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;
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Panel = require("./Panel.cjs");
+const require_Collapse = require("./Collapse.cjs");
+var src_default = require_Collapse.default;
+exports.Panel = require_Panel.default;
+exports.default = src_default;

package/dist/index.js

@@ -1,6 +1,4 @@
-import e from "./Collapse.js";
-import { default as r } from "./Panel.js";
-export {
-  r as Panel,
-  e as default
-};
+import Panel_default from "./Panel.js";
+import Collapse_default from "./Collapse.js";
+var src_default = Collapse_default;
+export { Panel_default as Panel, src_default as default };

package/dist/interface.cjs

@@ -1 +1 @@
-"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });

package/dist/interface.js

@@ -1 +0,0 @@
-

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/collapse",
   "type": "module",
-  "version": "0.0.4",
+  "version": "1.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -15,11 +15,15 @@
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
+  "files": [
+    "dist",
+    "package.json"
+  ],
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "0.0.7"
+    "@v-c/util": "^1.0.9"
   },
   "scripts": {
     "build": "vite build",