@tmagic/form 1.8.0-beta.13 → 1.8.0-beta.15
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/Col.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js +27 -19
- 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 +4 -4
- package/dist/es/plugin.js +3 -1
- package/dist/es/schema.js +11 -1
- package/dist/es/style.css +122 -8
- package/dist/es/submitForm.js +13 -11
- package/dist/es/utils/config.js +4 -1
- package/dist/es/utils/form.js +33 -3
- package/dist/es/utils/typeMatch.js +3 -1
- package/dist/style.css +122 -8
- package/dist/themes/magic-admin.css +499 -0
- package/dist/tmagic-form.umd.cjs +568 -300
- 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/Col.vue +1 -0
- package/src/containers/Container.vue +21 -6
- 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/schema.ts +11 -0
- package/src/submitForm.ts +34 -15
- 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/src/utils/typeMatch.ts +10 -1
- package/types/index.d.ts +77 -5
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "./schema.js";
|
|
2
|
+
import { applyExtendState, initValue } from "./utils/form.js";
|
|
2
3
|
import { getConfig } from "./utils/config.js";
|
|
3
|
-
import { initValue } from "./utils/form.js";
|
|
4
4
|
import Container_default from "./containers/Container.js";
|
|
5
|
-
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, mergeProps, nextTick, normalizeStyle, openBlock, provide, reactive, ref, renderList, renderSlot, shallowRef, toRaw, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
|
|
5
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, provide, reactive, ref, renderList, renderSlot, shallowRef, toRaw, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
|
|
6
6
|
import { cloneDeep, isEqual } from "lodash-es";
|
|
7
|
-
import { TMagicForm, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
|
|
7
|
+
import { M_THEME_KEY, TMagicForm, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
|
|
8
8
|
import { setValueByKeyPath } from "@tmagic/utils";
|
|
9
9
|
//#region packages/form/src/Form.vue?vue&type=script&setup=true&lang.ts
|
|
10
10
|
var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
@@ -42,7 +42,8 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
|
|
|
42
42
|
},
|
|
43
43
|
extendState: {},
|
|
44
44
|
showDiff: {},
|
|
45
|
-
selfDiffFieldTypes: {}
|
|
45
|
+
selfDiffFieldTypes: {},
|
|
46
|
+
theme: {}
|
|
46
47
|
},
|
|
47
48
|
emits: [
|
|
48
49
|
"change",
|
|
@@ -62,6 +63,25 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
|
|
|
62
63
|
const fields = /* @__PURE__ */ new Map();
|
|
63
64
|
const requestFuc = getConfig("request");
|
|
64
65
|
/**
|
|
66
|
+
* 当前表单生效的主题名称:
|
|
67
|
+
* - 优先用本组件自己的 `props.theme`;
|
|
68
|
+
* - 没设置时回退到最近祖先 `<MEditor>` / `<MForm>` provide 的主题,便于内嵌于编辑器
|
|
69
|
+
* 时自动跟随外层主题,无需在每个 `MForm` 上重复传 `theme`。
|
|
70
|
+
*
|
|
71
|
+
* 同时把合并后的值再 provide 出去(见下方 `provide(M_THEME_KEY, ...)`),让 form 子树
|
|
72
|
+
* 里再嵌套的 portal 组件(`TMagicPopover` 等)依然能拿到非空主题。
|
|
73
|
+
*/
|
|
74
|
+
const ancestorTheme = inject(M_THEME_KEY, null);
|
|
75
|
+
const effectiveTheme = computed(() => props.theme || ancestorTheme?.value || "");
|
|
76
|
+
/**
|
|
77
|
+
* 拼到 `formState.popperClass` 上的主题修饰类(仅 `m-theme--<theme>`,
|
|
78
|
+
* 不带 `m-form` / `m-editor` 前缀,因为 Element Plus 弹层节点本身既不是 form 也不是 editor)。
|
|
79
|
+
*
|
|
80
|
+
* 这条类会随所有读 `mForm.popperClass` 的字段(Select / DateTime / Cascader 等)下发到
|
|
81
|
+
* Element Plus 的 `popper-class`,让 portal 节点也命中 `m-theme--<theme>` 上的 CSS 变量。
|
|
82
|
+
*/
|
|
83
|
+
const themeClass = computed(() => effectiveTheme.value ? `m-theme--${effectiveTheme.value}` : "");
|
|
84
|
+
/**
|
|
65
85
|
* formState 实现说明:
|
|
66
86
|
*
|
|
67
87
|
* 1. 与 props 直接对应的字段(config / initValues / lastValues / isCompare / parentValues /
|
|
@@ -77,13 +97,21 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
|
|
|
77
97
|
* 把最新值刷进 formState。
|
|
78
98
|
* - accessor 描述符(`{ get stage() { return ... } }`)按原样写入,调用方可以控制
|
|
79
99
|
* 读时求值,每次读取都会重新执行 getter。
|
|
100
|
+
*
|
|
101
|
+
* 4. `popperClass` 会自动拼接 `themeClass`:调用方传入的 `popperClass` + 当前主题
|
|
102
|
+
* 修饰类(含祖先 `<MEditor>` provide 的主题)。这样所有透传到 Element Plus 弹层
|
|
103
|
+
* `popper-class` 的字段(Select / DateTime / Cascader 等)能自带主题作用域。
|
|
80
104
|
*/
|
|
81
105
|
const formState = reactive({
|
|
82
106
|
get keyProp() {
|
|
83
107
|
return props.keyProp;
|
|
84
108
|
},
|
|
85
109
|
get popperClass() {
|
|
86
|
-
|
|
110
|
+
const userClass = props.popperClass ?? "";
|
|
111
|
+
const tc = themeClass.value;
|
|
112
|
+
if (!userClass) return tc;
|
|
113
|
+
if (!tc) return userClass;
|
|
114
|
+
return `${userClass} ${tc}`;
|
|
87
115
|
},
|
|
88
116
|
get config() {
|
|
89
117
|
return props.config;
|
|
@@ -131,11 +159,10 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
|
|
|
131
159
|
* 这里不再重复同步;因此 `props.initValues` 这类高频变化也不会再触发
|
|
132
160
|
* `extendState` 重跑(旧版的性能问题修复点)。
|
|
133
161
|
*
|
|
134
|
-
*
|
|
135
|
-
*
|
|
136
|
-
*
|
|
137
|
-
*
|
|
138
|
-
* 可以自行控制读时求值;强制 `configurable: true` 以便下一次重跑可再 define。
|
|
162
|
+
* 实现细节:合并逻辑统一收口在 `applyExtendState`(utils/form)——
|
|
163
|
+
* data 描述符走 reactive proxy 的 set 触发依赖通知(与旧版「逐项赋值」语义等价),
|
|
164
|
+
* accessor 描述符按原样 defineProperty 支持读时求值;
|
|
165
|
+
* props 派生的只读 getter 字段(keyProp 等)以普通字段形式返回时会被跳过并告警。
|
|
139
166
|
*/
|
|
140
167
|
watchEffect(async (onCleanup) => {
|
|
141
168
|
const { extendState } = props;
|
|
@@ -152,13 +179,16 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
|
|
|
152
179
|
return;
|
|
153
180
|
}
|
|
154
181
|
if (stale) return;
|
|
155
|
-
|
|
156
|
-
else {
|
|
157
|
-
descriptor.configurable = true;
|
|
158
|
-
Object.defineProperty(formState, key, descriptor);
|
|
159
|
-
}
|
|
182
|
+
applyExtendState(formState, state);
|
|
160
183
|
});
|
|
161
184
|
provide("mForm", formState);
|
|
185
|
+
/**
|
|
186
|
+
* 把生效主题(自身或祖先)再 provide 出去,供 form 子树内含 `Teleport` 的组件
|
|
187
|
+
* (如 `TMagicPopover`)在传送目标上挂 `m-theme--<theme>` 类。
|
|
188
|
+
* 详见 `@tmagic/design/theme.ts`。
|
|
189
|
+
*/
|
|
190
|
+
provide(M_THEME_KEY, effectiveTheme);
|
|
191
|
+
provide("formInline", props.inline);
|
|
162
192
|
provide(FORM_DIFF_CONFIG_KEY, {
|
|
163
193
|
get showDiff() {
|
|
164
194
|
return props.showDiff;
|
|
@@ -299,7 +329,11 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
|
|
|
299
329
|
});
|
|
300
330
|
return (_ctx, _cache) => {
|
|
301
331
|
return openBlock(), createBlock(unref(TMagicForm), {
|
|
302
|
-
class:
|
|
332
|
+
class: normalizeClass([
|
|
333
|
+
"m-form",
|
|
334
|
+
effectiveTheme.value ? `m-form--${effectiveTheme.value}` : "",
|
|
335
|
+
effectiveTheme.value ? `m-theme--${effectiveTheme.value}` : ""
|
|
336
|
+
]),
|
|
303
337
|
ref: "tMagicForm",
|
|
304
338
|
model: values.value,
|
|
305
339
|
"label-width": __props.labelWidth,
|
|
@@ -337,6 +371,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
|
|
|
337
371
|
}), 128)) : createCommentVNode("v-if", true)]),
|
|
338
372
|
_: 3
|
|
339
373
|
}, 8, [
|
|
374
|
+
"class",
|
|
340
375
|
"model",
|
|
341
376
|
"label-width",
|
|
342
377
|
"style",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Form_default from "./Form.js";
|
|
2
|
-
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, withCtx } from "vue";
|
|
3
|
-
import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from "@tmagic/design";
|
|
2
|
+
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, provide, ref, renderSlot, toDisplayString, unref, withCtx } from "vue";
|
|
3
|
+
import { M_THEME_KEY, TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from "@tmagic/design";
|
|
4
4
|
//#region packages/form/src/FormDialog.vue?vue&type=script&setup=true&lang.ts
|
|
5
5
|
var _hoisted_1 = { style: { "min-height": "1px" } };
|
|
6
6
|
var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
@@ -46,7 +46,8 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
46
46
|
type: Boolean,
|
|
47
47
|
default: true
|
|
48
48
|
},
|
|
49
|
-
extendState: {}
|
|
49
|
+
extendState: {},
|
|
50
|
+
theme: {}
|
|
50
51
|
},
|
|
51
52
|
emits: [
|
|
52
53
|
"close",
|
|
@@ -56,6 +57,9 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
56
57
|
],
|
|
57
58
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
58
59
|
const props = __props;
|
|
60
|
+
const ancestorTheme = inject(M_THEME_KEY, null);
|
|
61
|
+
const effectiveTheme = computed(() => props.theme || ancestorTheme?.value || "");
|
|
62
|
+
provide(M_THEME_KEY, effectiveTheme);
|
|
59
63
|
const emit = __emit;
|
|
60
64
|
const form = ref();
|
|
61
65
|
const dialogVisible = ref(false);
|
|
@@ -116,7 +120,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
116
120
|
return openBlock(), createBlock(unref(TMagicDialog), {
|
|
117
121
|
modelValue: dialogVisible.value,
|
|
118
122
|
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => dialogVisible.value = $event),
|
|
119
|
-
class: "m-form-dialog",
|
|
123
|
+
class: normalizeClass(["m-form-dialog", effectiveTheme.value ? `m-theme--${effectiveTheme.value}` : ""]),
|
|
120
124
|
top: "20px",
|
|
121
125
|
"append-to-body": "",
|
|
122
126
|
title: __props.title,
|
|
@@ -200,6 +204,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
200
204
|
"use-field-text-in-error": __props.useFieldTextInError,
|
|
201
205
|
"type-match-valid": __props.typeMatchValid,
|
|
202
206
|
"extend-state": __props.extendState,
|
|
207
|
+
theme: effectiveTheme.value,
|
|
203
208
|
onChange: changeHandler
|
|
204
209
|
}, null, 8, [
|
|
205
210
|
"modelValue",
|
|
@@ -214,11 +219,13 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
214
219
|
"prevent-submit-default",
|
|
215
220
|
"use-field-text-in-error",
|
|
216
221
|
"type-match-valid",
|
|
217
|
-
"extend-state"
|
|
222
|
+
"extend-state",
|
|
223
|
+
"theme"
|
|
218
224
|
]), renderSlot(_ctx.$slots, "default")], 4)) : createCommentVNode("v-if", true)]),
|
|
219
225
|
_: 3
|
|
220
226
|
}, 8, [
|
|
221
227
|
"modelValue",
|
|
228
|
+
"class",
|
|
222
229
|
"title",
|
|
223
230
|
"width",
|
|
224
231
|
"zIndex",
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import Form_default from "./Form.js";
|
|
2
|
-
import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderSlot, toDisplayString, unref, watchEffect, withCtx } from "vue";
|
|
3
|
-
import { TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from "@tmagic/design";
|
|
2
|
+
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, provide, ref, renderSlot, toDisplayString, unref, watchEffect, withCtx } from "vue";
|
|
3
|
+
import { M_THEME_KEY, TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from "@tmagic/design";
|
|
4
4
|
//#region packages/form/src/FormDrawer.vue?vue&type=script&setup=true&lang.ts
|
|
5
5
|
var _hoisted_1 = { style: { "min-height": "1px" } };
|
|
6
6
|
var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
7
|
-
name: "
|
|
7
|
+
name: "MFormDrawer",
|
|
8
8
|
__name: "FormDrawer",
|
|
9
9
|
props: {
|
|
10
10
|
config: { default: () => [] },
|
|
@@ -30,7 +30,8 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
30
30
|
default: true
|
|
31
31
|
},
|
|
32
32
|
beforeClose: {},
|
|
33
|
-
extendState: {}
|
|
33
|
+
extendState: {},
|
|
34
|
+
theme: {}
|
|
34
35
|
},
|
|
35
36
|
emits: [
|
|
36
37
|
"close",
|
|
@@ -42,11 +43,15 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
42
43
|
"opened"
|
|
43
44
|
],
|
|
44
45
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
46
|
+
const props = __props;
|
|
47
|
+
const ancestorTheme = inject(M_THEME_KEY, null);
|
|
48
|
+
const effectiveTheme = computed(() => props.theme || ancestorTheme?.value || "");
|
|
49
|
+
provide(M_THEME_KEY, effectiveTheme);
|
|
45
50
|
const emit = __emit;
|
|
46
51
|
const drawer = ref();
|
|
47
52
|
const form = ref();
|
|
48
53
|
const drawerBody = ref();
|
|
49
|
-
const
|
|
54
|
+
const dialogVisible = ref(false);
|
|
50
55
|
const saveFetch = ref(false);
|
|
51
56
|
const bodyHeight = ref(0);
|
|
52
57
|
watchEffect(() => {
|
|
@@ -77,30 +82,48 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
77
82
|
emit("closed");
|
|
78
83
|
};
|
|
79
84
|
const show = () => {
|
|
80
|
-
|
|
85
|
+
dialogVisible.value = true;
|
|
81
86
|
};
|
|
82
87
|
const hide = () => {
|
|
83
|
-
|
|
88
|
+
dialogVisible.value = false;
|
|
89
|
+
};
|
|
90
|
+
const close = () => {
|
|
91
|
+
dialogVisible.value = false;
|
|
92
|
+
};
|
|
93
|
+
const cancel = () => {
|
|
94
|
+
hide();
|
|
84
95
|
};
|
|
85
96
|
/** 用于关闭 Drawer, 该方法会调用传入的 before-close 方法 */
|
|
86
97
|
const handleClose = () => {
|
|
87
98
|
drawer.value?.handleClose();
|
|
88
99
|
};
|
|
100
|
+
const save = async () => {
|
|
101
|
+
try {
|
|
102
|
+
const changeRecords = [...form.value?.changeRecords || []];
|
|
103
|
+
const values = await form.value?.submitForm();
|
|
104
|
+
emit("submit", values, { changeRecords });
|
|
105
|
+
} catch (e) {
|
|
106
|
+
emit("error", e);
|
|
107
|
+
}
|
|
108
|
+
};
|
|
89
109
|
__expose({
|
|
90
110
|
form,
|
|
91
111
|
saveFetch,
|
|
92
112
|
bodyHeight,
|
|
113
|
+
close,
|
|
93
114
|
show,
|
|
94
115
|
hide,
|
|
116
|
+
save,
|
|
117
|
+
cancel,
|
|
95
118
|
handleClose
|
|
96
119
|
});
|
|
97
120
|
return (_ctx, _cache) => {
|
|
98
121
|
return openBlock(), createBlock(unref(TMagicDrawer), {
|
|
99
|
-
class: "m-form-drawer",
|
|
122
|
+
class: normalizeClass(["m-form-drawer", effectiveTheme.value ? `m-theme--${effectiveTheme.value}` : ""]),
|
|
100
123
|
ref_key: "drawer",
|
|
101
124
|
ref: drawer,
|
|
102
|
-
modelValue:
|
|
103
|
-
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) =>
|
|
125
|
+
modelValue: dialogVisible.value,
|
|
126
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => dialogVisible.value = $event),
|
|
104
127
|
title: __props.title,
|
|
105
128
|
"close-on-press-escape": __props.closeOnPressEscape,
|
|
106
129
|
"append-to-body": true,
|
|
@@ -138,7 +161,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
138
161
|
})]),
|
|
139
162
|
_: 3
|
|
140
163
|
})]),
|
|
141
|
-
default: withCtx(() => [
|
|
164
|
+
default: withCtx(() => [dialogVisible.value ? (openBlock(), createElementBlock("div", {
|
|
142
165
|
key: 0,
|
|
143
166
|
ref_key: "drawerBody",
|
|
144
167
|
ref: drawerBody,
|
|
@@ -158,6 +181,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
158
181
|
"use-field-text-in-error": __props.useFieldTextInError,
|
|
159
182
|
"type-match-valid": __props.typeMatchValid,
|
|
160
183
|
"extend-state": __props.extendState,
|
|
184
|
+
theme: effectiveTheme.value,
|
|
161
185
|
onChange: changeHandler
|
|
162
186
|
}, null, 8, [
|
|
163
187
|
"size",
|
|
@@ -171,10 +195,12 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
|
|
|
171
195
|
"prevent-submit-default",
|
|
172
196
|
"use-field-text-in-error",
|
|
173
197
|
"type-match-valid",
|
|
174
|
-
"extend-state"
|
|
198
|
+
"extend-state",
|
|
199
|
+
"theme"
|
|
175
200
|
]), renderSlot(_ctx.$slots, "default")], 512)) : createCommentVNode("v-if", true)]),
|
|
176
201
|
_: 3
|
|
177
202
|
}, 8, [
|
|
203
|
+
"class",
|
|
178
204
|
"modelValue",
|
|
179
205
|
"title",
|
|
180
206
|
"close-on-press-escape",
|
|
@@ -40,7 +40,8 @@ var Col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
|
|
|
40
40
|
size: __props.size,
|
|
41
41
|
disabled: __props.disabled,
|
|
42
42
|
onChange: changeHandler,
|
|
43
|
-
onAddDiffCount
|
|
43
|
+
onAddDiffCount,
|
|
44
|
+
"is-in-row": true
|
|
44
45
|
}, null, 8, [
|
|
45
46
|
"model",
|
|
46
47
|
"lastValues",
|
|
@@ -1,25 +1,29 @@
|
|
|
1
1
|
import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "../schema.js";
|
|
2
|
+
import { createObjectProp, display, filterFunction, getRules } from "../utils/form.js";
|
|
2
3
|
import Hidden_default from "../fields/Hidden.js";
|
|
3
4
|
import { getField } from "../utils/config.js";
|
|
4
|
-
import { createObjectProp, display, filterFunction, getRules } from "../utils/form.js";
|
|
5
5
|
import FormLabel_default from "./FormLabel.js";
|
|
6
|
-
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, readonly, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, watch, watchEffect, withCtx } from "vue";
|
|
6
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, readonly, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, watch, watchEffect, withCtx } from "vue";
|
|
7
7
|
import { isEqual } from "lodash-es";
|
|
8
8
|
import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from "@tmagic/design";
|
|
9
9
|
import { getValueByKeyPath } from "@tmagic/utils";
|
|
10
|
-
import { WarningFilled } from "@element-plus/icons-vue";
|
|
10
|
+
import { ArrowDown, ArrowUp, WarningFilled } from "@element-plus/icons-vue";
|
|
11
11
|
//#region packages/form/src/containers/Container.vue?vue&type=script&setup=true&lang.ts
|
|
12
12
|
var _hoisted_1 = ["data-tmagic-id", "data-tmagic-form-item-prop"];
|
|
13
|
-
var _hoisted_2 =
|
|
13
|
+
var _hoisted_2 = {
|
|
14
|
+
key: 0,
|
|
15
|
+
class: "m-form-tip m-form-title-extra"
|
|
16
|
+
};
|
|
14
17
|
var _hoisted_3 = ["innerHTML"];
|
|
15
18
|
var _hoisted_4 = ["innerHTML"];
|
|
16
19
|
var _hoisted_5 = ["innerHTML"];
|
|
17
20
|
var _hoisted_6 = ["innerHTML"];
|
|
18
21
|
var _hoisted_7 = ["innerHTML"];
|
|
19
22
|
var _hoisted_8 = ["innerHTML"];
|
|
20
|
-
var _hoisted_9 =
|
|
23
|
+
var _hoisted_9 = ["innerHTML"];
|
|
24
|
+
var _hoisted_10 = {
|
|
21
25
|
key: 5,
|
|
22
|
-
|
|
26
|
+
class: "m-form-container-expand"
|
|
23
27
|
};
|
|
24
28
|
var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
25
29
|
name: "MFormContainer",
|
|
@@ -40,7 +44,8 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
40
44
|
isCompare: {
|
|
41
45
|
type: Boolean,
|
|
42
46
|
default: false
|
|
43
|
-
}
|
|
47
|
+
},
|
|
48
|
+
isInRow: { type: Boolean }
|
|
44
49
|
},
|
|
45
50
|
emits: ["change", "addDiffCount"],
|
|
46
51
|
setup(__props, { emit: __emit }) {
|
|
@@ -145,7 +150,8 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
145
150
|
labelWidth: itemLabelWidth.value,
|
|
146
151
|
labelPosition: props.config.labelPosition,
|
|
147
152
|
rules: rule.value,
|
|
148
|
-
extra: filterFunction(mForm, props.config.extra, props)
|
|
153
|
+
extra: filterFunction(mForm, props.config.extra, props),
|
|
154
|
+
extraTips: props.config.extraTips
|
|
149
155
|
}));
|
|
150
156
|
const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);
|
|
151
157
|
watchEffect(() => {
|
|
@@ -156,6 +162,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
156
162
|
if (items.value && !text.value && type.value && display$1.value) return;
|
|
157
163
|
if (display$1.value && showDiff && type.value) emit("addDiffCount");
|
|
158
164
|
}, { immediate: true });
|
|
165
|
+
provide("isInRow", props.isInRow ?? false);
|
|
159
166
|
const expandHandler = () => expand.value = !expand.value;
|
|
160
167
|
const key = (config) => config[mForm?.keyProps];
|
|
161
168
|
const filterHandler = (filter, value) => {
|
|
@@ -303,12 +310,12 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
303
310
|
"use-label",
|
|
304
311
|
"label-title",
|
|
305
312
|
"text"
|
|
306
|
-
])])]),
|
|
313
|
+
]), __props.config.titleExtra && __props.config.labelPosition === "top" ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.config.titleExtra), 1)) : createCommentVNode("v-if", true)])]),
|
|
307
314
|
default: withCtx(() => [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
|
|
308
315
|
key: 0,
|
|
309
316
|
placement: tooltip.value.placement
|
|
310
317
|
}, {
|
|
311
|
-
content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8,
|
|
318
|
+
content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_3)]),
|
|
312
319
|
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
|
|
313
320
|
model: __props.model,
|
|
314
321
|
"last-values": __props.lastValues,
|
|
@@ -337,7 +344,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
337
344
|
key: 0,
|
|
338
345
|
placement: "top"
|
|
339
346
|
}, {
|
|
340
|
-
content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8,
|
|
347
|
+
content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_4)]),
|
|
341
348
|
default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
|
|
342
349
|
"line-height": "40px",
|
|
343
350
|
"margin-left": "5px"
|
|
@@ -376,7 +383,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
376
383
|
key: 0,
|
|
377
384
|
placement: tooltip.value.placement
|
|
378
385
|
}, {
|
|
379
|
-
content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8,
|
|
386
|
+
content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_5)]),
|
|
380
387
|
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
|
|
381
388
|
model: __props.model,
|
|
382
389
|
"last-values": __props.lastValues,
|
|
@@ -429,7 +436,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
429
436
|
key: 0,
|
|
430
437
|
placement: tooltip.value.placement
|
|
431
438
|
}, {
|
|
432
|
-
content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8,
|
|
439
|
+
content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_6)]),
|
|
433
440
|
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
|
|
434
441
|
model: __props.lastValues,
|
|
435
442
|
onChange: onChangeHandler
|
|
@@ -445,7 +452,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
445
452
|
key: 0,
|
|
446
453
|
placement: "top"
|
|
447
454
|
}, {
|
|
448
|
-
content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8,
|
|
455
|
+
content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_7)]),
|
|
449
456
|
default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
|
|
450
457
|
"line-height": "40px",
|
|
451
458
|
"margin-left": "5px"
|
|
@@ -486,7 +493,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
486
493
|
key: 0,
|
|
487
494
|
placement: tooltip.value.placement
|
|
488
495
|
}, {
|
|
489
|
-
content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8,
|
|
496
|
+
content: withCtx(() => [createElementVNode("div", { innerHTML: tooltip.value.text }, null, 8, _hoisted_8)]),
|
|
490
497
|
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
|
|
491
498
|
model: __props.model,
|
|
492
499
|
onChange: onChangeHandler
|
|
@@ -502,7 +509,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
502
509
|
key: 1,
|
|
503
510
|
placement: "top"
|
|
504
511
|
}, {
|
|
505
|
-
content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8,
|
|
512
|
+
content: withCtx(() => [createElementVNode("div", { innerHTML: __props.config.tip }, null, 8, _hoisted_9)]),
|
|
506
513
|
default: withCtx(() => [createVNode(unref(TMagicIcon), { style: {
|
|
507
514
|
"line-height": "40px",
|
|
508
515
|
"margin-left": "5px"
|
|
@@ -544,16 +551,17 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
544
551
|
"label-width",
|
|
545
552
|
"prop"
|
|
546
553
|
]);
|
|
547
|
-
}), 128)) : createCommentVNode("v-if", true)], 64)) : createCommentVNode("v-if", true), __props.config.expand && type.value !== "fieldset" ? (openBlock(), createElementBlock("div",
|
|
554
|
+
}), 128)) : createCommentVNode("v-if", true)], 64)) : createCommentVNode("v-if", true), __props.config.expand && type.value !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_10, [createVNode(unref(TMagicButton), {
|
|
548
555
|
type: "primary",
|
|
549
556
|
size: "small",
|
|
550
557
|
disabled: false,
|
|
551
558
|
link: "",
|
|
552
|
-
onClick: expandHandler
|
|
559
|
+
onClick: expandHandler,
|
|
560
|
+
icon: expand.value ? unref(ArrowUp) : unref(ArrowDown)
|
|
553
561
|
}, {
|
|
554
562
|
default: withCtx(() => [createTextVNode(toDisplayString(expand.value ? "收起配置" : "展开更多配置"), 1)]),
|
|
555
563
|
_: 1
|
|
556
|
-
})])) : createCommentVNode("v-if", true)], 14, _hoisted_1);
|
|
564
|
+
}, 8, ["icon"])])) : createCommentVNode("v-if", true)], 14, _hoisted_1);
|
|
557
565
|
};
|
|
558
566
|
}
|
|
559
567
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import GroupListItem_default from "./GroupListItem.js";
|
|
2
|
-
import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderList, renderSlot } from "vue";
|
|
2
|
+
import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderList, renderSlot, toDisplayString } from "vue";
|
|
3
3
|
import { cloneDeep } from "lodash-es";
|
|
4
4
|
//#region packages/form/src/containers/GroupList.vue?vue&type=script&setup=true&lang.ts
|
|
5
5
|
var _hoisted_1 = { class: "m-fields-group-list" };
|
|
@@ -8,11 +8,12 @@ var _hoisted_3 = {
|
|
|
8
8
|
key: 1,
|
|
9
9
|
class: "el-table__empty-block"
|
|
10
10
|
};
|
|
11
|
-
var _hoisted_4 = {
|
|
11
|
+
var _hoisted_4 = { class: "el-table__empty-text t-table__empty" };
|
|
12
|
+
var _hoisted_5 = {
|
|
12
13
|
key: 3,
|
|
13
14
|
class: "m-fields-group-list-footer"
|
|
14
15
|
};
|
|
15
|
-
var
|
|
16
|
+
var _hoisted_6 = { style: {
|
|
16
17
|
"display": "flex",
|
|
17
18
|
"justify-content": "flex-end",
|
|
18
19
|
"flex": "1"
|
|
@@ -63,7 +64,7 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
63
64
|
innerHTML: __props.config.extra,
|
|
64
65
|
style: { "color": "rgba(0, 0, 0, 0.45)" }
|
|
65
66
|
}, null, 8, _hoisted_2)) : createCommentVNode("v-if", true),
|
|
66
|
-
!__props.model[__props.name] || !__props.model[__props.name].length ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
|
67
|
+
!__props.model[__props.name] || !__props.model[__props.name].length ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("span", _hoisted_4, "暂无" + toDisplayString(__props.config.titlePrefix || "") + "数据", 1)])) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(__props.model[__props.name], (item, index) => {
|
|
67
68
|
return openBlock(), createBlock(GroupListItem_default, {
|
|
68
69
|
key: index,
|
|
69
70
|
model: item,
|
|
@@ -94,7 +95,7 @@ var GroupList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
94
95
|
"group-model"
|
|
95
96
|
]);
|
|
96
97
|
}), 128)),
|
|
97
|
-
!__props.isCompare ? (openBlock(), createElementBlock("div",
|
|
98
|
+
!__props.isCompare ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "toggle-button"), createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "add-button")])])) : createCommentVNode("v-if", true)
|
|
98
99
|
]);
|
|
99
100
|
};
|
|
100
101
|
}
|