@antsoo-lib/components 0.1.11 → 0.1.12

package/src/_util/hooks/_vueuse/unrefElement.ts

@@ -1,25 +0,0 @@
-import type { ComponentPublicInstance } from 'vue'
-
-import { resolveUnref } from './resolveUnref'
-import type { MaybeComputedRef, MaybeRef } from './types'
-
-export type VueInstance = ComponentPublicInstance
-export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>
-export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>
-export type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null
-
-export type UnRefElementReturn<T extends MaybeElement = MaybeElement> = T extends VueInstance
-  ? Exclude<MaybeElement, VueInstance>
-  : T | undefined
-
-/**
- * Get the dom element of a ref of element or Vue component instance
- *
- * @param elRef
- */
-export function unrefElement<T extends MaybeElement>(
-  elRef: MaybeComputedElementRef<T>,
-): UnRefElementReturn<T> {
-  const plain = resolveUnref(elRef)
-  return (plain as VueInstance)?.$el ?? plain
-}

package/src/_util/hooks/_vueuse/useElementSize.ts

@@ -1,66 +0,0 @@
-import { shallowRef, watch } from 'vue'
-
-import type { MaybeComputedElementRef } from './unrefElement'
-import { unrefElement } from './unrefElement'
-import type { UseResizeObserverOptions } from './useResizeObserver'
-import { useResizeObserver } from './useResizeObserver'
-
-export interface ElementSize {
-  width: number
-  height: number
-}
-
-/**
- * Reactive size of an HTML element.
- *
- * @see https://vueuse.org/useElementSize
- * @param target
- * @param callback
- * @param options
- */
-export function useElementSize(
-  target: MaybeComputedElementRef,
-  initialSize: ElementSize = { width: 0, height: 0 },
-  options: UseResizeObserverOptions = {},
-) {
-  const { box = 'content-box' } = options
-  const width = shallowRef(initialSize.width)
-  const height = shallowRef(initialSize.height)
-
-  useResizeObserver(
-    target,
-    ([entry]) => {
-      const boxSize =
-        box === 'border-box'
-          ? entry.borderBoxSize
-          : box === 'content-box'
-            ? entry.contentBoxSize
-            : entry.devicePixelContentBoxSize
-
-      if (boxSize) {
-        width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0)
-        height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0)
-      } else {
-        // fallback
-        width.value = entry.contentRect.width
-        height.value = entry.contentRect.height
-      }
-    },
-    options,
-  )
-
-  watch(
-    () => unrefElement(target),
-    (ele) => {
-      width.value = ele ? initialSize.width : 0
-      height.value = ele ? initialSize.height : 0
-    },
-  )
-
-  return {
-    width,
-    height,
-  }
-}
-
-export type UseElementSizeReturn = ReturnType<typeof useElementSize>

package/src/_util/hooks/_vueuse/useMutationObserver.ts

@@ -1,63 +0,0 @@
-import { watch } from 'vue'
-
-import type { ConfigurableWindow } from './_configurable'
-import { defaultWindow } from './_configurable'
-import { tryOnScopeDispose } from './tryOnScopeDispose'
-import type { MaybeElementRef } from './unrefElement'
-import { unrefElement } from './unrefElement'
-import { useSupported } from './useSupported'
-
-export interface UseMutationObserverOptions extends MutationObserverInit, ConfigurableWindow {}
-
-/**
- * Watch for changes being made to the DOM tree.
- *
- * @see https://vueuse.org/useMutationObserver
- * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
- * @param target
- * @param callback
- * @param options
- */
-export function useMutationObserver(
-  target: MaybeElementRef,
-  callback: MutationCallback,
-  options: UseMutationObserverOptions = {},
-) {
-  const { window = defaultWindow, ...mutationOptions } = options
-  let observer: MutationObserver | undefined
-  const isSupported = useSupported(() => window && 'MutationObserver' in window)
-
-  const cleanup = () => {
-    if (observer) {
-      observer.disconnect()
-      observer = undefined
-    }
-  }
-
-  const stopWatch = watch(
-    () => unrefElement(target),
-    (el) => {
-      cleanup()
-
-      if (isSupported.value && window && el) {
-        observer = new MutationObserver(callback)
-        observer!.observe(el, mutationOptions)
-      }
-    },
-    { immediate: true },
-  )
-
-  const stop = () => {
-    cleanup()
-    stopWatch()
-  }
-
-  tryOnScopeDispose(stop)
-
-  return {
-    isSupported,
-    stop,
-  }
-}
-
-export type UseMutationObserverReturn = ReturnType<typeof useMutationObserver>

