@antsoo-lib/components 0.1.11 → 0.1.12

package/src/vc-select/Selector/SingleSelector.tsx

@@ -1,187 +0,0 @@
-import { Fragment, computed, defineComponent, shallowRef, watch } from 'vue'
-
-import pickAttrs from '../../_util/pickAttrs'
-import type { VueNode } from '../../_util/type'
-import PropTypes from '../../_util/vue-types'
-import useInjectLegacySelectContext from '../../vc-tree-select/LegacyContext'
-import Input from './Input'
-import type { InnerSelectorProps } from './interface'
-
-interface SelectorProps extends InnerSelectorProps {
-  inputElement: VueNode
-  activeValue: string
-  optionLabelRender: Function
-  compositionStatus: boolean
-}
-const props = {
-  inputElement: PropTypes.any,
-  id: String,
-  prefixCls: String,
-  values: PropTypes.array,
-  open: { type: Boolean, default: undefined },
-  searchValue: String,
-  inputRef: PropTypes.any,
-  placeholder: PropTypes.any,
-  compositionStatus: { type: Boolean, default: undefined },
-  disabled: { type: Boolean, default: undefined },
-  mode: String,
-  showSearch: { type: Boolean, default: undefined },
-  autofocus: { type: Boolean, default: undefined },
-  autocomplete: String,
-  activeDescendantId: String,
-  tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  activeValue: String,
-  backfill: { type: Boolean, default: undefined },
-  optionLabelRender: Function,
-  onInputChange: Function,
-  onInputPaste: Function,
-  onInputKeyDown: Function,
-  onInputMouseDown: Function,
-  onInputCompositionStart: Function,
-  onInputCompositionEnd: Function,
-}
-const SingleSelector = defineComponent<SelectorProps>({
-  name: 'SingleSelector',
-  setup(props) {
-    const inputChanged = shallowRef(false)
-
-    const combobox = computed(() => props.mode === 'combobox')
-    const inputEditable = computed(() => combobox.value || props.showSearch)
-
-    const inputValue = computed(() => {
-      let inputValue: string = props.searchValue || ''
-      if (combobox.value && props.activeValue && !inputChanged.value) {
-        inputValue = props.activeValue
-      }
-      return inputValue
-    })
-    const legacyTreeSelectContext = useInjectLegacySelectContext()
-    watch(
-      [combobox, () => props.activeValue],
-      () => {
-        if (combobox.value) {
-          inputChanged.value = false
-        }
-      },
-      { immediate: true },
-    )
-
-    // Not show text when closed expect combobox mode
-    const hasTextInput = computed(() =>
-      props.mode !== 'combobox' && !props.open && !props.showSearch
-        ? false
-        : !!inputValue.value || props.compositionStatus,
-    )
-
-    const title = computed(() => {
-      const item = props.values[0]
-      return item && (typeof item.label === 'string' || typeof item.label === 'number')
-        ? item.label.toString()
-        : undefined
-    })
-
-    const renderPlaceholder = () => {
-      if (props.values[0]) {
-        return null
-      }
-      const hiddenStyle = hasTextInput.value ? { visibility: 'hidden' as const } : undefined
-      return (
-        <span class={`${props.prefixCls}-selection-placeholder`} style={hiddenStyle}>
-          {props.placeholder}
-        </span>
-      )
-    }
-    const handleInput = (e: Event) => {
-      const composing = (e.target as any).composing
-      if (!composing) {
-        inputChanged.value = true
-        props.onInputChange(e)
-      }
-    }
-
-    return () => {
-      const {
-        inputElement,
-        prefixCls,
-        id,
-        values,
-        inputRef,
-        disabled,
-        autofocus,
-        autocomplete,
-        activeDescendantId,
-        open,
-        tabindex,
-        optionLabelRender,
-        onInputKeyDown,
-        onInputMouseDown,
-        onInputPaste,
-        onInputCompositionStart,
-        onInputCompositionEnd,
-      } = props
-      const item = values[0]
-      let titleNode = null
-      // custom tree-select title by slot
-
-      // For TreeSelect
-      if (item && legacyTreeSelectContext.customSlots) {
-        const key = item.key ?? item.value
-        const originData = legacyTreeSelectContext.keyEntities[key]?.node || {}
-        titleNode =
-          legacyTreeSelectContext.customSlots[originData.slots?.title] ||
-          legacyTreeSelectContext.customSlots.title ||
-          item.label
-        if (typeof titleNode === 'function') {
-          titleNode = titleNode(originData)
-        }
-        //  else if (treeSelectContext.value.slots.titleRender) {
-        //   // 因历史 title 是覆盖逻辑，新增 titleRender，所有的 title 都走一遍 titleRender
-        //   titleNode = treeSelectContext.value.slots.titleRender(item.option?.data || {});
-        // }
-      } else {
-        titleNode = optionLabelRender && item ? optionLabelRender(item.option) : item?.label
-      }
-      return (
-        <>
-          <span class={`${prefixCls}-selection-search`}>
-            <Input
-              inputRef={inputRef}
-              prefixCls={prefixCls}
-              id={id}
-              open={open}
-              inputElement={inputElement}
-              disabled={disabled}
-              autofocus={autofocus}
-              autocomplete={autocomplete}
-              editable={inputEditable.value}
-              activeDescendantId={activeDescendantId}
-              value={inputValue.value}
-              onKeydown={onInputKeyDown}
-              onMousedown={onInputMouseDown}
-              onChange={handleInput}
-              onPaste={onInputPaste}
-              onCompositionstart={onInputCompositionStart}
-              onCompositionend={onInputCompositionEnd}
-              tabindex={tabindex}
-              attrs={pickAttrs(props, true)}
-            />
-          </span>
-
-          {/* Display value */}
-          {!combobox.value && item && !hasTextInput.value && (
-            <span class={`${prefixCls}-selection-item`} title={title.value}>
-              <Fragment key={item.key ?? item.value}>{titleNode}</Fragment>
-            </span>
-          )}
-
-          {/* Display placeholder */}
-          {renderPlaceholder()}
-        </>
-      )
-    }
-  },
-})
-SingleSelector.props = props
-SingleSelector.inheritAttrs = false
-
-export default SingleSelector

