@tmagic/form 1.8.0-beta.25 → 1.8.0-beta.26

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 (130) hide show
  1. package/dist/es/Form.vue_vue_type_script_setup_true_lang.js +47 -120
  2. package/dist/es/FormBox.vue_vue_type_script_setup_true_lang.js +3 -3
  3. package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js +3 -3
  4. package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js +3 -3
  5. package/dist/es/containers/Col.vue_vue_type_script_setup_true_lang.js +3 -0
  6. package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js +36 -51
  7. package/dist/es/containers/Fieldset.vue_vue_type_script_setup_true_lang.js +6 -0
  8. package/dist/es/containers/FlexLayout.vue_vue_type_script_setup_true_lang.js +4 -1
  9. package/dist/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js +37 -15
  10. package/dist/es/containers/GroupListItem.vue_vue_type_script_setup_true_lang.js +109 -97
  11. package/dist/es/containers/Panel.vue_vue_type_script_setup_true_lang.js +7 -2
  12. package/dist/es/containers/Row.vue_vue_type_script_setup_true_lang.js +3 -0
  13. package/dist/es/containers/Step.vue_vue_type_script_setup_true_lang.js +4 -1
  14. package/dist/es/containers/Tabs.vue_vue_type_script_setup_true_lang.js +7 -0
  15. package/dist/es/containers/table/Table.vue_vue_type_script_setup_true_lang.js +7 -5
  16. package/dist/es/containers/table/useTableColumns.js +5 -13
  17. package/dist/es/containers/table-group-list/TableGroupList.vue_vue_type_script_setup_true_lang.js +71 -78
  18. package/dist/es/containers/table-group-list/useAdd.js +26 -16
  19. package/dist/es/containers/table-group-list/useScrollLastItemIntoView.js +72 -0
  20. package/dist/es/fields/Cascader.vue_vue_type_script_setup_true_lang.js +1 -1
  21. package/dist/es/fields/CheckboxGroup/Index.js +5 -0
  22. package/dist/es/fields/{CheckboxGroup.vue_vue_type_script_setup_true_lang.js → CheckboxGroup/Index.vue_vue_type_script_setup_true_lang.js} +6 -7
  23. package/dist/es/fields/CheckboxGroup/effect.js +8 -0
  24. package/dist/es/fields/Date/Index.js +5 -0
  25. package/dist/es/fields/{Date.vue_vue_type_script_setup_true_lang.js → Date/Index.vue_vue_type_script_setup_true_lang.js} +5 -7
  26. package/dist/es/fields/Date/effect.js +10 -0
  27. package/dist/es/fields/DateTime/Index.js +5 -0
  28. package/dist/es/fields/{DateTime.vue_vue_type_script_setup_true_lang.js → DateTime/Index.vue_vue_type_script_setup_true_lang.js} +5 -9
  29. package/dist/es/fields/DateTime/effect.js +15 -0
  30. package/dist/es/fields/Display/Index.js +5 -0
  31. package/dist/es/fields/{Display.vue_vue_type_script_setup_true_lang.js → Display/Index.vue_vue_type_script_setup_true_lang.js} +6 -7
  32. package/dist/es/fields/Display/effect.js +8 -0
  33. package/dist/es/fields/DynamicField/Index.js +5 -0
  34. package/dist/es/fields/{DynamicField.vue_vue_type_script_setup_true_lang.js → DynamicField/Index.vue_vue_type_script_setup_true_lang.js} +11 -15
  35. package/dist/es/fields/DynamicField/effect.js +40 -0
  36. package/dist/es/fields/Link.vue_vue_type_script_setup_true_lang.js +1 -1
  37. package/dist/es/fields/Number.vue_vue_type_script_setup_true_lang.js +1 -1
  38. package/dist/es/fields/NumberRange/Index.js +5 -0
  39. package/dist/es/fields/{NumberRange.vue_vue_type_script_setup_true_lang.js → NumberRange/Index.vue_vue_type_script_setup_true_lang.js} +5 -6
  40. package/dist/es/fields/NumberRange/effect.js +8 -0
  41. package/dist/es/fields/Select.vue_vue_type_script_setup_true_lang.js +2 -2
  42. package/dist/es/fields/Text.vue_vue_type_script_setup_true_lang.js +1 -1
  43. package/dist/es/headless.js +13 -0
  44. package/dist/es/index.js +17 -12
  45. package/dist/es/plugin.js +57 -41
  46. package/dist/es/schema.js +6 -8
  47. package/dist/es/style.css +81 -1
  48. package/dist/es/submitForm.js +44 -194
  49. package/dist/es/utils/builtInFields.js +49 -0
  50. package/dist/es/utils/collectFields.js +407 -0
  51. package/dist/es/utils/config.js +1 -8
  52. package/dist/es/utils/fieldInnerConfig.js +42 -0
  53. package/dist/es/utils/fieldValueEffects.js +80 -0
  54. package/dist/es/utils/form.js +96 -43
  55. package/dist/es/utils/formStateProxy.js +75 -0
  56. package/dist/es/utils/registerField.js +158 -0
  57. package/dist/es/utils/submitHeadless.js +54 -0
  58. package/dist/es/utils/tableGroupList.js +85 -0
  59. package/dist/es/utils/typeMatch.js +17 -19
  60. package/dist/es/utils/validateError.js +57 -0
  61. package/dist/es/utils/validateValues.js +115 -0
  62. package/dist/style.css +81 -1
  63. package/dist/themes/magic-admin.css +83 -7
  64. package/dist/tmagic-form-headless.umd.cjs +4044 -0
  65. package/dist/tmagic-form.umd.cjs +1975 -874
  66. package/package.json +10 -4
  67. package/src/Form.vue +49 -149
  68. package/src/FormBox.vue +5 -4
  69. package/src/FormDialog.vue +5 -5
  70. package/src/FormDrawer.vue +5 -5
  71. package/src/containers/Col.vue +2 -0
  72. package/src/containers/Container.vue +86 -157
  73. package/src/containers/Fieldset.vue +5 -0
  74. package/src/containers/FlexLayout.vue +2 -0
  75. package/src/containers/GroupList.vue +41 -11
  76. package/src/containers/GroupListItem.vue +83 -80
  77. package/src/containers/Panel.vue +3 -0
  78. package/src/containers/Row.vue +2 -0
  79. package/src/containers/Step.vue +2 -0
  80. package/src/containers/Tabs.vue +13 -0
  81. package/src/containers/table/ActionsColumn.vue +1 -1
  82. package/src/containers/table/Table.vue +4 -3
  83. package/src/containers/table/usePagination.ts +1 -1
  84. package/src/containers/table/useSortable.ts +1 -1
  85. package/src/containers/table/useTableColumns.ts +9 -19
  86. package/src/containers/table-group-list/TableGroupList.vue +43 -71
  87. package/src/containers/table-group-list/useAdd.ts +40 -25
  88. package/src/containers/table-group-list/useScrollLastItemIntoView.ts +94 -0
  89. package/src/fields/{CheckboxGroup.vue → CheckboxGroup/Index.vue} +3 -8
  90. package/src/fields/CheckboxGroup/effect.ts +27 -0
  91. package/src/fields/{Date.vue → Date/Index.vue} +2 -5
  92. package/src/fields/Date/effect.ts +29 -0
  93. package/src/fields/{DateTime.vue → DateTime/Index.vue} +2 -16
  94. package/src/fields/DateTime/effect.ts +36 -0
  95. package/src/fields/{Display.vue → Display/Index.vue} +3 -7
  96. package/src/fields/Display/effect.ts +28 -0
  97. package/src/fields/{DynamicField.vue → DynamicField/Index.vue} +11 -11
  98. package/src/fields/DynamicField/effect.ts +74 -0
  99. package/src/fields/{NumberRange.vue → NumberRange/Index.vue} +2 -6
  100. package/src/fields/NumberRange/effect.ts +27 -0
  101. package/src/headless.ts +78 -0
  102. package/src/index.ts +32 -15
  103. package/src/plugin.ts +63 -42
  104. package/src/schema.ts +6 -8
  105. package/src/submitForm.ts +81 -409
  106. package/src/theme/group-list.scss +107 -1
  107. package/src/theme/themes/magic-admin/index.scss +2 -8
  108. package/src/utils/builtInFields.ts +69 -0
  109. package/src/utils/collectFields.ts +561 -0
  110. package/src/utils/config.ts +1 -15
  111. package/src/utils/fieldInnerConfig.ts +127 -0
  112. package/src/utils/fieldValueEffects.ts +140 -0
  113. package/src/utils/form.ts +141 -75
  114. package/src/utils/formStateProxy.ts +104 -0
  115. package/src/utils/registerField.ts +308 -0
  116. package/src/utils/submitHeadless.ts +206 -0
  117. package/src/utils/tableGroupList.ts +120 -0
  118. package/src/utils/typeMatch.ts +19 -15
  119. package/src/utils/validateError.ts +92 -0
  120. package/src/utils/validateValues.ts +177 -0
  121. package/types/headless.d.ts +682 -0
  122. package/types/index.d.ts +631 -272
  123. package/dist/es/fields/CheckboxGroup.js +0 -5
  124. package/dist/es/fields/Date.js +0 -5
  125. package/dist/es/fields/DateTime.js +0 -5
  126. package/dist/es/fields/Display.js +0 -5
  127. package/dist/es/fields/DynamicField.js +0 -5
  128. package/dist/es/fields/NumberRange.js +0 -5
  129. package/dist/es/utils/silentLeafFieldTypes.js +0 -49
  130. package/src/utils/silentLeafFieldTypes.ts +0 -71
