@veltra/desktop 1.1.36 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (191) hide show
  1. package/dist/components/action/action-group.vue.d.ts +1 -1
  2. package/dist/components/action/action.vue.d.ts +1 -1
  3. package/dist/components/auto-complete/auto-complete.js +1 -0
  4. package/dist/components/auto-complete/auto-complete.js.map +1 -1
  5. package/dist/components/batch-edit/batch-edit-form.js +12 -5
  6. package/dist/components/batch-edit/batch-edit-form.js.map +1 -1
  7. package/dist/components/batch-edit/batch-edit.js +8 -3
  8. package/dist/components/batch-edit/batch-edit.js.map +1 -1
  9. package/dist/components/batch-edit/batch-edit.vue.d.ts +40 -35
  10. package/dist/components/batch-edit/di.js.map +1 -1
  11. package/dist/components/batch-edit/use-edit.js +41 -23
  12. package/dist/components/batch-edit/use-edit.js.map +1 -1
  13. package/dist/components/cascade/cascade.js +1 -0
  14. package/dist/components/cascade/cascade.js.map +1 -1
  15. package/dist/components/cascade/cascade.vue.d.ts +4 -4
  16. package/dist/components/checkbox/checkbox-button.js +1 -0
  17. package/dist/components/checkbox/checkbox-button.js.map +1 -1
  18. package/dist/components/checkbox/checkbox-button.vue.d.ts +1 -1
  19. package/dist/components/checkbox/checkbox.js +1 -0
  20. package/dist/components/checkbox/checkbox.js.map +1 -1
  21. package/dist/components/checkbox-group/checkbox-group.js +1 -0
  22. package/dist/components/checkbox-group/checkbox-group.js.map +1 -1
  23. package/dist/components/checkbox-group/checkbox-group.vue.d.ts +2 -2
  24. package/dist/components/code-editor/code-editor.js +1 -0
  25. package/dist/components/code-editor/code-editor.js.map +1 -1
  26. package/dist/components/condition-editor/core/evaluator.js +3 -3
  27. package/dist/components/condition-editor/core/evaluator.js.map +1 -1
  28. package/dist/components/date-panel/date-panel.vue.d.ts +1 -1
  29. package/dist/components/date-picker/date-picker.js +1 -0
  30. package/dist/components/date-picker/date-picker.js.map +1 -1
  31. package/dist/components/date-picker/date-picker.vue.d.ts +1 -1
  32. package/dist/components/date-range-picker/date-range-picker.js +2 -0
  33. package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
  34. package/dist/components/date-range-picker/date-range-picker.vue.d.ts +1 -1
  35. package/dist/components/empty/empty.vue.d.ts +1 -1
  36. package/dist/components/expression-editor/expression-editor.js +1 -0
  37. package/dist/components/expression-editor/expression-editor.js.map +1 -1
  38. package/dist/components/file-picker/file-picker.js +1 -0
  39. package/dist/components/file-picker/file-picker.js.map +1 -1
  40. package/dist/components/form/form.js.map +1 -1
  41. package/dist/components/form/form.vue.d.ts +11 -19
  42. package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js +24 -26
  43. package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js.map +1 -1
  44. package/dist/components/form/index.d.ts +0 -3
  45. package/dist/components/form/use-form-fields.js +88 -0
  46. package/dist/components/form/use-form-fields.js.map +1 -0
  47. package/dist/components/form/use-node-interceptor.js +19 -30
  48. package/dist/components/form/use-node-interceptor.js.map +1 -1
  49. package/dist/components/form-item/form-item.js.map +1 -1
  50. package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js +44 -18
  51. package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js.map +1 -1
  52. package/dist/components/form-item/helper.js +4 -1
  53. package/dist/components/form-item/helper.js.map +1 -1
  54. package/dist/components/form-item/validate.d.ts +26 -0
  55. package/dist/components/form-item/validate.js +97 -0
  56. package/dist/components/form-item/validate.js.map +1 -0
  57. package/dist/components/group-input/group-input.js +1 -0
  58. package/dist/components/group-input/group-input.js.map +1 -1
  59. package/dist/components/index.d.ts +0 -3
  60. package/dist/components/index.js +0 -7
  61. package/dist/components/input/input.vue.d.ts +4 -4
  62. package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js +1 -0
  63. package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js.map +1 -1
  64. package/dist/components/multi-select/multi-select.js +1 -0
  65. package/dist/components/multi-select/multi-select.js.map +1 -1
  66. package/dist/components/multi-select/multi-select.vue.d.ts +3 -3
  67. package/dist/components/multi-tree-select/multi-tree-select.js +1 -0
  68. package/dist/components/multi-tree-select/multi-tree-select.js.map +1 -1
  69. package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +4 -4
  70. package/dist/components/number-input/number-input.js +1 -0
  71. package/dist/components/number-input/number-input.js.map +1 -1
  72. package/dist/components/number-range-input/number-range-input.js +1 -0
  73. package/dist/components/number-range-input/number-range-input.js.map +1 -1
  74. package/dist/components/number-range-input/number-range-input.vue.d.ts +1 -1
  75. package/dist/components/palette/palette.js +1 -0
  76. package/dist/components/palette/palette.js.map +1 -1
  77. package/dist/components/password-input/password-input.js +1 -0
  78. package/dist/components/password-input/password-input.js.map +1 -1
  79. package/dist/components/radio/radio.js +1 -0
  80. package/dist/components/radio/radio.js.map +1 -1
  81. package/dist/components/radio-group/radio-group.js +1 -0
  82. package/dist/components/radio-group/radio-group.js.map +1 -1
  83. package/dist/components/radio-group/radio-group.vue.d.ts +2 -2
  84. package/dist/components/rich-text-editor/rich-text-editor.js +3 -2
  85. package/dist/components/rich-text-editor/rich-text-editor.js.map +1 -1
  86. package/dist/components/rich-text-editor/toolbar.js +10 -7
  87. package/dist/components/rich-text-editor/toolbar.js.map +1 -1
  88. package/dist/components/select/select.js +6 -3
  89. package/dist/components/select/select.js.map +1 -1
  90. package/dist/components/select/select.vue.d.ts +2 -2
  91. package/dist/components/slider/slider.js +15 -2
  92. package/dist/components/slider/slider.js.map +1 -1
  93. package/dist/components/switch/switch.js +1 -0
  94. package/dist/components/switch/switch.js.map +1 -1
  95. package/dist/components/tabs/tabs-horizontal.vue.d.ts +2 -2
  96. package/dist/components/tabs/tabs-vertical.vue.d.ts +2 -2
  97. package/dist/components/tabs/tabs.vue.d.ts +2 -2
  98. package/dist/components/textarea/textarea.js +1 -0
  99. package/dist/components/textarea/textarea.js.map +1 -1
  100. package/dist/components/tip/tip.vue.d.ts +3 -3
  101. package/dist/components/tree-select/tree-select.js +1 -0
  102. package/dist/components/tree-select/tree-select.js.map +1 -1
  103. package/dist/components/tree-select/tree-select.vue.d.ts +4 -4
  104. package/dist/index.d.ts +5 -6
  105. package/dist/index.js +1 -4
  106. package/dist/types/auto-complete.d.ts +3 -2
  107. package/dist/types/batch-edit.d.ts +4 -5
  108. package/dist/types/cascade.d.ts +3 -2
  109. package/dist/types/checkbox-group.d.ts +2 -2
  110. package/dist/types/checkbox.d.ts +4 -3
  111. package/dist/types/code-editor.d.ts +3 -2
  112. package/dist/types/date-picker.d.ts +3 -2
  113. package/dist/types/date-range-picker.d.ts +3 -2
  114. package/dist/types/expression-editor.d.ts +3 -2
  115. package/dist/types/file-picker.d.ts +3 -2
  116. package/dist/types/form-field.d.ts +12 -0
  117. package/dist/types/form-item.d.ts +2 -2
  118. package/dist/types/form.d.ts +9 -48
  119. package/dist/types/group-input.d.ts +3 -2
  120. package/dist/types/index.d.ts +4 -2
  121. package/dist/types/input.d.ts +3 -2
  122. package/dist/types/multi-select.d.ts +3 -2
  123. package/dist/types/multi-tree-select.d.ts +3 -2
  124. package/dist/types/palette.d.ts +3 -2
  125. package/dist/types/radio-group.d.ts +3 -2
  126. package/dist/types/radio.d.ts +3 -2
  127. package/dist/types/rich-text-editor.d.ts +3 -2
  128. package/dist/types/select.d.ts +3 -2
  129. package/dist/types/slider.d.ts +3 -2
  130. package/dist/types/switch.d.ts +3 -2
  131. package/dist/types/text-editor.d.ts +3 -2
  132. package/dist/types/textarea.d.ts +3 -2
  133. package/dist/types/tree-select.d.ts +3 -2
  134. package/package.json +6 -6
  135. package/src/components/batch-edit/batch-edit-form.vue +20 -13
  136. package/src/components/batch-edit/batch-edit.vue +7 -8
  137. package/src/components/batch-edit/di.ts +1 -2
  138. package/src/components/batch-edit/use-edit.ts +58 -36
  139. package/src/components/date-range-picker/date-range-picker.vue +2 -0
  140. package/src/components/form/form.vue +22 -38
  141. package/src/components/form/index.ts +0 -6
  142. package/src/components/form/use-form-fields.ts +126 -0
  143. package/src/components/form/use-node-interceptor.ts +27 -56
  144. package/src/components/form-item/form-item.vue +69 -18
  145. package/src/components/form-item/helper.ts +10 -4
  146. package/src/components/form-item/validate.ts +155 -0
  147. package/src/components/rich-text-editor/rich-text-editor.vue +28 -25
  148. package/src/components/rich-text-editor/toolbar.vue +23 -19
  149. package/src/components/select/select.vue +6 -4
  150. package/src/components/slider/slider.vue +12 -2
  151. package/src/types/auto-complete.ts +4 -2
  152. package/src/types/batch-edit.ts +4 -5
  153. package/src/types/cascade.ts +4 -2
  154. package/src/types/checkbox-group.ts +2 -2
  155. package/src/types/checkbox.ts +5 -3
  156. package/src/types/code-editor.ts +4 -2
  157. package/src/types/date-picker.ts +4 -2
  158. package/src/types/date-range-picker.ts +4 -2
  159. package/src/types/expression-editor.ts +4 -2
  160. package/src/types/file-picker.ts +4 -2
  161. package/src/types/form-field.ts +11 -0
  162. package/src/types/form-item.ts +2 -2
  163. package/src/types/form.ts +9 -82
  164. package/src/types/group-input.ts +4 -2
  165. package/src/types/index.ts +1 -0
  166. package/src/types/input.ts +4 -2
  167. package/src/types/multi-select.ts +4 -2
  168. package/src/types/multi-tree-select.ts +5 -2
  169. package/src/types/palette.ts +4 -2
  170. package/src/types/radio-group.ts +4 -2
  171. package/src/types/radio.ts +4 -2
  172. package/src/types/rich-text-editor.ts +4 -2
  173. package/src/types/select.ts +4 -2
  174. package/src/types/slider.ts +4 -2
  175. package/src/types/switch.ts +4 -2
  176. package/src/types/text-editor.ts +4 -2
  177. package/src/types/textarea.ts +4 -2
  178. package/src/types/tree-select.ts +5 -2
  179. package/dist/components/form/dynamic-form-model.d.ts +0 -73
  180. package/dist/components/form/dynamic-form-model.js +0 -184
  181. package/dist/components/form/dynamic-form-model.js.map +0 -1
  182. package/dist/components/form/form-model.d.ts +0 -73
  183. package/dist/components/form/form-model.js +0 -179
  184. package/dist/components/form/form-model.js.map +0 -1
  185. package/dist/components/form/helper.d.ts +0 -16
  186. package/dist/components/form/helper.js +0 -20
  187. package/dist/components/form/helper.js.map +0 -1
  188. package/src/components/form/__test__/form-model.test.ts +0 -190
  189. package/src/components/form/dynamic-form-model.ts +0 -258
  190. package/src/components/form/form-model.ts +0 -255
  191. package/src/components/form/helper.ts +0 -23
