@antsoo-lib/components 0.1.11 → 0.1.13

package/src/_util/type.ts

@@ -1,95 +0,0 @@
-// @ts-ignore
-import type { App, Plugin, PropType, Ref, SlotsType, VNode } from 'vue'
-
-// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
-export const tuple = <T extends string[]>(...args: T) => args
-
-export const tupleNum = <T extends number[]>(...args: T) => args
-
-/**
- * https://stackoverflow.com/a/59187769
- * Extract the type of an element of an array/tuple without performing indexing
- */
-export type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer F)[] ? F : never
-
-/**
- * https://github.com/Microsoft/TypeScript/issues/29729
- */
-export type LiteralUnion<T extends string> = T | (string & {})
-
-export type Data = Record<string, unknown>
-
-export type Key = string | number
-
-type DefaultFactory<T> = (props: Data) => T | null | undefined
-
-export interface PropOptions<T = any, D = T> {
-  type?: PropType<T> | true | null
-  required?: boolean
-  default?: D | DefaultFactory<D> | null | undefined | object
-  validator?: (value: unknown) => boolean
-}
-
-declare type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void
-
-export type VueNode = VNodeChildAtom | VNodeChildAtom[] | VNode
-
-export const withInstall = <T>(comp: T) => {
-  const c = comp as any
-  c.install = function (app: App) {
-    app.component(c.displayName || c.name, comp)
-  }
-
-  return comp as T & Plugin
-}
-
-export type MaybeRef<T> = T | Ref<T>
-
-export function eventType<T>() {
-  return { type: [Function, Array] as PropType<T | T[]> }
-}
-
-export function objectType<T = {}>(defaultVal?: T) {
-  return { type: Object as PropType<T>, default: defaultVal as T }
-}
-
-export function booleanType(defaultVal?: boolean) {
-  return { type: Boolean, default: defaultVal as boolean }
-}
-
-export function functionType<T = () => {}>(defaultVal?: T) {
-  return { type: Function as PropType<T>, default: defaultVal as T }
-}
-
-export function anyType<T = any>(defaultVal?: T, required?: boolean) {
-  const type = { validator: () => true, default: defaultVal as T } as unknown
-  return required
-    ? (type as {
-        type: PropType<T>
-        default: T
-        required: true
-      })
-    : (type as {
-        default: T
-        type: PropType<T>
-      })
-}
-export function vNodeType<T = VueNode>() {
-  return { validator: () => true } as unknown as { type: PropType<T> }
-}
-
-export function arrayType<T extends any[]>(defaultVal?: T) {
-  return { type: Array as unknown as PropType<T>, default: defaultVal as T }
-}
-
-export function stringType<T extends string = string>(defaultVal?: T) {
-  return { type: String as unknown as PropType<T>, default: defaultVal as T }
-}
-
-export function someType<T>(types?: any[], defaultVal?: T) {
-  return types ? { type: types as PropType<T>, default: defaultVal as T } : anyType<T>(defaultVal)
-}
-
-export type CustomSlotsType<T> = SlotsType<T>
-
-export type AnyObject = Record<PropertyKey, any>

package/src/_util/unreachableException.ts

@@ -1,7 +0,0 @@
-export default class UnreachableException {
-  error: Error
-
-  constructor(value: any) {
-    this.error = new Error(`unreachable case: ${JSON.stringify(value)}`)
-  }
-}

package/src/_util/util.ts

