@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,5 +1,7 @@
1
+ import { FORM_SILENT_MODE_KEY } from "./schema.js";
2
+ import { applyExtendState } from "./utils/form.js";
1
3
  import Form_default from "./Form.js";
2
- import { createApp, defineComponent, h, nextTick, ref, watch } from "vue";
4
+ import { createApp, defineComponent, h, nextTick, provide, ref, watch } from "vue";
3
5
  //#region packages/form/src/submitForm.ts
4
6
  /**
5
7
  * submitForm / validateForm 的公共脚手架:
@@ -40,7 +42,7 @@ var mountFormInstance = (options) => {
40
42
  resolve,
41
43
  reject
42
44
  });
43
- const app = createApp(typeof extendState === "function" ? defineComponent({
45
+ const wrapperComponent = typeof extendState === "function" ? defineComponent({
44
46
  name: "MFormExtendStateInjector",
45
47
  setup() {
46
48
  watch(() => formRef.value, (form) => {
@@ -52,14 +54,7 @@ var mountFormInstance = (options) => {
52
54
  console.error("[MForm] extendState failed:", e);
53
55
  return;
54
56
  }
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
- };
57
+ const apply = (state) => applyExtendState(form.formState, state);
63
58
  if (result && typeof result.then === "function") result.then(apply, (e) => console.error("[MForm] extendState failed:", e));
64
59
  else apply(result);
65
60
  }, {
@@ -68,7 +63,14 @@ var mountFormInstance = (options) => {
68
63
  });
69
64
  return () => h(userWrapper);
70
65
  }
71
- }) : userWrapper);
66
+ }) : userWrapper;
67
+ const app = createApp(hidden ? defineComponent({
68
+ name: "MFormSilentProvider",
69
+ setup() {
70
+ provide(FORM_SILENT_MODE_KEY, true);
71
+ return () => h(wrapperComponent);
72
+ }
73
+ }) : wrapperComponent);
72
74
  instance.app = app;
73
75
  if (appContext) Object.assign(app._context, appContext);
74
76
  if (timeout > 0 && !skipTimeout) timer = setTimeout(() => {
@@ -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);
@@ -313,6 +313,7 @@ var validateBuiltinTypeMatch = (value, fieldType, mForm, props, message) => {
313
313
  return;
314
314
  }
315
315
  if (typeof config.filter === "function") return;
316
+ if (fieldType === "text" && isNumberValue(value)) return;
316
317
  if (typeof value !== "string") return defaultMessage(message, `${value} 类型应为字符串`, typeExampleSuggestion(mForm, props, "\"文本内容\"", isStringValue));
317
318
  return;
318
319
  }
@@ -362,6 +363,7 @@ var validateBuiltinTypeMatch = (value, fieldType, mForm, props, message) => {
362
363
  };
363
364
  var validateTypeMatch = (value, mForm, props, message) => {
364
365
  if (isEmptyValue(value) || isEmptyArray(value)) return;
366
+ if (!props.config?.name) return;
365
367
  const rawFieldType = "type" in (props.config || {}) ? props.config.type : "";
366
368
  if (typeof rawFieldType !== "string" || !rawFieldType) return;
367
369
  const fieldType = toLine(rawFieldType);
package/dist/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*/