@tmagic/form 1.0.0-rc.9 → 1.0.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/tmagic-form.es.js +72 -60
- package/dist/tmagic-form.es.js.map +1 -1
- package/dist/tmagic-form.umd.js +72 -60
- package/dist/tmagic-form.umd.js.map +1 -1
- package/dist/types/src/schema.d.ts +10 -0
- package/package.json +2 -2
- package/src/containers/Container.vue +2 -0
- package/src/containers/Table.vue +1 -1
- package/src/containers/Tabs.vue +13 -5
- package/src/fields/DateTime.vue +12 -13
- package/src/fields/Daterange.vue +12 -13
- package/src/fields/Select.vue +3 -0
- package/src/schema.ts +10 -0
- package/src/utils/form.ts +2 -0
package/dist/tmagic-form.umd.js
CHANGED
|
@@ -117,7 +117,8 @@
|
|
|
117
117
|
model: props.model,
|
|
118
118
|
parent: mForm?.parentValues || {},
|
|
119
119
|
formValue: mForm?.values || props.model,
|
|
120
|
-
prop: props.prop
|
|
120
|
+
prop: props.prop,
|
|
121
|
+
config: props.config
|
|
121
122
|
});
|
|
122
123
|
};
|
|
123
124
|
const display = function(mForm, config, props) {
|
|
@@ -148,7 +149,8 @@
|
|
|
148
149
|
model: props.model,
|
|
149
150
|
parent: mForm?.parentValues || {},
|
|
150
151
|
formValue: mForm?.values || props.model,
|
|
151
|
-
prop: props.prop
|
|
152
|
+
prop: props.prop,
|
|
153
|
+
config: props.config
|
|
152
154
|
}, mForm);
|
|
153
155
|
}
|
|
154
156
|
return item;
|
|
@@ -259,7 +261,8 @@
|
|
|
259
261
|
model: props.model,
|
|
260
262
|
values: mForm?.initValues,
|
|
261
263
|
formValue: mForm?.values,
|
|
262
|
-
prop: itemProp.value
|
|
264
|
+
prop: itemProp.value,
|
|
265
|
+
config: props.config
|
|
263
266
|
});
|
|
264
267
|
}
|
|
265
268
|
if (filter === "number") {
|
|
@@ -273,7 +276,8 @@
|
|
|
273
276
|
model: props.model,
|
|
274
277
|
values: mForm?.initValues,
|
|
275
278
|
formValue: mForm?.values,
|
|
276
|
-
prop: itemProp.value
|
|
279
|
+
prop: itemProp.value,
|
|
280
|
+
config: props.config
|
|
277
281
|
});
|
|
278
282
|
}
|
|
279
283
|
};
|
|
@@ -319,7 +323,7 @@
|
|
|
319
323
|
};
|
|
320
324
|
}
|
|
321
325
|
});
|
|
322
|
-
const _hoisted_1$
|
|
326
|
+
const _hoisted_1$e = ["innerHTML"];
|
|
323
327
|
const _hoisted_2$7 = ["innerHTML"];
|
|
324
328
|
const _hoisted_3$7 = ["innerHTML"];
|
|
325
329
|
const _hoisted_4$6 = ["innerHTML"];
|
|
@@ -369,7 +373,7 @@
|
|
|
369
373
|
label: vue.withCtx(() => [
|
|
370
374
|
vue.createElementVNode("span", {
|
|
371
375
|
innerHTML: _ctx.type === "checkbox" ? "" : _ctx.config.text
|
|
372
|
-
}, null, 8, _hoisted_1$
|
|
376
|
+
}, null, 8, _hoisted_1$e)
|
|
373
377
|
]),
|
|
374
378
|
default: vue.withCtx(() => [
|
|
375
379
|
_ctx.tooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, { key: 0 }, {
|
|
@@ -508,7 +512,7 @@
|
|
|
508
512
|
};
|
|
509
513
|
}
|
|
510
514
|
});
|
|
511
|
-
const _hoisted_1$
|
|
515
|
+
const _hoisted_1$d = ["innerHTML"];
|
|
512
516
|
const _hoisted_2$6 = ["innerHTML"];
|
|
513
517
|
const _hoisted_3$6 = { key: 1 };
|
|
514
518
|
const _hoisted_4$5 = ["innerHTML"];
|
|
@@ -542,7 +546,7 @@
|
|
|
542
546
|
default: vue.withCtx(() => [
|
|
543
547
|
vue.createElementVNode("span", {
|
|
544
548
|
innerHTML: _ctx.config.legend
|
|
545
|
-
}, null, 8, _hoisted_1$
|
|
549
|
+
}, null, 8, _hoisted_1$d),
|
|
546
550
|
_ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
|
|
547
551
|
key: 0,
|
|
548
552
|
innerHTML: _ctx.config.extra,
|
|
@@ -700,7 +704,7 @@
|
|
|
700
704
|
};
|
|
701
705
|
}
|
|
702
706
|
});
|
|
703
|
-
const _hoisted_1$
|
|
707
|
+
const _hoisted_1$c = { class: "m-fields-group-list-item" };
|
|
704
708
|
const _hoisted_2$5 = /* @__PURE__ */ vue.createTextVNode("\u4E0A\u79FB");
|
|
705
709
|
const _hoisted_3$5 = /* @__PURE__ */ vue.createTextVNode("\u4E0B\u79FB");
|
|
706
710
|
const _hoisted_4$4 = ["innerHTML"];
|
|
@@ -712,7 +716,7 @@
|
|
|
712
716
|
const _component_CaretRight = vue.resolveComponent("CaretRight");
|
|
713
717
|
const _component_CaretBottom = vue.resolveComponent("CaretBottom");
|
|
714
718
|
const _component_m_form_container = vue.resolveComponent("m-form-container");
|
|
715
|
-
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$
|
|
719
|
+
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
|
|
716
720
|
vue.createElementVNode("div", null, [
|
|
717
721
|
vue.createVNode(_component_el_icon, {
|
|
718
722
|
style: { "margin-right": "7px" },
|
|
@@ -889,7 +893,7 @@
|
|
|
889
893
|
};
|
|
890
894
|
}
|
|
891
895
|
});
|
|
892
|
-
const _hoisted_1$
|
|
896
|
+
const _hoisted_1$b = { class: "m-fields-group-list" };
|
|
893
897
|
const _hoisted_2$4 = ["innerHTML"];
|
|
894
898
|
const _hoisted_3$4 = {
|
|
895
899
|
key: 1,
|
|
@@ -904,7 +908,7 @@
|
|
|
904
908
|
function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
|
|
905
909
|
const _component_m_fields_group_list_item = vue.resolveComponent("m-fields-group-list-item");
|
|
906
910
|
const _component_el_button = vue.resolveComponent("el-button");
|
|
907
|
-
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$
|
|
911
|
+
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
|
|
908
912
|
_ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
909
913
|
key: 0,
|
|
910
914
|
innerHTML: _ctx.config.extra,
|
|
@@ -983,7 +987,7 @@
|
|
|
983
987
|
};
|
|
984
988
|
}
|
|
985
989
|
});
|
|
986
|
-
const _hoisted_1$
|
|
990
|
+
const _hoisted_1$a = { class: "clearfix" };
|
|
987
991
|
const _hoisted_2$3 = ["innerHTML"];
|
|
988
992
|
const _hoisted_3$3 = {
|
|
989
993
|
key: 0,
|
|
@@ -1003,7 +1007,7 @@
|
|
|
1003
1007
|
"body-style": { display: _ctx.expand ? "block" : "none" }
|
|
1004
1008
|
}, {
|
|
1005
1009
|
header: vue.withCtx(() => [
|
|
1006
|
-
vue.createElementVNode("div", _hoisted_1$
|
|
1010
|
+
vue.createElementVNode("div", _hoisted_1$a, [
|
|
1007
1011
|
vue.createElementVNode("a", {
|
|
1008
1012
|
href: "javascript:",
|
|
1009
1013
|
style: { "width": "100%", "display": "block" },
|
|
@@ -1489,7 +1493,7 @@
|
|
|
1489
1493
|
}
|
|
1490
1494
|
emit("select", selection, row);
|
|
1491
1495
|
if (typeof props.config.onSelect === "function") {
|
|
1492
|
-
props.config.onSelect(mForm, { selection, row });
|
|
1496
|
+
props.config.onSelect(mForm, { selection, row, config: props.config });
|
|
1493
1497
|
}
|
|
1494
1498
|
},
|
|
1495
1499
|
toggleRowSelection(row, selected) {
|
|
@@ -1615,7 +1619,7 @@
|
|
|
1615
1619
|
};
|
|
1616
1620
|
}
|
|
1617
1621
|
});
|
|
1618
|
-
const _hoisted_1$
|
|
1622
|
+
const _hoisted_1$9 = ["innerHTML"];
|
|
1619
1623
|
const _hoisted_2$2 = { class: "el-form-item__content" };
|
|
1620
1624
|
const _hoisted_3$2 = ["innerHTML"];
|
|
1621
1625
|
const _hoisted_4$1 = /* @__PURE__ */ vue.createTextVNode("\u6DFB\u52A0");
|
|
@@ -1644,7 +1648,7 @@
|
|
|
1644
1648
|
key: 0,
|
|
1645
1649
|
style: { "color": "rgba(0, 0, 0, 0.45)" },
|
|
1646
1650
|
innerHTML: _ctx.config.extra
|
|
1647
|
-
}, null, 8, _hoisted_1$
|
|
1651
|
+
}, null, 8, _hoisted_1$9)) : vue.createCommentVNode("", true),
|
|
1648
1652
|
vue.createElementVNode("div", _hoisted_2$2, [
|
|
1649
1653
|
vue.createVNode(_component_el_tooltip, {
|
|
1650
1654
|
content: "\u62D6\u62FD\u53EF\u6392\u5E8F",
|
|
@@ -1894,11 +1898,11 @@
|
|
|
1894
1898
|
const { config, model, prop } = props;
|
|
1895
1899
|
tab.name = tab.paneName;
|
|
1896
1900
|
if (typeof config.onTabClick === "function") {
|
|
1897
|
-
config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
|
|
1901
|
+
config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
|
|
1898
1902
|
}
|
|
1899
1903
|
const tabConfig = config.items.find((item) => tab.name === item.status);
|
|
1900
1904
|
if (tabConfig && typeof tabConfig.onTabClick === "function") {
|
|
1901
|
-
tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
|
|
1905
|
+
tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
|
|
1902
1906
|
}
|
|
1903
1907
|
};
|
|
1904
1908
|
const Tab = vue.defineComponent({
|
|
@@ -1953,7 +1957,11 @@
|
|
|
1953
1957
|
if (!props.config.name)
|
|
1954
1958
|
throw new Error("dynamic tab \u5FC5\u987B\u914D\u7F6Ename");
|
|
1955
1959
|
if (typeof props.config.onTabAdd === "function") {
|
|
1956
|
-
props.config.onTabAdd(mForm, {
|
|
1960
|
+
props.config.onTabAdd(mForm, {
|
|
1961
|
+
model: props.model,
|
|
1962
|
+
prop: props.prop,
|
|
1963
|
+
config: props.config
|
|
1964
|
+
});
|
|
1957
1965
|
} else if (tabs.value.length > 0) {
|
|
1958
1966
|
const newObj = lodashEs.cloneDeep(tabs.value[0]);
|
|
1959
1967
|
newObj.title = `\u6807\u7B7E${tabs.value.length + 1}`;
|
|
@@ -1966,7 +1974,11 @@
|
|
|
1966
1974
|
if (!props.config.name)
|
|
1967
1975
|
throw new Error("dynamic tab \u5FC5\u987B\u914D\u7F6Ename");
|
|
1968
1976
|
if (typeof props.config.onTabRemove === "function") {
|
|
1969
|
-
props.config.onTabRemove(mForm, tabName, {
|
|
1977
|
+
props.config.onTabRemove(mForm, tabName, {
|
|
1978
|
+
model: props.model,
|
|
1979
|
+
prop: props.prop,
|
|
1980
|
+
config: props.config
|
|
1981
|
+
});
|
|
1970
1982
|
} else {
|
|
1971
1983
|
props.model[props.config.name].splice(+tabName, 1);
|
|
1972
1984
|
if (tabName < activeTabName.value || activeTabName.value >= props.model[props.config.name].length) {
|
|
@@ -1981,7 +1993,7 @@
|
|
|
1981
1993
|
changeHandler: () => {
|
|
1982
1994
|
emit("change", props.model);
|
|
1983
1995
|
if (typeof props.config.onChange === "function") {
|
|
1984
|
-
props.config.onChange(mForm, { model: props.model });
|
|
1996
|
+
props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
|
|
1985
1997
|
}
|
|
1986
1998
|
}
|
|
1987
1999
|
};
|
|
@@ -2170,13 +2182,13 @@
|
|
|
2170
2182
|
};
|
|
2171
2183
|
}
|
|
2172
2184
|
});
|
|
2173
|
-
const _hoisted_1$
|
|
2185
|
+
const _hoisted_1$8 = {
|
|
2174
2186
|
class: "m-cascader",
|
|
2175
2187
|
style: { "width": "100%" }
|
|
2176
2188
|
};
|
|
2177
2189
|
function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
|
|
2178
2190
|
const _component_el_cascader = vue.resolveComponent("el-cascader");
|
|
2179
|
-
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$
|
|
2191
|
+
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
|
|
2180
2192
|
vue.createVNode(_component_el_cascader, {
|
|
2181
2193
|
modelValue: _ctx.model[_ctx.name],
|
|
2182
2194
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
|
|
@@ -2299,7 +2311,7 @@
|
|
|
2299
2311
|
}
|
|
2300
2312
|
var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$e]]);
|
|
2301
2313
|
|
|
2302
|
-
const _hoisted_1$
|
|
2314
|
+
const _hoisted_1$7 = { key: 0 };
|
|
2303
2315
|
const __default__$2 = vue.defineComponent({
|
|
2304
2316
|
name: "m-fields-color-picker"
|
|
2305
2317
|
});
|
|
@@ -2319,7 +2331,7 @@
|
|
|
2319
2331
|
const changeHandler = (value) => emit("change", value);
|
|
2320
2332
|
return (_ctx, _cache) => {
|
|
2321
2333
|
const _component_el_color_picker = vue.resolveComponent("el-color-picker");
|
|
2322
|
-
return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$
|
|
2334
|
+
return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
|
|
2323
2335
|
vue.createVNode(_component_el_color_picker, {
|
|
2324
2336
|
modelValue: _ctx.model[_ctx.name],
|
|
2325
2337
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
|
|
@@ -2355,10 +2367,10 @@
|
|
|
2355
2367
|
};
|
|
2356
2368
|
}
|
|
2357
2369
|
});
|
|
2358
|
-
const _hoisted_1$
|
|
2370
|
+
const _hoisted_1$6 = { key: 0 };
|
|
2359
2371
|
function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
|
|
2360
2372
|
const _component_el_date_picker = vue.resolveComponent("el-date-picker");
|
|
2361
|
-
return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$
|
|
2373
|
+
return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
|
|
2362
2374
|
vue.createVNode(_component_el_date_picker, {
|
|
2363
2375
|
modelValue: _ctx.model[_ctx.modelName],
|
|
2364
2376
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.modelName] = $event),
|
|
@@ -2425,20 +2437,19 @@
|
|
|
2425
2437
|
});
|
|
2426
2438
|
function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
|
|
2427
2439
|
const _component_el_date_picker = vue.resolveComponent("el-date-picker");
|
|
2428
|
-
return vue.openBlock(), vue.
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
]);
|
|
2440
|
+
return vue.openBlock(), vue.createBlock(_component_el_date_picker, {
|
|
2441
|
+
modelValue: _ctx.value,
|
|
2442
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.value = $event),
|
|
2443
|
+
type: "datetimerange",
|
|
2444
|
+
"range-separator": "-",
|
|
2445
|
+
"start-placeholder": "\u5F00\u59CB\u65E5\u671F",
|
|
2446
|
+
"end-placeholder": "\u7ED3\u675F\u65E5\u671F",
|
|
2447
|
+
size: _ctx.size,
|
|
2448
|
+
"unlink-panels": true,
|
|
2449
|
+
disabled: _ctx.disabled,
|
|
2450
|
+
"default-time": _ctx.config.defaultTime || [new Date(2e3, 1, 1, 23, 59, 59)],
|
|
2451
|
+
onChange: _ctx.changeHandler
|
|
2452
|
+
}, null, 8, ["modelValue", "size", "disabled", "default-time", "onChange"]);
|
|
2442
2453
|
}
|
|
2443
2454
|
var Daterange = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$c]]);
|
|
2444
2455
|
|
|
@@ -2470,23 +2481,21 @@
|
|
|
2470
2481
|
};
|
|
2471
2482
|
}
|
|
2472
2483
|
});
|
|
2473
|
-
const _hoisted_1$6 = { key: 0 };
|
|
2474
2484
|
function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
|
|
2475
2485
|
const _component_el_date_picker = vue.resolveComponent("el-date-picker");
|
|
2476
|
-
return
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2488
|
-
|
|
2489
|
-
])) : vue.createCommentVNode("", true);
|
|
2486
|
+
return vue.openBlock(), vue.createBlock(_component_el_date_picker, {
|
|
2487
|
+
modelValue: _ctx.model[_ctx.name],
|
|
2488
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
|
|
2489
|
+
"popper-class": "magic-datetime-picker-popper",
|
|
2490
|
+
type: "datetime",
|
|
2491
|
+
size: _ctx.size,
|
|
2492
|
+
placeholder: _ctx.config.placeholder,
|
|
2493
|
+
disabled: _ctx.disabled,
|
|
2494
|
+
format: _ctx.config.format || "YYYY-MM-DD HH:mm:ss",
|
|
2495
|
+
"value-format": _ctx.config.valueFormat || "YYYY-MM-DD HH:mm:ss",
|
|
2496
|
+
"default-time": _ctx.config.defaultTime || [new Date(2e3, 1, 1, 23, 59, 59)],
|
|
2497
|
+
onChange: _ctx.changeHandler
|
|
2498
|
+
}, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format", "default-time", "onChange"]);
|
|
2490
2499
|
}
|
|
2491
2500
|
var DateTime = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$b]]);
|
|
2492
2501
|
|
|
@@ -2908,7 +2917,8 @@
|
|
|
2908
2917
|
body = body(mForm, {
|
|
2909
2918
|
model: props.model,
|
|
2910
2919
|
formValue: mForm?.values,
|
|
2911
|
-
formValues: mForm?.values
|
|
2920
|
+
formValues: mForm?.values,
|
|
2921
|
+
config: props.config
|
|
2912
2922
|
});
|
|
2913
2923
|
}
|
|
2914
2924
|
body.query = query.value;
|
|
@@ -2931,7 +2941,8 @@
|
|
|
2931
2941
|
res = option.afterRequest(mForm, res, {
|
|
2932
2942
|
model: props.model,
|
|
2933
2943
|
formValue: mForm?.values,
|
|
2934
|
-
formValues: mForm?.values
|
|
2944
|
+
formValues: mForm?.values,
|
|
2945
|
+
config: props.config
|
|
2935
2946
|
});
|
|
2936
2947
|
}
|
|
2937
2948
|
const optionsData = res[option.root];
|
|
@@ -3023,7 +3034,8 @@
|
|
|
3023
3034
|
model: props.model,
|
|
3024
3035
|
prop: props.prop,
|
|
3025
3036
|
formValues: mForm?.values,
|
|
3026
|
-
formValue: mForm?.values
|
|
3037
|
+
formValue: mForm?.values,
|
|
3038
|
+
config: props.config
|
|
3027
3039
|
})).then((data) => {
|
|
3028
3040
|
options.value = data;
|
|
3029
3041
|
});
|