@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-image/src/hooks/useFrameSetState.ts

@@ -0,0 +1,32 @@
+import { onMounted, reactive, ref } from 'vue'
+
+import raf from '../../../_util/raf'
+
+type SetActionType<T> = Partial<T> | ((state: T) => Partial<T>)
+export default function useFrameSetState<T extends object>(
+  initial: T,
+): [Record<string, any>, (newState: SetActionType<T>) => void] {
+  const frame = ref<number>(null)
+  const state = reactive({ ...initial })
+  const queue = ref<SetActionType<T>[]>([])
+
+  const setFrameState = (newState: SetActionType<T>) => {
+    if (frame.value === null) {
+      queue.value = []
+      frame.value = raf(() => {
+        let memoState: any
+        queue.value.forEach((queueState: object) => {
+          memoState = { ...memoState, ...queueState }
+        })
+        Object.assign(state, memoState)
+        frame.value = null
+      })
+    }
+
+    queue.value.push(newState as any)
+  }
+  onMounted(() => {
+    frame.value && raf.cancel(frame.value)
+  })
+  return [state, setFrameState]
+}

package/src/vc-input/BaseInput.tsx

@@ -0,0 +1,153 @@
+import type { CSSProperties } from 'vue'
+import { defineComponent, ref } from 'vue'
+
+import type { MouseEventHandler } from '../_util/EventInterface'
+import classNames from '../_util/classNames'
+import { cloneElement } from '../_util/vnode'
+import { baseInputProps } from './inputProps'
+import { hasAddon, hasPrefixSuffix } from './utils/commonUtils'
+
+export default defineComponent({
+  name: 'BaseInput',
+  inheritAttrs: false,
+  props: baseInputProps(),
+  setup(props, { slots, attrs }) {
+    const containerRef = ref()
+    const onInputMouseDown: MouseEventHandler = (e) => {
+      if (containerRef.value?.contains(e.target as Element)) {
+        const { triggerFocus } = props
+        triggerFocus?.()
+      }
+    }
+    const getClearIcon = () => {
+      const {
+        allowClear,
+        value,
+        disabled,
+        readonly,
+        handleReset,
+        suffix = slots.suffix,
+        prefixCls,
+      } = props
+      if (!allowClear) {
+        return null
+      }
+      const needClear = !disabled && !readonly && value
+      const className = `${prefixCls}-clear-icon`
+      const iconNode = slots.clearIcon?.() || '*'
+      return (
+        <span
+          onClick={handleReset}
+          // Do not trigger onBlur when clear input
+          onMousedown={(e) => e.preventDefault()}
+          class={classNames(
+            {
+              [`${className}-hidden`]: !needClear,
+              [`${className}-has-suffix`]: !!suffix,
+            },
+            className,
+          )}
+          role="button"
+          tabindex={-1}
+        >
+          {iconNode}
+        </span>
+      )
+    }
+
+    return () => {
+      const {
+        focused,
+        value,
+
+        disabled,
+        allowClear,
+        readonly,
+        hidden,
+        prefixCls,
+        prefix = slots.prefix?.(),
+        suffix = slots.suffix?.(),
+        addonAfter = slots.addonAfter,
+        addonBefore = slots.addonBefore,
+        inputElement,
+        affixWrapperClassName,
+        wrapperClassName,
+        groupClassName,
+      } = props
+      let element = cloneElement(inputElement, {
+        value,
+        hidden,
+      })
+      // ================== Prefix & Suffix ================== //
+      if (hasPrefixSuffix({ prefix, suffix, allowClear })) {
+        const affixWrapperPrefixCls = `${prefixCls}-affix-wrapper`
+        const affixWrapperCls = classNames(
+          affixWrapperPrefixCls,
+          {
+            [`${affixWrapperPrefixCls}-disabled`]: disabled,
+            [`${affixWrapperPrefixCls}-focused`]: focused,
+            [`${affixWrapperPrefixCls}-readonly`]: readonly,
+            [`${affixWrapperPrefixCls}-input-with-clear-btn`]: suffix && allowClear && value,
+          },
+          !hasAddon({ addonAfter, addonBefore }) && attrs.class,
+          affixWrapperClassName,
+        )
+
+        const suffixNode = (suffix || allowClear) && (
+          <span class={`${prefixCls}-suffix`}>
+            {getClearIcon()}
+            {suffix}
+          </span>
+        )
+
+        element = (
+          <span
+            class={affixWrapperCls}
+            style={attrs.style as CSSProperties}
+            hidden={!hasAddon({ addonAfter, addonBefore }) && hidden}
+            onMousedown={onInputMouseDown}
+            ref={containerRef}
+          >
+            {prefix && <span class={`${prefixCls}-prefix`}>{prefix}</span>}
+            {cloneElement(inputElement, {
+              style: null,
+              value,
+              hidden: null,
+            })}
+            {suffixNode}
+          </span>
+        )
+      }
+      // ================== Addon ================== //
+      if (hasAddon({ addonAfter, addonBefore })) {
+        const wrapperCls = `${prefixCls}-group`
+        const addonCls = `${wrapperCls}-addon`
+
+        const mergedWrapperClassName = classNames(
+          `${prefixCls}-wrapper`,
+          wrapperCls,
+          wrapperClassName,
+        )
+
+        const mergedGroupClassName = classNames(
+          `${prefixCls}-group-wrapper`,
+          attrs.class,
+          groupClassName,
+        )
+
+        // Need another wrapper for changing display:table to display:inline-block
+        // and put style prop in wrapper
+        return (
+          <span class={mergedGroupClassName} style={attrs.style as CSSProperties} hidden={hidden}>
+            <span class={mergedWrapperClassName}>
+              {addonBefore && <span class={addonCls}>{addonBefore}</span>}
+              {cloneElement(element, { style: null, hidden: null })}
+              {addonAfter && <span class={addonCls}>{addonAfter}</span>}
+            </span>
+          </span>
+        )
+      }
+      return element
+    }
+  },
+})

