@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,8 +1,12 @@
1
1
  import { useAddField } from "../utils/useAddField.js";
2
- import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
2
+ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
3
3
  import { TMagicIcon, TMagicRadio, TMagicRadioButton, TMagicRadioGroup, TMagicTooltip } from "@tmagic/design";
4
4
  //#region packages/form/src/fields/RadioGroup.vue?vue&type=script&setup=true&lang.ts
5
- var _hoisted_1 = { key: 1 };
5
+ var _hoisted_1 = { class: "m-fields-radio-group__option" };
6
+ var _hoisted_2 = {
7
+ key: 1,
8
+ class: "m-fields-radio-group__text"
9
+ };
6
10
  var RadioGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
7
11
  name: "MFormRadioGroup",
8
12
  __name: "RadioGroup",
@@ -16,7 +20,10 @@ var RadioGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
16
20
  disabled: { type: Boolean },
17
21
  size: {},
18
22
  lastValues: {},
19
- isCompare: { type: Boolean }
23
+ isCompare: { type: Boolean },
24
+ text: {},
25
+ labelWidth: {},
26
+ labelPosition: {}
20
27
  },
21
28
  emits: ["change"],
22
29
  setup(__props, { emit: __emit }) {
@@ -29,16 +36,18 @@ var RadioGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
29
36
  };
30
37
  useAddField(props.prop);
31
38
  const iconSize = computed(() => {
32
- if (props.size === "small") return "12";
39
+ if (props.config.iconSize) return props.config.iconSize;
40
+ if (props.size === "small") return "14";
33
41
  if (props.size === "large") return "16";
34
- return "14";
42
+ return "16";
35
43
  });
36
44
  return (_ctx, _cache) => {
37
45
  return __props.model ? (openBlock(), createBlock(unref(TMagicRadioGroup), {
38
46
  key: 0,
39
47
  "model-value": __props.model[__props.name],
40
48
  size: __props.size,
41
- disabled: __props.disabled
49
+ disabled: __props.disabled,
50
+ class: "icon-{{ iconSize }}"
42
51
  }, {
43
52
  default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.config.options, (option) => {
44
53
  return openBlock(), createBlock(resolveDynamicComponent(itemComponent.value), {
@@ -51,13 +60,14 @@ var RadioGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
51
60
  placement: "top-start",
52
61
  content: option.tooltip
53
62
  }, {
54
- default: withCtx(() => [createElementVNode("div", null, [option.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
63
+ default: withCtx(() => [createElementVNode("div", _hoisted_1, [option.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
55
64
  key: 0,
56
- size: iconSize.value
65
+ size: iconSize.value,
66
+ class: normalizeClass({ "m-fields-radio-group__icon_with_text": !!option.text })
57
67
  }, {
58
68
  default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(option.icon)))]),
59
69
  _: 2
60
- }, 1032, ["size"])) : createCommentVNode("v-if", true), option.text ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(option.text), 1)) : createCommentVNode("v-if", true)])]),
70
+ }, 1032, ["size", "class"])) : createCommentVNode("v-if", true), option.text ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(option.text), 1)) : createCommentVNode("v-if", true)])]),
61
71
  _: 2
62
72
  }, 1032, ["disabled", "content"])]),
63
73
  _: 2
@@ -18,7 +18,10 @@ var Select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
18
18
  disabled: { type: Boolean },
19
19
  size: {},
20
20
  lastValues: {},
21
- isCompare: { type: Boolean }
21
+ isCompare: { type: Boolean },
22
+ text: {},
23
+ labelWidth: {},
24
+ labelPosition: {}
22
25
  },
23
26
  emits: ["change"],
24
27
  setup(__props, { expose: __expose, emit: __emit }) {
@@ -15,7 +15,10 @@ var Switch_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,13 +1,21 @@
1
1
  import { useAddField } from "../utils/useAddField.js";
2
- import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, openBlock, readonly, ref, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
2
+ import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, readonly, ref, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
3
3
  import { debounce } from "lodash-es";
4
4
  import { TMagicButton, TMagicInput } from "@tmagic/design";
5
5
  import { isNumber } from "@tmagic/utils";
6
6
  import { createPopper } from "@popperjs/core";
7
7
  //#region packages/form/src/fields/Text.vue?vue&type=script&setup=true&lang.ts
8
- var _hoisted_1 = { 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
  } };
