@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-select/hooks/useFilterOptions.ts

@@ -0,0 +1,87 @@
+import type { Ref, ShallowRef } from 'vue'
+import { computed } from 'vue'
+
+import type {
+  BaseOptionType,
+  DefaultOptionType,
+  FieldNames,
+  FilterFunc,
+  SelectProps,
+} from '../Select'
+import { toArray } from '../utils/commonUtil'
+import { injectPropsWithOption } from '../utils/valueUtil'
+
+function includes(test: any, search: string) {
+  return toArray(test).join('').toUpperCase().includes(search)
+}
+
+export default (
+  options: ShallowRef<DefaultOptionType[]>,
+  fieldNames: Ref<FieldNames>,
+  searchValue?: Ref<string>,
+  filterOption?: Ref<SelectProps['filterOption']>,
+  optionFilterProp?: Ref<string>,
+) =>
+  computed(() => {
+    const searchValueVal = searchValue.value
+    const optionFilterPropValue = optionFilterProp?.value
+    const filterOptionValue = filterOption?.value
+    if (!searchValueVal || filterOptionValue === false) {
+      return options.value
+    }
+    const { options: fieldOptions, label: fieldLabel, value: fieldValue } = fieldNames.value
+    const filteredOptions: DefaultOptionType[] = []
+
+    const customizeFilter = typeof filterOptionValue === 'function'
+
+    const upperSearch = searchValueVal.toUpperCase()
+    const filterFunc = customizeFilter
+      ? (filterOptionValue as FilterFunc<BaseOptionType>)
+      : (_: string, option: DefaultOptionType) => {
+          // Use provided `optionFilterProp`
+          if (optionFilterPropValue) {
+            return includes(option[optionFilterPropValue], upperSearch)
+          }
+
+          // Auto select `label` or `value` by option type
+          if (option[fieldOptions]) {
+            // hack `fieldLabel` since `OptionGroup` children is not `label`
+            return includes(option[fieldLabel !== 'children' ? fieldLabel : 'label'], upperSearch)
+          }
+
+          return includes(option[fieldValue], upperSearch)
+        }
+
+    const wrapOption: (opt: DefaultOptionType) => DefaultOptionType = customizeFilter
+      ? (opt) => injectPropsWithOption(opt)
+      : (opt) => opt
+
+    options.value.forEach((item) => {
+      // Group should check child options
+      if (item[fieldOptions]) {
+        // Check group first
+        const matchGroup = filterFunc(searchValueVal, wrapOption(item))
+        if (matchGroup) {
+          filteredOptions.push(item)
+        } else {
+          // Check option
+          const subOptions = item[fieldOptions].filter((subItem: DefaultOptionType) =>
+            filterFunc(searchValueVal, wrapOption(subItem)),
+          )
+          if (subOptions.length) {
+            filteredOptions.push({
+              ...item,
+              [fieldOptions]: subOptions,
+            })
+          }
+        }
+
+        return
+      }
+
+      if (filterFunc(searchValueVal, wrapOption(item))) {
+        filteredOptions.push(item)
+      }
+    })
+    return filteredOptions
+  })

package/src/vc-select/hooks/useId.ts

@@ -0,0 +1,31 @@
+import { ref } from 'vue'
+
+import canUseDom from '../../_util/canUseDom'
+
+let uuid = 0
+
+/** Is client side and not jsdom */
+export const isBrowserClient = process.env.NODE_ENV !== 'test' && canUseDom()
+
+/** Get unique id for accessibility usage */
+export function getUUID(): number | string {
+  let retId: string | number
+
+  // Test never reach
+  /* istanbul ignore if */
+  if (isBrowserClient) {
+    retId = uuid
+    uuid += 1
+  } else {
+    retId = 'TEST_OR_SSR'
+  }
+
+  return retId
+}
+
+export default function useId(id = ref('')) {
+  // Inner id for accessibility usage. Only work in client side
+  const innerId = `rc_select_${getUUID()}`
+
+  return id.value || innerId
+}

package/src/vc-select/hooks/useLock.ts