package/src/_util/hooks/_vueuse/useResizeObserver.ts

@@ -1,95 +0,0 @@
-import { watch } from 'vue'
-
-import type { ConfigurableWindow } from './_configurable'
-import { defaultWindow } from './_configurable'
-import { tryOnScopeDispose } from './tryOnScopeDispose'
-import type { MaybeComputedElementRef } from './unrefElement'
-import { unrefElement } from './unrefElement'
-import { useSupported } from './useSupported'
-
-export interface ResizeObserverSize {
-  readonly inlineSize: number
-  readonly blockSize: number
-}
-
-export interface ResizeObserverEntry {
-  readonly target: Element
-  readonly contentRect: DOMRectReadOnly
-  readonly borderBoxSize?: ReadonlyArray<ResizeObserverSize>
-  readonly contentBoxSize?: ReadonlyArray<ResizeObserverSize>
-  readonly devicePixelContentBoxSize?: ReadonlyArray<ResizeObserverSize>
-}
-
-export type ResizeObserverCallback = (
-  entries: ReadonlyArray<ResizeObserverEntry>,
-  observer: ResizeObserver,
-) => void
-
-export interface UseResizeObserverOptions extends ConfigurableWindow {
-  /**
-   * Sets which box model the observer will observe changes to. Possible values
-   * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
-   *
-   * @default 'content-box'
-   */
-  box?: ResizeObserverBoxOptions
-}
-
-declare class ResizeObserver {
-  constructor(callback: ResizeObserverCallback)
-  disconnect(): void
-  observe(target: Element, options?: UseResizeObserverOptions): void
-  unobserve(target: Element): void
-}
-
-/**
- * Reports changes to the dimensions of an Element's content or the border-box
- *
- * @see https://vueuse.org/useResizeObserver
- * @param target
- * @param callback
- * @param options
- */
-export function useResizeObserver(
-  target: MaybeComputedElementRef,
-  callback: ResizeObserverCallback,
-  options: UseResizeObserverOptions = {},
-) {
-  const { window = defaultWindow, ...observerOptions } = options
-  let observer: ResizeObserver | undefined
-  const isSupported = useSupported(() => window && 'ResizeObserver' in window)
-
-  const cleanup = () => {
-    if (observer) {
-      observer.disconnect()
-      observer = undefined
-    }
-  }
-
-  const stopWatch = watch(
-    () => unrefElement(target),
-    (el) => {
-      cleanup()
-
-      if (isSupported.value && window && el) {
-        observer = new ResizeObserver(callback)
-        observer!.observe(el, observerOptions)
-      }
-    },
-    { immediate: true, flush: 'post' },
-  )
-
-  const stop = () => {
-    cleanup()
-    stopWatch()
-  }
-
-  tryOnScopeDispose(stop)
-
-  return {
-    isSupported,
-    stop,
-  }
-}
-
-export type UseResizeObserverReturn = ReturnType<typeof useResizeObserver>

package/src/_util/hooks/_vueuse/useSupported.ts

@@ -1,14 +0,0 @@
-import { shallowRef } from 'vue'
-
-import { tryOnMounted } from './tryOnMounted'
-
-export function useSupported(callback: () => unknown, sync = false) {
-  const isSupported = shallowRef<boolean>()
-
-  const update = () => (isSupported.value = Boolean(callback()))
-
-  update()
-
-  tryOnMounted(update, sync)
-  return isSupported
-}

package/src/_util/hooks/useBreakpoint.ts