@@ -1,102 +0,0 @@
-import type { VueNode } from './type'
-
-export const isFunction = (val) => typeof val === 'function'
-export const controlDefaultValue = Symbol('controlDefaultValue') as any
-export const isArray = Array.isArray
-export const isString = (val) => typeof val === 'string'
-export const isSymbol = (val) => typeof val === 'symbol'
-export const isObject = (val) => val !== null && typeof val === 'object'
-const onRE = /^on[^a-z]/
-const isOn = (key) => onRE.test(key)
-
-const cacheStringFunction = (fn) => {
-  const cache = Object.create(null)
-  return (str) => {
-    const hit = cache[str]
-    return hit || (cache[str] = fn(str))
-  }
-}
-const camelizeRE = /-(\w)/g
-const camelize = cacheStringFunction((str) => {
-  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))
-})
-
-const hyphenateRE = /\B([A-Z])/g
-const hyphenate = cacheStringFunction((str) => {
-  return str.replace(hyphenateRE, '-$1').toLowerCase()
-})
-
-const capitalize = cacheStringFunction((str) => {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-})
-
-const hasOwnProperty = Object.prototype.hasOwnProperty
-const hasOwn = (val, key) => hasOwnProperty.call(val, key)
-
-// change from vue sourcecode
-function resolvePropValue(options, props, key, value) {
-  const opt = options[key]
-  if (opt != null) {
-    const hasDefault = hasOwn(opt, 'default')
-    // default values
-    if (hasDefault && value === undefined) {
-      const defaultValue = opt.default
-      value = opt.type !== Function && isFunction(defaultValue) ? defaultValue() : defaultValue
-    }
-    // boolean casting
-    if (opt.type === Boolean) {
-      if (!hasOwn(props, key) && !hasDefault) {
-        value = false
-      } else if (value === '') {
-        value = true
-      }
-    }
-  }
-  return value
-}
-
-export function getDataAndAriaProps(props) {
-  return Object.keys(props).reduce((memo, key) => {
-    if (key.startsWith('data-') || key.startsWith('aria-')) {
-      memo[key] = props[key]
-    }
-    return memo
-  }, {})
-}
-
-export function toPx(val) {
-  if (typeof val === 'number') return `${val}px`
-  return val
-}
-
-export function renderHelper<T = Record<string, any>>(
-  v: VueNode | ((arg0: T) => VueNode),
-  props: T = {} as T,
-  defaultV?: any,
-) {
-  if (typeof v === 'function') {
-    return v(props)
-  }
-  return v ?? defaultV
-}
-export function wrapPromiseFn(openFn: (resolve: VoidFunction) => VoidFunction) {
-  let closeFn: VoidFunction
-
-  const closePromise = new Promise<boolean>((resolve) => {
-    closeFn = openFn(() => {
-      resolve(true)
-    })
-  })
-
-  const result: any = () => {
-    closeFn?.()
-  }
-
-  result.then = (filled: VoidFunction, rejected: VoidFunction) =>
-    closePromise.then(filled, rejected)
-  result.promise = closePromise
-
-  return result
-}
-
-export { cacheStringFunction, camelize, capitalize, hyphenate, isOn, resolvePropValue }

package/src/_util/vnode.ts

@@ -1,84 +0,0 @@
-import type { Slots, VNode, VNodeArrayChildren, VNodeProps } from 'vue'
-import { Comment, Fragment, render as VueRender, cloneVNode, isVNode } from 'vue'
-
-import type { RefObject } from './createRef'
-import { filterEmpty } from './props-util'
-import warning from './warning'
-
-type NodeProps = Record<string, any> &
-  Omit<VNodeProps, 'ref'> & { ref?: VNodeProps['ref'] | RefObject }
-
-export function cloneElement<T, U>(
-  vnode: VNode<T, U> | VNode<T, U>[],
-  nodeProps: NodeProps = {},
-  override = true,
-  mergeRef = false,
-): VNode<T, U> {
-  let ele = vnode
-  if (Array.isArray(vnode)) {
-    ele = filterEmpty(vnode)[0]
-  }
-  if (!ele) {
-    return null
-  }
-  const node = cloneVNode(ele as VNode<T, U>, nodeProps as any, mergeRef)
-
-  // cloneVNode内部是合并属性，这里改成覆盖属性
-  node.props = (override ? { ...node.props, ...nodeProps } : node.props) as any
-  warning(typeof node.props.class !== 'object', 'class must be string')
-  return node
-}
-
-export function cloneVNodes(vnodes, nodeProps = {}, override = true) {
-  return vnodes.map((vnode) => cloneElement(vnode, nodeProps, override))
-}
-
-export function deepCloneElement<T, U>(
-  vnode: VNode<T, U> | VNode<T, U>[],
-  nodeProps: NodeProps = {},
-  override = true,
-  mergeRef = false,
-) {
-  if (Array.isArray(vnode)) {
-    return vnode.map((item) => deepCloneElement(item, nodeProps, override, mergeRef))
-  } else {
-    // 需要判断是否为vnode方可进行clone操作
-    if (!isVNode(vnode)) {
-      return vnode
-    }
-    const cloned = cloneElement(vnode, nodeProps, override, mergeRef)
-    if (Array.isArray(cloned.children)) {
-      cloned.children = deepCloneElement(cloned.children as VNode<T, U>[])
-    }
-    return cloned
-  }
-}
-
-export function triggerVNodeUpdate(vm: VNode, attrs: Record<string, any>, dom: any) {
-  VueRender(cloneVNode(vm, { ...attrs }), dom)
-}
-
-const ensureValidVNode = (slot: VNodeArrayChildren | null) => {
-  return (slot || []).some((child) => {
-    if (!isVNode(child)) return true
-    if (child.type === Comment) return false
-    if (child.type === Fragment && !ensureValidVNode(child.children as VNodeArrayChildren))
-      return false
-    return true
-  })
-    ? slot
-    : null
-}
-
-export function customRenderSlot(
-  slots: Slots,
-  name: string,
-  props: Record<string, unknown>,
-  fallback?: () => VNodeArrayChildren,
-) {
-  const slot = slots[name]?.(props)
-  if (ensureValidVNode(slot)) {
-    return slot
-  }
-  return fallback?.()
-}

