@v-c/collapse 0.0.1

package/docs/simple.vue

@@ -0,0 +1,218 @@
+<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 collapsible = ref<CollapseProps['collapsible']>()
+
+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)]),
+      }
+    })
+
+  items.value = items.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',
+              }),
+            ]),
+          },
+        ],
+      }),
+    },
+    {
+      label: `This is panel header ${initLength + 3}`,
+      key: initLength + 3,
+      extra: h('span', {}, ['Extra Node']),
+      children: h('p', {}, ['Panel with extra']),
+    },
+  ])
+}
+watch(
+  () => time.value,
+  () => {
+    handleUpdateItems()
+  },
+  { immediate: true },
+)
+
+function handleCollapsibleChange(e: Event) {
+  const values = [undefined, 'header', 'icon', 'disabled']
+  collapsible.value = Reflect.get(values, (e.target as HTMLSelectElement).value) as CollapseProps['collapsible']
+  console.log(collapsible.value)
+}
+</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>
+  <div>
+    collapsible:
+    <select @change="handleCollapsibleChange">
+      <option :value="0">
+        default
+      </option>
+      <option :value="1">
+        header
+      </option>
+      <option :value="2">
+        icon
+      </option>
+      <option :value="3">
+        disabled
+      </option>
+    </select>
+  </div>
+  <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"
+    :collapsible="collapsible"
+    :items="items"
+    @change="handleSetActiveKey"
+  />
+</template>

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@v-c/collapse",
+  "type": "module",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@v-c/util": "0.0.7"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublish": "pnpm build"
+  }
+}

package/src/Collapse.tsx

@@ -0,0 +1,108 @@
+import type { Ref } from 'vue'
+import type { CollapseProps, Key } from './interface'
+import { classNames as classnames } from '@v-c/util'
+import useMergedState from '@v-c/util/dist/hooks/useMergedState'
+import pickAttrs from '@v-c/util/dist/pickAttrs'
+import { defineComponent, ref, toRef } from 'vue'
+import { useItems } from './hooks/useItems'
+
+function getActiveKeysArray(activeKey: Key | Array<Key>) {
+  let currentActiveKey = activeKey
+  if (!Array.isArray(currentActiveKey)) {
+    const activeKeyType = typeof currentActiveKey
+    currentActiveKey
+      = activeKeyType === 'number' || activeKeyType === 'string'
+        ? [currentActiveKey]
+        : []
+  }
+  return currentActiveKey.map(key => String(key))
+}
+
+const defaults = {
+  prefixCls: 'vc-collapse',
+} as any
+
+const Collapse = defineComponent<CollapseProps>({
+  name: 'VcCollapse',
+  inheritAttrs: false,
+  setup(props = defaults, { attrs, expose, slots }) {
+    const refWrapper = ref<HTMLDivElement>()
+
+    const [activeKey, setActiveKey] = useMergedState<
+      Key | Key[],
+      Ref<Array<Key>>
+    >([], {
+      value: toRef(props, 'activeKey') as Ref<Key | Key[]>,
+      onChange: v => props.onChange?.(v as Key[]),
+      defaultValue: props.defaultActiveKey,
+      postState: getActiveKeysArray,
+    })
+
+    const getActiveKey = (key: Key) => {
+      if (props.accordion) {
+        return activeKey.value[0] === key ? [] : [key]
+      }
+
+      const index = activeKey.value.indexOf(key)
+      const isActive = index > -1
+      if (isActive) {
+        return activeKey.value.filter(item => item !== key)
+      }
+
+      return [...activeKey.value, key]
+    }
+    const onItemClick = (key: Key) => {
+      activeKey.value = getActiveKey(key)
+      setActiveKey(activeKey.value)
+    }
+
+    expose({
+      ref: refWrapper,
+    })
+
+    return () => {
+      const {
+        prefixCls = 'vc-collapse',
+        className,
+        style,
+        openMotion,
+        expandIcon,
+        collapsible,
+        accordion,
+        classNames,
+        styles,
+        items,
+      } = props
+
+      const collapseClassName = classnames(prefixCls, className)
+
+      const mergedProps = { ...props, ...attrs }
+
+      const mergedChildren = useItems(items, slots.default, {
+        prefixCls,
+        accordion,
+        openMotion,
+        expandIcon,
+        collapsible,
+        onItemClick,
+        activeKey: activeKey.value,
+        classNames,
+        styles,
+      })
+
+      return (
+        <div
+          ref={refWrapper}
+          class={collapseClassName}
+          style={style as any}
+          role={accordion ? 'tablist' : undefined}
+          {...pickAttrs(mergedProps, { aria: true, data: true })}
+        >
+          {mergedChildren}
+        </div>
+      )
+    }
+  },
+})
+
+export default Collapse

package/src/Panel.tsx

