@veltra/desktop 1.1.36 → 1.2.1

package/src/components/form-item/helper.ts

@@ -1,5 +1,5 @@
 import { o } from '@cat-kit/core'
-import { bem, type BEM, type FormComponentProps } from '@veltra/utils'
+import { bem, type BEM, type FormComponentProps, type FormFieldItem } from '@veltra/utils'
 
 /**
  * 获取表单项的属性
@@ -16,3 +16,7 @@ export function getFormItemProps(
 }
 
 export const formItemCls: BEM<'form-item'> = bem('form-item')
+
+export function defineField(field: FormFieldItem) {
+  return field
+}

package/src/components/form-item/validate.ts

@@ -0,0 +1,131 @@
+import { isEmpty, o } from '@cat-kit/core'
+import type { PresetRule, Undef, ValidateRule } from '@veltra/utils'
+
+const presetRules: Record<PresetRule, (value: string) => string | undefined> = {
+  email(v) {
+    const re = /^([\w_-]+)@([\w-]+[.]?)*[\w]+\.[a-zA-Z]{2,10}$/
+    if (!re.test(v)) {
+      return '邮箱格式不正确'
+    }
+  },
+  phone(v) {
+    const re = /^\d{11}$/
+    if (!re.test(v)) {
+      return '手机号格式不正确'
+    }
+  },
+  num(v) {
+    const re = /^\d+$/
+    if (!re.test(v)) {
+      return '数字格式不正确'
+    }
+  },
+  url(v) {
+    const re = /^(ftp|https?):\/\/([\w_-]+)\.([\w-]+[.]?)*[\w]+\.[a-zA-Z]{2,10}(.*)/
+    if (!re.test(v)) {
+      return '链接格式不正确'
+    }
+  },
+
+  idCard(v) {
+    const re = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
+    if (!re.test(v)) {
+      return '身份证格式不正确'
+    }
+  }
+}
+
+/** 预设规则 */
+const ruleTypes = {
+  required(value: any, required: ValidateRule['required']): Undef<string> {
+    if (required === false) return
+
+    const errMsg = typeof required === 'string' ? required : '该项不能为空'
+    if (isEmpty(value)) return errMsg
+
+    if (Array.isArray(value) && !value.length) return errMsg
+    if (typeof value === 'string' && !value) return errMsg
+  },
+  min(value: any, rule: ValidateRule['min']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项必须大于等于${_rule}`
+    if (typeof value !== 'number') return `${value}不是一个数字`
+    if (value < _rule) return errMsg
+  },
+  max(value: any, rule: ValidateRule['max']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项必须小于等于${_rule}`
+    if (typeof value !== 'number') return `${value}不是一个数字`
+    if (value > _rule) return errMsg
+  },
+
+  minLen(value: any, rule: ValidateRule['minLen']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项长度必须大于等于${_rule}`
+    if (!Array.isArray(value) && typeof value !== 'string') return `${value}不是一个字符串或数组`
+    if (value.length < _rule) return errMsg
+  },
+  maxLen(value: any, rule: ValidateRule['maxLen']): Undef<string> {
+    if (isEmpty(value)) return
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项长度必须小于等于:${_rule}`
+    if (!Array.isArray(value) && typeof value !== 'string') return `${value}不是一个字符串或数组`
+    if (value.length > _rule) return errMsg
+  },
+  match(value: any, rule: ValidateRule['match']): Undef<string> {
+    if (isEmpty(value) || value === '') return
+    if (typeof rule === 'string') {
+      if (!rule) return
+      rule = new RegExp(rule)
+    }
+    let _rule = Array.isArray(rule) ? rule[0] : rule!
+    let errMsg = Array.isArray(rule) ? rule[1] : `该项不匹配正则:${_rule}`
+    if (typeof value !== 'string') return `${value}不是一个字符串`
+    if (!_rule.test(value)) return errMsg
+  },
+  preset(value: any, rule: ValidateRule['preset']): Undef<string> {
+    if (isEmpty(value) || value === '' || !rule) return
+    if (typeof value !== 'string') return `${value}不是一个字符串`
+    const ruleValidator = presetRules[rule]
+    return ruleValidator(value)
+  }
+}
+
+export async function validateField(
+  formData: Record<string, any>,
+  field: string,
+  rules: ValidateRule
+): Promise<Undef<string>> {
+  const value = o(formData).get(field)
+
+  if (!rules) return
+
+  const { validator, required, ...normalRules } = rules
+
+  // 必填要先去校验
+  if (required) {
+    const err = ruleTypes.required(value, required)
+    if (err) return err
+  }
+
+  // 校验规则
+  for (const ruleKey in normalRules) {
+    const validate = ruleTypes[ruleKey as keyof typeof ruleTypes]
+    if (!validate) continue
+
+    const err = validate(value, normalRules[ruleKey])
+
+    if (err) return err
+  }
+
+  // 自定义校验最火校验
+  if (validator) {
+    const err = await validator(value, formData)
+    if (err) return err
+  }
+
+  return
+}

