@tmagic/form 1.8.0-beta.2 → 1.8.0-beta.21

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 (91) hide show
  1. package/dist/es/Form.vue_vue_type_script_setup_true_lang.js +120 -27
  2. package/dist/es/FormBox.vue_vue_type_script_setup_true_lang.js +19 -3
  3. package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js +30 -7
  4. package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js +56 -14
  5. package/dist/es/containers/Col.vue_vue_type_script_setup_true_lang.js +3 -2
  6. package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js +51 -36
  7. package/dist/es/containers/Fieldset.vue_vue_type_script_setup_true_lang.js +5 -3
  8. package/dist/es/containers/FlexLayout.vue_vue_type_script_setup_true_lang.js +1 -1
  9. package/dist/es/containers/FormLabel.vue_vue_type_script_setup_true_lang.js +1 -1
  10. package/dist/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js +7 -6
  11. package/dist/es/containers/GroupListItem.vue_vue_type_script_setup_true_lang.js +42 -32
  12. package/dist/es/containers/Panel.vue_vue_type_script_setup_true_lang.js +17 -11
  13. package/dist/es/containers/Row.vue_vue_type_script_setup_true_lang.js +1 -1
  14. package/dist/es/containers/Step.vue_vue_type_script_setup_true_lang.js +1 -1
  15. package/dist/es/containers/Tabs.vue_vue_type_script_setup_true_lang.js +1 -1
  16. package/dist/es/containers/table/ActionsColumn.vue_vue_type_script_setup_true_lang.js +14 -7
  17. package/dist/es/containers/table/SortColumn.vue_vue_type_script_setup_true_lang.js +1 -1
  18. package/dist/es/containers/table/Table.vue_vue_type_script_setup_true_lang.js +7 -5
  19. package/dist/es/containers/table/useTableColumns.js +5 -1
  20. package/dist/es/containers/table-group-list/TableGroupList.vue_vue_type_script_setup_true_lang.js +3 -2
  21. package/dist/es/fields/Cascader.vue_vue_type_script_setup_true_lang.js +6 -3
  22. package/dist/es/fields/Checkbox.vue_vue_type_script_setup_true_lang.js +5 -2
  23. package/dist/es/fields/CheckboxGroup.vue_vue_type_script_setup_true_lang.js +6 -3
  24. package/dist/es/fields/ColorPicker.vue_vue_type_script_setup_true_lang.js +5 -2
  25. package/dist/es/fields/Date.vue_vue_type_script_setup_true_lang.js +6 -3
  26. package/dist/es/fields/DateTime.vue_vue_type_script_setup_true_lang.js +6 -3
  27. package/dist/es/fields/Daterange.vue_vue_type_script_setup_true_lang.js +6 -3
  28. package/dist/es/fields/Display.vue_vue_type_script_setup_true_lang.js +6 -3
  29. package/dist/es/fields/DynamicField.vue_vue_type_script_setup_true_lang.js +5 -2
  30. package/dist/es/fields/Hidden.vue_vue_type_script_setup_true_lang.js +1 -1
  31. package/dist/es/fields/Link.vue_vue_type_script_setup_true_lang.js +30 -8
  32. package/dist/es/fields/Number.vue_vue_type_script_setup_true_lang.js +8 -3
  33. package/dist/es/fields/NumberRange.vue_vue_type_script_setup_true_lang.js +5 -2
  34. package/dist/es/fields/RadioGroup.vue_vue_type_script_setup_true_lang.js +21 -10
  35. package/dist/es/fields/Select.vue_vue_type_script_setup_true_lang.js +7 -3
  36. package/dist/es/fields/Switch.vue_vue_type_script_setup_true_lang.js +5 -2
  37. package/dist/es/fields/Text.vue_vue_type_script_setup_true_lang.js +113 -78
  38. package/dist/es/fields/Textarea.vue_vue_type_script_setup_true_lang.js +5 -2
  39. package/dist/es/fields/Time.vue_vue_type_script_setup_true_lang.js +5 -2
  40. package/dist/es/fields/Timerange.vue_vue_type_script_setup_true_lang.js +7 -4
  41. package/dist/es/index.js +5 -4
  42. package/dist/es/plugin.js +4 -0
  43. package/dist/es/schema.js +12 -1
  44. package/dist/es/style.css +133 -11
  45. package/dist/es/submitForm.js +415 -56
  46. package/dist/es/utils/config.js +4 -1
  47. package/dist/es/utils/form.js +84 -9
  48. package/dist/es/utils/typeMatch.js +487 -0
  49. package/dist/style.css +133 -11
  50. package/dist/themes/magic-admin.css +509 -0
  51. package/dist/tmagic-form.umd.cjs +1773 -399
  52. package/package.json +5 -5
  53. package/src/Form.vue +163 -30
  54. package/src/FormBox.vue +11 -0
  55. package/src/FormDialog.vue +25 -3
  56. package/src/FormDrawer.vue +51 -12
  57. package/src/containers/Col.vue +1 -0
  58. package/src/containers/Container.vue +32 -11
  59. package/src/containers/Fieldset.vue +5 -2
  60. package/src/containers/GroupList.vue +1 -1
  61. package/src/containers/GroupListItem.vue +28 -22
  62. package/src/containers/Panel.vue +10 -3
  63. package/src/containers/table/ActionsColumn.vue +10 -4
  64. package/src/containers/table/Table.vue +1 -0
  65. package/src/containers/table/useTableColumns.ts +7 -3
  66. package/src/containers/table-group-list/TableGroupList.vue +7 -1
  67. package/src/fields/Link.vue +16 -3
  68. package/src/fields/Number.vue +2 -1
  69. package/src/fields/RadioGroup.vue +24 -6
  70. package/src/fields/Text.vue +43 -19
  71. package/src/index.ts +11 -0
  72. package/src/plugin.ts +12 -0
  73. package/src/schema.ts +13 -1
  74. package/src/submitForm.ts +699 -66
  75. package/src/theme/container.scss +3 -0
  76. package/src/theme/fieldset.scss +51 -0
  77. package/src/theme/form-dialog.scss +1 -1
  78. package/src/theme/form.scss +6 -0
  79. package/src/theme/group-list.scss +19 -8
  80. package/src/theme/index.scss +1 -0
  81. package/src/theme/link.scss +17 -0
  82. package/src/theme/panel.scss +1 -1
  83. package/src/theme/radio-group.scss +23 -0
  84. package/src/theme/table.scss +11 -1
  85. package/src/theme/tabs.scss +2 -2
  86. package/src/theme/text.scss +38 -0
  87. package/src/theme/themes/magic-admin/index.scss +106 -0
  88. package/src/utils/config.ts +7 -1
  89. package/src/utils/form.ts +144 -22
  90. package/src/utils/typeMatch.ts +870 -0
  91. package/types/index.d.ts +408 -21
