@v-c/util 0.0.1

package/src/Dom/css.ts

@@ -0,0 +1,113 @@
+const PIXEL_PATTERN = /margin|padding|width|height|max|min|offset/
+
+const removePixel: any = {
+  left: true,
+  top: true,
+}
+const floatMap: any = {
+  cssFloat: 1,
+  styleFloat: 1,
+  float: 1,
+}
+
+function getComputedStyle(node: HTMLElement) {
+  return node.nodeType === 1 ? (node as any).ownerDocument.defaultView.getComputedStyle(node, null) : {}
+}
+
+function getStyleValue(node: HTMLElement, type: string, value: string) {
+  type = type.toLowerCase()
+  if (value === 'auto') {
+    if (type === 'height')
+      return node.offsetHeight
+
+    if (type === 'width')
+      return node.offsetWidth
+  }
+  if (!(type in removePixel))
+    removePixel[type] = PIXEL_PATTERN.test(type)
+
+  return removePixel[type] ? Number.parseFloat(value) || 0 : value
+}
+
+export function get(node: HTMLElement, name: any) {
+  const length = arguments.length
+  const style = getComputedStyle(node)
+
+  name = floatMap[name] ? ('cssFloat' in node.style ? 'cssFloat' : 'styleFloat') : name
+
+  return length === 1 ? style : getStyleValue(node, name, style[name] || node.style[name])
+}
+
+export function set(node: HTMLElement, name: any, value: string | number) {
+  const length = arguments.length
+  name = floatMap[name] ? ('cssFloat' in node.style ? 'cssFloat' : 'styleFloat') : name
+  if (length === 3) {
+    if (typeof value === 'number' && PIXEL_PATTERN.test(name))
+      value = `${value}px`
+
+    ;(node.style as any)[name] = value // Number
+    return value
+  }
+  for (const x in name) {
+    if (x in name)
+      set(node, x, name[x])
+  }
+  return getComputedStyle(node)
+}
+
+export function getOuterWidth(el: HTMLElement) {
+  if (el === document.body)
+    return document.documentElement.clientWidth
+
+  return el.offsetWidth
+}
+
+export function getOuterHeight(el: HTMLElement) {
+  if (el === document.body)
+    return window.innerHeight || document.documentElement.clientHeight
+
+  return el.offsetHeight
+}
+
+export function getDocSize() {
+  const width = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth)
+  const height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)
+
+  return {
+    width,
+    height,
+  }
+}
+
+export function getClientSize() {
+  const width = document.documentElement.clientWidth
+  const height = window.innerHeight || document.documentElement.clientHeight
+  return {
+    width,
+    height,
+  }
+}
+
+export function getScroll() {
+  return {
+    scrollLeft: Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
+    scrollTop: Math.max(document.documentElement.scrollTop, document.body.scrollTop),
+  }
+}
+
+export function getOffset(node: any) {
+  const box = node.getBoundingClientRect()
+  const docElem = document.documentElement
+
+  // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft
+  return {
+    left:
+            box.left
+            + (window.pageXOffset || docElem.scrollLeft)
+            - (docElem.clientLeft || document.body.clientLeft || 0),
+    top:
+            box.top
+            + (window.pageYOffset || docElem.scrollTop)
+            - (docElem.clientTop || document.body.clientTop || 0),
+  }
+}

package/src/Dom/dynamicCSS.ts

