@v-c/util 0.0.3 → 0.0.5

package/dist/props-util/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue"),i=require("../isValid.cjs"),y=require("./initDefaultProps.cjs");function o(t){return t&&(t.type===u.Comment||t.type===u.Fragment&&t.children.length===0||t.type===u.Text&&t.children.trim()==="")}function p(t=[]){const r=[];return t.forEach(s=>{Array.isArray(s)?r.push(...s):s?.type===u.Fragment?r.push(...p(s.children)):r.push(s)}),r.filter(s=>!o(s))}const f=Symbol("skipFlatten");function a(t,r=!0){const s=Array.isArray(t)?t:[t],n=[];return s.forEach(e=>{Array.isArray(e)?n.push(...a(e,r)):i.default(e)?n.push(e):e&&typeof e=="object"&&e.type===u.Fragment?e.key===f?n.push(e):n.push(...a(e.children,r)):e&&u.isVNode(e)&&(r&&!o(e)?n.push(e):r||n.push(e))}),n}exports.initDefaultProps=y.default;exports.filterEmpty=p;exports.flattenChildren=a;exports.isEmptyElement=o;exports.skipFlattenKey=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue"),i=require("../isValid.cjs"),y=require("./initDefaultProps.cjs");function a(t){return t&&(t.type===u.Comment||t.type===u.Fragment&&t.children.length===0||t.type===u.Text&&t.children.trim()==="")}function f(t=[]){const n=[];return t.forEach(r=>{Array.isArray(r)?n.push(...r):r?.type===u.Fragment?n.push(...f(r.children)):n.push(r)}),n.filter(r=>!a(r))}const o=Symbol("skipFlatten");function p(t,n=!0){const r=Array.isArray(t)?t:[t],s=[];return r.forEach(e=>{Array.isArray(e)?s.push(...p(e,n)):i.default(e)?s.push(e):e&&typeof e=="object"&&e.type===u.Fragment?e.key===o?s.push(e):s.push(...p(e.children,n)):e&&u.isVNode(e)&&(f&&!a(e)?s.push(e):f||s.push(e))}),n?f(s):s}exports.initDefaultProps=y.default;exports.filterEmpty=f;exports.flattenChildren=p;exports.isEmptyElement=a;exports.skipFlattenKey=o;

package/dist/props-util/index.d.ts

@@ -3,5 +3,5 @@ import { default as initDefaultProps } from './initDefaultProps';
 export declare function isEmptyElement(c: any): boolean;
 export declare function filterEmpty(children?: any[]): any[];
 export declare const skipFlattenKey: unique symbol;
-declare function flattenChildren(children?: VNode | VNodeNormalizedChildren, filterEmpty?: boolean): any[];
+declare function flattenChildren(children?: VNode | VNodeNormalizedChildren, isFilterEmpty?: boolean): any[];
 export { flattenChildren, initDefaultProps };

package/dist/props-util/index.js

@@ -1,26 +1,26 @@
-import { Comment as u, Fragment as o, Text as a, isVNode as y } from "vue";
-import m from "../isValid.js";
+import { Comment as a, Fragment as p, Text as y, isVNode as m } from "vue";
+import i from "../isValid.js";
 import { default as g } from "./initDefaultProps.js";
