@tmagic/form 1.8.0-beta.13 → 1.8.0-beta.14
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/es/Form.vue_vue_type_script_setup_true_lang.js +51 -16
- package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js +12 -5
- package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js +38 -12
- package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js +23 -17
- package/dist/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js +6 -5
- package/dist/es/containers/GroupListItem.vue_vue_type_script_setup_true_lang.js +41 -31
- package/dist/es/containers/Panel.vue_vue_type_script_setup_true_lang.js +16 -10
- package/dist/es/containers/table/ActionsColumn.vue_vue_type_script_setup_true_lang.js +13 -6
- package/dist/es/containers/table/Table.vue_vue_type_script_setup_true_lang.js +4 -2
- package/dist/es/containers/table/useTableColumns.js +5 -1
- package/dist/es/containers/table-group-list/TableGroupList.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/es/fields/Cascader.vue_vue_type_script_setup_true_lang.js +5 -2
- package/dist/es/fields/Checkbox.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/es/fields/CheckboxGroup.vue_vue_type_script_setup_true_lang.js +5 -2
- package/dist/es/fields/ColorPicker.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/es/fields/Date.vue_vue_type_script_setup_true_lang.js +5 -2
- package/dist/es/fields/DateTime.vue_vue_type_script_setup_true_lang.js +5 -2
- package/dist/es/fields/Daterange.vue_vue_type_script_setup_true_lang.js +5 -2
- package/dist/es/fields/Display.vue_vue_type_script_setup_true_lang.js +5 -2
- package/dist/es/fields/DynamicField.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/es/fields/Link.vue_vue_type_script_setup_true_lang.js +29 -7
- package/dist/es/fields/Number.vue_vue_type_script_setup_true_lang.js +7 -2
- package/dist/es/fields/NumberRange.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/es/fields/RadioGroup.vue_vue_type_script_setup_true_lang.js +19 -9
- package/dist/es/fields/Select.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/es/fields/Switch.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/es/fields/Text.vue_vue_type_script_setup_true_lang.js +112 -77
- package/dist/es/fields/Textarea.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/es/fields/Time.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/es/fields/Timerange.vue_vue_type_script_setup_true_lang.js +6 -3
- package/dist/es/index.js +3 -3
- package/dist/es/plugin.js +3 -1
- package/dist/es/style.css +122 -8
- package/dist/es/submitForm.js +2 -8
- package/dist/es/utils/config.js +4 -1
- package/dist/es/utils/form.js +33 -3
- package/dist/es/utils/typeMatch.js +1 -1
- package/dist/style.css +122 -8
- package/dist/themes/magic-admin.css +499 -0
- package/dist/tmagic-form.umd.cjs +541 -296
- package/package.json +4 -4
- package/src/Form.vue +71 -18
- package/src/FormDialog.vue +14 -3
- package/src/FormDrawer.vue +40 -12
- package/src/containers/Container.vue +16 -5
- package/src/containers/GroupList.vue +1 -1
- package/src/containers/GroupListItem.vue +28 -22
- package/src/containers/Panel.vue +10 -3
- package/src/containers/table/ActionsColumn.vue +10 -4
- package/src/containers/table/Table.vue +1 -0
- package/src/containers/table/useTableColumns.ts +7 -3
- package/src/containers/table-group-list/TableGroupList.vue +7 -1
- package/src/fields/Link.vue +16 -3
- package/src/fields/Number.vue +2 -1
- package/src/fields/RadioGroup.vue +21 -6
- package/src/fields/Text.vue +43 -19
- package/src/plugin.ts +3 -0
- package/src/submitForm.ts +5 -11
- package/src/theme/container.scss +3 -0
- package/src/theme/fieldset.scss +51 -0
- package/src/theme/form.scss +6 -0
- package/src/theme/group-list.scss +9 -7
- package/src/theme/index.scss +1 -0
- package/src/theme/link.scss +17 -0
- package/src/theme/panel.scss +1 -1
- package/src/theme/radio-group.scss +23 -0
- package/src/theme/tabs.scss +2 -2
- package/src/theme/text.scss +38 -0
- package/src/theme/themes/magic-admin/index.scss +95 -0
- package/src/utils/config.ts +7 -1
- package/src/utils/form.ts +37 -0
- package/types/index.d.ts +64 -3
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import { useAddField } from "../utils/useAddField.js";
|
|
2
|
-
import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, openBlock, readonly, ref, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
|
|
2
|
+
import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, readonly, ref, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
|
|
3
3
|
import { debounce } from "lodash-es";
|
|
4
4
|
import { TMagicButton, TMagicInput } from "@tmagic/design";
|
|
5
5
|
import { isNumber } from "@tmagic/utils";
|
|
6
6
|
import { createPopper } from "@popperjs/core";
|
|
7
7
|
//#region packages/form/src/fields/Text.vue?vue&type=script&setup=true&lang.ts
|
|
8
|
-
var _hoisted_1 = {
|
|
9
|
-
var _hoisted_2 = {
|
|
10
|
-
|
|
8
|
+
var _hoisted_1 = { key: 0 };
|
|
9
|
+
var _hoisted_2 = {
|
|
10
|
+
key: 0,
|
|
11
|
+
class: "m-fields-text__prepend"
|
|
12
|
+
};
|
|
13
|
+
var _hoisted_3 = { class: "m-fields-text__value" };
|
|
14
|
+
var _hoisted_4 = ["src"];
|
|
15
|
+
var _hoisted_5 = { key: 2 };
|
|
16
|
+
var _hoisted_6 = ["src"];
|
|
17
|
+
var _hoisted_7 = { key: 2 };
|
|
18
|
+
var _hoisted_8 = { style: {
|
|
11
19
|
"display": "flex",
|
|
12
20
|
"justify-content": "flex-end"
|
|
13
21
|
} };
|
|
@@ -24,7 +32,10 @@ var Text_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
|
|
|
24
32
|
disabled: { type: Boolean },
|
|
25
33
|
size: {},
|
|
26
34
|
lastValues: {},
|
|
27
|
-
isCompare: { type: Boolean }
|
|
35
|
+
isCompare: { type: Boolean },
|
|
36
|
+
text: {},
|
|
37
|
+
labelWidth: {},
|
|
38
|
+
labelPosition: {}
|
|
28
39
|
},
|
|
29
40
|
emits: ["change", "input"],
|
|
30
41
|
setup(__props, { emit: __emit }) {
|
|
@@ -37,21 +48,15 @@ var Text_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
|
|
|
37
48
|
value.value = v;
|
|
38
49
|
}, { immediate: true });
|
|
39
50
|
const appendConfig = computed(() => {
|
|
40
|
-
|
|
51
|
+
const { append } = props.config;
|
|
52
|
+
if (typeof append === "string") return {
|
|
41
53
|
type: "text",
|
|
42
|
-
text:
|
|
54
|
+
text: append,
|
|
43
55
|
handler: void 0
|
|
44
56
|
};
|
|
45
|
-
if (typeof
|
|
46
|
-
if (
|
|
47
|
-
|
|
48
|
-
text: props.config.append.text,
|
|
49
|
-
handler: props.config.append.handler
|
|
50
|
-
};
|
|
51
|
-
if (props.config.append) {
|
|
52
|
-
if (props.config.append.value === 0) return false;
|
|
53
|
-
return props.config.append;
|
|
54
|
-
}
|
|
57
|
+
if (typeof append === "object" && append) {
|
|
58
|
+
if (append.value === 0) return false;
|
|
59
|
+
return append;
|
|
55
60
|
}
|
|
56
61
|
return false;
|
|
57
62
|
});
|
|
@@ -147,67 +152,97 @@ var Text_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
|
|
|
147
152
|
instanceRef.value = void 0;
|
|
148
153
|
};
|
|
149
154
|
return (_ctx, _cache) => {
|
|
150
|
-
return openBlock(), createElementBlock("div",
|
|
151
|
-
|
|
152
|
-
"
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
155
|
+
return openBlock(), createElementBlock("div", { class: normalizeClass(["m-fields-text", { "m-fields-text--static": __props.config.static }]) }, [
|
|
156
|
+
__props.config.disabled ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("v-if", true),
|
|
157
|
+
createCommentVNode(" 新增静态展示文本样式 "),
|
|
158
|
+
__props.config.static ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
159
|
+
__props.config.prepend ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.config.prepend), 1)) : createCommentVNode("v-if", true),
|
|
160
|
+
createElementVNode("span", _hoisted_3, toDisplayString(value.value), 1),
|
|
161
|
+
appendConfig.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [appendConfig.value.type === "button" ? (openBlock(), createBlock(unref(TMagicButton), {
|
|
162
|
+
key: 0,
|
|
163
|
+
style: { "color": "#0056ea" },
|
|
164
|
+
size: __props.size,
|
|
165
|
+
onClick: withModifiers(buttonClickHandler, ["prevent"])
|
|
166
|
+
}, {
|
|
167
|
+
default: withCtx(() => [createTextVNode(toDisplayString(appendConfig.value.text), 1)]),
|
|
168
|
+
_: 1
|
|
169
|
+
}, 8, ["size"])) : appendConfig.value.type === "icon" ? (openBlock(), createElementBlock("img", {
|
|
170
|
+
key: 1,
|
|
171
|
+
class: "m-fields-text__icon",
|
|
172
|
+
src: appendConfig.value.text,
|
|
173
|
+
onClick: buttonClickHandler
|
|
174
|
+
}, null, 8, _hoisted_4)) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(appendConfig.value.text), 1))], 64)) : createCommentVNode("v-if", true)
|
|
175
|
+
], 64)) : (openBlock(), createBlock(unref(TMagicInput), {
|
|
176
|
+
key: 2,
|
|
177
|
+
modelValue: value.value,
|
|
178
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
|
|
179
|
+
ref_key: "input",
|
|
180
|
+
ref: input,
|
|
181
|
+
clearable: __props.config.clearable ?? true,
|
|
171
182
|
size: __props.size,
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
size
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
183
|
+
placeholder: __props.config.placeholder,
|
|
184
|
+
disabled: __props.disabled,
|
|
185
|
+
onChange: changeHandler,
|
|
186
|
+
onInput: inputHandler,
|
|
187
|
+
onKeyup: _cache[1] || (_cache[1] = ($event) => keyUpHandler($event))
|
|
188
|
+
}, createSlots({ _: 2 }, [__props.config.prepend ? {
|
|
189
|
+
name: "prepend",
|
|
190
|
+
fn: withCtx(() => [createElementVNode("span", null, toDisplayString(__props.config.prepend), 1)]),
|
|
191
|
+
key: "0"
|
|
192
|
+
} : void 0, appendConfig.value ? {
|
|
193
|
+
name: "append",
|
|
194
|
+
fn: withCtx(() => [appendConfig.value.type === "button" ? (openBlock(), createBlock(unref(TMagicButton), {
|
|
195
|
+
key: 0,
|
|
196
|
+
style: { "color": "#0056ea" },
|
|
197
|
+
size: __props.size,
|
|
198
|
+
onClick: withModifiers(buttonClickHandler, ["prevent"])
|
|
199
|
+
}, {
|
|
200
|
+
default: withCtx(() => [createTextVNode(toDisplayString(appendConfig.value.text), 1)]),
|
|
201
|
+
_: 1
|
|
202
|
+
}, 8, ["size"])) : appendConfig.value.type === "icon" ? (openBlock(), createElementBlock("img", {
|
|
203
|
+
key: 1,
|
|
204
|
+
src: appendConfig.value.text,
|
|
205
|
+
onClick: buttonClickHandler
|
|
206
|
+
}, null, 8, _hoisted_6)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(appendConfig.value.text), 1))]),
|
|
207
|
+
key: "1"
|
|
208
|
+
} : void 0]), 1032, [
|
|
209
|
+
"modelValue",
|
|
210
|
+
"clearable",
|
|
211
|
+
"size",
|
|
212
|
+
"placeholder",
|
|
213
|
+
"disabled"
|
|
214
|
+
])),
|
|
215
|
+
!__props.config.static ? (openBlock(), createBlock(Teleport, {
|
|
216
|
+
key: 3,
|
|
217
|
+
to: "body"
|
|
218
|
+
}, [popoverVisible.value ? (openBlock(), createElementBlock("div", {
|
|
219
|
+
key: 0,
|
|
220
|
+
class: "tmagic-form-text-popper m-form-item__content",
|
|
221
|
+
ref_key: "popoverEl",
|
|
222
|
+
ref: popoverEl
|
|
223
|
+
}, [
|
|
224
|
+
_cache[5] || (_cache[5] = createElementVNode("div", { class: "m-form-validate__warning" }, "输入内容前后有空格,是否移除空格?", -1)),
|
|
225
|
+
createElementVNode("div", _hoisted_8, [createVNode(unref(TMagicButton), {
|
|
226
|
+
link: "",
|
|
227
|
+
size: "small",
|
|
228
|
+
onClick: _cache[2] || (_cache[2] = ($event) => popoverVisible.value = false)
|
|
229
|
+
}, {
|
|
230
|
+
default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("保持原样", -1)])]),
|
|
231
|
+
_: 1
|
|
232
|
+
}), createVNode(unref(TMagicButton), {
|
|
233
|
+
type: "primary",
|
|
234
|
+
size: "small",
|
|
235
|
+
onClick: confirmTrimHandler
|
|
236
|
+
}, {
|
|
237
|
+
default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("移除空格", -1)])]),
|
|
238
|
+
_: 1
|
|
239
|
+
})]),
|
|
240
|
+
_cache[6] || (_cache[6] = createElementVNode("span", {
|
|
241
|
+
class: "tmagic-form-text-popper-arrow",
|
|
242
|
+
"data-popper-arrow": ""
|
|
243
|
+
}, null, -1))
|
|
244
|
+
], 512)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
|
|
245
|
+
], 2);
|
|
211
246
|
};
|
|
212
247
|
}
|
|
213
248
|
});
|
|
@@ -15,7 +15,10 @@ var Textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
|
|
|
15
15
|
disabled: { type: Boolean },
|
|
16
16
|
size: {},
|
|
17
17
|
lastValues: {},
|
|
18
|
-
isCompare: { type: Boolean }
|
|
18
|
+
isCompare: { type: Boolean },
|
|
19
|
+
text: {},
|
|
20
|
+
labelWidth: {},
|
|
21
|
+
labelPosition: {}
|
|
19
22
|
},
|
|
20
23
|
emits: ["change", "input"],
|
|
21
24
|
setup(__props, { emit: __emit }) {
|
|
@@ -15,7 +15,10 @@ var Time_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
|
|
|
15
15
|
disabled: { type: Boolean },
|
|
16
16
|
size: {},
|
|
17
17
|
lastValues: {},
|
|
18
|
-
isCompare: { type: Boolean }
|
|
18
|
+
isCompare: { type: Boolean },
|
|
19
|
+
text: {},
|
|
20
|
+
labelWidth: {},
|
|
21
|
+
labelPosition: {}
|
|
19
22
|
},
|
|
20
23
|
emits: ["change"],
|
|
21
24
|
setup(__props, { emit: __emit }) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { useAddField } from "../utils/useAddField.js";
|
|
2
1
|
import { datetimeFormatter } from "../utils/form.js";
|
|
2
|
+
import { useAddField } from "../utils/useAddField.js";
|
|
3
3
|
import { createBlock, defineComponent, onUnmounted, openBlock, ref, unref, watch } from "vue";
|
|
4
|
-
import { TMagicTimePicker } from "@tmagic/design";
|
|
5
4
|
import dayjs from "dayjs";
|
|
5
|
+
import { TMagicTimePicker } from "@tmagic/design";
|
|
6
6
|
//#region packages/form/src/fields/Timerange.vue?vue&type=script&setup=true&lang.ts
|
|
7
7
|
var Timerange_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
8
8
|
name: "MFormTimeRange",
|
|
@@ -17,7 +17,10 @@ var Timerange_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
17
17
|
disabled: { type: Boolean },
|
|
18
18
|
size: {},
|
|
19
19
|
lastValues: {},
|
|
20
|
-
isCompare: { type: Boolean }
|
|
20
|
+
isCompare: { type: Boolean },
|
|
21
|
+
text: {},
|
|
22
|
+
labelWidth: {},
|
|
23
|
+
labelPosition: {}
|
|
21
24
|
},
|
|
22
25
|
emits: ["change"],
|
|
23
26
|
setup(__props, { emit: __emit }) {
|
package/dist/es/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import "./_virtual/_rolldown/runtime.js";
|
|
2
2
|
import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "./schema.js";
|
|
3
|
+
import { clearTypeMatchRules, deleteTypeMatchRule, getTypeMatchRule, registerTypeMatchRule, registerTypeMatchRules, validateTypeMatch } from "./utils/typeMatch.js";
|
|
4
|
+
import { adaptFormValidator, applyExtendState, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange } from "./utils/form.js";
|
|
3
5
|
import { useAddField } from "./utils/useAddField.js";
|
|
4
6
|
import Hidden_default from "./fields/Hidden.js";
|
|
5
7
|
import { deleteField, getField, registerField } from "./utils/config.js";
|
|
6
|
-
import { clearTypeMatchRules, deleteTypeMatchRule, getTypeMatchRule, registerTypeMatchRule, registerTypeMatchRules, validateTypeMatch } from "./utils/typeMatch.js";
|
|
7
|
-
import { adaptFormValidator, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange } from "./utils/form.js";
|
|
8
8
|
import Container_default from "./containers/Container.js";
|
|
9
9
|
import Form_default from "./Form.js";
|
|
10
10
|
import { stripTabItemsLazy, submitForm, validateForm } from "./submitForm.js";
|
|
@@ -40,4 +40,4 @@ import plugin_default from "./plugin.js";
|
|
|
40
40
|
export * from "@tmagic/form-schema";
|
|
41
41
|
var createForm = (config) => config;
|
|
42
42
|
//#endregion
|
|
43
|
-
export { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY, Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, adaptFormValidator, clearTypeMatchRules, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, deleteTypeMatchRule, display, filterFunction, getDataByPage, getField as getFormField, getRules, getTypeMatchRule, initValue, registerField as registerFormField, registerTypeMatchRule, registerTypeMatchRules, sortArray, sortChange, stripTabItemsLazy, submitForm, useAddField, validateForm, validateTypeMatch };
|
|
43
|
+
export { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY, Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, adaptFormValidator, applyExtendState, clearTypeMatchRules, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, deleteTypeMatchRule, display, filterFunction, getDataByPage, getField as getFormField, getRules, getTypeMatchRule, initValue, registerField as registerFormField, registerTypeMatchRule, registerTypeMatchRules, sortArray, sortChange, stripTabItemsLazy, submitForm, useAddField, validateForm, validateTypeMatch };
|
package/dist/es/plugin.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
import { registerTypeMatchRules } from "./utils/typeMatch.js";
|
|
1
2
|
import Hidden_default from "./fields/Hidden.js";
|
|
2
3
|
import { setConfig } from "./utils/config.js";
|
|
3
|
-
import { registerTypeMatchRules } from "./utils/typeMatch.js";
|
|
4
4
|
import Container_default from "./containers/Container.js";
|
|
5
5
|
import Form_default from "./Form.js";
|
|
6
6
|
import FormDialog_default from "./FormDialog.js";
|
|
7
|
+
import FormDrawer_default from "./FormDrawer.js";
|
|
7
8
|
import Fieldset_default from "./containers/Fieldset.js";
|
|
8
9
|
import FlexLayout_default from "./containers/FlexLayout.js";
|
|
9
10
|
import Panel_default from "./containers/Panel.js";
|
|
@@ -40,6 +41,7 @@ var plugin_default = { install(app, opt = {}) {
|
|
|
40
41
|
if (option.typeMatchRules) registerTypeMatchRules(option.typeMatchRules);
|
|
41
42
|
app.component("m-form", Form_default);
|
|
42
43
|
app.component("m-form-dialog", FormDialog_default);
|
|
44
|
+
app.component("m-form-drawer", FormDrawer_default);
|
|
43
45
|
app.component("m-form-container", Container_default);
|
|
44
46
|
app.component("m-form-fieldset", Fieldset_default);
|
|
45
47
|
app.component("m-form-group-list", TableGroupList_default);
|
package/dist/es/style.css
CHANGED
|
@@ -16,6 +16,9 @@
|
|
|
16
16
|
.m-form-container .tmagic-design-form-item.show-before-diff {
|
|
17
17
|
background: #f7dadd;
|
|
18
18
|
}
|
|
19
|
+
.m-form-container .m-form-title-extra {
|
|
20
|
+
margin-left: 8px;
|
|
21
|
+
}
|
|
19
22
|
|
|
20
23
|
.m-form-dialog .el-dialog__body {
|
|
21
24
|
padding: 0 !important;
|
|
@@ -76,6 +79,10 @@
|
|
|
76
79
|
margin-bottom: var(--td-comp-margin-xxl);
|
|
77
80
|
}
|
|
78
81
|
|
|
82
|
+
.m-form-container .m-form-container-expand {
|
|
83
|
+
text-align: center;
|
|
84
|
+
}
|
|
85
|
+
|
|
79
86
|
.magic-datetime-picker-popper .el-picker-panel__footer button:first-child {
|
|
80
87
|
display: none;
|
|
81
88
|
}
|
|
@@ -85,6 +92,24 @@
|
|
|
85
92
|
align-items: center;
|
|
86
93
|
width: 100%;
|
|
87
94
|
}
|
|
95
|
+
.m-fields-text--static {
|
|
96
|
+
gap: 6px;
|
|
97
|
+
min-height: 32px;
|
|
98
|
+
}
|
|
99
|
+
.m-fields-text--static .m-fields-text__prepend {
|
|
100
|
+
color: var(--el-text-color-secondary, #909399);
|
|
101
|
+
}
|
|
102
|
+
.m-fields-text--static .m-fields-text__value {
|
|
103
|
+
color: var(--el-text-color-regular, #606266);
|
|
104
|
+
overflow: hidden;
|
|
105
|
+
text-overflow: ellipsis;
|
|
106
|
+
white-space: nowrap;
|
|
107
|
+
}
|
|
108
|
+
.m-fields-text--static .m-fields-text__icon {
|
|
109
|
+
width: 16px;
|
|
110
|
+
height: 16px;
|
|
111
|
+
cursor: pointer;
|
|
112
|
+
}
|
|
88
113
|
|
|
89
114
|
.m-form-validate__warning {
|
|
90
115
|
color: var(--el-color-warning);
|
|
@@ -110,6 +135,16 @@
|
|
|
110
135
|
outline: none;
|
|
111
136
|
}
|
|
112
137
|
|
|
138
|
+
.m-container-text.m-fields-title-container .tmagic-design-form-item .el-form-item__label {
|
|
139
|
+
color: #0f1113;
|
|
140
|
+
font-weight: 500;
|
|
141
|
+
font-size: 16px;
|
|
142
|
+
}
|
|
143
|
+
.m-container-text.m-fields-title-container .tmagic-design-form-item {
|
|
144
|
+
line-height: 24px;
|
|
145
|
+
margin-bottom: 16px;
|
|
146
|
+
}
|
|
147
|
+
|
|
113
148
|
.tmagic-form-text-popper[data-popper-placement^=top] > .tmagic-form-text-popper-arrow {
|
|
114
149
|
bottom: -4px;
|
|
115
150
|
}
|
|
@@ -148,6 +183,66 @@ div.m-fields-link {
|
|
|
148
183
|
width: fit-content;
|
|
149
184
|
}
|
|
150
185
|
|
|
186
|
+
a.magic-admin-link {
|
|
187
|
+
width: 100%;
|
|
188
|
+
box-sizing: border-box;
|
|
189
|
+
border-radius: 4px;
|
|
190
|
+
border: 1px solid #e6e6e6;
|
|
191
|
+
background-color: #fafafa;
|
|
192
|
+
padding: 0 8px;
|
|
193
|
+
height: 28px;
|
|
194
|
+
display: inline-flex;
|
|
195
|
+
gap: 4px;
|
|
196
|
+
align-items: center;
|
|
197
|
+
text-decoration: none;
|
|
198
|
+
}
|
|
199
|
+
a.magic-admin-link i {
|
|
200
|
+
margin-right: 4px;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.m-container-fieldset.no-border-fieldset.fieldset-in-row > fieldset.m-fieldset legend {
|
|
204
|
+
left: 0;
|
|
205
|
+
}
|
|
206
|
+
.m-container-fieldset.no-border-fieldset > fieldset.m-fieldset {
|
|
207
|
+
border: 0;
|
|
208
|
+
}
|
|
209
|
+
.m-container-fieldset.no-border-fieldset > fieldset.m-fieldset legend {
|
|
210
|
+
position: relative;
|
|
211
|
+
left: -5px;
|
|
212
|
+
font-size: 16px;
|
|
213
|
+
font-weight: 500;
|
|
214
|
+
line-height: 24px;
|
|
215
|
+
padding: 0;
|
|
216
|
+
}
|
|
217
|
+
.m-container-fieldset.fieldset-in-card-fit {
|
|
218
|
+
border-bottom: 1px solid #e6e6e6;
|
|
219
|
+
}
|
|
220
|
+
.m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset {
|
|
221
|
+
padding: 16px 0 16px 0 !important;
|
|
222
|
+
border: 0;
|
|
223
|
+
margin-top: 0;
|
|
224
|
+
margin-bottom: 0;
|
|
225
|
+
}
|
|
226
|
+
.m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset legend {
|
|
227
|
+
position: relative;
|
|
228
|
+
top: 10px;
|
|
229
|
+
background-color: transparent;
|
|
230
|
+
}
|
|
231
|
+
.m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-last {
|
|
232
|
+
padding-bottom: 0 !important;
|
|
233
|
+
border-bottom: 0;
|
|
234
|
+
}
|
|
235
|
+
.m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-first {
|
|
236
|
+
padding-top: 0 !important;
|
|
237
|
+
}
|
|
238
|
+
.m-container-fieldset.fieldset-in-card-fit:last-child {
|
|
239
|
+
padding-bottom: 0 !important;
|
|
240
|
+
border-bottom: 0;
|
|
241
|
+
}
|
|
242
|
+
.m-container-fieldset.fieldset-in-card-fit:first {
|
|
243
|
+
padding-top: 0 !important;
|
|
244
|
+
}
|
|
245
|
+
|
|
151
246
|
fieldset.m-fieldset {
|
|
152
247
|
position: relative;
|
|
153
248
|
border: 1px solid rgb(229, 229, 229);
|
|
@@ -174,6 +269,9 @@ fieldset.m-fieldset .m-form-tip {
|
|
|
174
269
|
margin-left: 5px;
|
|
175
270
|
}
|
|
176
271
|
|
|
272
|
+
.m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
|
|
273
|
+
border: 0;
|
|
274
|
+
}
|
|
177
275
|
.m-fields-group-list .el-button--text {
|
|
178
276
|
padding: 0;
|
|
179
277
|
margin-bottom: 7px;
|
|
@@ -192,23 +290,23 @@ fieldset.m-fieldset .m-form-tip {
|
|
|
192
290
|
.m-fields-group-list .m-fields-group-list-item:last-of-type {
|
|
193
291
|
border-bottom: 0;
|
|
194
292
|
}
|
|
195
|
-
.m-fields-group-list .
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
padding: 5px 0;
|
|
293
|
+
.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-header {
|
|
294
|
+
display: flex;
|
|
295
|
+
align-items: center;
|
|
296
|
+
gap: 8px;
|
|
200
297
|
}
|
|
201
298
|
.m-fields-group-list .m-fields-group-list-footer {
|
|
202
299
|
display: flex;
|
|
203
300
|
justify-content: space-between;
|
|
204
301
|
margin-top: 10px;
|
|
302
|
+
margin-bottom: 16px;
|
|
205
303
|
}
|
|
206
304
|
|
|
207
305
|
.m-form-panel .el-card__header:hover {
|
|
208
306
|
background: #f2f6fc;
|
|
209
307
|
}
|
|
210
308
|
.m-form-panel .el-card__header a {
|
|
211
|
-
color: #409eff;
|
|
309
|
+
color: var(--el-color-primary, #409eff);
|
|
212
310
|
}
|
|
213
311
|
.m-form-panel .el-card__body {
|
|
214
312
|
padding: 10px;
|
|
@@ -291,8 +389,8 @@ fieldset.m-fieldset .m-form-tip {
|
|
|
291
389
|
margin-right: auto;
|
|
292
390
|
min-width: 50px;
|
|
293
391
|
outline: none;
|
|
294
|
-
border-color: #409eff;
|
|
295
|
-
color: #409eff;
|
|
392
|
+
border-color: var(--el-color-primary, #409eff);
|
|
393
|
+
color: var(--el-color-primary, #409eff);
|
|
296
394
|
width: 10px;
|
|
297
395
|
}
|
|
298
396
|
.magic-form-dynamic-tab .el-tabs__header.is-top .el-tabs__new-tab::before {
|
|
@@ -329,4 +427,20 @@ fieldset.m-fieldset .m-form-tip {
|
|
|
329
427
|
display: flex;
|
|
330
428
|
align-items: center;
|
|
331
429
|
justify-content: space-between;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.m-fields-radio-group__option {
|
|
433
|
+
display: flex;
|
|
434
|
+
align-items: center;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
.m-fields-radio-group__text {
|
|
438
|
+
display: inline-block;
|
|
439
|
+
vertical-align: middle;
|
|
440
|
+
white-space: pre-line;
|
|
441
|
+
line-height: 20px;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.m-fields-radio-group__icon_with_text {
|
|
445
|
+
margin-right: 8px;
|
|
332
446
|
}/*$vite$:1*/
|
package/dist/es/submitForm.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { applyExtendState } from "./utils/form.js";
|
|
1
2
|
import Form_default from "./Form.js";
|
|
2
3
|
import { createApp, defineComponent, h, nextTick, ref, watch } from "vue";
|
|
3
4
|
//#region packages/form/src/submitForm.ts
|
|
@@ -52,14 +53,7 @@ var mountFormInstance = (options) => {
|
|
|
52
53
|
console.error("[MForm] extendState failed:", e);
|
|
53
54
|
return;
|
|
54
55
|
}
|
|
55
|
-
const apply = (state) =>
|
|
56
|
-
if (!state) return;
|
|
57
|
-
for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) if ("value" in descriptor) form.formState[key] = state[key];
|
|
58
|
-
else {
|
|
59
|
-
descriptor.configurable = true;
|
|
60
|
-
Object.defineProperty(form.formState, key, descriptor);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
56
|
+
const apply = (state) => applyExtendState(form.formState, state);
|
|
63
57
|
if (result && typeof result.then === "function") result.then(apply, (e) => console.error("[MForm] extendState failed:", e));
|
|
64
58
|
else apply(result);
|
|
65
59
|
}, {
|
package/dist/es/utils/config.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
import { ref } from "vue";
|
|
1
2
|
//#region packages/form/src/utils/config.ts
|
|
2
3
|
var $MAGIC_FORM = {};
|
|
4
|
+
var isGlobalFlat = ref(false);
|
|
3
5
|
var setConfig = (option) => {
|
|
4
6
|
$MAGIC_FORM = option;
|
|
7
|
+
isGlobalFlat.value = option.flat ?? false;
|
|
5
8
|
};
|
|
6
9
|
var getConfig = (key) => $MAGIC_FORM[key];
|
|
7
10
|
var fieldRegistry = /* @__PURE__ */ new Map();
|
|
@@ -12,4 +15,4 @@ var registerField = (tagName, component) => {
|
|
|
12
15
|
var getField = (tagName) => fieldRegistry.get(tagName);
|
|
13
16
|
var deleteField = (tagName) => fieldRegistry.delete(tagName);
|
|
14
17
|
//#endregion
|
|
15
|
-
export { deleteField, getConfig, getField, registerField, setConfig };
|
|
18
|
+
export { deleteField, getConfig, getField, isGlobalFlat, registerField, setConfig };
|
package/dist/es/utils/form.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { createTypeMatchValidator } from "./typeMatch.js";
|
|
2
2
|
import { readonly } from "vue";
|
|
3
|
+
import dayjs from "dayjs";
|
|
4
|
+
import utc from "dayjs/plugin/utc";
|
|
3
5
|
import { cloneDeep } from "lodash-es";
|
|
4
6
|
import { getDesignConfig } from "@tmagic/design";
|
|
5
7
|
import { getValueByKeyPath } from "@tmagic/utils";
|
|
6
|
-
import dayjs from "dayjs";
|
|
7
|
-
import utc from "dayjs/plugin/utc";
|
|
8
8
|
//#region packages/form/src/utils/form.ts
|
|
9
9
|
var isTDesignAdapter = () => getDesignConfig("adapterType") === "tdesign-vue-next";
|
|
10
10
|
/**
|
|
@@ -203,6 +203,36 @@ var sortChange = (data, { prop, order }) => {
|
|
|
203
203
|
if (order === "ascending") data.sort((a, b) => a[prop] - b[prop]);
|
|
204
204
|
else if (order === "descending") data.sort((a, b) => b[prop] - a[prop]);
|
|
205
205
|
};
|
|
206
|
+
/**
|
|
207
|
+
* 将 extendState 返回的扩展字段合并进 formState。
|
|
208
|
+
*
|
|
209
|
+
* - data 描述符(普通字段)通过 `formState[key] = value` 写入,走 reactive proxy 的 set,
|
|
210
|
+
* 触发依赖通知;
|
|
211
|
+
* - accessor 描述符(`{ get stage() { return ... } }`)按原样 defineProperty,调用方
|
|
212
|
+
* 可控制读时求值;强制 `configurable: true` 以便下一次合并可再 define。
|
|
213
|
+
*
|
|
214
|
+
* 注意:formState 上由 props 派生的字段(keyProp / popperClass / config / initValues /
|
|
215
|
+
* isCompare / lastValues / parentValues)是只读 getter(无 setter),extendState 若以
|
|
216
|
+
* 普通字段形式返回同名 key,直接赋值会让 proxy 的 set trap 失败并抛出
|
|
217
|
+
* `TypeError: 'set' on proxy: trap returned falsish`,这里统一跳过并告警;
|
|
218
|
+
* 如确需覆盖,可在 extendState 中以 get 访问器形式返回。
|
|
219
|
+
*/
|
|
220
|
+
var applyExtendState = (formState, state) => {
|
|
221
|
+
if (!state) return;
|
|
222
|
+
for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) {
|
|
223
|
+
if (!("value" in descriptor)) {
|
|
224
|
+
descriptor.configurable = true;
|
|
225
|
+
Object.defineProperty(formState, key, descriptor);
|
|
226
|
+
continue;
|
|
227
|
+
}
|
|
228
|
+
const targetDescriptor = Object.getOwnPropertyDescriptor(formState, key);
|
|
229
|
+
if (targetDescriptor && !("value" in targetDescriptor) && typeof targetDescriptor.set !== "function") {
|
|
230
|
+
console.warn(`[MForm] extendState: "${key}" is a read-only field derived from props and cannot be assigned a plain value. Return it as a getter accessor if you really need to override it.`);
|
|
231
|
+
continue;
|
|
232
|
+
}
|
|
233
|
+
formState[key] = state[key];
|
|
234
|
+
}
|
|
235
|
+
};
|
|
206
236
|
var createObjectProp = (prop, key, name) => {
|
|
207
237
|
if (prop === "") return key;
|
|
208
238
|
const itemPath = `${prop}`.split(".");
|
|
@@ -212,4 +242,4 @@ var createObjectProp = (prop, key, name) => {
|
|
|
212
242
|
return `${[...itemPath, key].join(".")}`;
|
|
213
243
|
};
|
|
214
244
|
//#endregion
|
|
215
|
-
export { adaptFormValidator, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange };
|
|
245
|
+
export { adaptFormValidator, applyExtendState, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { readonly } from "vue";
|
|
2
|
+
import dayjs from "dayjs";
|
|
2
3
|
import { appendValidateSuggestion } from "@tmagic/design";
|
|
3
4
|
import { getValueByKeyPath, toLine } from "@tmagic/utils";
|
|
4
|
-
import dayjs from "dayjs";
|
|
5
5
|
import customParseFormat from "dayjs/plugin/customParseFormat";
|
|
6
6
|
//#region packages/form/src/utils/typeMatch.ts
|
|
7
7
|
dayjs.extend(customParseFormat);
|