@antsoo-lib/components 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antsoo-lib/components",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "publishConfig": {
     "access": "public",
@@ -14,6 +14,8 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.umd.js"
     },
+    "./locale/zh-CN": "./src/locale/zh_CN.ts",
+    "./locale/en-US": "./src/locale/en_US.ts",
     "./*": "./src/*",
     "./locale/*": "./src/locale/*.ts"
   },
@@ -21,7 +23,8 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "peerDependencies": {
     "vue": "^3.5.0"

package/src/_util/ActionButton.tsx

@@ -0,0 +1,124 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { defineComponent, onBeforeUnmount, onMounted, shallowRef } from 'vue'
+
+import Button from '../button'
+import type { ButtonProps } from '../button'
+import type { LegacyButtonType } from '../button/buttonTypes'
+import { convertLegacyProps } from '../button/buttonTypes'
+import useDestroyed from './hooks/useDestroyed'
+import { findDOMNode } from './props-util'
+import { objectType } from './type'
+
+const actionButtonProps = {
+  type: {
+    type: String as PropType<LegacyButtonType>,
+  },
+  actionFn: Function as PropType<(...args: any[]) => any | PromiseLike<any>>,
+  close: Function,
+  autofocus: Boolean,
+  prefixCls: String,
+  buttonProps: objectType<ButtonProps>(),
+  emitEvent: Boolean,
+  quitOnNullishReturnValue: Boolean,
+}
+
+export type ActionButtonProps = ExtractPropTypes<typeof actionButtonProps>
+
+function isThenable<T>(thing?: PromiseLike<T>): boolean {
+  return !!(thing && thing.then)
+}
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ActionButton',
+  props: actionButtonProps,
+  setup(props, { slots }) {
+    const clickedRef = shallowRef<boolean>(false)
+    const buttonRef = shallowRef()
+    const loading = shallowRef(false)
+    let timeoutId: any
+    const isDestroyed = useDestroyed()
+    onMounted(() => {
+      if (props.autofocus) {
+        timeoutId = setTimeout(() => findDOMNode(buttonRef.value)?.focus?.())
+      }
+    })
+    onBeforeUnmount(() => {
+      clearTimeout(timeoutId)
+    })
+
+    const onInternalClose = (...args: any[]) => {
+      props.close?.(...args)
+    }
+
+    const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
+      if (!isThenable(returnValueOfOnOk)) {
+        return
+      }
+      loading.value = true
+      returnValueOfOnOk!.then(
+        (...args: any[]) => {
+          if (!isDestroyed.value) {
+            loading.value = false
+          }
+          onInternalClose(...args)
+          clickedRef.value = false
+        },
+        (e: Error) => {
+          // See: https://github.com/ant-design/ant-design/issues/6183
+          if (!isDestroyed.value) {
+            loading.value = false
+          }
+          clickedRef.value = false
+          return Promise.reject(e)
+        },
+      )
+    }
+
+    const onClick = (e: MouseEvent) => {
+      const { actionFn } = props
+      if (clickedRef.value) {
+        return
+      }
+      clickedRef.value = true
+      if (!actionFn) {
+        onInternalClose()
+        return
+      }
+      let returnValueOfOnOk: PromiseLike<any>
+      if (props.emitEvent) {
+        returnValueOfOnOk = actionFn(e)
+        if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
+          clickedRef.value = false
+          onInternalClose(e)
+          return
+        }
+      } else if (actionFn.length) {
+        returnValueOfOnOk = actionFn(props.close)
+        // https://github.com/ant-design/ant-design/issues/23358
+        clickedRef.value = false
+      } else {
+        returnValueOfOnOk = actionFn()
+        if (!returnValueOfOnOk) {
+          onInternalClose()
+          return
+        }
+      }
+      handlePromiseOnOk(returnValueOfOnOk)
+    }
+    return () => {
+      const { type, prefixCls, buttonProps } = props
+      return (
+        <Button
+          {...convertLegacyProps(type)}
+          onClick={onClick}
+          loading={loading.value}
+          prefixCls={prefixCls}
+          {...buttonProps}
+          ref={buttonRef}
+          v-slots={slots}
+        ></Button>
+      )
+    }
+  },
+})

package/src/_util/BaseInput.tsx