package/src/vc-input/Input.tsx

@@ -0,0 +1,255 @@
+// base 0.0.1-alpha.7
+import type { ComponentPublicInstance } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, shallowRef, watch } from 'vue'
+
+import BaseInputCore from '../_util/BaseInput'
+import type { BaseInputExpose } from '../_util/BaseInput'
+import type { ChangeEvent, FocusEventHandler } from '../_util/EventInterface'
+import classNames from '../_util/classNames'
+import omit from '../_util/omit'
+import BaseInput from './BaseInput'
+import type { InputProps } from './inputProps'
+import { inputProps } from './inputProps'
+import type { InputFocusOptions } from './utils/commonUtils'
+import {
+  fixControlledValue,
+  hasAddon,
+  hasPrefixSuffix,
+  resolveOnChange,
+  triggerFocus,
+} from './utils/commonUtils'
+
+export default defineComponent({
+  name: 'VCInput',
+  inheritAttrs: false,
+  props: inputProps(),
+  setup(props, { slots, attrs, expose, emit }) {
+    const stateValue = shallowRef(props.value === undefined ? props.defaultValue : props.value)
+    const focused = shallowRef(false)
+    const inputRef = shallowRef<BaseInputExpose>()
+    const rootRef = shallowRef<ComponentPublicInstance>()
+    watch(
+      () => props.value,
+      () => {
+        stateValue.value = props.value
+      },
+    )
+    watch(
+      () => props.disabled,
+      () => {
+        if (props.disabled) {
+          focused.value = false
+        }
+      },
+    )
+    const focus = (option?: InputFocusOptions) => {
+      if (inputRef.value) {
+        triggerFocus(inputRef.value.input, option)
+      }
+    }
+
+    const blur = () => {
+      inputRef.value.input?.blur()
+    }
+
+    const setSelectionRange = (
+      start: number,
+      end: number,
+      direction?: 'forward' | 'backward' | 'none',
+    ) => {
+      inputRef.value.input?.setSelectionRange(start, end, direction)
+    }
+
+    const select = () => {
+      inputRef.value.input?.select()
+    }
+
+    expose({
+      focus,
+      blur,
+      input: computed(() => (inputRef.value.input as any)?.input),
+      stateValue,
+      setSelectionRange,
+      select,
+    })
+    const triggerChange = (e: Event) => {
+      emit('change', e)
+    }
+    const setValue = (value: string | number, callback?: Function) => {
+      if (stateValue.value === value) {
+        return
+      }
+      if (props.value === undefined) {
+        stateValue.value = value
+      } else {
+        nextTick(() => {
+          if (inputRef.value.input.value !== stateValue.value) {
+            rootRef.value?.$forceUpdate()
+          }
+        })
+      }
+      nextTick(() => {
+        callback && callback()
+      })
+    }
+    const handleChange = (e: ChangeEvent) => {
+      const { value } = e.target as any
+      if (stateValue.value === value) return
+      const newVal = e.target.value
+      resolveOnChange(inputRef.value.input as HTMLInputElement, e, triggerChange)
+      setValue(newVal)
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.keyCode === 13) {
+        emit('pressEnter', e)
+      }
+      emit('keydown', e)
+    }
+
+    const handleFocus: FocusEventHandler = (e) => {
+      focused.value = true
+      emit('focus', e)
+    }
+
+    const handleBlur: FocusEventHandler = (e) => {
+      focused.value = false
+      emit('blur', e)
+    }
+
+    const handleReset = (e: MouseEvent) => {
+      resolveOnChange(inputRef.value.input as HTMLInputElement, e, triggerChange)
+      setValue('', () => {
+        focus()
+      })
+    }
+
+    const getInputElement = () => {
+      const {
+        addonBefore = slots.addonBefore,
+        addonAfter = slots.addonAfter,
+        disabled,
+        valueModifiers = {},
+        htmlSize,
+        autocomplete,
+        prefixCls,
+        inputClassName,
+        prefix = slots.prefix?.(),
+        suffix = slots.suffix?.(),
+        allowClear,
+        type = 'text',
+      } = props
+      const otherProps = omit(props as InputProps & { placeholder: string }, [
+        'prefixCls',
+        'onPressEnter',
+        'addonBefore',
+        'addonAfter',
+        'prefix',
+        'suffix',
+        'allowClear',
+        // Input elements must be either controlled or uncontrolled,
+        // specify either the value prop, or the defaultValue prop, but not both.
+        'defaultValue',
+        'size',
+        'bordered',
+        'htmlSize',
+        'lazy',
+        'showCount',
+        'valueModifiers',
+        'showCount',
+        'affixWrapperClassName',
+        'groupClassName',
+        'inputClassName',
+        'wrapperClassName',
+      ])
+      const inputProps = {
+        ...otherProps,
+        ...attrs,
+        autocomplete,
+        onChange: handleChange,
+        onInput: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeydown: handleKeyDown,
+        class: classNames(
+          prefixCls,
+          {
+            [`${prefixCls}-disabled`]: disabled,
+          },
+          inputClassName,
+          !hasAddon({ addonAfter, addonBefore }) &&
+            !hasPrefixSuffix({ prefix, suffix, allowClear }) &&
+            attrs.class,
+        ),
+        ref: inputRef,
+        key: 'ant-input',
+        size: htmlSize,
+        type,
+        lazy: props.lazy,
+      }
+      if (valueModifiers.lazy) {
+        delete inputProps.onInput
+      }
+      if (!inputProps.autofocus) {
+        delete inputProps.autofocus
+      }
+      const inputNode = <BaseInputCore {...omit(inputProps, ['size'])} />
+      return inputNode
+    }
+    const getSuffix = () => {
+      const { maxlength, suffix = slots.suffix?.(), showCount, prefixCls } = props
+      // Max length value
+      const hasMaxLength = Number(maxlength) > 0
+
+      if (suffix || showCount) {
+        const valueLength = [...fixControlledValue(stateValue.value)].length
+        const dataCount =
+          typeof showCount === 'object'
+            ? showCount.formatter({ count: valueLength, maxlength })
+            : `${valueLength}${hasMaxLength ? ` / ${maxlength}` : ''}`
+
+        return (
+          <>
+            {!!showCount && (
+              <span
+                class={classNames(`${prefixCls}-show-count-suffix`, {
+                  [`${prefixCls}-show-count-has-suffix`]: !!suffix,
+                })}
+              >
+                {dataCount}
+              </span>
+            )}
+            {suffix}
+          </>
+        )
+      }
+      return null
+    }
+    onMounted(() => {
+      if (process.env.NODE_ENV === 'test') {
+        if (props.autofocus) {
+          focus()
+        }
+      }
+    })
+    return () => {
+      const { prefixCls, disabled, ...rest } = props
+      return (
+        <BaseInput
+          {...rest}
+          {...attrs}
+          ref={rootRef}
+          prefixCls={prefixCls}
+          inputElement={getInputElement()}
+          handleReset={handleReset}
+          value={fixControlledValue(stateValue.value)}
+          focused={focused.value}
+          triggerFocus={focus}
+          suffix={getSuffix()}
+          disabled={disabled}
+          v-slots={slots}
+        />
+      )
+    }
+  },
+})