@@ -1,17 +1,25 @@
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 = { class: "m-fields-text" };
9
- var _hoisted_2 = { key: 1 };
10
- var _hoisted_3 = { style: {
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
  } };
14
- var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
22
+ var Text_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
15
23
  name: "MFormText",
16
24
  __name: "Text",
17
25
  props: {
@@ -24,7 +32,10 @@ var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
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__ */ defineCom
37
48
  value.value = v;
38
49
  }, { immediate: true });
39
50
  const appendConfig = computed(() => {
40
- if (typeof props.config.append === "string") return {
51
+ const { append } = props.config;
52
+ if (typeof append === "string") return {
41
53
  type: "text",
42
- text: props.config.append,
54
+ text: append,
43
55
  handler: void 0
44
56
  };
45
- if (typeof props.config.append === "object") {
46
- if (typeof props.config.append?.handler === "function") return {
47
- type: "button",
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__ */ defineCom
147
152
  instanceRef.value = void 0;
148
153
  };
149
154
  return (_ctx, _cache) => {
150
- return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(TMagicInput), {
151
- modelValue: value.value,
152
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
153
- ref_key: "input",
154
- ref: input,
155
- clearable: __props.config.clearable ?? true,
156
- size: __props.size,
157
- placeholder: __props.config.placeholder,
158
- disabled: __props.disabled,
159
- onChange: changeHandler,
160
- onInput: inputHandler,
161
- onKeyup: _cache[1] || (_cache[1] = ($event) => keyUpHandler($event))
162
- }, createSlots({ _: 2 }, [__props.config.prepend ? {
163
- name: "prepend",
164
- fn: withCtx(() => [createElementVNode("span", null, toDisplayString(__props.config.prepend), 1)]),
165
- key: "0"
166
- } : void 0, appendConfig.value ? {
167
- name: "append",
168
- fn: withCtx(() => [appendConfig.value.type === "button" ? (openBlock(), createBlock(unref(TMagicButton), {
169
- key: 0,
170
- style: { "color": "#409eff" },
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
- onClick: withModifiers(buttonClickHandler, ["prevent"])
173
- }, {
174
- default: withCtx(() => [createTextVNode(toDisplayString(appendConfig.value.text), 1)]),
175
- _: 1
176
- }, 8, ["size"])) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(appendConfig.value.text), 1))]),
177
- key: "1"
178
- } : void 0]), 1032, [
179
- "modelValue",
180
- "clearable",
181
- "size",
182
- "placeholder",
183
- "disabled"
184
- ]), (openBlock(), createBlock(Teleport, { to: "body" }, [popoverVisible.value ? (openBlock(), createElementBlock("div", {
185
- key: 0,
186
- class: "tmagic-form-text-popper m-form-item__content",
187
- ref_key: "popoverEl",
188
- ref: popoverEl
189
- }, [
190
- _cache[5] || (_cache[5] = createElementVNode("div", { class: "m-form-validate__warning" }, "输入内容前后有空格,是否移除空格?", -1)),
191
- createElementVNode("div", _hoisted_3, [createVNode(unref(TMagicButton), {
192
- link: "",
193
- size: "small",
194
- onClick: _cache[2] || (_cache[2] = ($event) => popoverVisible.value = false)
195
- }, {
196
- default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("保持原样", -1)])]),
197
- _: 1
198
- }), createVNode(unref(TMagicButton), {
199
- type: "primary",
200
- size: "small",
201
- onClick: confirmTrimHandler
202
- }, {
203
- default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("移除空格", -1)])]),
204
- _: 1
205
- })]),
206
- _cache[6] || (_cache[6] = createElementVNode("span", {
207
- class: "tmagic-form-text-popper-arrow",
208
- "data-popper-arrow": ""
209
- }, null, -1))
210
- ], 512)) : createCommentVNode("v-if", true)]))]);
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
  });
