@veltra/desktop 1.1.35 → 1.2.0

package/dist/types/select.d.ts

@@ -1,9 +1,10 @@
+import { FormFieldComponentProps } from "./form-field.js";
 import { CSSProperties, ShallowRef } from "vue";
-import { DeconstructValue, FormComponentProps } from "@veltra/utils";
+import { DeconstructValue } from "@veltra/utils";
 
 //#region src/types/select.d.ts
 /** 选择器组件属性 */
-interface SelectProps extends FormComponentProps {
+interface SelectProps extends FormFieldComponentProps {
   /** 绑定值 */
   modelValue?: any;
   /** 文本内容 */

package/dist/types/slider.d.ts

@@ -1,8 +1,9 @@
-import { DeconstructValue, FormComponentProps } from "@veltra/utils";
+import { FormFieldComponentProps } from "./form-field.js";
+import { DeconstructValue } from "@veltra/utils";
 
 //#region src/types/slider.d.ts
 /** 滑块组件属性 */
-interface SliderProps<T extends number | [number, number]> extends FormComponentProps {
+interface SliderProps<T extends number | [number, number]> extends FormFieldComponentProps {
   modelValue?: T;
   /**
    * 最小值

package/dist/types/switch.d.ts

@@ -1,8 +1,9 @@
-import { DeconstructValue, FormComponentProps } from "@veltra/utils";
+import { FormFieldComponentProps } from "./form-field.js";
+import { DeconstructValue } from "@veltra/utils";
 
 //#region src/types/switch.d.ts
 /** 开关组件属性 */
-interface SwitchProps extends FormComponentProps {
+interface SwitchProps extends FormFieldComponentProps {
   /** 开关状态 */
   modelValue?: boolean;
   /** 打开时显示的文字 */

package/dist/types/text-editor.d.ts

@@ -1,4 +1,5 @@
-import { DeconstructValue, FormComponentProps } from "@veltra/utils";
+import { FormFieldComponentProps } from "./form-field.js";
+import { DeconstructValue } from "@veltra/utils";
 
 //#region src/types/text-editor.d.ts
 /** text-editor组件属性 */
@@ -6,7 +7,7 @@ interface BarType {
   content: string;
   bar: string;
 }
-interface TextEditorProps extends FormComponentProps {
+interface TextEditorProps extends FormFieldComponentProps {
   modelValue?: string;
   placeholder?: string;
   toolbar?: BarType[];

package/dist/types/textarea.d.ts

@@ -1,8 +1,9 @@
-import { DeconstructValue, FormComponentProps } from "@veltra/utils";
+import { FormFieldComponentProps } from "./form-field.js";
+import { DeconstructValue } from "@veltra/utils";
 
 //#region src/types/textarea.d.ts
 /** textarea组件属性 */
-interface TextareaProps extends FormComponentProps {
+interface TextareaProps extends FormFieldComponentProps {
   /**
    * 文本域的值
    */

package/dist/types/tree-select.d.ts

@@ -1,10 +1,11 @@
+import { FormFieldComponentProps } from "./form-field.js";
 import { TreeProps } from "./tree.js";
 import { CSSProperties } from "vue";
-import { DeconstructValue, FormComponentProps } from "@veltra/utils";
+import { DeconstructValue } from "@veltra/utils";
 
 //#region src/types/tree-select.d.ts
 /** 树形选择器组件属性 */
-interface TreeSelectProps extends FormComponentProps, Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
+interface TreeSelectProps extends FormFieldComponentProps, Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
   modelValue?: string | number;
   /** 自定义占位文字 */
   placeholder?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.1.35",
+  "version": "1.2.0",
   "files": [
     "dist",
     "src"
@@ -68,11 +68,11 @@
     "@cat-kit/core": ">=1.1.6",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.6",
-    "@veltra/compositions": "1.1.35",
-    "@veltra/directives": "1.1.35",
-    "@veltra/icons": "1.1.35",
-    "@veltra/styles": "1.1.35",
-    "@veltra/utils": "1.1.35",
+    "@veltra/compositions": "1.2.0",
+    "@veltra/directives": "1.2.0",
+    "@veltra/icons": "1.2.0",
+    "@veltra/styles": "1.2.0",
+    "@veltra/utils": "1.2.0",
     "vue": ">=3.5.0"
   }
 }

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

@@ -26,23 +26,20 @@
     <u-scroll always :class="cls.e('form-body')" :key="bodyKey">
       <transition name="fade" appear mode="out-in">
         <u-form
+          ref="formComponentRef"
           :model="props.model"
           :readonly="props.readonly"
           @keydown="handleFormKeydown"
           :label-width="props.labelWidth"
         >
-          <template #default="{ data, model }">
-            <slot
-              v-bind="{
-                data,
-                model,
-                row: state.row,
-                depth: state.depth,
-                indexes: insertIndexes,
-                index: state.row?.index
-              }"
-            />
-          </template>
+          <slot
+            v-bind="{
+              row: state.row,
+              depth: state.depth,
+              indexes: insertIndexes,
+              index: state.row?.index
+            }"
+          />
         </u-form>
       </transition>
     </u-scroll>
@@ -75,8 +72,9 @@
 <script lang="ts" setup>
 import { AddChild, Close, EditPen, Plus, View } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, type Component } from 'vue'
+import { computed, inject, shallowRef, toRef, type Component } from 'vue'
 
+import type { _FormExposed, FormExposed } from '../../types/form'
 import { UButton } from '../button'
 import { UForm } from '../form'
 import { UIcon } from '../icon'
@@ -97,6 +95,15 @@ const {
   dynamicFeatures
 } = inject(BatchEditDIKey)!
 
+const formComponentRef = shallowRef<FormExposed>()
+
+defineExpose<_FormExposed>({
+  el: toRef(() => formComponentRef.value?.el),
+  validate: () => formComponentRef.value?.validate() ?? Promise.resolve(true),
+  clearValidate: () => formComponentRef.value?.clearValidate(),
+  reset: () => formComponentRef.value?.reset()
+})
+
 const creatable = computed(() => {
   return (
     state.type === 'create' &&

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

@@ -12,14 +12,14 @@
     <BatchEditList :slots="slots" />
 
     <!-- 编辑表单 -->
-    <BatchEditForm v-slot="scoped">
+    <BatchEditForm ref="formRef" v-slot="scoped">
       <!-- @vue-ignore -->
       <slot name="form" v-bind="scoped" />
     </BatchEditForm>
   </u-layout>
 </template>
 
-<script lang="ts" setup generic="Model extends IFormModel">
+<script lang="ts" setup>
 import { bem } from '@veltra/utils'
 import { computed, inject, provide, shallowRef, watch } from 'vue'
 
@@ -27,11 +27,11 @@ import type {
   BatchEditEmits,
   BatchEditFeature,
   BatchEditProps,
-  IFormModel,
   TableColumnSlotsScope,
   TableExposed,
   TableRow
 } from '../../types'
+import type { FormExposed } from '../../types/form'
 import { DialogDIKey } from '../dialog/di'
 import { ULayout } from '../layout'
 import BatchEditForm from './batch-edit-form.vue'
@@ -41,7 +41,7 @@ import { useEdit } from './use-edit'
 
 defineOptions({ name: 'BatchEdit' })
 
-const props = withDefaults(defineProps<BatchEditProps<Model>>(), {
+const props = withDefaults(defineProps<BatchEditProps>(), {
   cols: () => ['1fr', '420px'],
   mode: 'normal'
 })
@@ -99,9 +99,7 @@ const slots = defineSlots<
   {
     form?: (props: {
       /** 表单数据 */
-      data: Model['data']
-      /** 表单模型 */
-      model: Model
+      data: Record<string, any> | undefined
       /** 当前编辑的层级 */
       depth?: number
       /** 当前编辑的行 */
@@ -119,8 +117,9 @@ const slots = defineSlots<
 const cls = bem('batch-edit')
 
 const tableRef = shallowRef<TableExposed>()
+const formRef = shallowRef<FormExposed>()
 
-const editCtx = useEdit({ props, emit, tableRef })
+const editCtx = useEdit({ props, emit, tableRef, formRef })
 
 const { state, handleClose, handleSave, handleDelete, handleCreate } = editCtx
 

package/src/components/batch-edit/di.ts

@@ -5,7 +5,6 @@ import type {
   BatchEditEmits,
   BatchEditFeature,
   BatchEditProps,
-  IFormModel,
   TableExposed,
   TableRow
 } from '../../types'
@@ -13,7 +12,7 @@ import type { EditReturned } from './use-edit'
 export const BatchEditDIKey: InjectionKey<
   {
     cls: BEM<'batch-edit', 'u-'>
-    props: BatchEditProps<IFormModel>
+    props: BatchEditProps
     emit: BatchEditEmits
     tableRef: ShallowRef<TableExposed | undefined>
     staticFeatures: ComputedRef<Set<BatchEditFeature>>

package/src/components/batch-edit/use-edit.ts

@@ -2,6 +2,7 @@ import { last, o, safeRun } from '@cat-kit/core'
 import { computed, nextTick, shallowReactive, shallowRef, watch, type ShallowRef } from 'vue'
 
 import type { TableRow, BatchEditEmits, BatchEditProps, TableExposed } from '../../types'
+import type { FormExposed } from '../../types/form'
 
 /** 按索引路径在原始数据树中定位节点（等价于历史 Forest.visit 路径访问） */
 function visitDataByIndexPath<T extends Record<string, unknown>>(
@@ -29,6 +30,7 @@ interface Options {
   props: BatchEditProps
   emit: BatchEditEmits
   tableRef: ShallowRef<TableExposed | undefined>
+  formRef: ShallowRef<FormExposed | undefined>
 }
 
 export interface BatchEditStates {
@@ -58,8 +60,19 @@ export interface EditReturned {
   handleInsertChild: (row: TableRow) => void
 }
 
+function snapshotData(data?: Record<string, any>) {
+  return safeRun(() => JSON.parse(JSON.stringify(data ?? {})), {})
+}
+
+function replaceModelData(model: Record<string, any>, data: Record<string, any>) {
+  for (const key of Object.keys(model)) {
+    delete model[key]
+  }
+  Object.assign(model, data)
+}
+
 export function useEdit(options: Options): EditReturned {
-  const { props, emit, tableRef } = options
+  const { props, emit, tableRef, formRef } = options
 
   /** 组件状态 */
   const state = shallowReactive<BatchEditStates>({
@@ -88,19 +101,39 @@ export function useEdit(options: Options): EditReturned {
    * 阶段把规范化后的值再写回模型时被误判为「用户已修改」
    */
   let baselineSnapshot: Record<string, any> | undefined
+  let emptySnapshot: Record<string, any> | undefined
 
   function snapshotModelData() {
-    return safeRun(() => JSON.parse(JSON.stringify(props.model?.data ?? {})), {})
+    return snapshotData(props.model)
+  }
+
+  function resetFormData(data?: Record<string, any>) {
+    if (!props.model) return
+    replaceModelData(props.model, snapshotData(data ?? emptySnapshot))
+    formRef.value?.clearValidate()
+  }
+
+  function setFormData(formData: Record<string, any>) {
+    if (!props.model) return
+    replaceModelData(props.model, snapshotData(formData))
   }
 
+  watch(
+    () => props.model,
+    (model) => {
+      emptySnapshot = snapshotData(model)
+    },
+    { immediate: true }
+  )
+
   watch(
     () => state.row,
     (row) => {
-      props.model?.resetData()
+      resetFormData()
       if (row) {
         state.type = 'update'
         state.visible = true
-        props.model?.setData(row.data)
+        setFormData(row.data)
       } else {
         state.visible = false
       }
@@ -111,16 +144,14 @@ export function useEdit(options: Options): EditReturned {
     { flush: 'sync' }
   )
 
-  const changeCb = (field: string, val: any) => {
-    // 与基线比较 — 同值（如组件 mount 时把当前值再写一次）不算"用户修改"
-    if (baselineSnapshot) {
-      const baseVal = o(baselineSnapshot).get(field)
-      if (isSameValue(baseVal, val)) {
-        return
-      }
-    }
-    state.dataUpdated = true
-  }
+  watch(
+    () => props.model,
+    () => {
+      if (!baselineSnapshot || !state.visible) return
+      state.dataUpdated = !isSameValue(baselineSnapshot, snapshotModelData())
+    },
+    { deep: true }
+  )
 
   function isSameValue(a: any, b: any) {
     if (a === b) return true
@@ -136,19 +167,6 @@ export function useEdit(options: Options): EditReturned {
     return false
   }
 
-  watch(
-    () => props.model,
-    (model, oldModel) => {
-      if (oldModel) {
-        oldModel.offChange(changeCb)
-      }
-      if (model) {
-        model.onChange(changeCb)
-      }
-    },
-    { immediate: true }
-  )
-
   const childrenKey = computed(() => {
     return typeof props.tree === 'string' ? props.tree : 'children'
   })
@@ -183,7 +201,7 @@ export function useEdit(options: Options): EditReturned {
   }
 
   function getInsertData(): Record<string, any> {
-    return safeRun(() => JSON.parse(JSON.stringify(props.model?.data ?? {})), {})
+    return snapshotModelData()
   }
 
   async function runCreate(cb: () => void) {
@@ -193,7 +211,7 @@ export function useEdit(options: Options): EditReturned {
     }
     state.row = undefined
     state.type = 'create'
-    props.model?.resetData()
+    resetFormData()
     cb()
 
     let item: Record<string, any> | undefined = undefined
@@ -201,6 +219,8 @@ export function useEdit(options: Options): EditReturned {
     await nextTick()
 
     state.visible = true
+    baselineSnapshot = snapshotModelData()
+    state.dataUpdated = false
 
     if (item) {
       const row = tableRef.value?.getRowByData(item)
@@ -256,8 +276,9 @@ export function useEdit(options: Options): EditReturned {
     runCreate(() => {
       state.depth = row.depth
       insertIndexes.value = [...row.indexes.slice(0, -1), row.index + 1]
-      const cloned = safeRun(() => JSON.parse(JSON.stringify(row.data ?? {})), {})
-      props.model?.setData(cloned)
+      setFormData(row.data)
+      baselineSnapshot = snapshotModelData()
+      state.dataUpdated = false
     })
   }
 
@@ -285,8 +306,8 @@ export function useEdit(options: Options): EditReturned {
 
     if (!model) return
 
-    model.clearValidate()
-    const valid = await model.validate()
+    formRef.value?.clearValidate()
+    const valid = await formRef.value?.validate()
 
     if (!valid) return
 
@@ -304,13 +325,14 @@ export function useEdit(options: Options): EditReturned {
     if (state.type === 'create') {
       insert(item)
 
-      return model?.resetData()
+      resetFormData()
+      return
     }
     // 更新
     if (state.type === 'update') {
       const { row } = state
       row &&
-        model.allKeys.forEach((key) => {
+        Object.keys(item).forEach((key) => {
           o(row.data).set(key, o(item).get(key))
         })
     }
@@ -354,7 +376,7 @@ export function useEdit(options: Options): EditReturned {
     state.row = undefined
     state.parentRow = undefined
     state.depth = undefined
-    props.model?.resetData()
+    resetFormData()
     insertIndexes.value = []
   }
 

package/src/components/date-range-picker/date-range-picker.vue

@@ -127,6 +127,8 @@ watch(
     if (isUserActive()) return
     if (val?.length === 2) {
       currentRangeDate.value = [date(val[0]), date(val[1])]
+    } else {
+      currentRangeDate.value = undefined
     }
   },
   { immediate: true }

package/src/components/dialog/use-maximum.ts

@@ -24,11 +24,15 @@ export function useMaximum(options: Options): Returned {
 
   const maximized = shallowRef(false)
 
+  let needRmoveHeight = false
+
   const maximizeTransition = useTransition('css', {
     target: dialogRef,
     name: 'dialog-maximize',
     keepEnterTo: true,
     afterLeave() {
+      if (!maximized.value || !needRmoveHeight) return
+      needRmoveHeight = false
       dialogRef.value && removeStyles(dialogRef.value, ['height'])
     }
   })
@@ -40,7 +44,10 @@ export function useMaximum(options: Options): Returned {
     if (!dom) return
     if (maxim) {
       // 先设置一个高度才会有过渡动画
-      setStyles(dom, { height: `${dom.offsetHeight}px` })
+      if (!dom.style.height) {
+        needRmoveHeight = true
+        setStyles(dom, { height: `${dom.offsetHeight}px` })
+      }
       maximizeTransition.enter()
     } else {
       maximizeTransition.leave()

package/src/components/form/form.vue

@@ -10,26 +10,20 @@
       v-for="{ node, isFormItem, formItemProps, field, modelValue } of getSlotsNodes()"
       :key="node.key"
     >
-      <component v-if="isFormItem || !field" :is="node" />
-
-      <u-form-item v-else v-bind="formItemProps">
+      <u-form-item v-if="!isFormItem && field" v-bind="formItemProps">
         <component
           :is="node"
-          :model-value="modelValue ?? o(model?.data ?? {}).get(field)"
+          :model-value="modelValue ?? o(model ?? {}).get(field)"
           @update:model-value="handleUpdateValue(field, $event)"
         />
-
-        <div :class="cls.e('data-before')" v-if="showInitialNode(field)">
-          <i :class="cls.e('changed-tag')">变更前：</i>
-
-          <component :is="node" readonly :model-value="o(model?.initialData ?? {}).get(field)" />
-        </div>
       </u-form-item>
+
+      <component v-else :is="node" />
     </template>
   </u-grid>
 </template>
 
-<script lang="tsx" setup generic="Model extends FormModel | DynamicFormModel">
+<script lang="tsx" setup>
 import { o } from '@cat-kit/core'
 import { bem } from '@veltra/utils'
 import { provideFormContext } from '@veltra/utils'
@@ -38,48 +32,38 @@ import { shallowRef, toRef } from 'vue'
 import type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'
 import { UFormItem } from '../form-item'
 import { UGrid } from '../grid'
-import type { DynamicFormModel } from './dynamic-form-model'
-import type { FormModel } from './form-model'
+import { useFormFields } from './use-form-fields'
 import { useNodeInterceptor } from './use-node-interceptor'
 
 defineOptions({ name: 'Form' })
 
-const props = defineProps<FormProps<Model>>()
+const props = defineProps<FormProps>()
 
-defineSlots<{
-  default(props: {
-    /** 表单数据 */
-    data: Model['data']
-    /** 表单模型 */
-    model: Model
-  }): any
-}>()
+defineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()
 
 const cls = bem('form')
 
 const breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }
 
-provideFormContext(props)
+const { validate, clearValidate, reset, registerField, unregisterField, shouldValidate } =
+  useFormFields({ props })
 
-const { getSlotsNodes } = useNodeInterceptor({ props })
+provideFormContext({
+  formProps: props,
+  registerField,
+  unregisterField,
+  validateFields: validate,
+  shouldValidate
+})
 
-function handleUpdateValue(field: string, value: any) {
-  const { model } = props
-  if (!model) return
-  o(model.data).set(field, value)
-}
-
-function showInitialNode(field: string) {
-  const { data, initialData } = props.model || {}
+const { getSlotsNodes } = useNodeInterceptor()
 
-  const currentValue = o(data ?? {}).get(field)
-  const initialValue = o(initialData ?? {}).get(field)
-  const notEqual = !(initialValue === currentValue || (!initialValue && !currentValue))
-
-  return props.showInitialData && notEqual
+function handleUpdateValue(field: string, value: any) {
+  if (!props.model) return
+  o(props.model).set(field, value)
 }
 
 const gridRef = shallowRef<GridExposed>()
 
-defineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el) })
+defineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })
 </script>

package/src/components/form/index.ts

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