@veltra/desktop 1.1.35 → 1.2.0

package/src/components/select/select.vue

@@ -209,14 +209,16 @@ watch(
 
     if (!options?.length) return
 
-    if (modelValue !== undefined) {
-      const { valueKey } = props
-      currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)
+    const { valueKey, labelKey } = props
 
-      selected.value = options[currentIndex.value]
+    if (modelValue !== undefined && modelValue !== null && modelValue !== '') {
+      currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)
+      selected.value = currentIndex.value >= 0 ? options[currentIndex.value] : undefined
+      label.value = selected.value ? o(selected.value).get(labelKey) : undefined
     } else {
       currentIndex.value = -1
       selected.value = undefined
+      label.value = undefined
     }
   },
   { immediate: true }

package/src/components/slider/slider.vue

@@ -113,10 +113,20 @@ const ticks = computed(() => {
 watch(
   [offset1, offset2],
   userAction((v) => {
+    if (sliderSize.value === 0) return
+
     if (props.range) {
-      emit('update:modelValue', v.map(sliderOffset2Value).toSorted() as T)
+      const next = v.map(sliderOffset2Value).toSorted((a, b) => a - b) as [number, number]
+      const current = props.modelValue as [number, number] | undefined
+      if (current) {
+        const [a, b] = [...current].sort((x, y) => x - y)
+        if (next[0] === a && next[1] === b) return
+      }
+      emit('update:modelValue', next as T)
     } else {
-      emit('update:modelValue', sliderOffset2Value(v[0]) as T)
+      const next = sliderOffset2Value(v[0])
+      if (next === props.modelValue) return
+      emit('update:modelValue', next as T)
     }
   })
 )

package/src/components/table/style.scss

@@ -124,12 +124,10 @@ $root-name: table;
     z-index: 1;
     user-select: none;
 
-    &:hover {
-      @include m.bem($root-name, cell) {
-        box-shadow:
-          -1px 0px var(--u-table-border-color) inset,
-          0px -1px var(--u-table-border-color) inset;
-      }
+    @include m.bem($root-name, cell) {
+      background-color: var(--u-table-header-bg);
+      font-weight: 500;
+      color: var(--u-table-header-color);
     }
 
     @include m.is(multistage) {
@@ -142,14 +140,6 @@ $root-name: table;
     }
   }
 
-  @include m.e(head) {
-    @include m.bem($root-name, cell) {
-      background-color: var(--u-table-header-bg);
-      font-weight: normal;
-      color: var(--u-table-header-color);
-    }
-  }
-
   @include m.e(resize-handle) {
     position: absolute;
     width: 4px;

package/src/types/auto-complete.ts

@@ -1,7 +1,9 @@
-import type { FormComponentProps, DeconstructValue } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** 自动补全组件组件属性 */
-export interface AutoCompleteProps extends FormComponentProps {
+export interface AutoCompleteProps extends FormFieldComponentProps {
   modelValue?: string
   /** 占位符 */
   placeholder?: string

package/src/types/batch-edit.ts

@@ -1,7 +1,6 @@
 import type { DeconstructValue } from '@veltra/utils'
 
 import type { ActionProps } from './action'
-import type { IFormModel } from './form'
 import type { TableColumn, TableEmits, TableProps, TableRow } from './table'
 
 /** 批量编辑列 */
@@ -20,12 +19,12 @@ export interface BatchEditColumn extends TableColumn {
 export type BatchEditFeature = 'create' | 'update' | 'copy' | 'delete' | 'view' | 'createChild'
 
 /** 批量编辑组件属性 */
-export interface BatchEditProps<Model extends IFormModel = IFormModel> extends TableProps {
+export interface BatchEditProps extends TableProps {
   /**
-   * 表单模型
-   * @description 该模型优先级要大于列配置
+   * 表单数据
+   * @description 与右侧 UForm 绑定的 reactive 对象
    */
-  model?: Model
+  model?: Record<string, any>
   /** 表格标题 */
   title?: string
   /**

package/src/types/cascade.ts

@@ -1,5 +1,7 @@
 import type { TreeNode } from '@cat-kit/core'
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 export interface CascadeNode<
   Data extends Record<string, any> = Record<string, any>
@@ -10,7 +12,7 @@ export interface CascadeNode<
 }
 
 /** 级联选择器组件属性 */
-export interface CascadeProps extends FormComponentProps {
+export interface CascadeProps extends FormFieldComponentProps {
   /**
    * 分隔符
    * @default '/'

package/src/types/checkbox-group.ts

@@ -1,7 +1,7 @@
-import type { FormComponentProps } from '@veltra/utils'
+import type { FormFieldComponentProps } from './form-field'
 
 /** 复选框组, 用来选择一组数据组件属性 */
-export interface CheckboxGroupProps extends FormComponentProps {
+export interface CheckboxGroupProps extends FormFieldComponentProps {
   /** 值 */
   modelValue?: Array<any>
   /** 复选框项 */

package/src/types/checkbox.ts

@@ -1,14 +1,16 @@
-import type { ColorType, FormComponentProps } from '@veltra/utils'
+import type { ColorType } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** 复选框组件属性 */
-export interface CheckboxProps extends FormComponentProps {
+export interface CheckboxProps extends FormFieldComponentProps {
   /** 部分选中 */
   indeterminate?: boolean
   /** 是否选中  */
   modelValue?: boolean
 }
 
-export interface CheckboxButtonProps extends FormComponentProps {
+export interface CheckboxButtonProps extends FormFieldComponentProps {
   /** 是否选中  */
   modelValue?: boolean
   /** 是否圆角 */

package/src/types/code-editor.ts

@@ -1,9 +1,11 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 export type CodeEditorLang = 'js' | 'sql' | 'java' | 'json'
 
 /** 代码编辑器组件属性（不支持 `size`） */
-export interface CodeEditorProps extends Omit<FormComponentProps, 'size'> {
+export interface CodeEditorProps extends Omit<FormFieldComponentProps, 'size'> {
   modelValue?: string
   /** 定义语言 */
   language?: CodeEditorLang

package/src/types/date-picker.ts

@@ -1,8 +1,10 @@
 import type { Dater } from '@cat-kit/core'
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** date-picker组件属性 */
-export interface DatePickerProps extends FormComponentProps {
+export interface DatePickerProps extends FormFieldComponentProps {
   modelValue?: string | number | Date
   /** 占位 */
   placeholder?: string

package/src/types/date-range-picker.ts

@@ -1,8 +1,10 @@
 import type { Dater } from '@cat-kit/core'
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** date-range-picker组件属性 */
-export interface DateRangePickerProps extends FormComponentProps {
+export interface DateRangePickerProps extends FormFieldComponentProps {
   modelValue?: [string, string]
   /** 占位 */
   placeholder?: [string, string]

package/src/types/expression-editor.ts

@@ -1,4 +1,6 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 export interface VariableItem {
   label: string
@@ -13,7 +15,7 @@ export interface VariableItem {
 export type ExpressionSelectableLevels = 'leaf' | 'any'
 
 /** 表达式编辑器组件属性 */
-export interface ExpressionEditorProps extends FormComponentProps {
+export interface ExpressionEditorProps extends FormFieldComponentProps {
   modelValue?: string
   placeholder?: string
   /** 变量列表 */

package/src/types/file-picker.ts

@@ -1,7 +1,9 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** 文件上传器组件属性 */
-export interface UploaderProps extends FormComponentProps {
+export interface UploaderProps extends FormFieldComponentProps {
   /** 渲染标签 */
   tag?: string
   /** 允许上传的文件类型 */

package/src/types/form-field.ts

@@ -0,0 +1,11 @@
+import type { FormComponentProps } from '@veltra/utils'
+
+import type { ValidateRule } from '../components/form-item/validate'
+
+export type { PresetRule, ValidateRule } from '../components/form-item/validate'
+
+/** 带校验规则的表单控件通用属性 */
+export interface FormFieldComponentProps extends FormComponentProps {
+  /** 校验规则 */
+  rules?: ValidateRule
+}

package/src/types/form-item.ts

@@ -1,7 +1,7 @@
-import type { FormComponentProps } from '@veltra/utils'
+import type { FormFieldComponentProps } from './form-field'
 
 /** 组件项组件属性 */
-export interface FormItemProps extends FormComponentProps {
+export interface FormItemProps extends FormFieldComponentProps {
   /** 标签宽度 */
   labelWidth?: string | number
 }

package/src/types/form.ts

@@ -1,93 +1,16 @@
-import type { ComponentProps, DeconstructValue, ValidateRule } from '@veltra/utils'
+import type { ComponentProps, DeconstructValue } from '@veltra/utils'
 import type { ShallowRef } from 'vue'
 
-import type { NestedFieldMarker } from '../components/form/helper'
-
-export interface FormModelItem<Val = any> extends ValidateRule {
-  /** 模型值 */
-  value?: Val
-}
-
-export type FormModelField = FormModelItem | NestedFieldMarker
-
-// 最终暴露的 ModelData 类型
-export type ModelData<Fields extends Record<string, any>> = {
-  [key in keyof Fields]: Fields[key] extends NestedFieldMarker<infer SubFields>
-    ? ModelData<SubFields>
-    : Fields[key] extends FormModelItem
-      ? Fields[key]['value'] extends () => infer T
-        ? T
-        : Fields[key]['value']
-      : never
-}
-
-// 获取所有的扁平路径 Union（如 'name' | 'contact.email'）
-export type AllKeys<Fields extends Record<string, any>> = {
-  [K in keyof Fields]: K extends string
-    ? Fields[K] extends NestedFieldMarker<infer SubFields>
-      ? `${K}.${AllKeys<SubFields>}`
-      : K
-    : never
-}[keyof Fields]
-
-export type ModelRules<Fields extends Record<string, FormModelItem>> = {
-  [key in keyof Fields]: Omit<Fields[key], 'value'>
-}
-
-export interface DataSettingConfig {
-  /**
-   * 是否校验
-   * @default true
-   */
-  validate?: boolean
-}
-
-export type IFormModel<Fields extends Record<string, any> = Record<string, any>> = {
-  /** 表单数据 */
-  readonly data: ModelData<Fields>
-  /** 字段校验规则 */
-  readonly fields: Fields
-  /**
-   * 字段键
-   */
-  readonly allKeys: string[]
-  /** 需要校验的key */
-  formKeys: Map<number, string[]>
-  /** 错误 */
-  readonly errors: Map<string, string[] | undefined>
-  /**
-   * 字段校验
-   * @param fields 字段， 如果不传入时将会使用keyFields来进行校验
-   */
-  validate: (fields?: string | string[]) => Promise<boolean>
-  /** 重置数据 */
-  resetData(fields?: string | string[]): void
-
-  /**
-   * 设置数据
-   * @param formData 表单值
-   * @param options 配置
-   */
-  setData(formData: Partial<Record<string, any>>, config?: DataSettingConfig): void
-  /** 清除校验 */
-  clearValidate(): void
-  /** 监听值变更 */
-  onChange(cb: (field: string, val: any) => void): void
-  /** 关闭监听值变更 */
-  offChange(cb: (field: string, val: any) => void): void
-}
-
 /** 表单组件属性 */
-export interface FormProps<Model extends IFormModel = IFormModel> extends ComponentProps {
+export interface FormProps extends ComponentProps {
   /**
    * 自定义表单列数
    * - 默认根据尺寸断点自动排列
    */
   cols?: number
-  /** 是否显示初始数据 */
-  showInitialData?: boolean
-  /** 表单数据模型 */
-  model: Model
+  /** 表单数据 */
+  model?: Record<string, any>
+  // showModified?: boolean
   /** 表单项label宽度 */
   labelWidth?: string | number
   /** 是否不显示tips */
@@ -100,6 +23,10 @@ export interface FormProps<Model extends IFormModel = IFormModel> extends Compon
 
 export interface _FormExposed {
   el: ShallowRef<HTMLElement | null | undefined>
+  validate: (keys?: string[]) => Promise<boolean>
+  clearValidate: () => void
+  /** 将 model 恢复为最近一次 props.model 引用变更时的快照，并清除校验 */
+  reset: () => void
 }
 
 export type FormExposed = DeconstructValue<_FormExposed>

package/src/types/group-input.ts

@@ -1,10 +1,12 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
 import type { StyleValue } from 'vue'
 
+import type { FormFieldComponentProps } from './form-field'
+
 /** 分组输入组件属性 */
 export interface GroupInputProps<
   GroupItem extends Record<string, any> = Record<string, any>
-> extends FormComponentProps {
+> extends FormFieldComponentProps {
   modelValue?: GroupItem[]
   /** 最大数量 */
   max?: number

package/src/types/index.ts

@@ -63,6 +63,7 @@ export * from './number-range-input'
 export * from './theme'
 export * from './loading'
 export * from './badge'
+export * from './form-field'
 export * from './form-item'
 export * from './group-input'
 export * from './paginator'

package/src/types/input.ts

@@ -1,8 +1,10 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
 import type { ShallowRef } from 'vue'
 
+import type { FormFieldComponentProps } from './form-field'
+
 /** 输入框组件属性 */
-export interface InputProps extends FormComponentProps {
+export interface InputProps extends FormFieldComponentProps {
   /** modelValue */
   modelValue?: string
   /** 占位符 */

package/src/types/loading.ts

@@ -1,6 +1,6 @@
 import type { DeconstructValue } from '@veltra/utils'
 
-export type LoadingType = 'classic' | 'line' | 'dot' | 'spinner'
+export type LoadingType = 'classic' | 'line' | 'dot' | 'spinner' | 'morph'
 
 /** loading组件属性 */
 export interface LoadingProps {

package/src/types/multi-select.ts

@@ -1,8 +1,10 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
 import type { CSSProperties } from 'vue'
 
+import type { FormFieldComponentProps } from './form-field'
+
 /** multi-select组件属性 */
-export interface MultiSelectProps extends FormComponentProps {
+export interface MultiSelectProps extends FormFieldComponentProps {
   /** 绑定值 */
   modelValue?: Array<any>
   /** 列表选项 */

package/src/types/multi-tree-select.ts

@@ -1,10 +1,13 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
 import type { CSSProperties } from 'vue'
 
+import type { FormFieldComponentProps } from './form-field'
 import type { TreeProps } from './tree'
 /** 树形多选组件组件属性 */
 export interface MultiTreeSelectProps
-  extends FormComponentProps, Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
+  extends
+    FormFieldComponentProps,
+    Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
   modelValue?: (string | number)[]
 
   /**自定义占位文字 */

package/src/types/palette.ts

@@ -1,4 +1,6 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** 色调 */
 export interface PaletteRGB {
@@ -18,7 +20,7 @@ export interface PaletteHSV {
 export type PaletteColorType = 'HEX' | 'RGB'
 
 /** 调色盘组件属性 */
-export interface PaletteProps extends FormComponentProps {
+export interface PaletteProps extends FormFieldComponentProps {
   modelValue?: string
   disabled?: boolean
   readonly?: boolean

package/src/types/radio-group.ts

@@ -1,6 +1,8 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 /** 单选框默认父组件组件属性 */
-export interface RadioGroupProps extends FormComponentProps {
+export interface RadioGroupProps extends FormFieldComponentProps {
   /** 值 */
   modelValue?: any
   /** 单选框项 */

package/src/types/radio.ts

@@ -1,6 +1,8 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 /** 单选框组件属性 */
-export interface RadioProps extends FormComponentProps {
+export interface RadioProps extends FormFieldComponentProps {
   /** 单选框值 */
   value?: any
   /** 文本 */

package/src/types/rich-text-editor.ts

@@ -1,4 +1,6 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** 富文本数据格式 */
 export type RichTextFormat = 'html' | 'json'
@@ -21,7 +23,7 @@ export type ToolbarItem =
   | '|'
 
 /** 富文本编辑器组件属性 */
-export interface RichTextEditorProps extends FormComponentProps {
+export interface RichTextEditorProps extends FormFieldComponentProps {
   modelValue?: string
   /** 数据格式：html 或 json */
   format?: RichTextFormat

package/src/types/select.ts

@@ -1,8 +1,10 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
 import type { CSSProperties, ShallowRef } from 'vue'
 
+import type { FormFieldComponentProps } from './form-field'
+
 /** 选择器组件属性 */
-export interface SelectProps extends FormComponentProps {
+export interface SelectProps extends FormFieldComponentProps {
   /** 绑定值 */
   modelValue?: any
   /** 文本内容 */

package/src/types/slider.ts

@@ -1,7 +1,9 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** 滑块组件属性 */
-export interface SliderProps<T extends number | [number, number]> extends FormComponentProps {
+export interface SliderProps<T extends number | [number, number]> extends FormFieldComponentProps {
   modelValue?: T
   /**
    * 最小值

package/src/types/switch.ts

@@ -1,7 +1,9 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** 开关组件属性 */
-export interface SwitchProps extends FormComponentProps {
+export interface SwitchProps extends FormFieldComponentProps {
   /** 开关状态 */
   modelValue?: boolean
   /** 打开时显示的文字 */

package/src/types/text-editor.ts

@@ -1,4 +1,6 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** text-editor组件属性 */
 export interface BarType {
@@ -6,7 +8,7 @@ export interface BarType {
   bar: string
 }
 
-export interface TextEditorProps extends FormComponentProps {
+export interface TextEditorProps extends FormFieldComponentProps {
   modelValue?: string
   placeholder?: string
   toolbar?: BarType[]

package/src/types/textarea.ts

@@ -1,7 +1,9 @@
-import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
+
+import type { FormFieldComponentProps } from './form-field'
 
 /** textarea组件属性 */
-export interface TextareaProps extends FormComponentProps {
+export interface TextareaProps extends FormFieldComponentProps {
   /**
    * 文本域的值
    */

package/src/types/tree-select.ts

@@ -1,11 +1,14 @@
-import type { FormComponentProps, DeconstructValue } from '@veltra/utils'
+import type { DeconstructValue } from '@veltra/utils'
 import type { CSSProperties } from 'vue'
 
+import type { FormFieldComponentProps } from './form-field'
 import type { TreeProps } from './tree'
 
 /** 树形选择器组件属性 */
 export interface TreeSelectProps
-  extends FormComponentProps, Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
+  extends
+    FormFieldComponentProps,
+    Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
   modelValue?: string | number
 
   /** 自定义占位文字 */