@@ -2,7 +2,7 @@ import { useAddField } from "../utils/useAddField.js";
2
2
  import { createBlock, defineComponent, inject, openBlock, ref, unref, watch } from "vue";
3
3
  import { TMagicInput } from "@tmagic/design";
4
4
  //#region packages/form/src/fields/Textarea.vue?vue&type=script&setup=true&lang.ts
5
- var Textarea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
5
+ var Textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
6
6
  name: "MFormTextarea",
7
7
  __name: "Textarea",
8
8
  props: {
@@ -15,7 +15,10 @@ var Textarea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
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 }) {
@@ -2,7 +2,7 @@ import { useAddField } from "../utils/useAddField.js";
2
2
  import { createBlock, defineComponent, openBlock, unref } from "vue";
3
3
  import { TMagicTimePicker } from "@tmagic/design";
4
4
  //#region packages/form/src/fields/Time.vue?vue&type=script&setup=true&lang.ts
5
- var Time_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
5
+ var Time_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
6
6
  name: "MFormTime",
7
7
  __name: "Time",
8
8
  props: {
@@ -15,7 +15,10 @@ var Time_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
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,10 +1,10 @@
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
- var Timerange_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
7
+ var Timerange_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
8
8
  name: "MFormTimeRange",
9
9
  __name: "Timerange",
10
10
  props: {
@@ -17,7 +17,10 @@ var Timerange_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
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,12 +1,13 @@
1
1
  import "./_virtual/_rolldown/runtime.js";
2
- import { FORM_DIFF_CONFIG_KEY } from "./schema.js";
2
+ import { FORM_DIFF_CONFIG_KEY, FORM_SILENT_MODE_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 { createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange } from "./utils/form.js";
7
8
  import Container_default from "./containers/Container.js";
8
9
  import Form_default from "./Form.js";
9
- import { submitForm } from "./submitForm.js";
10
+ import { stripTabItemsLazy, submitForm, validateForm } from "./submitForm.js";
10
11
  import FormDialog_default from "./FormDialog.js";
11
12
  import FormDrawer_default from "./FormDrawer.js";
12
13
  import FormBox_default from "./FormBox.js";
@@ -39,4 +40,4 @@ import plugin_default from "./plugin.js";
39
40
  export * from "@tmagic/form-schema";
40
41
  var createForm = (config) => config;
41
42
  //#endregion
42
- export { FORM_DIFF_CONFIG_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, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, submitForm, useAddField };
43
+ export { FORM_DIFF_CONFIG_KEY, FORM_SILENT_MODE_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,8 +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
4
  import Container_default from "./containers/Container.js";
4
5
  import Form_default from "./Form.js";
5
6
  import FormDialog_default from "./FormDialog.js";
7
+ import FormDrawer_default from "./FormDrawer.js";
6
8
  import Fieldset_default from "./containers/Fieldset.js";
7
9
  import FlexLayout_default from "./containers/FlexLayout.js";
8
10
  import Panel_default from "./containers/Panel.js";
@@ -36,8 +38,10 @@ var plugin_default = { install(app, opt = {}) {
36
38
  const option = Object.assign(defaultInstallOpt, opt);
37
39
  app.config.globalProperties.$MAGIC_FORM = option;
38
40
  setConfig(option);
41
+ if (option.typeMatchRules) registerTypeMatchRules(option.typeMatchRules);
39
42
  app.component("m-form", Form_default);
40
43
  app.component("m-form-dialog", FormDialog_default);
44
+ app.component("m-form-drawer", FormDrawer_default);
41
45
  app.component("m-form-container", Container_default);
42
46
  app.component("m-form-fieldset", Fieldset_default);
43
47
  app.component("m-form-group-list", TableGroupList_default);
package/dist/es/schema.js CHANGED
@@ -2,5 +2,16 @@ import "./_virtual/_rolldown/runtime.js";
2
2
  export * from "@tmagic/form-schema";
3
3
  //#region packages/form/src/schema.ts
4
4
  var FORM_DIFF_CONFIG_KEY = Symbol("mFormDiffConfig");
5
+ var FORM_TYPE_MATCH_VALID_KEY = Symbol("mFormTypeMatchValid");
6
+ /**
7
+ * 静默模式标记,由 `submitForm` / `validateForm` 以隐藏方式挂载临时表单时 provide(debug 弹层模式不提供)。
8
+ *
9
+ * 重型字段组件(如 vs-code)可 inject 该标记并跳过自身渲染:字段校验由 FormItem 基于 model 值完成,
10
+ * 与叶子 UI 组件实例无关,跳过可省去无谓的实例化开销(如 monaco worker / model 的创建)。
11
+ *
12
+ * 注意:仅「挂载无值副作用」(不在 onMounted/watch immediate 中 emit change、不依赖 DOM 计算值)的
13
+ * 字段组件可以安全跳过,接入前需逐一审计。
14
+ */
15
+ var FORM_SILENT_MODE_KEY = Symbol("mFormSilentMode");
5
16
  //#endregion
6
- export { FORM_DIFF_CONFIG_KEY };
17
+ export { FORM_DIFF_CONFIG_KEY, FORM_SILENT_MODE_KEY, FORM_TYPE_MATCH_VALID_KEY };
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;
@@ -23,7 +26,7 @@
23
26
  .m-form-dialog .m-dialog-body {
24
27
  padding: 0 20px;
25
28
  }
26
- .m-form-dialog .el-table .m-form-item .el-form-item {
29
+ .m-form-dialog .el-table .m-form-item .el-form-item:not(.is-error) {
27
30
  margin-bottom: 0;
28
31
  }
29
32
 
@@ -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,27 @@ 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 .tmagic-design-card .el-card__header {
196
- padding: 5px 20px;
197
- }
198
- .m-fields-group-list .tmagic-design-card .t-card__header {
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
- display: flex;
203
299
  justify-content: space-between;
204
300
  margin-top: 10px;
301
+ margin-bottom: 16px;
302
+ }
303
+
304
+ /** 最外层的groupList需要每个item需要增加空白区域界限时,增加outer-gorup_list可以实现 */
305
+ .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
306
+ margin-bottom: 10px;
205
307
  }
206
308
 
207
309
  .m-form-panel .el-card__header:hover {
208
310
  background: #f2f6fc;
209
311
  }
210
312
  .m-form-panel .el-card__header a {
211
- color: #409eff;
313
+ color: var(--el-color-primary, #409eff);
212
314
  }
213
315
  .m-form-panel .el-card__body {
214
316
  padding: 10px;
@@ -247,6 +349,10 @@ fieldset.m-fieldset .m-form-tip {
247
349
  width: 95vw !important;
248
350
  }
249
351
 
352
+ .el-form-item .m-fields-table .el-form-item.is-error {
353
+ margin-bottom: 18px;
354
+ }
355
+
250
356
  .m-fields-table {
251
357
  width: 100%;
252
358
  }
@@ -269,7 +375,7 @@ fieldset.m-fieldset .m-form-tip {
269
375
  .m-fields-table .el-table__expanded-cell .m-form-tip {
270
376
  margin-left: 80px;
271
377
  }
272
- .m-fields-table .el-form-item {
378
+ .m-fields-table .el-form-item:not(.is-error) {
273
379
  margin-bottom: 0;
274
380
  }
275
381
  .m-fields-table .tmagic-form-table-drag-target {
@@ -287,8 +393,8 @@ fieldset.m-fieldset .m-form-tip {
287
393
  margin-right: auto;
288
394
  min-width: 50px;
289
395
  outline: none;
290
- border-color: #409eff;
291
- color: #409eff;
396
+ border-color: var(--el-color-primary, #409eff);
397
+ color: var(--el-color-primary, #409eff);
292
398
  width: 10px;
293
399
  }
294
400
  .magic-form-dynamic-tab .el-tabs__header.is-top .el-tabs__new-tab::before {
@@ -325,4 +431,20 @@ fieldset.m-fieldset .m-form-tip {
325
431
  display: flex;
326
432
  align-items: center;
327
433
  justify-content: space-between;
434
+ }
435
+
436
+ .m-fields-radio-group__option {
437
+ display: flex;
438
+ align-items: center;
439
+ }
440
+
441
+ .m-fields-radio-group__text {
442
+ display: inline-block;
443
+ vertical-align: middle;
444
+ white-space: pre-line;
445
+ line-height: 20px;
446
+ }
447
+
448
+ .m-fields-radio-group__icon_with_text {
449
+ margin-right: 8px;
328
450
  }/*$vite$:1*/