@@ -0,0 +1,29 @@
+import { onBeforeUnmount } from 'vue'
+
+/**
+ * Locker return cached mark.
+ * If set to `true`, will return `true` in a short time even if set `false`.
+ * If set to `false` and then set to `true`, will change to `true`.
+ * And after time duration, it will back to `null` automatically.
+ */
+export default function useLock(duration = 250): [() => boolean | null, (lock: boolean) => void] {
+  let lock: boolean | null = null
+  let timeout: any
+
+  onBeforeUnmount(() => {
+    clearTimeout(timeout)
+  })
+
+  function doLock(locked: boolean) {
+    if (locked || lock === null) {
+      lock = locked
+    }
+
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      lock = null
+    }, duration)
+  }
+
+  return [() => lock, doLock]
+}

package/src/vc-select/hooks/useOptions.ts

@@ -0,0 +1,59 @@
+import type { Ref } from 'vue'
+import { shallowRef, toRaw, watch, watchEffect } from 'vue'
+
+import type { FieldNames, RawValueType } from '../Select'
+import { convertChildrenToData } from '../utils/legacyUtil'
+
+/**
+ * Parse `children` to `options` if `options` is not provided.
+ * Then flatten the `options`.
+ */
+export default function useOptions<OptionType>(
+  options: Ref<OptionType[]>,
+  children: Ref<any>,
+  fieldNames: Ref<FieldNames>,
+) {
+  const mergedOptions = shallowRef()
+  const valueOptions = shallowRef()
+  const labelOptions = shallowRef()
+  const tempMergedOptions = shallowRef([])
+  watch(
+    [options, children],
+    () => {
+      if (options.value) {
+        tempMergedOptions.value = toRaw(options.value).slice()
+      } else {
+        tempMergedOptions.value = convertChildrenToData(children.value)
+      }
+    },
+    { immediate: true, deep: true },
+  )
+  watchEffect(() => {
+    const newOptions = tempMergedOptions.value
+
+    const newValueOptions = new Map<RawValueType, OptionType>()
+    const newLabelOptions = new Map<any, OptionType>()
+    const fieldNamesValue = fieldNames.value
+    function dig(optionList: OptionType[], isChildren = false) {
+      // for loop to speed up collection speed
+      for (let i = 0; i < optionList.length; i += 1) {
+        const option = optionList[i]
+        if (!option[fieldNamesValue.options] || isChildren) {
+          newValueOptions.set(option[fieldNamesValue.value], option)
+          newLabelOptions.set(option[fieldNamesValue.label], option)
+        } else {
+          dig(option[fieldNamesValue.options], true)
+        }
+      }
+    }
+    dig(newOptions)
+    mergedOptions.value = newOptions
+    valueOptions.value = newValueOptions
+    labelOptions.value = newLabelOptions
+  })
+  return {
+    options: mergedOptions,
+    valueOptions,
+    labelOptions,
+  }
+}

package/src/vc-select/hooks/useSelectTriggerControl.ts

@@ -0,0 +1,32 @@
+import type { Ref } from 'vue'
+import { onBeforeUnmount, onMounted } from 'vue'
+
+export default function useSelectTriggerControl(
+  refs: Ref[],
+  open: Ref<boolean>,
+  triggerOpen: (open: boolean) => void,
+) {
+  function onGlobalMouseDown(event: MouseEvent) {
+    let target = event.target as HTMLElement
+
+    if (target.shadowRoot && event.composed) {
+      target = (event.composedPath()[0] || target) as HTMLElement
+    }
+    const elements = [refs[0]?.value, refs[1]?.value?.getPopupElement()]
+    if (
+      open.value &&
+      elements.every((element) => element && !element.contains(target) && element !== target)
+    ) {
+      // Should trigger close
+      triggerOpen(false)
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('mousedown', onGlobalMouseDown)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('mousedown', onGlobalMouseDown)
+  })
+}

package/src/vc-select/index.ts

@@ -0,0 +1,13 @@
+// base rc-select 14.1.1
+import BaseSelect from './BaseSelect'
+import type { BaseSelectProps, BaseSelectPropsWithoutPrivate, BaseSelectRef } from './BaseSelect'
+import OptGroup from './OptGroup'
+import Option from './Option'
+import type { SelectProps } from './Select'
+import Select, { selectProps } from './Select'
+import useBaseProps from './hooks/useBaseProps'
+
+export { BaseSelect, OptGroup, Option, selectProps, useBaseProps }
+export type { BaseSelectProps, BaseSelectPropsWithoutPrivate, BaseSelectRef, SelectProps }
+
+export default Select

