element-plus 2.0.4 → 2.0.5

package/es/components/collapse/src/collapse-item.mjs

@@ -1,147 +1,18 @@
-import { defineComponent, inject, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withKeys, withModifiers, renderSlot, createTextVNode, toDisplayString, createVNode, withCtx, withDirectives, vShow } from 'vue';
 import '../../../utils/index.mjs';
-import _CollapseTransition from '../../collapse-transition/index.mjs';
-import { ElIcon } from '../../icon/index.mjs';
-import { ArrowRight } from '@element-plus/icons-vue';
-import '../../../hooks/index.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props.mjs';
 import { generateId } from '../../../utils/rand.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
-const _sfc_main = defineComponent({
-  name: "ElCollapseItem",
-  components: { ElCollapseTransition: _CollapseTransition, ElIcon, ArrowRight },
-  props: {
-    title: {
-      type: String,
-      default: ""
-    },
-    name: {
-      type: [String, Number],
-      default: () => {
-        return generateId();
-      }
-    },
-    disabled: Boolean
+const collapseItemProps = buildProps({
+  title: {
+    type: String,
+    default: ""
   },
-  setup(props) {
-    const collapse = inject("collapse");
-    const ns = useNamespace("collapse");
-    const contentWrapStyle = ref({
-      height: "auto",
-      display: "block"
-    });
-    const contentHeight = ref(0);
-    const focusing = ref(false);
-    const isClick = ref(false);
-    const id = ref(generateId());
-    const isActive = computed(() => {
-      return (collapse == null ? void 0 : collapse.activeNames.value.indexOf(props.name)) > -1;
-    });
-    const handleFocus = () => {
-      setTimeout(() => {
-        if (!isClick.value) {
-          focusing.value = true;
-        } else {
-          isClick.value = false;
-        }
-      }, 50);
-    };
-    const handleHeaderClick = () => {
-      if (props.disabled)
-        return;
-      collapse == null ? void 0 : collapse.handleItemClick(props.name);
-      focusing.value = false;
-      isClick.value = true;
-    };
-    const handleEnterClick = () => {
-      collapse == null ? void 0 : collapse.handleItemClick(props.name);
-    };
-    return {
-      isActive,
-      contentWrapStyle,
-      contentHeight,
-      focusing,
-      isClick,
-      id,
-      ns,
-      handleFocus,
-      handleHeaderClick,
-      handleEnterClick,
-      collapse
-    };
-  }
+  name: {
+    type: definePropType([String, Number]),
+    default: () => generateId()
+  },
+  disabled: Boolean
 });
-const _hoisted_1 = ["aria-expanded", "aria-controls", "aria-describedby"];
-const _hoisted_2 = ["id", "tabindex"];
-const _hoisted_3 = ["id", "aria-hidden", "aria-labelledby"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_arrow_right = resolveComponent("arrow-right");
-  const _component_el_icon = resolveComponent("el-icon");
-  const _component_el_collapse_transition = resolveComponent("el-collapse-transition");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass([
-      _ctx.ns.b("item"),
-      _ctx.ns.is("active", _ctx.isActive),
-      _ctx.ns.is("disabled", _ctx.disabled)
-    ])
-  }, [
-    createElementVNode("div", {
-      role: "tab",
-      "aria-expanded": _ctx.isActive,
-      "aria-controls": _ctx.ns.b(`content-${_ctx.id}`),
-      "aria-describedby": _ctx.ns.b(`content-${_ctx.id}`)
-    }, [
-      createElementVNode("div", {
-        id: _ctx.ns.b(`head-${_ctx.id}`),
-        class: normalizeClass([
-          _ctx.ns.be("item", "header"),
-          _ctx.ns.is("active", _ctx.isActive),
-          { focusing: _ctx.focusing }
-        ]),
-        role: "button",
-        tabindex: _ctx.disabled ? -1 : 0,
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleHeaderClick && _ctx.handleHeaderClick(...args)),
-        onKeyup: _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => _ctx.handleEnterClick && _ctx.handleEnterClick(...args), ["stop"]), ["space", "enter"])),
-        onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
-        onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.focusing = false)
-      }, [
-        renderSlot(_ctx.$slots, "title", {}, () => [
-          createTextVNode(toDisplayString(_ctx.title), 1)
-        ]),
-        createVNode(_component_el_icon, {
-          class: normalizeClass([_ctx.ns.be("item", "arrow"), _ctx.ns.is("active", _ctx.isActive)])
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_arrow_right)
-          ]),
-          _: 1
-        }, 8, ["class"])
-      ], 42, _hoisted_2)
-    ], 8, _hoisted_1),
-    createVNode(_component_el_collapse_transition, null, {
-      default: withCtx(() => [
-        withDirectives(createElementVNode("div", {
-          id: _ctx.ns.b(`content-${_ctx.id}`),
-          class: normalizeClass(_ctx.ns.be("item", "wrap")),
-          role: "tabpanel",
-          "aria-hidden": !_ctx.isActive,
-          "aria-labelledby": _ctx.ns.b(`head-${_ctx.id}`)
-        }, [
-          createElementVNode("div", {
-            class: normalizeClass(_ctx.ns.be("item", "content"))
-          }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 2)
-        ], 10, _hoisted_3), [
-          [vShow, _ctx.isActive]
-        ])
-      ]),
-      _: 3
-    })
-  ], 2);
-}
-var CollapseItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { CollapseItem as default };
+export { collapseItemProps };
 //# sourceMappingURL=collapse-item.mjs.map

