@v-c/util 0.0.4 → 0.0.6

package/src/PortalWrapper.tsx

@@ -1,217 +0,0 @@
-import type { SlotsType } from 'vue'
-import type { PortalRef } from './Portal'
-import { defineComponent, onBeforeUnmount, onMounted, onUpdated, shallowRef } from 'vue'
-import canUseDom from './Dom/canUseDom'
-import ScrollLocker from './Dom/scrollLocker'
-import Portal from './Portal'
-import raf from './raf'
-import setStyle from './setStyle'
-
-// import raf from './raf';
-
-let openCount = 0
-const supportDom = canUseDom()
-
-/**
- * @private
- */
-export function getOpenCount() {
-  return process.env.NODE_ENV === 'test' ? openCount : 0
-}
-
-// https://github.com/ant-design/ant-design/issues/19340
-// https://github.com/ant-design/ant-design/issues/19332
-let cacheOverflow = {}
-
-function getParent(getContainer: GetContainer) {
-  if (!supportDom)
-    return null
-
-  if (getContainer) {
-    if (typeof getContainer === 'string')
-      return document.querySelectorAll(getContainer)[0]
-
-    if (typeof getContainer === 'function')
-      return getContainer()
-
-    if (
-      typeof getContainer === 'object'
-      && getContainer instanceof window.HTMLElement
-    ) {
-      return getContainer
-    }
-  }
-  return document.body
-}
-
-export type GetContainer = string | HTMLElement | (() => HTMLElement)
-
-export type DefaultSlotInfo = SlotsType<{
-  default: {
-    getOpenCount: () => number
-    getContainer: () => HTMLElement
-    switchScrollingEffect: () => void
-    scrollLocker: ScrollLocker
-  }
-}>
-
-export interface PortalWrapperProps {
-  visible?: boolean
-  getContainer?: GetContainer
-  wrapperClassName?: string
-  forceRender?: boolean
-}
-
-const PortalWrapper = defineComponent<PortalWrapperProps, any, string, DefaultSlotInfo>((props, ctx) => {
-  const container = shallowRef<HTMLElement>()
-  const componentRef = shallowRef<PortalRef>()
-  const rafId = shallowRef<number>()
-  const scrollLocker = shallowRef<ScrollLocker>()
-
-  const removeCurrentContainer = () => {
-    // Portal will remove from `parentNode`.
-    // Let's handle this again to avoid refactor issue.
-    container.value?.parentNode?.removeChild(container.value)
-  }
-
-  const updateOpenCount = (prevProps?: Partial<PortalWrapperProps>) => {
-    const { visible: prevVisible, getContainer: prevGetContainer }
-        = prevProps || {}
-    const { visible, getContainer } = props
-
-    // Update count
-    if (
-      visible !== prevVisible
-      && supportDom
-      && getParent(getContainer!) === document.body
-    ) {
-      if (visible && !prevVisible)
-        openCount += 1
-      else if (prevProps)
-        openCount -= 1
-    }
-
-    // Clean up container if needed
-    const getContainerIsFunc
-            = typeof getContainer === 'function'
-            && typeof prevGetContainer === 'function'
-    if (
-      getContainerIsFunc
-        ? getContainer.toString() !== prevGetContainer.toString()
-        : getContainer !== prevGetContainer
-    ) {
-      removeCurrentContainer()
-    }
-  }
-
-  const attachToParent = (force = false) => {
-    if (force || (container.value && !container.value.parentNode)) {
-      const parent = getParent(props.getContainer!)
-      if (parent) {
-        parent.appendChild(container.value!)
-        return true
-      }
-
-      return false
-    }
-
-    return true
-  }
-  const setWrapperClassName = () => {
-    const { wrapperClassName } = props
-    if (
-      container.value
-      && wrapperClassName
-      && wrapperClassName !== container.value.className
-    ) {
-      container.value.className = wrapperClassName
-    }
-  }
-
-  const getContainer = () => {
-    if (!supportDom)
-      return null
-
-    if (!container.value) {
-      container.value = document.createElement('div')
-      attachToParent(true)
-    }
-    setWrapperClassName()
-    return container.value
-  }
-
-  onMounted(() => {
-    scrollLocker.value = new ScrollLocker({
-      container: getParent(props.getContainer!) as HTMLElement,
-    })
-    updateOpenCount()
-    if (!attachToParent()) {
-      rafId.value = raf(() => {
-        // 对组件执行强制更新 forceUpdate,准备采用改变key的方式来实现
-      })
-    }
-  })
-
-  onUpdated(() => {
-    updateOpenCount(props)
-    updateOpenCount(props)
-    setWrapperClassName()
-    attachToParent()
-  })
-
-  onBeforeUnmount(() => {
-    const { visible, getContainer } = props
-    if (supportDom && getParent(getContainer!) === document.body) {
-      // 离开时不会 render， 导到离开时数值不变，改用 func 。。
-      openCount = visible && openCount ? openCount - 1 : openCount
-    }
-    removeCurrentContainer()
-    raf.cancel(rafId.value!)
-  })
-
-  /**
-   * Enhance ./switchScrollingEffect
-   * 1. Simulate document body scroll bar with
-   * 2. Record body has overflow style and recover when all of PortalWrapper invisible
-   * 3. Disable body scroll when PortalWrapper has open
-   *
-   * @memberof PortalWrapper
-   */
-  const switchScrollingEffect = () => {
-    if (openCount === 1 && !Object.keys(cacheOverflow).length) {
-      switchScrollingEffect()
-      // Must be set after switchScrollingEffect
-      cacheOverflow = setStyle({
-        overflow: 'hidden',
-        overflowX: 'hidden',
-        overflowY: 'hidden',
-      })
-    }
-    else if (!openCount) {
-      setStyle(cacheOverflow)
-      cacheOverflow = {}
-      switchScrollingEffect()
-    }
-  }
-  return () => {
-    const { forceRender, visible } = props
-    let portal = null
-    const childProps = {
-      getOpenCount,
-      getContainer,
-      switchScrollingEffect,
-      scrollLocker: scrollLocker.value,
-    }
-    if (forceRender || visible || componentRef.value) {
-      portal = (
-        <Portal getContainer={getContainer as any} ref={componentRef}>
-          {ctx?.slots?.default(childProps as any)}
-        </Portal>
-      )
-    }
-    return portal
-  }
-  // TODO
-})
-
-export default PortalWrapper