package/src/vc-select/interface.ts

@@ -0,0 +1,11 @@
+import type { Key } from '../_util/type'
+import type { RawValueType } from './BaseSelect'
+
+export interface FlattenOptionData<OptionType> {
+  label?: any
+  data: OptionType
+  key: Key
+  value?: RawValueType
+  groupOption?: boolean
+  group?: boolean
+}

package/src/vc-select/utils/commonUtil.ts

@@ -0,0 +1,12 @@
+export function toArray<T>(value: T | T[]): T[] {
+  if (Array.isArray(value)) {
+    return value
+  }
+  return value !== undefined ? [value] : []
+}
+
+export const isClient =
+  typeof window !== 'undefined' && window.document && window.document.documentElement
+
+/** Is client side and not jsdom */
+export const isBrowserClient = process.env.NODE_ENV !== 'test' && isClient

package/src/vc-select/utils/keyUtil.ts

@@ -0,0 +1,34 @@
+import KeyCode from '../../_util/KeyCode'
+
+/** keyCode Judgment function */
+export function isValidateOpenKey(currentKeyCode: number): boolean {
+  return ![
+    // System function button
+    KeyCode.ESC,
+    KeyCode.SHIFT,
+    KeyCode.BACKSPACE,
+    KeyCode.TAB,
+    KeyCode.WIN_KEY,
+    KeyCode.ALT,
+    KeyCode.META,
+    KeyCode.WIN_KEY_RIGHT,
+    KeyCode.CTRL,
+    KeyCode.SEMICOLON,
+    KeyCode.EQUALS,
+    KeyCode.CAPS_LOCK,
+    KeyCode.CONTEXT_MENU,
+    // F1-F12
+    KeyCode.F1,
+    KeyCode.F2,
+    KeyCode.F3,
+    KeyCode.F4,
+    KeyCode.F5,
+    KeyCode.F6,
+    KeyCode.F7,
+    KeyCode.F8,
+    KeyCode.F9,
+    KeyCode.F10,
+    KeyCode.F11,
+    KeyCode.F12,
+  ].includes(currentKeyCode)
+}

package/src/vc-select/utils/legacyUtil.ts

@@ -0,0 +1,62 @@
+import type { VNode } from 'vue'
+
+import { flattenChildren, isValidElement } from '../../_util/props-util'
+import type { VueNode } from '../../_util/type'
+import type { BaseOptionType, DefaultOptionType } from '../Select'
+
+function convertNodeToOption<OptionType extends BaseOptionType = DefaultOptionType>(
+  node: VNode,
+): OptionType {
+  const {
+    key,
+    children,
+    props: { value, disabled, ...restProps },
+  } = node as Omit<VNode, 'key'> & {
+    children: { default?: () => any }
+    key: string | number
+  }
+  const child = children?.default
+  return {
+    key,
+    value: value !== undefined ? value : key,
+    children: child,
+    disabled: disabled || disabled === '', // support <a-select-option disabled />
+    ...(restProps as any),
+  }
+}
+
+export function convertChildrenToData<OptionType extends BaseOptionType = DefaultOptionType>(
+  nodes: VueNode[],
+  optionOnly = false,
+): OptionType[] {
+  const dd = flattenChildren(nodes as [])
+    .map((node: VNode, index: number): OptionType | null => {
+      if (!isValidElement(node) || !node.type) {
+        return null
+      }
+
+      const {
+        type: { isSelectOptGroup },
+        key,
+        children,
+        props,
+      } = node as VNode & {
+        type: { isSelectOptGroup?: boolean }
+        children: { default?: () => any; label?: () => any }
+      }
+
+      if (optionOnly || !isSelectOptGroup) {
+        return convertNodeToOption(node)
+      }
+      const child = children && children.default ? children.default() : undefined
+      const label = props?.label || children.label?.() || key
+      return {
+        key: `__RC_SELECT_GRP__${key === null ? index : String(key)}__`,
+        ...props,
+        label,
+        options: convertChildrenToData(child || []),
+      } as any
+    })
+    .filter((data) => data)
+  return dd
+}

package/src/vc-select/utils/platformUtil.ts