package/es/components/collapse/src/collapse-item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-item.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ns.b('item'),\n      ns.is('active', isActive),\n      ns.is('disabled', disabled),\n    ]\"\n  >\n    <div\n      role=\"tab\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"ns.b(`content-${id}`)\"\n      :aria-describedby=\"ns.b(`content-${id}`)\"\n    >\n      <div\n        :id=\"ns.b(`head-${id}`)\"\n        :class=\"[\n          ns.be('item', 'header'),\n          ns.is('active', isActive),\n          { focusing },\n        ]\"\n        role=\"button\"\n        :tabindex=\"disabled ? -1 : 0\"\n        @click=\"handleHeaderClick\"\n        @keyup.space.enter.stop=\"handleEnterClick\"\n        @focus=\"handleFocus\"\n        @blur=\"focusing = false\"\n      >\n        <slot name=\"title\">{{ title }}</slot>\n        <el-icon :class=\"[ns.be('item', 'arrow'), ns.is('active', isActive)]\">\n          <arrow-right />\n        </el-icon>\n      </div>\n    </div>\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"ns.b(`content-${id}`)\"\n        :class=\"ns.be('item', 'wrap')\"\n        role=\"tabpanel\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"ns.b(`head-${id}`)\"\n      >\n        <div :class=\"ns.be('item', 'content')\">\n          <slot></slot>\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref } from 'vue'\nimport { generateId } from '@element-plus/utils'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { PropType } from 'vue'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n  name: 'ElCollapseItem',\n  components: { ElCollapseTransition, ElIcon, ArrowRight },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: [String, Number] as PropType<string | number>,\n      default: () => {\n        return generateId()\n      },\n    },\n    disabled: Boolean,\n  },\n  setup(props) {\n    const collapse = inject<CollapseProvider>('collapse')\n    const ns = useNamespace('collapse')\n\n    const contentWrapStyle = ref({\n      height: 'auto',\n      display: 'block',\n    })\n    const contentHeight = ref(0)\n    const focusing = ref(false)\n    const isClick = ref(false)\n    const id = ref(generateId())\n\n    const isActive = computed(() => {\n      return collapse?.activeNames.value.indexOf(props.name) > -1\n    })\n\n    const handleFocus = () => {\n      setTimeout(() => {\n        if (!isClick.value) {\n          focusing.value = true\n        } else {\n          isClick.value = false\n        }\n      }, 50)\n    }\n\n    const handleHeaderClick = () => {\n      if (props.disabled) return\n      collapse?.handleItemClick(props.name)\n      focusing.value = false\n      isClick.value = true\n    }\n\n    const handleEnterClick = () => {\n      collapse?.handleItemClick(props.name)\n    }\n\n    return {\n      isActive,\n      contentWrapStyle,\n      contentHeight,\n      focusing,\n      isClick,\n      id,\n      ns,\n      handleFocus,\n      handleHeaderClick,\n      handleEnterClick,\n      collapse,\n    }\n  },\n})\n</script>\n"],"names":["ElCollapseTransition","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_createVNode"],"mappings":";;;;;;;;;;AA6DA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,wBAAEA,qBAAsB,QAAQ;AAAA,EAC5C,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS,MAAM;AACb,eAAO;AAAA;AAAA;AAAA,IAGX,UAAU;AAAA;AAAA,EAEZ,MAAM,OAAO;AACX,UAAM,WAAW,OAAyB;AAC1C,UAAM,KAAK,aAAa;AAExB,UAAM,mBAAmB,IAAI;AAAA,MAC3B,QAAQ;AAAA,MACR,SAAS;AAAA;AAEX,UAAM,gBAAgB,IAAI;AAC1B,UAAM,WAAW,IAAI;AACrB,UAAM,UAAU,IAAI;AACpB,UAAM,KAAK,IAAI;AAEf,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,kDAAkD;AAAA;AAG3D,UAAM,cAAc,MAAM;AACxB,iBAAW,MAAM;AACf,YAAI,CAAC,QAAQ,OAAO;AAClB,mBAAS,QAAQ;AAAA,eACZ;AACL,kBAAQ,QAAQ;AAAA;AAAA,SAEjB;AAAA;AAGL,UAAM,oBAAoB,MAAM;AAC9B,UAAI,MAAM;AAAU;AACpB;AACA,eAAS,QAAQ;AACjB,cAAQ,QAAQ;AAAA;AAGlB,UAAM,mBAAmB,MAAM;AAC7B;AAAgC;AAGlC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;sBA7HJC,mBA+CM;AAAA,IA9CH,OAAKC;AAAA,MAAU,QAAG,EAAC;AAAA,MAAgB,QAAG,GAAE,UAAW;AAAA,MAAiB,QAAG,GAAE,YAAa;AAAA;AAAA;IAMvFC,mBAyBM;AAAA,MAxBJ,MAAK;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe,QAAG,EAAC,WAAY;AAAA,MAC/B,oBAAkB,QAAG,EAAC,WAAY;AAAA;MAEnCA,mBAkBM;AAAA,QAjBH,IAAI,QAAG,EAAC,QAAS;AAAA,QACjB,OAAKD;AAAA,UAAc,QAAG,GAAE;AAAA,UAA8B,QAAG,GAAE,UAAW;AAAA,sBAAuB;AAAA;AAAA,QAK9F,MAAK;AAAA,QACJ,UAAU,gBAAQ;AAAA,QAClB,SAAK,uCAAE;AAAA,QACP,SAAK,8DAAmB,yDAAgB;AAAA,QACxC,SAAK,uCAAE;AAAA,QACP,QAAI,sCAAE,gBAAQ;AAAA;QAEfE,WAAqC,0BAArC,MAAqC;AAAA,0CAAf,aAAK;AAAA;AAAA,QAC3BC,YAEU;AAAA,UAFA,OAAKH,gBAAG,QAAG,GAAE,kBAAmB,QAAG,GAAE,UAAW;AAAA;2BACxD,MAAe;AAAA,YAAfG,YAAe;AAAA;AAAA;;;;IAIrBA,YAayB;AAAA,uBAZvB,MAWM;AAAA,uBAXNF,mBAWM;AAAA,UATH,IAAI,QAAG,EAAC,WAAY;AAAA,UACpB,OAAKD,eAAE,QAAG,GAAE;AAAA,UACb,MAAK;AAAA,UACJ,eAAW,CAAG;AAAA,UACd,mBAAiB,QAAG,EAAC,QAAS;AAAA;UAE/BC,mBAEM;AAAA,YAFA,OAAKD,eAAE,QAAG,GAAE;AAAA;YAChBE,WAAa;AAAA;;kBARP;AAAA;AAAA;AAAA;;;;;;;;"}
+{"version":3,"file":"collapse-item.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.ts"],"sourcesContent":["import { buildProps, definePropType, generateId } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type { CollapseActiveName } from './collapse'\nimport type CollapseItem from './collapse-item.vue'\n\nexport const collapseItemProps = buildProps({\n  title: {\n    type: String,\n    default: '',\n  },\n  name: {\n    type: definePropType<CollapseActiveName>([String, Number]),\n    default: () => generateId(),\n  },\n  disabled: Boolean,\n} as const)\nexport type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>\n\nexport type CollapseItemInstance = InstanceType<typeof CollapseItem>\n"],"names":[],"mappings":";;;;AACY,MAAC,iBAAiB,GAAG,UAAU,CAAC;AAC5C,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,MAAM,UAAU,EAAE;AAC/B,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,CAAC;;;;"}