@@ -24,7 +32,10 @@ var Text_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
24
32
  disabled: { type: Boolean },
25
33
  size: {},
26
34
  lastValues: {},
27
- isCompare: { type: Boolean }
35
+ isCompare: { type: Boolean },
36
+ text: {},
37
+ labelWidth: {},
38
+ labelPosition: {}
28
39
  },
29
40
  emits: ["change", "input"],
30
41
  setup(__props, { emit: __emit }) {
@@ -37,21 +48,15 @@ var Text_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
37
48
  value.value = v;
38
49
  }, { immediate: true });
39
50
  const appendConfig = computed(() => {
40
- 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__*/ defineCompo
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
  });
@@ -15,7 +15,10 @@ var Textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
15
15
  disabled: { type: Boolean },
16
16
  size: {},
17
17
  lastValues: {},
18
- isCompare: { type: Boolean }
18
+ isCompare: { type: Boolean },
19
+ text: {},
20
+ labelWidth: {},
21
+ labelPosition: {}
19
22
  },
20
23
  emits: ["change", "input"],
21
24
  setup(__props, { emit: __emit }) {
@@ -15,7 +15,10 @@ var Time_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
15
15
  disabled: { type: Boolean },
16
16
  size: {},
17
17
  lastValues: {},
18
- isCompare: { type: Boolean }
18
+ isCompare: { type: Boolean },
19
+ text: {},
20
+ labelWidth: {},
21
+ labelPosition: {}
19
22
  },
20
23
  emits: ["change"],
21
24
  setup(__props, { emit: __emit }) {
@@ -1,8 +1,8 @@
1
- import { useAddField } from "../utils/useAddField.js";
2
1
  import { datetimeFormatter } from "../utils/form.js";
2
+ import { useAddField } from "../utils/useAddField.js";
3
3
  import { createBlock, defineComponent, onUnmounted, openBlock, ref, unref, watch } from "vue";
4
- import { TMagicTimePicker } from "@tmagic/design";
5
4
  import dayjs from "dayjs";
5
+ import { TMagicTimePicker } from "@tmagic/design";
6
6
  //#region packages/form/src/fields/Timerange.vue?vue&type=script&setup=true&lang.ts
7
7
  var Timerange_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
8
8
  name: "MFormTimeRange",
@@ -17,7 +17,10 @@ var Timerange_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
17
17
  disabled: { type: Boolean },
18
18
  size: {},
19
19
  lastValues: {},
20
- isCompare: { type: Boolean }
20
+ isCompare: { type: Boolean },
21
+ text: {},
22
+ labelWidth: {},
23
+ labelPosition: {}
21
24
  },
22
25
  emits: ["change"],