@@ -0,0 +1,4 @@
+/* istanbul ignore file */
+export function isPlatformMac(): boolean {
+  return /(mac\sos|macintosh)/i.test(navigator.appVersion)
+}

package/src/vc-select/utils/valueUtil.ts

@@ -0,0 +1,130 @@
+import { warning } from '../../vc-util/warning'
+import type { BaseOptionType, DefaultOptionType, FieldNames, RawValueType } from '../Select'
+import type { FlattenOptionData } from '../interface'
+
+function getKey(data: BaseOptionType, index: number, fieldNames?: FieldNames) {
+  const { key } = data
+  let value: RawValueType
+
+  if (fieldNames && fieldNames.value && data[fieldNames.value] !== undefined) {
+    ;({ [fieldNames.value]: value } = data)
+  } else if ('value' in data) {
+    ;({ value } = data)
+  }
+
+  if (key !== null && key !== undefined) {
+    return key
+  }
+  if (value !== undefined) {
+    return value
+  }
+  return `rc-index-key-${index}`
+}
+
+export function fillFieldNames(fieldNames: FieldNames | undefined, childrenAsData: boolean) {
+  const { label, value, options } = fieldNames || {}
+
+  return {
+    label: label || (childrenAsData ? 'children' : 'label'),
+    value: value || 'value',
+    options: options || 'options',
+  }
+}
+
+/**
+ * Flat options into flatten list.
+ * We use `optionOnly` here is aim to avoid user use nested option group.
+ * Here is simply set `key` to the index if not provided.
+ */
+export function flattenOptions<OptionType extends BaseOptionType = DefaultOptionType>(
+  options: OptionType[],
+  { fieldNames, childrenAsData }: { fieldNames?: FieldNames; childrenAsData?: boolean } = {},
+): FlattenOptionData<OptionType>[] {
+  const flattenList: FlattenOptionData<OptionType>[] = []
+
+  const {
+    label: fieldLabel,
+    value: fieldValue,
+    options: fieldOptions,
+  } = fillFieldNames(fieldNames, false)
+
+  function dig(list: OptionType[], isGroupOption: boolean) {
+    list.forEach((data) => {
+      const label = data[fieldLabel]
+
+      if (isGroupOption || !(fieldOptions in data)) {
+        const value = data[fieldValue]
+        // Option
+        flattenList.push({
+          key: getKey(data, flattenList.length, fieldNames),
+          groupOption: isGroupOption,
+          data,
+          label,
+          value,
+        })
+      } else {
+        let grpLabel = label
+        if (grpLabel === undefined && childrenAsData) {
+          grpLabel = data.label
+        }
+        // Option Group
+        flattenList.push({
+          key: getKey(data, flattenList.length, fieldNames),
+          group: true,
+          data,
+          label: grpLabel,
+        })
+
+        dig(data[fieldOptions], true)
+      }
+    })
+  }
+
+  dig(options, false)
+
+  return flattenList
+}
+
+/**
+ * Inject `props` into `option` for legacy usage
+ */
+export function injectPropsWithOption<T extends object>(option: T): T {
+  const newOption = { ...option }
+  if (!('props' in newOption)) {
+    Object.defineProperty(newOption, 'props', {
+      get() {
+        warning(
+          false,
+          'Return type is option instead of Option instance. Please read value directly instead of reading from `props`.',
+        )
+        return newOption
+      },
+    })
+  }
+
+  return newOption
+}
+
+export function getSeparatedContent(text: string, tokens: string[]): string[] {
+  if (!tokens || !tokens.length) {
+    return null
+  }
+
+  let match = false
+
+  function separate(str: string, [token, ...restTokens]: string[]) {
+    if (!token) {
+      return [str]
+    }
+
+    const list = str.split(token)
+    match = match || list.length > 1
+
+    return list
+      .reduce((prevList, unitStr) => [...prevList, ...separate(unitStr, restTokens)], [])
+      .filter((unit) => unit)
+  }
+
+  const list = separate(text, tokens)
+  return match ? list : null
+}

package/src/vc-select/utils/warningPropsUtil.ts

