@veltra/utils 1.0.0

package/src/helper/tween.ts

@@ -0,0 +1,123 @@
+/** 自 cat-kit 3.x Tween 行为对齐的轻量动画（原 `cat-kit/fe` 导出） */
+
+export interface AnimeConfig<State extends Record<string, number>> {
+  duration?: number
+  easingFunction?: (progress: number) => number
+  onComplete?(state: State): void
+}
+
+export interface TweenConfig<State extends Record<string, number>> {
+  duration?: number
+  onUpdate?(state: State): void
+  onComplete?(state: State): void
+  easingFunction?: (progress: number) => number
+}
+
+export class Tween<State extends Record<string, number> = Record<string, number>> {
+  readonly state: State
+  protected duration = 300
+  protected onUpdate?: (state: State) => void
+  protected onComplete?: (state: State) => void
+  protected frameId?: number
+  protected easingFunction: (progress: number) => number
+  private defaultState: State
+
+  constructor(state: State, config?: TweenConfig<State>) {
+    this.state = state
+    this.defaultState = { ...state }
+    const { duration, onUpdate, onComplete, easingFunction } = config || {}
+    if (duration !== undefined) this.duration = duration
+    if (onUpdate !== undefined) this.onUpdate = onUpdate
+    if (onComplete !== undefined) this.onComplete = onComplete
+    this.easingFunction = easingFunction ?? Tween.easing.linear
+  }
+
+  protected raf(options: {
+    onComplete: () => void
+    duration: number
+    tick: (p: number) => void
+  }): void {
+    const start = performance.now()
+    const { onComplete, tick, duration } = options
+    const update = (timestamp: number) => {
+      const elapsed = timestamp - start
+      const progress = Math.min(elapsed / duration, 1)
+      tick(progress)
+      if (progress < 1) {
+        this.frameId = requestAnimationFrame(update)
+      } else {
+        tick(progress)
+        this.stop()
+        onComplete()
+      }
+    }
+    this.frameId = requestAnimationFrame(update)
+  }
+
+  to(state: Partial<State>, config?: AnimeConfig<State>): void {
+    this.stop()
+    const prevState = { ...this.state }
+    const stateDistance = Object.keys(state).reduce(
+      (acc, key) => {
+        const k = key as keyof State
+        const sv = state[k] as number
+        const pv = prevState[k] as number
+        if ((sv || sv === 0) && (pv || pv === 0)) {
+          acc[key] = sv - pv
+        }
+        return acc
+      },
+      {} as Record<string, number>
+    )
+    const duration = config?.duration || this.duration
+    const easingFunction = config?.easingFunction || this.easingFunction
+    const onComplete = config?.onComplete || this.onComplete
+    this.raf({
+      duration,
+      onComplete: () => {
+        for (const key in state) {
+          if (key in this.state) {
+            ;(this.state as Record<string, number>)[key] = state[key as keyof State] as number
+          }
+        }
+        this.onUpdate?.(this.state)
+        onComplete?.(this.state)
+      },
+      tick: (progress) => {
+        for (const key in stateDistance) {
+          const pk = key as keyof State
+          const target = (prevState[pk] as number) + easingFunction(progress) * stateDistance[key]!
+          ;(this.state as Record<string, number>)[key] = target
+        }
+        this.onUpdate?.(this.state)
+      }
+    })
+  }
+
+  back(config?: AnimeConfig<State>): void {
+    this.to(this.defaultState as Partial<State>, config)
+  }
+
+  private stop(): boolean {
+    if (!this.frameId) return false
+    cancelAnimationFrame(this.frameId)
+    this.frameId = undefined
+    return true
+  }
+
+  static readonly easing = {
+    linear: (p: number) => p,
+    easeInQuad: (p: number) => p * p,
+    easeOutQuad: (p: number) => p * (2 - p),
+    easeInOutQuad: (p: number) => (p < 0.5 ? 2 * p * p : -1 + (4 - 2 * p) * p),
+    easeInBack: (p: number) => p * p * ((2.70158 + 1) * p - 1),
+    easeOutBack: (p: number) => 1 + 2.70158 * Math.pow(p - 1, 3) + 1.70158 * Math.pow(p - 1, 2),
+    easeInOutBack: (p: number) => {
+      const c1 = 1.70158
+      const c2 = c1 * 1.525
+      return p < 0.5
+        ? (Math.pow(2 * p, 2) * ((c2 + 1) * 2 * p - c2)) / 2
+        : (Math.pow(2 * p - 2, 2) * ((c2 + 1) * (p * 2 - 2) + c2) + 2) / 2
+    }
+  }
+}

package/src/helper/vue.ts