package/es/components/collapse/src/collapse-item.vue.d.ts

@@ -1,25 +1,16 @@
-import type { PropType } from 'vue';
-import type { CollapseProvider } from './collapse.type';
 declare const _default: import("vue").DefineComponent<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    name: {
-        type: PropType<string | number>;
-        default: () => number;
-    };
-    disabled: BooleanConstructor;
+    readonly title: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly name: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("./collapse").CollapseActiveName>, () => number, unknown, unknown, unknown>;
+    readonly disabled: BooleanConstructor;
 }, {
-    isActive: import("vue").ComputedRef<boolean>;
-    contentWrapStyle: import("vue").Ref<{
-        height: string;
-        display: string;
-    }>;
-    contentHeight: import("vue").Ref<number>;
-    focusing: import("vue").Ref<boolean>;
-    isClick: import("vue").Ref<boolean>;
-    id: import("vue").Ref<number>;
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly title: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+        readonly name: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("./collapse").CollapseActiveName>, () => number, unknown, unknown, unknown>;
+        readonly disabled: BooleanConstructor;
+    }>> & {
+        [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+    }>>;
+    collapse: import("element-plus/es/tokens").CollapseContext | undefined;
     ns: {
         namespace: import("vue").ComputedRef<string>;
         b: (blockSuffix?: string) => string;
@@ -34,23 +25,77 @@ declare const _default: import("vue").DefineComponent<{
             (name: string): string;
         };
     };
+    focusing: import("vue").Ref<boolean>;
+    isClick: import("vue").Ref<boolean>;
+    id: import("vue").Ref<number>;
+    isActive: import("vue").ComputedRef<boolean | undefined>;
     handleFocus: () => void;
     handleHeaderClick: () => void;
     handleEnterClick: () => void;
-    collapse: CollapseProvider | undefined;
+    ElCollapseTransition: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{}, {
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: {
+                (name: string, state: boolean | undefined): string;
+                (name: string): string;
+            };
+        };
+        on: {
+            beforeEnter(el: any): void;
+            enter(el: any): void;
+            afterEnter(el: any): void;
+            beforeLeave(el: any): void;
+            leave(el: any): void;
+            afterLeave(el: any): void;
+        };
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+    ElIcon: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+        readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+        readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    }, {
+        props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+            readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+            readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+        }>> & {
+            [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+        }>>;
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: {
+                (name: string, state: boolean | undefined): string;
+                (name: string): string;
+            };
+        };
+        style: import("vue").ComputedRef<import("vue").CSSProperties>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+        readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    }>>, {
+        size: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown>;
+        color: string;
+    }>> & Record<string, any>;
+    ArrowRight: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    name: {
-        type: PropType<string | number>;
-        default: () => number;
-    };
-    disabled: BooleanConstructor;
+    readonly title: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly name: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("./collapse").CollapseActiveName>, () => number, unknown, unknown, unknown>;
+    readonly disabled: BooleanConstructor;
 }>>, {
     disabled: boolean;
-    name: string | number;
+    name: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<import("./collapse").CollapseActiveName>, unknown, unknown>;
     title: string;
 }>;
 export default _default;

