@antsoo-lib/components 0.1.2 → 0.1.4

package/src/_util/pickAttrs.ts

@@ -0,0 +1,74 @@
+const attributes = `accept acceptcharset accesskey action allowfullscreen allowtransparency
+alt async autocomplete autofocus autoplay capture cellpadding cellspacing challenge
+charset checked classid classname colspan cols content contenteditable contextmenu
+controls coords crossorigin data datetime default defer dir disabled download draggable
+enctype form formaction formenctype formmethod formnovalidate formtarget frameborder
+headers height hidden high href hreflang htmlfor for httpequiv icon id inputmode integrity
+is keyparams keytype kind label lang list loop low manifest marginheight marginwidth max maxlength media
+mediagroup method min minlength multiple muted name novalidate nonce open
+optimum pattern placeholder poster preload radiogroup readonly rel required
+reversed role rowspan rows sandbox scope scoped scrolling seamless selected
+shape size sizes span spellcheck src srcdoc srclang srcset start step style
+summary tabindex target title type usemap value width wmode wrap`
+
+const eventsName = `onCopy onCut onPaste onCompositionend onCompositionstart onCompositionupdate onKeydown
+    onKeypress onKeyup onFocus onBlur onChange onInput onSubmit onClick onContextmenu onDoubleclick onDblclick
+    onDrag onDragend onDragenter onDragexit onDragleave onDragover onDragstart onDrop onMousedown
+    onMouseenter onMouseleave onMousemove onMouseout onMouseover onMouseup onSelect onTouchcancel
+    onTouchend onTouchmove onTouchstart onTouchstartPassive onTouchmovePassive onScroll onWheel onAbort onCanplay onCanplaythrough
+    onDurationchange onEmptied onEncrypted onEnded onError onLoadeddata onLoadedmetadata
+    onLoadstart onPause onPlay onPlaying onProgress onRatechange onSeeked onSeeking onStalled onSuspend onTimeupdate onVolumechange onWaiting onLoad onError`
+
+const propList = `${attributes} ${eventsName}`.split(/\s+/)
+
+const ariaPrefix = 'aria-'
+const dataPrefix = 'data-'
+
+function match(key: string, prefix: string) {
+  return key.indexOf(prefix) === 0
+}
+
+export interface PickConfig {
+  aria?: boolean
+  data?: boolean
+  attr?: boolean
+}
+
+/**
+ * Picker props from exist props with filter
+ * @param props Passed props
+ * @param ariaOnly boolean | { aria?: boolean; data?: boolean; attr?: boolean; } filter config
+ */
+export default function pickAttrs(props: object, ariaOnly: boolean | PickConfig = false) {
+  let mergedConfig
+  if (ariaOnly === false) {
+    mergedConfig = {
+      aria: true,
+      data: true,
+      attr: true,
+    }
+  } else if (ariaOnly === true) {
+    mergedConfig = {
+      aria: true,
+    }
+  } else {
+    mergedConfig = {
+      ...ariaOnly,
+    }
+  }
+
+  const attrs = {}
+  Object.keys(props).forEach((key) => {
+    if (
+      // Aria
+      (mergedConfig.aria && (key === 'role' || match(key, ariaPrefix))) ||
+      // Data
+      (mergedConfig.data && match(key, dataPrefix)) ||
+      // Attr
+      (mergedConfig.attr && (propList.includes(key) || propList.includes(key.toLowerCase())))
+    ) {
+      attrs[key] = props[key]
+    }
+  })
+  return attrs
+}

package/src/_util/placements.ts

