@v-c/util 0.0.4 → 0.0.6

package/src/Dom/focus.ts

@@ -1,96 +0,0 @@
-import isVisible from './isVisible'
-
-type DisabledElement =
-  | HTMLLinkElement
-  | HTMLInputElement
-  | HTMLFieldSetElement
-  | HTMLButtonElement
-  | HTMLOptGroupElement
-  | HTMLOptionElement
-  | HTMLSelectElement
-  | HTMLTextAreaElement
-
-function focusable(node: HTMLElement, includePositive = false): boolean {
-  if (isVisible(node)) {
-    const nodeName = node.nodeName.toLowerCase()
-    const isFocusableElement
-            // Focusable element
-            = ['input', 'select', 'textarea', 'button'].includes(nodeName)
-            // Editable element
-            || node.isContentEditable
-            // Anchor with href element
-            || (nodeName === 'a' && !!node.getAttribute('href'))
-
-    // Get tabIndex
-    const tabIndexAttr = node.getAttribute('tabindex')
-    const tabIndexNum = Number(tabIndexAttr)
-
-    // Parse as number if validate
-    let tabIndex: number | null = null
-    if (tabIndexAttr && !Number.isNaN(tabIndexNum))
-      tabIndex = tabIndexNum
-    else if (isFocusableElement && tabIndex === null)
-      tabIndex = 0
-
-    // Block focusable if disabled
-    if (isFocusableElement && (node as DisabledElement).disabled)
-      tabIndex = null
-
-    return (
-      tabIndex !== null && (tabIndex >= 0 || (includePositive && tabIndex < 0))
-    )
-  }
-
-  return false
-}
-
-export function getFocusNodeList(node: HTMLElement, includePositive = false) {
-  const res = [...node.querySelectorAll<HTMLElement>('*')].filter((child) => {
-    return focusable(child, includePositive)
-  })
-  if (focusable(node, includePositive))
-    res.unshift(node)
-
-  return res
-}
-
-let lastFocusElement: any = null
-
-/** @deprecated Do not use since this may failed when used in async */
-export function saveLastFocusNode() {
-  lastFocusElement = document.activeElement
-}
-
-/** @deprecated Do not use since this may failed when used in async */
-export function clearLastFocusNode() {
-  lastFocusElement = null
-}
-
-/** @deprecated Do not use since this may failed when used in async */
-export function backLastFocusNode() {
-  if (lastFocusElement) {
-    try {
-      // 元素可能已经被移动了
-      lastFocusElement.focus()
-    }
-
-    catch (_e: any) {
-      // empty
-    }
-  }
-}
-
-export function limitTabRange(node: HTMLElement, e: KeyboardEvent) {
-  if (e.keyCode === 9) {
-    const tabNodeList = getFocusNodeList(node)
-    const lastTabNode = tabNodeList[e.shiftKey ? 0 : tabNodeList.length - 1]
-    const leavingTab
-            = lastTabNode === document.activeElement || node === document.activeElement
-
-    if (leavingTab) {
-      const target = tabNodeList[e.shiftKey ? tabNodeList.length - 1 : 0]
-      target.focus()
-      e.preventDefault()
-    }
-  }
-}

package/src/Dom/isVisible.ts

@@ -1,23 +0,0 @@
-export default (element: Element): boolean => {
-  if (!element)
-    return false
-
-  if (element instanceof Element) {
-    if ((element as HTMLElement).offsetParent)
-      return true
-
-    if ((element as SVGGraphicsElement).getBBox) {
-      const { width, height } = (element as SVGGraphicsElement).getBBox()
-      if (width || height)
-        return true
-    }
-
-    if (element.getBoundingClientRect) {
-      const { width, height } = element.getBoundingClientRect()
-      if (width || height)
-        return true
-    }
-  }
-
-  return false
-}

package/src/Dom/scrollLocker.ts