package/es/components/collapse/src/collapse-item2.mjs

@@ -0,0 +1,119 @@
+import { defineComponent, inject, ref, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, withKeys, withModifiers, renderSlot, createTextVNode, toDisplayString, createVNode, withCtx, withDirectives, vShow } from 'vue';
+import '../../../utils/index.mjs';
+import _CollapseTransition from '../../collapse-transition/index.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import { ArrowRight } from '@element-plus/icons-vue';
+import '../../../hooks/index.mjs';
+import '../../../tokens/index.mjs';
+import { collapseItemProps } from './collapse-item.mjs';
+import { collapseContextKey } from '../../../tokens/collapse.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { generateId } from '../../../utils/rand.mjs';
+
+const _hoisted_1 = ["aria-expanded", "aria-controls", "aria-describedby"];
+const _hoisted_2 = ["id", "tabindex", "onKeyup"];
+const _hoisted_3 = ["id", "aria-hidden", "aria-labelledby"];
+const __default__ = {
+  name: "ElCollapseItem"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: collapseItemProps,
+  setup(__props, { expose }) {
+    const props = __props;
+    const collapse = inject(collapseContextKey);
+    const ns = useNamespace("collapse");
+    const focusing = ref(false);
+    const isClick = ref(false);
+    const id = ref(generateId());
+    const isActive = computed(() => collapse == null ? void 0 : collapse.activeNames.value.includes(props.name));
+    const handleFocus = () => {
+      setTimeout(() => {
+        if (!isClick.value) {
+          focusing.value = true;
+        } else {
+          isClick.value = false;
+        }
+      }, 50);
+    };
+    const handleHeaderClick = () => {
+      if (props.disabled)
+        return;
+      collapse == null ? void 0 : collapse.handleItemClick(props.name);
+      focusing.value = false;
+      isClick.value = true;
+    };
+    const handleEnterClick = () => {
+      collapse == null ? void 0 : collapse.handleItemClick(props.name);
+    };
+    expose({
+      isActive
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          unref(ns).b("item"),
+          unref(ns).is("active", unref(isActive)),
+          unref(ns).is("disabled", _ctx.disabled)
+        ])
+      }, [
+        createElementVNode("div", {
+          role: "tab",
+          "aria-expanded": unref(isActive),
+          "aria-controls": unref(ns).b(`content-${id.value}`),
+          "aria-describedby": unref(ns).b(`content-${id.value}`)
+        }, [
+          createElementVNode("div", {
+            id: unref(ns).b(`head-${id.value}`),
+            class: normalizeClass([
+              unref(ns).be("item", "header"),
+              unref(ns).is("active", unref(isActive)),
+              { focusing: focusing.value }
+            ]),
+            role: "button",
+            tabindex: _ctx.disabled ? -1 : 0,
+            onClick: handleHeaderClick,
+            onKeyup: withKeys(withModifiers(handleEnterClick, ["stop"]), ["space", "enter"]),
+            onFocus: handleFocus,
+            onBlur: _cache[0] || (_cache[0] = ($event) => focusing.value = false)
+          }, [
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createTextVNode(toDisplayString(_ctx.title), 1)
+            ]),
+            createVNode(unref(ElIcon), {
+              class: normalizeClass([unref(ns).be("item", "arrow"), unref(ns).is("active", unref(isActive))])
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(ArrowRight))
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ], 42, _hoisted_2)
+        ], 8, _hoisted_1),
+        createVNode(unref(_CollapseTransition), null, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              id: unref(ns).b(`content-${id.value}`),
+              class: normalizeClass(unref(ns).be("item", "wrap")),
+              role: "tabpanel",
+              "aria-hidden": !unref(isActive),
+              "aria-labelledby": unref(ns).b(`head-${id.value}`)
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(unref(ns).be("item", "content"))
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 2)
+            ], 10, _hoisted_3), [
+              [vShow, unref(isActive)]
+            ])
+          ]),
+          _: 3
+        })
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=collapse-item2.mjs.map

