@v-c/collapse 0.0.1

package/dist/hooks/useItems.js

@@ -0,0 +1,94 @@
+import { createVNode as A, mergeProps as K } from "vue";
+import { toArray as v } from "@v-c/util/dist/Children/toArray";
+import { isEmptyElement as w } from "@v-c/util/dist/props-util";
+import { cloneElement as E } from "@v-c/util/dist/vnode";
+import P from "../Panel.js";
+function h(e, a) {
+  const {
+    prefixCls: s,
+    accordion: n,
+    collapsible: t,
+    onItemClick: y,
+    activeKey: p,
+    openMotion: m,
+    expandIcon: C,
+    classNames: d,
+    styles: u
+  } = a;
+  return e.map((b, r) => {
+    const {
+      label: k,
+      key: I,
+      collapsible: N,
+      onItemClick: g,
+      ...c
+    } = b, o = String(I ?? r), f = N ?? t, i = (x) => {
+      f !== "disabled" && (y?.(x), g?.(x));
+    };
+    let l = !1;
+    return n ? l = p?.[0] === o : l = p.includes(o), A(P, K(c, {
+      classNames: d,
+      styles: u,
+      prefixCls: s,
+      key: o,
+      panelKey: o,
+      isActive: l,
+      accordion: n,
+      openMotion: m,
+      expandIcon: C,
+      header: k,
+      collapsible: f,
+      onItemClick: i
+    }), null);
+  });
+}
+function M(e, a, s) {
+  if (w(e) || !e) return null;
+  if (typeof e == "boolean" || typeof e == "number" || typeof e == "string")
+    return e;
+  const {
+    prefixCls: n,
+    accordion: t,
+    collapsible: y,
+    onItemClick: p,
+    activeKey: m,
+    openMotion: C,
+    expandIcon: d,
+    classNames: u,
+    styles: b
+  } = s, r = e.key || String(a), {
+    header: k,
+    headerClass: I,
+    collapsible: N,
+    onItemClick: g
+  } = e.props || {};
+  let c = !1;
+  t ? c = m[0] === r : c = m.includes(r);
+  const o = N ?? y, f = (l) => {
+    o !== "disabled" && (p?.(l), g?.(l));
+  }, i = {
+    key: r,
+    panelKey: r,
+    header: k,
+    headerClass: I,
+    classNames: u,
+    styles: b,
+    isActive: c,
+    prefixCls: n,
+    openMotion: C,
+    accordion: t,
+    children: e.children?.default?.(),
+    onItemClick: f,
+    expandIcon: d,
+    collapsible: o
+  };
+  return Object.keys(i).forEach((l) => {
+    typeof i[l] > "u" && delete i[l];
+  }), E(e, i);
+}
+function q(e, a, s) {
+  return Array.isArray(e) ? h(e, s) : v(a?.()).map((n, t) => M(n, t, s));
+}
+export {
+  q as useItems
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"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;

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,6 @@
+import e from "./Collapse.js";
+import { default as r } from "./Panel.js";
+export {
+  r as Panel,
+  e as default
+};

package/dist/interface.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function e(){return{id:String,header:[String,Object],prefixCls:String,headerClass:String,showArrow:{type:Boolean,default:!0},className:String,classNames:{type:Object,default:()=>({})},style:Object,styles:{type:Object,default:()=>({})},isActive:Boolean,openMotion:Object,destroyInactivePanel:Boolean,accordion:Boolean,forceRender:Boolean,onItemClick:Function,extra:[String,Object],panelKey:[String,Number],collapsible:String,expandIcon:Function,role:String,children:[Object,String]}}function t(){return{prefixCls:String,activeKey:[String,Number,Array],defaultActiveKey:[String,Number,Array],openMotion:Object,onChange:Function,accordion:Boolean,className:String,classNames:Object,style:Object,styles:Object,destroyInactivePanel:Boolean,expandIcon:Function,collapsible:String,items:Array}}function n(){return{isActive:Boolean,prefixCls:String,className:String,classNames:Object,style:Object,styles:Object,role:String,forceRender:Boolean}}exports.generatorCollapsePanelContentProps=n;exports.generatorCollapsePanelProps=e;exports.generatorCollapseProps=t;

package/dist/interface.d.ts

@@ -0,0 +1,118 @@
+import { Key, VueNode } from '../../util/src/type';
+import { CSSProperties, PropType, Ref, TransitionProps, VNode } from 'vue';
+export type CollapsibleType = 'header' | 'icon' | 'disabled';
+export type SemanticName = 'header' | 'title' | 'body' | 'icon';
+export declare function generatorCollapsePanelProps(): {
+    id: StringConstructor;
+    header: PropType<string | VNode>;
+    prefixCls: StringConstructor;
+    headerClass: StringConstructor;
+    showArrow: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    className: StringConstructor;
+    classNames: {
+        type: PropType<Partial<Record<SemanticName, string>>>;
+        default: () => {};
+    };
+    style: PropType<Record<string, string>>;
+    styles: {
+        type: PropType<Partial<Record<SemanticName, CSSProperties>>>;
+        default: () => {};
+    };
+    isActive: BooleanConstructor;
+    openMotion: PropType<Partial<TransitionProps>>;
+    destroyInactivePanel: PropType<boolean | undefined>;
+    accordion: BooleanConstructor;
+    forceRender: PropType<boolean | undefined>;
+    onItemClick: PropType<(props: Key) => void>;
+    extra: PropType<string | VueNode>;
+    panelKey: (StringConstructor | NumberConstructor)[];
+    collapsible: PropType<CollapsibleType>;
+    expandIcon: PropType<(props: any) => VueNode>;
+    role: StringConstructor;
+    children: PropType<VueNode | string>;
+};
+export interface CollapsePanelProps {
+    id?: string;
+    header?: VueNode;
+    prefixCls?: string;
+    headerClass?: string;
+    showArrow?: boolean;
+    className?: string;
+    classNames?: Partial<Record<SemanticName, string>>;
+    style?: object;
+    styles?: Partial<Record<SemanticName, CSSProperties>>;
+    isActive?: boolean;
+    openMotion?: TransitionProps;
+    destroyOnHidden?: boolean;
+    accordion?: boolean;
+    forceRender?: boolean;
+    extra?: VueNode;
+    onItemClick?: (panelKey: Key) => void;
+    expandIcon?: (props: object) => any;
+    panelKey?: Key;
+    role?: string;
+    collapsible?: CollapsibleType;
+    children?: VueNode | string;
+}
+export interface ItemType extends Omit<CollapsePanelProps, 'header' | 'prefixCls' | 'panelKey' | 'isActive' | 'accordion' | 'openMotion' | 'expandIcon'> {
+    key?: CollapsePanelProps['panelKey'];
+    label?: CollapsePanelProps['header'];
+    children?: VueNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function generatorCollapseProps(): {
+    prefixCls: StringConstructor;
+    activeKey: PropType<Key | Key[]>;
+    defaultActiveKey: PropType<Key | Key[]>;
+    openMotion: ObjectConstructor;
+    onChange: PropType<(key: Key[]) => void>;
+    accordion: BooleanConstructor;
+    className: StringConstructor;
+    classNames: PropType<Partial<Record<SemanticName, string>>>;
+    style: ObjectConstructor;
+    styles: PropType<Partial<Record<SemanticName, CSSProperties>>>;
+    destroyInactivePanel: BooleanConstructor;
+    expandIcon: PropType<(props: any) => VueNode>;
+    collapsible: PropType<CollapsibleType>;
+    items: PropType<ItemType[]>;
+};
+export interface CollapseProps {
+    prefixCls?: string;
+    activeKey?: Key | Key[];
+    defaultActiveKey?: Key | Key[];
+    openMotion?: TransitionProps;
+    onChange?: (key: Key[]) => void;
+    accordion?: boolean;
+    className?: string;
+    style?: object;
+    destroyOnHidden?: boolean;
+    expandIcon?: (props: object) => any;
+    collapsible?: CollapsibleType;
+    /**
+     * Collapse items content
+     * @since 3.6.0
+     */
+    items?: ItemType[];
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, CSSProperties>>;
+}
+export declare function generatorCollapsePanelContentProps(): {
+    isActive: BooleanConstructor;
+    prefixCls: StringConstructor;
+    className: StringConstructor;
+    classNames: PropType<{
+        header?: string;
+        body?: string;
+    }>;
+    style: PropType<Record<string, string>>;
+    styles: PropType<{
+        header?: CSSProperties;
+        body?: CSSProperties;
+    }>;
+    role: StringConstructor;
+    forceRender: BooleanConstructor;
+};
+export type { Key, };

package/dist/interface.js

@@ -0,0 +1,69 @@
+function e() {
+  return {
+    id: String,
+    header: [String, Object],
+    prefixCls: String,
+    headerClass: String,
+    showArrow: {
+      type: Boolean,
+      default: !0
+    },
+    className: String,
+    classNames: {
+      type: Object,
+      default: () => ({})
+    },
+    style: Object,
+    styles: {
+      type: Object,
+      default: () => ({})
+    },
+    isActive: Boolean,
+    openMotion: Object,
+    destroyInactivePanel: Boolean,
+    accordion: Boolean,
+    forceRender: Boolean,
+    onItemClick: Function,
+    extra: [String, Object],
+    panelKey: [String, Number],
+    collapsible: String,
+    expandIcon: Function,
+    role: String,
+    children: [Object, String]
+  };
+}
+function t() {
+  return {
+    prefixCls: String,
+    activeKey: [String, Number, Array],
+    defaultActiveKey: [String, Number, Array],
+    openMotion: Object,
+    onChange: Function,
+    accordion: Boolean,
+    className: String,
+    classNames: Object,
+    style: Object,
+    styles: Object,
+    destroyInactivePanel: Boolean,
+    expandIcon: Function,
+    collapsible: String,
+    items: Array
+  };
+}
+function n() {
+  return {
+    isActive: Boolean,
+    prefixCls: String,
+    className: String,
+    classNames: Object,
+    style: Object,
+    styles: Object,
+    role: String,
+    forceRender: Boolean
+  };
+}
+export {
+  n as generatorCollapsePanelContentProps,
+  e as generatorCollapsePanelProps,
+  t as generatorCollapseProps
+};

package/docs/collapse.stories.vue

@@ -0,0 +1,43 @@
+<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', {
+      on: { keydown: (e: MouseEvent) => 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

@@ -0,0 +1,185 @@
+<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>