@@ -1,25 +0,0 @@
-import type { Ref } from 'vue'
-import { onMounted, onUnmounted, shallowRef } from 'vue'
-
-import type { ScreenMap } from '../../_util/responsiveObserve'
-import useResponsiveObserve from '../../_util/responsiveObserve'
-
-function useBreakpoint(): Ref<ScreenMap> {
-  const screens = shallowRef<ScreenMap>({})
-  let token = null
-  const responsiveObserve = useResponsiveObserve()
-
-  onMounted(() => {
-    token = responsiveObserve.value.subscribe((supportScreens) => {
-      screens.value = supportScreens
-    })
-  })
-
-  onUnmounted(() => {
-    responsiveObserve.value.unsubscribe(token)
-  })
-
-  return screens
-}
-
-export default useBreakpoint

package/src/_util/hooks/useDestroyed.ts

@@ -1,12 +0,0 @@
-import { onBeforeUnmount, shallowRef } from 'vue'
-
-const useDestroyed = () => {
-  const destroyed = shallowRef(false)
-  onBeforeUnmount(() => {
-    destroyed.value = true
-  })
-
-  return destroyed
-}
-
-export default useDestroyed

package/src/_util/hooks/useFlexGapSupport.ts

@@ -1,12 +0,0 @@
-import { onMounted, shallowRef } from 'vue'
-
-import { detectFlexGapSupported } from '../styleChecker'
-
-export default () => {
-  const flexible = shallowRef(false)
-  onMounted(() => {
-    flexible.value = detectFlexGapSupported()
-  })
-
-  return flexible
-}

package/src/_util/hooks/useId.ts

@@ -1,31 +0,0 @@
-import { ref } from 'vue'
-
-import canUseDom from '../../_util/canUseDom'
-
-let uuid = 0
-
-/** Is client side and not jsdom */
-export const isBrowserClient = process.env.NODE_ENV !== 'test' && canUseDom()
-
-/** Get unique id for accessibility usage */
-export function getUUID(): number | string {
-  let retId: string | number
-
-  // Test never reach
-  /* istanbul ignore if */
-  if (isBrowserClient) {
-    retId = uuid
-    uuid += 1
-  } else {
-    retId = 'TEST_OR_SSR'
-  }
-
-  return retId
-}
-
-export default function useId(id = ref('')) {
-  // Inner id for accessibility usage. Only work in client side
-  const innerId = `vc_unique_${getUUID()}`
-
-  return id.value || innerId
-}

package/src/_util/hooks/useLayoutState.ts

@@ -1,42 +0,0 @@
-import type { Ref } from 'vue'
-import { onBeforeUnmount, shallowRef } from 'vue'
-
-import raf from '../raf'
-
-export type Updater<State> = (prev: State) => State
-/**
- * Execute code before next frame but async
- */
-export function useLayoutState<State>(
-  defaultState: State,
-): [Ref<State>, (updater: Updater<State>) => void] {
-  const stateRef = shallowRef(defaultState)
-  let tempState = stateRef.value
-
-  let updateBatchRef = []
-  const rafRef = shallowRef()
-  function setFrameState(updater: Updater<State>) {
-    raf.cancel(rafRef.value)
-    updateBatchRef.push(updater)
-
-    rafRef.value = raf(() => {
-      const prevBatch = updateBatchRef
-      // const prevState = stateRef.value;
-      updateBatchRef = []
-
-      prevBatch.forEach((batchUpdater) => {
-        tempState = batchUpdater(tempState)
-      })
-
-      // if (tempState !== stateRef.value) {
-      stateRef.value = tempState
-      // }
-    })
-  }
-
-  onBeforeUnmount(() => {
-    raf.cancel(rafRef.value)
-  })
-
-  return [stateRef as Ref<State>, setFrameState]
-}

package/src/_util/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/_util/hooks/useMergedState.ts