@@ -0,0 +1,88 @@
+import {
+  Text,
+  Fragment,
+  Comment,
+  type VNode,
+  isVNode,
+  createTextVNode,
+  type VNodeArrayChildren,
+  shallowRef,
+  watch,
+  type ShallowRef
+} from 'vue'
+
+interface TextVNode extends VNode {
+  children: string
+}
+
+/**
+ * 是否为文本
+ * @param node
+ * @returns
+ */
+export function isTextNode(node: VNode): node is TextVNode {
+  return node.type === Text
+}
+
+/**
+ * 是否为片段
+ * @param node
+ * @returns
+ */
+export function isFragment(node: any): node is VNode {
+  return node && node.type === Fragment
+}
+
+interface CommentVNode extends VNode {
+  children: string
+}
+
+/**
+ * 是否为注释
+ * @param node
+ * @returns
+ */
+export function isComment(node: VNode): node is CommentVNode {
+  return node.type === Comment
+}
+
+/**
+ * 是否为模板
+ * @param node
+ * @returns
+ */
+export function isTemplate(node: unknown): node is VNode {
+  return isVNode(node) && node.type === 'template'
+}
+
+/**
+ * 提取常规虚拟节点(移除type为fragment、template的节点)
+ * @param nodes VNodeArrayChildren
+ * @param results 虚拟节点
+ * @returns
+ */
+export function extractNormalVNodes(nodes: VNodeArrayChildren, results: VNode[] = []): VNode[] {
+  nodes.forEach((node) => {
+    if (!isVNode(node)) {
+      if (typeof node === 'string' || typeof node === 'number') {
+        results.push(createTextVNode(String(node)))
+      }
+      return
+    }
+    if ((isFragment(node) || isTemplate(node)) && Array.isArray(node.children)) {
+      extractNormalVNodes(node.children, results)
+    } else {
+      results.push(node)
+    }
+  })
+  return results
+}
+
+export function shallowComputed<T>(getter: () => T): ShallowRef<T> {
+  const result = shallowRef<T>(getter())
+  watch(getter, (value) => {
+    result.value = value
+  })
+
+  return result
+}

package/src/index.ts

@@ -0,0 +1,28 @@
+export * from './dom/class-name'
+
+export * from './dom/highlight'
+
+export * from './dom/position'
+
+export * from './dom/style'
+
+export * from './dom/z-index'
+
+export * from './form/validate'
+
+export * from './helper/create-increase'
+
+export * from './helper/create-toggle'
+
+export * from './helper/tween'
+
+export * from './helper/frame'
+
+export * from './helper/make-bem'
+
+export * from './helper/vue'
+
+export * from './reactive/proxy'
+
+export * from './shared'
+export * from './types'

package/src/reactive/proxy.ts

@@ -0,0 +1,90 @@
+/**
+ * 创建一个介于vue的reactive和shallowReactive对象的中间层
+ * @description
+ * 如果对象含有嵌套对象，则**递归**进行中间代理
+ *
+ * @param o 代理对象
+ * @param handler 处理函数
+ * @param options 代理配置
+ * @returns 中间代理对象
+ */
+function createMiddleProxy(
+  o: Record<string, any>,
+  handler?: {
+    set?: (field: string, val: any) => void
+    get?: (field: string) => any
+    changed?: (fields: string[]) => void
+  },
+  options?: {
+    weakMap?: WeakMap<Record<string, any>, any>
+    parentsField?: string
+    changedFields?: string[]
+  }
+) {
+  let { weakMap, parentsField, changedFields = [] } = options || {}
+  if (!weakMap) {
+    weakMap = new WeakMap()
+  }
+
+  return new Proxy(o, {
+    set(target, field: string, val) {
+      const changedField = parentsField ? `${parentsField}.${field}` : field
+      handler?.set?.(changedField, val)
+      target[field] = val
+
+      changedFields.push(changedField)
+      Promise.resolve().then(() => {
+        if (!changedFields.length) return
+        handler?.changed?.([...changedFields])
+        changedFields.splice(0)
+      })
+
+      return true
+    },
+
+    get(target, field: string) {
+      handler?.get?.(field)
+
+      const val = target[field]
+      if (
+        val !== null &&
+        typeof val === 'object' &&
+        !(val instanceof Date) &&
+        !(val instanceof RegExp)
+      ) {
+        if (weakMap.has(val)) return weakMap.get(val)
+        const valProxy = createMiddleProxy(val, handler, {
+          weakMap,
+          parentsField: parentsField ? `${parentsField}.${field}` : field,
+          changedFields
+        })
+        weakMap.set(val, valProxy)
+
+        return valProxy
+      }
+
+      return val
+    }
+  })
+}
+
+/**
+ * 中间代理, 用于vue的reactive和shallowReactive方法的中间层
+ * @param o 代理对象
+ * @param config 代理配置
+ * @returns
+ */
+export function middleProxy<O extends Record<string, any>>(
+  o: O,
+  handler?: {
+    set?: (field: string, val: any) => void
+    get?: (field: string) => any
+    /**
+     * 数值变更回调，传入的参数是本次模型值变更的所有字段
+     * @param fields 变更的字段
+     */
+    changed?: (fields: string[]) => void
+  }
+): O {
+  return createMiddleProxy(o, handler) as O
+}