package/es/components/collapse/src/collapse-item2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-item2.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ns.b('item'),\n      ns.is('active', isActive),\n      ns.is('disabled', disabled),\n    ]\"\n  >\n    <div\n      role=\"tab\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"ns.b(`content-${id}`)\"\n      :aria-describedby=\"ns.b(`content-${id}`)\"\n    >\n      <div\n        :id=\"ns.b(`head-${id}`)\"\n        :class=\"[\n          ns.be('item', 'header'),\n          ns.is('active', isActive),\n          { focusing },\n        ]\"\n        role=\"button\"\n        :tabindex=\"disabled ? -1 : 0\"\n        @click=\"handleHeaderClick\"\n        @keyup.space.enter.stop=\"handleEnterClick\"\n        @focus=\"handleFocus\"\n        @blur=\"focusing = false\"\n      >\n        <slot name=\"title\">{{ title }}</slot>\n        <el-icon :class=\"[ns.be('item', 'arrow'), ns.is('active', isActive)]\">\n          <arrow-right />\n        </el-icon>\n      </div>\n    </div>\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"ns.b(`content-${id}`)\"\n        :class=\"ns.be('item', 'wrap')\"\n        role=\"tabpanel\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"ns.b(`head-${id}`)\"\n      >\n        <div :class=\"ns.be('item', 'content')\">\n          <slot></slot>\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, computed, ref } from 'vue'\nimport { generateId } from '@element-plus/utils'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { collapseContextKey } from '@element-plus/tokens'\nimport { collapseItemProps } from './collapse-item'\n\ndefineOptions({\n  name: 'ElCollapseItem',\n})\n\nconst props = defineProps(collapseItemProps)\n\nconst collapse = inject(collapseContextKey)\nconst ns = useNamespace('collapse')\n\nconst focusing = ref(false)\nconst isClick = ref(false)\nconst id = ref(generateId())\n\nconst isActive = computed(() =>\n  collapse?.activeNames.value.includes(props.name)\n)\n\nconst handleFocus = () => {\n  setTimeout(() => {\n    if (!isClick.value) {\n      focusing.value = true\n    } else {\n      isClick.value = false\n    }\n  }, 50)\n}\n\nconst handleHeaderClick = () => {\n  if (props.disabled) return\n  collapse?.handleItemClick(props.name)\n  focusing.value = false\n  isClick.value = true\n}\n\nconst handleEnterClick = () => {\n  collapse?.handleItemClick(props.name)\n}\n\ndefineExpose({\n  /** @description current collapse-item whether active */\n  isActive,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmEA;AACA;AAEA;AACA;AACA;AAEA;AAIA;;;;;;;;;AAUA;;;;;;;AAOA;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/collapse/src/collapse.d.ts

