@v-c/collapse 0.0.3 → 0.0.5

package/dist/Collapse.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),N=require("@v-c/util"),x=require("@v-c/util/dist/hooks/useMergedState"),O=require("@v-c/util/dist/pickAttrs"),h=require("./hooks/useItems.cjs");function I(t){let r=t;if(!Array.isArray(r)){const a=typeof r;r=a==="number"||a==="string"?[r]:[]}return r.map(a=>String(a))}const M={prefixCls:"vc-collapse"},j=i.defineComponent({props:i.mergeDefaults({prefixCls:{type:String,required:!1},activeKey:{type:[String,Number,Array],required:!1},defaultActiveKey:{type:[String,Number,Array],required:!1},openMotion:{type:null,required:!1},onChange:{type:Function,required:!1},accordion:{type:Boolean,required:!1},className:{type:String,required:!1},style:{type:Object,required:!1},destroyOnHidden:{type:Boolean,required:!1},expandIcon:{type:Function,required:!1},collapsible:{type:String,required:!1},items:{type:Array,required:!1},classNames:{type:Object,required:!1},styles:{type:Object,required:!1}},M),name:"VcCollapse",inheritAttrs:!1,setup(t,{attrs:r,expose:a,slots:d}){const n=i.ref(),[s,f]=x([],{value:i.toRef(t,"activeKey"),onChange:e=>t.onChange?.(e),defaultValue:t.defaultActiveKey,postState:I}),y=e=>t.accordion?s.value[0]===e?[]:[e]:s.value.indexOf(e)>-1?s.value.filter(l=>l!==e):[...s.value,e],p=e=>{s.value=y(e),f(s.value)};return a({ref:n}),()=>{const{prefixCls:e="vc-collapse",className:c,style:u,openMotion:l,expandIcon:v,collapsible:m,accordion:o,classNames:g,styles:q,items:A,destroyOnHidden:C}=t,b=N.classNames(e,c),K={...t,...r},S=h.useItems(A,d.default,{prefixCls:e,accordion:o,openMotion:l,expandIcon:v,collapsible:m,onItemClick:p,activeKey:s.value,destroyOnHidden:C,classNames:g,styles:q});return i.createVNode("div",i.mergeProps({ref:n,class:b,style:u,role:o?"tablist":void 0},O(K,{aria:!0,data:!0})),[S])}}});exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),b=require("@v-c/util"),S=require("@v-c/util/dist/hooks/useMergedState"),x=require("@v-c/util/dist/omit"),N=require("@v-c/util/dist/pickAttrs"),O=require("./hooks/useItems.cjs");function h(r){let t=r;if(!Array.isArray(t)){const a=typeof t;t=a==="number"||a==="string"?[t]:[]}return t.map(a=>String(a))}const I={prefixCls:"vc-collapse"},M=i.defineComponent({props:i.mergeDefaults({prefixCls:{type:String,required:!1},activeKey:{type:[String,Number,Array],required:!1},defaultActiveKey:{type:[String,Number,Array],required:!1},openMotion:{type:null,required:!1},onChange:{type:Function,required:!1},accordion:{type:Boolean,required:!1},destroyOnHidden:{type:Boolean,required:!1},expandIcon:{type:Function,required:!1},collapsible:{type:String,required:!1},items:{type:Array,required:!1},classNames:{type:Object,required:!1},styles:{type:Object,required:!1}},I),name:"VcCollapse",inheritAttrs:!1,setup(r,{attrs:t,expose:a,slots:d}){const l=i.ref(),[s,f]=S([],{value:i.toRef(r,"activeKey"),onChange:e=>r.onChange?.(e),defaultValue:r.defaultActiveKey,postState:h}),y=e=>r.accordion?s.value[0]===e?[]:[e]:s.value.indexOf(e)>-1?s.value.filter(n=>n!==e):[...s.value,e],p=e=>{s.value=y(e),f(s.value)};return a({ref:l}),()=>{const{prefixCls:e="vc-collapse",openMotion:c,expandIcon:o,collapsible:n,accordion:u,classNames:v,styles:m,items:g,destroyOnHidden:q}=r,A=b.classNames(e,t.class),C={...r,...x(t,["class","style"])},K=O.useItems(g,d.default,{prefixCls:e,accordion:u,openMotion:c,expandIcon:o,collapsible:n,onItemClick:p,activeKey:s.value,destroyOnHidden:q,classNames:v,styles:m});return i.createVNode("div",i.mergeProps({ref:l,class:A,style:t.style,role:u?"tablist":void 0},N(C,{aria:!0,data:!0})),[K])}}});exports.default=M;

