element-pe 1.0.2 → 1.0.6

package/packages/utils/tests/dom.spec.ts

@@ -0,0 +1,183 @@
+import { hasClass, addClass, removeClass } from '../dom'
+
+const getClass = (el: Element) => {
+  if (!el) {
+    return ''
+  }
+  return el.getAttribute('class')
+}
+
+describe('Dom Utils', () => {
+  describe('hasClass', () => {
+    it('Judge whether a Element has a class', () => {
+      const div = document.createElement('div')
+      div.className = 'a b   cc'
+      expect(hasClass(div, 'a')).toBe(true)
+      expect(hasClass(div, 'ab')).toBe(false)
+      try {
+        expect(hasClass(div, 'a b'))
+      } catch (error: any) {
+        expect(error.message).toEqual('className should not contain space.')
+      }
+
+      const canvas = document.createElement('canvas')
+      canvas.className = 'canvas-a canvas-b cc'
+      expect(hasClass(canvas, 'a')).toBe(false)
+      expect(hasClass(canvas, 'canvas-a')).toBe(true)
+      //   remove classList
+      canvas.setAttribute('classList', '')
+      expect(hasClass(canvas, 'b')).toBe(false)
+      expect(hasClass(canvas, 'canvas-b')).toBe(true)
+
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      svg.setAttribute('class', 'svg-a svg-b')
+      expect(hasClass(svg, 'a')).toBe(false)
+      expect(hasClass(svg, 'svg-a')).toBe(true)
+      //   remove classList
+      svg.setAttribute('classList', '')
+      expect(hasClass(svg, 'b')).toBe(false)
+      expect(hasClass(svg, 'svg-b')).toBe(true)
+
+      const path = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'path'
+      )
+      path.setAttribute('class', 'path-a path-b')
+      expect(hasClass(path, 'a')).toBe(false)
+      expect(hasClass(path, 'path-a')).toBe(true)
+      //   remove classList
+      path.setAttribute('classList', '')
+      expect(hasClass(path, 'b')).toBe(false)
+      expect(hasClass(path, 'path-b')).toBe(true)
+    })
+  })
+
+  describe('addClass', () => {
+    it('Add class to element', () => {
+      const div = document.createElement('div')
+      addClass(div, 'div-abc abc')
+      expect(hasClass(div, 'abc')).toBe(true)
+      expect(hasClass(div, 'div-abc')).toBe(true)
+      expect(hasClass(div, 'div')).toBe(false)
+      addClass(div, 'abc')
+      expect(getClass(div)).toEqual('div-abc abc')
+      //   remove classList
+      div.setAttribute('classList', '')
+      addClass(div, 'div-box con')
+      expect(hasClass(div, 'con')).toBe(true)
+      expect(hasClass(div, 'div-box')).toBe(true)
+      expect(hasClass(div, 'box')).toBe(false)
+      addClass(div, 'con')
+      expect(getClass(div)).toEqual('div-abc abc div-box con')
+
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      addClass(svg, 'svg-abc svg')
+      expect(hasClass(svg, 'svg')).toBe(true)
+      expect(hasClass(svg, 'svg-abc')).toBe(true)
+      expect(hasClass(svg, 'abc')).toBe(false)
+      expect(hasClass(svg, 'sv')).toBe(false)
+      addClass(svg, 'svg')
+      expect(getClass(svg)).toEqual('svg-abc svg')
+      addClass(svg, 'svg-aa     space')
+      expect(getClass(svg)).toEqual('svg-abc svg svg-aa space')
+      //   remove classList
+      svg.setAttribute('classList', '')
+      addClass(svg, 'svg-abc-a svg-b')
+      expect(hasClass(svg, 'svg')).toBe(true)
+      expect(hasClass(svg, 'svg-abc')).toBe(true)
+      expect(hasClass(svg, 'abc')).toBe(false)
+      expect(hasClass(svg, 'sv')).toBe(false)
+      expect(hasClass(svg, 'svg-abc-a')).toBe(true)
+      expect(hasClass(svg, 'svg-b')).toBe(true)
+      expect(hasClass(svg, 'a')).toBe(false)
+
+      const path = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'path'
+      )
+      addClass(path, 'path-abc path')
+      expect(hasClass(path, 'path')).toBe(true)
+      expect(hasClass(path, 'path-abc')).toBe(true)
+      expect(hasClass(path, 'abc')).toBe(false)
+      expect(hasClass(path, 'pa')).toBe(false)
+      addClass(path, 'path')
+      expect(getClass(path)).toEqual('path-abc path')
+      //   remove classList
+      path.setAttribute('classList', '')
+      expect(hasClass(path, 'path')).toBe(true)
+      expect(hasClass(path, 'path-abc')).toBe(true)
+      expect(hasClass(path, 'abc')).toBe(false)
+      expect(hasClass(path, 'pa')).toBe(false)
+    })
+  })
+
+  describe('removeClass', () => {
+    it('Remove class on element', () => {
+      const div = document.createElement('div')
+      addClass(div, 'div-abc abc ab bb cc')
+
+      removeClass(div, 'abc')
+      expect(hasClass(div, 'abc')).toBe(false)
+
+      expect(hasClass(div, 'bb')).toBe(true)
+      expect(hasClass(div, 'cc')).toBe(true)
+
+      removeClass(div, 'bb cc')
+      expect(hasClass(div, 'bb')).toBe(false)
+      expect(hasClass(div, 'cc')).toBe(false)
+      expect(getClass(div)).toEqual('div-abc ab')
+
+      //   remove classList
+      div.setAttribute('classList', '')
+      addClass(div, 'div-box con')
+      removeClass(div, 'div-box con')
+      expect(hasClass(div, 'con')).toBe(false)
+      expect(hasClass(div, 'div-box')).toBe(false)
+      expect(getClass(div)).toBe('div-abc ab')
+
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      addClass(svg, 'svg-abc svg')
+      removeClass(svg, 'svg-abc     svg')
+      expect(hasClass(svg, 'svg-abc')).toBe(false)
+      expect(hasClass(svg, 'abc')).toBe(false)
+      expect(getClass(svg)).toEqual('')
+      // remove classList
+      svg.setAttribute('classList', '')
+      addClass(svg, 'svg-abc-a svg-b')
+      expect(hasClass(svg, 'svg')).toBe(false)
+      expect(hasClass(svg, 'svg-abc')).toBe(false)
+      expect(hasClass(svg, 'abc')).toBe(false)
+      expect(hasClass(svg, 'svg-abc-a')).toBe(true)
+      expect(hasClass(svg, 'svg-b')).toBe(true)
+      removeClass(svg, 'svg')
+      expect(getClass(svg)).toEqual('svg-abc-a svg-b')
+      removeClass(svg, 'svg-abc-a')
+      expect(hasClass(svg, 'svg-abc-a')).toBe(false)
+      expect(hasClass(svg, 'svg-b')).toBe(true)
+
+      const path = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'path'
+      )
+      addClass(path, 'path-abc path')
+      expect(hasClass(path, 'path')).toBe(true)
+      expect(hasClass(path, 'path-abc')).toBe(true)
+      expect(hasClass(path, 'abc')).toBe(false)
+      expect(hasClass(path, 'pa')).toBe(false)
+      removeClass(path, 'path')
+      expect(hasClass(path, 'path')).toBe(false)
+      expect(hasClass(path, 'path-abc')).toBe(true)
+      //   remove classList
+      path.setAttribute('classList', '')
+      addClass(path, 'path path-1 path2')
+      expect(hasClass(path, 'path')).toBe(true)
+      expect(hasClass(path, 'path-1')).toBe(true)
+      expect(getClass(path)).toEqual('path-abc path path-1 path2')
+      removeClass(path, 'path')
+      expect(hasClass(path, 'path')).toBe(false)
+      expect(getClass(path)).toEqual('path-abc path-1 path2')
+      removeClass(path, 'path-abc path-1 path2')
+      expect(getClass(path)).toEqual('')
+    })
+  })
+})

