@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-select/SelectTrigger.tsx

@@ -0,0 +1,193 @@
+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

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,302 @@
+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