@@ -0,0 +1,111 @@
+import { placements } from '../vc-tooltip/src/placements'
+
+const autoAdjustOverflowEnabled = {
+  adjustX: 1,
+  adjustY: 1,
+}
+
+const autoAdjustOverflowDisabled = {
+  adjustX: 0,
+  adjustY: 0,
+}
+
+const targetOffset = [0, 0]
+
+export interface AdjustOverflow {
+  adjustX?: 0 | 1
+  adjustY?: 0 | 1
+}
+
+export interface PlacementsConfig {
+  arrowWidth?: number
+  horizontalArrowShift?: number
+  verticalArrowShift?: number
+  arrowPointAtCenter?: boolean
+  autoAdjustOverflow?: boolean | AdjustOverflow
+}
+
+export function getOverflowOptions(autoAdjustOverflow?: boolean | AdjustOverflow) {
+  if (typeof autoAdjustOverflow === 'boolean') {
+    return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled
+  }
+  return {
+    ...autoAdjustOverflowDisabled,
+    ...autoAdjustOverflow,
+  }
+}
+
+export default function getPlacements(config: PlacementsConfig) {
+  const {
+    arrowWidth = 4,
+    horizontalArrowShift = 16,
+    verticalArrowShift = 8,
+    autoAdjustOverflow,
+    arrowPointAtCenter,
+  } = config
+  const placementMap = {
+    left: {
+      points: ['cr', 'cl'],
+      offset: [-4, 0],
+    },
+    right: {
+      points: ['cl', 'cr'],
+      offset: [4, 0],
+    },
+    top: {
+      points: ['bc', 'tc'],
+      offset: [0, -4],
+    },
+    bottom: {
+      points: ['tc', 'bc'],
+      offset: [0, 4],
+    },
+    topLeft: {
+      points: ['bl', 'tc'],
+      offset: [-(horizontalArrowShift + arrowWidth), -4],
+    },
+    leftTop: {
+      points: ['tr', 'cl'],
+      offset: [-4, -(verticalArrowShift + arrowWidth)],
+    },
+    topRight: {
+      points: ['br', 'tc'],
+      offset: [horizontalArrowShift + arrowWidth, -4],
+    },
+    rightTop: {
+      points: ['tl', 'cr'],
+      offset: [4, -(verticalArrowShift + arrowWidth)],
+    },
+    bottomRight: {
+      points: ['tr', 'bc'],
+      offset: [horizontalArrowShift + arrowWidth, 4],
+    },
+    rightBottom: {
+      points: ['bl', 'cr'],
+      offset: [4, verticalArrowShift + arrowWidth],
+    },
+    bottomLeft: {
+      points: ['tl', 'bc'],
+      offset: [-(horizontalArrowShift + arrowWidth), 4],
+    },
+    leftBottom: {
+      points: ['br', 'cl'],
+      offset: [-4, verticalArrowShift + arrowWidth],
+    },
+  }
+  Object.keys(placementMap).forEach((key) => {
+    placementMap[key] = arrowPointAtCenter
+      ? {
+          ...placementMap[key],
+          overflow: getOverflowOptions(autoAdjustOverflow),
+          targetOffset,
+        }
+      : {
+          ...placements[key],
+          overflow: getOverflowOptions(autoAdjustOverflow),
+        }
+
+    placementMap[key].ignoreShake = true
+  })
+  return placementMap
+}

package/src/_util/props-util/index.ts