@@ -63,6 +63,7 @@ export * from './number-range-input'
63
63
  export * from './theme'
64
64
  export * from './loading'
65
65
  export * from './badge'
66
+ export * from './form-field'
66
67
  export * from './form-item'
67
68
  export * from './group-input'
68
69
  export * from './paginator'
@@ -1,8 +1,10 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
2
  import type { ShallowRef } from 'vue'
3
3
 
4
+ import type { FormFieldComponentProps } from './form-field'
5
+
4
6
  /** 输入框组件属性 */
5
- export interface InputProps extends FormComponentProps {
7
+ export interface InputProps extends FormFieldComponentProps {
6
8
  /** modelValue */
7
9
  modelValue?: string
8
10
  /** 占位符 */
@@ -1,8 +1,10 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
2
  import type { CSSProperties } from 'vue'
3
3
 
4
+ import type { FormFieldComponentProps } from './form-field'
5
+
4
6
  /** multi-select组件属性 */
5
- export interface MultiSelectProps extends FormComponentProps {
7
+ export interface MultiSelectProps extends FormFieldComponentProps {
6
8
  /** 绑定值 */
7
9
  modelValue?: Array<any>
8
10
  /** 列表选项 */
@@ -1,10 +1,13 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
2
  import type { CSSProperties } from 'vue'
3
3
 
4
+ import type { FormFieldComponentProps } from './form-field'
4
5
  import type { TreeProps } from './tree'
5
6
  /** 树形多选组件组件属性 */
6
7
  export interface MultiTreeSelectProps
7
- extends FormComponentProps, Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
8
+ extends
9
+ FormFieldComponentProps,
10
+ Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
8
11
  modelValue?: (string | number)[]
9
12
 
10
13
  /**自定义占位文字 */
@@ -1,4 +1,6 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
+
3
+ import type { FormFieldComponentProps } from './form-field'
2
4
 
3
5
  /** 色调 */
4
6
  export interface PaletteRGB {
@@ -18,7 +20,7 @@ export interface PaletteHSV {
18
20
  export type PaletteColorType = 'HEX' | 'RGB'
19
21
 
20
22
  /** 调色盘组件属性 */
21
- export interface PaletteProps extends FormComponentProps {
23
+ export interface PaletteProps extends FormFieldComponentProps {
22
24
  modelValue?: string
23
25
  disabled?: boolean
24
26
  readonly?: boolean
@@ -1,6 +1,8 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
+
3
+ import type { FormFieldComponentProps } from './form-field'
2
4
  /** 单选框默认父组件组件属性 */
3
- export interface RadioGroupProps extends FormComponentProps {
5
+ export interface RadioGroupProps extends FormFieldComponentProps {
4
6
  /** 值 */
5
7
  modelValue?: any
6
8
  /** 单选框项 */
@@ -1,6 +1,8 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
+
3
+ import type { FormFieldComponentProps } from './form-field'
2
4
  /** 单选框组件属性 */
3
- export interface RadioProps extends FormComponentProps {
5
+ export interface RadioProps extends FormFieldComponentProps {
4
6
  /** 单选框值 */
5
7
  value?: any
6
8
  /** 文本 */
@@ -1,4 +1,6 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
+
3
+ import type { FormFieldComponentProps } from './form-field'
2
4
 
3
5
  /** 富文本数据格式 */
4
6
  export type RichTextFormat = 'html' | 'json'
@@ -21,7 +23,7 @@ export type ToolbarItem =
21
23
  | '|'
22
24
 
23
25
  /** 富文本编辑器组件属性 */
24
- export interface RichTextEditorProps extends FormComponentProps {
26
+ export interface RichTextEditorProps extends FormFieldComponentProps {
25
27
  modelValue?: string
26
28
  /** 数据格式:html 或 json */
27
29
  format?: RichTextFormat
@@ -1,8 +1,10 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
2
  import type { CSSProperties, ShallowRef } from 'vue'
3
3
 
4
+ import type { FormFieldComponentProps } from './form-field'
5
+
4
6
  /** 选择器组件属性 */
5
- export interface SelectProps extends FormComponentProps {
7
+ export interface SelectProps extends FormFieldComponentProps {
6
8
  /** 绑定值 */
7
9
  modelValue?: any
8
10
  /** 文本内容 */
@@ -1,7 +1,9 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
+
3
+ import type { FormFieldComponentProps } from './form-field'
2
4
 
3
5
  /** 滑块组件属性 */
4
- export interface SliderProps<T extends number | [number, number]> extends FormComponentProps {
6
+ export interface SliderProps<T extends number | [number, number]> extends FormFieldComponentProps {
5
7
  modelValue?: T
6
8
  /**
7
9
  * 最小值
@@ -1,7 +1,9 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
+
3
+ import type { FormFieldComponentProps } from './form-field'
2
4
 
3
5
  /** 开关组件属性 */
4
- export interface SwitchProps extends FormComponentProps {
6
+ export interface SwitchProps extends FormFieldComponentProps {
5
7
  /** 开关状态 */
6
8
  modelValue?: boolean
7
9
  /** 打开时显示的文字 */
@@ -1,4 +1,6 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
+
3
+ import type { FormFieldComponentProps } from './form-field'
2
4
 
3
5
  /** text-editor组件属性 */
4
6
  export interface BarType {
@@ -6,7 +8,7 @@ export interface BarType {
6
8
  bar: string
7
9
  }
8
10
 
9
- export interface TextEditorProps extends FormComponentProps {
11
+ export interface TextEditorProps extends FormFieldComponentProps {
10
12
  modelValue?: string
11
13
  placeholder?: string
12
14
  toolbar?: BarType[]
@@ -1,7 +1,9 @@
1
- import type { DeconstructValue, FormComponentProps } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
+
3
+ import type { FormFieldComponentProps } from './form-field'
2
4
 
3
5
  /** textarea组件属性 */
4
- export interface TextareaProps extends FormComponentProps {
6
+ export interface TextareaProps extends FormFieldComponentProps {
5
7
  /**
6
8
  * 文本域的值
7
9
  */
@@ -1,11 +1,14 @@
1
- import type { FormComponentProps, DeconstructValue } from '@veltra/utils'
1
+ import type { DeconstructValue } from '@veltra/utils'
2
2
  import type { CSSProperties } from 'vue'
3
3
 
4
+ import type { FormFieldComponentProps } from './form-field'
4
5
  import type { TreeProps } from './tree'
5
6
 
6
7
  /** 树形选择器组件属性 */
7
8
  export interface TreeSelectProps
8
- extends FormComponentProps, Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
9
+ extends
10
+ FormFieldComponentProps,
11
+ Omit<TreeProps, 'selected' | 'checked' | 'selectable' | 'checkable'> {
9
12
  modelValue?: string | number
10
13
 
11
14
  /** 自定义占位文字 */
@@ -1,73 +0,0 @@
1
- import { DataSettingConfig, FormModelField } from "../../types/form.js";
2
- //#region src/components/form/dynamic-form-model.d.ts
3
- /**
4
- * 动态表单模型
5
- */
6
- declare class DynamicFormModel {
7
- /** 表单数据 */
8
- private _data;
9
- set data(v: Record<string, any>);
10
- get data(): Record<string, any>;
11
- /** 表单规则 */
12
- readonly fields: Record<string, FormModelField>;
13
- private flatFields;
14
- private validator;
15
- /**
16
- * 不同表单对应的key
17
- */
18
- formKeys: Map<number, string[]>;
19
- readonly errors: Map<string, string[] | undefined>;
20
- /**
21
- * 是否在表单值更新时校验
22
- */
23
- private validateOnFieldChange;
24
- private modelChangeCallback;
25
- private _allKeys;
26
- /** 所有的键 */
27
- get allKeys(): string[];
28
- private updateFlatFields;
29
- private getAllKeys;
30
- /** 初始数据 */
31
- readonly initialData: Record<string, any>;
32
- /**
33
- * 变更前的值
34
- */
35
- private readonly oldData;
36
- constructor(fields?: Record<string, FormModelField>);
37
- private watchData;
38
- append(fields: Record<string, FormModelField>): void;
39
- /**
40
- * 添加字段
41
- * @param field 字段
42
- * @param item 字段配置项
43
- */
44
- add(field: string, item: FormModelField): void;
45
- /**
46
- * 移除字段
47
- * @param field 字段
48
- */
49
- delete(field: string): void;
50
- /**
51
- * 监听值变更
52
- * @param cb 回调
53
- */
54
- onChange(cb: (field: string, val: any) => void): void;
55
- offChange(cb: (field: string, val: any) => void): void;
56
- validate(fields?: string | string[]): Promise<boolean>;
57
- private getValidateFields;
58
- /**
59
- * 重置数据
60
- * @param fields 需要重置的字段
61
- */
62
- resetData(keys?: string | string[]): void;
63
- /**
64
- * 设置值
65
- * @param formData 表单值
66
- * @param options 配置
67
- */
68
- setData(formData: Record<string, any>, config?: DataSettingConfig): void;
69
- clearValidate(): void;
70
- }
71
- //#endregion
72
- export { DynamicFormModel };
73
- //# sourceMappingURL=dynamic-form-model.d.ts.map
@@ -1,184 +0,0 @@
1
- import { isReactive, reactive, shallowReactive, watch } from "vue";
2
- import { Validator } from "@veltra/utils";
3
- import { o } from "@cat-kit/core";
4
- //#region src/components/form/dynamic-form-model.ts
5
- function flattenFields(fields, prefix = "") {
6
- const result = {};
7
- for (const key in fields) {
8
- const item = fields[key];
9
- const fullPath = prefix ? `${prefix}.${key}` : key;
10
- if (item && typeof item === "object" && "__isNested" in item && item.__isNested) Object.assign(result, flattenFields(item.fields, fullPath));
11
- else result[fullPath] = item;
12
- }
13
- return result;
14
- }
15
- /**
16
- * 动态表单模型
17
- */
18
- var DynamicFormModel = class {
19
- /** 表单数据 */
20
- _data = reactive({});
21
- set data(v) {
22
- if (!isReactive(v)) {
23
- console.error(`data不是一个响应式对象`);
24
- return;
25
- }
26
- this._data = v;
27
- this.watchData();
28
- }
29
- get data() {
30
- return this._data;
31
- }
32
- /** 表单规则 */
33
- fields = shallowReactive({});
34
- flatFields;
35
- validator;
36
- /**
37
- * 不同表单对应的key
38
- */
39
- formKeys = /* @__PURE__ */ new Map();
40
- errors = shallowReactive(/* @__PURE__ */ new Map());
41
- /**
42
- * 是否在表单值更新时校验
43
- */
44
- validateOnFieldChange = true;
45
- modelChangeCallback = /* @__PURE__ */ new Set();
46
- _allKeys = [];
47
- /** 所有的键 */
48
- get allKeys() {
49
- return this._allKeys;
50
- }
51
- updateFlatFields() {
52
- for (const key in this.flatFields) delete this.flatFields[key];
53
- const flatted = flattenFields(this.fields);
54
- Object.assign(this.flatFields, flatted);
55
- this.getAllKeys();
56
- }
57
- getAllKeys() {
58
- this._allKeys = Object.keys(this.flatFields);
59
- }
60
- /** 初始数据 */
61
- initialData = {};
62
- /**
63
- * 变更前的值
64
- */
65
- oldData = {};
66
- constructor(fields) {
67
- this.flatFields = shallowReactive({});
68
- this.validator = new Validator(this.flatFields);
69
- this.append(fields ?? {});
70
- this.watchData();
71
- }
72
- watchData() {
73
- const { oldData } = this;
74
- watch(this.data, (data) => {
75
- let changedKeys = [];
76
- this.allKeys.forEach((key) => {
77
- const oldVal = o(oldData).get(key);
78
- const newVal = o(data).get(key);
79
- if (oldVal !== newVal) {
80
- this.modelChangeCallback.forEach((cb) => cb(key, newVal));
81
- changedKeys.push(key);
82
- o(oldData).set(key, newVal);
83
- }
84
- });
85
- if (this.validateOnFieldChange) this.validate(changedKeys);
86
- else this.validateOnFieldChange = true;
87
- });
88
- }
89
- append(fields) {
90
- for (const key in fields) this.add(key, fields[key]);
91
- }
92
- /**
93
- * 添加字段
94
- * @param field 字段
95
- * @param item 字段配置项
96
- */
97
- add(field, item) {
98
- this.fields[field] = item;
99
- const flatItem = flattenFields({ [field]: item });
100
- for (const key in flatItem) {
101
- const { value } = flatItem[key];
102
- const v = typeof value === "function" ? value() : value;
103
- if (v !== void 0) o(this.initialData).set(key, JSON.parse(JSON.stringify(v)));
104
- o(this.data).set(key, v);
105
- o(this.oldData).set(key, v);
106
- }
107
- this.updateFlatFields();
108
- }
109
- /**
110
- * 移除字段
111
- * @param field 字段
112
- */
113
- delete(field) {
114
- delete this.fields[field];
115
- this.updateFlatFields();
116
- }
117
- /**
118
- * 监听值变更
119
- * @param cb 回调
120
- */
121
- onChange(cb) {
122
- this.modelChangeCallback.add(cb);
123
- }
124
- offChange(cb) {
125
- this.modelChangeCallback.delete(cb);
126
- }
127
- async validate(fields) {
128
- const { errors, validator, data } = this;
129
- const results = await validator.validate(data, this.getValidateFields(fields));
130
- if (!fields) {
131
- errors.clear();
132
- for (const field in results) errors.set(field, results[field]);
133
- } else ~(Array.isArray(fields) ? fields : [fields]).forEach((field) => {
134
- const errs = results[field];
135
- if (errs?.length) errors.set(field, errs);
136
- else errors.delete(field);
137
- });
138
- return errors.size === 0;
139
- }
140
- getValidateFields(fields) {
141
- if (!fields) if (this.formKeys.size) {
142
- let _fields = [];
143
- this.formKeys.forEach((fields) => {
144
- _fields = _fields.concat(fields);
145
- });
146
- return _fields;
147
- } else return this.allKeys;
148
- if (!Array.isArray(fields)) return [fields];
149
- return fields;
150
- }
151
- /**
152
- * 重置数据
153
- * @param fields 需要重置的字段
154
- */
155
- resetData(keys) {
156
- if (typeof keys === "string") keys = [keys];
157
- else if (Array.isArray(keys)) {} else keys = this.allKeys;
158
- this.clearValidate();
159
- this.validateOnFieldChange = false;
160
- keys.forEach((field) => {
161
- o(this.data).set(field, o(this.initialData).get(field));
162
- });
163
- }
164
- /**
165
- * 设置值
166
- * @param formData 表单值
167
- * @param options 配置
168
- */
169
- setData(formData, config) {
170
- const { validate = true } = config || {};
171
- if (!validate) this.validateOnFieldChange = false;
172
- this.allKeys.forEach((key) => {
173
- const value = o(formData).get(key);
174
- if (value !== void 0) o(this.data).set(key, value);
175
- });
176
- }
177
- clearValidate() {
178
- this.errors.clear();
179
- }
180
- };
181
- //#endregion
182
- export { DynamicFormModel };
183
-
184
- //# sourceMappingURL=dynamic-form-model.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"dynamic-form-model.js","names":[],"sources":["../../../src/components/form/dynamic-form-model.ts"],"sourcesContent":["import { o } from '@cat-kit/core'\nimport { Validator } from '@veltra/utils'\nimport { isReactive, reactive, shallowReactive, watch } from 'vue'\n\nimport type { FormModelField, FormModelItem, DataSettingConfig } from '../../types'\n\nfunction flattenFields(fields: Record<string, any>, prefix = ''): Record<string, FormModelItem> {\n const result: Record<string, FormModelItem> = {}\n for (const key in fields) {\n const item = fields[key]\n const fullPath = prefix ? `${prefix}.${key}` : key\n if (item && typeof item === 'object' && '__isNested' in item && item.__isNested) {\n Object.assign(result, flattenFields((item as any).fields, fullPath))\n } else {\n result[fullPath] = item\n }\n }\n return result\n}\n\n/**\n * 动态表单模型\n */\nexport class DynamicFormModel {\n /** 表单数据 */\n private _data: Record<string, any> = reactive({})\n\n set data(v: Record<string, any>) {\n if (!isReactive(v)) {\n console.error(`data不是一个响应式对象`)\n return\n }\n this._data = v\n this.watchData()\n }\n\n get data() {\n return this._data\n }\n\n /** 表单规则 */\n readonly fields: Record<string, FormModelField> = shallowReactive(\n {} as Record<string, FormModelField>\n )\n\n private flatFields: Record<string, FormModelItem>\n\n private validator: Validator\n\n /**\n * 不同表单对应的key\n */\n formKeys: Map<number, string[]> = new Map()\n\n readonly errors: Map<string, string[] | undefined> = shallowReactive(new Map())\n\n /**\n * 是否在表单值更新时校验\n */\n private validateOnFieldChange = true\n\n private modelChangeCallback: Set<(fields: string, val: any) => void> = new Set()\n\n private _allKeys: string[] = []\n\n /** 所有的键 */\n get allKeys(): string[] {\n return this._allKeys\n }\n\n private updateFlatFields(): void {\n for (const key in this.flatFields) {\n delete this.flatFields[key]\n }\n const flatted = flattenFields(this.fields)\n Object.assign(this.flatFields, flatted)\n this.getAllKeys()\n }\n\n private getAllKeys(): void {\n this._allKeys = Object.keys(this.flatFields)\n }\n\n /** 初始数据 */\n readonly initialData: Record<string, any> = {}\n\n /**\n * 变更前的值\n */\n private readonly oldData: Record<string, any> = {}\n\n constructor(fields?: Record<string, FormModelField>) {\n this.flatFields = shallowReactive({} as Record<string, FormModelItem>)\n this.validator = new Validator(this.flatFields)\n this.append(fields ?? {})\n this.watchData()\n }\n\n private watchData(): void {\n const { oldData } = this\n watch(this.data, (data) => {\n let changedKeys: string[] = []\n\n this.allKeys.forEach((key) => {\n const oldVal = o(oldData).get(key)\n const newVal = o(data).get(key)\n if (oldVal !== newVal) {\n this.modelChangeCallback.forEach((cb) => cb(key, newVal))\n changedKeys.push(key)\n o(oldData).set(key, newVal)\n }\n })\n\n if (this.validateOnFieldChange) {\n this.validate(changedKeys)\n } else {\n this.validateOnFieldChange = true\n }\n })\n }\n\n append(fields: Record<string, FormModelField>): void {\n for (const key in fields) {\n this.add(key, fields[key]!)\n }\n }\n\n /**\n * 添加字段\n * @param field 字段\n * @param item 字段配置项\n */\n add(field: string, item: FormModelField): void {\n this.fields[field] = item\n const flatItem = flattenFields({ [field]: item })\n for (const key in flatItem) {\n const fieldItem = flatItem[key]!\n const { value } = fieldItem\n const v = typeof value === 'function' ? value() : value\n if (v !== undefined) {\n o(this.initialData).set(key, JSON.parse(JSON.stringify(v)))\n }\n o(this.data).set(key, v)\n o(this.oldData).set(key, v)\n }\n this.updateFlatFields()\n }\n\n /**\n * 移除字段\n * @param field 字段\n */\n delete(field: string): void {\n delete this.fields[field]\n this.updateFlatFields()\n }\n\n /**\n * 监听值变更\n * @param cb 回调\n */\n onChange(cb: (field: string, val: any) => void): void {\n this.modelChangeCallback.add(cb)\n }\n\n offChange(cb: (field: string, val: any) => void): void {\n this.modelChangeCallback.delete(cb)\n }\n\n async validate(fields?: string | string[]): Promise<boolean> {\n const { errors, validator, data } = this\n\n const results = await validator.validate(data, this.getValidateFields(fields))\n\n // 设置错误提示\n if (!fields) {\n errors.clear()\n for (const field in results) {\n errors.set(field, results[field])\n }\n } else {\n ~(Array.isArray(fields) ? fields : [fields]).forEach((field) => {\n const errs = results[field]\n if (errs?.length) {\n errors.set(field, errs)\n } else {\n errors.delete(field)\n }\n })\n }\n\n return errors.size === 0\n }\n\n private getValidateFields(fields?: string | string[]) {\n if (!fields) {\n if (this.formKeys.size) {\n let _fields: string[] = []\n this.formKeys.forEach((fields) => {\n _fields = _fields.concat(fields)\n })\n return _fields\n } else {\n return this.allKeys\n }\n }\n\n if (!Array.isArray(fields)) {\n return [fields]\n }\n return fields\n }\n\n /**\n * 重置数据\n * @param fields 需要重置的字段\n */\n resetData(keys?: string | string[]): void {\n if (typeof keys === 'string') {\n keys = [keys]\n } else if (Array.isArray(keys)) {\n } else {\n keys = this.allKeys\n }\n\n this.clearValidate()\n\n this.validateOnFieldChange = false\n\n keys.forEach((field) => {\n o(this.data).set(field as string, o(this.initialData).get(field as string))\n })\n }\n\n /**\n * 设置值\n * @param formData 表单值\n * @param options 配置\n */\n setData(formData: Record<string, any>, config?: DataSettingConfig): void {\n const { validate = true } = config || {}\n\n if (!validate) {\n this.validateOnFieldChange = false\n }\n\n this.allKeys.forEach((key) => {\n const value = o(formData).get(key)\n if (value !== undefined) {\n o(this.data).set(key, value)\n }\n })\n }\n\n clearValidate(): void {\n this.errors.clear()\n }\n}\n"],"mappings":"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"}
@@ -1,73 +0,0 @@
1
- import { DataSettingConfig, FormModelField, IFormModel, ModelData } from "../../types/form.js";
2
- import { Reactive } from "vue";
3
-
4
- //#region src/components/form/form-model.d.ts
5
- /**
6
- * 表单模型
7
- */
8
- declare class FormModel<Fields extends Record<string, FormModelField> = Record<string, FormModelField>> implements IFormModel<Fields> {
9
- /** 表单数据 */
10
- data: ModelData<Fields>;
11
- /** 表单规则 */
12
- readonly fields: Fields;
13
- /** 所有的键 */
14
- readonly allKeys: string[];
15
- /**
16
- * 不同表单所需要校验的字段
17
- * @description
18
- * 这个值会在表单组件渲染时由表单设置,因为只有真正渲染的组件才应该被校验
19
- */
20
- formKeys: Map<number, string[]>;
21
- /** 初始数据 */
22
- readonly initialData: ModelData<Fields>;
23
- readonly errors: Map<string, string[] | undefined>;
24
- private validator;
25
- /**
26
- * 是否在表单值更新时校验
27
- */
28
- private validateOnFieldChange;
29
- private modelChangeCallback;
30
- constructor(fields: Fields);
31
- /**
32
- * 设置响应式值, 替换掉原有的数据
33
- * @description 设置响应式值时,会自动监听值的变化,并进行校验
34
- * @param proxyData 响应式的值
35
- */
36
- setProxyData(proxyData: ModelData<Fields> | Reactive<ModelData<Fields>>): void;
37
- private getValidateFields;
38
- /**
39
- * 模型校验
40
- * @param fields 需要校验的字段, 不传则校验所有字段
41
- * @returns
42
- */
43
- validate(fields?: string | string[]): Promise<boolean>;
44
- /**
45
- * 重置数据
46
- * @param fields 需要重置的字段
47
- */
48
- resetData(keys?: string | string[]): void;
49
- /**
50
- * 设置值
51
- * @param formData 表单值
52
- * @param options 配置
53
- */
54
- setData(formData: Partial<Record<string, any>>, config?: DataSettingConfig): FormModel<Fields>;
55
- /**
56
- * 设置初始值
57
- * @description 初始值在重置数据和查看原始数据时会用到
58
- * @param data 初始值
59
- */
60
- setInitialData(data: Partial<ModelData<Fields>>): FormModel<Fields>;
61
- /** 清除校验 */
62
- clearValidate(): void;
63
- /**
64
- * 监听值变更
65
- * @param cb 回调
66
- */
67
- onChange(cb: (field: string, val: any) => void): void;
68
- /** 关闭监听值变更 */
69
- offChange(cb: (field: string, val: any) => void): void;
70
- }
71
- //#endregion
72
- export { FormModel };
73
- //# sourceMappingURL=form-model.d.ts.map