package/src/composeProps.ts

@@ -1,23 +0,0 @@
-function composeProps<T extends Record<string, any>>(
-  originProps: T,
-  patchProps: Partial<T>,
-  isAll?: boolean,
-) {
-  const composedProps: Record<string, any> = {
-    ...originProps,
-    ...(isAll ? patchProps : {}),
-  }
-
-  Object.keys(patchProps).forEach((key) => {
-    const func = patchProps[key]
-    if (typeof func === 'function') {
-      composedProps[key] = (...args: any[]) => {
-        func(...args)
-        return originProps[key]?.(...args)
-      }
-    }
-  })
-  return composedProps
-}
-
-export default composeProps

package/src/createRef.ts

@@ -1,32 +0,0 @@
-import type { Ref } from 'vue'
-
-export interface RefObject extends Function {
-  current?: any
-}
-
-function createRef(): any {
-  const func: RefObject = (node: any) => {
-    func.current = node
-  }
-  return func
-}
-
-export function fillRef<T>(ref: Ref, node: T) {
-  if (typeof ref === 'function')
-    (ref as any)(node)
-  else if (typeof ref === 'object' && ref && 'current' in ref)
-    (ref as any).current = node
-}
-
-/**
- * Merge refs into one ref function to support ref passing.
- */
-export function composeRef<T>(...refs: any[]) {
-  return (node: T) => {
-    refs.forEach((ref) => {
-      fillRef(ref, node)
-    })
-  }
-}
-
-export default createRef

package/src/debug/diff.ts

