@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.
- package/dist/es/Form.vue_vue_type_script_setup_true_lang.js +47 -120
- package/dist/es/FormBox.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/es/containers/Col.vue_vue_type_script_setup_true_lang.js +3 -0
- package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js +36 -51
- package/dist/es/containers/Fieldset.vue_vue_type_script_setup_true_lang.js +6 -0
- package/dist/es/containers/FlexLayout.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/es/containers/GroupList.vue_vue_type_script_setup_true_lang.js +37 -15
- package/dist/es/containers/GroupListItem.vue_vue_type_script_setup_true_lang.js +109 -97
- package/dist/es/containers/Panel.vue_vue_type_script_setup_true_lang.js +7 -2
- package/dist/es/containers/Row.vue_vue_type_script_setup_true_lang.js +3 -0
- package/dist/es/containers/Step.vue_vue_type_script_setup_true_lang.js +4 -1
- package/dist/es/containers/Tabs.vue_vue_type_script_setup_true_lang.js +7 -0
- package/dist/es/containers/table/Table.vue_vue_type_script_setup_true_lang.js +7 -5
- package/dist/es/containers/table/useTableColumns.js +5 -13
- package/dist/es/containers/table-group-list/TableGroupList.vue_vue_type_script_setup_true_lang.js +71 -78
- package/dist/es/containers/table-group-list/useAdd.js +26 -16
- package/dist/es/containers/table-group-list/useScrollLastItemIntoView.js +72 -0
- package/dist/es/fields/Cascader.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/es/fields/CheckboxGroup/Index.js +5 -0
- 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
- package/dist/es/fields/CheckboxGroup/effect.js +8 -0
- package/dist/es/fields/Date/Index.js +5 -0
- 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
- package/dist/es/fields/Date/effect.js +10 -0
- package/dist/es/fields/DateTime/Index.js +5 -0
- 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
- package/dist/es/fields/DateTime/effect.js +15 -0
- package/dist/es/fields/Display/Index.js +5 -0
- 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
- package/dist/es/fields/Display/effect.js +8 -0
- package/dist/es/fields/DynamicField/Index.js +5 -0
- 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
- package/dist/es/fields/DynamicField/effect.js +40 -0
- package/dist/es/fields/Link.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/es/fields/Number.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/es/fields/NumberRange/Index.js +5 -0
- 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
- package/dist/es/fields/NumberRange/effect.js +8 -0
- package/dist/es/fields/Select.vue_vue_type_script_setup_true_lang.js +2 -2
- package/dist/es/fields/Text.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/es/headless.js +13 -0
- package/dist/es/index.js +17 -12
- package/dist/es/plugin.js +57 -41
- package/dist/es/schema.js +6 -8
- package/dist/es/style.css +81 -1
- package/dist/es/submitForm.js +44 -194
- package/dist/es/utils/builtInFields.js +49 -0
- package/dist/es/utils/collectFields.js +407 -0
- package/dist/es/utils/config.js +1 -8
- package/dist/es/utils/fieldInnerConfig.js +42 -0
- package/dist/es/utils/fieldValueEffects.js +80 -0
- package/dist/es/utils/form.js +96 -43
- package/dist/es/utils/formStateProxy.js +75 -0
- package/dist/es/utils/registerField.js +158 -0
- package/dist/es/utils/submitHeadless.js +54 -0
- package/dist/es/utils/tableGroupList.js +85 -0
- package/dist/es/utils/typeMatch.js +17 -19
- package/dist/es/utils/validateError.js +57 -0
- package/dist/es/utils/validateValues.js +115 -0
- package/dist/style.css +81 -1
- package/dist/themes/magic-admin.css +83 -7
- package/dist/tmagic-form-headless.umd.cjs +4044 -0
- package/dist/tmagic-form.umd.cjs +1975 -874
- package/package.json +10 -4
- package/src/Form.vue +49 -149
- package/src/FormBox.vue +5 -4
- package/src/FormDialog.vue +5 -5
- package/src/FormDrawer.vue +5 -5
- package/src/containers/Col.vue +2 -0
- package/src/containers/Container.vue +86 -157
- package/src/containers/Fieldset.vue +5 -0
- package/src/containers/FlexLayout.vue +2 -0
- package/src/containers/GroupList.vue +41 -11
- package/src/containers/GroupListItem.vue +83 -80
- package/src/containers/Panel.vue +3 -0
- package/src/containers/Row.vue +2 -0
- package/src/containers/Step.vue +2 -0
- package/src/containers/Tabs.vue +13 -0
- package/src/containers/table/ActionsColumn.vue +1 -1
- package/src/containers/table/Table.vue +4 -3
- package/src/containers/table/usePagination.ts +1 -1
- package/src/containers/table/useSortable.ts +1 -1
- package/src/containers/table/useTableColumns.ts +9 -19
- package/src/containers/table-group-list/TableGroupList.vue +43 -71
- package/src/containers/table-group-list/useAdd.ts +40 -25
- package/src/containers/table-group-list/useScrollLastItemIntoView.ts +94 -0
- package/src/fields/{CheckboxGroup.vue → CheckboxGroup/Index.vue} +3 -8
- package/src/fields/CheckboxGroup/effect.ts +27 -0
- package/src/fields/{Date.vue → Date/Index.vue} +2 -5
- package/src/fields/Date/effect.ts +29 -0
- package/src/fields/{DateTime.vue → DateTime/Index.vue} +2 -16
- package/src/fields/DateTime/effect.ts +36 -0
- package/src/fields/{Display.vue → Display/Index.vue} +3 -7
- package/src/fields/Display/effect.ts +28 -0
- package/src/fields/{DynamicField.vue → DynamicField/Index.vue} +11 -11
- package/src/fields/DynamicField/effect.ts +74 -0
- package/src/fields/{NumberRange.vue → NumberRange/Index.vue} +2 -6
- package/src/fields/NumberRange/effect.ts +27 -0
- package/src/headless.ts +78 -0
- package/src/index.ts +32 -15
- package/src/plugin.ts +63 -42
- package/src/schema.ts +6 -8
- package/src/submitForm.ts +81 -409
- package/src/theme/group-list.scss +107 -1
- package/src/theme/themes/magic-admin/index.scss +2 -8
- package/src/utils/builtInFields.ts +69 -0
- package/src/utils/collectFields.ts +561 -0
- package/src/utils/config.ts +1 -15
- package/src/utils/fieldInnerConfig.ts +127 -0
- package/src/utils/fieldValueEffects.ts +140 -0
- package/src/utils/form.ts +141 -75
- package/src/utils/formStateProxy.ts +104 -0
- package/src/utils/registerField.ts +308 -0
- package/src/utils/submitHeadless.ts +206 -0
- package/src/utils/tableGroupList.ts +120 -0
- package/src/utils/typeMatch.ts +19 -15
- package/src/utils/validateError.ts +92 -0
- package/src/utils/validateValues.ts +177 -0
- package/types/headless.d.ts +682 -0
- package/types/index.d.ts +631 -272
- package/dist/es/fields/CheckboxGroup.js +0 -5
- package/dist/es/fields/Date.js +0 -5
- package/dist/es/fields/DateTime.js +0 -5
- package/dist/es/fields/Display.js +0 -5
- package/dist/es/fields/DynamicField.js +0 -5
- package/dist/es/fields/NumberRange.js +0 -5
- package/dist/es/utils/silentLeafFieldTypes.js +0 -49
- package/src/utils/silentLeafFieldTypes.ts +0 -71
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
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
|
|
8
|
+
var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
8
9
|
name: "MFormDynamicField",
|
|
9
|
-
__name: "
|
|
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.
|
|
48
|
-
if (
|
|
49
|
-
|
|
50
|
-
|
|
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 {
|
|
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 "
|
|
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
|
|
6
|
+
var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
7
7
|
name: "MFormNumberRange",
|
|
8
|
-
__name: "
|
|
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 {
|
|
78
|
+
export { Index_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -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 {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
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 {
|
|
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
|
|
26
|
+
import Index_default$5 from "./fields/NumberRange/Index.js";
|
|
23
27
|
import Textarea_default from "./fields/Textarea.js";
|
|
24
|
-
import
|
|
25
|
-
import
|
|
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
|
|
36
|
+
import Index_default from "./fields/CheckboxGroup/Index.js";
|
|
33
37
|
import RadioGroup_default from "./fields/RadioGroup.js";
|
|
34
|
-
import
|
|
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
|
|
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 {
|
|
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
|
|
16
|
+
import Index_default from "./fields/NumberRange/Index.js";
|
|
17
17
|
import Textarea_default from "./fields/Textarea.js";
|
|
18
|
-
import
|
|
19
|
-
import
|
|
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
|
|
26
|
+
import Index_default$3 from "./fields/CheckboxGroup/Index.js";
|
|
27
27
|
import RadioGroup_default from "./fields/RadioGroup.js";
|
|
28
|
-
import
|
|
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
|
|
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 = {
|
|
38
|
-
|
|
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
|
-
|
|
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
|
-
*
|
|
6
|
+
* 宿主业务上下文,由 `MForm`(或更外层的 Editor)通过 `provide` 下发。
|
|
7
7
|
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* 重型字段组件(如 vs-code)也可 inject 该标记跳过自身渲染,省去无谓的实例化开销。
|
|
8
|
+
* 嵌套表单(Link 子表单、FormBox、临时校验表单等)会自动继承最近祖先的 context,
|
|
9
|
+
* 无需层层透传。
|
|
11
10
|
*
|
|
12
|
-
*
|
|
13
|
-
* 字段组件可以安全跳过,接入前需逐一审计;业务扩展请使用 `registerSilentLeafFieldTypes`。
|
|
11
|
+
* 配置回调统一通过 `mForm.xxx` 读取,由 formState 的读穿 Proxy 落到这里。
|
|
14
12
|
*/
|
|
15
|
-
var
|
|
13
|
+
var FORM_CONTEXT_KEY = Symbol("mFormContext");
|
|
16
14
|
//#endregion
|
|
17
|
-
export {
|
|
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-
|
|
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 {
|