package/src/vc-input/inputProps.ts

@@ -0,0 +1,123 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+
+import type {
+  ChangeEventHandler,
+  CompositionEventHandler,
+  FocusEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+} from '../_util/EventInterface'
+import type { InputStatus } from '../_util/statusUtils'
+import type { VueNode } from '../_util/type'
+import { stringType } from '../_util/type'
+import PropTypes from '../_util/vue-types'
+import type { SizeType } from '../config-provider'
+import type { InputFocusOptions } from './utils/commonUtils'
+
+export const inputDefaultValue = Symbol() as unknown as string
+export const commonInputProps = () => {
+  return {
+    addonBefore: PropTypes.any,
+    addonAfter: PropTypes.any,
+    prefix: PropTypes.any,
+    suffix: PropTypes.any,
+    clearIcon: PropTypes.any,
+    affixWrapperClassName: String,
+    groupClassName: String,
+    wrapperClassName: String,
+    inputClassName: String,
+    allowClear: { type: Boolean, default: undefined },
+  }
+}
+export const baseInputProps = () => {
+  return {
+    ...commonInputProps(),
+    value: {
+      type: [String, Number, Symbol] as PropType<string | number>,
+      default: undefined,
+    },
+    defaultValue: {
+      type: [String, Number, Symbol] as PropType<string | number>,
+      default: undefined,
+    },
+    inputElement: PropTypes.any,
+    prefixCls: String,
+    disabled: { type: Boolean, default: undefined },
+    focused: { type: Boolean, default: undefined },
+    triggerFocus: Function as PropType<() => void>,
+    readonly: { type: Boolean, default: undefined },
+    handleReset: Function as PropType<MouseEventHandler>,
+    hidden: { type: Boolean, default: undefined },
+  }
+}
+export const inputProps = () => ({
+  ...baseInputProps(),
+  id: String,
+  placeholder: {
+    type: [String, Number] as PropType<string | number>,
+  },
+  autocomplete: String,
+  type: stringType<
+    | 'button'
+    | 'checkbox'
+    | 'color'
+    | 'date'
+    | 'datetime-local'
+    | 'email'
+    | 'file'
+    | 'hidden'
+    | 'image'
+    | 'month'
+    | 'number'
+    | 'password'
+    | 'radio'
+    | 'range'
+    | 'reset'
+    | 'search'
+    | 'submit'
+    | 'tel'
+    | 'text'
+    | 'time'
+    | 'url'
+    | 'week'
+  >('text'),
+  name: String,
+  size: { type: String as PropType<SizeType> },
+  autofocus: { type: Boolean, default: undefined },
+  lazy: { type: Boolean, default: true },
+  maxlength: Number,
+  loading: { type: Boolean, default: undefined },
+  bordered: { type: Boolean, default: undefined },
+  showCount: { type: [Boolean, Object] as PropType<boolean | ShowCountProps> },
+  htmlSize: Number,
+  onPressEnter: Function as PropType<KeyboardEventHandler>,
+  onKeydown: Function as PropType<KeyboardEventHandler>,
+  onKeyup: Function as PropType<KeyboardEventHandler>,
+  onFocus: Function as PropType<FocusEventHandler>,
+  onBlur: Function as PropType<FocusEventHandler>,
+  onChange: Function as PropType<ChangeEventHandler>,
+  onInput: Function as PropType<ChangeEventHandler>,
+  'onUpdate:value': Function as PropType<(val: string) => void>,
+  onCompositionstart: Function as PropType<CompositionEventHandler>,
+  onCompositionend: Function as PropType<CompositionEventHandler>,
+  valueModifiers: Object,
+  hidden: { type: Boolean, default: undefined },
+  status: String as PropType<InputStatus>,
+})
+export type InputProps = Partial<ExtractPropTypes<ReturnType<typeof inputProps>>>
+
+export interface ShowCountProps {
+  formatter: (args: { count: number; maxlength?: number; value?: string }) => VueNode
+}
+
+export interface InputRef {
+  focus: (options?: InputFocusOptions) => void
+  blur: () => void
+  setSelectionRange: (
+    start: number,
+    end: number,
+    direction?: 'forward' | 'backward' | 'none',
+  ) => void
+  select: () => void
+  input: HTMLInputElement | null
+}