package/src/components/rich-text-editor/rich-text-editor.vue

@@ -152,30 +152,33 @@ function initEditor() {
   // Listen for content changes
   cleanupFns.push(
     editorInstance.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        const root = $getRoot()
-        const textContent = root.getTextContent()
-        showPlaceholder.value = textContent.trim().length === 0
-
-        if (isComposing) return
-
-        let value: string
-        if (props.format === 'json') {
-          value = JSON.stringify(editorState.toJSON())
-        } else {
-          value = $generateHtmlFromNodes(editorInstance)
-        }
-
-        // Avoid circular updates: only emit if content really changed
-        if (value !== model.value) {
-          isComposing = true
-          model.value = value
-          // Use microtask to reset after Vue processes the update
-          queueMicrotask(() => {
-            isComposing = false
-          })
-        }
-      })
+      editorState.read(
+        () => {
+          const root = $getRoot()
+          const textContent = root.getTextContent()
+          showPlaceholder.value = textContent.trim().length === 0
+
+          if (isComposing) return
+
+          let value: string
+          if (props.format === 'json') {
+            value = JSON.stringify(editorState.toJSON())
+          } else {
+            value = $generateHtmlFromNodes(editorInstance)
+          }
+
+          // Avoid circular updates: only emit if content really changed
+          if (value !== model.value) {
+            isComposing = true
+            model.value = value
+            // Use microtask to reset after Vue processes the update
+            queueMicrotask(() => {
+              isComposing = false
+            })
+          }
+        },
+        { editor: editorInstance }
+      )
     })
   )
 