@@ -1,12 +1,13 @@
1
- import { useAddField } from "../utils/useAddField.js";
2
- import { getConfig } from "../utils/config.js";
1
+ import { getConfig } from "../../utils/config.js";
2
+ import { useAddField } from "../../utils/useAddField.js";
3
+ import { eachDynamicField } from "./effect.js";
3
4
  import { Fragment, createBlock, createElementBlock, createVNode, defineComponent, onBeforeUnmount, openBlock, reactive, renderList, unref, watch, withCtx } from "vue";
4
5
  import { TMagicForm, TMagicFormItem, TMagicInput } from "@tmagic/design";
5
- //#region packages/form/src/fields/DynamicField.vue?vue&type=script&setup=true&lang.ts
6
+ //#region packages/form/src/fields/DynamicField/Index.vue?vue&type=script&setup=true&lang.ts
6
7
  var _hoisted_1 = { class: "m-fields-dynamic-field" };
7
- var DynamicField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
8
+ var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
8
9
  name: "MFormDynamicField",
9
- __name: "DynamicField",
10
+ __name: "Index",
10
11
  props: {
11
12
  config: {},
12
13
  model: {},
@@ -44,15 +45,10 @@ var DynamicField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
44
45
  const fields = await props.config.returnFields(props.config, props.model, request);
45
46
  fieldMap.value = {};
46
47
  fieldLabelMap.value = {};
47
- fields.forEach((v) => {
48
- if (typeof v !== "object" || v.name === void 0) return;
49
- let oldVal = props.model?.[v.name] || "";
50
- if (!oldVal && v.defaultValue !== void 0) {
51
- oldVal = v.defaultValue;
52
- emit("change", oldVal, { modifyKey: v.name });
53
- }
54
- fieldMap.value[v.name] = oldVal;
55
- fieldLabelMap.value[v.name] = v.label || "";
48
+ eachDynamicField(fields, props.model, (field, value, isDefaultApplied) => {
49
+ if (isDefaultApplied) emit("change", value, { modifyKey: field.name });
50
+ fieldMap.value[field.name] = value;
51
+ fieldLabelMap.value[field.name] = field.label || "";
56
52
  });
57
53
  };
58
54
  const unwatch = watch(() => props.model?.[props.config.dynamicKey], (val) => {
@@ -91,4 +87,4 @@ var DynamicField_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
91
87
  }
92
88
  });
93
89
  //#endregion
94
- export { DynamicField_vue_vue_type_script_setup_true_lang_default as default };
90
+ export { Index_vue_vue_type_script_setup_true_lang_default as default };
@@ -0,0 +1,40 @@
1
+ import { getConfig } from "../../utils/config.js";
2
+ import { setValueByKeyPath } from "@tmagic/utils";
3
+ //#region packages/form/src/fields/DynamicField/effect.ts
4
+ /**
5
+ * 遍历动态字段列表,按「原值为空且声明了 defaultValue 则取默认值」求出每个字段当前的值。
6
+ *
7
+ * `isDefaultApplied` 为真表示该值来自 `defaultValue`,需要写回表单值
8
+ * (组件通过 emit change 写回,初始化写入直接写 `values`)。
9
+ */
10
+ var eachDynamicField = (fields, model, onField) => {
11
+ for (const field of fields) {
12
+ if (typeof field !== "object" || field?.name === void 0) continue;
13
+ let value = model?.[field.name] || "";
14
+ let isDefaultApplied = false;
15
+ if (!value && field.defaultValue !== void 0) {
16
+ value = field.defaultValue;
17
+ isDefaultApplied = true;
18
+ }
19
+ onField(field, value, isDefaultApplied);
20
+ }
21
+ };
22
+ /**
23
+ * 同步 `returnFields` 的 defaultValue 按 prop 写入值根对象。
24
+ *
25
+ * 该组件读取的是同级 model,但写入走 Container 的 modifyKey 分支,落在 `${prop}.${key}`,
26
+ * 这里保持与渲染一致(含这层不对称),避免两条链路产出不同的值。
27
+ * 异步 returnFields 由组件挂载后的 watch 负责,此处不等待。
28
+ */
29
+ var effect = ({ config, model, prop, values }) => {
30
+ const { returnFields, dynamicKey } = config;
31
+ if (typeof returnFields !== "function" || !model) return;
32
+ if (model[dynamicKey] === "") return;
33
+ const result = returnFields(config, model, getConfig("request"));
34
+ if (!result || typeof result.then === "function" || !Array.isArray(result)) return;
35
+ eachDynamicField(result, model, (field, value, isDefaultApplied) => {
36
+ if (isDefaultApplied) setValueByKeyPath(`${prop}.${field.name}`, value, values || model);
37
+ });
38
+ };
39
+ //#endregion
40
+ export { eachDynamicField, effect };
@@ -1,5 +1,5 @@
1
- import { useAddField } from "../utils/useAddField.js";
2
1
  import { isGlobalFlat } from "../utils/config.js";
2
+ import { useAddField } from "../utils/useAddField.js";
3
3
  import FormDialog_default from "../FormDialog.js";
4
4
  import { computed, createElementBlock, createTextVNode, createVNode, defineComponent, inject, normalizeStyle, openBlock, readonly, ref, toDisplayString, unref, withCtx } from "vue";
5
5
  import { TMagicButton, TMagicIcon } from "@tmagic/design";
@@ -1,5 +1,5 @@
1
- import { useAddField } from "../utils/useAddField.js";
2
1
  import { isGlobalFlat } from "../utils/config.js";
2
+ import { useAddField } from "../utils/useAddField.js";
3
3
  import { createBlock, createCommentVNode, defineComponent, inject, openBlock, ref, unref, watch } from "vue";
4
4
  import { TMagicInputNumber } from "@tmagic/design";
5
5
  //#region packages/form/src/fields/Number.vue?vue&type=script&setup=true&lang.ts
@@ -0,0 +1,5 @@
1
+ import Index_vue_vue_type_script_setup_true_lang_default from "./Index.vue_vue_type_script_setup_true_lang.js";
2
+ //#region packages/form/src/fields/NumberRange/Index.vue
3
+ var Index_default = Index_vue_vue_type_script_setup_true_lang_default;
4
+ //#endregion
5
+ export { Index_default as default };
@@ -1,11 +1,11 @@
1
- import { useAddField } from "../utils/useAddField.js";
1
+ import { useAddField } from "../../utils/useAddField.js";
2
2
  import { createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, unref, watch } from "vue";
3
3
  import { TMagicInput } from "@tmagic/design";
4
- //#region packages/form/src/fields/NumberRange.vue?vue&type=script&setup=true&lang.ts
4
+ //#region packages/form/src/fields/NumberRange/Index.vue?vue&type=script&setup=true&lang.ts
5
5
  var _hoisted_1 = { class: "m-fields-number-range" };
6
- var NumberRange_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
6
+ var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
7
7
  name: "MFormNumberRange",
8
- __name: "NumberRange",
8
+ __name: "Index",
9
9
  props: {
10
10
  config: {},
11
11
  model: {},
@@ -35,7 +35,6 @@ var NumberRange_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
35
35
  deep: true
36
36
  });