@@ -0,0 +1,169 @@
+import type { PropType } from 'vue'
+import { computed, defineComponent, ref, shallowRef, watch } from 'vue'
+
+import { styleObjectToString } from '../vc-util/Dom/css'
+import type { BaseInputInnerExpose } from './BaseInputInner'
+import BaseInputInner from './BaseInputInner'
+import PropTypes from './vue-types'
+
+export interface BaseInputExpose {
+  focus: () => void
+  blur: () => void
+  input: HTMLInputElement | HTMLTextAreaElement | null
+  setSelectionRange: (
+    start: number,
+    end: number,
+    direction?: 'forward' | 'backward' | 'none',
+  ) => void
+  select: () => void
+  getSelectionStart: () => number | null
+  getSelectionEnd: () => number | null
+  getScrollTop: () => number | null
+  setScrollTop: (scrollTop: number) => void
+}
+const BaseInput = defineComponent({
+  compatConfig: { MODE: 3 },
+  inheritAttrs: false,
+  props: {
+    disabled: PropTypes.looseBool,
+    type: PropTypes.string,
+    value: PropTypes.any,
+    lazy: PropTypes.bool.def(true),
+    tag: {
+      type: String as PropType<'input' | 'textarea'>,
+      default: 'input',
+    },
+    size: PropTypes.string,
+    style: PropTypes.oneOfType([String, Object]),
+    class: PropTypes.string,
+  },
+  emits: [
+    'change',
+    'input',
+    'blur',
+    'keydown',
+    'focus',
+    'compositionstart',
+    'compositionend',
+    'keyup',
+    'paste',
+    'mousedown',
+  ],
+  setup(props, { emit, attrs, expose }) {
+    const inputRef = shallowRef<BaseInputInnerExpose>(null)
+    const renderValue = ref()
+    const isComposing = ref(false)
+    watch(
+      [() => props.value, isComposing],
+      () => {
+        if (isComposing.value) return
+        renderValue.value = props.value
+      },
+      { immediate: true },
+    )
+    const handleChange = (e: Event) => {
+      emit('change', e)
+    }
+    const onCompositionstart = (e: CompositionEvent) => {
+      isComposing.value = true
+      ;(e.target as any).composing = true
+      emit('compositionstart', e)
+    }
+    const onCompositionend = (e: CompositionEvent) => {
+      isComposing.value = false
+      ;(e.target as any).composing = false
+      emit('compositionend', e)
+      const event = document.createEvent('HTMLEvents')
+      event.initEvent('input', true, true)
+      e.target.dispatchEvent(event)
+      handleChange(e)
+    }
+    const handleInput = (e: Event) => {
+      if (isComposing.value && props.lazy) {
+        renderValue.value = (e.target as HTMLInputElement).value
+        return
+      }
+      emit('input', e)
+    }
+
+    const handleBlur = (e: Event) => {
+      emit('blur', e)
+    }
+    const handleFocus = (e: Event) => {
+      emit('focus', e)
+    }
+
+    const focus = () => {
+      if (inputRef.value) {
+        inputRef.value.focus()
+      }
+    }
+    const blur = () => {
+      if (inputRef.value) {
+        inputRef.value.blur()
+      }
+    }
+    const handleKeyDown = (e: KeyboardEvent) => {
+      emit('keydown', e)
+    }
+    const handleKeyUp = (e: KeyboardEvent) => {
+      emit('keyup', e)
+    }
+    const setSelectionRange = (
+      start: number,
+      end: number,
+      direction?: 'forward' | 'backward' | 'none',
+    ) => {
+      inputRef.value?.setSelectionRange(start, end, direction)
+    }
+
+    const select = () => {
+      inputRef.value?.select()
+    }
+    expose({
+      focus,
+      blur,
+      input: computed(() => inputRef.value?.input),
+      setSelectionRange,
+      select,
+      getSelectionStart: () => inputRef.value?.getSelectionStart(),
+      getSelectionEnd: () => inputRef.value?.getSelectionEnd(),
+      getScrollTop: () => inputRef.value?.getScrollTop(),
+    })
+    const handleMousedown = (e: MouseEvent) => {
+      emit('mousedown', e)
+    }
+    const handlePaste = (e: ClipboardEvent) => {
+      emit('paste', e)
+    }
+    const styleString = computed(() => {
+      return props.style && typeof props.style !== 'string'
+        ? styleObjectToString(props.style)
+        : props.style
+    })
+    return () => {
+      const { style, lazy, ...restProps } = props
+      return (
+        <BaseInputInner
+          {...restProps}
+          {...attrs}
+          style={styleString.value}
+          onInput={handleInput}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          ref={inputRef}
+          value={renderValue.value}
+          onCompositionstart={onCompositionstart}
+          onCompositionend={onCompositionend}
+          onKeyup={handleKeyUp}
+          onKeydown={handleKeyDown}
+          onPaste={handlePaste}
+          onMousedown={handleMousedown}
+        />
+      )
+    }
+  },
+})
+
+export default BaseInput

package/src/_util/BaseInputInner.tsx

