@veltra/desktop 1.7.11 → 1.7.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.7.11",
+  "version": "1.7.13",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"
@@ -80,12 +80,12 @@
   "peerDependencies": {
     "@cat-kit/core": ">=1.2.1",
     "@cat-kit/fe": ">=1.2.1",
-    "@veltra/compositions": "^1.7.11",
-    "@veltra/directives": "^1.7.11",
+    "@veltra/compositions": "^1.7.13",
+    "@veltra/directives": "^1.7.13",
     "@veltra/icons": "^1.5.0",
     "@veltra/sheet-core": "^2.5.6",
-    "@veltra/styles": "^1.7.11",
-    "@veltra/utils": "^1.7.11",
+    "@veltra/styles": "^1.7.13",
+    "@veltra/utils": "^1.7.13",
     "vue": ">=3.5.42"
   },
   "peerDependenciesMeta": {

package/src/components/batch-edit/__test__/batch-edit.test.ts

@@ -30,8 +30,6 @@ function mountBatchEdit() {
     apiMethod: undefined as string | undefined
   })
 
-  const fieldChanges: { field: string; args: unknown[] }[] = []
-
   const app = createApp({
     render() {
       return h(
@@ -41,9 +39,6 @@ function mountBatchEdit() {
           'onUpdate:data': (value: any[]) => {
             data.value = value
           },
-          'onField:change': (field: string, ...args: unknown[]) => {
-            fieldChanges.push({ field, args })
-          },
           columns,
           model,
           rowKey: 'id',
@@ -94,7 +89,6 @@ function mountBatchEdit() {
     host,
     data,
     model,
-    fieldChanges,
     unmount() {
       app.unmount()
       host.remove()
@@ -202,136 +196,4 @@ describe('UBatchEdit quick-edit 切换编辑行', () => {
 
     unmount()
   })
-
-  it('切换行回显不触发 field:change', async () => {
-    const { host, fieldChanges, unmount } = mountBatchEdit()
-
-    fieldChanges.length = 0
-    await clickRow(host, 0)
-    await clickRow(host, 1)
-
-    expect(fieldChanges).toHaveLength(0)
-
-    unmount()
-  })
-
-  it('用户变更 Select 触发 field:change', async () => {
-    const { host, fieldChanges, unmount } = mountBatchEdit()
-
-    await clickRow(host, 0)
-    fieldChanges.length = 0
-
-    const input = host.querySelector<HTMLInputElement>('.u-select input')
-    expect(input).toBeTruthy()
-    input!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
-    await nextTick()
-    await nextTick()
-
-    const option = [...document.body.querySelectorAll<HTMLElement>('.u-select__option')].find(
-      (el) => el.textContent === '接口'
-    )
-    expect(option).toBeTruthy()
-    option!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-    await nextTick()
-    await nextTick()
-
-    expect(fieldChanges).toHaveLength(1)
-    expect(fieldChanges[0]).toEqual({ field: 'behavior', args: [{ label: '接口', value: 'api' }] })
-
-    unmount()
-  })
-
-  it('field:change 联动改其他字段不循环触发', async () => {
-    const host = document.createElement('div')
-    document.body.appendChild(host)
-
-    const columns = defineTableColumns([
-      { key: 'label', name: '名称' },
-      { key: 'behavior', name: '行为' }
-    ])
-
-    const data = ref([
-      { id: '1', label: '存草稿', behavior: 'common-resource', submitType: 'DRAFT' },
-      { id: '2', label: '调接口', behavior: 'api', submitType: 'SUBMIT', apiMethod: 'POST' }
-    ])
-
-    const model = reactive({
-      id: '',
-      label: '',
-      behavior: 'event',
-      submitType: undefined as string | undefined,
-      apiMethod: undefined as string | undefined
-    })
-
-    const fieldChanges: string[] = []
-
-    const app = createApp({
-      render() {
-        return h(
-          UBatchEdit,
-          {
-            data: data.value,
-            'onUpdate:data': (value: any[]) => {
-              data.value = value
-            },
-            'onField:change': (field: string) => {
-              fieldChanges.push(field)
-              if (field === 'behavior') {
-                model.submitType = undefined
-              }
-            },
-            columns,
-            model,
-            rowKey: 'id',
-            quickEdit: true
-          },
-          {
-            form: () => [
-              h(UInput, { field: 'label', label: '名称' }),
-              h(USelect, {
-                field: 'behavior',
-                label: '行为',
-                options: [
-                  { label: '事件', value: 'event' },
-                  { label: '通用资源', value: 'common-resource' },
-                  { label: '接口', value: 'api' }
-                ]
-              }),
-              h(USelect, {
-                field: 'submitType',
-                label: '提交类型',
-                options: [
-                  { label: 'DRAFT', value: 'DRAFT' },
-                  { label: 'SUBMIT', value: 'SUBMIT' }
-                ]
-              })
-            ]
-          }
-        )
-      }
-    })
-
-    app.mount(host)
-
-    await clickRow(host, 0)
-    fieldChanges.length = 0
-
-    const input = host.querySelector<HTMLInputElement>('.u-select input')
-    input!.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
-    await nextTick()
-    await nextTick()
-
-    const option = [...document.body.querySelectorAll<HTMLElement>('.u-select__option')].find(
-      (el) => el.textContent === '接口'
-    )
-    option!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-    await nextTick()
-    await nextTick()
-
-    expect(fieldChanges).toEqual(['behavior'])
-    expect(model.submitType).toBeUndefined()
-
-    app.unmount()
-    host.remove()
-  })
 })

package/src/components/batch-edit/batch-edit-form.vue

@@ -29,7 +29,6 @@
           :readonly="props.readonly"
           :label-width="props.labelWidth"
           @field:update="handleFieldUpdate"
-          @field:change="handleFormFieldChange"
         >
           <slot
             v-bind="{
@@ -92,17 +91,8 @@ defineOptions({ name: 'UBatchEditForm' })
 
 const batchEditCtx = inject(BatchEditDIKey)!
 
-const {
-  cls,
-  props,
-  state,
-  emit,
-  handleClose,
-  handleSave,
-  staticFeatures,
-  dynamicFeatures,
-  syncing
-} = batchEditCtx
+const { cls, props, state, handleClose, handleSave, staticFeatures, dynamicFeatures, syncing } =
+  batchEditCtx
 
 const focused = toRef(batchEditCtx, 'focused')
 
@@ -124,10 +114,6 @@ function handleFieldUpdate(field: string, value: any) {
   }
 }
 
-function handleFormFieldChange(field: string, ...args: any[]) {
-  emit('field:change', field, ...args)
-}
-
 const creatable = computed(() => {
   if (state.formActionType !== 'create') return false
   return staticFeatures.value.has('create') || dynamicFeatures.value.create?.(state.row)

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

@@ -1,42 +1,22 @@
 import { describe, expect, it } from 'vitest'
-import { createApp, h, nextTick, reactive, ref } from 'vue'
+import { createApp, defineComponent, h, nextTick, reactive, ref } from 'vue'
 
 import { UInput } from '../../input'
 import { USelect } from '../../select'
 import { UForm } from '../index'
 
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
-
 const behaviorOptions = [
   { label: '事件', value: 'event' },
   { label: '接口', value: 'api' }
 ]
 
-async function openSelect(host: HTMLElement) {
-  const input = host.querySelector('input')!
-  input.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
-  await nextTick()
-  await nextTick()
-}
-
-async function clickSelectOption(label: string) {
-  const option = [...document.body.querySelectorAll<HTMLElement>('.u-select__option')].find(
-    (el) => el.textContent === label
-  )
-  expect(option, `选项「${label}」应存在`).toBeTruthy()
-  option!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-  await nextTick()
-  await sleep(50)
-}
-
 describe('UForm field events', () => {
-  it('field:update and field:change are separate', async () => {
+  it('编程写入触发 field:update，不依赖用户操作', async () => {
     const host = document.createElement('div')
     document.body.appendChild(host)
 
     const model = reactive({ behavior: 'event' })
     const updates: { field: string; value: unknown }[] = []
-    const changes: { field: string; args: unknown[] }[] = []
 
     const app = createApp({
       render() {
@@ -46,9 +26,6 @@ describe('UForm field events', () => {
             model,
             'onField:update': (field: string, value: unknown) => {
               updates.push({ field, value })
-            },
-            'onField:change': (field: string, ...args: unknown[]) => {
-              changes.push({ field, args })
             }
           },
           {
@@ -61,19 +38,11 @@ describe('UForm field events', () => {
 
     app.mount(host)
     updates.length = 0
-    changes.length = 0
 
     model.behavior = 'api'
     await nextTick()
 
     expect(updates.some((item) => item.field === 'behavior' && item.value === 'api')).toBe(true)
-    expect(changes).toHaveLength(0)
-
-    await openSelect(host)
-    await clickSelectOption('事件')
-
-    expect(changes).toHaveLength(1)
-    expect(changes[0]).toEqual({ field: 'behavior', args: [{ label: '事件', value: 'event' }] })
 
     app.unmount()
     host.remove()
@@ -122,3 +91,126 @@ describe('UForm field events', () => {
     host.remove()
   })
 })
+
+/** 用 setup 期间生成的 id 断言实例身份 */
+let probeSeq = 0
+const Probe = defineComponent({
+  name: 'Probe',
+  props: { field: String, label: String, modelValue: String },
+  setup(props) {
+    const id = `p${++probeSeq}`
+    return () =>
+      h('div', { class: 'probe', 'data-field': props.field, 'data-id': id }, [
+        h('span', { class: 'probe-value' }, props.modelValue ?? '')
+      ])
+  }
+})
+
+describe('UForm slot identity', () => {
+  it('中间字段卸载后不复用相邻控件实例', async () => {
+    probeSeq = 0
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const model = reactive({ a: 'A', b: 'B', c: 'C' })
+    const showB = ref(true)
+
+    const app = createApp({
+      render() {
+        return h(
+          UForm,
+          { model },
+          {
+            default: () => [
+              h(Probe, { field: 'a', label: 'A' }),
+              showB.value ? h(Probe, { field: 'b', label: 'B' }) : null,
+              h(Probe, { field: 'c', label: 'C' })
+            ]
+          }
+        )
+      }
+    })
+
+    app.mount(host)
+
+    const idOf = (field: string) =>
+      host.querySelector(`[data-field="${field}"]`)?.getAttribute('data-id')
+
+    const cId = idOf('c')
+    expect(cId).toBe('p3')
+
+    showB.value = false
+    await nextTick()
+
+    expect(host.querySelector('[data-field="b"]')).toBeNull()
+    expect(idOf('c')).toBe(cId)
+    expect(host.querySelector('[data-field="c"] .probe-value')!.textContent).toBe('C')
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('重复 field 各自保有独立实例', async () => {
+    probeSeq = 0
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const model = reactive({ name: '同名' })
+
+    const app = createApp({
+      render() {
+        return h(
+          UForm,
+          { model },
+          {
+            default: () => [
+              h(Probe, { field: 'name', label: '左' }),
+              h(Probe, { field: 'name', label: '右' })
+            ]
+          }
+        )
+      }
+    })
+
+    app.mount(host)
+
+    const probes = [...host.querySelectorAll('.probe')]
+    expect(probes).toHaveLength(2)
+    expect(probes[0]!.getAttribute('data-id')).toBe('p1')
+    expect(probes[1]!.getAttribute('data-id')).toBe('p2')
+    expect(probes[0]!.querySelector('.probe-value')!.textContent).toBe('同名')
+    expect(probes[1]!.querySelector('.probe-value')!.textContent).toBe('同名')
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('showModified 变更前副本不抢走编辑控件', async () => {
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const model = reactive({ name: '新值' })
+    const initialModel = { name: '旧值' }
+
+    const app = createApp({
+      render() {
+        return h(
+          UForm,
+          { model, initialModel, showModified: true },
+          { default: () => h(UInput, { field: 'name', label: '名称' }) }
+        )
+      }
+    })
+
+    app.mount(host)
+    await nextTick()
+
+    const live = host.querySelector('input') as HTMLInputElement | null
+    expect(live).toBeTruthy()
+    expect(live!.value).toBe('新值')
+    expect(host.querySelector('.u-form__data-before')?.textContent).toContain('旧值')
+
+    app.unmount()
+    host.remove()
+  })
+})

package/src/components/form/form.vue

@@ -8,8 +8,8 @@
     :class="[cls.b, bem.is('readonly', readonly)]"
   >
     <template
-      v-for="{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()"
-      :key="node.key"
+      v-for="{ node, isFormItem, formItemProps, field, modelValue, renderKey } of getSlotsNodes()"
+      :key="renderKey"
     >
       <u-form-item v-if="!isFormItem && field" v-bind="formItemProps">
         <component
@@ -19,7 +19,7 @@
         />
         <div v-if="shouldShowModified(field)" :class="cls.e('data-before')">
           <span :class="cls.e('changed-tag')">{{ modifiedLabel }}</span>
-          <component :is="node" readonly :model-value="getBaselineFieldValue(field)" />
+          <component :is="createModifiedPreview(node, field)" />
         </div>
       </u-form-item>
 
@@ -32,14 +32,14 @@
 import { o } from '@cat-kit/core'
 import { bem } from '@veltra/utils'
 import { provideFormContext } from '@veltra/utils'
-import { nextTick, toRef, useTemplateRef } from 'vue'
+import { nextTick, toRef, useTemplateRef, type VNode } from 'vue'
 
 import type { BreakCols, FormProps, _FormExposed, FormEmits } from '../../types'
 import { UFormItem } from '../form-item'
 import { UGrid } from '../grid'
 import { isFieldModified } from './is-field-modified'
 import { useFormFields } from './use-form-fields'
-import { useNodeInterceptor } from './use-node-interceptor'
+import { forkUnmountedVNode, useNodeInterceptor } from './use-node-interceptor'
 
 defineOptions({ name: 'UForm' })
 
@@ -81,18 +81,13 @@ function handleFieldUpdate(field: string, value: any) {
   emit('field:update', field, value)
 }
 
-function handleFieldChange(field: string, ...args: any[]) {
-  emit('field:change', field, ...args)
-}
-
 provideFormContext({
   formProps: props,
   registerField,
   unregisterField,
   validateFields: validate,
   shouldValidate,
-  handleFieldUpdate,
-  handleFieldChange
+  handleFieldUpdate
 })
 
 const { getSlotsNodes } = useNodeInterceptor()
@@ -106,6 +101,10 @@ function getBaselineFieldValue(field: string) {
   return o(getBaselineModel() ?? {}).get(field)
 }
 
+function createModifiedPreview(node: VNode, field: string) {
+  return forkUnmountedVNode(node, { readonly: true, modelValue: getBaselineFieldValue(field) })
+}
+
 function shouldShowModified(field: string) {
   if (!props.showModified) return false
   const baseline = getBaselineModel()

package/src/components/form/use-node-interceptor.ts

@@ -1,6 +1,6 @@
 import { o } from '@cat-kit/core'
 import { extractNormalVNodes } from '@veltra/utils'
-import { useSlots, type VNode } from 'vue'
+import { cloneVNode, useSlots, type VNode } from 'vue'
 
 export type SlotRenderItem = {
   isFormItem: boolean
@@ -8,6 +8,28 @@ export type SlotRenderItem = {
   node: VNode
   field?: string
   modelValue?: any
+  /** v-for 身份：调用方 :key 优先，否则 type+field+出现次序 */
+  renderKey: string | number | symbol
+}
+
+function getVNodeTypeName(node: VNode): string {
+  const type = node.type as { name?: string; __name?: string } | string
+  if (typeof type === 'string') return type
+  if (typeof type === 'object' && type) return type.name || type.__name || ''
+  return ''
+}
+
+/**
+ * 从源 vnode 派生一份未挂载副本。
+ * Vue 的 cloneVNode 会拷贝 el/component，同一源 vnode 渲两次会把实例从编辑控件抢走。
+ */
+export function forkUnmountedVNode(node: VNode, extra?: Record<string, unknown>): VNode {
+  const forked = extra ? cloneVNode(node, extra) : cloneVNode(node)
+  forked.el = null
+  forked.component = null
+  forked.anchor = null
+  forked.suspense = null
+  return forked
 }
 
 /**
@@ -24,6 +46,7 @@ export function useNodeInterceptor(): { getSlotsNodes: () => SlotRenderItem[] |
     const flattedNodes = extractNormalVNodes(nodes)
 
     const results: SlotRenderItem[] = []
+    const seen = new Map<string, number>()
 
     let i = 0
     while (i < flattedNodes.length) {
@@ -43,12 +66,23 @@ export function useNodeInterceptor(): { getSlotsNodes: () => SlotRenderItem[] |
         'field'
       ]) as Record<string, any>
 
+      let renderKey: string | number | symbol
+      if (node.key != null) {
+        renderKey = node.key
+      } else {
+        const base = `${getVNodeTypeName(node)}:${field ?? ''}`
+        const n = seen.get(base) ?? 0
+        seen.set(base, n + 1)
+        renderKey = n === 0 ? `uform:${base}` : `uform:${base}#${n}`
+      }
+
       results.push({
         isFormItem,
         formItemProps,
         node,
         field,
-        modelValue: props?.['model-value'] ?? props?.modelValue
+        modelValue: props?.['model-value'] ?? props?.modelValue,
+        renderKey
       })
     }
 

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

@@ -37,18 +37,12 @@ describe('UFormItem change', () => {
 
     const model = reactive({ behavior: 'event' })
     const itemChanges: unknown[][] = []
-    const formChanges: { field: string; args: unknown[] }[] = []
 
     const app = createApp({
       render() {
         return h(
           UForm,
-          {
-            model,
-            'onField:change': (field: string, ...args: unknown[]) => {
-              formChanges.push({ field, args })
-            }
-          },
+          { model },
           {
             default: () =>
               h(
@@ -82,9 +76,6 @@ describe('UFormItem change', () => {
     expect(itemChanges).toHaveLength(1)
     expect(itemChanges[0]![0]).toEqual({ label: '接口', value: 'api' })
 
-    expect(formChanges).toHaveLength(1)
-    expect(formChanges[0]).toEqual({ field: 'behavior', args: [{ label: '接口', value: 'api' }] })
-
     app.unmount()
     host.remove()
   })

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

@@ -69,14 +69,8 @@ defineSlots<{
 }>()
 
 /** 表单组件上下文 */
-const {
-  formProps,
-  registerField,
-  unregisterField,
-  shouldValidate,
-  handleFieldUpdate,
-  handleFieldChange
-} = injectFormContext()
+const { formProps, registerField, unregisterField, shouldValidate, handleFieldUpdate } =
+  injectFormContext()
 
 function wrapControlChange(node: VNode) {
   if (!node || typeof node.type === 'symbol') return node
@@ -84,7 +78,6 @@ function wrapControlChange(node: VNode) {
   return cloneVNode(node, {
     onChange: (...args: any[]) => {
       emit('change', ...args)
-      if (props.field) handleFieldChange?.(props.field, ...args)
     }
   })
 }

package/src/components/table/__test__/column-style.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest'
+
+import { ColumnNode } from '../node/col'
+
+describe('ColumnNode column styles', () => {
+  it('headerAlign 未指定时回退到 align', () => {
+    const column = new ColumnNode({ key: 'a', name: 'A', align: 'center' }, 0, 0)
+
+    expect(column.headerAlign).toBe('center')
+  })
+
+  it('headerAlign 显式指定时优先于 align', () => {
+    const column = new ColumnNode(
+      { key: 'a', name: 'A', align: 'center', headerAlign: 'right' },
+      0,
+      0
+    )
+
+    expect(column.headerAlign).toBe('right')
+  })
+
+  it('headerCellStyle 未指定 headerStyle 时回退到 style', () => {
+    const column = new ColumnNode(
+      { key: 'a', name: 'A', style: { color: 'red', fontSize: 14 } },
+      0,
+      0
+    )
+
+    expect(column.cellStyle).toEqual({ color: 'red', fontSize: '14px' })
+    expect(column.headerCellStyle).toEqual({ color: 'red', fontSize: '14px' })
+  })
+
+  it('headerCellStyle 显式指定 headerStyle 时优先于 style', () => {
+    const column = new ColumnNode(
+      {
+        key: 'a',
+        name: 'A',
+        style: { color: 'red', fontSize: 12 },
+        headerStyle: { color: 'blue', fontSize: 16 }
+      },
+      0,
+      0
+    )
+
+    expect(column.cellStyle).toEqual({ color: 'red', fontSize: '12px' })
+    expect(column.headerCellStyle).toEqual({ color: 'blue', fontSize: '16px' })
+  })
+
+  it('fontSize 数字转为 px，字符串原样保留', () => {
+    const column = new ColumnNode({ key: 'a', name: 'A', style: { fontSize: 18 } }, 0, 0)
+    const columnWithUnit = new ColumnNode(
+      { key: 'b', name: 'B', style: { fontSize: '1.2rem' } },
+      0,
+      0
+    )
+
+    expect(column.cellStyle).toEqual({ fontSize: '18px' })
+    expect(columnWithUnit.cellStyle).toEqual({ fontSize: '1.2rem' })
+  })
+
+  it('未配置样式时 getter 返回 undefined', () => {
+    const column = new ColumnNode({ key: 'a', name: 'A' }, 0, 0)
+
+    expect(column.cellStyle).toBeUndefined()
+    expect(column.headerCellStyle).toBeUndefined()
+  })
+})