@v-c/collapse 0.0.4 → 1.0.0

package/dist/Panel.js

@@ -1,185 +1,208 @@
-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";
-import { classNames as o } from "@v-c/util";
-import h from "@v-c/util/dist/KeyCode";
-import z from "@v-c/util/dist/omit";
-import V from "./PanelContent.js";
-const W = {
-  showArrow: !0,
-  classNames: {},
-  styles: {}
-}, _ = /* @__PURE__ */ j({
-  props: /* @__PURE__ */ T({
-    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
-    }
-  }, W),
-  name: "CollapsePanel",
-  inheritAttrs: !1,
-  setup(e, {
-    attrs: q,
-    expose: C
-  }) {
-    const d = u(() => e.collapsible === "disabled"), p = D(), v = u(() => e.extra !== null && e.extra !== void 0 && typeof e.extra != "boolean"), c = u(() => ({
-      onClick: () => {
-        e.onItemClick?.(e.panelKey);
-      },
-      onKeydown: (s) => {
-        (s.key === "Enter" || s.keyCode === h.ENTER || s.which === h.ENTER) && e.onItemClick?.(e.panelKey);
-      },
-      role: e.accordion ? "tab" : "button",
-      "aria-expanded": e.isActive,
-      "aria-disabled": d.value,
-      tabIndex: d.value ? -1 : 0
-    }));
-    return C({
-      ref: p
-    }), () => {
-      const {
-        extra: s,
-        prefixCls: a,
-        isActive: t,
-        class: b,
-        expandIcon: y,
-        forceRender: x,
-        headerClass: N,
-        collapsible: r,
-        accordion: w,
-        openMotion: g = {},
-        onItemClick: G,
-        classNames: n = {},
-        showArrow: P = !0,
-        destroyOnHidden: $,
-        styles: i = {},
-        header: A,
-        panelKey: J,
-        children: I,
-        ...S
-      } = e, k = o(`${a}-item`, {
-        [`${a}-item-active`]: t,
-        [`${a}-item-disabled`]: d.value
-      }, b), E = {
-        class: o(N, `${a}-header`, {
-          [`${a}-collapsible-${r}`]: !!r
-        }, n.header),
-        style: i.header,
-        ...["header", "icon"].includes(r) ? {} : c.value
-      }, m = typeof y == "function" ? y(e) : l("i", {
-        class: "arrow"
-      }, null), K = m && l("div", f({
-        class: o(`${a}-expand-icon`, n?.icon),
-        style: i?.icon
-      }, ["header", "icon"].includes(r) ? c.value : {}), [m]), R = F(l(V, {
-        prefixCls: a,
-        classNames: n,
-        styles: i,
-        isActive: t,
-        forceRender: x,
-        role: w ? "tabpanel" : void 0
-      }, {
-        default: () => I
-      }), [[H, t]]), B = {
-        appear: !1,
-        "leave-to-class": `${a}-panel-hidden`,
-        ...g
-      }, O = {
-        ...S,
-        ...z(q, ["class"])
-      };
-      return l("div", f(O, {
-        ref: p,
-        class: k
-      }), [l("div", E, [P && K, l("span", f({
-        class: o(`${a}-title`, n?.title),
-        style: i?.title
-      }, r === "header" ? c.value : {}), [A]), v.value && l("div", {
-        class: `${a}-extra`
-      }, [s])]), l(M, B, {
-        default: () => [!$ || t ? R : null]
-      })]);
-    };
-  }
+import PanelContent_default from "./PanelContent.js";
+import { Transition, computed, createVNode, defineComponent, mergeDefaults, mergeProps, ref, vShow, withDirectives } from "vue";
+import { classNames } from "@v-c/util";
+import omit from "@v-c/util/dist/omit";
+import KeyCode from "@v-c/util/dist/KeyCode";
+var Panel_default = /* @__PURE__ */ defineComponent({
+	props: /* @__PURE__ */ mergeDefaults({
+		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
+		}
+	}, {
+		showArrow: true,
+		classNames: {},
+		styles: {}
+	}),
+	name: "CollapsePanel",
+	inheritAttrs: false,
+	setup(props, { attrs, expose }) {
+		const disabled = computed(() => props.collapsible === "disabled");
+		const refWrapper = ref();
+		const ifExtraExist = computed(() => props.extra !== null && props.extra !== void 0 && typeof props.extra !== "boolean");
+		const collapsibleProps = computed(() => {
+			return {
+				"onClick": () => {
+					props.onItemClick?.(props.panelKey);
+				},
+				"onKeydown": (e) => {
+					if (e.key === "Enter" || e.keyCode === KeyCode.ENTER || e.which === KeyCode.ENTER) props.onItemClick?.(props.panelKey);
+				},
+				"role": props.accordion ? "tab" : "button",
+				"aria-expanded": props.isActive,
+				"aria-disabled": disabled.value,
+				"tabIndex": disabled.value ? -1 : 0
+			};
+		});
+		expose({ ref: refWrapper });
+		return () => {
+			const { extra, prefixCls, isActive, class: className, expandIcon, forceRender, headerClass, collapsible, accordion, openMotion = {}, onItemClick, classNames: customizeClassNames = {}, showArrow = true, destroyOnHidden, styles = {}, header, panelKey, children, ...restProps } = props;
+			const collapsePanelClassNames = classNames(`${prefixCls}-item`, {
+				[`${prefixCls}-item-active`]: isActive,
+				[`${prefixCls}-item-disabled`]: disabled.value
+			}, className);
+			const headerProps = {
+				class: classNames(headerClass, `${prefixCls}-header`, { [`${prefixCls}-collapsible-${collapsible}`]: !!collapsible }, customizeClassNames.header),
+				style: styles.header,
+				...["header", "icon"].includes(collapsible) ? {} : collapsibleProps.value
+			};
+			const iconNodeInner = typeof expandIcon === "function" ? expandIcon(props) : createVNode("i", { "class": "arrow" }, null);
+			const iconNode = iconNodeInner && createVNode("div", mergeProps({
+				"class": classNames(`${prefixCls}-expand-icon`, customizeClassNames?.icon),
+				"style": styles?.icon
+			}, ["header", "icon"].includes(collapsible) ? collapsibleProps.value : {}), [iconNodeInner]);
+			const panelContent = withDirectives(createVNode(PanelContent_default, {
+				"prefixCls": prefixCls,
+				"classNames": customizeClassNames,
+				"styles": styles,
+				"isActive": isActive,
+				"forceRender": forceRender,
+				"role": accordion ? "tabpanel" : void 0
+			}, { default: () => children }), [[vShow, isActive]]);
+			const transitionProps = {
+				appear: false,
+				...openMotion
+			};
+			return createVNode("div", mergeProps({
+				...restProps,
+				...omit(attrs, ["class"])
+			}, {
+				"ref": refWrapper,
+				"class": collapsePanelClassNames
+			}), [createVNode("div", headerProps, [
+				showArrow && iconNode,
+				createVNode("span", mergeProps({
+					"class": classNames(`${prefixCls}-title`, customizeClassNames?.title),
+					"style": styles?.title
+				}, collapsible === "header" ? collapsibleProps.value : {}), [header]),
+				ifExtraExist.value && createVNode("div", { "class": `${prefixCls}-extra` }, [extra])
+			]), createVNode(Transition, transitionProps, { default: () => [!destroyOnHidden || isActive ? panelContent : null] })]);
+		};
+	}
 });
-export {
-  _ as default
-};
+export { Panel_default as default };

package/dist/PanelContent.cjs

@@ -1 +1,165 @@
-"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;
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let _v_c_util = require("@v-c/util");
+var PanelContent = /* @__PURE__ */ (0, vue.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 = (0, vue.ref)(props.isActive || props.forceRender);
+		(0, vue.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 (0, vue.createVNode)("div", {
+				"class": (0, _v_c_util.classNames)(`${prefixCls}-panel`, {
+					[`${prefixCls}-panel-active`]: isActive,
+					[`${prefixCls}-panel-inactive`]: !isActive
+				}, className),
+				"style": style,
+				"role": role
+			}, [(0, vue.createVNode)("div", {
+				"class": (0, _v_c_util.classNames)(`${prefixCls}-body`, customizeClassNames?.body),
+				"style": styles?.body
+			}, [slots.default?.()])]);
+		};
+	}
+});
+var PanelContent_default = PanelContent;
+exports.default = PanelContent_default;