23
26
  setup(__props, { emit: __emit }) {
package/dist/es/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import "./_virtual/_rolldown/runtime.js";
2
- import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_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 { clearTypeMatchRules, deleteTypeMatchRule, getTypeMatchRule, registerTypeMatchRule, registerTypeMatchRules, validateTypeMatch } from "./utils/typeMatch.js";
7
- import { adaptFormValidator, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange } from "./utils/form.js";
8
8
  import Container_default from "./containers/Container.js";
9
9
  import Form_default from "./Form.js";
10
10
  import { stripTabItemsLazy, submitForm, validateForm } from "./submitForm.js";
@@ -40,4 +40,4 @@ import plugin_default from "./plugin.js";
40
40
  export * from "@tmagic/form-schema";
41
41
  var createForm = (config) => config;
42
42
  //#endregion
43
- export { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY, Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, adaptFormValidator, clearTypeMatchRules, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, deleteTypeMatchRule, display, filterFunction, getDataByPage, getField as getFormField, getRules, getTypeMatchRule, initValue, registerField as registerFormField, registerTypeMatchRule, registerTypeMatchRules, sortArray, sortChange, stripTabItemsLazy, submitForm, useAddField, validateForm, validateTypeMatch };
43
+ export { FORM_DIFF_CONFIG_KEY, FORM_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,9 +1,10 @@
1
+ import { registerTypeMatchRules } from "./utils/typeMatch.js";
1
2
  import Hidden_default from "./fields/Hidden.js";
2
3
  import { setConfig } from "./utils/config.js";
3
- import { registerTypeMatchRules } from "./utils/typeMatch.js";
4
4
  import Container_default from "./containers/Container.js";
5
5
  import Form_default from "./Form.js";
6
6
  import FormDialog_default from "./FormDialog.js";
7
+ import FormDrawer_default from "./FormDrawer.js";
7
8
  import Fieldset_default from "./containers/Fieldset.js";
8
9
  import FlexLayout_default from "./containers/FlexLayout.js";
9
10
  import Panel_default from "./containers/Panel.js";
@@ -40,6 +41,7 @@ var plugin_default = { install(app, opt = {}) {
40
41
  if (option.typeMatchRules) registerTypeMatchRules(option.typeMatchRules);
41
42
  app.component("m-form", Form_default);
42
43
  app.component("m-form-dialog", FormDialog_default);
44
+ app.component("m-form-drawer", FormDrawer_default);
43
45
  app.component("m-form-container", Container_default);
44
46
  app.component("m-form-fieldset", Fieldset_default);
45
47
  app.component("m-form-group-list", TableGroupList_default);
package/dist/es/schema.js CHANGED
@@ -3,5 +3,15 @@ export * from "@tmagic/form-schema";
3
3
  //#region packages/form/src/schema.ts
4
4
  var FORM_DIFF_CONFIG_KEY = Symbol("mFormDiffConfig");
5
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");
6
16
  //#endregion
7
- export { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_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;
@@ -76,6 +79,10 @@
76
79
  margin-bottom: var(--td-comp-margin-xxl);
77
80
  }
78
81
 
82
+ .m-form-container .m-form-container-expand {
83
+ text-align: center;
84
+ }
85
+
79
86
  .magic-datetime-picker-popper .el-picker-panel__footer button:first-child {
80
87
  display: none;
81
88
  }
@@ -85,6 +92,24 @@
85
92
  align-items: center;
86
93
  width: 100%;
87
94
  }
95
+ .m-fields-text--static {
96
+ gap: 6px;
97
+ min-height: 32px;
98
+ }
99
+ .m-fields-text--static .m-fields-text__prepend {
100
+ color: var(--el-text-color-secondary, #909399);
101
+ }
102
+ .m-fields-text--static .m-fields-text__value {
103
+ color: var(--el-text-color-regular, #606266);
104
+ overflow: hidden;
105
+ text-overflow: ellipsis;
106
+ white-space: nowrap;
107
+ }
108
+ .m-fields-text--static .m-fields-text__icon {
109
+ width: 16px;
110
+ height: 16px;
111
+ cursor: pointer;
112
+ }
88
113
 
89
114
  .m-form-validate__warning {
90
115
  color: var(--el-color-warning);
@@ -110,6 +135,16 @@
110
135
  outline: none;
111
136
  }
112
137
 
138
+ .m-container-text.m-fields-title-container .tmagic-design-form-item .el-form-item__label {
139
+ color: #0f1113;
140
+ font-weight: 500;
141
+ font-size: 16px;
142
+ }
143
+ .m-container-text.m-fields-title-container .tmagic-design-form-item {
144
+ line-height: 24px;
145
+ margin-bottom: 16px;
146
+ }
147
+
113
148
  .tmagic-form-text-popper[data-popper-placement^=top] > .tmagic-form-text-popper-arrow {
114
149
  bottom: -4px;
115
150
  }
@@ -148,6 +183,66 @@ div.m-fields-link {
148
183
  width: fit-content;
149
184
  }
150
185
 
186
+ a.magic-admin-link {
187
+ width: 100%;
188
+ box-sizing: border-box;
189
+ border-radius: 4px;
190
+ border: 1px solid #e6e6e6;
191
+ background-color: #fafafa;
192
+ padding: 0 8px;
193
+ height: 28px;
194
+ display: inline-flex;
195
+ gap: 4px;
196
+ align-items: center;
197
+ text-decoration: none;
198
+ }
199
+ a.magic-admin-link i {
200
+ margin-right: 4px;
201
+ }
202
+
203
+ .m-container-fieldset.no-border-fieldset.fieldset-in-row > fieldset.m-fieldset legend {
204
+ left: 0;
205
+ }
206
+ .m-container-fieldset.no-border-fieldset > fieldset.m-fieldset {
207
+ border: 0;
208
+ }
209
+ .m-container-fieldset.no-border-fieldset > fieldset.m-fieldset legend {
210
+ position: relative;
211
+ left: -5px;
212
+ font-size: 16px;
213
+ font-weight: 500;
214
+ line-height: 24px;
215
+ padding: 0;
216
+ }
217
+ .m-container-fieldset.fieldset-in-card-fit {
218
+ border-bottom: 1px solid #e6e6e6;
219
+ }
220
+ .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset {
221
+ padding: 16px 0 16px 0 !important;
222
+ border: 0;
223
+ margin-top: 0;
224
+ margin-bottom: 0;
225
+ }
226
+ .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset legend {
227
+ position: relative;
228
+ top: 10px;
229
+ background-color: transparent;
230
+ }
231
+ .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-last {
232
+ padding-bottom: 0 !important;
233
+ border-bottom: 0;
234
+ }
235
+ .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-first {
236
+ padding-top: 0 !important;
237
+ }
238
+ .m-container-fieldset.fieldset-in-card-fit:last-child {
239
+ padding-bottom: 0 !important;
240
+ border-bottom: 0;
241
+ }
242
+ .m-container-fieldset.fieldset-in-card-fit:first {
243
+ padding-top: 0 !important;
244
+ }
245
+
151
246
  fieldset.m-fieldset {
152
247
  position: relative;
153
248
  border: 1px solid rgb(229, 229, 229);
@@ -174,6 +269,9 @@ fieldset.m-fieldset .m-form-tip {
174
269
  margin-left: 5px;
175
270
  }
176
271
 
272
+ .m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
273
+ border: 0;
274
+ }
177
275
  .m-fields-group-list .el-button--text {
178
276
  padding: 0;
179
277
  margin-bottom: 7px;
@@ -192,23 +290,23 @@ fieldset.m-fieldset .m-form-tip {
192
290
  .m-fields-group-list .m-fields-group-list-item:last-of-type {
193
291
  border-bottom: 0;
194
292
  }
195
- .m-fields-group-list .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
299
  display: flex;
203
300
  justify-content: space-between;
204
301
  margin-top: 10px;
302
+ margin-bottom: 16px;
205
303
  }
206
304
 
207
305
  .m-form-panel .el-card__header:hover {
208
306
  background: #f2f6fc;
209
307
  }
210
308
  .m-form-panel .el-card__header a {
211
- color: #409eff;
309
+ color: var(--el-color-primary, #409eff);
212
310
  }
213
311
  .m-form-panel .el-card__body {
214
312
  padding: 10px;
@@ -291,8 +389,8 @@ fieldset.m-fieldset .m-form-tip {
291
389
  margin-right: auto;
292
390
  min-width: 50px;
293
391
  outline: none;
294
- border-color: #409eff;
295
- color: #409eff;
392
+ border-color: var(--el-color-primary, #409eff);
393
+ color: var(--el-color-primary, #409eff);
296
394
  width: 10px;
297
395
  }
298
396
  .magic-form-dynamic-tab .el-tabs__header.is-top .el-tabs__new-tab::before {
@@ -329,4 +427,20 @@ fieldset.m-fieldset .m-form-tip {
329
427
  display: flex;
330
428
  align-items: center;
331
429
  justify-content: space-between;
430
+ }
431
+
432
+ .m-fields-radio-group__option {
433
+ display: flex;
434
+ align-items: center;
435
+ }
436
+
437
+ .m-fields-radio-group__text {
438
+ display: inline-block;
439
+ vertical-align: middle;
440
+ white-space: pre-line;
441
+ line-height: 20px;
442
+ }
443
+
444
+ .m-fields-radio-group__icon_with_text {
445
+ margin-right: 8px;
332
446
  }/*$vite$:1*/