-function f(t) {
-  return t && (t.type === u || t.type === o && t.children.length === 0 || t.type === a && t.children.trim() === "");
+function u(t) {
+  return t && (t.type === a || t.type === p && t.children.length === 0 || t.type === y && t.children.trim() === "");
 }
-function i(t = []) {
-  const r = [];
-  return t.forEach((s) => {
-    Array.isArray(s) ? r.push(...s) : s?.type === o ? r.push(...i(s.children)) : r.push(s);
-  }), r.filter((s) => !f(s));
+function f(t = []) {
+  const s = [];
+  return t.forEach((r) => {
+    Array.isArray(r) ? s.push(...r) : r?.type === p ? s.push(...f(r.children)) : s.push(r);
+  }), s.filter((r) => !u(r));
 }
 const A = Symbol("skipFlatten");
-function p(t, r = !0) {
-  const s = Array.isArray(t) ? t : [t], n = [];
-  return s.forEach((e) => {
-    Array.isArray(e) ? n.push(...p(e, r)) : m(e) ? n.push(e) : e && typeof e == "object" && e.type === o ? e.key === A ? n.push(e) : n.push(...p(e.children, r)) : e && y(e) && (r && !f(e) ? n.push(e) : r || n.push(e));
-  }), n;
+function o(t, s = !0) {
+  const r = Array.isArray(t) ? t : [t], n = [];
+  return r.forEach((e) => {
+    Array.isArray(e) ? n.push(...o(e, s)) : i(e) ? n.push(e) : e && typeof e == "object" && e.type === p ? e.key === A ? n.push(e) : n.push(...o(e.children, s)) : e && m(e) && (f && !u(e) ? n.push(e) : f || n.push(e));
+  }), s ? f(n) : n;
 }
 export {
-  i as filterEmpty,
-  p as flattenChildren,
+  f as filterEmpty,
+  o as flattenChildren,
   g as initDefaultProps,
-  f as isEmptyElement,
+  u as isEmptyElement,
   A as skipFlattenKey
 };

package/dist/type.d.ts

@@ -19,7 +19,7 @@ export interface PropOptions<T = any, D = T> {
     default?: D | DefaultFactory<D> | null | undefined | object;
     validator?: (value: unknown) => boolean;
 }
-declare type VNodeChildAtom = Component | VNode | string | number | boolean | null | undefined | void;
+declare type VNodeChildAtom = Component | VNode | string | number | null | undefined | void;
 export type VueNode = VNodeChildAtom | VNodeChildAtom[] | VNode;
 export declare function withInstall<T>(comp: T): T & Plugin;
 export type MaybeRef<T> = T | Ref<T>;

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@v-c/util",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Vue3 components utils",
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist",
+    "package.json"
+  ],
   "author": {
     "name": "aibayanyu20",
     "email": "aibayanyu@qq.com",

package/src/Children/isFragment.ts

@@ -1,6 +0,0 @@
-import type { VNode, VNodeChild } from 'vue'
-import { Fragment, isVNode } from 'vue'
-
-export function isFragment(node: VNodeChild): node is VNode {
-  return isVNode(node) && node.type === Fragment
-}

package/src/Children/tests/isFragment.test.tsx

@@ -1,15 +0,0 @@
-import { isFragment } from '@v-c/util/dist/Children/isFragment.ts'
-import { describe, expect, it } from 'vitest'
-import { createVNode } from 'vue'
-
-describe('isFragment', () => {
-  it('should ', () => {
-    const Dom = createVNode('div', null, '1')
-
-    const dom = isFragment(Dom)
-    const dom1 = isFragment(<>1</>)
-
-    expect(dom).toBe(false)
-    expect(dom1).toBe(true)
-  })
-})

package/src/Children/tests/toArray.test.tsx

@@ -1,101 +0,0 @@
-import { toArray } from '@v-c/util/dist/Children/toArray.ts'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import { defineComponent, Fragment } from 'vue'
-
-describe('toArray', () => {
-  let children: any
-  const UL = defineComponent({
-    setup(_, { slots }) {
-      return () => {
-        children = slots.default?.()
-        return <ul>{slots.default?.()}</ul>
-      }
-    },
-  })
-  it('basic', () => {
-    const wrapper = mount(
-      <UL>
-        <li key={1}>1</li>
-        <li key={2}>2</li>
-        <li key={3}>3</li>
-      </UL>,
-    )
-    const nodes = toArray(children)
-    expect(nodes).toHaveLength(3)
-    expect(nodes.map(v => v.key)).toEqual([1, 2, 3])
-    wrapper.unmount()
-  })
-
-  it('array', () => {
-    const wrapper = mount(
-      <UL>
-        <li key={1}>1</li>
-        {[<li key={2}>2</li>, <li key={3}>3</li>]}
-      </UL>,
-    )
-    const nodes = toArray(children)
-    expect(nodes).toHaveLength(3)
-    expect(nodes.map(v => v.key)).toEqual([1, 2, 3])
-    wrapper.unmount()
-  })
-
-  it('fragment', () => {
-    const wrapper = mount(
-      <UL>
-        <li key={1}>1</li>
-        <>
-          <li key="2">2</li>
-          <li key="3">3</li>
-        </>
-        <Fragment>
-          <>
-            <li key="4">4</li>
-            <li key="5">5</li>
-          </>
-        </Fragment>
-      </UL>,
-    )
-    const nodes = toArray(children)
-    expect(nodes).toHaveLength(5)
-    expect(nodes.map(v => v.key)).toEqual([1, '2', '3', '4', '5'])
-    wrapper.unmount()
-  })
-
-  it('keep empty', () => {
-    const wrapper = mount(
-      <UL>
-        {null}
-        <li key="1">1</li>
-        <>
-          <li key="2">2</li>
-          {null}
-          <li key="3">3</li>
-        </>
-        <Fragment>
-          <>
-            <li key="4">4</li>
-            {undefined}
-            <li key="5">5</li>
-          </>
-        </Fragment>
-        {undefined}
-      </UL>,
-    )
-
-    const nodes = toArray(children, { keepEmpty: true })
-    expect(nodes).toHaveLength(9)
-    expect(nodes.map(c => c && c.key)).toEqual([
-      null,
-      '1',
-      '2',
-      null,
-      '3',
-      '4',
-      undefined,
-      '5',
-      null,
-    ])
-    wrapper.unmount()
-  })
-})

package/src/Children/toArray.ts

@@ -1,27 +0,0 @@
-import type { VNode } from 'vue'
-import { isFragment } from './isFragment'
-
-export interface Option {
-  keepEmpty?: boolean
-}
-
-export function toArray(children: any, option: Option = {}) {
-  // 从slots中获取的必定是数组
-  let ret: VNode[] = []
-  // 判断children是否是一个数组，如果不是就把它放到一个数组中
-  if (!Array.isArray(children))
-    children = [children]
-  for (const child of children) {
-    if ((child === undefined || child === null) && !option.keepEmpty)
-      continue
-
-    if (Array.isArray(child))
-      ret = ret.concat(toArray(child, option))
-
-    else if (isFragment(child) && child.children)
-      ret = ret.concat(toArray(child.children, option))
-    else
-      ret.push(child)
-  }
-  return ret
-}

package/src/Dom/addEventListener.ts

@@ -1,20 +0,0 @@
-export type WindowEventName = keyof WindowEventMap
-export type DocumentEventName = keyof DocumentEventMap
-export function addEventListener<E extends WindowEventName = WindowEventName>(target: Window, eventType: E, cb: WindowEventMap[E], option?: AddEventListenerOptions): {
-  remove: () => void
-}
-export function addEventListener<E extends DocumentEventName = DocumentEventName>(target: Document, eventType: E, cb: DocumentEventMap[E], option?: AddEventListenerOptions): {
-  remove: () => void
-}
-
-export function addEventListener(...args: any[]) {
-  const [target, eventType, cb, option] = args
-  if (target?.addEventListener)
-    target.addEventListener(eventType as any, cb, option)
-
-  return {
-    remove() {
-      target?.removeEventListener?.(eventType as any, cb, option)
-    },
-  }
-}

package/src/Dom/canUseDom.ts

@@ -1,7 +0,0 @@
-export default function canUseDom() {
-  return !!(
-    typeof window !== 'undefined'
-    && window.document
-    && window.document.createElement
-  )
-}

package/src/Dom/class.ts

@@ -1,29 +0,0 @@
-export function hasClass(node: Element, className: string) {
-  if (node.classList)
-    return node.classList.contains(className)
-
-  const originClass = node.className
-  return ` ${originClass} `.includes(` ${className} `)
-}
-
-export function addClass(node: Element, className: string) {
-  if (node.classList) {
-    node.classList.add(className)
-  }
-  else {
-    if (!hasClass(node, className))
-      node.className = `${node.className} ${className}`
-  }
-}
-
-export function removeClass(node: Element, className: string) {
-  if (node.classList) {
-    node.classList.remove(className)
-  }
-  else {
-    if (hasClass(node, className)) {
-      const originClass = node.className
-      node.className = ` ${originClass} `.replace(` ${className} `, ' ')
-    }
-  }
-}

package/src/Dom/contains.ts

@@ -1,19 +0,0 @@
-export default function contains(root: Node | null | undefined, n?: Node) {
-  if (!root)
-    return false
-
-  // Use native if support
-  if (root.contains)
-    return root.contains(n as any)
-
-  // `document.contains` not support with IE11
-  let node: any = n
-  while (node) {
-    if (node === root)
-      return true
-
-    node = node.parentNode
-  }
-
-  return false
-}

package/src/Dom/css.ts

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

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

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