package/src/vc-input/utils/commonUtils.ts

@@ -0,0 +1,105 @@
+import { filterEmpty } from '../../_util/props-util'
+
+const isValid = (value: any) => {
+  return (
+    value !== undefined &&
+    value !== null &&
+    (Array.isArray(value) ? filterEmpty(value).length : true)
+  )
+}
+
+export function hasPrefixSuffix(propsAndSlots: any) {
+  return (
+    isValid(propsAndSlots.prefix) ||
+    isValid(propsAndSlots.suffix) ||
+    isValid(propsAndSlots.allowClear)
+  )
+}
+
+export function hasAddon(propsAndSlots: any) {
+  return isValid(propsAndSlots.addonBefore) || isValid(propsAndSlots.addonAfter)
+}
+
+export function fixControlledValue(value: string | number) {
+  if (typeof value === 'undefined' || value === null) {
+    return ''
+  }
+  return String(value)
+}
+
+export function resolveOnChange(
+  target: HTMLInputElement,
+  e: Event,
+  onChange: Function,
+  targetValue?: string,
+) {
+  if (!onChange) {
+    return
+  }
+  const event: any = e
+
+  if (e.type === 'click') {
+    Object.defineProperty(event, 'target', {
+      writable: true,
+    })
+    Object.defineProperty(event, 'currentTarget', {
+      writable: true,
+    })
+    // click clear icon
+    //event = Object.create(e);
+    const currentTarget = target.cloneNode(true)
+
+    event.target = currentTarget
+    event.currentTarget = currentTarget
+    // change target ref value cause e.target.value should be '' when clear input
+    ;(currentTarget as any).value = ''
+    onChange(event)
+    return
+  }
+  // Trigger by composition event, this means we need force change the input value
+  if (targetValue !== undefined) {
+    Object.defineProperty(event, 'target', {
+      writable: true,
+    })
+    Object.defineProperty(event, 'currentTarget', {
+      writable: true,
+    })
+    event.target = target
+    event.currentTarget = target
+    target.value = targetValue
+    onChange(event)
+    return
+  }
+  onChange(event)
+}
+export interface InputFocusOptions extends FocusOptions {
+  cursor?: 'start' | 'end' | 'all'
+}
+
+export function triggerFocus(
+  element?: HTMLInputElement | HTMLTextAreaElement,
+  option?: InputFocusOptions,
+) {
+  if (!element) return
+
+  element.focus(option)
+
+  // Selection content
+  const { cursor } = option || {}
+  if (cursor) {
+    const len = element.value.length
+
+    switch (cursor) {
+      case 'start':
+        element.setSelectionRange(0, 0)
+        break
+
+      case 'end':
+        element.setSelectionRange(len, len)
+        break
+
+      default:
+        element.setSelectionRange(0, len)
+    }
+  }
+}

package/src/vc-input/utils/types.ts

@@ -0,0 +1,3 @@
+/** https://github.com/Microsoft/TypeScript/issues/29729 */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type LiteralUnion<T extends U, U> = T | (U & {})

package/src/vc-mentions/index.ts

@@ -0,0 +1,6 @@
+// base rc-mentions .6.2
+import Mentions from './src/Mentions'
+import Option from './src/Option'
+
+export { Option }
+export default Mentions