@@ -1,66 +0,0 @@
-// eslint-disable-next-line ts/ban-ts-comment
-// @ts-nocheck
-function createArray() {
-  const arr: any[] = []
-  // eslint-disable-next-line no-proto,no-restricted-properties
-  arr.__proto__ = []
-  // eslint-disable-next-line no-proto,no-restricted-properties
-  arr.__proto__.format = function toString() {
-    return this.map(obj => ({
-      ...obj,
-      path: obj.path.join(' > '),
-    }))
-  }
-  // eslint-disable-next-line no-proto,no-restricted-properties
-  arr.__proto__.toString = function toString() {
-    return JSON.stringify(this.format(), null, 2)
-  }
-  return arr
-}
-
-export default function diff(obj1, obj2, depth = 10, path = [], diffList = createArray()) {
-  if (depth <= 0)
-    return diffList
-
-  const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)])
-  keys.forEach((key) => {
-    const value1 = obj1[key]
-    const value2 = obj2[key]
-
-    // Same value
-    if (value1 === value2)
-      return
-
-    const type1 = typeof value1
-    const type2 = typeof value2
-
-    // Diff type
-    if (type1 !== type2) {
-      diffList.push({
-        path: path.concat(key),
-        value1,
-        value2,
-      })
-      return
-    }
-
-    // NaN
-    if (Number.isNaN(value1) && Number.isNaN(value2))
-      return
-
-    // Object & Array
-    if (type1 === 'object' && value1 !== null && value2 !== null) {
-      diff(value1, value2, depth - 1, path.concat(key), diffList)
-      return
-    }
-
-    // Rest
-    diffList.push({
-      path: path.concat(key),
-      value1,
-      value2,
-    })
-  })
-
-  return diffList
-}

package/src/deprecated.ts

@@ -1,8 +0,0 @@
-export default function deprecated(props: any, instead: any, component: any) {
-  if (typeof window !== 'undefined' && window.console && window.console.error) {
-    window.console.error(
-      `Warning: ${props} is deprecated at [ ${component} ], `
-      + `use [ ${instead} ] instead of it.`,
-    )
-  }
-}

package/src/getScrollBarSize.tsx

@@ -1,57 +0,0 @@
-let cached: number
-
-export default function getScrollBarSize(fresh?: boolean) {
-  if (typeof document === 'undefined')
-    return 0
-
-  if (fresh || cached === undefined) {
-    const inner = document.createElement('div')
-    inner.style.width = '100%'
-    inner.style.height = '200px'
-
-    const outer = document.createElement('div')
-    const outerStyle = outer.style
-
-    outerStyle.position = 'absolute'
-    outerStyle.top = '0'
-    outerStyle.left = '0'
-    outerStyle.pointerEvents = 'none'
-    outerStyle.visibility = 'hidden'
-    outerStyle.width = '200px'
-    outerStyle.height = '150px'
-    outerStyle.overflow = 'hidden'
-
-    outer.appendChild(inner)
-
-    document.body.appendChild(outer)
-
-    const widthContained = inner.offsetWidth
-    outer.style.overflow = 'scroll'
-    let widthScroll = inner.offsetWidth
-
-    if (widthContained === widthScroll)
-      widthScroll = outer.clientWidth
-
-    document.body.removeChild(outer)
-
-    cached = widthContained - widthScroll
-  }
-  return cached
-}
-
-function ensureSize(str: string) {
-  const match = str.match(/^(.*)px$/)
-  const value = Number(match?.[1])
-  return Number.isNaN(value) ? getScrollBarSize() : value
-}
-
-export function getTargetScrollBarSize(target: HTMLElement) {
-  if (typeof document === 'undefined' || !target || !(target instanceof Element))
-    return { width: 0, height: 0 }
-
-  const { width, height } = getComputedStyle(target, '::-webkit-scrollbar')
-  return {
-    width: ensureSize(width),
-    height: ensureSize(height),
-  }
-}

package/src/guid.ts

@@ -1,4 +0,0 @@
-let seed = 0
-export default function guid() {
-  return `${Date.now()}_${seed++}`
-}

package/src/hooks/useEvent.ts

@@ -1,3 +0,0 @@
-export default function useEvent<T extends Function>(callback: T): T {
-  return callback
-}

