element3/types/cascader-panel.d.ts

A Component Library for Vue3

import { VNode, CreateElement } from 'vue'
import { ElementUIComponent } from './component'

/** Trigger mode of expanding current item */
export type ExpandTrigger = 'click' | 'hover'

/** Cascader Option */
export interface CascaderOption {
  label: string
  value: any
  children?: CascaderOption[]
  disabled?: boolean
  leaf?: boolean
}

/** Cascader Props */
export interface CascaderProps<V, D> {
  expandTrigger?: ExpandTrigger
  multiple?: boolean
  checkStrictly?: boolean
  emitPath?: boolean
  lazy?: boolean
  lazyLoad?: (node: CascaderNode<V, D>, resolve: Resolve<D>) => void
  value?: string
  label?: string
  children?: string
  disabled?: string
  leaf?: string
}

/** Cascader Node */
export interface CascaderNode<V, D> {
  uid: number
  data: D
  value: V
  label: string
  level: number
  isDisabled: boolean
  isLeaf: boolean
  parent: CascaderNode<V, D> | null
  children: CascaderNode<V, D>[]
  config: CascaderProps<V, D>
}

type Resolve<D> = (dataList?: D[]) => void

export interface CascaderPanelSlots {
  /** Custom label content */
  default: VNode[]

  [key: string]: VNode[]
}

export const ElCascaderPanel: ICascaderPanel
/** CascaderPanel Component */
interface ICascaderPanel<V = any, D = CascaderOption>
  extends ElementUIComponent {
  /** Selected value */
  value: V | V[]

  /** Data of the options */
  options: D[]

  /** Configuration options */
  props: CascaderProps<V, D>

  /** Whether to add border */
  border: boolean

  /** Render function of custom label content */
  renderLabel: (
    h: CreateElement,
    context: { node: CascaderNode<V, D>; data: D }
  ) => VNode

  $slots: CascaderPanelSlots
}