@@ -0,0 +1,287 @@
+import { Comment, Fragment, Text, isVNode } from 'vue'
+
+import classNames from '../classNames'
+import type { VueInstance } from '../hooks/_vueuse/unrefElement'
+import isValid from '../isValid'
+import { camelize, hyphenate, isOn, resolvePropValue } from '../util'
+import initDefaultProps from './initDefaultProps'
+
+// function getType(fn) {
+//   const match = fn && fn.toString().match(/^\s*function (\w+)/);
+//   return match ? match[1] : '';
+// }
+
+const splitAttrs = (attrs: any) => {
+  const allAttrs = Object.keys(attrs)
+  const eventAttrs: Record<string, any> = {}
+  const onEvents: Record<string, any> = {}
+  const extraAttrs: Record<string, any> = {}
+  for (let i = 0, l = allAttrs.length; i < l; i++) {
+    const key = allAttrs[i]
+    if (isOn(key)) {
+      eventAttrs[key[2].toLowerCase() + key.slice(3)] = attrs[key]
+      onEvents[key] = attrs[key]
+    } else {
+      extraAttrs[key] = attrs[key]
+    }
+  }
+  return { onEvents, events: eventAttrs, extraAttrs }
+}
+const parseStyleText = (cssText = '', camel = false) => {
+  const res = {}
+  const listDelimiter = /;(?![^(]*\))/g
+  const propertyDelimiter = /:(.+)/
+  if (typeof cssText === 'object') return cssText
+  cssText.split(listDelimiter).forEach((item) => {
+    if (item) {
+      const tmp = item.split(propertyDelimiter)
+      if (tmp.length > 1) {
+        const k = camel ? camelize(tmp[0].trim()) : tmp[0].trim()
+        res[k] = tmp[1].trim()
+      }
+    }
+  })
+  return res
+}
+
+const hasProp = (instance: any, prop: string) => {
+  return instance[prop] !== undefined
+}
+
+export const skipFlattenKey = Symbol('skipFlatten')
+const flattenChildren = (children = [], filterEmpty = true) => {
+  const temp = Array.isArray(children) ? children : [children]
+  const res = []
+  temp.forEach((child) => {
+    if (Array.isArray(child)) {
+      res.push(...flattenChildren(child, filterEmpty))
+    } else if (child && child.type === Fragment) {
+      if (child.key === skipFlattenKey) {
+        res.push(child)
+      } else {
+        res.push(...flattenChildren(child.children, filterEmpty))
+      }
+    } else if (child && isVNode(child)) {
+      if (filterEmpty && !isEmptyElement(child)) {
+        res.push(child)
+      } else if (!filterEmpty) {
+        res.push(child)
+      }
+    } else if (isValid(child)) {
+      res.push(child)
+    }
+  })
+  return res
+}
+
+const getSlot = (self: any, name = 'default', options = {}) => {
+  if (isVNode(self)) {
+    if (self.type === Fragment) {
+      return name === 'default' ? flattenChildren(self.children as any[]) : []
+    } else if (self.children && self.children[name]) {
+      return flattenChildren(self.children[name](options))
+    } else {
+      return []
+    }
+  } else {
+    const res = self.$slots[name] && self.$slots[name](options)
+    return flattenChildren(res)
+  }
+}
+
+const findDOMNode = (instance: any) => {
+  let node = instance?.vnode?.el || (instance && (instance.$el || instance))
+  while (node && !node.tagName) {
+    node = node.nextSibling
+  }
+  return node
+}
+const getOptionProps = (instance: VueInstance) => {
+  const res = {}
+  if (instance.$ && instance.$.vnode) {
+    const props = instance.$.vnode.props || {}
+    Object.keys(instance.$props).forEach((k) => {
+      const v = instance.$props[k]
+      const hyphenateKey = hyphenate(k)
+      if (v !== undefined || hyphenateKey in props) {
+        res[k] = v // 直接取 $props[k]
+      }
+    })
+  } else if (isVNode(instance) && typeof instance.type === 'object') {
+    const originProps = instance.props || {}
+    const props = {}
+    Object.keys(originProps).forEach((key) => {
+      props[camelize(key)] = originProps[key]
+    })
+    const options = (instance.type as any).props || {}
+    Object.keys(options).forEach((k) => {
+      const v = resolvePropValue(options, props, k, props[k])
+      if (v !== undefined || k in props) {
+        res[k] = v
+      }
+    })
+  }
+  return res
+}
+const getComponent = (instance: any, prop = 'default', options = instance, execute = true) => {
+  let com
+  if (instance.$) {
+    const temp = instance[prop]
+    if (temp !== undefined) {
+      return typeof temp === 'function' && execute ? temp(options) : temp
+    } else {
+      com = instance.$slots[prop]
+      com = execute && com ? com(options) : com
+    }
+  } else if (isVNode(instance)) {
+    const temp = instance.props && instance.props[prop]
+    if (temp !== undefined && instance.props !== null) {
+      return typeof temp === 'function' && execute ? temp(options) : temp
+    } else if (instance.type === Fragment) {
+      com = instance.children
+    } else if (instance.children && instance.children[prop]) {
+      com = instance.children[prop]
+      com = execute && com ? com(options) : com
+    }
+  }
+  if (Array.isArray(com)) {
+    com = flattenChildren(com)
+    com = com.length === 1 ? com[0] : com
+    com = com.length === 0 ? undefined : com
+  }
+  return com
+}
+
+const getKey = (ele: any) => {
+  const key = ele.key
+  return key
+}
+
+export function getEvents(ele: any = {}, on = true) {
+  let props = {}
+  if (ele.$) {
+    props = { ...props, ...ele.$attrs }
+  } else {
+    props = { ...props, ...ele.props }
+  }
+  return splitAttrs(props)[on ? 'onEvents' : 'events']
+}
+
+export function getClass(ele: any) {
+  const props = (isVNode(ele) ? ele.props : ele.$attrs) || {}
+  const tempCls = props.class || {}
+  let cls = {}
+  if (typeof tempCls === 'string') {
+    tempCls.split(' ').forEach((c) => {
+      cls[c.trim()] = true
+    })
+  } else if (Array.isArray(tempCls)) {
+    classNames(tempCls)
+      .split(' ')
+      .forEach((c) => {
+        cls[c.trim()] = true
+      })
+  } else {
+    cls = { ...cls, ...tempCls }
+  }
+  return cls
+}
+export function getStyle(ele: any, camel?: boolean) {
+  const props = (isVNode(ele) ? ele.props : ele.$attrs) || {}
+  let style = props.style || {}
+  if (typeof style === 'string') {
+    style = parseStyleText(style, camel)
+  } else if (camel && style) {
+    // 驼峰化
+    const res = {}
+    Object.keys(style).forEach((k) => (res[camelize(k)] = style[k]))
+    return res
+  }
+  return style
+}
+
+export function getComponentName(opts: any) {
+  return opts && (opts.Ctor.options.name || opts.tag)
+}
+
+export function isFragment(c: any) {
+  return c.length === 1 && c[0].type === Fragment
+}
+
+export function isEmptyContent(c: any) {
+  return c === undefined || c === null || c === '' || (Array.isArray(c) && c.length === 0)
+}
+
+export function isEmptyElement(c: any) {
+  return (
+    c &&
+    (c.type === Comment ||
+      (c.type === Fragment && c.children.length === 0) ||
+      (c.type === Text && c.children.trim() === ''))
+  )
+}
+
+export function isEmptySlot(c: any) {
+  return !c || c().every(isEmptyElement)
+}
+
+export function isStringElement(c: any) {
+  return c && c.type === Text
+}
+
+export function filterEmpty(children = []) {
+  const res = []
+  children.forEach((child) => {
+    if (Array.isArray(child)) {
+      res.push(...child)
+    } else if (child?.type === Fragment) {
+      res.push(...filterEmpty(child.children))
+    } else {
+      res.push(child)
+    }
+  })
+  return res.filter((c) => !isEmptyElement(c))
+}
+
+export function filterEmptyWithUndefined(children: any[]) {
+  if (children) {
+    const coms = filterEmpty(children)
+    return coms.length ? coms : undefined
+  } else {
+    return children
+  }
+}
+
+function isValidElement(element: any) {
+  if (Array.isArray(element) && element.length === 1) {
+    element = element[0]
+  }
+  return element && element.__v_isVNode && typeof element.type !== 'symbol' // remove text node
+}
+
+function getPropsSlot(slots: any, props: any, prop = 'default') {
+  return props[prop] ?? slots[prop]?.()
+}
+
+export const getTextFromElement = (ele: any) => {
+  if (isValidElement(ele) && isStringElement(ele[0])) {
+    return ele[0].children
+  }
+  return ele
+}
+export {
+  camelize,
+  findDOMNode,
+  flattenChildren,
+  getComponent,
+  getKey,
+  getOptionProps,
+  getPropsSlot,
+  getSlot,
+  hasProp,
+  initDefaultProps,
+  isValidElement,
+  parseStyleText,
+  splitAttrs,
+}
+export default hasProp