package/src/hooks/useId.ts

@@ -1,20 +0,0 @@
-import { useId } from 'vue'
-
-function getUseId() {
-  return useId
-}
-
-const useOriginalId = getUseId()
-
-export default function (id?: string) {
-  const vueId = useOriginalId()
-  if (id) {
-    return id
-  }
-  // Test env always return mock id
-  if (process.env.NODE_ENV === 'test') {
-    return 'test-id'
-  }
-
-  return vueId
-}

package/src/hooks/useLayoutEffect.ts

@@ -1,61 +0,0 @@
-import type { WatchSource } from 'vue'
-import { nextTick, onMounted, onUnmounted, onUpdated, watch } from 'vue'
-
-export function useLayoutEffect(callback: Function, deps: WatchSource<unknown>[] = []) {
-  let close: Function | null = null
-  if (deps && deps.length) {
-    watch(deps, async () => {
-      if (close) {
-        close?.()
-      }
-      await nextTick()
-      if (typeof callback === 'function') {
-        close = callback()
-      }
-    }, {
-      immediate: true,
-      flush: 'post',
-    })
-  }
-  else {
-    onMounted(() => {
-      if (close) {
-        close?.()
-      }
-      if (typeof callback === 'function') {
-        close = callback()
-      }
-    })
-
-    onUpdated(() => {
-      if (close) {
-        close?.()
-      }
-      if (typeof callback === 'function') {
-        close = callback()
-      }
-    })
-  }
-
-  onUnmounted(() => {
-    if (close) {
-      close?.()
-    }
-  })
-}
-
-export function useLayoutUpdateEffect(callback: Function, deps: WatchSource<unknown>[]) {
-  let close: Function | null = null
-
-  watch(deps, async () => {
-    if (close) {
-      close?.()
-    }
-    await nextTick()
-    if (typeof callback === 'function') {
-      close = callback()
-    }
-  }, {
-    flush: 'post',
-  })
-}

package/src/hooks/useMemo.ts

@@ -1,21 +0,0 @@
-import type { Ref, WatchSource } from 'vue'
-import { ref, watch } from 'vue'
-
-export default function useMemo<T>(
-  getValue: () => T,
-  condition: (WatchSource<unknown> | object)[],
-  shouldUpdate?: (prev: any[], next: any[]) => boolean,
-) {
-  const cacheRef: Ref<T> = ref(getValue() as any)
-  watch(condition, (next, pre) => {
-    if (shouldUpdate) {
-      if (shouldUpdate(next, pre))
-        cacheRef.value = getValue()
-    }
-    else {
-      cacheRef.value = getValue()
-    }
-  })
-
-  return cacheRef
-}

package/src/hooks/useMergedState.ts

@@ -1,44 +0,0 @@
-import type { ComputedRef, Ref, UnwrapRef } from 'vue'
-import { ref, toRaw, unref, watch, watchEffect } from 'vue'
-
-export default function useMergedState<T, R = Ref<T>>(
-  defaultStateValue: T | (() => T),
-  option?: {
-    defaultValue?: T | (() => T)
-    value?: Ref<T> | Ref<UnwrapRef<T>> | ComputedRef<T>
-    onChange?: (val: T, prevValue: T) => void
-    postState?: (val: T) => T
-  },
-): [R, (val: T) => void] {
-  const { defaultValue, value = ref() } = option || {}
-  let initValue: T
-        = typeof defaultStateValue === 'function' ? (defaultStateValue as any)() : defaultStateValue
-  if (value.value !== undefined)
-    initValue = unref(value as any) as T
-
-  if (defaultValue !== undefined)
-    initValue = typeof defaultValue === 'function' ? (defaultValue as any)() : defaultValue
-
-  const innerValue = ref(initValue) as Ref<T>
-  const mergedValue = ref(initValue) as Ref<T>
-  watchEffect(() => {
-    let val = value.value !== undefined ? value.value : innerValue.value
-    if (option?.postState)
-      val = option.postState(val as T)
-    mergedValue.value = val as T
-  })
-
-  function triggerChange(newValue: T) {
-    const preVal = mergedValue.value
-    innerValue.value = newValue
-    if (toRaw(mergedValue.value) !== newValue && option?.onChange)
-      option.onChange(newValue, preVal)
-  }
-
-  // Effect of reset value to `undefined`
-  watch(value, () => {
-    innerValue.value = value.value as T
-  })
-
-  return [mergedValue as unknown as R, triggerChange]
-}