@@ -0,0 +1,17 @@
+import type { ExtractPropTypes } from 'vue';
+import type Collapse from './collapse.vue';
+import type { Arrayable } from 'element-plus/es/utils';
+export declare type CollapseActiveName = string | number;
+export declare type CollapseModelValue = Arrayable<CollapseActiveName>;
+export declare const emitChangeFn: (value: CollapseModelValue) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+export declare const collapseProps: {
+    readonly accordion: BooleanConstructor;
+    readonly modelValue: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<CollapseModelValue>, () => [], unknown, unknown, unknown>;
+};
+export declare type CollapseProps = ExtractPropTypes<typeof collapseProps>;
+export declare const collapseEmits: {
+    "update:modelValue": (value: CollapseModelValue) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+    change: (value: CollapseModelValue) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+};
+export declare type CollapseEmits = typeof collapseEmits;
+export declare type CollapseInstance = InstanceType<typeof Collapse>;

package/es/components/collapse/src/collapse.mjs

@@ -1,70 +1,22 @@
-import { defineComponent, ref, watch, provide, openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import '../../../utils/index.mjs';
 import '../../../constants/index.mjs';
-import '../../../hooks/index.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { isNumber } from '@vueuse/core';
+import { buildProps, definePropType } from '../../../utils/vue/props.mjs';
+import { mutable } from '../../../utils/typescript.mjs';
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
-const _sfc_main = defineComponent({
-  name: "ElCollapse",
-  props: {
-    accordion: Boolean,
-    modelValue: {
-      type: [Array, String, Number],
-      default: () => []
-    }
-  },
-  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT],
-  setup(props, { emit }) {
-    const ns = useNamespace("collapse");
-    const activeNames = ref([].concat(props.modelValue));
-    const setActiveNames = (_activeNames) => {
-      activeNames.value = [].concat(_activeNames);
-      const value = props.accordion ? activeNames.value[0] : activeNames.value;
-      emit(UPDATE_MODEL_EVENT, value);
-      emit(CHANGE_EVENT, value);
-    };
-    const handleItemClick = (name) => {
-      if (props.accordion) {
-        setActiveNames((activeNames.value[0] || activeNames.value[0] === 0) && activeNames.value[0] === name ? "" : name);
-      } else {
-        const _activeNames = activeNames.value.slice(0);
-        const index = _activeNames.indexOf(name);
-        if (index > -1) {
-          _activeNames.splice(index, 1);
-        } else {
-          _activeNames.push(name);
-        }
-        setActiveNames(_activeNames);
-      }
-    };
-    watch(() => props.modelValue, () => {
-      activeNames.value = [].concat(props.modelValue);
-    }, {
-      deep: true
-    });
-    provide("collapse", {
-      activeNames,
-      handleItemClick
-    });
-    return {
-      ns,
-      activeNames,
-      setActiveNames,
-      handleItemClick
-    };
+const emitChangeFn = (value) => typeof isNumber(value);
+const collapseProps = buildProps({
+  accordion: Boolean,
+  modelValue: {
+    type: definePropType([Array, String, Number]),
+    default: () => mutable([])
   }
 });
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.ns.b()),
-    role: "tablist",
-    "aria-multiselectable": "true"
-  }, [
-    renderSlot(_ctx.$slots, "default")
-  ], 2);
-}
-var Collapse = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const collapseEmits = {
+  [UPDATE_MODEL_EVENT]: emitChangeFn,
+  [CHANGE_EVENT]: emitChangeFn
+};
 