package/src/vc-select/Selector/index.tsx

@@ -1,283 +0,0 @@
-/**
- * Cursor rule:
- * 1. Only `showSearch` enabled
- * 2. Only `open` is `true`
- * 3. When typing, set `open` to `true` which hit rule of 2
- *
- * Accessibility:
- * - https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
- */
-import type { PropType } from 'vue'
-import { defineComponent, ref } from 'vue'
-
-import type { EventHandler } from '../../_util/EventInterface'
-import KeyCode from '../../_util/KeyCode'
-import createRef from '../../_util/createRef'
-import type { VueNode } from '../../_util/type'
-import PropTypes from '../../_util/vue-types'
-import type { ScrollTo } from '../../vc-virtual-list/List'
-import type { CustomTagProps, DisplayValueType, Mode, RenderNode } from '../BaseSelect'
-import useLock from '../hooks/useLock'
-import { isValidateOpenKey } from '../utils/keyUtil'
-import MultipleSelector from './MultipleSelector'
-import SingleSelector from './SingleSelector'
-
-export interface SelectorProps {
-  id: string
-  prefixCls: string
-  showSearch?: boolean
-  open: boolean
-  values: DisplayValueType[]
-  multiple?: boolean
-  mode: Mode
-  searchValue: string
-  activeValue: string
-  inputElement: VueNode
-
-  autofocus?: boolean
-  activeDescendantId?: string
-  tabindex?: number | string
-  disabled?: boolean
-  placeholder?: VueNode
-  removeIcon?: RenderNode
-
-  // Tags
-  maxTagCount?: number | 'responsive'
-  maxTagTextLength?: number
-  maxTagPlaceholder?: VueNode | ((omittedValues: DisplayValueType[]) => VueNode)
-  tagRender?: (props: CustomTagProps) => VueNode
-  optionLabelRender?: (props: Record<string, any>) => VueNode
-
-  /** Check if `tokenSeparators` contains `\n` or `\r\n` */
-  tokenWithEnter?: boolean
-
-  // Motion
-  choiceTransitionName?: string
-
-  onToggleOpen: (open?: boolean) => void | any
-  /** `onSearch` returns go next step boolean to check if need do toggle open */
-  onSearch: (searchText: string, fromTyping: boolean, isCompositing: boolean) => boolean
-  onSearchSubmit: (searchText: string) => void
-  onRemove: (value: DisplayValueType) => void
-  onInputKeyDown?: (e: KeyboardEvent) => void
-
-  /**
-   * @private
-   * This may be removed after React provides replacement of `findDOMNode`
-   */
-  domRef: () => HTMLDivElement
-}
-export interface RefSelectorProps {
-  focus: () => void
-  blur: () => void
-  scrollTo?: ScrollTo
-}
-
-const Selector = defineComponent<SelectorProps>({
-  name: 'Selector',
-  inheritAttrs: false,
-  props: {
-    id: String,
-    prefixCls: String,
-    showSearch: { type: Boolean, default: undefined },
-    open: { type: Boolean, default: undefined },
-    /** Display in the Selector value, it's not same as `value` prop */
-    values: PropTypes.array,
-    multiple: { type: Boolean, default: undefined },
-    mode: String,
-    searchValue: String,
-    activeValue: String,
-    inputElement: PropTypes.any,
-
-    autofocus: { type: Boolean, default: undefined },
-    activeDescendantId: String,
-    tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    disabled: { type: Boolean, default: undefined },
-    placeholder: PropTypes.any,
-    removeIcon: PropTypes.any,
-
-    // Tags
-    maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    maxTagTextLength: Number,
-    maxTagPlaceholder: PropTypes.any,
-    tagRender: Function,
-    optionLabelRender: Function,
-
-    /** Check if `tokenSeparators` contains `\n` or `\r\n` */
-    tokenWithEnter: { type: Boolean, default: undefined },
-
-    // Motion
-    choiceTransitionName: String,
-
-    onToggleOpen: { type: Function as PropType<(open?: boolean) => void> },
-    /** `onSearch` returns go next step boolean to check if need do toggle open */
-    onSearch: Function,
-    onSearchSubmit: Function,
-    onRemove: Function,
-    onInputKeyDown: { type: Function as PropType<EventHandler> },
-
-    /**
-     * @private
-     * This may be removed after React provides replacement of `findDOMNode`
-     */
-    domRef: Function,
-  } as any,
-  setup(props, { expose }) {
-    const inputRef = createRef()
-    const compositionStatus = ref(false)
-
-    // ====================== Input ======================
-    const [getInputMouseDown, setInputMouseDown] = useLock(0)
-
-    const onInternalInputKeyDown = (event: KeyboardEvent) => {
-      const { which } = event
-
-      if (which === KeyCode.UP || which === KeyCode.DOWN) {
-        event.preventDefault()
-      }
-
-      if (props.onInputKeyDown) {
-        props.onInputKeyDown(event)
-      }
-
-      if (
-        which === KeyCode.ENTER &&
-        props.mode === 'tags' &&
-        !compositionStatus.value &&
-        !props.open
-      ) {
-        // When menu isn't open, OptionList won't trigger a value change
-        // So when enter is pressed, the tag's input value should be emitted here to let selector know
-        props.onSearchSubmit((event.target as HTMLInputElement).value)
-      }
-
-      if (isValidateOpenKey(which)) {
-        props.onToggleOpen(true)
-      }
-    }
-
-    /**
-     * We can not use `findDOMNode` sine it will get warning,
-     * have to use timer to check if is input element.
-     */
-    const onInternalInputMouseDown = () => {
-      setInputMouseDown(true)
-    }
-
-    // When paste come, ignore next onChange
-    let pastedText = null
-
-    const triggerOnSearch = (value: string) => {
-      if (props.onSearch(value, true, compositionStatus.value) !== false) {
-        props.onToggleOpen(true)
-      }
-    }
-
-    const onInputCompositionStart = () => {
-      compositionStatus.value = true
-    }
-
-    const onInputCompositionEnd = (e: InputEvent) => {
-      compositionStatus.value = false
-      // Trigger search again to support `tokenSeparators` with typewriting
-      if (props.mode !== 'combobox') {
-        triggerOnSearch((e.target as HTMLInputElement).value)
-      }
-    }
-
-    const onInputChange = (event: { target: { value: any } }) => {
-      let {
-        target: { value },
-      } = event
-
-      // Pasted text should replace back to origin content
-      if (props.tokenWithEnter && pastedText && /[\r\n]/.test(pastedText)) {
-        // CRLF will be treated as a single space for input element
-        const replacedText = pastedText
-          .replace(/[\r\n]+$/, '')
-          .replace(/\r\n/g, ' ')
-          .replace(/[\r\n]/g, ' ')
-        value = value.replace(replacedText, pastedText)
-      }
-
-      pastedText = null
-
-      triggerOnSearch(value)
-    }
-
-    const onInputPaste = (e: ClipboardEvent) => {
-      const { clipboardData } = e
-      const value = clipboardData.getData('text')
-
-      pastedText = value
-    }
-
-    const onClick = ({ target }) => {
-      if (target !== inputRef.current) {
-        // Should focus input if click the selector
-        const isIE = (document.body.style as any).msTouchAction !== undefined
-        if (isIE) {
-          setTimeout(() => {
-            inputRef.current.focus()
-          })
-        } else {
-          inputRef.current.focus()
-        }
-      }
-    }
-
-    const onMousedown = (event: MouseEvent) => {
-      const inputMouseDown = getInputMouseDown()
-      if (event.target !== inputRef.current && !inputMouseDown) {
-        event.preventDefault()
-      }
-
-      if ((props.mode !== 'combobox' && (!props.showSearch || !inputMouseDown)) || !props.open) {
-        if (props.open) {
-          props.onSearch('', true, false)
-        }
-        props.onToggleOpen()
-      }
-    }
-    expose({
-      focus: () => {
-        inputRef.current.focus()
-      },
-      blur: () => {
-        inputRef.current.blur()
-      },
-    })
-
-    return () => {
-      const { prefixCls, domRef, mode } = props as SelectorProps
-      const sharedProps = {
-        inputRef,
-        onInputKeyDown: onInternalInputKeyDown,
-        onInputMouseDown: onInternalInputMouseDown,
-        onInputChange,
-        onInputPaste,
-        compositionStatus: compositionStatus.value,
-        onInputCompositionStart,
-        onInputCompositionEnd,
-      }
-      const selectNode =
-        mode === 'multiple' || mode === 'tags' ? (
-          <MultipleSelector {...props} {...sharedProps} />
-        ) : (
-          <SingleSelector {...props} {...sharedProps} />
-        )
-      return (
-        <div
-          ref={domRef}
-          class={`${prefixCls}-selector`}
-          onClick={onClick}
-          onMousedown={onMousedown}
-        >
-          {selectNode}
-        </div>
-      )
-    }
-  },
-})
-
-export default Selector