package/src/shared/constants.ts

@@ -0,0 +1,8 @@
+/** 命名前缀 */
+export const NAME_SPACE = 'U'
+
+/** 类前缀 */
+export const CLS_PREFIX = `${NAME_SPACE.toLowerCase()}-` as 'u-'
+
+/** 表单空内容 */
+export const FORM_EMPTY_CONTENT = '-'

package/src/shared/index.ts

@@ -0,0 +1 @@
+export * from './constants'

package/src/types/component-common.ts

@@ -0,0 +1,41 @@
+export type ComponentSize = 'small' | 'default' | 'large'
+
+export type ColorType = 'primary' | 'info' | 'success' | 'warning' | 'danger'
+
+/** 断点名称 */
+export type BreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+/** 组件通用属性 */
+export interface ComponentProps {
+  /** 组件尺寸 */
+  size?: ComponentSize
+}
+
+/** 表单组件通用属性 */
+export interface FormComponentProps extends ComponentProps {
+  /** 在表单控件内时的提示 */
+  tips?: string
+  /** 所占列的大小 */
+  span?:
+    | number
+    | 'full'
+    | ({
+        [key in BreakpointName]?: 'full' | number
+      } & { default: number | 'full' })
+  /** 表单标签文字 */
+  label?: string
+  /** 表单项字段 */
+  field?: string
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否只读 */
+  readonly?: boolean
+}
+
+/** 带有服务端交互功能的组件属性 */
+export interface PropsWithServerQuery {
+  /** 请求接口地址 */
+  api?: string
+  /** 请求查询参数 */
+  query?: Record<string, any>
+}

package/src/types/form-context.ts

@@ -0,0 +1,2 @@
+/** 表单 provide/inject 上下文（完整 props 见 @veltra/desktop/types/form） */
+export type FormContextInjectProps = Record<string, unknown>

package/src/types/helper.ts

@@ -0,0 +1,31 @@
+import type { VNode } from 'vue'
+
+export type Null<T> = null | T
+
+export type Undef<T> = undefined | T
+
+/** 自定义事件, 可以指定target类型 */
+export interface DefineEvent<T = HTMLElement> extends Omit<Event, 'target'> {
+  target: T
+}
+
+/** 解构VueExpose中被引用的实例 */
+export type DeconstructValue<E extends Record<string, any>> = {
+  [K in keyof E]: E[K] extends { value: infer V } ? V : E[K]
+}
+
+/** 索引类型 */
+export type Index<Keys extends string, Val> = {
+  [key in Keys]?: Val
+}
+
+/**
+ * 渲染函数返回内容
+ */
+export type RenderReturn =
+  | (undefined | VNode | string | null | number)[]
+  | undefined
+  | VNode
+  | string
+  | null
+  | number

package/src/types/index.ts

@@ -0,0 +1,4 @@
+export * from './helper'
+export * from './component-common'
+export * from './form-context'
+export * from './utils/form/validate'

package/src/types/utils/form/validate.ts

@@ -0,0 +1,33 @@
+export type Data = Record<string, any>
+
+export type PresetRule = 'email' | 'phone' | 'num' | 'url' | 'idCard'
+
+/** 字段校验规则 */
+export interface ValidateRule {
+  /** 是否必填 */
+  required?: boolean | string
+  /** 长度单位 */
+  length?: number | [number, string]
+  /** 最小值 */
+  min?: number | [number, string]
+  /** 最大值 */
+  max?: number | [number, string]
+  /** 最小长度 */
+  minLen?: number | [number, string]
+  /** 最大长度 */
+  maxLen?: number | [number, string]
+  /** 匹配 */
+  match?: RegExp | [RegExp, string] | string
+  /** 预设 */
+  preset?: PresetRule
+  /** 自定义校验 */
+  validator?: (value: any, data: Data) => Promise<string> | string
+}
+
+export interface ValidatorConfig {
+  /**
+   * 是否懒校验，为true时在任意一个字段的的任意规则校验不通过时立马结束校验，性能稍微高一点，但是不能得出所有的错误
+   * @default true
+   */
+  lazy?: boolean
+}