@v-c/collapse 0.0.4 → 1.0.0

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

package/src/hooks/useItems.tsx

@@ -1,202 +0,0 @@
-import type { VueNode } from '@v-c/util/dist/type'
-import type {
-  RendererElement,
-  RendererNode,
-  VNode,
-  VNodeNormalizedChildren,
-} from 'vue'
-import type {
-  CollapsePanelProps,
-  CollapseProps,
-  ItemType,
-  Key,
-} from '../interface'
-import { toArray } from '@v-c/util/dist/Children/toArray'
-import { isEmptyElement } from '@v-c/util/dist/props-util'
-import { cloneElement } from '@v-c/util/dist/vnode'
-import CollapsePanel from '../Panel'
-
-type Props = Pick<
-  CollapsePanelProps,
-  | 'prefixCls'
-  | 'onItemClick'
-  | 'openMotion'
-  | 'expandIcon'
-  | 'classNames'
-  | 'styles'
-> &
-Pick<CollapseProps, 'accordion' | 'collapsible' | 'destroyOnHidden'> & {
-  activeKey: Key[]
-}
-
-interface ChildrenSlots {
-  default?: () => VueNode
-}
-
-function convertItemsToNodes(items: ItemType[], props: Props) {
-  const {
-    prefixCls,
-    accordion,
-    collapsible,
-    onItemClick,
-    activeKey,
-    openMotion,
-    expandIcon,
-    destroyOnHidden,
-    classNames: collapseClassNames,
-    styles,
-  } = props
-
-  return items.map((item, index) => {
-    const {
-      label,
-      key: rawKey,
-      collapsible: rawCollapsible,
-      onItemClick: rawOnItemClick,
-      destroyOnHidden: rawDestroyOnHidden,
-      ...restProps
-    } = item
-
-    const key = String(rawKey ?? index)
-    const mergeCollapsible = rawCollapsible ?? collapsible
-    const mergedDestroyOnHidden = rawDestroyOnHidden ?? destroyOnHidden
-
-    const handleItemClick = (value: Key) => {
-      if (mergeCollapsible === 'disabled')
-        return
-
-      onItemClick?.(value)
-      rawOnItemClick?.(value)
-    }
-
-    let isActive = false
-
-    if (accordion) {
-      isActive = activeKey?.[0] === key
-    }
-    else {
-      isActive = activeKey.includes(key)
-    }
-
-    return (
-      <CollapsePanel
-        {...restProps}
-        classNames={collapseClassNames}
-        styles={styles}
-        prefixCls={prefixCls}
-        key={key}
-        panelKey={key}
-        isActive={isActive}
-        accordion={accordion}
-        openMotion={openMotion}
-        expandIcon={expandIcon}
-        header={label}
-        destroyOnHidden={mergedDestroyOnHidden}
-        collapsible={mergeCollapsible}
-        onItemClick={handleItemClick}
-      />
-    )
-  })
-}
-
-/**
- * @deprecated The next major version will be removed
- */
-function getNewChild(
-  child: VNode<RendererNode, RendererElement, CollapsePanelProps>,
-  index: number,
-  props: Props,
-) {
-  if (isEmptyElement(child) || !child)
-    return null
-
-  if (
-    typeof child === 'boolean'
-    || typeof child === 'number'
-    || typeof child === 'string'
-  ) {
-    return child
-  }
-
-  const {
-    prefixCls,
-    accordion,
-    collapsible,
-    onItemClick,
-    activeKey,
-    openMotion,
-    expandIcon,
-    classNames: collapseClassNames,
-    styles,
-    destroyOnHidden,
-  } = props
-
-  const key = child.key || String(index)
-
-  const {
-    header,
-    headerClass,
-    collapsible: childCollapsible,
-    onItemClick: childOnItemClick,
-    destroyOnHidden: childDestroyOnHidden,
-  } = child.props || {}
-
-  let isActive = false
-  if (accordion) {
-    isActive = activeKey[0] === key
-  }
-  else {
-    isActive = activeKey.includes(key as Key)
-  }
-
-  const mergeCollapsible = childCollapsible ?? collapsible
-
-  const handleItemClick = (value: Key) => {
-    if (mergeCollapsible === 'disabled')
-      return
-    onItemClick?.(value)
-    childOnItemClick?.(value)
-  }
-
-  const childProps = {
-    key,
-    panelKey: key,
-    header,
-    headerClass,
-    classNames: collapseClassNames,
-    styles,
-    isActive,
-    prefixCls,
-    destroyOnHidden: childDestroyOnHidden ?? destroyOnHidden,
-    openMotion,
-    accordion,
-    children: (child.children as ChildrenSlots)?.default?.(),
-    onItemClick: handleItemClick,
-    expandIcon,
-    collapsible: mergeCollapsible,
-  }
-
-  Object.keys(childProps).forEach((propName) => {
-    if (
-      typeof childProps[propName as keyof typeof childProps] === 'undefined'
-    ) {
-      delete childProps[propName as keyof typeof childProps]
-    }
-  })
-
-  return cloneElement(child, childProps)
-}
-
-export function useItems(
-  items?: ItemType[],
-  children?: () => VNode | VNodeNormalizedChildren,
-  props?: Props,
-) {
-  if (Array.isArray(items)) {
-    return convertItemsToNodes(items, props!)
-  }
-
-  return toArray(children?.()).map((target, index) =>
-    getNewChild(target, index, props!),
-  )
-}

package/src/index.ts

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

package/src/interface.ts

@@ -1,73 +0,0 @@
-import type { Key, VueNode } from '@v-c/util/dist/type'
-import type {
-  CSSProperties,
-  Ref,
-  TransitionProps,
-} from 'vue'
-
-export type SemanticName = 'header' | 'title' | 'body' | 'icon'
-
-export interface CollapsePanelProps {
-  id?: string
-  header?: VueNode
-  prefixCls?: string
-  headerClass?: string
-  showArrow?: boolean
-  class?: 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 type CollapsibleType = 'header' | 'icon' | 'disabled'
-
-export interface ItemType
-  extends Omit<
-    CollapsePanelProps,
-    | 'header' // alias of label
-    | 'prefixCls'
-    | 'panelKey' // alias of key
-    | 'isActive'
-    | 'accordion'
-    | 'openMotion'
-    | 'expandIcon'
-  > {
-  key?: CollapsePanelProps['panelKey']
-  label?: CollapsePanelProps['header']
-  ref?: Ref<HTMLDivElement>
-}
-
-export interface CollapseProps {
-  prefixCls?: string
-  activeKey?: Key | Key[]
-  defaultActiveKey?: Key | Key[]
-  openMotion?: TransitionProps
-  onChange?: (key: Key[]) => void
-  accordion?: boolean
-  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 type {
-  Key,
-}

package/tests/__snapshots__/index.test.tsx.snap

@@ -1,3 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`collapse > props items > should work with nested 1`] = ``;