@v-c/collapse 0.0.1

package/src/hooks/useItems.tsx

@@ -0,0 +1,195 @@
+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'> & {
+  activeKey: Key[]
+}
+
+interface ChildrenSlots {
+  default?: () => VueNode
+}
+
+function convertItemsToNodes(items: ItemType[], props: Props) {
+  const {
+    prefixCls,
+    accordion,
+    collapsible,
+    onItemClick,
+    activeKey,
+    openMotion,
+    expandIcon,
+    classNames: collapseClassNames,
+    styles,
+  } = props
+
+  return items.map((item, index) => {
+    const {
+      label,
+      key: rawKey,
+      collapsible: rawCollapsible,
+      onItemClick: rawOnItemClick,
+      ...restProps
+    } = item
+
+    const key = String(rawKey ?? index)
+    const mergeCollapsible = rawCollapsible ?? collapsible
+
+    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}
+        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,
+  } = props
+
+  const key = child.key || String(index)
+
+  const {
+    header,
+    headerClass,
+    collapsible: childCollapsible,
+    onItemClick: childOnItemClick,
+  } = 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,
+    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

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

package/src/interface.ts

@@ -0,0 +1,147 @@
+import type { Key, VueNode } from '@v-c/util/dist/type'
+import type {
+  CSSProperties,
+  PropType,
+  Ref,
+  TransitionProps,
+  VNode,
+} from 'vue'
+
+export type CollapsibleType = 'header' | 'icon' | 'disabled'
+
+export type SemanticName = 'header' | 'title' | 'body' | 'icon'
+
+export function generatorCollapsePanelProps() {
+  return {
+    id: String,
+    header: [String, Object] as PropType<string | VNode>,
+    prefixCls: String,
+    headerClass: String,
+    showArrow: {
+      type: Boolean as PropType<boolean | undefined>,
+      default: true,
+    },
+    className: String,
+    classNames: {
+      type: Object as PropType<Partial<Record<SemanticName, string>>>,
+      default: () => ({}),
+    },
+    style: Object as PropType<Record<string, string>>,
+    styles: {
+      type: Object as PropType<Partial<Record<SemanticName, CSSProperties>>>,
+      default: () => ({}),
+    },
+    isActive: Boolean,
+    openMotion: Object as PropType<Partial<TransitionProps>>,
+    destroyInactivePanel: Boolean as PropType<boolean | undefined>,
+    accordion: Boolean,
+    forceRender: Boolean as PropType<boolean | undefined>,
+    onItemClick: Function as PropType<(props: Key) => void>,
+    extra: [String, Object] as PropType<string | VueNode>,
+    panelKey: [String, Number],
+    collapsible: String as PropType<CollapsibleType>,
+    expandIcon: Function as PropType<(props: any) => VueNode>,
+    role: String,
+    children: [Object, String] as 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' // alias of label
+    | 'prefixCls'
+    | 'panelKey' // alias of key
+    | 'isActive'
+    | 'accordion'
+    | 'openMotion'
+    | 'expandIcon'
+  > {
+  key?: CollapsePanelProps['panelKey']
+  label?: CollapsePanelProps['header']
+  children?: VueNode
+  ref?: Ref<HTMLDivElement>
+}
+
+export function generatorCollapseProps() {
+  return {
+    prefixCls: String,
+    activeKey: [String, Number, Array] as PropType<Key | Key[]>,
+    defaultActiveKey: [String, Number, Array] as PropType<Key | Key[]>,
+    openMotion: Object,
+    onChange: Function as PropType<(key: Key[]) => void>,
+    accordion: Boolean,
+    className: String,
+    classNames: Object as PropType<Partial<Record<SemanticName, string>>>,
+    style: Object,
+    styles: Object as PropType<Partial<Record<SemanticName, CSSProperties>>>,
+    destroyInactivePanel: Boolean,
+    expandIcon: Function as PropType<(props: any) => VueNode>,
+    collapsible: String as PropType<CollapsibleType>,
+    items: Array as 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 function generatorCollapsePanelContentProps() {
+  return {
+    isActive: Boolean,
+    prefixCls: String,
+    className: String,
+    classNames: Object as PropType<{ header?: string, body?: string }>,
+    style: Object as PropType<Record<string, string>>,
+    styles: Object as PropType<{
+      header?: CSSProperties
+      body?: CSSProperties
+    }>,
+    role: String,
+    forceRender: Boolean,
+  }
+}
+
+export type {
+  Key,
+}

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

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