37
37
  useAddField(props.prop);
38
- if (!Array.isArray(props.model[props.name])) props.model[props.name] = [];
39
38
  const minChangeHandler = (v) => {
40
39
  emit("change", [Number(v), props.model[props.name][1]]);
41
40
  };
@@ -76,4 +75,4 @@ var NumberRange_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
76
75
  }
77
76
  });
78
77
  //#endregion
79
- export { NumberRange_vue_vue_type_script_setup_true_lang_default as default };
78
+ export { Index_vue_vue_type_script_setup_true_lang_default as default };
@@ -0,0 +1,8 @@
1
+ //#region packages/form/src/fields/NumberRange/effect.ts
2
+ /** 值不是数组时修正为空数组。 */
3
+ var effect = ({ config, model }) => {
4
+ const { name } = config;
5
+ if (model && !Array.isArray(model[name])) model[name] = [];
6
+ };
7
+ //#endregion
8
+ export { effect };
@@ -1,8 +1,8 @@
1
- import { useAddField } from "../utils/useAddField.js";
2
1
  import { getConfig } from "../utils/config.js";
2
+ import { useAddField } from "../utils/useAddField.js";
3
3
  import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, mergeProps, nextTick, openBlock, ref, renderList, resolveDirective, resolveDynamicComponent, unref, watch, watchEffect, withCtx, withDirectives } from "vue";