package/src/_util/props-util/initDefaultProps.ts

@@ -0,0 +1,34 @@
+import type { PropType } from 'vue'
+import type { VueTypeDef, VueTypeValidableDef } from 'vue-types'
+
+const initDefaultProps = <T>(
+  types: T,
+  defaultProps: {
+    [K in keyof T]?: T[K] extends VueTypeValidableDef<infer U>
+      ? U
+      : T[K] extends VueTypeDef<infer U>
+        ? U
+        : T[K] extends { type: PropType<infer U> }
+          ? U
+          : any
+  },
+): T => {
+  const propTypes: T = { ...types }
+  Object.keys(defaultProps).forEach((k) => {
+    const prop = propTypes[k] as VueTypeValidableDef
+    if (prop) {
+      if (prop.type || prop.default) {
+        prop.default = defaultProps[k]
+      } else if (prop.def) {
+        prop.def(defaultProps[k])
+      } else {
+        propTypes[k] = { type: prop, default: defaultProps[k] }
+      }
+    } else {
+      throw new Error(`not have ${k} prop`)
+    }
+  })
+  return propTypes
+}
+
+export default initDefaultProps

package/src/_util/raf.ts

@@ -0,0 +1,47 @@
+let raf = (callback: FrameRequestCallback) => setTimeout(callback, 16) as any
+let caf = (num: number) => clearTimeout(num)
+
+if (typeof window !== 'undefined' && 'requestAnimationFrame' in window) {
+  raf = (callback: FrameRequestCallback) => window.requestAnimationFrame(callback)
+  caf = (handle: number) => window.cancelAnimationFrame(handle)
+}
+
+let rafUUID = 0
+const rafIds = new Map<number, number>()
+
+function cleanup(id: number) {
+  rafIds.delete(id)
+}
+
+export default function wrapperRaf(callback: () => void, times = 1): number {
+  rafUUID += 1
+  const id = rafUUID
+
+  function callRef(leftTimes: number) {
+    if (leftTimes === 0) {
+      // Clean up
+      cleanup(id)
+
+      // Trigger
+      callback()
+    } else {
+      // Next raf
+      const realId = raf(() => {
+        callRef(leftTimes - 1)
+      })
+
+      // Bind real raf id
+      rafIds.set(id, realId)
+    }
+  }
+
+  callRef(times)
+
+  return id
+}
+
+wrapperRaf.cancel = (id: number) => {
+  const realId = rafIds.get(id)
+  cleanup(realId)
+  return caf(realId)
+}