@@ -1,144 +0,0 @@
-import type { CSSProperties } from 'vue'
-import getScrollBarSize from '../getScrollBarSize'
-import setStyle from '../setStyle'
-
-export interface scrollLockOptions {
-  container: HTMLElement
-}
-
-let uuid = 0
-
-interface Ilocks {
-  target: typeof uuid
-  options: scrollLockOptions
-}
-
-let locks: Ilocks[] = []
-const scrollingEffectClassName = 'ant-scrolling-effect'
-const scrollingEffectClassNameReg = new RegExp(
-  `${scrollingEffectClassName}`,
-  'g',
-)
-
-// https://github.com/ant-design/ant-design/issues/19340
-// https://github.com/ant-design/ant-design/issues/19332
-const cacheStyle = new Map<Element, CSSProperties>()
-
-export default class ScrollLocker {
-  private readonly lockTarget: typeof uuid
-
-  private options: scrollLockOptions | undefined
-
-  constructor(options?: scrollLockOptions) {
-    this.lockTarget = uuid++
-    this.options = options
-  }
-
-  getContainer = (): HTMLElement | undefined => {
-    return this.options?.container
-  }
-
-  // if options change...
-  reLock = (options?: scrollLockOptions) => {
-    const findLock = locks.find(({ target }) => target === this.lockTarget)
-
-    if (findLock)
-      this.unLock()
-
-    this.options = options
-
-    if (findLock) {
-      findLock.options = options!
-
-      this.lock()
-    }
-  }
-
-  lock = () => {
-    // If lockTarget exist return
-    if (locks.some(({ target }) => target === this.lockTarget))
-      return
-
-    // If same container effect, return
-    if (
-      locks.some(
-        ({ options }) => options?.container === this.options?.container,
-      )
-    ) {
-      locks = [...locks!, { target: this.lockTarget, options: this.options! }]
-      return
-    }
-
-    let scrollBarSize = 0
-    const container = this.options?.container || document.body
-
-    if (
-      (container === document.body
-        && window.innerWidth - document.documentElement.clientWidth > 0)
-      || container.scrollHeight > container.clientHeight
-    ) {
-      if (getComputedStyle(container).overflow !== 'hidden')
-        scrollBarSize = getScrollBarSize()
-    }
-
-    const containerClassName = container.className
-
-    if (
-      locks.filter(
-        ({ options }) => options?.container === this.options?.container,
-      ).length === 0
-    ) {
-      cacheStyle.set(
-        container,
-        setStyle(
-          {
-            width:
-                  scrollBarSize !== 0
-                    ? `calc(100% - ${scrollBarSize}px)`
-                    : undefined,
-            overflow: 'hidden',
-            overflowX: 'hidden',
-            overflowY: 'hidden',
-          },
-          { element: container },
-        ),
-      )
-    }
-
-    // https://github.com/ant-design/ant-design/issues/19729
-    if (!scrollingEffectClassNameReg.test(containerClassName)) {
-      const addClassName = `${containerClassName} ${scrollingEffectClassName}`
-      container.className = addClassName.trim()
-    }
-
-    locks = [...locks!, { target: this.lockTarget, options: this.options! }]
-  }
-
-  unLock = () => {
-    const findLock = locks.find(({ target }) => target === this.lockTarget)
-
-    locks = locks.filter(({ target }) => target !== this.lockTarget)
-
-    if (
-      !findLock
-      || locks.some(
-        ({ options }) => options?.container === findLock.options?.container,
-      )
-    ) {
-      return
-    }
-
-    // Remove Effect
-    const container = this.options?.container || document.body
-    const containerClassName = container.className
-
-    if (!scrollingEffectClassNameReg.test(containerClassName))
-      return
-
-    setStyle(cacheStyle.get(container)!, { element: container })
-    cacheStyle.delete(container)
-    container.className = container.className
-      .replace(scrollingEffectClassNameReg, '')
-      .trim()
-  }
-}

package/src/Dom/shadow.ts

@@ -1,17 +0,0 @@
-function getRoot(ele: Node) {
-  return ele?.getRootNode?.()
-}
-
-/**
- * Check if is in shadowRoot
- */
-export function inShadow(ele: Node) {
-  return getRoot(ele) instanceof ShadowRoot
-}
-
-/**
- * Return shadowRoot if possible
- */
-export function getShadowRoot(ele: Node): ShadowRoot | null {
-  return inShadow(ele) ? (getRoot(ele) as ShadowRoot) : null
-}

package/src/Dom/styleChecker.ts

@@ -1,31 +0,0 @@
-import canUseDom from './canUseDom'
-
-function isStyleNameSupport(styleName: string | string[]): boolean {
-  if (canUseDom() && window.document.documentElement) {
-    const styleNameList = Array.isArray(styleName) ? styleName : [styleName]
-    const { documentElement } = window.document
-
-    return styleNameList.some(name => name in documentElement.style)
-  }
-  return false
-}
-
-function isStyleValueSupport(styleName: string, value: any) {
-  if (!isStyleNameSupport(styleName))
-    return false
-
-  const ele: any = document.createElement('div')
-  const origin = ele.style[styleName]
-  ele.style[styleName] = value
-  return ele.style[styleName] !== origin
-}
-
-export function isStyleSupport(styleName: string | string[]): boolean
-export function isStyleSupport(styleName: string, styleValue: any): boolean
-
-export function isStyleSupport(styleName: string | string[], styleValue?: any) {
-  if (!Array.isArray(styleName) && styleValue !== undefined)
-    return isStyleValueSupport(styleName, styleValue)
-
-  return isStyleNameSupport(styleName)
-}

package/src/Dom/support.ts

@@ -1,27 +0,0 @@
-import canUseDOM from './canUseDom'
-
-const animationEndEventNames = {
-  WebkitAnimation: 'webkitAnimationEnd',
-  OAnimation: 'oAnimationEnd',
-  animation: 'animationend',
-}
-const transitionEventNames = {
-  WebkitTransition: 'webkitTransitionEnd',
-  OTransition: 'oTransitionEnd',
-  transition: 'transitionend',
-}
-
-function supportEnd(names: Record<string, any>) {
-  const el: any = document.createElement('div')
-  for (const name in names) {
-    if (names.hasOwnProperty(name) && el.style[name] !== undefined) {
-      return {
-        end: names[name],
-      }
-    }
-  }
-  return false
-}
-
-export const animation = canUseDOM() && supportEnd(animationEndEventNames)
-export const transition = canUseDOM() && supportEnd(transitionEventNames)

package/src/EventInterface.ts

@@ -1,19 +0,0 @@
-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