@tmagic/form 1.0.0-rc.1 → 1.0.0-rc.10
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/tmagic-form.es.js +53 -19
- package/dist/tmagic-form.es.js.map +1 -1
- package/dist/tmagic-form.umd.js +54 -20
- package/dist/tmagic-form.umd.js.map +1 -1
- package/dist/types/src/fields/DynamicField.vue.d.ts +2 -2
- package/dist/types/src/index.d.ts +1 -1
- package/dist/types/src/schema.d.ts +8 -0
- package/package.json +10 -14
- package/src/containers/Container.vue +15 -2
- package/src/containers/Table.vue +1 -1
- package/src/containers/Tabs.vue +13 -5
- package/src/fields/Daterange.vue +8 -0
- package/src/fields/Select.vue +3 -0
- package/src/schema.ts +8 -0
- package/src/utils/form.ts +2 -0
- package/LICENSE +0 -5432
- package/coverage/clover.xml +0 -1360
- package/coverage/coverage-final.json +0 -38
- package/coverage/lcov-report/base.css +0 -224
- package/coverage/lcov-report/block-navigation.js +0 -87
- package/coverage/lcov-report/favicon.png +0 -0
- package/coverage/lcov-report/index.html +0 -176
- package/coverage/lcov-report/prettify.css +0 -1
- package/coverage/lcov-report/prettify.js +0 -2
- package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
- package/coverage/lcov-report/sorter.js +0 -196
- package/coverage/lcov-report/src/Form.vue.html +0 -676
- package/coverage/lcov-report/src/FormDialog.vue.html +0 -583
- package/coverage/lcov-report/src/containers/Col.vue.html +0 -253
- package/coverage/lcov-report/src/containers/Container.vue.html +0 -925
- package/coverage/lcov-report/src/containers/Fieldset.vue.html +0 -499
- package/coverage/lcov-report/src/containers/GroupList.vue.html +0 -541
- package/coverage/lcov-report/src/containers/GroupListItem.vue.html +0 -562
- package/coverage/lcov-report/src/containers/Panel.vue.html +0 -403
- package/coverage/lcov-report/src/containers/Row.vue.html +0 -277
- package/coverage/lcov-report/src/containers/Step.vue.html +0 -331
- package/coverage/lcov-report/src/containers/Table.vue.html +0 -1987
- package/coverage/lcov-report/src/containers/Tabs.vue.html +0 -625
- package/coverage/lcov-report/src/containers/index.html +0 -251
- package/coverage/lcov-report/src/fields/Cascader.vue.html +0 -526
- package/coverage/lcov-report/src/fields/Checkbox.vue.html +0 -286
- package/coverage/lcov-report/src/fields/CheckboxGroup.vue.html +0 -217
- package/coverage/lcov-report/src/fields/ColorPicker.vue.html +0 -199
- package/coverage/lcov-report/src/fields/Date.vue.html +0 -238
- package/coverage/lcov-report/src/fields/DateTime.vue.html +0 -262
- package/coverage/lcov-report/src/fields/Daterange.vue.html +0 -310
- package/coverage/lcov-report/src/fields/Display.vue.html +0 -187
- package/coverage/lcov-report/src/fields/DynamicField.vue.html +0 -412
- package/coverage/lcov-report/src/fields/Hidden.vue.html +0 -172
- package/coverage/lcov-report/src/fields/Link.vue.html +0 -421
- package/coverage/lcov-report/src/fields/Number.vue.html +0 -244
- package/coverage/lcov-report/src/fields/RadioGroup.vue.html +0 -184
- package/coverage/lcov-report/src/fields/Select.vue.html +0 -1243
- package/coverage/lcov-report/src/fields/Switch.vue.html +0 -280
- package/coverage/lcov-report/src/fields/Text.vue.html +0 -487
- package/coverage/lcov-report/src/fields/Textarea.vue.html +0 -265
- package/coverage/lcov-report/src/fields/Time.vue.html +0 -229
- package/coverage/lcov-report/src/fields/index.html +0 -371
- package/coverage/lcov-report/src/index.html +0 -146
- package/coverage/lcov-report/src/index.ts.html +0 -466
- package/coverage/lcov-report/src/theme/index.html +0 -116
- package/coverage/lcov-report/src/theme/index.scss.html +0 -112
- package/coverage/lcov-report/src/utils/config.ts.html +0 -166
- package/coverage/lcov-report/src/utils/createForm.ts.html +0 -160
- package/coverage/lcov-report/src/utils/fieldProps.ts.html +0 -202
- package/coverage/lcov-report/src/utils/form.ts.html +0 -895
- package/coverage/lcov-report/src/utils/index.html +0 -176
- package/coverage/lcov-report/src/utils/useAddField.ts.html +0 -205
- package/coverage/lcov.info +0 -3061
- package/dist/types/src/Form.vue.d.ts +0 -362
- package/dist/types/src/FormDialog.vue.d.ts +0 -757
- package/dist/types/src/containers/Table.vue.d.ts +0 -2601
- package/dist/types/src/fields/Link.vue.d.ts +0 -1596
|
@@ -34,10 +34,10 @@ declare const _default: DefineComponent<{
|
|
|
34
34
|
}, {
|
|
35
35
|
request: Function;
|
|
36
36
|
fieldMap: {
|
|
37
|
-
[
|
|
37
|
+
[key: string]: any;
|
|
38
38
|
};
|
|
39
39
|
fieldLabelMap: {
|
|
40
|
-
[
|
|
40
|
+
[key: string]: any;
|
|
41
41
|
};
|
|
42
42
|
unwatch: WatchStopHandle;
|
|
43
43
|
changeFieldMap: () => Promise<void>;
|
|
@@ -31,6 +31,6 @@ export { default as MSelect } from './fields/Select.vue';
|
|
|
31
31
|
export { default as MCascader } from './fields/Cascader.vue';
|
|
32
32
|
export { default as MDynamicField } from './fields/DynamicField.vue';
|
|
33
33
|
declare const _default: {
|
|
34
|
-
install: (app: App
|
|
34
|
+
install: (app: App, opt: any) => void;
|
|
35
35
|
};
|
|
36
36
|
export default _default;
|
|
@@ -92,6 +92,7 @@ export interface Rule {
|
|
|
92
92
|
/** 整个表单的值 */
|
|
93
93
|
formValue: FormValue;
|
|
94
94
|
prop: string;
|
|
95
|
+
config: any;
|
|
95
96
|
}, mForm: FormState | undefined) => void;
|
|
96
97
|
}
|
|
97
98
|
export interface Input {
|
|
@@ -107,12 +108,14 @@ declare type FilterFunction = (mForm: FormState | undefined, data: {
|
|
|
107
108
|
parent?: Record<any, any>;
|
|
108
109
|
formValue: Record<any, any>;
|
|
109
110
|
prop: string;
|
|
111
|
+
config: any;
|
|
110
112
|
}) => boolean;
|
|
111
113
|
declare type OnChangeHandler = (mForm: FormState | undefined, value: any, data: {
|
|
112
114
|
model: Record<any, any>;
|
|
113
115
|
values: Record<any, any>;
|
|
114
116
|
parent?: Record<any, any>;
|
|
115
117
|
formValue: Record<any, any>;
|
|
118
|
+
config: any;
|
|
116
119
|
}) => any;
|
|
117
120
|
declare type DefaultValueFunction = (mForm: FormState | undefined) => any;
|
|
118
121
|
/**
|
|
@@ -141,16 +144,19 @@ declare type SelectOptionFunction = (mForm: FormState | undefined, data: {
|
|
|
141
144
|
prop?: string;
|
|
142
145
|
formValues: any;
|
|
143
146
|
formValue: any;
|
|
147
|
+
config: any;
|
|
144
148
|
}) => SelectOption[] | SelectGroupOption[];
|
|
145
149
|
declare type RemoteSelectOptionBodyFunction = (mForm: FormState | undefined, data: {
|
|
146
150
|
model: any;
|
|
147
151
|
formValue: any;
|
|
148
152
|
formValues: any;
|
|
153
|
+
config: any;
|
|
149
154
|
}) => Record<string, any>;
|
|
150
155
|
declare type RemoteSelectOptionRequestFunction = (mForm: FormState | undefined, res: any, data: {
|
|
151
156
|
model: any;
|
|
152
157
|
formValue: any;
|
|
153
158
|
formValues: any;
|
|
159
|
+
config: any;
|
|
154
160
|
}) => any;
|
|
155
161
|
declare type RemoteSelectOptionItemFunction = (optionsData: Record<string, any>) => SelectOption[];
|
|
156
162
|
declare type SelectOptionValueFunction = (item: Record<string, any>) => any;
|
|
@@ -396,6 +402,7 @@ export interface TabPaneConfig {
|
|
|
396
402
|
lazy?: boolean;
|
|
397
403
|
labelWidth?: string;
|
|
398
404
|
items: FormConfig;
|
|
405
|
+
[key: string]: any;
|
|
399
406
|
}
|
|
400
407
|
export interface TabConfig extends FormItem, ContainerCommonConfig {
|
|
401
408
|
type: 'tab' | 'dynamic-tab';
|
|
@@ -433,6 +440,7 @@ export interface ColumnConfig extends FormItem, ContainerCommonConfig {
|
|
|
433
440
|
label: string;
|
|
434
441
|
width: string | number;
|
|
435
442
|
sortable: boolean;
|
|
443
|
+
[key: string]: any;
|
|
436
444
|
}
|
|
437
445
|
/**
|
|
438
446
|
* 表格容器
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.0-rc.
|
|
2
|
+
"version": "1.0.0-rc.10",
|
|
3
3
|
"name": "@tmagic/form",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"dist/*",
|
|
@@ -22,9 +22,7 @@
|
|
|
22
22
|
},
|
|
23
23
|
"license": "Apache-2.0",
|
|
24
24
|
"scripts": {
|
|
25
|
-
"build": "vite build"
|
|
26
|
-
"test": "jest --maxWorkers=8",
|
|
27
|
-
"test:coverage": "jest --maxWorkers=16 --coverage"
|
|
25
|
+
"build": "vite build"
|
|
28
26
|
},
|
|
29
27
|
"engines": {
|
|
30
28
|
"node": ">=14"
|
|
@@ -35,32 +33,30 @@
|
|
|
35
33
|
},
|
|
36
34
|
"dependencies": {
|
|
37
35
|
"@element-plus/icons": "0.0.11",
|
|
38
|
-
"@tmagic/utils": "
|
|
36
|
+
"@tmagic/utils": "1.0.0-rc.10",
|
|
39
37
|
"element-plus": "^2.2.0",
|
|
40
38
|
"lodash-es": "^4.17.21",
|
|
41
39
|
"moment": "^2.29.2",
|
|
42
40
|
"sortablejs": "^1.14.0",
|
|
43
41
|
"vue": "^3.2.0"
|
|
44
42
|
},
|
|
43
|
+
"peerDependencies": {
|
|
44
|
+
"element-plus": "^2.2.0",
|
|
45
|
+
"vue": "^3.2.0"
|
|
46
|
+
},
|
|
45
47
|
"devDependencies": {
|
|
46
|
-
"@
|
|
48
|
+
"@babel/core": "^7.18.0",
|
|
47
49
|
"@types/lodash-es": "^4.17.4",
|
|
48
50
|
"@types/node": "^15.12.4",
|
|
49
51
|
"@types/sortablejs": "^1.10.7",
|
|
50
52
|
"@vitejs/plugin-vue": "^1.2.3",
|
|
51
53
|
"@vitejs/plugin-vue-jsx": "^1.1.6",
|
|
52
54
|
"@vue/compiler-sfc": "^3.2.0",
|
|
53
|
-
"@vue/test-utils": "^2.0.0
|
|
54
|
-
"@vue/vue3-jest": "^27.0.0-alpha.4",
|
|
55
|
-
"jest": "^27.5.1",
|
|
56
|
-
"jest-serializer-vue": "^2.0.2",
|
|
57
|
-
"jest-transform-stub": "^2.0.0",
|
|
55
|
+
"@vue/test-utils": "^2.0.0",
|
|
58
56
|
"sass": "^1.35.1",
|
|
59
|
-
"ts-jest": "^27.1.4",
|
|
60
57
|
"typescript": "^4.3.4",
|
|
61
58
|
"vite": "^2.3.7",
|
|
62
59
|
"vite-plugin-dts": "^0.9.6",
|
|
63
60
|
"vue-tsc": "^0.0.24"
|
|
64
|
-
}
|
|
65
|
-
"gitHead": "3b647794d087888bfec9772f54356fa48c0b6d90"
|
|
61
|
+
}
|
|
66
62
|
}
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<template v-else-if="type && display">
|
|
33
33
|
<el-form-item
|
|
34
34
|
:style="config.tip ? 'flex: 1' : ''"
|
|
35
|
-
:class="{ hidden: itemLabelWidth === 0 || !config.text }"
|
|
35
|
+
:class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
|
|
36
36
|
:prop="itemProp"
|
|
37
37
|
:label-width="itemLabelWidth"
|
|
38
38
|
:rules="rule"
|
|
@@ -154,7 +154,18 @@ export default defineComponent({
|
|
|
154
154
|
|
|
155
155
|
const items = computed(() => (props.config as ContainerCommonConfig).items);
|
|
156
156
|
|
|
157
|
-
const itemProp = computed(() =>
|
|
157
|
+
const itemProp = computed(() => {
|
|
158
|
+
let n: string | number = '';
|
|
159
|
+
const { names } = props.config as any;
|
|
160
|
+
if (names?.[0]) {
|
|
161
|
+
[n] = names;
|
|
162
|
+
} else if (name.value) {
|
|
163
|
+
n = name.value;
|
|
164
|
+
} else {
|
|
165
|
+
return props.prop;
|
|
166
|
+
}
|
|
167
|
+
return `${props.prop}${props.prop ? '.' : ''}${n}`;
|
|
168
|
+
});
|
|
158
169
|
|
|
159
170
|
const tagName = computed(() => {
|
|
160
171
|
const component = resolveComponent(`m-${items.value ? 'form' : 'fields'}-${type.value}`);
|
|
@@ -206,6 +217,7 @@ export default defineComponent({
|
|
|
206
217
|
values: mForm?.initValues,
|
|
207
218
|
formValue: mForm?.values,
|
|
208
219
|
prop: itemProp.value,
|
|
220
|
+
config: props.config,
|
|
209
221
|
});
|
|
210
222
|
}
|
|
211
223
|
|
|
@@ -223,6 +235,7 @@ export default defineComponent({
|
|
|
223
235
|
values: mForm?.initValues,
|
|
224
236
|
formValue: mForm?.values,
|
|
225
237
|
prop: itemProp.value,
|
|
238
|
+
config: props.config,
|
|
226
239
|
});
|
|
227
240
|
}
|
|
228
241
|
};
|
package/src/containers/Table.vue
CHANGED
|
@@ -476,7 +476,7 @@ export default defineComponent({
|
|
|
476
476
|
}
|
|
477
477
|
emit('select', selection, row);
|
|
478
478
|
if (typeof props.config.onSelect === 'function') {
|
|
479
|
-
props.config.onSelect(mForm, { selection, row });
|
|
479
|
+
props.config.onSelect(mForm, { selection, row, config: props.config });
|
|
480
480
|
}
|
|
481
481
|
},
|
|
482
482
|
|
package/src/containers/Tabs.vue
CHANGED
|
@@ -59,12 +59,12 @@ const tabClickHandler = (mForm: FormState | undefined, tab: any, props: any) =>
|
|
|
59
59
|
tab.name = tab.paneName;
|
|
60
60
|
|
|
61
61
|
if (typeof config.onTabClick === 'function') {
|
|
62
|
-
config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
|
|
62
|
+
config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
const tabConfig = config.items.find((item: TabPaneConfig) => tab.name === item.status);
|
|
66
66
|
if (tabConfig && typeof tabConfig.onTabClick === 'function') {
|
|
67
|
-
tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
|
|
67
|
+
tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
70
|
|
|
@@ -136,7 +136,11 @@ const Tab = defineComponent({
|
|
|
136
136
|
if (!props.config.name) throw new Error('dynamic tab 必须配置name');
|
|
137
137
|
|
|
138
138
|
if (typeof props.config.onTabAdd === 'function') {
|
|
139
|
-
props.config.onTabAdd(mForm, {
|
|
139
|
+
props.config.onTabAdd(mForm, {
|
|
140
|
+
model: props.model,
|
|
141
|
+
prop: props.prop,
|
|
142
|
+
config: props.config,
|
|
143
|
+
});
|
|
140
144
|
} else if (tabs.value.length > 0) {
|
|
141
145
|
const newObj = cloneDeep(tabs.value[0]);
|
|
142
146
|
newObj.title = `标签${tabs.value.length + 1}`;
|
|
@@ -150,7 +154,11 @@ const Tab = defineComponent({
|
|
|
150
154
|
if (!props.config.name) throw new Error('dynamic tab 必须配置name');
|
|
151
155
|
|
|
152
156
|
if (typeof props.config.onTabRemove === 'function') {
|
|
153
|
-
props.config.onTabRemove(mForm, tabName, {
|
|
157
|
+
props.config.onTabRemove(mForm, tabName, {
|
|
158
|
+
model: props.model,
|
|
159
|
+
prop: props.prop,
|
|
160
|
+
config: props.config,
|
|
161
|
+
});
|
|
154
162
|
} else {
|
|
155
163
|
props.model[props.config.name].splice(+tabName, 1);
|
|
156
164
|
|
|
@@ -169,7 +177,7 @@ const Tab = defineComponent({
|
|
|
169
177
|
changeHandler: () => {
|
|
170
178
|
emit('change', props.model);
|
|
171
179
|
if (typeof props.config.onChange === 'function') {
|
|
172
|
-
props.config.onChange(mForm, { model: props.model });
|
|
180
|
+
props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
|
|
173
181
|
}
|
|
174
182
|
},
|
|
175
183
|
};
|
package/src/fields/Daterange.vue
CHANGED
|
@@ -60,6 +60,14 @@ export default defineComponent({
|
|
|
60
60
|
});
|
|
61
61
|
} else if (props.model && props.name && v instanceof Date) {
|
|
62
62
|
props.model[props.name] = datetimeFormatter(v.toString(), '');
|
|
63
|
+
} else if (names?.length) {
|
|
64
|
+
names.forEach((item) => {
|
|
65
|
+
if (props.model) {
|
|
66
|
+
props.model[item] = undefined;
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
} else if (props.name) {
|
|
70
|
+
props.model[props.name] = undefined;
|
|
63
71
|
}
|
|
64
72
|
};
|
|
65
73
|
|
package/src/fields/Select.vue
CHANGED
|
@@ -134,6 +134,7 @@ export default defineComponent({
|
|
|
134
134
|
model: props.model,
|
|
135
135
|
formValue: mForm?.values,
|
|
136
136
|
formValues: mForm?.values,
|
|
137
|
+
config: props.config,
|
|
137
138
|
}) as Record<string, any>;
|
|
138
139
|
}
|
|
139
140
|
|
|
@@ -163,6 +164,7 @@ export default defineComponent({
|
|
|
163
164
|
model: props.model,
|
|
164
165
|
formValue: mForm?.values,
|
|
165
166
|
formValues: mForm?.values,
|
|
167
|
+
config: props.config,
|
|
166
168
|
});
|
|
167
169
|
}
|
|
168
170
|
|
|
@@ -287,6 +289,7 @@ export default defineComponent({
|
|
|
287
289
|
prop: props.prop,
|
|
288
290
|
formValues: mForm?.values,
|
|
289
291
|
formValue: mForm?.values,
|
|
292
|
+
config: props.config,
|
|
290
293
|
}),
|
|
291
294
|
).then((data) => {
|
|
292
295
|
options.value = data;
|
package/src/schema.ts
CHANGED
|
@@ -120,6 +120,7 @@ export interface Rule {
|
|
|
120
120
|
/** 整个表单的值 */
|
|
121
121
|
formValue: FormValue;
|
|
122
122
|
prop: string;
|
|
123
|
+
config: any;
|
|
123
124
|
},
|
|
124
125
|
mForm: FormState | undefined,
|
|
125
126
|
) => void;
|
|
@@ -145,6 +146,7 @@ type FilterFunction = (
|
|
|
145
146
|
parent?: Record<any, any>;
|
|
146
147
|
formValue: Record<any, any>;
|
|
147
148
|
prop: string;
|
|
149
|
+
config: any;
|
|
148
150
|
},
|
|
149
151
|
) => boolean;
|
|
150
152
|
|
|
@@ -156,6 +158,7 @@ type OnChangeHandler = (
|
|
|
156
158
|
values: Record<any, any>;
|
|
157
159
|
parent?: Record<any, any>;
|
|
158
160
|
formValue: Record<any, any>;
|
|
161
|
+
config: any;
|
|
159
162
|
},
|
|
160
163
|
) => any;
|
|
161
164
|
|
|
@@ -191,6 +194,7 @@ type SelectOptionFunction = (
|
|
|
191
194
|
prop?: string;
|
|
192
195
|
formValues: any;
|
|
193
196
|
formValue: any;
|
|
197
|
+
config: any;
|
|
194
198
|
},
|
|
195
199
|
) => SelectOption[] | SelectGroupOption[];
|
|
196
200
|
|
|
@@ -200,6 +204,7 @@ type RemoteSelectOptionBodyFunction = (
|
|
|
200
204
|
model: any;
|
|
201
205
|
formValue: any;
|
|
202
206
|
formValues: any;
|
|
207
|
+
config: any;
|
|
203
208
|
},
|
|
204
209
|
) => Record<string, any>;
|
|
205
210
|
|
|
@@ -210,6 +215,7 @@ type RemoteSelectOptionRequestFunction = (
|
|
|
210
215
|
model: any;
|
|
211
216
|
formValue: any;
|
|
212
217
|
formValues: any;
|
|
218
|
+
config: any;
|
|
213
219
|
},
|
|
214
220
|
) => any;
|
|
215
221
|
|
|
@@ -500,6 +506,7 @@ export interface TabPaneConfig {
|
|
|
500
506
|
lazy?: boolean;
|
|
501
507
|
labelWidth?: string;
|
|
502
508
|
items: FormConfig;
|
|
509
|
+
[key: string]: any;
|
|
503
510
|
}
|
|
504
511
|
export interface TabConfig extends FormItem, ContainerCommonConfig {
|
|
505
512
|
type: 'tab' | 'dynamic-tab';
|
|
@@ -540,6 +547,7 @@ export interface ColumnConfig extends FormItem, ContainerCommonConfig {
|
|
|
540
547
|
label: string;
|
|
541
548
|
width: string | number;
|
|
542
549
|
sortable: boolean;
|
|
550
|
+
[key: string]: any;
|
|
543
551
|
}
|
|
544
552
|
|
|
545
553
|
/**
|
package/src/utils/form.ts
CHANGED
|
@@ -201,6 +201,7 @@ export const filterFunction = (mForm: FormState | undefined, config: any, props:
|
|
|
201
201
|
parent: mForm?.parentValues || {},
|
|
202
202
|
formValue: mForm?.values || props.model,
|
|
203
203
|
prop: props.prop,
|
|
204
|
+
config: props.config,
|
|
204
205
|
});
|
|
205
206
|
};
|
|
206
207
|
|
|
@@ -242,6 +243,7 @@ export const getRules = function (mForm: FormState | undefined, rules: Rule[] |
|
|
|
242
243
|
parent: mForm?.parentValues || {},
|
|
243
244
|
formValue: mForm?.values || props.model,
|
|
244
245
|
prop: props.prop,
|
|
246
|
+
config: props.config,
|
|
245
247
|
},
|
|
246
248
|
mForm,
|
|
247
249
|
);
|