@antsoo-lib/components 0.1.11 → 0.1.12

package/src/vc-cascader/OptionList/Column.tsx

@@ -1,182 +0,0 @@
-import type { Key } from '../../_util/type'
-import { cloneElement } from '../../_util/vnode'
-import type { DefaultOptionType, SingleValueType } from '../Cascader'
-import { useInjectCascader } from '../context'
-import { SEARCH_MARK } from '../hooks/useSearchOptions'
-import { isLeaf, toPathKey } from '../utils/commonUtil'
-import Checkbox from './Checkbox'
-
-export const FIX_LABEL = '__cascader_fix_label__'
-export interface ColumnProps {
-  prefixCls: string
-  multiple?: boolean
-  options: DefaultOptionType[]
-  /** Current Column opened item key */
-  activeValue?: Key
-  /** The value path before current column */
-  prevValuePath: Key[]
-  onToggleOpen: (open: boolean) => void
-  onSelect: (valuePath: SingleValueType, leaf: boolean) => void
-  onActive: (valuePath: SingleValueType) => void
-  checkedSet: Set<Key>
-  halfCheckedSet: Set<Key>
-  loadingKeys: Key[]
-  isSelectable: (option: DefaultOptionType) => boolean
-}
-
-export default function Column({
-  prefixCls,
-  multiple,
-  options,
-  activeValue,
-  prevValuePath,
-  onToggleOpen,
-  onSelect,
-  onActive,
-  checkedSet,
-  halfCheckedSet,
-  loadingKeys,
-  isSelectable,
-}: ColumnProps) {
-  const menuPrefixCls = `${prefixCls}-menu`
-  const menuItemPrefixCls = `${prefixCls}-menu-item`
-
-  const {
-    fieldNames,
-    changeOnSelect,
-    expandTrigger,
-    expandIcon: expandIconRef,
-    loadingIcon: loadingIconRef,
-    dropdownMenuColumnStyle,
-    customSlots,
-  } = useInjectCascader()
-  const expandIcon = expandIconRef.value ?? customSlots.value.expandIcon?.()
-  const loadingIcon = loadingIconRef.value ?? customSlots.value.loadingIcon?.()
-
-  const hoverOpen = expandTrigger.value === 'hover'
-  // ============================ Render ============================
-  return (
-    <ul class={menuPrefixCls} role="menu">
-      {options.map((option) => {
-        const { disabled } = option
-        const searchOptions = option[SEARCH_MARK]
-        const label = option[FIX_LABEL] ?? option[fieldNames.value.label]
-        const value = option[fieldNames.value.value]
-
-        const isMergedLeaf = isLeaf(option, fieldNames.value)
-
-        // Get real value of option. Search option is different way.
-        const fullPath = searchOptions
-          ? searchOptions.map((opt) => opt[fieldNames.value.value])
-          : [...prevValuePath, value]
-        const fullPathKey = toPathKey(fullPath)
-
-        const isLoading = loadingKeys.includes(fullPathKey)
-
-        // >>>>> checked
-        const checked = checkedSet.has(fullPathKey)
-
-        // >>>>> halfChecked
-        const halfChecked = halfCheckedSet.has(fullPathKey)
-        // >>>>> Open
-        const triggerOpenPath = () => {
-          if (!disabled && (!hoverOpen || !isMergedLeaf)) {
-            onActive(fullPath)
-          }
-        }
-
-        // >>>>> Selection
-        const triggerSelect = () => {
-          if (isSelectable(option)) {
-            onSelect(fullPath, isMergedLeaf)
-          }
-        }
-
-        // >>>>> Title
-        let title: string
-        if (typeof option.title === 'string') {
-          title = option.title
-        } else if (typeof label === 'string') {
-          title = label
-        }
-
-        // >>>>> Render
-        return (
-          <li
-            key={fullPathKey}
-            class={[
-              menuItemPrefixCls,
-              {
-                [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
-                [`${menuItemPrefixCls}-active`]: activeValue === value,
-                [`${menuItemPrefixCls}-disabled`]: disabled,
-                [`${menuItemPrefixCls}-loading`]: isLoading,
-              },
-            ]}
-            style={dropdownMenuColumnStyle.value}
-            role="menuitemcheckbox"
-            title={title}
-            aria-checked={checked}
-            data-path-key={fullPathKey}
-            onClick={() => {
-              triggerOpenPath()
-              if (!multiple || isMergedLeaf) {
-                triggerSelect()
-              }
-            }}
-            onDblclick={() => {
-              if (changeOnSelect.value) {
-                onToggleOpen(false)
-              }
-            }}
-            onMouseenter={() => {
-              if (hoverOpen) {
-                triggerOpenPath()
-              }
-            }}
-            onMousedown={(e) => {
-              // Prevent selector from blurring
-              e.preventDefault()
-            }}
-          >
-            {multiple && (
-              <Checkbox
-                prefixCls={`${prefixCls}-checkbox`}
-                checked={checked}
-                halfChecked={halfChecked}
-                disabled={disabled}
-                onClick={(e: MouseEvent) => {
-                  e.stopPropagation()
-                  triggerSelect()
-                }}
-              />
-            )}
-            <div class={`${menuItemPrefixCls}-content`}>{label}</div>
-            {!isLoading && expandIcon && !isMergedLeaf && (
-              <div class={`${menuItemPrefixCls}-expand-icon`}>{cloneElement(expandIcon)}</div>
-            )}
-            {isLoading && loadingIcon && (
-              <div class={`${menuItemPrefixCls}-loading-icon`}>{cloneElement(loadingIcon)}</div>
-            )}
-          </li>
-        )
-      })}
-    </ul>
-  )
-}
-Column.props = [
-  'prefixCls',
-  'multiple',
-  'options',
-  'activeValue',
-  'prevValuePath',
-  'onToggleOpen',
-  'onSelect',
-  'onActive',
-  'checkedSet',
-  'halfCheckedSet',
-  'loadingKeys',
-  'isSelectable',
-]
-Column.displayName = 'Column'
-Column.inheritAttrs = false

package/src/vc-cascader/OptionList/index.tsx

@@ -1,246 +0,0 @@
-import { computed, defineComponent, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
-
-import type { EventHandler } from '../../_util/EventInterface'
-import type { Key } from '../../_util/type'
-import { useBaseProps } from '../../vc-select'
-import type { DefaultOptionType, SingleValueType } from '../Cascader'
-import { useInjectCascader } from '../context'
-import {
-  isLeaf,
-  scrollIntoParentView,
-  toPathKey,
-  toPathKeys,
-  toPathValueStr,
-} from '../utils/commonUtil'
-import { toPathOptions } from '../utils/treeUtil'
-import Column, { FIX_LABEL } from './Column'
-import useActive from './useActive'
-import useKeyboard from './useKeyboard'
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'OptionList',
-  inheritAttrs: false,
-  setup(_props, context) {
-    const { attrs, slots } = context
-    const baseProps = useBaseProps()
-    const containerRef = ref<HTMLDivElement>()
-    const rtl = computed(() => baseProps.direction === 'rtl')
-    const {
-      options,
-      values,
-      halfValues,
-      fieldNames,
-      changeOnSelect,
-      onSelect,
-      searchOptions,
-      dropdownPrefixCls,
-      loadData,
-      expandTrigger,
-      customSlots,
-    } = useInjectCascader()
-
-    const mergedPrefixCls = computed(() => dropdownPrefixCls.value || baseProps.prefixCls)
-
-    // ========================= loadData =========================
-    const loadingKeys = shallowRef<string[]>([])
-    const internalLoadData = (valueCells: Key[]) => {
-      // Do not load when search
-      if (!loadData.value || baseProps.searchValue) {
-        return
-      }
-
-      const optionList = toPathOptions(valueCells, options.value, fieldNames.value)
-      const rawOptions = optionList.map(({ option }) => option)
-      const lastOption = rawOptions[rawOptions.length - 1]
-
-      if (lastOption && !isLeaf(lastOption, fieldNames.value)) {
-        const pathKey = toPathKey(valueCells)
-
-        loadingKeys.value = [...loadingKeys.value, pathKey]
-        loadData.value(rawOptions)
-      }
-    }
-
-    watchEffect(() => {
-      if (loadingKeys.value.length) {
-        loadingKeys.value.forEach((loadingKey) => {
-          const valueStrCells = toPathValueStr(loadingKey)
-          const optionList = toPathOptions(
-            valueStrCells,
-            options.value,
-            fieldNames.value,
-            true,
-          ).map(({ option }) => option)
-          const lastOption = optionList[optionList.length - 1]
-
-          if (
-            !lastOption ||
-            lastOption[fieldNames.value.children] ||
-            isLeaf(lastOption, fieldNames.value)
-          ) {
-            loadingKeys.value = loadingKeys.value.filter((key) => key !== loadingKey)
-          }
-        })
-      }
-    })
-
-    // ========================== Values ==========================
-    const checkedSet = computed(() => new Set(toPathKeys(values.value)))
-    const halfCheckedSet = computed(() => new Set(toPathKeys(halfValues.value)))
-
-    // ====================== Accessibility =======================
-    const [activeValueCells, setActiveValueCells] = useActive()
-
-    // =========================== Path ===========================
-    const onPathOpen = (nextValueCells: Key[]) => {
-      setActiveValueCells(nextValueCells)
-
-      // Trigger loadData
-      internalLoadData(nextValueCells)
-    }
-
-    const isSelectable = (option: DefaultOptionType) => {
-      const { disabled } = option
-
-      const isMergedLeaf = isLeaf(option, fieldNames.value)
-      return !disabled && (isMergedLeaf || changeOnSelect.value || baseProps.multiple)
-    }
-
-    const onPathSelect = (valuePath: SingleValueType, leaf: boolean, fromKeyboard = false) => {
-      onSelect(valuePath)
-
-      if (
-        !baseProps.multiple &&
-        (leaf || (changeOnSelect.value && (expandTrigger.value === 'hover' || fromKeyboard)))
-      ) {
-        baseProps.toggleOpen(false)
-      }
-    }
-
-    // ========================== Option ==========================
-    const mergedOptions = computed(() => {
-      if (baseProps.searchValue) {
-        return searchOptions.value
-      }
-
-      return options.value
-    })
-
-    // ========================== Column ==========================
-    const optionColumns = computed(() => {
-      const optionList = [{ options: mergedOptions.value }]
-      let currentList = mergedOptions.value
-      for (let i = 0; i < activeValueCells.value.length; i += 1) {
-        const activeValueCell = activeValueCells.value[i]
-        const currentOption = currentList.find(
-          (option) => option[fieldNames.value.value] === activeValueCell,
-        )
-
-        const subOptions = currentOption?.[fieldNames.value.children]
-        if (!subOptions?.length) {
-          break
-        }
-
-        currentList = subOptions
-        optionList.push({ options: subOptions })
-      }
-
-      return optionList
-    })
-
-    // ========================= Keyboard =========================
-    const onKeyboardSelect = (selectValueCells: SingleValueType, option: DefaultOptionType) => {
-      if (isSelectable(option)) {
-        onPathSelect(selectValueCells, isLeaf(option, fieldNames.value), true)
-      }
-    }
-
-    useKeyboard(context, mergedOptions, fieldNames, activeValueCells, onPathOpen, onKeyboardSelect)
-    const onListMouseDown: EventHandler = (event) => {
-      event.preventDefault()
-    }
-    onMounted(() => {
-      watch(
-        activeValueCells,
-        (cells) => {
-          for (let i = 0; i < cells.length; i += 1) {
-            const cellPath = cells.slice(0, i + 1)
-            const cellKeyPath = toPathKey(cellPath)
-            const ele = containerRef.value?.querySelector<HTMLElement>(
-              `li[data-path-key="${cellKeyPath.replace(/\\{0,2}"/g, '\\"')}"]`, // matches unescaped double quotes
-            )
-            if (ele) {
-              scrollIntoParentView(ele)
-            }
-          }
-        },
-        { flush: 'post', immediate: true },
-      )
-    })
-
-    return () => {
-      // ========================== Render ==========================
-      const {
-        notFoundContent = slots.notFoundContent?.() || customSlots.value.notFoundContent?.(),
-        multiple,
-        toggleOpen,
-      } = baseProps
-      // >>>>> Empty
-      const isEmpty = !optionColumns.value[0]?.options?.length
-
-      const emptyList: DefaultOptionType[] = [
-        {
-          [fieldNames.value.value as 'value']: '__EMPTY__',
-          [FIX_LABEL as 'label']: notFoundContent,
-          disabled: true,
-        },
-      ]
-      const columnProps = {
-        ...attrs,
-        multiple: !isEmpty && multiple,
-        onSelect: onPathSelect,
-        onActive: onPathOpen,
-        onToggleOpen: toggleOpen,
-        checkedSet: checkedSet.value,
-        halfCheckedSet: halfCheckedSet.value,
-        loadingKeys: loadingKeys.value,
-        isSelectable,
-      }
-
-      // >>>>> Columns
-      const mergedOptionColumns = isEmpty ? [{ options: emptyList }] : optionColumns.value
-
-      const columnNodes = mergedOptionColumns.map((col, index) => {
-        const prevValuePath = activeValueCells.value.slice(0, index)
-        const activeValue = activeValueCells.value[index]
-
-        return (
-          <Column
-            key={index}
-            {...columnProps}
-            prefixCls={mergedPrefixCls.value}
-            options={col.options}
-            prevValuePath={prevValuePath}
-            activeValue={activeValue}
-          />
-        )
-      })
-      return (
-        <div
-          class={[
-            `${mergedPrefixCls.value}-menus`,
-            {
-              [`${mergedPrefixCls.value}-menu-empty`]: isEmpty,
-              [`${mergedPrefixCls.value}-rtl`]: rtl.value,
-            },
-          ]}
-          onMousedown={onListMouseDown}
-          ref={containerRef}
-        >
-          {columnNodes}
-        </div>
-      )
-    }
-  },
-})