package/src/_util/reactivePick.ts

@@ -0,0 +1,16 @@
+import fromPairs from 'lodash-es/fromPairs'
+
+import type { UnwrapRef } from 'vue'
+import { reactive, toRef } from 'vue'
+
+/**
+ * Reactively pick fields from a reactive object
+ *
+ * @see https://vueuse.js.org/reactivePick
+ */
+export function reactivePick<T extends object, K extends keyof T>(
+  obj: T,
+  ...keys: K[]
+): { [S in K]: UnwrapRef<T[S]> } {
+  return reactive(fromPairs(keys.map((k) => [k, toRef(obj, k)]))) as any
+}

package/src/_util/requestAnimationTimeout.ts

@@ -0,0 +1,24 @@
+import getRequestAnimationFrame, {
+  cancelRequestAnimationFrame as caf,
+} from './getRequestAnimationFrame'
+
+const raf = getRequestAnimationFrame()
+
+export const cancelAnimationTimeout = (frame) => caf(frame.id)
+
+export const requestAnimationTimeout = (callback, delay = 0) => {
+  const start = Date.now()
+  function timeout() {
+    if (Date.now() - start >= delay) {
+      callback.call()
+    } else {
+      frame.id = raf(timeout)
+    }
+  }
+
+  const frame = {
+    id: raf(timeout),
+  }
+
+  return frame
+}

package/src/_util/responsiveObserve.ts

@@ -0,0 +1,86 @@
+import { computed } from 'vue'
+
+import type { GlobalToken } from '../theme/interface'
+import { useToken } from '../theme/internal'
+
+export type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+export type BreakpointMap = Record<Breakpoint, string>
+export type ScreenMap = Partial<Record<Breakpoint, boolean>>
+export type ScreenSizeMap = Partial<Record<Breakpoint, number>>
+
+export const responsiveArray: Breakpoint[] = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs']
+type SubscribeFunc = (screens: ScreenMap) => void
+
+const getResponsiveMap = (token: GlobalToken): BreakpointMap => ({
+  xs: `(max-width: ${token.screenXSMax}px)`,
+  sm: `(min-width: ${token.screenSM}px)`,
+  md: `(min-width: ${token.screenMD}px)`,
+  lg: `(min-width: ${token.screenLG}px)`,
+  xl: `(min-width: ${token.screenXL}px)`,
+  xxl: `(min-width: ${token.screenXXL}px)`,
+  xxxl: `{min-width: ${token.screenXXXL}px}`,
+})
+
+export default function useResponsiveObserver() {
+  const [, token] = useToken()
+
+  return computed(() => {
+    const responsiveMap: BreakpointMap = getResponsiveMap(token.value)
+    const subscribers = new Map<number, SubscribeFunc>()
+    let subUid = -1
+    let screens = {}
+
+    return {
+      matchHandlers: {} as {
+        [prop: string]: {
+          mql: MediaQueryList
+          listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null
+        }
+      },
+      dispatch(pointMap: ScreenMap) {
+        screens = pointMap
+        subscribers.forEach((func) => func(screens))
+        return subscribers.size >= 1
+      },
+      subscribe(func: SubscribeFunc): number {
+        if (!subscribers.size) this.register()
+        subUid += 1
+        subscribers.set(subUid, func)
+        func(screens)
+        return subUid
+      },
+      unsubscribe(paramToken: number) {
+        subscribers.delete(paramToken)
+        if (!subscribers.size) this.unregister()
+      },
+      unregister() {
+        Object.keys(responsiveMap).forEach((screen: string) => {
+          const matchMediaQuery = responsiveMap[screen]
+          const handler = this.matchHandlers[matchMediaQuery]
+          handler?.mql.removeListener(handler?.listener)
+        })
+        subscribers.clear()
+      },
+      register() {
+        Object.keys(responsiveMap).forEach((screen: string) => {
+          const matchMediaQuery = responsiveMap[screen]
+          const listener = ({ matches }: { matches: boolean }) => {
+            this.dispatch({
+              ...screens,
+              [screen]: matches,
+            })
+          }
+          const mql = window.matchMedia(matchMediaQuery)
+          mql.addListener(listener)
+          this.matchHandlers[matchMediaQuery] = {
+            mql,
+            listener,
+          }
+
+          listener(mql)
+        })
+      },
+      responsiveMap,
+    }
+  })
+}