@@ -0,0 +1,173 @@
+import canUseDom from './canUseDom'
+import contains from './contains'
+
+const APPEND_ORDER = 'data-vc-order'
+const APPEND_PRIORITY = 'data-vc-priority'
+const MARK_KEY = `vc-util-key`
+
+const containerCache = new Map<ContainerType, Node & ParentNode>()
+
+export type ContainerType = Element | ShadowRoot
+export type Prepend = boolean | 'queue'
+export type AppendType = 'prependQueue' | 'append' | 'prepend'
+
+interface Options {
+  attachTo?: ContainerType
+  csp?: { nonce?: string }
+  prepend?: Prepend
+  /**
+   * Config the `priority` of `prependQueue`. Default is `0`.
+   * It's useful if you need to insert style before other style.
+   */
+  priority?: number
+  mark?: string
+}
+
+function getMark({ mark }: Options = {}) {
+  if (mark)
+    return mark.startsWith('data-') ? mark : `data-${mark}`
+
+  return MARK_KEY
+}
+
+function getContainer(option: Options) {
+  if (option.attachTo)
+    return option.attachTo
+
+  const head = document.querySelector('head')
+  return head || document.body
+}
+
+function getOrder(prepend?: Prepend): AppendType {
+  if (prepend === 'queue')
+    return 'prependQueue'
+
+  return prepend ? 'prepend' : 'append'
+}
+
+/**
+ * Find style which inject by rc-util
+ */
+function findStyles(container: ContainerType) {
+  return Array.from(
+    (containerCache.get(container) || container).children,
+  ).filter(node => node.tagName === 'STYLE') as HTMLStyleElement[]
+}
+
+export function injectCSS(css: string, option: Options = {}) {
+  if (!canUseDom())
+    return null
+
+  const { csp, prepend, priority = 0 } = option
+  const mergedOrder = getOrder(prepend)
+  const isPrependQueue = mergedOrder === 'prependQueue'
+
+  const styleNode = document.createElement('style')
+  styleNode.setAttribute(APPEND_ORDER, mergedOrder)
+
+  if (isPrependQueue && priority)
+    styleNode.setAttribute(APPEND_PRIORITY, `${priority}`)
+
+  if (csp?.nonce)
+    styleNode.nonce = csp?.nonce
+
+  styleNode.innerHTML = css
+
+  const container = getContainer(option)
+  const { firstChild } = container
+
+  if (prepend) {
+    // If is queue `prepend`, it will prepend first style and then append rest style
+    if (isPrependQueue) {
+      const existStyle = findStyles(container).filter((node: any) => {
+        // Ignore style which not injected by rc-util with prepend
+        if (
+          !['prepend', 'prependQueue'].includes(node.getAttribute(APPEND_ORDER))
+        )
+          return false
+
+        // Ignore style which priority less then new style
+        const nodePriority = Number(node.getAttribute(APPEND_PRIORITY) || 0)
+        return priority >= nodePriority
+      })
+
+      if (existStyle.length) {
+        container.insertBefore(
+          styleNode,
+          existStyle[existStyle.length - 1].nextSibling,
+        )
+
+        return styleNode
+      }
+    }
+
+    // Use `insertBefore` as `prepend`
+    container.insertBefore(styleNode, firstChild)
+  }
+  else {
+    container.appendChild(styleNode)
+  }
+
+  return styleNode
+}
+
+function findExistNode(key: string, option: Options = {}) {
+  const container = getContainer(option)
+
+  return findStyles(container).find(
+    node => node.getAttribute(getMark(option)) === key,
+  )
+}
+
+export function removeCSS(key: string, option: Options = {}) {
+  const existNode = findExistNode(key, option)
+  if (existNode) {
+    const container = getContainer(option)
+    container.removeChild(existNode)
+  }
+}
+
+/**
+ * qiankun will inject `appendChild` to insert into other
+ */
+function syncRealContainer(container: ContainerType, option: Options) {
+  const cachedRealContainer = containerCache.get(container)
+
+  // Find real container when not cached or cached container removed
+  if (!cachedRealContainer || !contains(document, cachedRealContainer)) {
+    const placeholderStyle: any = injectCSS('', option)
+    const { parentNode } = placeholderStyle
+    containerCache.set(container, parentNode)
+    container.removeChild(placeholderStyle)
+  }
+}
+
+/**
+ * manually clear container cache to avoid global cache in unit testes
+ */
+export function clearContainerCache() {
+  containerCache.clear()
+}
+
+export function updateCSS(css: string, key: string, option: Options = {}) {
+  const container = getContainer(option)
+
+  // Sync real parent
+  syncRealContainer(container, option)
+
+  const existNode = findExistNode(key, option)
+
+  if (existNode) {
+    if (option.csp?.nonce && existNode.nonce !== option.csp?.nonce)
+      existNode.nonce = option.csp?.nonce
+
+    if (existNode.innerHTML !== css)
+      existNode.innerHTML = css
+
+    return existNode
+  }
+
+  const newNode: any = injectCSS(css, option)
+  newNode.setAttribute(getMark(option), key)
+  return newNode
+}

package/src/Dom/findDOMNode.ts

@@ -0,0 +1,23 @@
+import type { ComponentPublicInstance, MaybeRef } from 'vue'
+import { unref } from 'vue'
+
+export function isDOM(node: any): node is HTMLElement | SVGElement {
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element
+  // Since XULElement is also subclass of Element, we only need HTMLElement and SVGElement
+  return node instanceof HTMLElement || node instanceof SVGElement
+}
+
+/**
+ * Return if a node is a DOM node. Else will return by `findDOMNode`
+ */
+export default function findDOMNode<T = Element | Text>(
+  _node: MaybeRef<ComponentPublicInstance | HTMLElement | SVGElement>,
+): T | null {
+  const node = unref(_node)
+  if (isDOM(node))
+    return (node as unknown) as T
+  else if (node && '$el' in node)
+    return (node.$el as unknown) as T
+
+  return null
+}

package/src/Dom/focus.ts

@@ -0,0 +1,96 @@
+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()
+    }
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    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

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

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

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

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

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

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