package/dist/Collapse.js

@@ -1,19 +1,20 @@
-import { defineComponent as b, mergeDefaults as x, ref as S, toRef as O, createVNode as h, mergeProps as I } from "vue";
-import { classNames as j } from "@v-c/util";
-import M from "@v-c/util/dist/hooks/useMergedState";
+import { defineComponent as K, mergeDefaults as x, ref as N, toRef as b, createVNode as S, mergeProps as h } from "vue";
+import { classNames as O } from "@v-c/util";
+import I from "@v-c/util/dist/hooks/useMergedState";
+import M from "@v-c/util/dist/omit";
 import V from "@v-c/util/dist/pickAttrs";
-import { useItems as B } from "./hooks/useItems.js";
-function F(t) {
-  let r = t;
-  if (!Array.isArray(r)) {
-    const s = typeof r;
-    r = s === "number" || s === "string" ? [r] : [];
+import { useItems as j } from "./hooks/useItems.js";
+function B(r) {
+  let t = r;
+  if (!Array.isArray(t)) {
+    const a = typeof t;
+    t = a === "number" || a === "string" ? [t] : [];
   }
-  return r.map((s) => String(s));
+  return t.map((a) => String(a));
 }
-const H = {
+const F = {
   prefixCls: "vc-collapse"
-}, $ = /* @__PURE__ */ b({
+}, $ = /* @__PURE__ */ K({
   props: /* @__PURE__ */ x({
     prefixCls: {
       type: String,
@@ -39,14 +40,6 @@ const H = {
       type: Boolean,
       required: !1
     },
-    className: {
-      type: String,
-      required: !1
-    },
-    style: {
-      type: Object,
-      required: !1
-    },
     destroyOnHidden: {
       type: Boolean,
       required: !1
@@ -71,61 +64,59 @@ const H = {
       type: Object,
       required: !1
     }
-  }, H),
+  }, F),
   name: "VcCollapse",
   inheritAttrs: !1,
-  setup(t, {
-    attrs: r,
-    expose: s,
+  setup(r, {
+    attrs: t,
+    expose: a,
     slots: u
   }) {
-    const l = S(), [a, d] = M([], {
-      value: O(t, "activeKey"),
-      onChange: (e) => t.onChange?.(e),
-      defaultValue: t.defaultActiveKey,
-      postState: F
-    }), f = (e) => t.accordion ? a.value[0] === e ? [] : [e] : a.value.indexOf(e) > -1 ? a.value.filter((i) => i !== e) : [...a.value, e], p = (e) => {
-      a.value = f(e), d(a.value);
+    const l = N(), [s, f] = I([], {
+      value: b(r, "activeKey"),
+      onChange: (e) => r.onChange?.(e),
+      defaultValue: r.defaultActiveKey,
+      postState: B
+    }), d = (e) => r.accordion ? s.value[0] === e ? [] : [e] : s.value.indexOf(e) > -1 ? s.value.filter((i) => i !== e) : [...s.value, e], p = (e) => {
+      s.value = d(e), f(s.value);
     };
-    return s({
+    return a({
       ref: l
     }), () => {
       const {
         prefixCls: e = "vc-collapse",
-        className: n,
-        style: o,
-        openMotion: i,
-        expandIcon: y,
-        collapsible: m,
+        openMotion: n,
+        expandIcon: o,
+        collapsible: i,
         accordion: c,
-        classNames: v,
-        styles: g,
-        items: A,
-        destroyOnHidden: q
-      } = t, C = j(e, n), K = {
-        ...t,
-        ...r
-      }, N = B(A, u.default, {
+        classNames: y,
+        styles: m,
+        items: v,
+        destroyOnHidden: g
+      } = r, A = O(e, t.class), q = {
+        ...r,
+        ...M(t, ["class", "style"])
+      }, C = j(v, u.default, {
         prefixCls: e,
         accordion: c,
-        openMotion: i,
-        expandIcon: y,
-        collapsible: m,
+        openMotion: n,
+        expandIcon: o,
+        collapsible: i,
         onItemClick: p,
-        activeKey: a.value,
-        destroyOnHidden: q,
-        classNames: v,
-        styles: g
+        activeKey: s.value,
+        destroyOnHidden: g,
+        classNames: y,
+        styles: m
       });
-      return h("div", I({
+      return S("div", h({
         ref: l,
-        class: C,
-        style: o,
+        class: A,
+        style: t.style,
         role: c ? "tablist" : void 0
-      }, V(K, {
+      }, V(q, {
         aria: !0,
         data: !0
-      })), [N]);
+      })), [C]);
     };
   }
 });

package/dist/Panel.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("@v-c/util"),y=require("@v-c/util/dist/KeyCode"),O=require("@v-c/util/dist/omit"),R=require("./PanelContent.cjs"),B={showArrow:!0,classNames:{},styles:{}},j=e.defineComponent({props:e.mergeDefaults({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}},B),name:"CollapsePanel",inheritAttrs:!1,setup(a,{attrs:m,expose:q}){const d=e.computed(()=>a.collapsible==="disabled"),u=e.ref(),N=e.computed(()=>a.extra!==null&&a.extra!==void 0&&typeof a.extra!="boolean"),c=e.computed(()=>({onClick:()=>{a.onItemClick?.(a.panelKey)},onKeydown:l=>{(l.key==="Enter"||l.keyCode===y.ENTER||l.which===y.ENTER)&&a.onItemClick?.(a.panelKey)},role:a.accordion?"tab":"button","aria-expanded":a.isActive,"aria-disabled":d.value,tabIndex:d.value?-1:0}));return q({ref:u}),()=>{const{extra:l,prefixCls:s,isActive:r,class:h,expandIcon:f,forceRender:v,headerClass:C,collapsible:t,accordion:b,openMotion:x={},onItemClick:M,classNames:n={},showArrow:g=!0,destroyOnHidden:P,styles:i={},header:w,panelKey:T,children:S,...$}=a,A=o.classNames(`${s}-item`,{[`${s}-item-active`]:r,[`${s}-item-disabled`]:d.value},h),I={class:o.classNames(C,`${s}-header`,{[`${s}-collapsible-${t}`]:!!t},n.header),style:i.header,...["header","icon"].includes(t)?{}:c.value},p=typeof f=="function"?f(a):e.createVNode("i",{class:"arrow"},null),V=p&&e.createVNode("div",e.mergeProps({class:o.classNames(`${s}-expand-icon`,n?.icon),style:i?.icon},["header","icon"].includes(t)?c.value:{}),[p]),k=e.withDirectives(e.createVNode(R.default,{prefixCls:s,classNames:n,styles:i,isActive:r,forceRender:v,role:b?"tabpanel":void 0},{default:()=>S}),[[e.vShow,r]]),E={appear:!1,"leave-to-class":`${s}-panel-hidden`,...x},K={...$,...O(m,["class"])};return e.createVNode("div",e.mergeProps(K,{ref:u,class:A}),[e.createVNode("div",I,[g&&V,e.createVNode("span",e.mergeProps({class:o.classNames(`${s}-title`,n?.title),style:i?.title},t==="header"?c.value:{}),[w]),N.value&&e.createVNode("div",{class:`${s}-extra`},[l])]),e.createVNode(e.Transition,E,{default:()=>[!P||r?k:null]})])}}});exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("@v-c/util"),y=require("@v-c/util/dist/KeyCode"),O=require("@v-c/util/dist/omit"),R=require("./PanelContent.cjs"),B={showArrow:!0,classNames:{},styles:{}},j=e.defineComponent({props:e.mergeDefaults({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}},B),name:"CollapsePanel",inheritAttrs:!1,setup(a,{attrs:m,expose:q}){const d=e.computed(()=>a.collapsible==="disabled"),u=e.ref(),N=e.computed(()=>a.extra!==null&&a.extra!==void 0&&typeof a.extra!="boolean"),c=e.computed(()=>({onClick:()=>{a.onItemClick?.(a.panelKey)},onKeydown:r=>{(r.key==="Enter"||r.keyCode===y.ENTER||r.which===y.ENTER)&&a.onItemClick?.(a.panelKey)},role:a.accordion?"tab":"button","aria-expanded":a.isActive,"aria-disabled":d.value,tabIndex:d.value?-1:0}));return q({ref:u}),()=>{const{extra:r,prefixCls:s,isActive:l,class:h,expandIcon:f,forceRender:v,headerClass:C,collapsible:t,accordion:b,openMotion:x={},onItemClick:M,classNames:n={},showArrow:g=!0,destroyOnHidden:P,styles:i={},header:w,panelKey:T,children:S,...$}=a,A=o.classNames(`${s}-item`,{[`${s}-item-active`]:l,[`${s}-item-disabled`]:d.value},h),I={class:o.classNames(C,`${s}-header`,{[`${s}-collapsible-${t}`]:!!t},n.header),style:i.header,...["header","icon"].includes(t)?{}:c.value},p=typeof f=="function"?f(a):e.createVNode("i",{class:"arrow"},null),V=p&&e.createVNode("div",e.mergeProps({class:o.classNames(`${s}-expand-icon`,n?.icon),style:i?.icon},["header","icon"].includes(t)?c.value:{}),[p]),k=e.withDirectives(e.createVNode(R.default,{prefixCls:s,classNames:n,styles:i,isActive:l,forceRender:v,role:b?"tabpanel":void 0},{default:()=>S}),[[e.vShow,l]]),E={appear:!1,...x},K={...$,...O(m,["class"])};return e.createVNode("div",e.mergeProps(K,{ref:u,class:A}),[e.createVNode("div",I,[g&&V,e.createVNode("span",e.mergeProps({class:o.classNames(`${s}-title`,n?.title),style:i?.title},t==="header"?c.value:{}),[w]),N.value&&e.createVNode("div",{class:`${s}-extra`},[r])]),e.createVNode(e.Transition,E,{default:()=>[!P||l?k:null]})])}}});exports.default=j;

package/dist/Panel.js

@@ -100,7 +100,7 @@ const W = {
     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(() => ({
+    const d = u(() => e.collapsible === "disabled"), p = D(), b = u(() => e.extra !== null && e.extra !== void 0 && typeof e.extra != "boolean"), c = u(() => ({
       onClick: () => {
         e.onItemClick?.(e.panelKey);
       },
@@ -119,7 +119,7 @@ const W = {
         extra: s,
         prefixCls: a,
         isActive: t,
-        class: b,
+        class: v,
         expandIcon: y,
         forceRender: x,
         headerClass: N,
@@ -138,7 +138,7 @@ const W = {
       } = e, k = o(`${a}-item`, {
         [`${a}-item-active`]: t,
         [`${a}-item-disabled`]: d.value
-      }, b), E = {
+      }, v), E = {
         class: o(N, `${a}-header`, {
           [`${a}-collapsible-${r}`]: !!r
         }, n.header),
@@ -160,7 +160,7 @@ const W = {
         default: () => I
       }), [[H, t]]), B = {
         appear: !1,
-        "leave-to-class": `${a}-panel-hidden`,
+        // leaveToClass: `${prefixCls}-panel-hidden`,
         ...g
       }, O = {
         ...S,
@@ -172,7 +172,7 @@ const W = {
       }), [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", {
+      }, r === "header" ? c.value : {}), [A]), b.value && l("div", {
         class: `${a}-extra`
       }, [s])]), l(M, B, {
         default: () => [!$ || t ? R : null]

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { default as Collapse } from './Collapse';
 import { default as Panel } from './Panel';
-export type { CollapsePanelProps, CollapseProps } from './interface';
+export type { CollapsePanelProps, CollapseProps, ItemType } from './interface';
 export default Collapse;
 export { Panel };

package/dist/interface.d.ts

@@ -37,8 +37,6 @@ export interface CollapseProps {
     openMotion?: TransitionProps;
     onChange?: (key: Key[]) => void;
     accordion?: boolean;
-    className?: string;
-    style?: object;
     destroyOnHidden?: boolean;
     expandIcon?: (props: object) => any;
     collapsible?: CollapsibleType;

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@v-c/collapse",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/assets/index.less

@@ -1,117 +0,0 @@
-@prefixCls: vc-collapse;
-@text-color: #666;
-@borderStyle: 1px solid #d9d9d9;
-
-@import "./motion.less";
-
-#arrow {
-  .common() {
-    width: 0;
-    height: 0;
-    font-size: 0;
-    line-height: 0;
-  }
-  .right(@w, @h, @color) {
-    border-top: @w solid transparent;
-    border-bottom: @w solid transparent;
-    border-left: @h solid @color;
-  }
-
-  .bottom(@w, @h, @color) {
-    border-left: @w solid transparent;
-    border-right: @w solid transparent;
-    border-top: @h solid @color;
-  }
-}
-
-.@{prefixCls} {
-  background-color: #f7f7f7;
-  border-radius: 3px;
-  border: @borderStyle;
-
-  // &-anim-active {
-  //   transition: height 0.2s ease-out;
-  // }
-
-  & > &-item {
-    border-top: @borderStyle;
-    &:first-child {
-      border-top: none;
-    }
-
-    > .@{prefixCls}-header {
-      display: flex;
-      align-items: center;
-      line-height: 22px;
-      padding: 10px 16px;
-      color: #666;
-      cursor: pointer;
-      .arrow {
-        display: inline-block;
-        content: "\20";
-        #arrow > .common();
-        #arrow > .right(3px, 4px, #666);
-        vertical-align: middle;
-        margin-right: 8px;
-      }
-
-      .@{prefixCls}-extra {
-        margin: 0 16px 0 auto;
-      }
-    }
-    .@{prefixCls}-collapsible-header {
-      cursor: default;
-      .@{prefixCls}-title {
-        cursor: pointer;
-      }
-      .@{prefixCls}-expand-icon {
-        cursor: pointer;
-      }
-    }
-    .@{prefixCls}-collapsible-icon {
-      cursor: default;
-      .@{prefixCls}-expand-icon {
-        cursor: pointer;
-      }
-    }
-  }
-
-  & > &-item-disabled > .@{prefixCls}-header {
-    cursor: not-allowed;
-    color: #999;
-    background-color: #f3f3f3;
-  }
-
-  &-panel {
-    overflow: hidden;
-    color: @text-color;
-    padding: 0 16px;
-    background-color: #fff;
-
-    & > &-box {
-      margin-top: 16px;
-      margin-bottom: 16px;
-    }
-
-    // &-inactive {
-    //   display: none;
-    // }
-  }
-
-  &-item:last-child {
-    > .@{prefixCls}-panel {
-      border-radius: 0 0 3px 3px;
-    }
-  }
-
-  & > &-item-active {
-    > .@{prefixCls}-header {
-      .arrow {
-        position: relative;
-        top: 2px;
-        #arrow > .bottom(3px, 4px, #666);
-        margin-right: 6px;
-      }
-    }
-  }
-}

package/assets/motion.less

@@ -1,14 +0,0 @@
-@prefixCls: vc-collapse;
-
-.@{prefixCls} {
-  &-enter-active,
-  &-leave-active {
-    transition:
-      height 0.3s,
-      opacity 0.3s;
-  }
-
-  &-panal-hidden {
-    display: none;
-  }
-}

package/docs/collapse.stories.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import type { CollapseProps } from '../src/interface'
-import { h } from 'vue'
-import Collapse from '../src/index'
-import CustomIcon from './custom-icon.vue'
-import Simple from './simple.vue'
-import '../assets/index.less'
-
-const basicCollapseItems: CollapseProps['items'] = [
-  {
-    label: h('input', {
-      onKeydown: (e: KeyboardEvent) => {
-        e.stopPropagation()
-      },
-    }),
-    children: 'content',
-  },
-  {
-    label: 'title 2',
-    children: 'content 2',
-    collapsible: 'disabled',
-  },
-  {
-    label: 'title 3',
-    children: 'content 3',
-    onItemClick: console.log,
-  },
-]
-</script>
-
-<template>
-  <Story title="Collapse">
-    <Variant title="Basic">
-      <Collapse :items="basicCollapseItems" />
-    </Variant>
-
-    <Variant title="custom icon">
-      <CustomIcon />
-    </Variant>
-
-    <Variant title="simple">
-      <Simple />
-    </Variant>
-  </Story>
-</template>

package/docs/custom-icon.vue

@@ -1,185 +0,0 @@
-<script setup lang="ts">
-import type { CollapseProps } from '../src/index'
-import { h, ref, shallowRef, watch } from 'vue'
-import Collapse from '../src/index'
-
-const initLength = 3
-
-const text = `
-  A dog is a type of domesticated animal.
-  Known for its loyalty and faithfulness,
-  it can be found as a welcome guest in many households across the world.
-`
-
-function random() {
-  return parseInt((Math.random() * 10).toString(), 10) + 1
-}
-
-const arrowPath
-  = 'M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88'
-  + '.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.'
-  + '6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-0.7 5.'
-  + '2-2L869 536.2c14.7-12.8 14.7-35.6 0-48.4z'
-
-function expandIcon({ isActive }: { isActive: boolean }) {
-  return h(
-    'i',
-    {
-      style: {
-        'margin-right': '.5rem',
-      },
-    },
-    [
-      h(
-        'svg',
-        {
-          viewBox: '0 0 1024 1024',
-          width: '1em',
-          height: '1em',
-          fill: 'currentColor',
-          style: {
-            verticalAlign: '-.125em',
-            transition: 'transform .2s',
-            transform: `rotate(${isActive ? 90 : 0}deg)`,
-          },
-        },
-        [
-          h('path', {
-            d: arrowPath,
-          }),
-        ],
-      ),
-    ],
-  )
-}
-
-const rerender = ref(0)
-const accordion = ref(false)
-const activeKey = ref<Array<string | number | bigint>>(['4'])
-
-const time = ref(random())
-watch(
-  () => [rerender.value, accordion.value, activeKey.value],
-  () => {
-    time.value = random()
-  },
-)
-
-function handleSetActiveKey(e: Array<string | number | bigint>) {
-  activeKey.value = e
-}
-
-function getCollapsedHeight(el: HTMLDivElement) {
-  el.style.height = '0'
-  el.style.opacity = '0'
-}
-function getRealHeight(el: HTMLDivElement) {
-  console.log(el.scrollHeight)
-  el.style.height = `${el.scrollHeight}px`
-  el.style.opacity = '1'
-}
-function getCurrentHeight(el: HTMLDivElement) {
-  el.style.height = `${el.offsetHeight}px`
-}
-
-function skipOpacityTransition(el: HTMLDivElement) {
-  el.style.height = ''
-}
-const openMotion = {
-  name: 'vc-collapse',
-  onBeforeEnter: getCollapsedHeight,
-  onEnter: getRealHeight,
-  onAfterEnter: skipOpacityTransition,
-  onBeforeLeave: getCurrentHeight,
-  onLeave: getCollapsedHeight,
-  onAfterLeave: skipOpacityTransition,
-}
-
-const items = shallowRef<CollapseProps['items']>([])
-function handleUpdateItems() {
-  items.value = Array.from({ length: initLength })
-    .map((_, i) => {
-      return {
-        label: `This is panel header ${i + 1}`,
-        key: i + 1,
-        children: h('p', {}, [text.repeat(time.value)]),
-      }
-    })
-    .concat([
-      {
-        label: `This is panel header ${initLength + 1}`,
-        key: initLength + 1,
-        children: h(Collapse, {
-          defaultActiveKey: '1',
-          expandIcon,
-          items: [
-            {
-              label: 'This is panel nest panel',
-              key: '1',
-              children: h('p', {}, [text]),
-            },
-          ],
-        }),
-      },
-      {
-        label: `This is panel header ${initLength + 2}`,
-        key: initLength + 2,
-        children: h(Collapse, {
-          defaultActiveKey: '1',
-          items: [
-            {
-              label: 'This is panel nest panel',
-              children: h('form', {}, [
-                h(
-                  'label',
-                  {
-                    htmlFor: 'test',
-                  },
-                  ['Name:&nbsp;'],
-                ),
-                h('input', {
-                  type: 'text',
-                  id: 'test',
-                }),
-              ]),
-            },
-          ],
-        }),
-      },
-    ])
-}
-watch(
-  () => time.value,
-  () => {
-    handleUpdateItems()
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <button type="button" @click="rerender += 1">
-    reRender
-  </button>
-  <br>
-  <br>
-  <button type="button" @click="accordion = !accordion">
-    {{ accordion ? "Mode: accordion" : "Mode: collapse" }}
-  </button>
-  <br>
-  <br>
-  <button type="button" @click="activeKey = ['2']">
-    active header 2
-  </button>
-  <br>
-  <br>
-
-  <Collapse
-    :accordion="accordion"
-    :active-key="activeKey"
-    :expand-icon="expandIcon"
-    :open-motion="openMotion"
-    :items="items"
-    @change="handleSetActiveKey"
-  />
-</template>