package/src/hooks/useMobile.ts

@@ -1,16 +0,0 @@
-import { onMounted, onUpdated, shallowRef } from 'vue'
-import isMobile from '../isMobile'
-
-export function useMobile() {
-  const mobile = shallowRef(false)
-  onMounted(() => {
-    mobile.value = isMobile()
-  })
-
-  onUpdated(() => {
-    mobile.value = isMobile()
-  })
-  return mobile
-}
-
-export default useMobile

package/src/hooks/useState.ts

@@ -1,17 +0,0 @@
-import type { Ref } from 'vue'
-import { ref } from 'vue'
-
-export default function useState<T, R = Ref<T>>(
-  defaultStateValue?: T | (() => T),
-): [R, (val: T) => void] {
-  const initValue: T
-        = typeof defaultStateValue === 'function' ? (defaultStateValue as any)() : defaultStateValue
-
-  const innerValue = ref(initValue) as Ref<T>
-
-  function triggerChange(newValue: T) {
-    innerValue.value = newValue
-  }
-
-  return [innerValue as unknown as R, triggerChange]
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export { default as get } from './utils/get'
-export { default as set } from './utils/set'
-export { default as warning } from './warning'

package/src/isEqual.ts

@@ -1,50 +0,0 @@
-import warning from './warning'
-
-/**
- * Deeply compares two object literals.
- * @param obj1 object 1
- * @param obj2 object 2
- * @param shallow shallow compare
- */
-function isEqual(obj1: any, obj2: any, shallow = false): boolean {
-  // https://github.com/mapbox/mapbox-gl-js/pull/5979/files#diff-fde7145050c47cc3a306856efd5f9c3016e86e859de9afbd02c879be5067e58f
-  const refSet = new Set<any>()
-  function deepEqual(a: any, b: any, level = 1): boolean {
-    const circular = refSet.has(a)
-    warning(!circular, 'Warning: There may be circular references')
-    if (circular)
-      return false
-
-    if (a === b)
-      return true
-
-    if (shallow && level > 1)
-      return false
-
-    refSet.add(a)
-    const newLevel = level + 1
-    if (Array.isArray(a)) {
-      if (!Array.isArray(b) || a.length !== b.length)
-        return false
-
-      for (let i = 0; i < a.length; i++) {
-        if (!deepEqual(a[i], b[i], newLevel))
-          return false
-      }
-      return true
-    }
-    if (a && b && typeof a === 'object' && typeof b === 'object') {
-      const keys = Object.keys(a)
-      if (keys.length !== Object.keys(b).length)
-        return false
-
-      return keys.every(key => deepEqual(a[key], b[key], newLevel))
-    }
-    // other
-    return false
-  }
-
-  return deepEqual(obj1, obj2)
-}
-
-export default isEqual

package/src/isMobile.ts

@@ -1,15 +0,0 @@
-export default () => {
-  if (typeof navigator === 'undefined' || typeof window === 'undefined')
-    return false
-
-  const agent
-        = navigator.userAgent || navigator.vendor || (window as any).opera
-  return (
-    /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
-      agent,
-    )
-    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-([mpt])|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c([\- _agpst])|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac([ \-/])|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/([klu])|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t([\- ov])|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[23]|n30(0|2)|n50([025])|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan([adt])|pdxg|pg(13|-([1-8c]))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c([\-01])|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
-      agent?.substr(0, 4),
-    )
-  )
-}

package/src/isValid.ts

@@ -1,4 +0,0 @@
-function isValid(value: any): boolean {
-  return value !== undefined && value !== null && value !== ''
-}
-export default isValid