@antsoo-lib/components 0.1.11 → 0.1.12

package/src/vc-select/SelectTrigger.tsx

@@ -1,193 +0,0 @@
-import type { CSSProperties, PropType } from 'vue'
-import { computed, defineComponent, ref } from 'vue'
-
-import classNames from '../_util/classNames'
-import type { VueNode } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import Trigger from '../vc-trigger'
-import type { AlignType } from '../vc-trigger/interface'
-import type { DropdownRender, Placement, RenderDOMFunc } from './BaseSelect'
-
-const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
-  // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
-  const adjustX = dropdownMatchSelectWidth === true ? 0 : 1
-  return {
-    bottomLeft: {
-      points: ['tl', 'bl'],
-      offset: [0, 4],
-      overflow: {
-        adjustX,
-        adjustY: 1,
-      },
-    },
-    bottomRight: {
-      points: ['tr', 'br'],
-      offset: [0, 4],
-      overflow: {
-        adjustX,
-        adjustY: 1,
-      },
-    },
-    topLeft: {
-      points: ['bl', 'tl'],
-      offset: [0, -4],
-      overflow: {
-        adjustX,
-        adjustY: 1,
-      },
-    },
-    topRight: {
-      points: ['br', 'tr'],
-      offset: [0, -4],
-      overflow: {
-        adjustX,
-        adjustY: 1,
-      },
-    },
-  }
-}
-
-export interface RefTriggerProps {
-  getPopupElement: () => HTMLDivElement
-}
-
-export interface SelectTriggerProps {
-  prefixCls: string
-  disabled: boolean
-  visible: boolean
-  popupElement: VueNode
-  animation?: string
-  transitionName?: string
-  containerWidth: number
-  placement?: Placement
-  dropdownStyle: CSSProperties
-  dropdownClassName: string
-  direction: string
-  dropdownMatchSelectWidth?: boolean | number
-  dropdownRender?: DropdownRender
-  getPopupContainer?: RenderDOMFunc
-  dropdownAlign: AlignType
-  empty: boolean
-  getTriggerDOMNode: () => any
-  onPopupVisibleChange?: (visible: boolean) => void
-
-  onPopupMouseEnter: () => void
-  onPopupFocusin: () => void
-  onPopupFocusout: () => void
-}
-
-const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
-  name: 'SelectTrigger',
-  inheritAttrs: false,
-  props: {
-    dropdownAlign: Object as PropType<AlignType>,
-    visible: { type: Boolean, default: undefined },
-    disabled: { type: Boolean, default: undefined },
-    dropdownClassName: String,
-    dropdownStyle: PropTypes.object,
-    placement: String,
-    empty: { type: Boolean, default: undefined },
-    prefixCls: String,
-    popupClassName: String,
-    animation: String,
-    transitionName: String,
-    getPopupContainer: Function,
-    dropdownRender: Function,
-    containerWidth: Number,
-    dropdownMatchSelectWidth: PropTypes.oneOfType([Number, Boolean]).def(true),
-    popupElement: PropTypes.any,
-    direction: String,
-    getTriggerDOMNode: Function,
-    onPopupVisibleChange: Function as PropType<(open: boolean) => void>,
-    onPopupMouseEnter: Function,
-    onPopupFocusin: Function,
-    onPopupFocusout: Function,
-  } as any,
-  setup(props, { slots, attrs, expose }) {
-    const builtInPlacements = computed(() => {
-      const { dropdownMatchSelectWidth } = props
-      return getBuiltInPlacements(dropdownMatchSelectWidth)
-    })
-    const popupRef = ref()
-    expose({
-      getPopupElement: () => {
-        return popupRef.value
-      },
-    })
-    return () => {
-      const { empty = false, ...restProps } = { ...props, ...attrs }
-      const {
-        visible,
-        dropdownAlign,
-        prefixCls,
-        popupElement,
-        dropdownClassName,
-        dropdownStyle,
-        direction = 'ltr',
-        placement,
-        dropdownMatchSelectWidth,
-        containerWidth,
-        dropdownRender,
-        animation,
-        transitionName,
-        getPopupContainer,
-        getTriggerDOMNode,
-        onPopupVisibleChange,
-        onPopupMouseEnter,
-        onPopupFocusin,
-        onPopupFocusout,
-      } = restProps as SelectTriggerProps
-      const dropdownPrefixCls = `${prefixCls}-dropdown`
-
-      let popupNode = popupElement
-      if (dropdownRender) {
-        popupNode = dropdownRender({ menuNode: popupElement, props })
-      }
-
-      const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` : transitionName
-
-      const popupStyle = { minWidth: `${containerWidth}px`, ...dropdownStyle }
-
-      if (typeof dropdownMatchSelectWidth === 'number') {
-        popupStyle.width = `${dropdownMatchSelectWidth}px`
-      } else if (dropdownMatchSelectWidth) {
-        popupStyle.width = `${containerWidth}px`
-      }
-      return (
-        <Trigger
-          {...props}
-          showAction={onPopupVisibleChange ? ['click'] : []}
-          hideAction={onPopupVisibleChange ? ['click'] : []}
-          popupPlacement={placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')}
-          builtinPlacements={builtInPlacements.value}
-          prefixCls={dropdownPrefixCls}
-          popupTransitionName={mergedTransitionName}
-          popupAlign={dropdownAlign}
-          popupVisible={visible}
-          getPopupContainer={getPopupContainer}
-          popupClassName={classNames(dropdownClassName, {
-            [`${dropdownPrefixCls}-empty`]: empty,
-          })}
-          popupStyle={popupStyle}
-          getTriggerDOMNode={getTriggerDOMNode}
-          onPopupVisibleChange={onPopupVisibleChange}
-          v-slots={{
-            default: slots.default,
-            popup: () => (
-              <div
-                ref={popupRef}
-                onMouseenter={onPopupMouseEnter}
-                onFocusin={onPopupFocusin}
-                onFocusout={onPopupFocusout}
-              >
-                {popupNode}
-              </div>
-            ),
-          }}
-        ></Trigger>
-      )
-    }
-  },
-})
-
-export default SelectTrigger

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

@@ -1,172 +0,0 @@
-import type { ExtractPropTypes, PropType, VNode } from 'vue'
-import { defineComponent, inject } from 'vue'
-
-import BaseInput from '../../_util/BaseInput'
-import type {
-  ChangeEventHandler,
-  ClipboardEventHandler,
-  CompositionEventHandler,
-  FocusEventHandler,
-  KeyboardEventHandler,
-  MouseEventHandler,
-} from '../../_util/EventInterface'
-import classNames from '../../_util/classNames'
-import { cloneElement } from '../../_util/vnode'
-import PropTypes from '../../_util/vue-types'
-
-export const inputProps = {
-  inputRef: PropTypes.any,
-  prefixCls: String,
-  id: String,
-  inputElement: PropTypes.VueNode,
-  disabled: { type: Boolean, default: undefined },
-  autofocus: { type: Boolean, default: undefined },
-  autocomplete: String,
-  editable: { type: Boolean, default: undefined },
-  activeDescendantId: String,
-  value: String,
-  open: { type: Boolean, default: undefined },
-  tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Pass accessibility props to input */
-  attrs: PropTypes.object,
-  onKeydown: { type: Function as PropType<KeyboardEventHandler> },
-  onMousedown: { type: Function as PropType<MouseEventHandler> },
-  onChange: { type: Function as PropType<ChangeEventHandler> },
-  onPaste: { type: Function as PropType<ClipboardEventHandler> },
-  onCompositionstart: { type: Function as PropType<CompositionEventHandler> },
-  onCompositionend: { type: Function as PropType<CompositionEventHandler> },
-  onFocus: { type: Function as PropType<FocusEventHandler> },
-  onBlur: { type: Function as PropType<FocusEventHandler> },
-}
-
-export type InputProps = Partial<ExtractPropTypes<typeof inputProps>>
-
-const Input = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'SelectInput',
-  inheritAttrs: false,
-  props: inputProps,
-  setup(props) {
-    let blurTimeout = null
-    const VCSelectContainerEvent = inject('VCSelectContainerEvent') as any
-    return () => {
-      const {
-        prefixCls,
-        id,
-        inputElement,
-        disabled,
-        tabindex,
-        autofocus,
-        autocomplete,
-        editable,
-        activeDescendantId,
-        value,
-        onKeydown,
-        onMousedown,
-        onChange,
-        onPaste,
-        onCompositionstart,
-        onCompositionend,
-        onFocus,
-        onBlur,
-        open,
-        inputRef,
-        attrs,
-      } = props
-
-      let inputNode: any = inputElement || <BaseInput></BaseInput>
-
-      const inputProps = inputNode.props || {}
-      const {
-        onKeydown: onOriginKeyDown,
-        onInput: onOriginInput,
-        onFocus: onOriginFocus,
-        onBlur: onOriginBlur,
-        onMousedown: onOriginMouseDown,
-        onCompositionstart: onOriginCompositionStart,
-        onCompositionend: onOriginCompositionEnd,
-        style,
-      } = inputProps
-      inputNode = cloneElement(
-        inputNode,
-        Object.assign(
-          {
-            type: 'search',
-            ...inputProps,
-            id,
-            ref: inputRef,
-            disabled,
-            tabindex,
-            lazy: false,
-            autocomplete: autocomplete || 'off',
-            autofocus,
-            class: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.class),
-
-            role: 'combobox',
-            'aria-expanded': open,
-            'aria-haspopup': 'listbox',
-            'aria-owns': `${id}_list`,
-            'aria-autocomplete': 'list',
-            'aria-controls': `${id}_list`,
-            'aria-activedescendant': activeDescendantId,
-            ...attrs,
-            value: editable ? value : '',
-            readonly: !editable,
-            unselectable: !editable ? 'on' : null,
-            style: { ...style, opacity: editable ? null : 0 },
-            onKeydown: (event: KeyboardEvent) => {
-              onKeydown(event)
-              if (onOriginKeyDown) {
-                onOriginKeyDown(event)
-              }
-            },
-            onMousedown: (event: MouseEvent) => {
-              onMousedown(event)
-              if (onOriginMouseDown) {
-                onOriginMouseDown(event)
-              }
-            },
-            onInput: (event: Event) => {
-              onChange(event)
-              if (onOriginInput) {
-                onOriginInput(event)
-              }
-            },
-            onCompositionstart(event: CompositionEvent) {
-              onCompositionstart(event)
-              if (onOriginCompositionStart) {
-                onOriginCompositionStart(event)
-              }
-            },
-            onCompositionend(event: CompositionEvent) {
-              onCompositionend(event)
-              if (onOriginCompositionEnd) {
-                onOriginCompositionEnd(event)
-              }
-            },
-            onPaste,
-            onFocus: (...args: any[]) => {
-              clearTimeout(blurTimeout)
-              onOriginFocus && onOriginFocus(args[0])
-              onFocus && onFocus(args[0])
-              VCSelectContainerEvent?.focus(args[0])
-            },
-            onBlur: (...args: any[]) => {
-              blurTimeout = setTimeout(() => {
-                onOriginBlur && onOriginBlur(args[0])
-                onBlur && onBlur(args[0])
-                VCSelectContainerEvent?.blur(args[0])
-              }, 100)
-            },
-          },
-          inputNode.type === 'textarea' ? {} : { type: 'search' },
-        ),
-        true,
-        true,
-      ) as VNode
-      return inputNode
-    }
-  },
-})
-
-export default Input

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

@@ -1,302 +0,0 @@
-import type { PropType, Ref } from 'vue'
-import { computed, defineComponent, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
-
-import classNames from '../../_util/classNames'
-import pickAttrs from '../../_util/pickAttrs'
-import type { VueNode } from '../../_util/type'
-import PropTypes from '../../_util/vue-types'
-import Overflow from '../../vc-overflow'
-import useInjectLegacySelectContext from '../../vc-tree-select/LegacyContext'
-import type { CustomTagProps, DisplayValueType, RawValueType, RenderNode } from '../BaseSelect'
-import type { BaseOptionType } from '../Select'
-import TransBtn from '../TransBtn'
-import Input from './Input'
-import type { InnerSelectorProps } from './interface'
-
-type SelectorProps = InnerSelectorProps & {
-  // Icon
-  removeIcon?: RenderNode
-
-  // Tags
-  maxTagCount?: number | 'responsive'
-  maxTagTextLength?: number
-  maxTagPlaceholder?: VueNode | ((omittedValues: DisplayValueType[]) => VueNode)
-  tokenSeparators?: string[]
-  tagRender?: (props: CustomTagProps) => VueNode
-  onToggleOpen: any
-
-  compositionStatus: boolean
-
-  // Motion
-  choiceTransitionName?: string
-
-  // Event
-  onRemove: (value: DisplayValueType) => void
-}
-
-const props = {
-  id: String,
-  prefixCls: String,
-  values: PropTypes.array,
-  open: { type: Boolean, default: undefined },
-  searchValue: String,
-  inputRef: PropTypes.any,
-  placeholder: PropTypes.any,
-  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]),
-  compositionStatus: Boolean,
-  removeIcon: PropTypes.any,
-  choiceTransitionName: String,
-
-  maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  maxTagTextLength: Number,
-  maxTagPlaceholder: PropTypes.any.def(
-    () => (omittedValues: DisplayValueType[]) => `+ ${omittedValues.length} ...`,
-  ),
-  tagRender: Function,
-
-  onToggleOpen: { type: Function as PropType<(open?: boolean) => void> },
-  onRemove: Function,
-  onInputChange: Function,
-  onInputPaste: Function,
-  onInputKeyDown: Function,
-  onInputMouseDown: Function,
-  onInputCompositionStart: Function,
-  onInputCompositionEnd: Function,
-}
-
-const onPreventMouseDown = (event: MouseEvent) => {
-  event.preventDefault()
-  event.stopPropagation()
-}
-
-const SelectSelector = defineComponent<SelectorProps>({
-  name: 'MultipleSelectSelector',
-  inheritAttrs: false,
-  props: props as any,
-  setup(props) {
-    const measureRef = shallowRef()
-    const inputWidth = shallowRef(0)
-    const focused = shallowRef(false)
-    const legacyTreeSelectContext = useInjectLegacySelectContext()
-    const selectionPrefixCls = computed(() => `${props.prefixCls}-selection`)
-
-    // ===================== Search ======================
-    const inputValue = computed(() =>
-      props.open || props.mode === 'tags' ? props.searchValue : '',
-    )
-    const inputEditable: Ref<boolean> = computed(
-      () =>
-        props.mode === 'tags' || ((props.showSearch && (props.open || focused.value)) as boolean),
-    )
-    const targetValue = ref('')
-    watchEffect(() => {
-      targetValue.value = inputValue.value
-    })
-    // We measure width and set to the input immediately
-    onMounted(() => {
-      watch(
-        targetValue,
-        () => {
-          inputWidth.value = measureRef.value.scrollWidth
-        },
-        { flush: 'post', immediate: true },
-      )
-    })
-
-    // ===================== Render ======================
-    // >>> Render Selector Node. Includes Item & Rest
-    function defaultRenderSelector(
-      title: VueNode,
-      content: VueNode,
-      itemDisabled: boolean,
-      closable?: boolean,
-      onClose?: (e: MouseEvent) => void,
-    ) {
-      return (
-        <span
-          class={classNames(`${selectionPrefixCls.value}-item`, {
-            [`${selectionPrefixCls.value}-item-disabled`]: itemDisabled,
-          })}
-          title={
-            typeof title === 'string' || typeof title === 'number' ? title.toString() : undefined
-          }
-        >
-          <span class={`${selectionPrefixCls.value}-item-content`}>{content}</span>
-          {closable && (
-            <TransBtn
-              class={`${selectionPrefixCls.value}-item-remove`}
-              onMousedown={onPreventMouseDown}
-              onClick={onClose}
-              customizeIcon={props.removeIcon}
-            >
-              ×
-            </TransBtn>
-          )}
-        </span>
-      )
-    }
-
-    function customizeRenderSelector(
-      value: RawValueType,
-      content: VueNode,
-      itemDisabled: boolean,
-      closable: boolean,
-      onClose: (e: MouseEvent) => void,
-      option: BaseOptionType,
-    ) {
-      const onMouseDown = (e: MouseEvent) => {
-        onPreventMouseDown(e)
-        props.onToggleOpen(!props.open)
-      }
-      let originData = option
-      // For TreeSelect
-      if (legacyTreeSelectContext.keyEntities) {
-        originData = legacyTreeSelectContext.keyEntities[value]?.node || {}
-      }
-      return (
-        <span key={value} onMousedown={onMouseDown}>
-          {props.tagRender({
-            label: content,
-            value,
-            disabled: itemDisabled,
-            closable,
-            onClose,
-            option: originData,
-          })}
-        </span>
-      )
-    }
-
-    function renderItem(valueItem: DisplayValueType) {
-      const { disabled: itemDisabled, label, value, option } = valueItem
-      const closable = !props.disabled && !itemDisabled
-
-      let displayLabel = label
-
-      if (typeof props.maxTagTextLength === 'number') {
-        if (typeof label === 'string' || typeof label === 'number') {
-          const strLabel = String(displayLabel)
-
-          if (strLabel.length > props.maxTagTextLength) {
-            displayLabel = `${strLabel.slice(0, props.maxTagTextLength)}...`
-          }
-        }
-      }
-      const onClose = (event?: MouseEvent) => {
-        if (event) event.stopPropagation()
-        props.onRemove?.(valueItem)
-      }
-
-      return typeof props.tagRender === 'function'
-        ? customizeRenderSelector(value, displayLabel, itemDisabled, closable, onClose, option)
-        : defaultRenderSelector(label, displayLabel, itemDisabled, closable, onClose)
-    }
-
-    function renderRest(omittedValues: DisplayValueType[]) {
-      const { maxTagPlaceholder = (omittedValues) => `+ ${omittedValues.length} ...` } = props
-      const content =
-        typeof maxTagPlaceholder === 'function'
-          ? maxTagPlaceholder(omittedValues)
-          : maxTagPlaceholder
-
-      return defaultRenderSelector(content, content, false)
-    }
-
-    const handleInput = (e: Event) => {
-      const composing = (e.target as any).composing
-      targetValue.value = (e.target as any).value
-      if (!composing) {
-        props.onInputChange(e)
-      }
-    }
-
-    return () => {
-      const {
-        id,
-        prefixCls,
-        values,
-        open,
-        inputRef,
-        placeholder,
-        disabled,
-        autofocus,
-        autocomplete,
-        activeDescendantId,
-        tabindex,
-        compositionStatus,
-        onInputPaste,
-        onInputKeyDown,
-        onInputMouseDown,
-        onInputCompositionStart,
-        onInputCompositionEnd,
-      } = props
-      // >>> Input Node
-      const inputNode = (
-        <div
-          class={`${selectionPrefixCls.value}-search`}
-          style={{ width: `${inputWidth.value}px` }}
-          key="input"
-        >
-          <Input
-            inputRef={inputRef}
-            open={open}
-            prefixCls={prefixCls}
-            id={id}
-            inputElement={null}
-            disabled={disabled}
-            autofocus={autofocus}
-            autocomplete={autocomplete}
-            editable={inputEditable.value}
-            activeDescendantId={activeDescendantId}
-            value={targetValue.value}
-            onKeydown={onInputKeyDown}
-            onMousedown={onInputMouseDown}
-            onChange={handleInput}
-            onPaste={onInputPaste}
-            onCompositionstart={onInputCompositionStart}
-            onCompositionend={onInputCompositionEnd}
-            tabindex={tabindex}
-            attrs={pickAttrs(props, true)}
-            onFocus={() => (focused.value = true)}
-            onBlur={() => (focused.value = false)}
-          />
-
-          {/* Measure Node */}
-          <span ref={measureRef} class={`${selectionPrefixCls.value}-search-mirror`} aria-hidden>
-            {targetValue.value}&nbsp;
-          </span>
-        </div>
-      )
-
-      // >>> Selections
-      const selectionNode = (
-        <Overflow
-          prefixCls={`${selectionPrefixCls.value}-overflow`}
-          data={values}
-          renderItem={renderItem}
-          renderRest={renderRest}
-          suffix={inputNode}
-          itemKey="key"
-          maxCount={props.maxTagCount}
-          key="overflow"
-        />
-      )
-      return (
-        <>
-          {selectionNode}
-          {!values.length && !inputValue.value && !compositionStatus && (
-            <span class={`${selectionPrefixCls.value}-placeholder`}>{placeholder}</span>
-          )}
-        </>
-      )
-    }
-  },
-})
-
-export default SelectSelector