package/src/_util/vue-types/index.ts

@@ -1,45 +0,0 @@
-import type { CSSProperties } from 'vue'
-import type { VueTypeValidableDef, VueTypesInterface } from 'vue-types'
-import { createTypes } from 'vue-types'
-
-import type { VueNode } from '../type'
-
-const PropTypes = createTypes({
-  func: undefined,
-  bool: undefined,
-  string: undefined,
-  number: undefined,
-  array: undefined,
-  object: undefined,
-  integer: undefined,
-})
-
-PropTypes.extend([
-  {
-    name: 'looseBool',
-    getter: true,
-    type: Boolean,
-    default: undefined,
-  },
-  {
-    name: 'style',
-    getter: true,
-    type: [String, Object],
-    default: undefined,
-  },
-  {
-    name: 'VueNode',
-    getter: true,
-    type: null,
-  },
-])
-
-export function withUndefined<T extends { default?: any }>(type: T): T {
-  type.default = undefined
-  return type
-}
-export default PropTypes as VueTypesInterface & {
-  readonly looseBool: VueTypeValidableDef<boolean>
-  readonly style: VueTypeValidableDef<CSSProperties>
-  readonly VueNode: VueTypeValidableDef<VueNode>
-}

package/src/_util/warning.ts

@@ -1,21 +0,0 @@
-import vcWarning, { resetWarned } from '../vc-util/warning'
-
-export { resetWarned }
-export function noop() {}
-
-type Warning = (valid: boolean, component: string, message?: string) => void
-
-// eslint-disable-next-line import/no-mutable-exports
-let warning: Warning = noop
-if (process.env.NODE_ENV !== 'production') {
-  warning = (valid, component, message) => {
-    vcWarning(valid, `[ant-design-vue: ${component}] ${message}`)
-
-    // StrictMode will inject console which will not throw warning in React 17.
-    if (process.env.NODE_ENV === 'test') {
-      resetWarned()
-    }
-  }
-}
-
-export default warning

package/src/_util/wave/WaveEffect.tsx