4
- import { TMagicSelect, getDesignConfig } from "@tmagic/design";
5
4
  import { getValueByKeyPath } from "@tmagic/utils";
5
+ import { TMagicSelect, getDesignConfig } from "@tmagic/design";
6
6
  //#region packages/form/src/fields/Select.vue?vue&type=script&setup=true&lang.ts
7
7
  var _hoisted_1 = { key: 2 };
8
8
  var Select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -1,8 +1,8 @@
1
1
  import { useAddField } from "../utils/useAddField.js";
2
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
- import { TMagicButton, TMagicInput } from "@tmagic/design";
5
4
  import { isNumber } from "@tmagic/utils";
5
+ import { TMagicButton, TMagicInput } from "@tmagic/design";
6
6
  import { createPopper } from "@popperjs/core";
7
7
  //#region packages/form/src/fields/Text.vue?vue&type=script&setup=true&lang.ts
8
8
  var _hoisted_1 = { key: 0 };
@@ -0,0 +1,13 @@
1
+ import { FORM_CONTEXT_KEY, FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "./schema.js";
2
+ import { isLeafFieldType } from "./utils/fieldValueEffects.js";
3
+ import { MAX_SUGGESTION_OPTIONS, clearTypeMatchRules, deleteTypeMatchRule, getTypeMatchRule, optionSuggestion, stringifyExampleValue, validateTypeMatch } from "./utils/typeMatch.js";
4
+ import { createFormStateProxy, mergeFormContexts } from "./utils/formStateProxy.js";
5
+ import { adaptFormValidator, appendProp, createFormStateBase, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getItemProp, getNativeRules, getRules, initValue, isValidName, resolveItemType, sortArray, sortChange } from "./utils/form.js";
6
+ import { FieldInnerConfigError, applyMountValueEffects, collectValidatableFields, isFieldInnerConfigError } from "./utils/collectFields.js";
7
+ import { formatValidateError, getTextByName } from "./utils/validateError.js";
8
+ import { createHeadlessFormState, validateValues } from "./utils/validateValues.js";
9
+ import { submitForm, validateForm } from "./utils/submitHeadless.js";
10
+ import { clearFields, getField, mergeFieldOptions, registerBuiltInFields, registerField, registerFields, unregisterField } from "./utils/registerField.js";
11
+ import { builtInFields } from "./utils/builtInFields.js";
12
+ export * from "@tmagic/form-schema";
13
+ export { FORM_CONTEXT_KEY, FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY, FieldInnerConfigError, MAX_SUGGESTION_OPTIONS, adaptFormValidator, appendProp, applyMountValueEffects, builtInFields, clearFields, clearTypeMatchRules, collectValidatableFields, createFormStateBase, createFormStateProxy, createHeadlessFormState, createObjectProp, createValues, datetimeFormatter, deleteTypeMatchRule, display, filterFunction, formatValidateError, getDataByPage, getField as getFormField, getItemProp, getNativeRules, getRules, getTextByName, getTypeMatchRule, initValue, isFieldInnerConfigError, isLeafFieldType, isValidName, mergeFieldOptions, mergeFormContexts, optionSuggestion, registerBuiltInFields, registerField, registerFields, resolveItemType, sortArray, sortChange, stringifyExampleValue, submitForm, unregisterField, validateForm, validateTypeMatch, validateValues };
package/dist/es/index.js CHANGED
@@ -1,10 +1,14 @@
1
- import { FORM_DIFF_CONFIG_KEY, FORM_SILENT_MODE_KEY, FORM_TYPE_MATCH_VALID_KEY } from "./schema.js";
2
- import { MAX_SUGGESTION_OPTIONS, clearTypeMatchRules, deleteTypeMatchRule, getTypeMatchRule, optionSuggestion, registerTypeMatchRule, registerTypeMatchRules, stringifyExampleValue, validateTypeMatch } from "./utils/typeMatch.js";
3
- import { adaptFormValidator, applyExtendState, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange } from "./utils/form.js";
1
+ import { FORM_CONTEXT_KEY, FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "./schema.js";
2
+ import { isLeafFieldType } from "./utils/fieldValueEffects.js";
3
+ import { MAX_SUGGESTION_OPTIONS, clearTypeMatchRules, deleteTypeMatchRule, getTypeMatchRule, optionSuggestion, stringifyExampleValue, validateTypeMatch } from "./utils/typeMatch.js";
4
+ import { createFormStateProxy, mergeFormContexts } from "./utils/formStateProxy.js";
5
+ import { adaptFormValidator, appendProp, createFormStateBase, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getItemProp, getNativeRules, getRules, initValue, isValidName, resolveItemType, sortArray, sortChange } from "./utils/form.js";
6
+ import { FieldInnerConfigError, applyMountValueEffects, collectValidatableFields, isFieldInnerConfigError } from "./utils/collectFields.js";
7
+ import { formatValidateError, getTextByName } from "./utils/validateError.js";
8
+ import { createHeadlessFormState, validateValues } from "./utils/validateValues.js";
4
9
  import { useAddField } from "./utils/useAddField.js";
5
10
  import Hidden_default from "./fields/Hidden.js";
6
- import { deleteField, getField, registerField } from "./utils/config.js";
7
- import { clearSilentLeafFieldTypes, getSilentLeafFieldTypes, registerSilentLeafFieldTypes } from "./utils/silentLeafFieldTypes.js";
11
+ import { clearFields, getField, mergeFieldOptions, registerBuiltInFields, registerField, registerFields, unregisterField } from "./utils/registerField.js";
8
12
  import Container_default from "./containers/Container.js";
9
13
  import Form_default from "./Form.js";
10
14
  import { stripTabItemsLazy, submitForm, validateForm } from "./submitForm.js";
@@ -19,26 +23,27 @@ import Tabs_default from "./containers/Tabs.js";
19
23
  import TableGroupList_default from "./containers/table-group-list/TableGroupList.js";
20
24
  import Text_default from "./fields/Text.js";
21
25
  import Number_default from "./fields/Number.js";
22
- import NumberRange_default from "./fields/NumberRange.js";
26
+ import Index_default$5 from "./fields/NumberRange/Index.js";
23
27
  import Textarea_default from "./fields/Textarea.js";
24
- import Date_default from "./fields/Date.js";
25
- import DateTime_default from "./fields/DateTime.js";
28
+ import Index_default$1 from "./fields/Date/Index.js";
29
+ import Index_default$2 from "./fields/DateTime/Index.js";
26
30
  import Time_default from "./fields/Time.js";
27
31
  import Checkbox_default from "./fields/Checkbox.js";
28
32
  import Switch_default from "./fields/Switch.js";
29
33
  import Daterange_default from "./fields/Daterange.js";
30
34
  import Timerange_default from "./fields/Timerange.js";
31
35
  import ColorPicker_default from "./fields/ColorPicker.js";
32
- import CheckboxGroup_default from "./fields/CheckboxGroup.js";
36
+ import Index_default from "./fields/CheckboxGroup/Index.js";
33
37
  import RadioGroup_default from "./fields/RadioGroup.js";
34
- import Display_default from "./fields/Display.js";
38
+ import Index_default$3 from "./fields/Display/Index.js";
35
39
  import Link_default from "./fields/Link.js";
36
40
  import Select_default from "./fields/Select.js";
37
41
  import Cascader_default from "./fields/Cascader.js";
38
- import DynamicField_default from "./fields/DynamicField.js";
42
+ import Index_default$4 from "./fields/DynamicField/Index.js";
43
+ import { builtInFields } from "./utils/builtInFields.js";
39
44
  import plugin_default from "./plugin.js";
40
45
  export * from "@tmagic/form-schema";
41
46
  //#region packages/form/src/index.ts
42
47
  var createForm = (config) => config;
43
48
  //#endregion
44
- export { FORM_DIFF_CONFIG_KEY, FORM_SILENT_MODE_KEY, FORM_TYPE_MATCH_VALID_KEY, MAX_SUGGESTION_OPTIONS, 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, clearSilentLeafFieldTypes, clearTypeMatchRules, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, deleteTypeMatchRule, display, filterFunction, getDataByPage, getField as getFormField, getRules, getSilentLeafFieldTypes, getTypeMatchRule, initValue, optionSuggestion, registerField as registerFormField, registerSilentLeafFieldTypes, registerTypeMatchRule, registerTypeMatchRules, sortArray, sortChange, stringifyExampleValue, stripTabItemsLazy, submitForm, useAddField, validateForm, validateTypeMatch };
49
+ export { FORM_CONTEXT_KEY, FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY, FieldInnerConfigError, MAX_SUGGESTION_OPTIONS, Cascader_default as MCascader, Checkbox_default as MCheckbox, Index_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Index_default$1 as MDate, Index_default$2 as MDateTime, Daterange_default as MDaterange, Index_default$3 as MDisplay, Index_default$4 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, Index_default$5 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, appendProp, applyMountValueEffects, builtInFields, clearFields, clearTypeMatchRules, collectValidatableFields, createForm, createFormStateBase, createFormStateProxy, createHeadlessFormState, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteTypeMatchRule, display, filterFunction, formatValidateError, getDataByPage, getField as getFormField, getItemProp, getNativeRules, getRules, getTextByName, getTypeMatchRule, initValue, isFieldInnerConfigError, isLeafFieldType, isValidName, mergeFieldOptions, mergeFormContexts, optionSuggestion, registerBuiltInFields, registerField, registerFields, resolveItemType, sortArray, sortChange, stringifyExampleValue, stripTabItemsLazy, submitForm, unregisterField, useAddField, validateForm, validateTypeMatch, validateValues };
package/dist/es/plugin.js CHANGED
@@ -1,6 +1,6 @@
1
- import { registerTypeMatchRules } from "./utils/typeMatch.js";
2
- import Hidden_default from "./fields/Hidden.js";
3
1
  import { setConfig } from "./utils/config.js";
2
+ import Hidden_default from "./fields/Hidden.js";
3
+ import { registerBuiltInFields, registerFields } from "./utils/registerField.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";
@@ -13,65 +13,81 @@ import Tabs_default from "./containers/Tabs.js";
13
13
  import TableGroupList_default from "./containers/table-group-list/TableGroupList.js";
14
14
  import Text_default from "./fields/Text.js";
15
15
  import Number_default from "./fields/Number.js";
16
- import NumberRange_default from "./fields/NumberRange.js";
16
+ import Index_default from "./fields/NumberRange/Index.js";
17
17
  import Textarea_default from "./fields/Textarea.js";
18
- import Date_default from "./fields/Date.js";
19
- import DateTime_default from "./fields/DateTime.js";
18
+ import Index_default$1 from "./fields/Date/Index.js";
19
+ import Index_default$2 from "./fields/DateTime/Index.js";
20
20
  import Time_default from "./fields/Time.js";
21
21
  import Checkbox_default from "./fields/Checkbox.js";
22
22
  import Switch_default from "./fields/Switch.js";
23
23
  import Daterange_default from "./fields/Daterange.js";
24
24
  import Timerange_default from "./fields/Timerange.js";
25
25
  import ColorPicker_default from "./fields/ColorPicker.js";
26
- import CheckboxGroup_default from "./fields/CheckboxGroup.js";
26
+ import Index_default$3 from "./fields/CheckboxGroup/Index.js";
27
27
  import RadioGroup_default from "./fields/RadioGroup.js";
28
- import Display_default from "./fields/Display.js";
28
+ import Index_default$4 from "./fields/Display/Index.js";
29
29
  import Link_default from "./fields/Link.js";
30
30
  import Select_default from "./fields/Select.js";
31
31
  import Cascader_default from "./fields/Cascader.js";
32
- import DynamicField_default from "./fields/DynamicField.js";
32
+ import Index_default$5 from "./fields/DynamicField/Index.js";
33
+ import { builtInFields } from "./utils/builtInFields.js";
33
34
  import Step_default from "./containers/Step.js";
34
35
  /* empty css */
35
36
  //#region packages/form/src/plugin.ts
37
+ var builtInFieldVue = {
38
+ text: { component: Text_default },
39
+ "img-upload": { component: Text_default },
40
+ number: { component: Number_default },
41
+ "number-range": { component: Index_default },
42
+ textarea: { component: Textarea_default },
43
+ hidden: { component: Hidden_default },
44
+ date: { component: Index_default$1 },
45
+ datetime: { component: Index_default$2 },
46
+ daterange: { component: Daterange_default },
47
+ timerange: { component: Timerange_default },
48
+ time: { component: Time_default },
49
+ checkbox: { component: Checkbox_default },
50
+ switch: { component: Switch_default },
51
+ "color-picker": { component: ColorPicker_default },
52
+ "checkbox-group": { component: Index_default$3 },
53
+ "radio-group": { component: RadioGroup_default },
54
+ display: { component: Index_default$4 },
55
+ link: { component: Link_default },
56
+ select: { component: Select_default },
57
+ cascader: { component: Cascader_default },
58
+ "dynamic-field": { component: Index_default$5 },
59
+ container: { container: Container_default },
60
+ tab: { container: Tabs_default },
61
+ row: { container: Row_default },
62
+ "flex-layout": { container: FlexLayout_default },
63
+ fieldset: { container: Fieldset_default },
64
+ panel: { container: Panel_default },
65
+ step: { container: Step_default },
66
+ table: { container: TableGroupList_default },
67
+ "group-list": { container: TableGroupList_default },
68
+ "table-group-list": { container: TableGroupList_default }
69
+ };
36
70
  var defaultInstallOpt = {};
37
- var plugin_default = { install(app, opt = {}) {
38
- const option = Object.assign(defaultInstallOpt, opt);
71
+ var plugin_default = {
72
+ /**
73
+ * 安装 `@tmagic/form`:登记内置字段、挂载 `m-form` / `m-form-dialog` / `m-form-drawer`。
74
+ *
75
+ * @param app - Vue 应用
76
+ * @param [opt] - 安装选项
77
+ */
78
+ install(app, opt = {}) {
79
+ const option = {
80
+ ...defaultInstallOpt,
81
+ ...opt
82
+ };
39
83
  app.config.globalProperties.$MAGIC_FORM = option;
40
84
  setConfig(option);
41
- if (option.typeMatchRules) registerTypeMatchRules(option.typeMatchRules);
85
+ registerBuiltInFields(builtInFields);
86
+ registerBuiltInFields(builtInFieldVue, app);
87
+ if (option.fields) registerFields(option.fields, app);
42
88
  app.component("m-form", Form_default);
43
89
  app.component("m-form-dialog", FormDialog_default);
44
90
  app.component("m-form-drawer", FormDrawer_default);
45
- app.component("m-form-container", Container_default);
46
- app.component("m-form-fieldset", Fieldset_default);
47
- app.component("m-form-group-list", TableGroupList_default);
48
- app.component("m-form-panel", Panel_default);
49
- app.component("m-form-row", Row_default);
50
- app.component("m-form-step", Step_default);
51
- app.component("m-form-table", TableGroupList_default);
52
- app.component("m-form-tab", Tabs_default);
53
- app.component("m-form-flex-layout", FlexLayout_default);
54
- app.component("m-fields-text", Text_default);
55
- app.component("m-fields-img-upload", Text_default);
56
- app.component("m-fields-number", Number_default);
57
- app.component("m-fields-number-range", NumberRange_default);
58
- app.component("m-fields-textarea", Textarea_default);
59
- app.component("m-fields-hidden", Hidden_default);
60
- app.component("m-fields-date", Date_default);
61
- app.component("m-fields-datetime", DateTime_default);
62
- app.component("m-fields-daterange", Daterange_default);
63
- app.component("m-fields-timerange", Timerange_default);
64
- app.component("m-fields-time", Time_default);
65
- app.component("m-fields-checkbox", Checkbox_default);
66
- app.component("m-fields-switch", Switch_default);
67
- app.component("m-fields-color-picker", ColorPicker_default);
68
- app.component("m-fields-checkbox-group", CheckboxGroup_default);
69
- app.component("m-fields-radio-group", RadioGroup_default);
70
- app.component("m-fields-display", Display_default);
71
- app.component("m-fields-link", Link_default);
72
- app.component("m-fields-select", Select_default);
73
- app.component("m-fields-cascader", Cascader_default);
74
- app.component("m-fields-dynamic-field", DynamicField_default);
75
91
  } };
76
92
  //#endregion
77
93
  export { plugin_default as default };
package/dist/es/schema.js CHANGED
@@ -3,15 +3,13 @@ export * from "@tmagic/form-schema";
3
3
  var FORM_DIFF_CONFIG_KEY = Symbol("mFormDiffConfig");
4
4
  var FORM_TYPE_MATCH_VALID_KEY = Symbol("mFormTypeMatchValid");
5
5
  /**
6
- * 静默模式标记,由 `submitForm` / `validateForm` 以隐藏方式挂载临时表单时 provide(debug 弹层模式不提供)。
6
+ * 宿主业务上下文,由 `MForm`(或更外层的 Editor)通过 `provide` 下发。
7
7
  *
8
- * Container 会基于该标记,并对照 `getSilentLeafFieldTypes()`(默认 `LEAF_FIELD_TYPES`)
9
- * 跳过叶子字段的渲染,只保留 FormItem:字段校验由 FormItem 基于 model 值完成,与叶子 UI 组件实例无关。
10
- * 重型字段组件(如 vs-code)也可 inject 该标记跳过自身渲染,省去无谓的实例化开销。
8
+ * 嵌套表单(Link 子表单、FormBox、临时校验表单等)会自动继承最近祖先的 context,
9
+ * 无需层层透传。
11
10
  *
12
- * 注意:仅「挂载无值副作用」(不在 onMounted/watch immediate 中 emit change、不依赖 DOM 计算值)的
13
- * 字段组件可以安全跳过,接入前需逐一审计;业务扩展请使用 `registerSilentLeafFieldTypes`。
11
+ * 配置回调统一通过 `mForm.xxx` 读取,由 formState 的读穿 Proxy 落到这里。
14
12
  */
15
- var FORM_SILENT_MODE_KEY = Symbol("mFormSilentMode");
13
+ var FORM_CONTEXT_KEY = Symbol("mFormContext");
16
14
  //#endregion
17
- export { FORM_DIFF_CONFIG_KEY, FORM_SILENT_MODE_KEY, FORM_TYPE_MATCH_VALID_KEY };
15
+ export { FORM_CONTEXT_KEY, FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY };
package/dist/es/style.css CHANGED
@@ -269,6 +269,21 @@ fieldset.m-fieldset .m-form-tip {
269
269
  margin-left: 5px;
270
270
  }
271
271
 
272
+ .m-fields-group-list {
273
+ --m-group-list-footer-padding-top: 12px;
274
+ --m-group-list-footer-padding-bottom: 16px;
275
+ --m-group-list-footer-button-height: 32px;
276
+ --m-group-list-footer-height: calc(
277
+ var(--m-group-list-footer-padding-top) +
278
+ var(--m-group-list-footer-button-height) +
279
+ var(--m-group-list-footer-padding-bottom)
280
+ );
281
+ --m-group-list-footer-bg: var(--el-bg-color, #fff);
282
+ --m-group-list-header-height: 65px;
283
+ --m-group-list-header-bg: #fff;
284
+ width: 100%;
285
+ min-width: 0;
286
+ }
272
287
  .m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
273
288
  border: 0;
274
289
  }
@@ -284,22 +299,87 @@ fieldset.m-fieldset .m-form-tip {
284
299
  transform: rotate(90deg);
285
300
  }
286
301
  .m-fields-group-list .m-fields-group-list-item {
302
+ overflow: visible;
287
303
  border-bottom: 1px solid #ebeef5;
288
304
  margin-bottom: 7px;
289
305
  }
290
306
  .m-fields-group-list .m-fields-group-list-item:last-of-type {
291
307
  border-bottom: 0;
292
308
  }
309
+ .m-fields-group-list .m-fields-group-list-item .el-card__body,
310
+ .m-fields-group-list .m-fields-group-list-item .t-card__body {
311
+ overflow: visible;
312
+ }
313
+ .m-fields-group-list .m-fields-group-list-item .el-card__body > .m-container-row,
314
+ .m-fields-group-list .m-fields-group-list-item .t-card__body > .m-container-row {
315
+ overflow: visible;
316
+ }
317
+ .m-fields-group-list .m-fields-group-list-item .el-card__body .tmagic-design-form-item,
318
+ .m-fields-group-list .m-fields-group-list-item .t-card__body .tmagic-design-form-item {
319
+ margin-bottom: 16px;
320
+ }
293
321
  .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-header {
294
322
  display: flex;
295
323
  align-items: center;
296
324
  gap: 8px;
297
325
  }
298
- .m-fields-group-list .m-fields-group-list-footer {
326
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-title {
327
+ flex: 1;
328
+ min-width: 0;
329
+ }
330
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-actions {
331
+ display: flex;
332
+ align-items: center;
333
+ flex-shrink: 0;
334
+ gap: 8px;
335
+ }
336
+ .m-fields-group-list .m-fields-group-list-item > .el-card__header,
337
+ .m-fields-group-list .m-fields-group-list-item > .t-card__header {
338
+ position: sticky;
339
+ top: var(--m-group-list-header-sticky-top, 0px);
340
+ z-index: 7;
341
+ background-color: var(--m-group-list-header-bg, #fff);
342
+ }
343
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .el-card__header,
344
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item > .t-card__header {
345
+ top: calc(var(--m-group-list-header-sticky-top, 0px) + var(--m-group-list-header-height));
346
+ z-index: 6;
347
+ }
348
+ .m-fields-group-list .el-table__empty-block {
349
+ width: 100%;
350
+ min-height: 0;
351
+ }
352
+ .m-fields-group-list .el-table__empty-text {
353
+ display: block;
354
+ box-sizing: border-box;
355
+ width: 100%;
356
+ }
357
+ .m-fields-group-list > .m-fields-group-list-footer {
358
+ display: flex;
299
359
  justify-content: space-between;
300
360
  margin-top: 10px;
301
361
  margin-bottom: 16px;
302
362
  }
363
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
364
+ position: sticky;
365
+ bottom: 0;
366
+ z-index: 7;
367
+ margin-bottom: 0;
368
+ padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
369
+ background-color: var(--m-group-list-footer-bg);
370
+ }
371
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full > div {
372
+ justify-content: stretch;
373
+ }
374
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .el-button,
375
+ .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .tmagic-design-button {
376
+ width: 100%;
377
+ height: var(--m-group-list-footer-button-height);
378
+ }
379
+ .m-fields-group-list .m-fields-group-list-item .m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
380
+ bottom: var(--m-group-list-footer-height);
381
+ z-index: 7;
382
+ }
303
383
 
304
384
  /** 最外层的groupList需要每个item需要增加空白区域界限时,增加outer-gorup_list可以实现 */
305
385
  .m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {