@tmagic/form 1.8.0-beta.13 → 1.8.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) 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/Container.vue_vue_type_script_setup_true_lang.js +23 -17
  5. package/dist/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js +6 -5
  6. package/dist/es/containers/GroupListItem.vue_vue_type_script_setup_true_lang.js +41 -31
  7. package/dist/es/containers/Panel.vue_vue_type_script_setup_true_lang.js +16 -10
  8. package/dist/es/containers/table/ActionsColumn.vue_vue_type_script_setup_true_lang.js +13 -6
  9. package/dist/es/containers/table/Table.vue_vue_type_script_setup_true_lang.js +4 -2
  10. package/dist/es/containers/table/useTableColumns.js +5 -1
  11. package/dist/es/containers/table-group-list/TableGroupList.vue_vue_type_script_setup_true_lang.js +2 -1
  12. package/dist/es/fields/Cascader.vue_vue_type_script_setup_true_lang.js +5 -2
  13. package/dist/es/fields/Checkbox.vue_vue_type_script_setup_true_lang.js +4 -1
  14. package/dist/es/fields/CheckboxGroup.vue_vue_type_script_setup_true_lang.js +5 -2
  15. package/dist/es/fields/ColorPicker.vue_vue_type_script_setup_true_lang.js +4 -1
  16. package/dist/es/fields/Date.vue_vue_type_script_setup_true_lang.js +5 -2
  17. package/dist/es/fields/DateTime.vue_vue_type_script_setup_true_lang.js +5 -2
  18. package/dist/es/fields/Daterange.vue_vue_type_script_setup_true_lang.js +5 -2
  19. package/dist/es/fields/Display.vue_vue_type_script_setup_true_lang.js +5 -2
  20. package/dist/es/fields/DynamicField.vue_vue_type_script_setup_true_lang.js +4 -1
  21. package/dist/es/fields/Link.vue_vue_type_script_setup_true_lang.js +29 -7
  22. package/dist/es/fields/Number.vue_vue_type_script_setup_true_lang.js +7 -2
  23. package/dist/es/fields/NumberRange.vue_vue_type_script_setup_true_lang.js +4 -1
  24. package/dist/es/fields/RadioGroup.vue_vue_type_script_setup_true_lang.js +19 -9
  25. package/dist/es/fields/Select.vue_vue_type_script_setup_true_lang.js +4 -1
  26. package/dist/es/fields/Switch.vue_vue_type_script_setup_true_lang.js +4 -1
  27. package/dist/es/fields/Text.vue_vue_type_script_setup_true_lang.js +112 -77
  28. package/dist/es/fields/Textarea.vue_vue_type_script_setup_true_lang.js +4 -1
  29. package/dist/es/fields/Time.vue_vue_type_script_setup_true_lang.js +4 -1
  30. package/dist/es/fields/Timerange.vue_vue_type_script_setup_true_lang.js +6 -3
  31. package/dist/es/index.js +3 -3
  32. package/dist/es/plugin.js +3 -1
  33. package/dist/es/style.css +122 -8
  34. package/dist/es/submitForm.js +2 -8
  35. package/dist/es/utils/config.js +4 -1
  36. package/dist/es/utils/form.js +33 -3
  37. package/dist/es/utils/typeMatch.js +1 -1
  38. package/dist/style.css +122 -8
  39. package/dist/themes/magic-admin.css +499 -0
  40. package/dist/tmagic-form.umd.cjs +541 -296
  41. package/package.json +4 -4
  42. package/src/Form.vue +71 -18
  43. package/src/FormDialog.vue +14 -3
  44. package/src/FormDrawer.vue +40 -12
  45. package/src/containers/Container.vue +16 -5
  46. package/src/containers/GroupList.vue +1 -1
  47. package/src/containers/GroupListItem.vue +28 -22
  48. package/src/containers/Panel.vue +10 -3
  49. package/src/containers/table/ActionsColumn.vue +10 -4
  50. package/src/containers/table/Table.vue +1 -0
  51. package/src/containers/table/useTableColumns.ts +7 -3
  52. package/src/containers/table-group-list/TableGroupList.vue +7 -1
  53. package/src/fields/Link.vue +16 -3
  54. package/src/fields/Number.vue +2 -1
  55. package/src/fields/RadioGroup.vue +21 -6
  56. package/src/fields/Text.vue +43 -19
  57. package/src/plugin.ts +3 -0
  58. package/src/submitForm.ts +5 -11
  59. package/src/theme/container.scss +3 -0
  60. package/src/theme/fieldset.scss +51 -0
  61. package/src/theme/form.scss +6 -0
  62. package/src/theme/group-list.scss +9 -7
  63. package/src/theme/index.scss +1 -0
  64. package/src/theme/link.scss +17 -0
  65. package/src/theme/panel.scss +1 -1
  66. package/src/theme/radio-group.scss +23 -0
  67. package/src/theme/tabs.scss +2 -2
  68. package/src/theme/text.scss +38 -0
  69. package/src/theme/themes/magic-admin/index.scss +95 -0
  70. package/src/utils/config.ts +7 -1
  71. package/src/utils/form.ts +37 -0
  72. package/types/index.d.ts +64 -3