@@ -1,172 +0,0 @@
-import type { CSSProperties } from 'vue'
-import { Transition, defineComponent, onBeforeUnmount, onMounted, render, shallowRef } from 'vue'
-
-import useState from '../hooks/useState'
-import wrapperRaf from '../raf'
-import { objectType } from '../type'
-import { getTargetWaveColor } from './util'
-
-function validateNum(value: number) {
-  return Number.isNaN(value) ? 0 : value
-}
-
-export interface WaveEffectProps {
-  className: string
-  target: HTMLElement
-}
-
-const WaveEffect = defineComponent({
-  props: {
-    target: objectType<HTMLElement>(),
-    className: String,
-  },
-  setup(props) {
-    const divRef = shallowRef<HTMLDivElement | null>(null)
-
-    const [color, setWaveColor] = useState<string | null>(null)
-    const [borderRadius, setBorderRadius] = useState<number[]>([])
-    const [left, setLeft] = useState(0)
-    const [top, setTop] = useState(0)
-    const [width, setWidth] = useState(0)
-    const [height, setHeight] = useState(0)
-    const [enabled, setEnabled] = useState(false)
-
-    function syncPos() {
-      const { target } = props
-      const nodeStyle = getComputedStyle(target)
-
-      // Get wave color from target
-      setWaveColor(getTargetWaveColor(target))
-
-      const isStatic = nodeStyle.position === 'static'
-
-      // Rect
-      const { borderLeftWidth, borderTopWidth } = nodeStyle
-      setLeft(isStatic ? target.offsetLeft : validateNum(-Number.parseFloat(borderLeftWidth)))
-      setTop(isStatic ? target.offsetTop : validateNum(-Number.parseFloat(borderTopWidth)))
-      setWidth(target.offsetWidth)
-      setHeight(target.offsetHeight)
-
-      // Get border radius
-      const {
-        borderTopLeftRadius,
-        borderTopRightRadius,
-        borderBottomLeftRadius,
-        borderBottomRightRadius,
-      } = nodeStyle
-
-      setBorderRadius(
-        [
-          borderTopLeftRadius,
-          borderTopRightRadius,
-          borderBottomRightRadius,
-          borderBottomLeftRadius,
-        ].map((radius) => validateNum(Number.parseFloat(radius))),
-      )
-    }
-    // Add resize observer to follow size
-    let resizeObserver: ResizeObserver
-    let rafId: number
-    let timeoutId: any
-    const clear = () => {
-      clearTimeout(timeoutId)
-      wrapperRaf.cancel(rafId)
-      resizeObserver?.disconnect()
-    }
-    const removeDom = () => {
-      const holder = divRef.value?.parentElement
-      if (holder) {
-        render(null, holder)
-        if (holder.parentElement) {
-          holder.parentElement.removeChild(holder)
-        }
-      }
-    }
-
-    onMounted(() => {
-      clear()
-      timeoutId = setTimeout(() => {
-        removeDom()
-      }, 5000)
-      const { target } = props
-      if (target) {
-        // We need delay to check position here
-        // since UI may change after click
-        rafId = wrapperRaf(() => {
-          syncPos()
-
-          setEnabled(true)
-        })
-
-        if (typeof ResizeObserver !== 'undefined') {
-          resizeObserver = new ResizeObserver(syncPos)
-
-          resizeObserver.observe(target)
-        }
-      }
-    })
-    onBeforeUnmount(() => {
-      clear()
-    })
-
-    const onTransitionend = (e: TransitionEvent) => {
-      if (e.propertyName === 'opacity') {
-        removeDom()
-      }
-    }
-    return () => {
-      if (!enabled.value) {
-        return null
-      }
-      const waveStyle = {
-        left: `${left.value}px`,
-        top: `${top.value}px`,
-        width: `${width.value}px`,
-        height: `${height.value}px`,
-        borderRadius: borderRadius.value.map((radius) => `${radius}px`).join(' '),
-      } as CSSProperties & {
-        [name: string]: number | string
-      }
-
-      if (color) {
-        waveStyle['--wave-color'] = color.value as string
-      }
-
-      return (
-        <Transition
-          appear
-          name="wave-motion"
-          appearFromClass="wave-motion-appear"
-          appearActiveClass="wave-motion-appear"
-          appearToClass="wave-motion-appear wave-motion-appear-active"
-        >
-          <div
-            ref={divRef}
-            class={props.className}
-            style={waveStyle}
-            onTransitionend={onTransitionend}
-          />
-        </Transition>
-      )
-    }
-  },
-})
-
-function showWaveEffect(node: HTMLElement, className: string) {
-  // Create holder
-  const holder = document.createElement('div')
-  holder.style.position = 'absolute'
-  holder.style.left = `0px`
-  holder.style.top = `0px`
-  node?.insertBefore(holder, node?.firstChild)
-
-  render(<WaveEffect target={node} className={className} />, holder)
-  return () => {
-    render(null, holder)
-    if (holder.parentElement) {
-      holder.parentElement.removeChild(holder)
-    }
-  }
-}
-
-export default showWaveEffect

package/src/_util/wave/index.tsx