package/src/vc-cascader/OptionList/useActive.ts

@@ -1,32 +0,0 @@
-import type { Ref } from 'vue'
-import { watch } from 'vue'
-
-import useState from '../../_util/hooks/useState'
-import type { Key } from '../../_util/type'
-import { useBaseProps } from '../../vc-select'
-import { useInjectCascader } from '../context'
-
-/**
- * Control the active open options path.
- */
-export default (): [Ref<Key[]>, (activeValueCells: Key[]) => void] => {
-  const baseProps = useBaseProps()
-  const { values } = useInjectCascader()
-
-  // Record current dropdown active options
-  // This also control the open status
-  const [activeValueCells, setActiveValueCells] = useState<Key[]>([])
-
-  watch(
-    () => baseProps.open,
-    () => {
-      if (baseProps.open && !baseProps.multiple) {
-        const firstValueCells = values.value[0]
-        setActiveValueCells(firstValueCells || [])
-      }
-    },
-    { immediate: true },
-  )
-
-  return [activeValueCells, setActiveValueCells]
-}

package/src/vc-cascader/OptionList/useKeyboard.ts

@@ -1,194 +0,0 @@
-import type { Ref, SetupContext } from 'vue'
-import { computed, ref, watchEffect } from 'vue'
-
-import KeyCode from '../../_util/KeyCode'
-import type { Key } from '../../_util/type'
-import { useBaseProps } from '../../vc-select'
-import type { RefOptionListProps } from '../../vc-select/OptionList'
-import type { DefaultOptionType, InternalFieldNames, SingleValueType } from '../Cascader'
-import { SEARCH_MARK } from '../hooks/useSearchOptions'
-
-export default (
-  context: SetupContext,
-  options: Ref<DefaultOptionType[]>,
-  fieldNames: Ref<InternalFieldNames>,
-  activeValueCells: Ref<Key[]>,
-  setActiveValueCells: (activeValueCells: Key[]) => void,
-  // containerRef: Ref<HTMLElement>,
-  onKeyBoardSelect: (valueCells: SingleValueType, option: DefaultOptionType) => void,
-) => {
-  const baseProps = useBaseProps()
-  const rtl = computed(() => baseProps.direction === 'rtl')
-  const [validActiveValueCells, lastActiveIndex, lastActiveOptions] = [
-    ref<Key[]>([]),
-    ref<number>(),
-    ref<DefaultOptionType[]>([]),
-  ]
-  watchEffect(() => {
-    let activeIndex = -1
-    let currentOptions = options.value
-
-    const mergedActiveIndexes: number[] = []
-    const mergedActiveValueCells: Key[] = []
-
-    const len = activeValueCells.value.length
-    // Fill validate active value cells and index
-    for (let i = 0; i < len && currentOptions; i += 1) {
-      // Mark the active index for current options
-      const nextActiveIndex = currentOptions.findIndex(
-        (option) => option[fieldNames.value.value] === activeValueCells.value[i],
-      )
-
-      if (nextActiveIndex === -1) {
-        break
-      }
-
-      activeIndex = nextActiveIndex
-      mergedActiveIndexes.push(activeIndex)
-      mergedActiveValueCells.push(activeValueCells.value[i])
-
-      currentOptions = currentOptions[activeIndex][fieldNames.value.children]
-    }
-
-    // Fill last active options
-    let activeOptions = options.value
-    for (let i = 0; i < mergedActiveIndexes.length - 1; i += 1) {
-      activeOptions = activeOptions[mergedActiveIndexes[i]][fieldNames.value.children]
-    }
-
-    ;[validActiveValueCells.value, lastActiveIndex.value, lastActiveOptions.value] = [
-      mergedActiveValueCells,
-      activeIndex,
-      activeOptions,
-    ]
-  })
-
-  // Update active value cells and scroll to target element
-  const internalSetActiveValueCells = (next: Key[]) => {
-    setActiveValueCells(next)
-  }
-
-  // Same options offset
-  const offsetActiveOption = (offset: number) => {
-    const len = lastActiveOptions.value.length
-
-    let currentIndex = lastActiveIndex.value
-    if (currentIndex === -1 && offset < 0) {
-      currentIndex = len
-    }
-
-    for (let i = 0; i < len; i += 1) {
-      currentIndex = (currentIndex + offset + len) % len
-      const option = lastActiveOptions.value[currentIndex]
-
-      if (option && !option.disabled) {
-        const value = option[fieldNames.value.value]
-        const nextActiveCells = validActiveValueCells.value.slice(0, -1).concat(value)
-        internalSetActiveValueCells(nextActiveCells)
-        return
-      }
-    }
-  }
-
-  // Different options offset
-  const prevColumn = () => {
-    if (validActiveValueCells.value.length > 1) {
-      const nextActiveCells = validActiveValueCells.value.slice(0, -1)
-      internalSetActiveValueCells(nextActiveCells)
-    } else {
-      baseProps.toggleOpen(false)
-    }
-  }
-
-  const nextColumn = () => {
-    const nextOptions: DefaultOptionType[] =
-      lastActiveOptions.value[lastActiveIndex.value]?.[fieldNames.value.children] || []
-
-    const nextOption = nextOptions.find((option) => !option.disabled)
-
-    if (nextOption) {
-      const nextActiveCells = [...validActiveValueCells.value, nextOption[fieldNames.value.value]]
-      internalSetActiveValueCells(nextActiveCells)
-    }
-  }
-
-  context.expose({
-    // scrollTo: treeRef.current?.scrollTo,
-    onKeydown: (event) => {
-      const { which } = event
-
-      switch (which) {
-        // >>> Arrow keys
-        case KeyCode.UP:
-        case KeyCode.DOWN: {
-          let offset = 0
-          if (which === KeyCode.UP) {
-            offset = -1
-          } else if (which === KeyCode.DOWN) {
-            offset = 1
-          }
-
-          if (offset !== 0) {
-            offsetActiveOption(offset)
-          }
-
-          break
-        }
-
-        case KeyCode.LEFT: {
-          if (rtl.value) {
-            nextColumn()
-          } else {
-            prevColumn()
-          }
-          break
-        }
-
-        case KeyCode.RIGHT: {
-          if (rtl.value) {
-            prevColumn()
-          } else {
-            nextColumn()
-          }
-          break
-        }
-
-        case KeyCode.BACKSPACE: {
-          if (!baseProps.searchValue) {
-            prevColumn()
-          }
-          break
-        }
-
-        // >>> Select
-        case KeyCode.ENTER: {
-          if (validActiveValueCells.value.length) {
-            const option = lastActiveOptions.value[lastActiveIndex.value]
-
-            // Search option should revert back of origin options
-            const originOptions: DefaultOptionType[] = option?.[SEARCH_MARK] || []
-            if (originOptions.length) {
-              onKeyBoardSelect(
-                originOptions.map((opt) => opt[fieldNames.value.value]),
-                originOptions[originOptions.length - 1],
-              )
-            } else {
-              onKeyBoardSelect(validActiveValueCells.value, option)
-            }
-          }
-          break
-        }
-
-        // >>> Close
-        case KeyCode.ESC: {
-          baseProps.toggleOpen(false)
-
-          if (open) {
-            event.stopPropagation()
-          }
-        }
-      }
-    },
-    onKeyup: () => {},
-  } as RefOptionListProps)
-}