@@ -1,13 +1,21 @@
1
1
  import { useAddField } from "../utils/useAddField.js";
2
- import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, openBlock, readonly, ref, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
2
+ import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, readonly, ref, shallowRef, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
3
3
  import { debounce } from "lodash-es";
4
4
  import { TMagicButton, TMagicInput } from "@tmagic/design";
5
5
  import { isNumber } from "@tmagic/utils";
6
6
  import { createPopper } from "@popperjs/core";
7
7
  //#region packages/form/src/fields/Text.vue?vue&type=script&setup=true&lang.ts
8
- var _hoisted_1 = { 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
2
  import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "./schema.js";
3
+ import { clearTypeMatchRules, deleteTypeMatchRule, getTypeMatchRule, registerTypeMatchRule, registerTypeMatchRules, validateTypeMatch } from "./utils/typeMatch.js";
4
+ import { adaptFormValidator, applyExtendState, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange } from "./utils/form.js";
3
5
  import { useAddField } from "./utils/useAddField.js";
4
6
  import Hidden_default from "./fields/Hidden.js";
5
7
  import { deleteField, getField, registerField } from "./utils/config.js";
6
- import { clearTypeMatchRules, deleteTypeMatchRule, getTypeMatchRule, registerTypeMatchRule, registerTypeMatchRules, validateTypeMatch } from "./utils/typeMatch.js";
7
- import { adaptFormValidator, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange } from "./utils/form.js";
8
8
  import Container_default from "./containers/Container.js";
9
9
  import Form_default from "./Form.js";
10
10
  import { stripTabItemsLazy, submitForm, validateForm } from "./submitForm.js";
@@ -40,4 +40,4 @@ import plugin_default from "./plugin.js";
40
40
  export * from "@tmagic/form-schema";
41
41
  var createForm = (config) => config;
42
42
  //#endregion
43
- export { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY, Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, adaptFormValidator, clearTypeMatchRules, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, deleteTypeMatchRule, display, filterFunction, getDataByPage, getField as getFormField, getRules, getTypeMatchRule, initValue, registerField as registerFormField, registerTypeMatchRule, registerTypeMatchRules, sortArray, sortChange, stripTabItemsLazy, submitForm, useAddField, validateForm, validateTypeMatch };
43
+ export { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY, Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, adaptFormValidator, applyExtendState, clearTypeMatchRules, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, deleteTypeMatchRule, display, filterFunction, getDataByPage, getField as getFormField, getRules, getTypeMatchRule, initValue, registerField as registerFormField, registerTypeMatchRule, registerTypeMatchRules, sortArray, sortChange, stripTabItemsLazy, submitForm, useAddField, validateForm, validateTypeMatch };
package/dist/es/plugin.js CHANGED
@@ -1,9 +1,10 @@
1
+ import { registerTypeMatchRules } from "./utils/typeMatch.js";
1
2
  import Hidden_default from "./fields/Hidden.js";
2
3
  import { setConfig } from "./utils/config.js";
3
- import { registerTypeMatchRules } from "./utils/typeMatch.js";
4
4
  import Container_default from "./containers/Container.js";
5
5
  import Form_default from "./Form.js";
6
6
  import FormDialog_default from "./FormDialog.js";
7
+ import FormDrawer_default from "./FormDrawer.js";
7
8
  import Fieldset_default from "./containers/Fieldset.js";
8
9
  import FlexLayout_default from "./containers/FlexLayout.js";
9
10
  import Panel_default from "./containers/Panel.js";
@@ -40,6 +41,7 @@ var plugin_default = { install(app, opt = {}) {
40
41
  if (option.typeMatchRules) registerTypeMatchRules(option.typeMatchRules);
41
42
  app.component("m-form", Form_default);
42
43
  app.component("m-form-dialog", FormDialog_default);
44
+ app.component("m-form-drawer", FormDrawer_default);
43
45
  app.component("m-form-container", Container_default);
44
46
  app.component("m-form-fieldset", Fieldset_default);
45
47
  app.component("m-form-group-list", TableGroupList_default);
package/dist/es/style.css CHANGED
@@ -16,6 +16,9 @@
16
16
  .m-form-container .tmagic-design-form-item.show-before-diff {
17
17
  background: #f7dadd;
18
18
  }
19
+ .m-form-container .m-form-title-extra {
20
+ margin-left: 8px;
21
+ }
19
22
 
20
23
  .m-form-dialog .el-dialog__body {
21
24
  padding: 0 !important;
@@ -76,6 +79,10 @@
76
79
  margin-bottom: var(--td-comp-margin-xxl);
77
80
  }
78
81
 
82
+ .m-form-container .m-form-container-expand {
83
+ text-align: center;
84
+ }
85
+
79
86
  .magic-datetime-picker-popper .el-picker-panel__footer button:first-child {
80
87
  display: none;
81
88
  }
@@ -85,6 +92,24 @@
85
92
  align-items: center;
86
93
  width: 100%;
87
94
  }
95
+ .m-fields-text--static {
96
+ gap: 6px;
97
+ min-height: 32px;
98
+ }
99
+ .m-fields-text--static .m-fields-text__prepend {
100
+ color: var(--el-text-color-secondary, #909399);
101
+ }
102
+ .m-fields-text--static .m-fields-text__value {
103
+ color: var(--el-text-color-regular, #606266);
104
+ overflow: hidden;
105
+ text-overflow: ellipsis;
106
+ white-space: nowrap;
107
+ }
108
+ .m-fields-text--static .m-fields-text__icon {
109
+ width: 16px;
110
+ height: 16px;
111
+ cursor: pointer;
112
+ }
88
113
 
89
114
  .m-form-validate__warning {
90
115
  color: var(--el-color-warning);
@@ -110,6 +135,16 @@
110
135
  outline: none;
111
136
  }
112
137
 
138
+ .m-container-text.m-fields-title-container .tmagic-design-form-item .el-form-item__label {
139
+ color: #0f1113;
140
+ font-weight: 500;
141
+ font-size: 16px;
142
+ }
143
+ .m-container-text.m-fields-title-container .tmagic-design-form-item {
144
+ line-height: 24px;
145
+ margin-bottom: 16px;
146
+ }
147
+
113
148
  .tmagic-form-text-popper[data-popper-placement^=top] > .tmagic-form-text-popper-arrow {
114
149
  bottom: -4px;
115
150
  }
@@ -148,6 +183,66 @@ div.m-fields-link {
148
183
  width: fit-content;
149
184
  }
150
185
 
186
+ a.magic-admin-link {
187
+ width: 100%;
188
+ box-sizing: border-box;
189
+ border-radius: 4px;
190
+ border: 1px solid #e6e6e6;
191
+ background-color: #fafafa;
192
+ padding: 0 8px;
193
+ height: 28px;
194
+ display: inline-flex;
195
+ gap: 4px;
196
+ align-items: center;
197
+ text-decoration: none;
198
+ }
199
+ a.magic-admin-link i {
200
+ margin-right: 4px;
201
+ }
202
+
203
+ .m-container-fieldset.no-border-fieldset.fieldset-in-row > fieldset.m-fieldset legend {
204
+ left: 0;
205
+ }
206
+ .m-container-fieldset.no-border-fieldset > fieldset.m-fieldset {
207
+ border: 0;
208
+ }
209
+ .m-container-fieldset.no-border-fieldset > fieldset.m-fieldset legend {
210
+ position: relative;
211
+ left: -5px;
212
+ font-size: 16px;
213
+ font-weight: 500;
214
+ line-height: 24px;
215
+ padding: 0;
216
+ }
217
+ .m-container-fieldset.fieldset-in-card-fit {
218
+ border-bottom: 1px solid #e6e6e6;
219
+ }
220
+ .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset {
221
+ padding: 16px 0 16px 0 !important;
222
+ border: 0;
223
+ margin-top: 0;
224
+ margin-bottom: 0;
225
+ }
226
+ .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset legend {
227
+ position: relative;
228
+ top: 10px;
229
+ background-color: transparent;
230
+ }
231
+ .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-last {
232
+ padding-bottom: 0 !important;
233
+ border-bottom: 0;
234
+ }
235
+ .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-first {
236
+ padding-top: 0 !important;
237
+ }
238
+ .m-container-fieldset.fieldset-in-card-fit:last-child {
239
+ padding-bottom: 0 !important;
240
+ border-bottom: 0;
241
+ }
242
+ .m-container-fieldset.fieldset-in-card-fit:first {
243
+ padding-top: 0 !important;
244
+ }
245
+
151
246
  fieldset.m-fieldset {
152
247
  position: relative;
153
248
  border: 1px solid rgb(229, 229, 229);
@@ -174,6 +269,9 @@ fieldset.m-fieldset .m-form-tip {
174
269
  margin-left: 5px;
175
270
  }
176
271
 
272
+ .m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
273
+ border: 0;
274
+ }
177
275
  .m-fields-group-list .el-button--text {
178
276
  padding: 0;
179
277
  margin-bottom: 7px;
@@ -192,23 +290,23 @@ fieldset.m-fieldset .m-form-tip {
192
290
  .m-fields-group-list .m-fields-group-list-item:last-of-type {
193
291
  border-bottom: 0;
194
292
  }
195
- .m-fields-group-list .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*/
@@ -1,3 +1,4 @@
1
+ import { applyExtendState } from "./utils/form.js";
1
2
  import Form_default from "./Form.js";
2
3
  import { createApp, defineComponent, h, nextTick, ref, watch } from "vue";
3
4
  //#region packages/form/src/submitForm.ts
@@ -52,14 +53,7 @@ var mountFormInstance = (options) => {
52
53
  console.error("[MForm] extendState failed:", e);
53
54
  return;
54
55
  }
55
- const apply = (state) => {
56
- if (!state) return;
57
- for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) if ("value" in descriptor) form.formState[key] = state[key];
58
- else {
59
- descriptor.configurable = true;
60
- Object.defineProperty(form.formState, key, descriptor);
61
- }
62
- };
56
+ const apply = (state) => applyExtendState(form.formState, state);
63
57
  if (result && typeof result.then === "function") result.then(apply, (e) => console.error("[MForm] extendState failed:", e));
64
58
  else apply(result);
65
59
  }, {
@@ -1,7 +1,10 @@
1
+ import { ref } from "vue";
1
2
  //#region packages/form/src/utils/config.ts
2
3
  var $MAGIC_FORM = {};
4
+ var isGlobalFlat = ref(false);
3
5
  var setConfig = (option) => {
4
6
  $MAGIC_FORM = option;
7
+ isGlobalFlat.value = option.flat ?? false;
5
8
  };
6
9
  var getConfig = (key) => $MAGIC_FORM[key];
7
10
  var fieldRegistry = /* @__PURE__ */ new Map();
@@ -12,4 +15,4 @@ var registerField = (tagName, component) => {
12
15
  var getField = (tagName) => fieldRegistry.get(tagName);
13
16
  var deleteField = (tagName) => fieldRegistry.delete(tagName);
14
17
  //#endregion
15
- export { deleteField, getConfig, getField, registerField, setConfig };
18
+ export { deleteField, getConfig, getField, isGlobalFlat, registerField, setConfig };
@@ -1,10 +1,10 @@
1
1
  import { createTypeMatchValidator } from "./typeMatch.js";
2
2
  import { readonly } from "vue";
3
+ import dayjs from "dayjs";
4
+ import utc from "dayjs/plugin/utc";
3
5
  import { cloneDeep } from "lodash-es";
4
6
  import { getDesignConfig } from "@tmagic/design";
5
7
  import { getValueByKeyPath } from "@tmagic/utils";
6
- import dayjs from "dayjs";
7
- import utc from "dayjs/plugin/utc";
8
8
  //#region packages/form/src/utils/form.ts
9
9
  var isTDesignAdapter = () => getDesignConfig("adapterType") === "tdesign-vue-next";
10
10
  /**
@@ -203,6 +203,36 @@ var sortChange = (data, { prop, order }) => {
203
203
  if (order === "ascending") data.sort((a, b) => a[prop] - b[prop]);
204
204
  else if (order === "descending") data.sort((a, b) => b[prop] - a[prop]);
205
205
  };
206
+ /**
207
+ * 将 extendState 返回的扩展字段合并进 formState。
208
+ *
209
+ * - data 描述符(普通字段)通过 `formState[key] = value` 写入,走 reactive proxy 的 set,
210
+ * 触发依赖通知;
211
+ * - accessor 描述符(`{ get stage() { return ... } }`)按原样 defineProperty,调用方
212
+ * 可控制读时求值;强制 `configurable: true` 以便下一次合并可再 define。
213
+ *
214
+ * 注意:formState 上由 props 派生的字段(keyProp / popperClass / config / initValues /
215
+ * isCompare / lastValues / parentValues)是只读 getter(无 setter),extendState 若以
216
+ * 普通字段形式返回同名 key,直接赋值会让 proxy 的 set trap 失败并抛出
217
+ * `TypeError: 'set' on proxy: trap returned falsish`,这里统一跳过并告警;
218
+ * 如确需覆盖,可在 extendState 中以 get 访问器形式返回。
219
+ */
220
+ var applyExtendState = (formState, state) => {
221
+ if (!state) return;
222
+ for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) {
223
+ if (!("value" in descriptor)) {
224
+ descriptor.configurable = true;
225
+ Object.defineProperty(formState, key, descriptor);
226
+ continue;
227
+ }
228
+ const targetDescriptor = Object.getOwnPropertyDescriptor(formState, key);
229
+ if (targetDescriptor && !("value" in targetDescriptor) && typeof targetDescriptor.set !== "function") {
230
+ console.warn(`[MForm] extendState: "${key}" is a read-only field derived from props and cannot be assigned a plain value. Return it as a getter accessor if you really need to override it.`);
231
+ continue;
232
+ }
233
+ formState[key] = state[key];
234
+ }
235
+ };
206
236
  var createObjectProp = (prop, key, name) => {
207
237
  if (prop === "") return key;
208
238
  const itemPath = `${prop}`.split(".");
@@ -212,4 +242,4 @@ var createObjectProp = (prop, key, name) => {
212
242
  return `${[...itemPath, key].join(".")}`;
213
243
  };
214
244
  //#endregion
215
- export { adaptFormValidator, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange };
245
+ export { adaptFormValidator, applyExtendState, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange };
@@ -1,7 +1,7 @@
1
1
  import { readonly } from "vue";
2
+ import dayjs from "dayjs";
2
3
  import { appendValidateSuggestion } from "@tmagic/design";
3
4
  import { getValueByKeyPath, toLine } from "@tmagic/utils";
4
- import dayjs from "dayjs";
5
5
  import customParseFormat from "dayjs/plugin/customParseFormat";
6
6
  //#region packages/form/src/utils/typeMatch.ts
7
7
  dayjs.extend(customParseFormat);