@veltra/desktop 1.1.24 → 1.1.26

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

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

@@ -2,7 +2,21 @@ import { o } from '@cat-kit/core'
 import { Validator } from '@veltra/utils'
 import { isReactive, reactive, shallowReactive, watch } from 'vue'
 
-import type { FormModelItem, DataSettingConfig } from '../../types'
+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
+}
 
 /**
  * 动态表单模型
@@ -25,10 +39,12 @@ export class DynamicFormModel {
   }
 
   /** 表单规则 */
-  readonly fields: Record<string, FormModelItem> = shallowReactive(
-    {} as Record<string, FormModelItem>
+  readonly fields: Record<string, FormModelField> = shallowReactive(
+    {} as Record<string, FormModelField>
   )
 
+  private flatFields: Record<string, FormModelItem>
+
   private validator: Validator
 
   /**
@@ -52,8 +68,17 @@ export class DynamicFormModel {
     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.fields)
+    this._allKeys = Object.keys(this.flatFields)
   }
 
   /** 初始数据 */
@@ -64,10 +89,10 @@ export class DynamicFormModel {
    */
   private readonly oldData: Record<string, any> = {}
 
-  constructor(fields?: Record<string, FormModelItem>) {
+  constructor(fields?: Record<string, FormModelField>) {
+    this.flatFields = shallowReactive({} as Record<string, FormModelItem>)
+    this.validator = new Validator(this.flatFields)
     this.append(fields ?? {})
-    this.validator = new Validator(this.fields)
-    this.getAllKeys()
     this.watchData()
   }
 
@@ -94,9 +119,9 @@ export class DynamicFormModel {
     })
   }
 
-  append(fields: Record<string, FormModelItem>): void {
+  append(fields: Record<string, FormModelField>): void {
     for (const key in fields) {
-      this.add(key, fields[key] ?? {})
+      this.add(key, fields[key]!)
     }
   }
 
@@ -105,17 +130,20 @@ export class DynamicFormModel {
    * @param field 字段
    * @param item 字段配置项
    */
-  add(field: string, item: FormModelItem): void {
+  add(field: string, item: FormModelField): void {
     this.fields[field] = item
-    const { value } = item
-    const v = typeof value === 'function' ? value() : value
-    /** 这是有bug的 */
-    if (v !== undefined) {
-      this.initialData[field] = JSON.parse(JSON.stringify(v))
+    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)
     }
-    o(this.data).set(field, v)
-    o(this.oldData).set(field, v)
-    this.getAllKeys()
+    this.updateFlatFields()
   }
 
   /**
@@ -124,7 +152,7 @@ export class DynamicFormModel {
    */
   delete(field: string): void {
     delete this.fields[field]
-    this.getAllKeys()
+    this.updateFlatFields()
   }
 
   /**

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

@@ -2,19 +2,30 @@ import { o } from '@cat-kit/core'
 import { middleProxy, Validator } from '@veltra/utils'
 import { nextTick, reactive, shallowReactive, watch, type Reactive } from 'vue'
 
-import type {
-  FormModelItem,
-  ModelData,
-  ModelRules,
-  DataSettingConfig,
-  IFormModel
-} from '../../types'
+import type { ModelData, DataSettingConfig, IFormModel, AllKeys, FormModelItem } 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, FormModelItem> = Record<string, FormModelItem>
+  Fields extends Record<string, any> = Record<string, any>
 > implements IFormModel<Fields> {
   /** 表单数据 */
   data!: ModelData<Fields>
@@ -30,14 +41,14 @@ export class FormModel<
    * @description
    * 这个值会在表单组件渲染时由表单设置，因为只有真正渲染的组件才应该被校验
    */
-  formKeys: Map<number, (keyof Fields)[]> = new Map()
+  formKeys: Map<number, AllKeys<Fields>[]> = new Map()
 
   /** 初始数据 */
   readonly initialData: ModelData<Fields>
 
-  readonly errors: Map<keyof Fields, string[] | undefined> = shallowReactive(new Map())
+  readonly errors: Map<AllKeys<Fields>, string[] | undefined> = shallowReactive(new Map())
 
-  private validator: Validator<ModelRules<Fields>>
+  private validator: Validator<Record<string, FormModelItem>>
 
   /**
    * 是否在表单值更新时校验
@@ -48,11 +59,12 @@ export class FormModel<
 
   constructor(fields: Fields) {
     this.fields = fields
+    const flatFields = flattenFields(fields)
     const rawData = {} as ModelData<Fields>
     const allKeys: string[] = []
 
-    for (const key in fields) {
-      const fieldItem = fields[key]!
+    for (const key in flatFields) {
+      const fieldItem = flatFields[key]!
       allKeys.push(key)
       const { value } = fieldItem
       let v = value
@@ -72,7 +84,7 @@ export class FormModel<
 
     this.setProxyData(reactive(rawData))
 
-    this.validator = new Validator(this.fields)
+    this.validator = new Validator(flatFields)
 
     return shallowReactive(this)
   }
@@ -93,23 +105,23 @@ export class FormModel<
           this.validateOnFieldChange = true
           return
         }
-        this.validate(fields)
+        this.validate(fields as any)
       }
     })
 
     this.data = data as ModelData<Fields>
   }
 
-  private getValidateFields(fields?: keyof Fields | (keyof Fields)[]) {
+  private getValidateFields(fields?: AllKeys<Fields> | AllKeys<Fields>[]) {
     if (!fields) {
       if (this.formKeys.size) {
-        let _fields: (keyof Fields)[] = []
+        let _fields: AllKeys<Fields>[] = []
         this.formKeys.forEach((fields) => {
           _fields = _fields.concat(fields)
         })
         return _fields
       } else {
-        return this.allKeys
+        return this.allKeys as AllKeys<Fields>[]
       }
     }
 
@@ -124,23 +136,23 @@ export class FormModel<
    * @param fields 需要校验的字段, 不传则校验所有字段
    * @returns
    */
-  async validate(fields?: keyof Fields | (keyof Fields)[]): Promise<boolean> {
+  async validate(fields?: AllKeys<Fields> | AllKeys<Fields>[]): Promise<boolean> {
     const { errors, validator, data } = this
 
-    const results = await validator.validate(data, this.getValidateFields(fields))
+    const results = await validator.validate(data, this.getValidateFields(fields) as any)
 
     // 全量校验
     if (!fields) {
       errors.clear()
 
       for (const field in results) {
-        errors.set(field, results[field])
+        errors.set(field as any, results[field])
       }
     }
     // 局部校验
     else {
       ~(Array.isArray(fields) ? fields : [fields]).forEach((field) => {
-        const errs = results[field]
+        const errs = results[field as string]
         if (errs?.length) {
           errors.set(field, errs)
         } else {
@@ -165,12 +177,12 @@ export class FormModel<
    * 重置数据
    * @param fields 需要重置的字段
    */
-  resetData(keys?: keyof Fields | (keyof Fields)[]): void {
+  resetData(keys?: AllKeys<Fields> | AllKeys<Fields>[]): void {
     if (typeof keys === 'string') {
       keys = [keys]
     } else if (Array.isArray(keys)) {
     } else {
-      keys = this.allKeys
+      keys = this.allKeys as AllKeys<Fields>[]
     }
 
     this.clearValidate()
@@ -229,12 +241,12 @@ export class FormModel<
    * 监听值变更
    * @param cb 回调
    */
-  onChange(cb: (field: keyof Fields, val: any) => void): void {
-    this.modelChangeCallback.add(cb)
+  onChange(cb: (field: AllKeys<Fields>, val: any) => void): void {
+    this.modelChangeCallback.add(cb as any)
   }
 
   /** 关闭监听值变更 */
-  offChange(cb: (field: keyof Fields, val: any) => void): void {
-    this.modelChangeCallback.delete(cb)
+  offChange(cb: (field: AllKeys<Fields>, val: any) => void): void {
+    this.modelChangeCallback.delete(cb as any)
   }
 }

package/src/components/form/form.vue

@@ -42,9 +42,7 @@ import type { DynamicFormModel } from './dynamic-form-model'
 import type { FormModel } from './form-model'
 import { useNodeInterceptor } from './use-node-interceptor'
 
-defineOptions({
-  name: 'Form'
-})
+defineOptions({ name: 'Form' })
 
 const props = defineProps<FormProps<Model>>()
 
@@ -59,13 +57,7 @@ defineSlots<{
 
 const cls = bem('form')
 
-const breakpointCols: BreakCols = {
-  xs: 1,
-  md: 2,
-  lg: 3,
-  xl: 4,
-  default: 4
-}
+const breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }
 
 provideFormContext(props)
 
@@ -89,7 +81,5 @@ function showInitialNode(field: string) {
 
 const gridRef = shallowRef<GridExposed>()
 
-defineExpose<_FormExposed>({
-  el: toRef(() => gridRef.value?.el)
-})
+defineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el) })
 </script>

package/src/components/form/helper.ts

@@ -12,3 +12,12 @@ export function formField<Val = unknown>(item?: FormModelItem<Val>): FormModelIt
 
   return item
 }
+
+export interface NestedFieldMarker<T extends Record<string, any> = Record<string, any>> {
+  __isNested: true
+  fields: T
+}
+
+export function nestField<T extends Record<string, any>>(fields: T): NestedFieldMarker<T> {
+  return { __isNested: true, fields }
+}

package/src/components/form/index.ts

@@ -1,6 +1,7 @@
 export { default as UForm } from './form.vue'
 
-export * from './helper'
+export { formField, nestField } from './helper'
+export type { NestedFieldMarker } from './helper'
 
 export { FormModel } from './form-model'
 export { DynamicFormModel } from './dynamic-form-model'

package/src/components/gantt-chart/gantt-chart.vue

@@ -7,9 +7,7 @@ import { bem } from '@veltra/utils'
 
 import type { GanttChartProps } from '../../types'
 
-defineOptions({
-  name: 'GanttChart'
-})
+defineOptions({ name: 'GanttChart' })
 
 defineProps<GanttChartProps>()
 

package/src/components/grid/grid-item.vue

@@ -11,13 +11,9 @@ import { computed, inject, type CSSProperties, watch } from 'vue'
 import type { GridItemProps } from '../../types'
 import { GridDIKey } from './di'
 
-defineOptions({
-  name: 'GridItem'
-})
+defineOptions({ name: 'GridItem' })
 
-const props = withDefaults(defineProps<GridItemProps>(), {
-  tag: 'div'
-})
+const props = withDefaults(defineProps<GridItemProps>(), { tag: 'div' })
 
 const cls = bem('grid-item')
 
@@ -41,9 +37,7 @@ const span = computed<number | 'full'>(() => {
 })
 
 const style = computed<CSSProperties>(() => {
-  return {
-    gridColumn: span.value === 'full' ? '1 / -1' : `span ${span.value}`
-  }
+  return { gridColumn: span.value === 'full' ? '1 / -1' : `span ${span.value}` }
 })
 
 watch(

package/src/components/grid/grid.vue

@@ -13,13 +13,9 @@ import { getBreakpointCols } from './breakpoint'
 import { GridDIKey } from './di'
 import { useResponsive } from './use-responsive'
 
-defineOptions({
-  name: 'Grid'
-})
+defineOptions({ name: 'Grid' })
 
-const props = withDefaults(defineProps<GridProps>(), {
-  tag: 'div'
-})
+const props = withDefaults(defineProps<GridProps>(), { tag: 'div' })
 
 const emit = defineEmits<GridEmits>()
 
@@ -27,11 +23,7 @@ const cls = bem('grid')
 
 const gridRef = useTemplateRef<HTMLElement>('grid')
 
-const { currentBreakpoint, gridItemsProps } = useResponsive({
-  props,
-  emit,
-  gridRef
-})
+const { currentBreakpoint, gridItemsProps } = useResponsive({ props, emit, gridRef })
 
 const styles = computed(() => {
   const { gap, cols } = props
@@ -77,12 +69,7 @@ watch([styles, gridRef], ([styles, dom]) => {
   setStyles(dom, styles)
 })
 
-provide(GridDIKey, {
-  currentBreakpoint,
-  gridItemsProps
-})
+provide(GridDIKey, { currentBreakpoint, gridItemsProps })
 
-defineExpose<_GridExposed>({
-  el: gridRef
-})
+defineExpose<_GridExposed>({ el: gridRef })
 </script>

package/src/components/grid-input/grid-input.vue

@@ -26,9 +26,7 @@ import { computed, ref, getCurrentInstance } from 'vue'
 
 import type { GridInputProps, GridInputEmits, GridInputExposed } from '../../types'
 
-defineOptions({
-  name: 'GridInput'
-})
+defineOptions({ name: 'GridInput' })
 
 const emit = defineEmits<GridInputEmits>()
 
@@ -38,9 +36,7 @@ const props = withDefaults(defineProps<GridInputProps>(), {
   separator: '-'
 })
 
-const { size } = useFallbackProps([props], {
-  size: 'default'
-})
+const { size } = useFallbackProps([props], { size: 'default' })
 
 const cls = bem('grid-input')
 

package/src/components/group-input/group-input.vue

@@ -51,9 +51,7 @@ import type { GroupInputEmits, GroupInputProps } from '../../types'
 import { UButton } from '../button'
 import { useGroupItems } from './use-group-items'
 
-defineOptions({
-  name: 'GroupInput'
-})
+defineOptions({ name: 'GroupInput' })
 
 const props = withDefaults(defineProps<GroupInputProps<GroupItem>>(), {
   modelValue: () => [],
@@ -73,10 +71,7 @@ const { disabled, size, readonly } = useFormFallbackProps([formProps ?? {}, prop
   readonly: false
 })
 
-const { items, createItem, runByEvent } = useGroupItems({
-  props,
-  emit
-})
+const { items, createItem, runByEvent } = useGroupItems({ props, emit })
 
 const isEmpty = computed(() => {
   return !items.value.length

package/src/components/icon/icon.vue

@@ -10,17 +10,13 @@ import { type CSSProperties, computed } from 'vue'
 
 import type { IconProps } from '../../types'
 
-defineOptions({
-  name: 'Icon'
-})
+defineOptions({ name: 'Icon' })
 
 const props = defineProps<IconProps>()
 
 const cls = bem('icon')
 
 const style = computed<CSSProperties>(() => {
-  return {
-    fontSize: withUnit(props.size, 'px')
-  }
+  return { fontSize: withUnit(props.size, 'px') }
 })
 </script>