@@ -0,0 +1,97 @@
+import type { PropType } from 'vue'
+import { defineComponent, shallowRef } from 'vue'
+
+import PropTypes from './vue-types'
+
+export interface BaseInputInnerExpose {
+  focus: () => void
+  blur: () => void
+  input: HTMLInputElement | HTMLTextAreaElement | null
+  setSelectionRange: (
+    start: number,
+    end: number,
+    direction?: 'forward' | 'backward' | 'none',
+  ) => void
+  select: () => void
+  getSelectionStart: () => number | null
+  getSelectionEnd: () => number | null
+  getScrollTop: () => number | null
+  setScrollTop: (scrollTop: number) => void
+}
+const BaseInputInner = defineComponent({
+  compatConfig: { MODE: 3 },
+  // inheritAttrs: false,
+  props: {
+    disabled: PropTypes.looseBool,
+    type: PropTypes.string,
+    value: PropTypes.any,
+    tag: {
+      type: String as PropType<'input' | 'textarea'>,
+      default: 'input',
+    },
+    size: PropTypes.string,
+    onChange: Function as PropType<(e: Event) => void>,
+    onInput: Function as PropType<(e: Event) => void>,
+    onBlur: Function as PropType<(e: Event) => void>,
+    onFocus: Function as PropType<(e: Event) => void>,
+    onKeydown: Function as PropType<(e: Event) => void>,
+    onCompositionstart: Function as PropType<(e: Event) => void>,
+    onCompositionend: Function as PropType<(e: Event) => void>,
+    onKeyup: Function as PropType<(e: Event) => void>,
+    onPaste: Function as PropType<(e: Event) => void>,
+    onMousedown: Function as PropType<(e: Event) => void>,
+  },
+  emits: [
+    'change',
+    'input',
+    'blur',
+    'keydown',
+    'focus',
+    'compositionstart',
+    'compositionend',
+    'keyup',
+    'paste',
+    'mousedown',
+  ],
+  setup(props, { expose }) {
+    const inputRef = shallowRef(null)
+
+    const focus = () => {
+      if (inputRef.value) {
+        inputRef.value.focus()
+      }
+    }
+    const blur = () => {
+      if (inputRef.value) {
+        inputRef.value.blur()
+      }
+    }
+    const setSelectionRange = (
+      start: number,
+      end: number,
+      direction?: 'forward' | 'backward' | 'none',
+    ) => {
+      inputRef.value?.setSelectionRange(start, end, direction)
+    }
+
+    const select = () => {
+      inputRef.value?.select()
+    }
+    expose({
+      focus,
+      blur,
+      input: inputRef,
+      setSelectionRange,
+      select,
+      getSelectionStart: () => inputRef.value?.selectionStart,
+      getSelectionEnd: () => inputRef.value?.selectionEnd,
+      getScrollTop: () => inputRef.value?.scrollTop,
+    })
+    return () => {
+      const { tag: Tag, value, ...restProps } = props
+      return <Tag {...restProps} ref={inputRef} value={value} />
+    }
+  },
+})
+
+export default BaseInputInner

package/src/_util/BaseMixin.ts

@@ -0,0 +1,46 @@
+import { nextTick } from 'vue'
+
+import { getOptionProps } from './props-util'
+
+export default {
+  methods: {
+    setState(state = {}, callback: () => any) {
+      let newState = typeof state === 'function' ? state(this.$data, this.$props) : state
+      if (this.getDerivedStateFromProps) {
+        const s = this.getDerivedStateFromProps(getOptionProps(this), {
+          ...this.$data,
+          ...newState,
+        })
+        if (s === null) {
+          return
+        } else {
+          newState = { ...newState, ...(s || {}) }
+        }
+      }
+      Object.assign(this.$data, newState)
+      if (this._.isMounted) {
+        this.$forceUpdate()
+      }
+      nextTick(() => {
+        callback && callback()
+      })
+    },
+    __emit() {
+      // 直接调用事件，底层组件不需要vueTool记录events
+      // eslint-disable-next-line prefer-rest-params
+      const args = [].slice.call(arguments, 0)
+      let eventName = args[0]
+      eventName = `on${eventName[0].toUpperCase()}${eventName.substring(1)}`
+      const event = this.$props[eventName] || this.$attrs[eventName]
+      if (args.length && event) {
+        if (Array.isArray(event)) {
+          for (let i = 0, l = event.length; i < l; i++) {
+            event[i](...args.slice(1))
+          }
+        } else {
+          event(...args.slice(1))
+        }
+      }
+    },
+  },
+}

package/src/_util/EventInterface.ts

@@ -0,0 +1,19 @@
+export type FocusEventHandler = (e: FocusEvent) => void
+export type MouseEventHandler = (e: MouseEvent) => void
+export type KeyboardEventHandler = (e: KeyboardEvent) => void
+export type CompositionEventHandler = (e: CompositionEvent) => void
+export type ClipboardEventHandler = (e: ClipboardEvent) => void
+export type ChangeEventHandler = (e: ChangeEvent) => void
+export type WheelEventHandler = (e: WheelEvent) => void
+export type ChangeEvent = Event & {
+  target: {
+    value?: string | undefined
+  }
+}
+export type CheckboxChangeEvent = Event & {
+  target: {
+    checked?: boolean
+  }
+}
+
+export type EventHandler = (...args: any[]) => void