package/packages/utils/tests/prop.spec.ts

@@ -1,5 +1,8 @@
+/* eslint-disable @typescript-eslint/ban-types */
+
 import { expectTypeOf } from 'expect-type'
 import { buildProp, definePropType, mutable, keyOf, buildProps } from '../props'
+import type { propKey } from '../props'
 
 import type { PropType, ExtractPropTypes } from 'vue'
 
@@ -14,6 +17,7 @@ describe('buildProp', () => {
       readonly required: false
       readonly default: undefined
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -27,6 +31,7 @@ describe('buildProp', () => {
       readonly required: false
       readonly default: undefined
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -41,6 +46,7 @@ describe('buildProp', () => {
       readonly required: false
       readonly default: undefined
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -55,6 +61,7 @@ describe('buildProp', () => {
       readonly required: false
       readonly default: undefined
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -69,6 +76,7 @@ describe('buildProp', () => {
       readonly required: true
       readonly default?: undefined
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -84,6 +92,7 @@ describe('buildProp', () => {
       readonly required: false
       readonly default: 'b'
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -96,8 +105,9 @@ describe('buildProp', () => {
     ).toEqualTypeOf<{
       readonly type: PropType<string[]>
       readonly required: false
-      readonly default: () => ['a', 'b']
+      readonly default: ['a', 'b']
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -114,8 +124,9 @@ describe('buildProp', () => {
     ).toEqualTypeOf<{
       readonly type: PropType<Options>
       readonly required: false
-      readonly default: () => { key: 'value' }
+      readonly default: { key: 'value' }
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -132,8 +143,9 @@ describe('buildProp', () => {
     ).toEqualTypeOf<{
       readonly type: PropType<string | Options>
       readonly required: false
-      readonly default: () => { key: string }
+      readonly default: { key: string }
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -149,6 +161,7 @@ describe('buildProp', () => {
       readonly required: true
       readonly default?: undefined
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -162,6 +175,7 @@ describe('buildProp', () => {
       readonly required: false
       readonly default: undefined
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -171,6 +185,7 @@ describe('buildProp', () => {
       readonly required: false
       readonly default: undefined
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -185,6 +200,7 @@ describe('buildProp', () => {
       readonly required: false
       readonly default: undefined
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -199,6 +215,7 @@ describe('buildProp', () => {
       readonly required: true
       readonly default?: undefined
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -213,6 +230,7 @@ describe('buildProp', () => {
       readonly required: false
       readonly default: 'a'
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -225,8 +243,9 @@ describe('buildProp', () => {
     ).toEqualTypeOf<{
       readonly type: PropType<{ key: 'a' | 'b' | 'c' } | undefined>
       readonly required: false
-      readonly default: () => { key: 'a' }
+      readonly default: { key: 'a' }
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -241,6 +260,22 @@ describe('buildProp', () => {
       readonly required: false
       readonly default: ''
       readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
+    }>()
+  })
+
+  it('default value is empty object', () => {
+    expectTypeOf(
+      buildProp({
+        type: Object,
+        default: () => mutable({} as const),
+      } as const)
+    ).toEqualTypeOf<{
+      readonly type: PropType<Record<string, any>>
+      readonly required: false
+      readonly default: {}
+      readonly validator: ((val: unknown) => boolean) | undefined
+      [propKey]: true
     }>()
   })
 
@@ -266,27 +301,138 @@ describe('buildProp', () => {
 
 describe('buildProps', () => {
   it('test buildProps', () => {
-    expectTypeOf(
-      buildProps({
-        key1: {
-          type: definePropType<'a' | 'b'>(String),
-        },
-        key2: {
-          values: [1, 2, 3, 4],
-        },
-      } as const)
-    ).toEqualTypeOf<{
+    const propsCommon = buildProps({
+      type: {
+        type: String,
+        default: 'hello',
+      },
+    } as const)
+
+    const props = buildProps({
+      ...propsCommon,
+      key1: {
+        type: definePropType<'a' | 'b'>(String),
+      },
+      key2: {
+        values: [1, 2, 3, 4],
+      },
+      key3: {
+        values: [1, 2, 3, 4],
+        default: 2,
+      },
+      key4: {
+        values: keyOf({ a: 'a', b: 'b' }),
+        default: 'a',
+      },
+      key5: Boolean,
+      key6: String,
+      key7: null,
+      key8: Object,
+      key9: Date,
+      key10: Set,
+      key11: undefined,
+      // nested
+      key12: buildProp({
+        type: String,
+      } as const),
+
+      // default generator
+      key13: {
+        type: [String, Number, Function],
+        default: () => '123' as const,
+      } as const,
+      key14: {
+        type: Function,
+        default: () => '123' as const,
+      } as const,
+      key15: {
+        type: Function,
+        default: () => () => '123' as const,
+      } as const,
+      key16: {
+        type: String,
+        default: () => '123' as const,
+      } as const,
+    } as const)
+
+    expectTypeOf(props).toEqualTypeOf<{
+      readonly type: {
+        readonly type: PropType<string>
+        readonly required: false
+        readonly default: 'hello'
+        readonly validator: ((val: unknown) => boolean) | undefined
+        [propKey]: true
+      }
+
       readonly key1: {
         readonly type: PropType<'a' | 'b'>
         readonly required: false
-        readonly default: undefined
         readonly validator: ((val: unknown) => boolean) | undefined
+        [propKey]: true
+        readonly default: undefined
       }
       readonly key2: {
         readonly type: PropType<1 | 2 | 3 | 4>
         readonly required: false
         readonly default: undefined
         readonly validator: ((val: unknown) => boolean) | undefined
+        [propKey]: true
+      }
+      readonly key3: {
+        readonly type: PropType<1 | 2 | 3 | 4>
+        readonly required: false
+        readonly default: 2
+        readonly validator: ((val: unknown) => boolean) | undefined
+        [propKey]: true
+      }
+      readonly key4: {
+        readonly type: PropType<'a' | 'b'>
+        readonly required: false
+        readonly default: 'a'
+        readonly validator: ((val: unknown) => boolean) | undefined
+        [propKey]: true
+      }
+      readonly key5: BooleanConstructor
+      readonly key6: StringConstructor
+      readonly key7: null
+      readonly key8: ObjectConstructor
+      readonly key9: DateConstructor
+      readonly key10: SetConstructor
+      readonly key11: undefined
+      readonly key12: {
+        readonly type: PropType<string>
+        readonly required: false
+        readonly default: undefined
+        readonly validator: ((val: unknown) => boolean) | undefined
+        [propKey]: true
+      }
+      readonly key13: {
+        readonly type: PropType<string | number | Function>
+        readonly required: false
+        readonly default: '123'
+        readonly validator: ((val: unknown) => boolean) | undefined
+        [propKey]: true
+      }
+      readonly key14: {
+        readonly type: PropType<Function>
+        readonly required: false
+        readonly default: () => '123'
+        readonly validator: ((val: unknown) => boolean) | undefined
+        [propKey]: true
+      }
+      readonly key15: {
+        readonly type: PropType<Function>
+        readonly required: false
+        readonly default: () => () => '123'
+        readonly validator: ((val: unknown) => boolean) | undefined
+        [propKey]: true
+      }
+      readonly key16: {
+        readonly type: PropType<string>
+        readonly required: false
+        readonly default: '123'
+        readonly validator: ((val: unknown) => boolean) | undefined
+        [propKey]: true
       }
     }>()
   })

package/packages/utils/util.ts

@@ -14,10 +14,10 @@ import {
 } from '@vue/shared'
 import isEqualWith from 'lodash/isEqualWith'
 import isServer from './isServer'
-import { debugWarn } from './error'
+import { debugWarn, throwError } from './error'
 
 import type { ComponentPublicInstance, CSSProperties, Ref } from 'vue'
-import type { AnyFunction, TimeoutHandle, Nullable } from './types'
+import type { TimeoutHandle, Nullable } from './types'
 
 export const SCOPE = 'Util'
 
@@ -68,7 +68,7 @@ export function getPropByPath(
         tempObj = tempObj[key]
       } else {
         if (strict) {
-          throw new Error('please transfer a valid prop path to form item!')
+          throwError(SCOPE, 'Please transfer a valid prop path to form item!')
         }
         break
       }
@@ -144,22 +144,21 @@ export {
   extend,
 }
 
-export const isBool = (val: unknown) => typeof val === 'boolean'
-export const isNumber = (val: unknown) => typeof val === 'number'
+export const isBool = (val: unknown): val is boolean => typeof val === 'boolean'
+export const isNumber = (val: unknown): val is number => typeof val === 'number'
 export const isHTMLElement = (val: unknown) => toRawType(val).startsWith('HTML')
 
-export function rafThrottle<T extends AnyFunction<any>>(
-  fn: T
-): AnyFunction<void> {
+export function rafThrottle<T extends (...args: any) => any>(fn: T): T {
   let locked = false
-  return function (...args: any[]) {
+  return function (this: ThisParameterType<T>, ...args: any[]) {
     if (locked) return
     locked = true
+
     window.requestAnimationFrame(() => {
-      fn.apply(this, args)
+      Reflect.apply(fn, this, args)
       locked = false
     })
-  }
+  } as T
 }
 
 export const clearTimer = (timer: Ref<TimeoutHandle>) => {

package/packages/utils/vnode.ts

@@ -35,8 +35,8 @@ export enum PatchFlags {
   BAIL = -2,
 }
 
-export const isFragment = (node: VNodeChild) =>
-  (node as VNode).type === Fragment
+export const isFragment = (node: unknown): node is VNode =>
+  isVNode(node) && node.type === Fragment
 
 export const isText = (node: VNodeChild) => (node as VNode).type === Text
 
@@ -64,8 +64,8 @@ function getChildren(node: VNode, depth: number): undefined | VNode {
  * determine if the element is a valid element type rather than fragments and comment e.g. <template> v-if
  * @param node {VNode} node to be tested
  */
-export const isValidElementNode = (node: VNodeChild) =>
-  !(isFragment(node) || isComment(node))
+export const isValidElementNode = (node: unknown): node is VNode =>
+  isVNode(node) && !isFragment(node) && !isComment(node)
 
 export const getFirstValidNode = (
   nodes: VNodeChild,