@veltra/desktop 1.1.35 → 1.2.0

package/src/components/form/__test__/form-model.test.ts

@@ -1,190 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { DynamicFormModel } from '../dynamic-form-model'
-import { FormModel } from '../form-model'
-import { formField, nestField } from '../helper'
-
-describe('FormModel with Nested Fields', () => {
-  it('should flatten fields and initialize data correctly', () => {
-    const model = new FormModel({
-      name: formField({ value: 'Alice' }),
-      contact: nestField({
-        email: formField({ value: 'alice@example.com' }),
-        phone: formField({ value: '12345678901' })
-      })
-    })
-
-    // Verify allKeys
-    expect(model.allKeys).toEqual(['name', 'contact.email', 'contact.phone'])
-
-    // Verify initialData and data
-    expect(model.data).toEqual({
-      name: 'Alice',
-      contact: { email: 'alice@example.com', phone: '12345678901' }
-    })
-    expect(model.initialData).toEqual({
-      name: 'Alice',
-      contact: { email: 'alice@example.com', phone: '12345678901' }
-    })
-  })
-
-  it('should validate flat and nested fields correctly', async () => {
-    const model = new FormModel({
-      name: formField({ value: '', required: 'Name is required' }),
-      contact: nestField({
-        email: formField({ value: 'invalid-email', preset: 'email' }),
-        phone: formField({ value: '12345678901', required: true })
-      })
-    })
-
-    // Expect initial validation to fail on name and contact.email
-    await expect(model.validate()).rejects.toBe(false)
-    expect(model.errors.get('name')).toEqual(['Name is required'])
-    expect(model.errors.get('contact.email')).toEqual(['邮箱格式不正确'])
-    expect(model.errors.get('contact.phone')).toBeUndefined()
-
-    // Fix name and contact.email, and trigger validation
-    model.data.name = 'Bob'
-    model.data.contact.email = 'bob@example.com'
-
-    // We need to wait for watch effects/nextTick if reactive triggers validation on change
-    // Since validate() is an async function, let's call it directly
-    const valid = await model.validate()
-    expect(valid).toBe(true)
-    expect(model.errors.size).toBe(0)
-  })
-
-  it('should set data and reset data correctly', () => {
-    const model = new FormModel({
-      name: formField({ value: 'Alice' }),
-      contact: nestField({
-        email: formField({ value: 'alice@example.com' }),
-        phone: formField({ value: '12345678901' })
-      })
-    })
-
-    // Update data via setData
-    model.setData({ name: 'Bob', contact: { email: 'bob@example.com', phone: '98765432109' } })
-
-    expect(model.data).toEqual({
-      name: 'Bob',
-      contact: { email: 'bob@example.com', phone: '98765432109' }
-    })
-
-    // Reset data
-    model.resetData()
-    expect(model.data).toEqual({
-      name: 'Alice',
-      contact: { email: 'alice@example.com', phone: '12345678901' }
-    })
-  })
-})
-
-describe('DynamicFormModel with Nested Fields', () => {
-  it('should flatten fields and initialize data correctly', () => {
-    const model = new DynamicFormModel({
-      name: formField({ value: 'Alice' }),
-      contact: nestField({
-        email: formField({ value: 'alice@example.com' }),
-        phone: formField({ value: '12345678901' })
-      })
-    })
-
-    // Verify allKeys
-    expect(model.allKeys).toEqual(['name', 'contact.email', 'contact.phone'])
-
-    // Verify initialData and data
-    expect(model.data).toEqual({
-      name: 'Alice',
-      contact: { email: 'alice@example.com', phone: '12345678901' }
-    })
-    expect(model.initialData).toEqual({
-      name: 'Alice',
-      contact: { email: 'alice@example.com', phone: '12345678901' }
-    })
-  })
-
-  it('should support dynamic add and delete on nested fields', () => {
-    const model = new DynamicFormModel({ name: formField({ value: 'Alice' }) })
-
-    expect(model.allKeys).toEqual(['name'])
-
-    // Dynamically add nested fields
-    model.add(
-      'contact',
-      nestField({
-        email: formField({ value: 'alice@example.com' }),
-        phone: formField({ value: '12345678901' })
-      })
-    )
-
-    expect(model.allKeys).toEqual(['name', 'contact.email', 'contact.phone'])
-    expect(model.data).toEqual({
-      name: 'Alice',
-      contact: { email: 'alice@example.com', phone: '12345678901' }
-    })
-    expect(model.initialData).toEqual({
-      name: 'Alice',
-      contact: { email: 'alice@example.com', phone: '12345678901' }
-    })
-
-    // Dynamically delete nested fields
-    model.delete('contact')
-
-    expect(model.allKeys).toEqual(['name'])
-    expect(model.data.name).toBe('Alice')
-    expect(model.fields.contact).toBeUndefined()
-  })
-
-  it('should validate flat and nested fields correctly', async () => {
-    const model = new DynamicFormModel()
-
-    model.add('name', formField({ value: '', required: 'Name is required' }))
-    model.add(
-      'contact',
-      nestField({
-        email: formField({ value: 'invalid-email', preset: 'email' }),
-        phone: formField({ value: '12345678901', required: true })
-      })
-    )
-
-    // Expect initial validation to fail on name and contact.email
-    await expect(model.validate()).resolves.toBe(false)
-    expect(model.errors.get('name')).toEqual(['Name is required'])
-    expect(model.errors.get('contact.email')).toEqual(['邮箱格式不正确'])
-    expect(model.errors.get('contact.phone')).toBeUndefined()
-
-    // Fix name and contact.email, and trigger validation
-    model.data.name = 'Bob'
-    model.data.contact.email = 'bob@example.com'
-
-    const valid = await model.validate()
-    expect(valid).toBe(true)
-    expect(model.errors.size).toBe(0)
-  })
-
-  it('should set data and reset data correctly for nested fields', () => {
-    const model = new DynamicFormModel({
-      name: formField({ value: 'Alice' }),
-      contact: nestField({
-        email: formField({ value: 'alice@example.com' }),
-        phone: formField({ value: '12345678901' })
-      })
-    })
-
-    // Update data via setData
-    model.setData({ name: 'Bob', contact: { email: 'bob@example.com', phone: '98765432109' } })
-
-    expect(model.data).toEqual({
-      name: 'Bob',
-      contact: { email: 'bob@example.com', phone: '98765432109' }
-    })
-
-    // Reset data
-    model.resetData()
-    expect(model.data).toEqual({
-      name: 'Alice',
-      contact: { email: 'alice@example.com', phone: '12345678901' }
-    })
-  })
-})