@@ -0,0 +1,136 @@
+import type { VNode } from 'vue'
+
+import { isValidElement } from '../../_util/props-util'
+import warning, { noteOnce } from '../../vc-util/warning'
+import { isMultiple } from '../BaseSelect'
+import type { LabelInValueType, RawValueType, SelectProps } from '../Select'
+import { toArray } from './commonUtil'
+import { convertChildrenToData } from './legacyUtil'
+
+function warningProps(props: SelectProps) {
+  const {
+    mode,
+    options,
+    children,
+    backfill,
+    allowClear,
+    placeholder,
+    getInputElement,
+    showSearch,
+    onSearch,
+    defaultOpen,
+    autofocus,
+    labelInValue,
+    value,
+    inputValue,
+    optionLabelProp,
+  } = props
+
+  const multiple = isMultiple(mode)
+  const mergedShowSearch = showSearch !== undefined ? showSearch : multiple || mode === 'combobox'
+  const mergedOptions = options || convertChildrenToData(children)
+
+  // `tags` should not set option as disabled
+  warning(
+    mode !== 'tags' || mergedOptions.every((opt: { disabled?: boolean }) => !opt.disabled),
+    'Please avoid setting option to disabled in tags mode since user can always type text as tag.',
+  )
+
+  // `combobox` should not use `optionLabelProp`
+  warning(
+    mode !== 'combobox' || !optionLabelProp,
+    '`combobox` mode not support `optionLabelProp`. Please set `value` on Option directly.',
+  )
+
+  // Only `combobox` support `backfill`
+  warning(mode === 'combobox' || !backfill, '`backfill` only works with `combobox` mode.')
+
+  // Only `combobox` support `getInputElement`
+  warning(
+    mode === 'combobox' || !getInputElement,
+    '`getInputElement` only work with `combobox` mode.',
+  )
+
+  // Customize `getInputElement` should not use `allowClear` & `placeholder`
+  noteOnce(
+    mode !== 'combobox' || !getInputElement || !allowClear || !placeholder,
+    'Customize `getInputElement` should customize clear and placeholder logic instead of configuring `allowClear` and `placeholder`.',
+  )
+
+  // `onSearch` should use in `combobox` or `showSearch`
+  if (onSearch && !mergedShowSearch && mode !== 'combobox' && mode !== 'tags') {
+    warning(false, '`onSearch` should work with `showSearch` instead of use alone.')
+  }
+
+  noteOnce(
+    !defaultOpen || autofocus,
+    '`defaultOpen` makes Select open without focus which means it will not close by click outside. You can set `autofocus` if needed.',
+  )
+
+  if (value !== undefined && value !== null) {
+    const values = toArray<RawValueType | LabelInValueType>(value)
+    warning(
+      !labelInValue ||
+        values.every((val) => typeof val === 'object' && ('key' in val || 'value' in val)),
+      '`value` should in shape of `{ value: string | number, label?: any }` when you set `labelInValue` to `true`',
+    )
+
+    warning(
+      !multiple || Array.isArray(value),
+      '`value` should be array when `mode` is `multiple` or `tags`',
+    )
+  }
+
+  // Syntactic sugar should use correct children type
+  if (children) {
+    let invalidateChildType = null
+    children.some((node: any) => {
+      if (!isValidElement(node) || !node.type) {
+        return false
+      }
+
+      const { type } = node as { type: { isSelectOption?: boolean; isSelectOptGroup?: boolean } }
+
+      if (type.isSelectOption) {
+        return false
+      }
+      if (type.isSelectOptGroup) {
+        const childs = node.children?.default() || []
+        const allChildrenValid = childs.every((subNode: VNode) => {
+          if (
+            !isValidElement(subNode) ||
+            !node.type ||
+            (subNode.type as { isSelectOption?: boolean }).isSelectOption
+          ) {
+            return true
+          }
+          invalidateChildType = subNode.type
+          return false
+        })
+
+        if (allChildrenValid) {
+          return false
+        }
+        return true
+      }
+      invalidateChildType = type
+      return true
+    })
+
+    if (invalidateChildType) {
+      warning(
+        false,
+        `\`children\` should be \`Select.Option\` or \`Select.OptGroup\` instead of \`${
+          invalidateChildType.displayName || invalidateChildType.name || invalidateChildType
+        }\`.`,
+      )
+    }
+
+    warning(
+      inputValue === undefined,
+      '`inputValue` is deprecated, please use `searchValue` instead.',
+    )
+  }
+}
+
+export default warningProps