@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.
Files changed (77) hide show
  1. package/dist/es/Form.vue_vue_type_script_setup_true_lang.js +51 -16
  2. package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js +12 -5
  3. package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js +38 -12
  4. package/dist/es/containers/Col.vue_vue_type_script_setup_true_lang.js +2 -1
  5. package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js +27 -19
  6. package/dist/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js +6 -5
  7. package/dist/es/containers/GroupListItem.vue_vue_type_script_setup_true_lang.js +41 -31
  8. package/dist/es/containers/Panel.vue_vue_type_script_setup_true_lang.js +16 -10
  9. package/dist/es/containers/table/ActionsColumn.vue_vue_type_script_setup_true_lang.js +13 -6
  10. package/dist/es/containers/table/Table.vue_vue_type_script_setup_true_lang.js +4 -2
  11. package/dist/es/containers/table/useTableColumns.js +5 -1
  12. package/dist/es/containers/table-group-list/TableGroupList.vue_vue_type_script_setup_true_lang.js +2 -1
  13. package/dist/es/fields/Cascader.vue_vue_type_script_setup_true_lang.js +5 -2
  14. package/dist/es/fields/Checkbox.vue_vue_type_script_setup_true_lang.js +4 -1
  15. package/dist/es/fields/CheckboxGroup.vue_vue_type_script_setup_true_lang.js +5 -2
  16. package/dist/es/fields/ColorPicker.vue_vue_type_script_setup_true_lang.js +4 -1
  17. package/dist/es/fields/Date.vue_vue_type_script_setup_true_lang.js +5 -2
  18. package/dist/es/fields/DateTime.vue_vue_type_script_setup_true_lang.js +5 -2
  19. package/dist/es/fields/Daterange.vue_vue_type_script_setup_true_lang.js +5 -2
  20. package/dist/es/fields/Display.vue_vue_type_script_setup_true_lang.js +5 -2
  21. package/dist/es/fields/DynamicField.vue_vue_type_script_setup_true_lang.js +4 -1
  22. package/dist/es/fields/Link.vue_vue_type_script_setup_true_lang.js +29 -7
  23. package/dist/es/fields/Number.vue_vue_type_script_setup_true_lang.js +7 -2
  24. package/dist/es/fields/NumberRange.vue_vue_type_script_setup_true_lang.js +4 -1
  25. package/dist/es/fields/RadioGroup.vue_vue_type_script_setup_true_lang.js +19 -9
  26. package/dist/es/fields/Select.vue_vue_type_script_setup_true_lang.js +4 -1
  27. package/dist/es/fields/Switch.vue_vue_type_script_setup_true_lang.js +4 -1
  28. package/dist/es/fields/Text.vue_vue_type_script_setup_true_lang.js +112 -77
  29. package/dist/es/fields/Textarea.vue_vue_type_script_setup_true_lang.js +4 -1
  30. package/dist/es/fields/Time.vue_vue_type_script_setup_true_lang.js +4 -1
  31. package/dist/es/fields/Timerange.vue_vue_type_script_setup_true_lang.js +6 -3
  32. package/dist/es/index.js +4 -4
  33. package/dist/es/plugin.js +3 -1
  34. package/dist/es/schema.js +11 -1
  35. package/dist/es/style.css +122 -8
  36. package/dist/es/submitForm.js +13 -11
  37. package/dist/es/utils/config.js +4 -1
  38. package/dist/es/utils/form.js +33 -3
  39. package/dist/es/utils/typeMatch.js +3 -1
  40. package/dist/style.css +122 -8
  41. package/dist/themes/magic-admin.css +499 -0
  42. package/dist/tmagic-form.umd.cjs +568 -300
  43. package/package.json +4 -4
  44. package/src/Form.vue +71 -18
  45. package/src/FormDialog.vue +14 -3
  46. package/src/FormDrawer.vue +40 -12
  47. package/src/containers/Col.vue +1 -0
  48. package/src/containers/Container.vue +21 -6
  49. package/src/containers/GroupList.vue +1 -1
  50. package/src/containers/GroupListItem.vue +28 -22
  51. package/src/containers/Panel.vue +10 -3
  52. package/src/containers/table/ActionsColumn.vue +10 -4
  53. package/src/containers/table/Table.vue +1 -0
  54. package/src/containers/table/useTableColumns.ts +7 -3
  55. package/src/containers/table-group-list/TableGroupList.vue +7 -1
  56. package/src/fields/Link.vue +16 -3
  57. package/src/fields/Number.vue +2 -1
  58. package/src/fields/RadioGroup.vue +21 -6
  59. package/src/fields/Text.vue +43 -19
  60. package/src/plugin.ts +3 -0
  61. package/src/schema.ts +11 -0
  62. package/src/submitForm.ts +34 -15
  63. package/src/theme/container.scss +3 -0
  64. package/src/theme/fieldset.scss +51 -0
  65. package/src/theme/form.scss +6 -0
  66. package/src/theme/group-list.scss +9 -7
  67. package/src/theme/index.scss +1 -0
  68. package/src/theme/link.scss +17 -0
  69. package/src/theme/panel.scss +1 -1
  70. package/src/theme/radio-group.scss +23 -0
  71. package/src/theme/tabs.scss +2 -2
  72. package/src/theme/text.scss +38 -0
  73. package/src/theme/themes/magic-admin/index.scss +95 -0
  74. package/src/utils/config.ts +7 -1
  75. package/src/utils/form.ts +37 -0
  76. package/src/utils/typeMatch.ts +10 -1
  77. 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
- return props.popperClass;
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
- * - data 描述符:通过 `formState[key] = value` 走 reactive proxy 的 set
136
- * 触发依赖通知;与旧版「逐项赋值」语义完全等价。
137
- * - accessor 描述符(`{ get stage() {...} }`)按原样写入 formState,调用方
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
- for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) if ("value" in descriptor) formState[key] = state[key];
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: "m-form",
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: "MFormDialog",
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 visible = ref(false);
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
- visible.value = true;
85
+ dialogVisible.value = true;
81
86
  };
82
87
  const hide = () => {
83
- visible.value = false;
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: visible.value,
103
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $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(() => [visible.value ? (openBlock(), createElementBlock("div", {
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 = ["innerHTML"];
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
- style: { "text-align": "center" }
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, _hoisted_2)]),
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, _hoisted_3)]),
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, _hoisted_4)]),
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, _hoisted_5)]),
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, _hoisted_6)]),
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, _hoisted_7)]),
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, _hoisted_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", _hoisted_9, [createVNode(unref(TMagicButton), {
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 _hoisted_5 = { style: {
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, [..._cache[1] || (_cache[1] = [createElementVNode("span", { class: "el-table__empty-text t-table__empty" }, "暂无数据", -1)])])) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(__props.model[__props.name], (item, index) => {
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", _hoisted_4, [renderSlot(_ctx.$slots, "toggle-button"), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "add-button")])])) : createCommentVNode("v-if", true)
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
  }