package/src/components/form/dynamic-form-model.ts

@@ -1,258 +0,0 @@
-import { o } from '@cat-kit/core'
-import { Validator } from '@veltra/utils'
-import { isReactive, reactive, shallowReactive, watch } from 'vue'
-
-import type { FormModelField, FormModelItem, DataSettingConfig } from '../../types'
-
-function flattenFields(fields: Record<string, any>, prefix = ''): Record<string, FormModelItem> {
-  const result: Record<string, FormModelItem> = {}
-  for (const key in fields) {
-    const item = fields[key]
-    const fullPath = prefix ? `${prefix}.${key}` : key
-    if (item && typeof item === 'object' && '__isNested' in item && item.__isNested) {
-      Object.assign(result, flattenFields((item as any).fields, fullPath))
-    } else {
-      result[fullPath] = item
-    }
-  }
-  return result
-}
-
-/**
- * 动态表单模型
- */
-export class DynamicFormModel {
-  /** 表单数据 */
-  private _data: Record<string, any> = reactive({})
-
-  set data(v: Record<string, any>) {
-    if (!isReactive(v)) {
-      console.error(`data不是一个响应式对象`)
-      return
-    }
-    this._data = v
-    this.watchData()
-  }
-
-  get data() {
-    return this._data
-  }
-
-  /** 表单规则 */
-  readonly fields: Record<string, FormModelField> = shallowReactive(
-    {} as Record<string, FormModelField>
-  )
-
-  private flatFields: Record<string, FormModelItem>
-
-  private validator: Validator
-
-  /**
-   * 不同表单对应的key
-   */
-  formKeys: Map<number, string[]> = new Map()
-
-  readonly errors: Map<string, string[] | undefined> = shallowReactive(new Map())
-
-  /**
-   * 是否在表单值更新时校验
-   */
-  private validateOnFieldChange = true
-
-  private modelChangeCallback: Set<(fields: string, val: any) => void> = new Set()
-
-  private _allKeys: string[] = []
-
-  /** 所有的键 */
-  get allKeys(): string[] {
-    return this._allKeys
-  }
-
-  private updateFlatFields(): void {
-    for (const key in this.flatFields) {
-      delete this.flatFields[key]
-    }
-    const flatted = flattenFields(this.fields)
-    Object.assign(this.flatFields, flatted)
-    this.getAllKeys()
-  }
-
-  private getAllKeys(): void {
-    this._allKeys = Object.keys(this.flatFields)
-  }
-
-  /** 初始数据 */
-  readonly initialData: Record<string, any> = {}
-
-  /**
-   * 变更前的值
-   */
-  private readonly oldData: Record<string, any> = {}
-
-  constructor(fields?: Record<string, FormModelField>) {
-    this.flatFields = shallowReactive({} as Record<string, FormModelItem>)
-    this.validator = new Validator(this.flatFields)
-    this.append(fields ?? {})
-    this.watchData()
-  }
-
-  private watchData(): void {
-    const { oldData } = this
-    watch(this.data, (data) => {
-      let changedKeys: string[] = []
-
-      this.allKeys.forEach((key) => {
-        const oldVal = o(oldData).get(key)
-        const newVal = o(data).get(key)
-        if (oldVal !== newVal) {
-          this.modelChangeCallback.forEach((cb) => cb(key, newVal))
-          changedKeys.push(key)
-          o(oldData).set(key, newVal)
-        }
-      })
-
-      if (this.validateOnFieldChange) {
-        this.validate(changedKeys)
-      } else {
-        this.validateOnFieldChange = true
-      }
-    })
-  }
-
-  append(fields: Record<string, FormModelField>): void {
-    for (const key in fields) {
-      this.add(key, fields[key]!)
-    }
-  }
-
-  /**
-   * 添加字段
-   * @param field 字段
-   * @param item 字段配置项
-   */
-  add(field: string, item: FormModelField): void {
-    this.fields[field] = item
-    const flatItem = flattenFields({ [field]: item })
-    for (const key in flatItem) {
-      const fieldItem = flatItem[key]!
-      const { value } = fieldItem
-      const v = typeof value === 'function' ? value() : value
-      if (v !== undefined) {
-        o(this.initialData).set(key, JSON.parse(JSON.stringify(v)))
-      }
-      o(this.data).set(key, v)
-      o(this.oldData).set(key, v)
-    }
-    this.updateFlatFields()
-  }
-
-  /**
-   * 移除字段
-   * @param field 字段
-   */
-  delete(field: string): void {
-    delete this.fields[field]
-    this.updateFlatFields()
-  }
-
-  /**
-   * 监听值变更
-   * @param cb 回调
-   */
-  onChange(cb: (field: string, val: any) => void): void {
-    this.modelChangeCallback.add(cb)
-  }
-
-  offChange(cb: (field: string, val: any) => void): void {
-    this.modelChangeCallback.delete(cb)
-  }
-
-  async validate(fields?: string | string[]): Promise<boolean> {
-    const { errors, validator, data } = this
-
-    const results = await validator.validate(data, this.getValidateFields(fields))
-
-    // 设置错误提示
-    if (!fields) {
-      errors.clear()
-      for (const field in results) {
-        errors.set(field, results[field])
-      }
-    } else {
-      ~(Array.isArray(fields) ? fields : [fields]).forEach((field) => {
-        const errs = results[field]
-        if (errs?.length) {
-          errors.set(field, errs)
-        } else {
-          errors.delete(field)
-        }
-      })
-    }
-
-    return errors.size === 0
-  }
-
-  private getValidateFields(fields?: string | string[]) {
-    if (!fields) {
-      if (this.formKeys.size) {
-        let _fields: string[] = []
-        this.formKeys.forEach((fields) => {
-          _fields = _fields.concat(fields)
-        })
-        return _fields
-      } else {
-        return this.allKeys
-      }
-    }
-
-    if (!Array.isArray(fields)) {
-      return [fields]
-    }
-    return fields
-  }
-
-  /**
-   * 重置数据
-   * @param fields 需要重置的字段
-   */
-  resetData(keys?: string | string[]): void {
-    if (typeof keys === 'string') {
-      keys = [keys]
-    } else if (Array.isArray(keys)) {
-    } else {
-      keys = this.allKeys
-    }
-
-    this.clearValidate()
-
-    this.validateOnFieldChange = false
-
-    keys.forEach((field) => {
-      o(this.data).set(field as string, o(this.initialData).get(field as string))
-    })
-  }
-
-  /**
-   * 设置值
-   * @param formData 表单值
-   * @param options 配置
-   */
-  setData(formData: Record<string, any>, config?: DataSettingConfig): void {
-    const { validate = true } = config || {}
-
-    if (!validate) {
-      this.validateOnFieldChange = false
-    }
-
-    this.allKeys.forEach((key) => {
-      const value = o(formData).get(key)
-      if (value !== undefined) {
-        o(this.data).set(key, value)
-      }
-    })
-  }
-
-  clearValidate(): void {
-    this.errors.clear()
-  }
-}

