@veltra/desktop 1.2.0 → 1.2.2

package/dist/types/palette.d.ts

@@ -1,5 +1,4 @@
-import { FormFieldComponentProps } from "./form-field.js";
-import { DeconstructValue } from "@veltra/utils";
+import { DeconstructValue, FormComponentProps } from "@veltra/utils";
 
 //#region src/types/palette.d.ts
 /** 色调 */
@@ -17,7 +16,7 @@ interface PaletteHSV {
 /** 调色盘组件颜色类型 */
 type PaletteColorType = 'HEX' | 'RGB';
 /** 调色盘组件属性 */
-interface PaletteProps extends FormFieldComponentProps {
+interface PaletteProps extends FormComponentProps {
   modelValue?: string;
   disabled?: boolean;
   readonly?: boolean;

package/dist/types/radio-group.d.ts

@@ -1,9 +1,8 @@
-import { FormFieldComponentProps } from "./form-field.js";
-import { DeconstructValue } from "@veltra/utils";
+import { DeconstructValue, FormComponentProps } from "@veltra/utils";
 
 //#region src/types/radio-group.d.ts
 /** 单选框默认父组件组件属性 */
-interface RadioGroupProps extends FormFieldComponentProps {
+interface RadioGroupProps extends FormComponentProps {
   /** 值 */
   modelValue?: any;
   /** 单选框项 */

package/dist/types/radio.d.ts

@@ -1,9 +1,8 @@
-import { FormFieldComponentProps } from "./form-field.js";
-import { DeconstructValue } from "@veltra/utils";
+import { DeconstructValue, FormComponentProps } from "@veltra/utils";
 
 //#region src/types/radio.d.ts
 /** 单选框组件属性 */
-interface RadioProps extends FormFieldComponentProps {
+interface RadioProps extends FormComponentProps {
   /** 单选框值 */
   value?: any;
   /** 文本 */

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

@@ -1,5 +1,4 @@
-import { FormFieldComponentProps } from "./form-field.js";
-import { DeconstructValue } from "@veltra/utils";
+import { DeconstructValue, FormComponentProps } from "@veltra/utils";
 
 //#region src/types/rich-text-editor.d.ts
 /** 富文本数据格式 */
@@ -7,7 +6,7 @@ type RichTextFormat = 'html' | 'json';
 /** 工具栏项 */
 type ToolbarItem = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code' | 'heading' | 'bullet-list' | 'ordered-list' | 'blockquote' | 'code-block' | 'link' | 'undo' | 'redo' | '|';
 /** 富文本编辑器组件属性 */
-interface RichTextEditorProps extends FormFieldComponentProps {
+interface RichTextEditorProps extends FormComponentProps {
   modelValue?: string;
   /** 数据格式：html 或 json */
   format?: RichTextFormat;

package/dist/types/select.d.ts

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

package/dist/types/slider.d.ts

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

package/dist/types/switch.d.ts

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

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

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

package/dist/types/textarea.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "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.2.0",
-    "@veltra/directives": "1.2.0",
-    "@veltra/icons": "1.2.0",
-    "@veltra/styles": "1.2.0",
-    "@veltra/utils": "1.2.0",
+    "@veltra/compositions": "1.2.2",
+    "@veltra/directives": "1.2.2",
+    "@veltra/icons": "1.2.2",
+    "@veltra/styles": "1.2.2",
+    "@veltra/utils": "1.2.2",
     "vue": ">=3.5.0"
   }
 }

package/src/components/form/form.vue

@@ -1,7 +1,7 @@
 <template>
   <u-grid
     tag="form"
-    ref="gridRef"
+    ref="grid"
     @submit.prevent
     :cols="cols || breakpointCols"
     :class="[cls.b, bem.is('readonly', readonly)]"
@@ -27,7 +27,7 @@
 import { o } from '@cat-kit/core'
 import { bem } from '@veltra/utils'
 import { provideFormContext } from '@veltra/utils'
-import { shallowRef, toRef } from 'vue'
+import { nextTick, shallowRef, toRef, useTemplateRef } from 'vue'
 
 import type { BreakCols, GridExposed, FormProps, _FormExposed } from '../../types'
 import { UFormItem } from '../form-item'
@@ -42,11 +42,31 @@ const props = defineProps<FormProps>()
 defineSlots<{ default(props?: { data: Record<string, any> | undefined }): any }>()
 
 const cls = bem('form')
+const formItemCls = bem('form-item')
+const gridRef = useTemplateRef('grid')
 
 const breakpointCols: BreakCols = { xs: 1, md: 2, lg: 3, xl: 4, default: 4 }
 
-const { validate, clearValidate, reset, registerField, unregisterField, shouldValidate } =
-  useFormFields({ props })
+const {
+  validate: runValidate,
+  clearValidate,
+  reset,
+  registerField,
+  unregisterField,
+  shouldValidate
+} = useFormFields({ props })
+
+async function validate(keys?: string[]) {
+  const valid = await runValidate(keys)
+  if (!valid) {
+    await nextTick()
+
+    gridRef.value?.el
+      ?.querySelector(`.${formItemCls.e('error-text')}`)
+      ?.scrollIntoView({ block: 'center' })
+  }
+  return valid
+}
 
 provideFormContext({
   formProps: props,
@@ -63,7 +83,5 @@ function handleUpdateValue(field: string, value: any) {
   o(props.model).set(field, value)
 }
 
-const gridRef = shallowRef<GridExposed>()
-
 defineExpose<_FormExposed>({ el: toRef(() => gridRef.value?.el), validate, clearValidate, reset })
 </script>

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

@@ -1,7 +1,5 @@
 import { o } from '@cat-kit/core'
-import { bem, type BEM, type FormFieldItem } from '@veltra/utils'
-
-import type { FormFieldComponentProps } from '../../types/form-field'
+import { bem, type BEM, type FormComponentProps, type FormFieldItem } from '@veltra/utils'
 
 /**
  * 获取表单项的属性
@@ -9,10 +7,10 @@ import type { FormFieldComponentProps } from '../../types/form-field'
  * @returns
  */
 export function getFormItemProps(
-  props: FormFieldComponentProps
-): Pick<FormFieldComponentProps, 'label' | 'field' | 'readonly' | 'span' | 'tips'> {
+  props: FormComponentProps
+): Pick<FormComponentProps, 'label' | 'field' | 'readonly' | 'span' | 'tips'> {
   return o(props).pick(['label', 'field', 'readonly', 'span', 'tips']) as Pick<
-    FormFieldComponentProps,
+    FormComponentProps,
     'label' | 'field' | 'readonly' | 'span' | 'tips'
   >
 }

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

@@ -1,29 +1,5 @@
 import { isEmpty, o } from '@cat-kit/core'
-import type { Undef } from '@veltra/utils'
-
-export type PresetRule = 'email' | 'phone' | 'num' | 'url' | 'idCard'
-
-/** 字段校验规则 */
-export interface ValidateRule {
-  /** 是否必填 */
-  required?: boolean | string
-  /** 长度单位 */
-  length?: number | [number, string]
-  /** 最小值 */
-  min?: number | [number, string]
-  /** 最大值 */
-  max?: number | [number, string]
-  /** 最小长度 */
-  minLen?: number | [number, string]
-  /** 最大长度 */
-  maxLen?: number | [number, string]
-  /** 匹配 */
-  match?: RegExp | [RegExp, string] | string
-  /** 预设 */
-  preset?: PresetRule
-  /** 自定义校验 */
-  validator?: (value: any, data: Record<string, any>) => Promise<string> | string
-}
+import type { PresetRule, Undef, ValidateRule } from '@veltra/utils'
 
 const presetRules: Record<PresetRule, (value: string) => string | undefined> = {
   email(v) {

package/src/types/auto-complete.ts

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

package/src/types/cascade.ts

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

package/src/types/checkbox-group.ts

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

package/src/types/checkbox.ts

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

package/src/types/code-editor.ts

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

package/src/types/date-picker.ts

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

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

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

package/src/types/expression-editor.ts

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

package/src/types/file-picker.ts

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

package/src/types/form-item.ts

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

package/src/types/group-input.ts

@@ -1,12 +1,10 @@
-import type { DeconstructValue } from '@veltra/utils'
+import type { DeconstructValue, FormComponentProps } 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 FormFieldComponentProps {
+> extends FormComponentProps {
   modelValue?: GroupItem[]
   /** 最大数量 */
   max?: number

package/src/types/index.ts

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

package/src/types/multi-select.ts

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

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

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

package/src/types/palette.ts

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

package/src/types/radio-group.ts

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

package/src/types/radio.ts

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

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

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

package/src/types/select.ts

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

package/src/types/slider.ts

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

package/src/types/switch.ts

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

package/src/types/text-editor.ts

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

package/src/types/textarea.ts

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