@@ -229,7 +232,7 @@ watch(model, (newVal) => {
   const editorInstance = editor.value
 
   // Compare current content to avoid circular updates
-  editorInstance.getEditorState().read(() => {
+  editorInstance.read(() => {
     let currentValue: string
     if (props.format === 'json') {
       currentValue = JSON.stringify(editorInstance.getEditorState().toJSON())

package/src/components/rich-text-editor/toolbar.vue

@@ -84,12 +84,15 @@ let cleanupListener: (() => void) | null = null
 function setupListener(editorInstance: LexicalEditor) {
   cleanupListener?.()
   cleanupListener = editorInstance.registerUpdateListener(({ editorState }) => {
-    editorState.read(() => {
-      const selection = $getSelection()
-      if (!$isRangeSelection(selection)) return
+    editorState.read(
+      () => {
+        const selection = $getSelection()
+        if (!$isRangeSelection(selection)) return
 
-      updateToolbarState(selection)
-    })
+        updateToolbarState(selection)
+      },
+      { editor: editorInstance }
+    )
   })
 }
 
@@ -235,24 +238,25 @@ function onHeadingChange(event: Event) {
 }
 
 function toggleLink(editorInstance: LexicalEditor) {
-  editorInstance.getEditorState().read(() => {
+  let shouldRemoveLink = false
+
+  editorInstance.read(() => {
     const selection = $getSelection()
     if (!$isRangeSelection(selection)) return
 
-    const anchorNode = selection.anchor.getNode()
-    const parent = anchorNode.getParent()
-
-    if ($isLinkNode(parent)) {
-      // Remove link
-      editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)
-    } else {
-      // Insert link with prompt
-      const url = prompt('请输入链接地址:', 'https://')
-      if (url && url !== 'https://') {
-        editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)
-      }
-    }
+    const parent = selection.anchor.getNode().getParent()
+    shouldRemoveLink = $isLinkNode(parent)
   })
+
+  if (shouldRemoveLink) {
+    editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+    return
+  }
+
+  const url = prompt('请输入链接地址:', 'https://')
+  if (url && url !== 'https://') {
+    editorInstance.dispatchCommand(TOGGLE_LINK_COMMAND, url)
+  }
 }
 
 function getTitle(item: ToolbarItem): string {

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/types/auto-complete.ts

@@ -1,4 +1,4 @@
-import type { FormComponentProps, DeconstructValue } from '@veltra/utils'
+import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
 
 /** 自动补全组件组件属性 */
 export interface AutoCompleteProps extends FormComponentProps {

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/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/radio-group.ts

@@ -1,4 +1,5 @@
 import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+
 /** 单选框默认父组件组件属性 */
 export interface RadioGroupProps extends FormComponentProps {
   /** 值 */

package/src/types/radio.ts

@@ -1,4 +1,5 @@
 import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
+
 /** 单选框组件属性 */
 export interface RadioProps extends FormComponentProps {
   /** 单选框值 */

package/src/types/tree-select.ts

@@ -1,4 +1,4 @@
-import type { FormComponentProps, DeconstructValue } from '@veltra/utils'
+import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
 import type { CSSProperties } from 'vue'
 
 import type { TreeProps } from './tree'

package/dist/components/form/dynamic-form-model.d.ts

@@ -1,73 +0,0 @@
-import { DataSettingConfig, FormModelField } from "../../types/form.js";
-//#region src/components/form/dynamic-form-model.d.ts
-/**
- * 动态表单模型
- */
-declare class DynamicFormModel {
-  /** 表单数据 */
-  private _data;
-  set data(v: Record<string, any>);
-  get data(): Record<string, any>;
-  /** 表单规则 */
-  readonly fields: Record<string, FormModelField>;
-  private flatFields;
-  private validator;
-  /**
-   * 不同表单对应的key
-   */
-  formKeys: Map<number, string[]>;
-  readonly errors: Map<string, string[] | undefined>;
-  /**
-   * 是否在表单值更新时校验
-   */
-  private validateOnFieldChange;
-  private modelChangeCallback;
-  private _allKeys;
-  /** 所有的键 */
-  get allKeys(): string[];
-  private updateFlatFields;
-  private getAllKeys;
-  /** 初始数据 */
-  readonly initialData: Record<string, any>;
-  /**
-   * 变更前的值
-   */
-  private readonly oldData;
-  constructor(fields?: Record<string, FormModelField>);
-  private watchData;
-  append(fields: Record<string, FormModelField>): void;
-  /**
-   * 添加字段
-   * @param field 字段
-   * @param item 字段配置项
-   */
-  add(field: string, item: FormModelField): void;
-  /**
-   * 移除字段
-   * @param field 字段
-   */
-  delete(field: string): void;
-  /**
-   * 监听值变更
-   * @param cb 回调
-   */
-  onChange(cb: (field: string, val: any) => void): void;
-  offChange(cb: (field: string, val: any) => void): void;
-  validate(fields?: string | string[]): Promise<boolean>;
-  private getValidateFields;
-  /**
-   * 重置数据
-   * @param fields 需要重置的字段
-   */
-  resetData(keys?: string | string[]): void;
-  /**
-   * 设置值
-   * @param formData 表单值
-   * @param options 配置
-   */
-  setData(formData: Record<string, any>, config?: DataSettingConfig): void;
-  clearValidate(): void;
-}
-//#endregion
-export { DynamicFormModel };
-//# sourceMappingURL=dynamic-form-model.d.ts.map