package/src/components/form/form-model.ts

@@ -1,255 +0,0 @@
-import { o } from '@cat-kit/core'
-import { middleProxy, Validator } from '@veltra/utils'
-import { nextTick, reactive, shallowReactive, watch, type Reactive } from 'vue'
-
-import type {
-  ModelData,
-  DataSettingConfig,
-  IFormModel,
-  FormModelItem,
-  FormModelField
-} from '../../types'
-
-/**
- * 递归展平字段逻辑
- */
-function flattenFields(fields: Record<string, any>, prefix = ''): Record<string, FormModelItem> {
-  const result: Record<string, FormModelItem> = {}
-  for (const key in fields) {
-    const item = fields[key]
-    const fullPath = prefix ? `${prefix}.${key}` : key
-    if (item && typeof item === 'object' && '__isNested' in item && item.__isNested) {
-      Object.assign(result, flattenFields((item as any).fields, fullPath))
-    } else {
-      result[fullPath] = item
-    }
-  }
-  return result
-}
-
-/**
- * 表单模型
- */
-export class FormModel<
-  Fields extends Record<string, FormModelField> = Record<string, FormModelField>
-> implements IFormModel<Fields> {
-  /** 表单数据 */
-  data!: ModelData<Fields>
-
-  /** 表单规则 */
-  readonly fields: Fields
-
-  /** 所有的键 */
-  readonly allKeys: string[]
-
-  /**
-   * 不同表单所需要校验的字段
-   * @description
-   * 这个值会在表单组件渲染时由表单设置，因为只有真正渲染的组件才应该被校验
-   */
-  formKeys: Map<number, string[]> = new Map()
-
-  /** 初始数据 */
-  readonly initialData: ModelData<Fields>
-
-  readonly errors: Map<string, string[] | undefined> = shallowReactive(new Map())
-
-  private validator: Validator<Record<string, FormModelItem>>
-
-  /**
-   * 是否在表单值更新时校验
-   */
-  private validateOnFieldChange = true
-
-  private modelChangeCallback: Set<(fields: string, val: any) => void> = new Set()
-
-  constructor(fields: Fields) {
-    this.fields = fields
-    const flatFields = flattenFields(fields)
-    const rawData = {} as ModelData<Fields>
-    const allKeys: string[] = []
-
-    for (const key in flatFields) {
-      const fieldItem = flatFields[key]!
-      allKeys.push(key)
-      const { value } = fieldItem
-      let v = value
-
-      if (typeof value === 'function') {
-        watch(value, (v) => {
-          o(this.initialData).set(key, v)
-        })
-        v = value()
-      }
-
-      o(rawData).set(key, v)
-    }
-
-    this.allKeys = allKeys
-    this.initialData = JSON.parse(JSON.stringify(rawData))
-
-    this.setProxyData(reactive(rawData))
-
-    this.validator = new Validator(flatFields)
-
-    return shallowReactive(this)
-  }
-
-  /**
-   * 设置响应式值, 替换掉原有的数据
-   * @description 设置响应式值时，会自动监听值的变化，并进行校验
-   * @param proxyData 响应式的值
-   */
-  setProxyData(proxyData: ModelData<Fields> | Reactive<ModelData<Fields>>): void {
-    const data = middleProxy(proxyData, {
-      set: (field, val) => {
-        this.modelChangeCallback.forEach((cb) => cb(field, val))
-      },
-
-      changed: (fields) => {
-        if (!this.validateOnFieldChange) {
-          this.validateOnFieldChange = true
-          return
-        }
-        this.validate(fields as any)
-      }
-    })
-
-    this.data = data as ModelData<Fields>
-  }
-
-  private getValidateFields(fields?: string | string[]) {
-    if (!fields) {
-      if (this.formKeys.size) {
-        let _fields: string[] = []
-        this.formKeys.forEach((keys) => {
-          _fields = _fields.concat(keys)
-        })
-        return _fields
-      } else {
-        return this.allKeys
-      }
-    }
-
-    if (!Array.isArray(fields)) {
-      return [fields]
-    }
-    return fields
-  }
-
-  /**
-   * 模型校验
-   * @param fields 需要校验的字段, 不传则校验所有字段
-   * @returns
-   */
-  async validate(fields?: string | string[]): Promise<boolean> {
-    const { errors, validator, data } = this
-
-    const results = await validator.validate(data, this.getValidateFields(fields))
-
-    // 全量校验
-    if (!fields) {
-      errors.clear()
-
-      for (const field in results) {
-        errors.set(field as any, results[field])
-      }
-    }
-    // 局部校验
-    else {
-      ~(Array.isArray(fields) ? fields : [fields]).forEach((field) => {
-        const errs = results[field as string]
-        if (errs?.length) {
-          errors.set(field, errs)
-        } else {
-          errors.delete(field)
-        }
-      })
-    }
-
-    if (errors.size > 0) {
-      if (!fields) {
-        nextTick(() => {
-          document.querySelector('.u-form-item.is-error')?.scrollIntoView({ block: 'nearest' })
-        })
-      }
-      return Promise.reject(false)
-    }
-
-    return true
-  }
-
-  /**
-   * 重置数据
-   * @param fields 需要重置的字段
-   */
-  resetData(keys?: string | string[]): void {
-    if (typeof keys === 'string') {
-      keys = [keys]
-    } else if (Array.isArray(keys)) {
-    } else {
-      keys = this.allKeys
-    }
-
-    this.clearValidate()
-
-    this.validateOnFieldChange = false
-
-    keys.forEach((field) => {
-      o(this.data).set(field as string, o(this.initialData).get(field as string))
-    })
-  }
-
-  /**
-   * 设置值
-   * @param formData 表单值
-   * @param options 配置
-   */
-  setData(formData: Partial<Record<string, any>>, config?: DataSettingConfig): FormModel<Fields> {
-    const { validate = true } = config || {}
-
-    if (!validate) {
-      this.validateOnFieldChange = false
-    }
-
-    this.allKeys.forEach((key) => {
-      const value = o(formData).get(key)
-      if (value !== undefined) {
-        o(this.data).set(key, value)
-      }
-    })
-
-    return this
-  }
-
-  /**
-   * 设置初始值
-   * @description 初始值在重置数据和查看原始数据时会用到
-   * @param data 初始值
-   */
-  setInitialData(data: Partial<ModelData<Fields>>): FormModel<Fields> {
-    this.allKeys.forEach((key) => {
-      o(this.initialData).set(key, o(data).get(key))
-    })
-
-    return this
-  }
-
-  /** 清除校验 */
-  clearValidate(): void {
-    this.errors.clear()
-  }
-
-  /**
-   * 监听值变更
-   * @param cb 回调
-   */
-  onChange(cb: (field: string, val: any) => void): void {
-    this.modelChangeCallback.add(cb)
-  }
-
-  /** 关闭监听值变更 */
-  offChange(cb: (field: string, val: any) => void): void {
-    this.modelChangeCallback.delete(cb)
-  }
-}