@@ -1,96 +0,0 @@
-import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  watch,
-} from 'vue'
-
-import useConfigInject from '../../config-provider/hooks/useConfigInject'
-import isVisible from '../../vc-util/Dom/isVisible'
-import classNames from '../classNames'
-import { findDOMNode } from '../props-util'
-import useStyle from './style'
-import useWave from './useWave'
-
-export interface WaveProps {
-  disabled?: boolean
-}
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'Wave',
-  props: {
-    disabled: Boolean,
-  },
-  setup(props, { slots }) {
-    const instance = getCurrentInstance()
-    const { prefixCls, wave } = useConfigInject('wave', props)
-
-    // ============================== Style ===============================
-    const [, hashId] = useStyle(prefixCls)
-
-    // =============================== Wave ===============================
-    const showWave = useWave(
-      computed(() => classNames(prefixCls.value, hashId.value)),
-      wave,
-    )
-    let onClick: (e: MouseEvent) => void
-    const clear = () => {
-      const node = findDOMNode(instance) as HTMLElement
-      node.removeEventListener('click', onClick, true)
-    }
-    onMounted(() => {
-      watch(
-        () => props.disabled,
-        () => {
-          clear()
-          nextTick(() => {
-            const node: HTMLElement = findDOMNode(instance)
-            node?.removeEventListener('click', onClick, true)
-            if (!node || node.nodeType !== 1 || props.disabled) {
-              return
-            }
-
-            // Click handler
-            onClick = (e: MouseEvent) => {
-              // Fix radio button click twice
-              if (
-                (e.target as HTMLElement).tagName === 'INPUT' ||
-                !isVisible(e.target as HTMLElement) ||
-                // No need wave
-                !node.getAttribute ||
-                node.getAttribute('disabled') ||
-                (node as HTMLInputElement).disabled ||
-                node.className.includes('disabled') ||
-                node.className.includes('-leave')
-              ) {
-                return
-              }
-
-              showWave()
-            }
-
-            // Bind events
-            node.addEventListener('click', onClick, true)
-          })
-        },
-        {
-          immediate: true,
-          flush: 'post',
-        },
-      )
-    })
-    onBeforeUnmount(() => {
-      clear()
-    })
-
-    return () => {
-      // ============================== Render ==============================
-      const children = slots.default?.()[0]
-      return children
-    }
-  },
-})

package/src/_util/wave/style.ts

@@ -1,38 +0,0 @@
-import { genComponentStyleHook } from '../../theme/internal'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ComponentToken {}
-
-export type WaveToken = FullToken<'Wave'>
-
-const genWaveStyle: GenerateStyle<WaveToken> = (token) => {
-  const { componentCls, colorPrimary } = token
-  return {
-    [componentCls]: {
-      position: 'absolute',
-      background: 'transparent',
-      pointerEvents: 'none',
-      boxSizing: 'border-box',
-      color: `var(--wave-color, ${colorPrimary})`,
-
-      boxShadow: `0 0 0 0 currentcolor`,
-      opacity: 0.2,
-
-      // =================== Motion ===================
-      '&.wave-motion-appear': {
-        transition: [
-          `box-shadow 0.4s ${token.motionEaseOutCirc}`,
-          `opacity 2s ${token.motionEaseOutCirc}`,
-        ].join(','),
-
-        '&-active': {
-          boxShadow: `0 0 0 6px currentcolor`,
-          opacity: 0,
-        },
-      },
-    },
-  }
-}
-
-export default genComponentStyleHook('Wave', (token) => [genWaveStyle(token)])

package/src/_util/wave/useWave.ts

@@ -1,26 +0,0 @@
-import type { ComputedRef, Ref } from 'vue'
-import { getCurrentInstance, onBeforeUnmount } from 'vue'
-
-import { findDOMNode } from '../props-util'
-import showWaveEffect from './WaveEffect'
-
-export default function useWave(
-  className: Ref<string>,
-  wave?: ComputedRef<{ disabled?: boolean }>,
-): VoidFunction {
-  const instance = getCurrentInstance()
-  let stopWave: () => void
-  function showWave() {
-    const node = findDOMNode(instance)
-    stopWave?.()
-    if (wave?.value?.disabled || !node) {
-      return
-    }
-    stopWave = showWaveEffect(node, className.value)
-  }
-  onBeforeUnmount(() => {
-    stopWave?.()
-  })
-
-  return showWave
-}