package/src/vc-cascader/context.ts

@@ -1,37 +0,0 @@
-import type { CSSProperties, InjectionKey, Ref } from 'vue'
-import { inject, provide } from 'vue'
-
-import type { VueNode } from '../_util/type'
-import type {
-  BaseCascaderProps,
-  DefaultOptionType,
-  InternalFieldNames,
-  SingleValueType,
-} from './Cascader'
-
-export interface CascaderContextProps {
-  options: Ref<BaseCascaderProps['options']>
-  fieldNames: Ref<InternalFieldNames>
-  values: Ref<SingleValueType[]>
-  halfValues: Ref<SingleValueType[]>
-  changeOnSelect: Ref<boolean>
-  onSelect: (valuePath: SingleValueType) => void
-  checkable: Ref<boolean | VueNode>
-  searchOptions: Ref<DefaultOptionType[]>
-  dropdownPrefixCls?: Ref<string>
-  loadData: Ref<(selectOptions: DefaultOptionType[]) => void>
-  expandTrigger: Ref<'hover' | 'click'>
-  expandIcon: Ref<VueNode>
-  loadingIcon: Ref<VueNode>
-  dropdownMenuColumnStyle: Ref<CSSProperties>
-  customSlots: Ref<Record<string, Function>>
-}
-
-const CascaderContextKey: InjectionKey<CascaderContextProps> = Symbol('CascaderContextKey')
-export const useProvideCascader = (props: CascaderContextProps) => {
-  provide(CascaderContextKey, props)
-}
-
-export const useInjectCascader = () => {
-  return inject(CascaderContextKey)
-}