@veltra/desktop 1.1.35 → 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.
- package/dist/components/action/action-group.vue.d.ts +2 -2
- package/dist/components/action/action.vue.d.ts +1 -1
- package/dist/components/auto-complete/auto-complete.js +1 -0
- package/dist/components/auto-complete/auto-complete.js.map +1 -1
- package/dist/components/batch-edit/batch-edit-form.js +12 -5
- package/dist/components/batch-edit/batch-edit-form.js.map +1 -1
- package/dist/components/batch-edit/batch-edit.js +8 -3
- package/dist/components/batch-edit/batch-edit.js.map +1 -1
- package/dist/components/batch-edit/batch-edit.vue.d.ts +40 -35
- package/dist/components/batch-edit/di.js.map +1 -1
- package/dist/components/batch-edit/use-edit.js +41 -23
- package/dist/components/batch-edit/use-edit.js.map +1 -1
- package/dist/components/cascade/cascade.js +1 -0
- package/dist/components/cascade/cascade.js.map +1 -1
- package/dist/components/cascade/cascade.vue.d.ts +5 -5
- package/dist/components/checkbox/checkbox-button.js +1 -0
- package/dist/components/checkbox/checkbox-button.js.map +1 -1
- package/dist/components/checkbox/checkbox-button.vue.d.ts +1 -1
- package/dist/components/checkbox/checkbox.js +1 -0
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.js +1 -0
- package/dist/components/checkbox-group/checkbox-group.js.map +1 -1
- package/dist/components/checkbox-group/checkbox-group.vue.d.ts +2 -2
- package/dist/components/code-editor/code-editor.js +1 -0
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/condition-editor/core/evaluator.js +3 -3
- package/dist/components/condition-editor/core/evaluator.js.map +1 -1
- package/dist/components/date-panel/date-panel.vue.d.ts +1 -1
- package/dist/components/date-picker/date-picker.js +1 -0
- package/dist/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/date-picker/date-picker.vue.d.ts +1 -1
- package/dist/components/date-range-picker/date-range-picker.js +2 -0
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.vue.d.ts +1 -1
- package/dist/components/dialog/use-maximum.js +7 -1
- package/dist/components/dialog/use-maximum.js.map +1 -1
- package/dist/components/empty/empty.vue.d.ts +1 -1
- package/dist/components/expression-editor/expression-editor.js +1 -0
- package/dist/components/expression-editor/expression-editor.js.map +1 -1
- package/dist/components/file-picker/file-picker.js +1 -0
- package/dist/components/file-picker/file-picker.js.map +1 -1
- package/dist/components/form/form.js.map +1 -1
- package/dist/components/form/form.vue.d.ts +11 -19
- package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js +24 -26
- package/dist/components/form/form.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/form/index.d.ts +0 -3
- package/dist/components/form/use-form-fields.js +88 -0
- package/dist/components/form/use-form-fields.js.map +1 -0
- package/dist/components/form/use-node-interceptor.js +19 -30
- package/dist/components/form/use-node-interceptor.js.map +1 -1
- package/dist/components/form-item/form-item.js.map +1 -1
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js +44 -18
- package/dist/components/form-item/form-item.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/form-item/helper.js +4 -1
- package/dist/components/form-item/helper.js.map +1 -1
- package/dist/components/form-item/validate.d.ts +26 -0
- package/dist/components/form-item/validate.js +97 -0
- package/dist/components/form-item/validate.js.map +1 -0
- package/dist/components/group-input/group-input.js +1 -0
- package/dist/components/group-input/group-input.js.map +1 -1
- package/dist/components/index.d.ts +0 -3
- package/dist/components/index.js +0 -7
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/components/input/input.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/loading/style2.css +90 -159
- package/dist/components/multi-select/multi-select.js +1 -0
- package/dist/components/multi-select/multi-select.js.map +1 -1
- package/dist/components/multi-select/multi-select.vue.d.ts +3 -3
- package/dist/components/multi-tree-select/multi-tree-select.js +1 -0
- package/dist/components/multi-tree-select/multi-tree-select.js.map +1 -1
- package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +4 -4
- package/dist/components/number-input/number-input.js +1 -0
- package/dist/components/number-input/number-input.js.map +1 -1
- package/dist/components/number-range-input/number-range-input.js +1 -0
- package/dist/components/number-range-input/number-range-input.js.map +1 -1
- package/dist/components/palette/palette.js +1 -0
- package/dist/components/palette/palette.js.map +1 -1
- package/dist/components/password-input/password-input.js +1 -0
- package/dist/components/password-input/password-input.js.map +1 -1
- package/dist/components/pop-confirm/pop-confirm.vue.d.ts +1 -1
- package/dist/components/radio/radio.js +1 -0
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/radio-group/radio-group.js +1 -0
- package/dist/components/radio-group/radio-group.js.map +1 -1
- package/dist/components/radio-group/radio-group.vue.d.ts +2 -2
- package/dist/components/rich-text-editor/rich-text-editor.js +3 -2
- package/dist/components/rich-text-editor/rich-text-editor.js.map +1 -1
- package/dist/components/rich-text-editor/toolbar.js +10 -7
- package/dist/components/rich-text-editor/toolbar.js.map +1 -1
- package/dist/components/select/select.js +6 -3
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/select/select.vue.d.ts +2 -2
- package/dist/components/slider/slider.js +15 -2
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/steps/steps.vue.d.ts +1 -1
- package/dist/components/switch/switch.js +1 -0
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/style2.css +4 -7
- package/dist/components/textarea/textarea.js +1 -0
- package/dist/components/textarea/textarea.js.map +1 -1
- package/dist/components/tip/tip.vue.d.ts +1 -1
- package/dist/components/tree-select/tree-select.js +1 -0
- package/dist/components/tree-select/tree-select.js.map +1 -1
- package/dist/components/tree-select/tree-select.vue.d.ts +4 -4
- package/dist/components/watermark/watermark.vue.d.ts +1 -1
- package/dist/index.d.ts +5 -6
- package/dist/index.js +1 -4
- package/dist/types/auto-complete.d.ts +3 -2
- package/dist/types/batch-edit.d.ts +4 -5
- package/dist/types/cascade.d.ts +3 -2
- package/dist/types/checkbox-group.d.ts +2 -2
- package/dist/types/checkbox.d.ts +4 -3
- package/dist/types/code-editor.d.ts +3 -2
- package/dist/types/date-picker.d.ts +3 -2
- package/dist/types/date-range-picker.d.ts +3 -2
- package/dist/types/expression-editor.d.ts +3 -2
- package/dist/types/file-picker.d.ts +3 -2
- package/dist/types/form-field.d.ts +12 -0
- package/dist/types/form-item.d.ts +2 -2
- package/dist/types/form.d.ts +9 -48
- package/dist/types/group-input.d.ts +3 -2
- package/dist/types/index.d.ts +4 -2
- package/dist/types/input.d.ts +3 -2
- package/dist/types/loading.d.ts +1 -1
- package/dist/types/multi-select.d.ts +3 -2
- package/dist/types/multi-tree-select.d.ts +3 -2
- package/dist/types/palette.d.ts +3 -2
- package/dist/types/radio-group.d.ts +3 -2
- package/dist/types/radio.d.ts +3 -2
- package/dist/types/rich-text-editor.d.ts +3 -2
- package/dist/types/select.d.ts +3 -2
- package/dist/types/slider.d.ts +3 -2
- package/dist/types/switch.d.ts +3 -2
- package/dist/types/text-editor.d.ts +3 -2
- package/dist/types/textarea.d.ts +3 -2
- package/dist/types/tree-select.d.ts +3 -2
- package/package.json +6 -6
- package/src/components/batch-edit/batch-edit-form.vue +20 -13
- package/src/components/batch-edit/batch-edit.vue +7 -8
- package/src/components/batch-edit/di.ts +1 -2
- package/src/components/batch-edit/use-edit.ts +58 -36
- package/src/components/date-range-picker/date-range-picker.vue +2 -0
- package/src/components/dialog/use-maximum.ts +8 -1
- package/src/components/form/form.vue +22 -38
- package/src/components/form/index.ts +0 -6
- package/src/components/form/use-form-fields.ts +126 -0
- package/src/components/form/use-node-interceptor.ts +27 -56
- package/src/components/form-item/form-item.vue +69 -18
- package/src/components/form-item/helper.ts +10 -4
- package/src/components/form-item/validate.ts +155 -0
- package/src/components/loading/style.scss +126 -355
- package/src/components/rich-text-editor/rich-text-editor.vue +28 -25
- package/src/components/rich-text-editor/toolbar.vue +23 -19
- package/src/components/select/select.vue +6 -4
- package/src/components/slider/slider.vue +12 -2
- package/src/components/table/style.scss +4 -14
- package/src/types/auto-complete.ts +4 -2
- package/src/types/batch-edit.ts +4 -5
- package/src/types/cascade.ts +4 -2
- package/src/types/checkbox-group.ts +2 -2
- package/src/types/checkbox.ts +5 -3
- package/src/types/code-editor.ts +4 -2
- package/src/types/date-picker.ts +4 -2
- package/src/types/date-range-picker.ts +4 -2
- package/src/types/expression-editor.ts +4 -2
- package/src/types/file-picker.ts +4 -2
- package/src/types/form-field.ts +11 -0
- package/src/types/form-item.ts +2 -2
- package/src/types/form.ts +9 -82
- package/src/types/group-input.ts +4 -2
- package/src/types/index.ts +1 -0
- package/src/types/input.ts +4 -2
- package/src/types/loading.ts +1 -1
- package/src/types/multi-select.ts +4 -2
- package/src/types/multi-tree-select.ts +5 -2
- package/src/types/palette.ts +4 -2
- package/src/types/radio-group.ts +4 -2
- package/src/types/radio.ts +4 -2
- package/src/types/rich-text-editor.ts +4 -2
- package/src/types/select.ts +4 -2
- package/src/types/slider.ts +4 -2
- package/src/types/switch.ts +4 -2
- package/src/types/text-editor.ts +4 -2
- package/src/types/textarea.ts +4 -2
- package/src/types/tree-select.ts +5 -2
- package/dist/components/form/dynamic-form-model.d.ts +0 -73
- package/dist/components/form/dynamic-form-model.js +0 -184
- package/dist/components/form/dynamic-form-model.js.map +0 -1
- package/dist/components/form/form-model.d.ts +0 -73
- package/dist/components/form/form-model.js +0 -179
- package/dist/components/form/form-model.js.map +0 -1
- package/dist/components/form/helper.d.ts +0 -16
- package/dist/components/form/helper.js +0 -20
- package/dist/components/form/helper.js.map +0 -1
- package/src/components/form/__test__/form-model.test.ts +0 -190
- package/src/components/form/dynamic-form-model.ts +0 -258
- package/src/components/form/form-model.ts +0 -255
- package/src/components/form/helper.ts +0 -23
|
@@ -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
|
|
@@ -1,179 +0,0 @@
|
|
|
1
|
-
import { nextTick, reactive, shallowReactive, watch } from "vue";
|
|
2
|
-
import { Validator, middleProxy } from "@veltra/utils";
|
|
3
|
-
import { o } from "@cat-kit/core";
|
|
4
|
-
//#region src/components/form/form-model.ts
|
|
5
|
-
/**
|
|
6
|
-
* 递归展平字段逻辑
|
|
7
|
-
*/
|
|
8
|
-
function flattenFields(fields, prefix = "") {
|
|
9
|
-
const result = {};
|
|
10
|
-
for (const key in fields) {
|
|
11
|
-
const item = fields[key];
|
|
12
|
-
const fullPath = prefix ? `${prefix}.${key}` : key;
|
|
13
|
-
if (item && typeof item === "object" && "__isNested" in item && item.__isNested) Object.assign(result, flattenFields(item.fields, fullPath));
|
|
14
|
-
else result[fullPath] = item;
|
|
15
|
-
}
|
|
16
|
-
return result;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* 表单模型
|
|
20
|
-
*/
|
|
21
|
-
var FormModel = class {
|
|
22
|
-
/** 表单数据 */
|
|
23
|
-
data;
|
|
24
|
-
/** 表单规则 */
|
|
25
|
-
fields;
|
|
26
|
-
/** 所有的键 */
|
|
27
|
-
allKeys;
|
|
28
|
-
/**
|
|
29
|
-
* 不同表单所需要校验的字段
|
|
30
|
-
* @description
|
|
31
|
-
* 这个值会在表单组件渲染时由表单设置,因为只有真正渲染的组件才应该被校验
|
|
32
|
-
*/
|
|
33
|
-
formKeys = /* @__PURE__ */ new Map();
|
|
34
|
-
/** 初始数据 */
|
|
35
|
-
initialData;
|
|
36
|
-
errors = shallowReactive(/* @__PURE__ */ new Map());
|
|
37
|
-
validator;
|
|
38
|
-
/**
|
|
39
|
-
* 是否在表单值更新时校验
|
|
40
|
-
*/
|
|
41
|
-
validateOnFieldChange = true;
|
|
42
|
-
modelChangeCallback = /* @__PURE__ */ new Set();
|
|
43
|
-
constructor(fields) {
|
|
44
|
-
this.fields = fields;
|
|
45
|
-
const flatFields = flattenFields(fields);
|
|
46
|
-
const rawData = {};
|
|
47
|
-
const allKeys = [];
|
|
48
|
-
for (const key in flatFields) {
|
|
49
|
-
const fieldItem = flatFields[key];
|
|
50
|
-
allKeys.push(key);
|
|
51
|
-
const { value } = fieldItem;
|
|
52
|
-
let v = value;
|
|
53
|
-
if (typeof value === "function") {
|
|
54
|
-
watch(value, (v) => {
|
|
55
|
-
o(this.initialData).set(key, v);
|
|
56
|
-
});
|
|
57
|
-
v = value();
|
|
58
|
-
}
|
|
59
|
-
o(rawData).set(key, v);
|
|
60
|
-
}
|
|
61
|
-
this.allKeys = allKeys;
|
|
62
|
-
this.initialData = JSON.parse(JSON.stringify(rawData));
|
|
63
|
-
this.setProxyData(reactive(rawData));
|
|
64
|
-
this.validator = new Validator(flatFields);
|
|
65
|
-
return shallowReactive(this);
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* 设置响应式值, 替换掉原有的数据
|
|
69
|
-
* @description 设置响应式值时,会自动监听值的变化,并进行校验
|
|
70
|
-
* @param proxyData 响应式的值
|
|
71
|
-
*/
|
|
72
|
-
setProxyData(proxyData) {
|
|
73
|
-
const data = middleProxy(proxyData, {
|
|
74
|
-
set: (field, val) => {
|
|
75
|
-
this.modelChangeCallback.forEach((cb) => cb(field, val));
|
|
76
|
-
},
|
|
77
|
-
changed: (fields) => {
|
|
78
|
-
if (!this.validateOnFieldChange) {
|
|
79
|
-
this.validateOnFieldChange = true;
|
|
80
|
-
return;
|
|
81
|
-
}
|
|
82
|
-
this.validate(fields);
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
this.data = data;
|
|
86
|
-
}
|
|
87
|
-
getValidateFields(fields) {
|
|
88
|
-
if (!fields) if (this.formKeys.size) {
|
|
89
|
-
let _fields = [];
|
|
90
|
-
this.formKeys.forEach((keys) => {
|
|
91
|
-
_fields = _fields.concat(keys);
|
|
92
|
-
});
|
|
93
|
-
return _fields;
|
|
94
|
-
} else return this.allKeys;
|
|
95
|
-
if (!Array.isArray(fields)) return [fields];
|
|
96
|
-
return fields;
|
|
97
|
-
}
|
|
98
|
-
/**
|
|
99
|
-
* 模型校验
|
|
100
|
-
* @param fields 需要校验的字段, 不传则校验所有字段
|
|
101
|
-
* @returns
|
|
102
|
-
*/
|
|
103
|
-
async validate(fields) {
|
|
104
|
-
const { errors, validator, data } = this;
|
|
105
|
-
const results = await validator.validate(data, this.getValidateFields(fields));
|
|
106
|
-
if (!fields) {
|
|
107
|
-
errors.clear();
|
|
108
|
-
for (const field in results) errors.set(field, results[field]);
|
|
109
|
-
} else ~(Array.isArray(fields) ? fields : [fields]).forEach((field) => {
|
|
110
|
-
const errs = results[field];
|
|
111
|
-
if (errs?.length) errors.set(field, errs);
|
|
112
|
-
else errors.delete(field);
|
|
113
|
-
});
|
|
114
|
-
if (errors.size > 0) {
|
|
115
|
-
if (!fields) nextTick(() => {
|
|
116
|
-
document.querySelector(".u-form-item.is-error")?.scrollIntoView({ block: "nearest" });
|
|
117
|
-
});
|
|
118
|
-
return Promise.reject(false);
|
|
119
|
-
}
|
|
120
|
-
return true;
|
|
121
|
-
}
|
|
122
|
-
/**
|
|
123
|
-
* 重置数据
|
|
124
|
-
* @param fields 需要重置的字段
|
|
125
|
-
*/
|
|
126
|
-
resetData(keys) {
|
|
127
|
-
if (typeof keys === "string") keys = [keys];
|
|
128
|
-
else if (Array.isArray(keys)) {} else keys = this.allKeys;
|
|
129
|
-
this.clearValidate();
|
|
130
|
-
this.validateOnFieldChange = false;
|
|
131
|
-
keys.forEach((field) => {
|
|
132
|
-
o(this.data).set(field, o(this.initialData).get(field));
|
|
133
|
-
});
|
|
134
|
-
}
|
|
135
|
-
/**
|
|
136
|
-
* 设置值
|
|
137
|
-
* @param formData 表单值
|
|
138
|
-
* @param options 配置
|
|
139
|
-
*/
|
|
140
|
-
setData(formData, config) {
|
|
141
|
-
const { validate = true } = config || {};
|
|
142
|
-
if (!validate) this.validateOnFieldChange = false;
|
|
143
|
-
this.allKeys.forEach((key) => {
|
|
144
|
-
const value = o(formData).get(key);
|
|
145
|
-
if (value !== void 0) o(this.data).set(key, value);
|
|
146
|
-
});
|
|
147
|
-
return this;
|
|
148
|
-
}
|
|
149
|
-
/**
|
|
150
|
-
* 设置初始值
|
|
151
|
-
* @description 初始值在重置数据和查看原始数据时会用到
|
|
152
|
-
* @param data 初始值
|
|
153
|
-
*/
|
|
154
|
-
setInitialData(data) {
|
|
155
|
-
this.allKeys.forEach((key) => {
|
|
156
|
-
o(this.initialData).set(key, o(data).get(key));
|
|
157
|
-
});
|
|
158
|
-
return this;
|
|
159
|
-
}
|
|
160
|
-
/** 清除校验 */
|
|
161
|
-
clearValidate() {
|
|
162
|
-
this.errors.clear();
|
|
163
|
-
}
|
|
164
|
-
/**
|
|
165
|
-
* 监听值变更
|
|
166
|
-
* @param cb 回调
|
|
167
|
-
*/
|
|
168
|
-
onChange(cb) {
|
|
169
|
-
this.modelChangeCallback.add(cb);
|
|
170
|
-
}
|
|
171
|
-
/** 关闭监听值变更 */
|
|
172
|
-
offChange(cb) {
|
|
173
|
-
this.modelChangeCallback.delete(cb);
|
|
174
|
-
}
|
|
175
|
-
};
|
|
176
|
-
//#endregion
|
|
177
|
-
export { FormModel };
|
|
178
|
-
|
|
179
|
-
//# sourceMappingURL=form-model.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"form-model.js","names":[],"sources":["../../../src/components/form/form-model.ts"],"sourcesContent":["import { o } from '@cat-kit/core'\nimport { middleProxy, Validator } from '@veltra/utils'\nimport { nextTick, reactive, shallowReactive, watch, type Reactive } from 'vue'\n\nimport type {\n ModelData,\n DataSettingConfig,\n IFormModel,\n FormModelItem,\n FormModelField\n} from '../../types'\n\n/**\n * 递归展平字段逻辑\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 FormModel<\n Fields extends Record<string, FormModelField> = Record<string, FormModelField>\n> implements IFormModel<Fields> {\n /** 表单数据 */\n data!: ModelData<Fields>\n\n /** 表单规则 */\n readonly fields: Fields\n\n /** 所有的键 */\n readonly allKeys: string[]\n\n /**\n * 不同表单所需要校验的字段\n * @description\n * 这个值会在表单组件渲染时由表单设置,因为只有真正渲染的组件才应该被校验\n */\n formKeys: Map<number, string[]> = new Map()\n\n /** 初始数据 */\n readonly initialData: ModelData<Fields>\n\n readonly errors: Map<string, string[] | undefined> = shallowReactive(new Map())\n\n private validator: Validator<Record<string, FormModelItem>>\n\n /**\n * 是否在表单值更新时校验\n */\n private validateOnFieldChange = true\n\n private modelChangeCallback: Set<(fields: string, val: any) => void> = new Set()\n\n constructor(fields: Fields) {\n this.fields = fields\n const flatFields = flattenFields(fields)\n const rawData = {} as ModelData<Fields>\n const allKeys: string[] = []\n\n for (const key in flatFields) {\n const fieldItem = flatFields[key]!\n allKeys.push(key)\n const { value } = fieldItem\n let v = value\n\n if (typeof value === 'function') {\n watch(value, (v) => {\n o(this.initialData).set(key, v)\n })\n v = value()\n }\n\n o(rawData).set(key, v)\n }\n\n this.allKeys = allKeys\n this.initialData = JSON.parse(JSON.stringify(rawData))\n\n this.setProxyData(reactive(rawData))\n\n this.validator = new Validator(flatFields)\n\n return shallowReactive(this)\n }\n\n /**\n * 设置响应式值, 替换掉原有的数据\n * @description 设置响应式值时,会自动监听值的变化,并进行校验\n * @param proxyData 响应式的值\n */\n setProxyData(proxyData: ModelData<Fields> | Reactive<ModelData<Fields>>): void {\n const data = middleProxy(proxyData, {\n set: (field, val) => {\n this.modelChangeCallback.forEach((cb) => cb(field, val))\n },\n\n changed: (fields) => {\n if (!this.validateOnFieldChange) {\n this.validateOnFieldChange = true\n return\n }\n this.validate(fields as any)\n }\n })\n\n this.data = data as ModelData<Fields>\n }\n\n private getValidateFields(fields?: string | string[]) {\n if (!fields) {\n if (this.formKeys.size) {\n let _fields: string[] = []\n this.formKeys.forEach((keys) => {\n _fields = _fields.concat(keys)\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 * @returns\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\n for (const field in results) {\n errors.set(field as any, results[field])\n }\n }\n // 局部校验\n else {\n ~(Array.isArray(fields) ? fields : [fields]).forEach((field) => {\n const errs = results[field as string]\n if (errs?.length) {\n errors.set(field, errs)\n } else {\n errors.delete(field)\n }\n })\n }\n\n if (errors.size > 0) {\n if (!fields) {\n nextTick(() => {\n document.querySelector('.u-form-item.is-error')?.scrollIntoView({ block: 'nearest' })\n })\n }\n return Promise.reject(false)\n }\n\n return true\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: Partial<Record<string, any>>, config?: DataSettingConfig): FormModel<Fields> {\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 return this\n }\n\n /**\n * 设置初始值\n * @description 初始值在重置数据和查看原始数据时会用到\n * @param data 初始值\n */\n setInitialData(data: Partial<ModelData<Fields>>): FormModel<Fields> {\n this.allKeys.forEach((key) => {\n o(this.initialData).set(key, o(data).get(key))\n })\n\n return this\n }\n\n /** 清除校验 */\n clearValidate(): void {\n this.errors.clear()\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 /** 关闭监听值变更 */\n offChange(cb: (field: string, val: any) => void): void {\n this.modelChangeCallback.delete(cb)\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { FormModelItem } from "../../types/form.js";
|
|
2
|
-
//#region src/components/form/helper.d.ts
|
|
3
|
-
/**
|
|
4
|
-
* 定义表单项
|
|
5
|
-
* @param item 表单项
|
|
6
|
-
* @returns
|
|
7
|
-
*/
|
|
8
|
-
declare function formField<Val = unknown>(item?: FormModelItem<Val>): FormModelItem<Val>;
|
|
9
|
-
interface NestedFieldMarker<T extends Record<string, any> = Record<string, any>> {
|
|
10
|
-
__isNested: true;
|
|
11
|
-
fields: T;
|
|
12
|
-
}
|
|
13
|
-
declare function nestField<T extends Record<string, any>>(fields: T): NestedFieldMarker<T>;
|
|
14
|
-
//#endregion
|
|
15
|
-
export { NestedFieldMarker, formField, nestField };
|
|
16
|
-
//# sourceMappingURL=helper.d.ts.map
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
//#region src/components/form/helper.ts
|
|
2
|
-
/**
|
|
3
|
-
* 定义表单项
|
|
4
|
-
* @param item 表单项
|
|
5
|
-
* @returns
|
|
6
|
-
*/
|
|
7
|
-
function formField(item) {
|
|
8
|
-
if (!item) return {};
|
|
9
|
-
return item;
|
|
10
|
-
}
|
|
11
|
-
function nestField(fields) {
|
|
12
|
-
return {
|
|
13
|
-
__isNested: true,
|
|
14
|
-
fields
|
|
15
|
-
};
|
|
16
|
-
}
|
|
17
|
-
//#endregion
|
|
18
|
-
export { formField, nestField };
|
|
19
|
-
|
|
20
|
-
//# sourceMappingURL=helper.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"helper.js","names":[],"sources":["../../../src/components/form/helper.ts"],"sourcesContent":["import type { FormModelItem } from '../../types'\n\n/**\n * 定义表单项\n * @param item 表单项\n * @returns\n */\nexport function formField<Val = unknown>(item?: FormModelItem<Val>): FormModelItem<Val> {\n if (!item) {\n return {}\n }\n\n return item\n}\n\nexport interface NestedFieldMarker<T extends Record<string, any> = Record<string, any>> {\n __isNested: true\n fields: T\n}\n\nexport function nestField<T extends Record<string, any>>(fields: T): NestedFieldMarker<T> {\n return { __isNested: true, fields }\n}\n"],"mappings":";;;;;;AAOA,SAAgB,UAAyB,MAA+C;CACtF,IAAI,CAAC,MACH,OAAO,CAAC;CAGV,OAAO;AACT;AAOA,SAAgB,UAAyC,QAAiC;CACxF,OAAO;EAAE,YAAY;EAAM;CAAO;AACpC"}
|