-export { Collapse as default };
+export { collapseEmits, collapseProps, emitChangeFn };
 //# sourceMappingURL=collapse.mjs.map

package/es/components/collapse/src/collapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.mjs","sources":["../../../../../../packages/components/collapse/src/collapse.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\" role=\"tablist\" aria-multiselectable=\"true\">\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, watch, provide } from 'vue'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n  name: 'ElCollapse',\n  props: {\n    accordion: Boolean,\n    modelValue: {\n      type: [Array, String, Number] as PropType<\n        string | number | Array<string | number>\n      >,\n      default: () => [],\n    },\n  },\n  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT],\n  setup(props, { emit }) {\n    const ns = useNamespace('collapse')\n    const activeNames = ref([].concat(props.modelValue))\n\n    const setActiveNames = (_activeNames) => {\n      activeNames.value = [].concat(_activeNames)\n      const value = props.accordion ? activeNames.value[0] : activeNames.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit(CHANGE_EVENT, value)\n    }\n\n    const handleItemClick = (name) => {\n      if (props.accordion) {\n        setActiveNames(\n          (activeNames.value[0] || activeNames.value[0] === 0) &&\n            activeNames.value[0] === name\n            ? ''\n            : name\n        )\n      } else {\n        const _activeNames = activeNames.value.slice(0)\n        const index = _activeNames.indexOf(name)\n\n        if (index > -1) {\n          _activeNames.splice(index, 1)\n        } else {\n          _activeNames.push(name)\n        }\n        setActiveNames(_activeNames)\n      }\n    }\n\n    watch(\n      () => props.modelValue,\n      () => {\n        activeNames.value = [].concat(props.modelValue)\n      },\n      {\n        deep: true,\n      }\n    )\n\n    provide<CollapseProvider>('collapse', {\n      activeNames,\n      handleItemClick,\n    })\n\n    return {\n      ns,\n      activeNames,\n      setActiveNames,\n      handleItemClick,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;;;AAYA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,WAAW;AAAA,IACX,YAAY;AAAA,MACV,MAAM,CAAC,OAAO,QAAQ;AAAA,MAGtB,SAAS,MAAM;AAAA;AAAA;AAAA,EAGnB,OAAO,CAAC,oBAAoB;AAAA,EAC5B,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAK,aAAa;AACxB,UAAM,cAAc,IAAI,GAAG,OAAO,MAAM;AAExC,UAAM,iBAAiB,CAAC,iBAAiB;AACvC,kBAAY,QAAQ,GAAG,OAAO;AAC9B,YAAM,QAAQ,MAAM,YAAY,YAAY,MAAM,KAAK,YAAY;AACnE,WAAK,oBAAoB;AACzB,WAAK,cAAc;AAAA;AAGrB,UAAM,kBAAkB,CAAC,SAAS;AAChC,UAAI,MAAM,WAAW;AACnB,uBACG,aAAY,MAAM,MAAM,YAAY,MAAM,OAAO,MAChD,YAAY,MAAM,OAAO,OACvB,KACA;AAAA,aAED;AACL,cAAM,eAAe,YAAY,MAAM,MAAM;AAC7C,cAAM,QAAQ,aAAa,QAAQ;AAEnC,YAAI,QAAQ,IAAI;AACd,uBAAa,OAAO,OAAO;AAAA,eACtB;AACL,uBAAa,KAAK;AAAA;AAEpB,uBAAe;AAAA;AAAA;AAInB,UACE,MAAM,MAAM,YACZ,MAAM;AACJ,kBAAY,QAAQ,GAAG,OAAO,MAAM;AAAA,OAEtC;AAAA,MACE,MAAM;AAAA;AAIV,YAA0B,YAAY;AAAA,MACpC;AAAA,MACA;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;sBA1EJA,mBAEM;AAAA,IAFA,OAAKC,eAAE,QAAG;AAAA,IAAK,MAAK;AAAA,IAAU,wBAAqB;AAAA;IACvDC,WAAa;AAAA;;;;;;"}
+{"version":3,"file":"collapse.mjs","sources":["../../../../../../packages/components/collapse/src/collapse.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  mutable,\n  isNumber,\n  isString,\n} from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'\nimport type { ExtractPropTypes } from 'vue'\nimport type Collapse from './collapse.vue'\nimport type { Arrayable } from '@element-plus/utils'\n\nexport type CollapseActiveName = string | number\nexport type CollapseModelValue = Arrayable<CollapseActiveName>\n\nexport const emitChangeFn = (value: CollapseModelValue) =>\n  typeof isNumber(value) || isString(value) || Array.isArray(value)\n\nexport const collapseProps = buildProps({\n  accordion: Boolean,\n  modelValue: {\n    type: definePropType<CollapseModelValue>([Array, String, Number]),\n    default: () => mutable([] as const),\n  },\n} as const)\nexport type CollapseProps = ExtractPropTypes<typeof collapseProps>\n\nexport const collapseEmits = {\n  [UPDATE_MODEL_EVENT]: emitChangeFn,\n  [CHANGE_EVENT]: emitChangeFn,\n}\nexport type CollapseEmits = typeof collapseEmits\n\nexport type CollapseInstance = InstanceType<typeof Collapse>\n"],"names":[],"mappings":";;;;;;;AAOY,MAAC,YAAY,GAAG,CAAC,KAAK,KAAK,OAAO,QAAQ,CAAC,KAAK,EAAE;AAClD,MAAC,aAAa,GAAG,UAAU,CAAC;AACxC,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,CAAC,EAAE;AACS,MAAC,aAAa,GAAG;AAC7B,EAAE,CAAC,kBAAkB,GAAG,YAAY;AACpC,EAAE,CAAC,YAAY,GAAG,YAAY;AAC9B;;;;"}