package/src/vc-select/Selector/interface.ts

@@ -1,27 +0,0 @@
-import type { EventHandler } from '../../_util/EventInterface'
-import type { RefObject } from '../../_util/createRef'
-import type { VueNode } from '../../_util/type'
-import type { DisplayValueType, Mode } from '../BaseSelect'
-
-export interface InnerSelectorProps {
-  prefixCls: string
-  id: string
-  mode: Mode
-  inputRef: RefObject
-  placeholder?: VueNode
-  disabled?: boolean
-  autofocus?: boolean
-  autocomplete?: string
-  values: DisplayValueType[]
-  showSearch?: boolean
-  searchValue: string
-  activeDescendantId: string
-  open: boolean
-  tabindex?: number | string
-  onInputKeyDown: EventHandler
-  onInputMouseDown: EventHandler
-  onInputChange: EventHandler
-  onInputPaste: EventHandler
-  onInputCompositionStart: EventHandler
-  onInputCompositionEnd: EventHandler
-}

package/src/vc-select/TransBtn.tsx

@@ -1,69 +0,0 @@
-import { cloneVNode, isVNode } from 'vue'
-import type { FunctionalComponent, PropType, VNode } from 'vue'
-
-import type { MouseEventHandler } from '../_util/EventInterface'
-import type { VueNode } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import type { RenderNode } from './BaseSelect'
-
-export interface TransBtnProps {
-  class: string
-  customizeIcon: RenderNode
-  customizeIconProps?: any
-  onMousedown?: (payload: MouseEvent) => void
-  onClick?: (payload: MouseEvent) => void
-}
-
-export interface TransBtnType extends FunctionalComponent<TransBtnProps> {
-  displayName: string
-}
-
-const TransBtn: TransBtnType = (props, { slots }) => {
-  const { class: className, customizeIcon, customizeIconProps, onMousedown, onClick } = props
-  let icon: VueNode
-
-  if (typeof customizeIcon === 'function') {
-    icon = customizeIcon(customizeIconProps)
-  } else {
-    icon = isVNode(customizeIcon) ? cloneVNode(customizeIcon as VNode) : customizeIcon
-  }
-
-  return (
-    <span
-      class={className}
-      onMousedown={(event) => {
-        event.preventDefault()
-        if (onMousedown) {
-          onMousedown(event)
-        }
-      }}
-      style={{
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
-      }}
-      unselectable="on"
-      onClick={onClick}
-      aria-hidden
-    >
-      {icon !== undefined ? (
-        icon
-      ) : (
-        <span class={className.split(/\s+/).map((cls: any) => `${cls}-icon`)}>
-          {slots.default?.()}
-        </span>
-      )}
-    </span>
-  )
-}
-
-TransBtn.inheritAttrs = false
-TransBtn.displayName = 'TransBtn'
-TransBtn.props = {
-  class: String,
-  customizeIcon: PropTypes.any,
-  customizeIconProps: PropTypes.any,
-  onMousedown: Function as PropType<MouseEventHandler>,
-  onClick: Function as PropType<MouseEventHandler>,
-}
-
-export default TransBtn

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