@@ -0,0 +1,177 @@
+import type { HTMLAttributes } from 'vue'
+import type { CollapsePanelProps } from './interface'
+import { classNames as classnames } from '@v-c/util'
+import KeyCode from '@v-c/util/dist/KeyCode'
+import omit from '@v-c/util/dist/omit.ts'
+import { computed, defineComponent, ref, Transition } from 'vue'
+import PanelContent from './PanelContent'
+
+const defaults = {
+  showArrow: true,
+  classNames: {},
+  styles: {},
+} as any
+
+const CollapsePanel = defineComponent<CollapsePanelProps>({
+  name: 'CollapsePanel',
+  inheritAttrs: false,
+  setup(props = defaults, { attrs, expose }) {
+    const disabled = computed(() => props.collapsible === 'disabled')
+    const refWrapper = ref()
+    const ifExtraExist = computed(
+      () =>
+        props.extra !== null
+        && props.extra !== undefined
+        && typeof props.extra !== 'boolean',
+    )
+
+    const collapsibleProps = computed(() => {
+      return {
+        'onClick': () => {
+          props.onItemClick?.(props.panelKey!)
+        },
+        'onKeydown': (e: KeyboardEvent) => {
+          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,
+        className,
+        expandIcon,
+        forceRender,
+        headerClass,
+        collapsible,
+        accordion,
+        openMotion = {},
+        onItemClick,
+        classNames: customizeClassNames = {},
+        showArrow = true,
+        styles = {},
+        header,
+        panelKey,
+        children,
+        ...restProps
+      } = props
+
+      const collapsePanelClassNames = classnames(
+        `${prefixCls}-item`,
+        {
+          [`${prefixCls}-item-active`]: isActive,
+          [`${prefixCls}-item-disabled`]: disabled.value,
+        },
+        className,
+      )
+      const headerClassName = classnames(
+        headerClass,
+        `${prefixCls}-header`,
+        {
+          [`${prefixCls}-collapsible-${collapsible}`]: !!collapsible,
+        },
+        customizeClassNames.header,
+      )
+
+      const headerProps: HTMLAttributes = {
+        class: headerClassName,
+        style: styles.header,
+        ...(['header', 'icon'].includes(collapsible!)
+          ? {}
+          : collapsibleProps.value),
+      }
+
+      // ======================== Icon ========================
+      const iconNodeInner
+        = typeof expandIcon === 'function'
+          ? (
+              expandIcon(props)
+            )
+          : (
+              <i class="arrow" />
+            )
+      const iconNode = iconNodeInner && (
+        <div
+          class={classnames(`${prefixCls}-expand-icon`, customizeClassNames?.icon)}
+          style={styles?.icon}
+          {...(['header', 'icon'].includes(collapsible!)
+            ? collapsibleProps.value
+            : {})}
+        >
+          {iconNodeInner}
+        </div>
+      )
+
+      const panelContent = (
+        <PanelContent
+          v-show={isActive}
+          prefixCls={prefixCls}
+          classNames={customizeClassNames}
+          styles={styles}
+          isActive={isActive}
+          forceRender={forceRender}
+          role={accordion ? 'tabpanel' : undefined}
+          v-slots={{ default: () => children }}
+        />
+      )
+
+      const transitionProps = {
+        'appear': false,
+        'leave-to-class': `${prefixCls}-panel-hidden`,
+        ...openMotion,
+      }
+
+      const mergedRestProps = {
+        ...restProps,
+        ...omit(attrs, ['class']),
+      }
+
+      return (
+        <div
+          {...mergedRestProps as any}
+          ref={refWrapper}
+          class={collapsePanelClassNames}
+        >
+          <div {...headerProps}>
+            {showArrow && iconNode}
+            <span
+              class={classnames(
+                `${prefixCls}-title`,
+                customizeClassNames?.title,
+              )}
+              style={styles?.title}
+              {...(collapsible === 'header' ? collapsibleProps.value : {})}
+            >
+              {header}
+            </span>
+            {ifExtraExist.value && (
+              <div class={`${prefixCls}-extra`}>{extra}</div>
+            )}
+          </div>
+
+          <Transition {...transitionProps}>
+            {isActive ? panelContent : null}
+          </Transition>
+        </div>
+      )
+    }
+  },
+})
+
+export default CollapsePanel

package/src/PanelContent.tsx

@@ -0,0 +1,63 @@
+import type { CollapsePanelProps } from './interface'
+import { classNames as classnames } from '@v-c/util'
+import { defineComponent, ref, watch } from 'vue'
+
+const PanelContent = defineComponent<CollapsePanelProps>({
+  name: 'PanelContent',
+  inheritAttrs: false,
+  setup(props, { slots }) {
+    const rendered = ref(props.isActive || props.forceRender)
+
+    watch(
+      () => [props.isActive, props.forceRender],
+      () => {
+        if (props.isActive || props.forceRender) {
+          rendered.value = true
+        }
+      },
+    )
+
+    return () => {
+      if (!rendered.value) {
+        return null
+      }
+
+      const {
+        prefixCls,
+        isActive,
+        style,
+        role,
+        className,
+        classNames: customizeClassNames,
+        styles,
+      } = props
+
+      return (
+        <div
+          class={classnames(
+            `${prefixCls}-panel`,
+            {
+              [`${prefixCls}-panel-active`]: isActive,
+              [`${prefixCls}-panel-inactive`]: !isActive,
+            },
+            className,
+          )}
+          style={style as any}
+          role={role}
+        >
+          <div
+            class={classnames(
+              `${prefixCls}-body`,
+              customizeClassNames?.body,
+            )}
+            style={styles?.body}
+          >
+            {slots.default?.()}
+          </div>
+        </div>
+      )
+    }
+  },
+})
+
+export default PanelContent