package/es/components/collapse/src/collapse.vue.d.ts

@@ -1,10 +1,16 @@
+import type { CollapseActiveName } from './collapse';
 declare const _default: import("vue").DefineComponent<{
-    accordion: BooleanConstructor;
-    modelValue: {
-        type: PropType<string | number | (string | number)[]>;
-        default: () => never[];
-    };
+    readonly accordion: BooleanConstructor;
+    readonly modelValue: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("./collapse").CollapseModelValue>, () => [], unknown, unknown, unknown>;
 }, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly accordion: BooleanConstructor;
+        readonly modelValue: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("./collapse").CollapseModelValue>, () => [], unknown, unknown, unknown>;
+    }>> & {
+        onChange?: ((value: import("./collapse").CollapseModelValue) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("./collapse").CollapseModelValue) => any) | undefined;
+    }>>;
+    emit: ((event: "update:modelValue", value: import("./collapse").CollapseModelValue) => void) & ((event: "change", value: import("./collapse").CollapseModelValue) => void);
     ns: {
         namespace: import("vue").ComputedRef<string>;
         b: (blockSuffix?: string) => string;
@@ -19,20 +25,20 @@ declare const _default: import("vue").DefineComponent<{
             (name: string): string;
         };
     };
-    activeNames: import("vue").Ref<never[]>;
-    setActiveNames: (_activeNames: any) => void;
-    handleItemClick: (name: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    accordion: BooleanConstructor;
-    modelValue: {
-        type: PropType<string | number | (string | number)[]>;
-        default: () => never[];
-    };
+    activeNames: import("vue").Ref<(string | number)[]>;
+    setActiveNames: (_activeNames: CollapseActiveName[]) => void;
+    handleItemClick: (name: CollapseActiveName) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("./collapse").CollapseModelValue) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+    change: (value: import("./collapse").CollapseModelValue) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly accordion: BooleanConstructor;
+    readonly modelValue: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("./collapse").CollapseModelValue>, () => [], unknown, unknown, unknown>;
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((value: import("./collapse").CollapseModelValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import("./collapse").CollapseModelValue) => any) | undefined;
 }, {
-    modelValue: any;
+    modelValue: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<import("./collapse").CollapseModelValue>, unknown, unknown>;
     accordion: boolean;
 }>;
 export default _default;