@@ -1,24 +0,0 @@
-/**
- * BaseSelect provide some parsed data into context.
- * You can use this hooks to get them.
- */
-import type { InjectionKey } from 'vue'
-import { inject, provide } from 'vue'
-
-import type { BaseSelectProps } from '../BaseSelect'
-
-export interface BaseSelectContextProps extends BaseSelectProps {
-  triggerOpen: boolean
-  multiple: boolean
-  toggleOpen: (open?: boolean) => void
-}
-
-const BaseSelectContextKey: InjectionKey<BaseSelectContextProps> = Symbol('BaseSelectContextKey')
-
-export function useProvideBaseSelectProps(props: BaseSelectContextProps) {
-  return provide(BaseSelectContextKey, props)
-}
-
-export default function useBaseProps() {
-  return inject(BaseSelectContextKey, {} as BaseSelectContextProps)
-}

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

@@ -1,56 +0,0 @@
-import type { Ref } from 'vue'
-import { computed, shallowRef } from 'vue'
-
-import type { RawValueType } from '../BaseSelect'
-import type { DefaultOptionType, LabelInValueType } from '../Select'
-
-/**
- * Cache `value` related LabeledValue & options.
- */
-export default (
-  labeledValues: Ref<LabelInValueType[]>,
-  valueOptions: Ref<Map<RawValueType, DefaultOptionType>>,
-): [Ref<LabelInValueType[]>, (val: RawValueType) => DefaultOptionType] => {
-  const cacheRef = shallowRef({
-    values: new Map<RawValueType, LabelInValueType>(),
-    options: new Map<RawValueType, DefaultOptionType>(),
-  })
-
-  const filledLabeledValues = computed(() => {
-    const { values: prevValueCache, options: prevOptionCache } = cacheRef.value
-
-    // Fill label by cache
-    const patchedValues = labeledValues.value.map((item) => {
-      if (item.label === undefined) {
-        return {
-          ...item,
-          label: prevValueCache.get(item.value)?.label,
-        }
-      }
-
-      return item
-    })
-
-    // Refresh cache
-    const valueCache = new Map<RawValueType, LabelInValueType>()
-    const optionCache = new Map<RawValueType, DefaultOptionType>()
-
-    patchedValues.forEach((item) => {
-      valueCache.set(item.value, item)
-      optionCache.set(
-        item.value,
-        valueOptions.value.get(item.value) || prevOptionCache.get(item.value),
-      )
-    })
-
-    cacheRef.value.values = valueCache
-    cacheRef.value.options = optionCache
-
-    return patchedValues
-  })
-
-  const getOption = (val: RawValueType) =>
-    valueOptions.value.get(val) || cacheRef.value.options.get(val)
-
-  return [filledLabeledValues, getOption]
-}

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

@@ -1,32 +0,0 @@
-import type { Ref } from 'vue'
-import { onMounted, shallowRef } from 'vue'
-
-/**
- * Similar with `useLock`, but this hook will always execute last value.
- * When set to `true`, it will keep `true` for a short time even if `false` is set.
- */
-export default function useDelayReset(
-  timeout = 10,
-): [Ref<boolean>, (val: boolean, callback?: () => void) => void, () => void] {
-  const bool = shallowRef(false)
-  let delay: any
-
-  const cancelLatest = () => {
-    clearTimeout(delay)
-  }
-
-  onMounted(() => {
-    cancelLatest()
-  })
-  const delaySetBool = (value: boolean, callback: () => void) => {
-    cancelLatest()
-    delay = setTimeout(() => {
-      bool.value = value
-      if (callback) {
-        callback()
-      }
-    }, timeout)
-  }
-
-  return [bool, delaySetBool, cancelLatest]
-}