@@ -1,47 +0,0 @@
-import type { 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>>
-    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/_util/hooks/useRefs.ts

@@ -1,21 +0,0 @@
-import type { ComponentPublicInstance, Ref } from 'vue'
-import { onBeforeUpdate, ref } from 'vue'
-
-import type { Key } from '../type'
-
-type RefType = HTMLElement | ComponentPublicInstance
-export type RefsValue = Map<Key, RefType>
-type UseRef = [(key: Key) => (el: RefType) => void, Ref<RefsValue>]
-const useRefs = (): UseRef => {
-  const refs = ref<RefsValue>(new Map())
-
-  const setRef = (key: Key) => (el: RefType) => {
-    refs.value.set(key, el)
-  }
-  onBeforeUpdate(() => {
-    refs.value = new Map()
-  })
-  return [setRef, refs]
-}
-
-export default useRefs

package/src/_util/hooks/useScrollLocker.ts

@@ -1,53 +0,0 @@
-import type { Ref } from 'vue'
-import { computed, watchEffect } from 'vue'
-
-import canUseDom from '../../_util/canUseDom'
-import getScrollBarSize from '../../_util/getScrollBarSize'
-import { removeCSS, updateCSS } from '../../vc-util/Dom/dynamicCSS'
-
-const UNIQUE_ID = `vc-util-locker-${Date.now()}`
-
-let uuid = 0
-
-/**../vc-util/Dom/dynam
- * Test usage export. Do not use in your production
- */
-export function isBodyOverflowing() {
-  return (
-    document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) &&
-    window.innerWidth > document.body.offsetWidth
-  )
-}
-
-export default function useScrollLocker(lock?: Ref<boolean>) {
-  const mergedLock = computed(() => !!lock && !!lock.value)
-  uuid += 1
-  const id = `${UNIQUE_ID}_${uuid}`
-
-  watchEffect(
-    (onClear) => {
-      if (!canUseDom()) {
-        return
-      }
-      if (mergedLock.value) {
-        const scrollbarSize = getScrollBarSize()
-        const isOverflow = isBodyOverflowing()
-
-        updateCSS(
-          `
-html body {
-  overflow-y: hidden;
-  ${isOverflow ? `width: calc(100% - ${scrollbarSize}px);` : ''}
-}`,
-          id,
-        )
-      } else {
-        removeCSS(id)
-      }
-      onClear(() => {
-        removeCSS(id)
-      })
-    },
-    { flush: 'post' },
-  )
-}

package/src/_util/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/_util/isNumeric.ts

@@ -1,5 +0,0 @@
-const isNumeric = (value: any): boolean => {
-  return !isNaN(Number.parseFloat(value)) && isFinite(value)
-}
-
-export default isNumeric

package/src/_util/isValid.ts

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

package/src/_util/isValidValue.ts

@@ -1,3 +0,0 @@
-export default function (val: any) {
-  return val !== undefined && val !== null
-}

package/src/_util/json2mq.ts

@@ -1,60 +0,0 @@
-/**
- * source by `json2mq`
- * https://github.com/akiran/json2mq.git
- */
-
-const camel2hyphen = function (str: string) {
-  return str
-    .replace(/[A-Z]/g, (match) => {
-      return `-${match.toLowerCase()}`
-    })
-    .toLowerCase()
-}
-
-const isDimension = function (feature: string) {
-  const re = /[heigt|wd]$/
-  return re.test(feature)
-}
-
-const obj2mq = function (obj: { [x: string]: any }) {
-  let mq = ''
-  const features = Object.keys(obj)
-  features.forEach((feature, index) => {
-    let value = obj[feature]
-    feature = camel2hyphen(feature)
-    // Add px to dimension features
-    if (isDimension(feature) && typeof value === 'number') {
-      value = `${value}px`
-    }
-    if (value === true) {
-      mq += feature
-    } else if (value === false) {
-      mq += `not ${feature}`
-    } else {
-      mq += `(${feature}: ${value})`
-    }
-    if (index < features.length - 1) {
-      mq += ' and '
-    }
-  })
-  return mq
-}
-
-export default function (query: any[]) {
-  let mq = ''
-  if (typeof query === 'string') {
-    return query
-  }
-  // Handling array of media queries
-  if (Array.isArray(query)) {
-    query.forEach((q, index) => {
-      mq += obj2mq(q)
-      if (index < query.length - 1) {
-        mq += ', '
-      }
-    })
-    return mq
-  }
-  // Handling single media query
-  return obj2mq(query)
-}

package/src/_util/omit.ts

@@ -1,9 +0,0 @@
-function omit<T extends object, K extends keyof T>(obj: T, fields: K[]): Omit<T, K> {
-  const shallowCopy = Object.assign({}, obj)
-  for (let i = 0; i < fields.length; i += 1) {
-    const key = fields[i]
-    delete shallowCopy[key]
-  }
-  return shallowCopy
-}
-export default omit