@v-c/collapse 0.0.3 → 0.0.5

package/docs/simple.vue

@@ -1,218 +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 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/src/Collapse.tsx

@@ -1,110 +0,0 @@
-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,
-        destroyOnHidden,
-      } = 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,
-        destroyOnHidden,
-        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

@@ -1,178 +0,0 @@
-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'
-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,
-        class: className,
-        expandIcon,
-        forceRender,
-        headerClass,
-        collapsible,
-        accordion,
-        openMotion = {},
-        onItemClick,
-        classNames: customizeClassNames = {},
-        showArrow = true,
-        destroyOnHidden,
-        styles = {},
-        header,
-        panelKey,
-        children,
-        ...restProps
-      } = props
-
-      const collapsePanelClassNames = classnames(
-        `${prefixCls}-item`,
-        {
-          [`${prefixCls}-item-active`]: isActive,
-          [`${prefixCls}-item-disabled`]: disabled.value,
-        },
-        className,
-      )
-      const 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}>
-            { !destroyOnHidden || isActive ? panelContent : null}
-          </Transition>
-        </div>
-      )
-    }
-  },
-})
-
-export default CollapsePanel

package/src/PanelContent.tsx

@@ -1,63 +0,0 @@
-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,
-        class: 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