@tmagic/form 1.8.0-beta.11 → 1.8.0-beta.12

package/dist/es/Form.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
-import { FORM_DIFF_CONFIG_KEY } from "./schema.js";
+import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "./schema.js";
 import { getConfig } from "./utils/config.js";
 import { initValue } from "./utils/form.js";
 import Container_default from "./containers/Container.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, mergeProps, normalizeStyle, openBlock, provide, reactive, ref, renderList, renderSlot, shallowRef, toRaw, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, mergeProps, nextTick, normalizeStyle, openBlock, provide, reactive, ref, renderList, renderSlot, shallowRef, toRaw, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
 import { cloneDeep, isEqual } from "lodash-es";
 import { TMagicForm, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
 import { setValueByKeyPath } from "@tmagic/utils";
@@ -20,6 +20,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		},
 		parentValues: { default: () => ({}) },
 		labelWidth: { default: "200px" },
+		typeMatchValid: { type: Boolean },
 		disabled: {
 			type: Boolean,
 			default: false
@@ -53,6 +54,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		provide(FORM_TYPE_MATCH_VALID_KEY, computed(() => props.typeMatchValid));
 		const tMagicFormRef = useTemplateRef("tMagicForm");
 		const initialized = ref(false);
 		const values = ref({});
@@ -175,6 +177,9 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			}).then((value) => {
 				values.value = value;
 				initialized.value = !props.isCompare;
+				nextTick(() => {
+					tMagicFormRef.value?.validate();
+				});
 			});
 			if (props.isCompare) initValue(formState, {
 				initValues: props.lastValues,
@@ -226,6 +231,23 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			};
 			return findInConfig(config, nameParts);
 		};
+		/**
+		* 将校验返回的 invalidFields 汇总为可读的错误文案（多条以 `<br>` 拼接）。
+		*
+		* 抽离为独立方法，供 `submitForm`（提交校验）与 `validate`（返回错误文案的校验）复用，
+		* 保证两种校验入口产出的错误文案格式完全一致。
+		*/
+		const formatValidateError = (invalidFields) => {
+			const error = [];
+			Object.entries(invalidFields).forEach(([prop, validateError]) => {
+				validateError.forEach(({ field, message }) => {
+					const name = field || prop;
+					const text = (props.useFieldTextInError ? getTextByName(name, props.config) : void 0) || name;
+					error.push(`${text} -> ${message}`);
+				});
+			});
+			return error.join("<br>");
+		};
 		__expose({
 			values,
 			lastValuesProcessed,
@@ -245,15 +267,32 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 					return native ? values.value : cloneDeep(toRaw(values.value));
 				} catch (invalidFields) {
 					emit("error", invalidFields);
-					const error = [];
-					Object.entries(invalidFields).forEach(([prop, ValidateError]) => {
-						ValidateError.forEach(({ field, message }) => {
-							const name = field || prop;
-							const text = (props.useFieldTextInError ? getTextByName(name, props.config) : void 0) || name;
-							error.push(`${text} -> ${message}`);
-						});
-					});
-					throw new Error(error.join("<br>"));
+					throw new Error(formatValidateError(invalidFields));
+				}
+			},
+			/**
+			* 校验：对表单当前值执行校验，返回汇总后的错误文案。
+			*
+			* 与 `submitForm` 的区别：
+			* - 校验失败时不抛异常、不触发 `error` 事件，而是以返回值形式给出错误文案；
+			* - 不重置 `changeRecords`，不改变提交语义，仅用于「探测」当前配置是否合法。
+			*
+			* 注意：本方法只改变「校验结果的返回方式」，并不负责「不污染页面表单状态」——
+			* 若需对一份独立的「配置 + 值」做完全不影响页面上已渲染表单的校验，请使用 `validateForm`
+			* （内部会新建一个隐藏的 MForm 实例，通过 `initValues` 传入待校验值，用完即卸载）。
+			*
+			* 典型用途：作为 `validateForm` 内部复用的校验实现；也可在已渲染的表单实例上主动调用，
+			* 根据返回的错误文案自行决定后续处理（如记录节点错误状态）。
+			*
+			* @returns 校验通过返回空字符串 `''`，否则返回以 `<br>` 拼接的错误文案。
+			*/
+			validate: async () => {
+				try {
+					const result = await tMagicFormRef.value?.validate();
+					if (result !== true) throw result;
+					return "";
+				} catch (invalidFields) {
+					return formatValidateError(invalidFields);
 				}
 			},
 			getTextByName

package/dist/es/FormBox.vue_vue_type_script_setup_true_lang.js

@@ -13,6 +13,7 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		width: {},
 		height: {},
 		labelWidth: {},
+		typeMatchValid: { type: Boolean },
 		disabled: { type: Boolean },
 		size: {},
 		confirmText: { default: "确定" },
@@ -49,7 +50,8 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const submitHandler = async () => {
 			try {
 				const changeRecords = form.value?.changeRecords;
-				emit("submit", await form.value?.submitForm(), { changeRecords });
+				const values = await form.value?.submitForm();
+				emit("submit", values, { changeRecords });
 			} catch (e) {
 				emit("error", e);
 			}
@@ -87,6 +89,7 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"prevent-submit-default": __props.preventSubmitDefault,
 					"use-field-text-in-error": __props.useFieldTextInError,
 					"extend-state": __props.extendState,
+					"type-match-valid": __props.typeMatchValid,
 					onChange: changeHandler
 				}, null, 8, [
 					"size",
@@ -99,7 +102,8 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"inline",
 					"prevent-submit-default",
 					"use-field-text-in-error",
-					"extend-state"
+					"extend-state",
+					"type-match-valid"
 				]), renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			})], 4), createElementVNode("div", {

package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js

@@ -12,6 +12,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		parentValues: {},
 		width: {},
 		labelWidth: {},
+		typeMatchValid: { type: Boolean },
 		fullscreen: { type: Boolean },
 		disabled: { type: Boolean },
 		title: {},
@@ -78,7 +79,8 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const save = async () => {
 			try {
 				const changeRecords = [...form.value?.changeRecords || []];
-				emit("submit", await form.value?.submitForm(), { changeRecords });
+				const values = await form.value?.submitForm();
+				emit("submit", values, { changeRecords });
 			} catch (e) {
 				emit("error", e);
 			}
@@ -196,6 +198,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
 					"use-field-text-in-error": __props.useFieldTextInError,
+					"type-match-valid": __props.typeMatchValid,
 					"extend-state": __props.extendState,
 					onChange: changeHandler
 				}, null, 8, [
@@ -210,6 +213,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					"inline",
 					"prevent-submit-default",
 					"use-field-text-in-error",
+					"type-match-valid",
 					"extend-state"
 				]), renderSlot(_ctx.$slots, "default")], 4)) : createCommentVNode("v-if", true)]),
 				_: 3

package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js

@@ -12,6 +12,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		parentValues: {},
 		width: {},
 		labelWidth: {},
+		typeMatchValid: { type: Boolean },
 		disabled: { type: Boolean },
 		closeOnPressEscape: {
 			type: Boolean,
@@ -54,7 +55,8 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const submitHandler = async () => {
 			try {
 				const changeRecords = form.value?.changeRecords;
-				emit("submit", await form.value?.submitForm(), { changeRecords });
+				const values = await form.value?.submitForm();
+				emit("submit", values, { changeRecords });
 			} catch (e) {
 				emit("error", e);
 			}
@@ -154,6 +156,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
 					"use-field-text-in-error": __props.useFieldTextInError,
+					"type-match-valid": __props.typeMatchValid,
 					"extend-state": __props.extendState,
 					onChange: changeHandler
 				}, null, 8, [
@@ -167,6 +170,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					"inline",
 					"prevent-submit-default",
 					"use-field-text-in-error",
+					"type-match-valid",
 					"extend-state"
 				]), renderSlot(_ctx.$slots, "default")], 512)) : createCommentVNode("v-if", true)]),
 				_: 3

package/dist/es/containers/Container.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { FORM_DIFF_CONFIG_KEY } from "../schema.js";
+import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "../schema.js";
 import Hidden_default from "../fields/Hidden.js";
 import { getField } from "../utils/config.js";
 import { createObjectProp, display, filterFunction, getRules } from "../utils/form.js";
@@ -48,6 +48,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const emit = __emit;
 		const mForm = inject("mForm");
 		const diffConfig = inject(FORM_DIFF_CONFIG_KEY, {});
+		const typeMatchValid = inject(FORM_TYPE_MATCH_VALID_KEY);
 		const expand = ref(false);
 		const name = computed(() => props.config.name || "");
 		const showDiff = computed(() => {
@@ -124,7 +125,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				placement: config?.placement || "top"
 			};
 		});
-		const rule = computed(() => getRules(mForm, props.config.rules, props));
+		const rule = computed(() => getRules(mForm, props.config.rules, props, typeMatchValid));
 		const display$1 = computed(() => {
 			const value = display(mForm, props.config.display, props);
 			if (value === "expand") return expand.value;
@@ -185,7 +186,10 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			return new Proxy(target, {
 				get: (obj, key) => {
 					const value = obj[key];
-					if (value && typeof value === "object") return createModelProxy(value, setModelFn, pathPrefix ? `${pathPrefix}.${key}` : key);
+					if (value && typeof value === "object") {
+						const newPath = pathPrefix ? `${pathPrefix}.${key}` : key;
+						return createModelProxy(value, setModelFn, newPath);
+					}
 					return value;
 				},
 				set: (obj, key, value) => {

package/dist/es/containers/table/Table.vue_vue_type_script_setup_true_lang.js

@@ -112,7 +112,7 @@ var Table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 				}, 8, ["disabled"]),
 				renderSlot(_ctx.$slots, "default"),
 				createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [
-					!unref(isFullscreen) ? renderSlot(_ctx.$slots, "toggle-button", { key: 0 }) : createCommentVNode("v-if", true),
+					!unref(isFullscreen) ? renderSlot(_ctx.$slots, "toggle-button", {}, void 0, void 0, 0) : createCommentVNode("v-if", true),
 					__props.config.enableFullscreen !== false ? (openBlock(), createBlock(unref(TMagicButton), {
 						key: 1,
 						icon: unref(FullScreen),
@@ -153,7 +153,7 @@ var Table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("清空", -1)])]),
 						_: 1
 					}, 8, ["disabled", "onClick"])) : createCommentVNode("v-if", true)
-				]), !__props.isCompare ? renderSlot(_ctx.$slots, "add-button", { key: 0 }) : createCommentVNode("v-if", true)]),
+				]), !__props.isCompare ? renderSlot(_ctx.$slots, "add-button", {}, void 0, void 0, 0) : createCommentVNode("v-if", true)]),
 				__props.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(unref(TMagicPagination), {
 					layout: "total, sizes, prev, pager, next, jumper",
 					"hide-on-single-page": __props.model[modelName.value].length < unref(pageSize),

package/dist/es/fields/RadioGroup.vue_vue_type_script_setup_true_lang.js

@@ -24,6 +24,7 @@ var RadioGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const itemComponent = computed(() => props.config.childType === "button" ? TMagicRadioButton : TMagicRadio);
 		const emit = __emit;
 		const clickHandler = (item) => {
+			if (props.disabled) return;
 			emit("change", props.model[props.name] === item ? "" : item);
 		};
 		useAddField(props.prop);

package/dist/es/fields/Select.vue_vue_type_script_setup_true_lang.js

@@ -227,7 +227,8 @@ var Select_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				const v = props.model[props.name];
 				if (Array.isArray(v) ? !v.length : typeof v === "undefined") return;
 				if (typeof v === "undefined" || hasOption(v)) return;
-				setOptions(await getInitOption());
+				const data = await getInitOption();
+				setOptions(data);
 			};
 			watch(() => props.model?.[props.name], () => {
 				initOption();

package/dist/es/index.js

@@ -1,12 +1,13 @@
 import "./_virtual/_rolldown/runtime.js";
-import { FORM_DIFF_CONFIG_KEY } from "./schema.js";
+import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "./schema.js";
 import { useAddField } from "./utils/useAddField.js";
 import Hidden_default from "./fields/Hidden.js";
 import { deleteField, getField, registerField } from "./utils/config.js";
-import { createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange } from "./utils/form.js";
+import { clearTypeMatchRules, deleteTypeMatchRule, getTypeMatchRule, registerTypeMatchRule, registerTypeMatchRules, validateTypeMatch } from "./utils/typeMatch.js";
+import { adaptFormValidator, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange } from "./utils/form.js";
 import Container_default from "./containers/Container.js";
 import Form_default from "./Form.js";
-import { submitForm } from "./submitForm.js";
+import { submitForm, validateForm } from "./submitForm.js";
 import FormDialog_default from "./FormDialog.js";
 import FormDrawer_default from "./FormDrawer.js";
 import FormBox_default from "./FormBox.js";
@@ -39,4 +40,4 @@ import plugin_default from "./plugin.js";
 export * from "@tmagic/form-schema";
 var createForm = (config) => config;
 //#endregion
-export { FORM_DIFF_CONFIG_KEY, Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, display, filterFunction, getDataByPage, getField as getFormField, getRules, initValue, registerField as registerFormField, sortArray, sortChange, submitForm, useAddField };
+export { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY, Cascader_default as MCascader, Checkbox_default as MCheckbox, CheckboxGroup_default as MCheckboxGroup, ColorPicker_default as MColorPicker, Container_default as MContainer, Date_default as MDate, DateTime_default as MDateTime, Daterange_default as MDaterange, Display_default as MDisplay, DynamicField_default as MDynamicField, Fieldset_default as MFieldset, FlexLayout_default as MFlexLayout, Form_default as MForm, FormBox_default as MFormBox, FormDialog_default as MFormDialog, FormDrawer_default as MFormDrawer, TableGroupList_default as MGroupList, Hidden_default as MHidden, Link_default as MLink, Number_default as MNumber, NumberRange_default as MNumberRange, Panel_default as MPanel, RadioGroup_default as MRadioGroup, Row_default as MRow, Select_default as MSelect, Switch_default as MSwitch, TableGroupList_default as MTable, TableGroupList_default as MTableGroupList, Tabs_default as MTabs, Text_default as MText, Textarea_default as MTextarea, Time_default as MTime, Timerange_default as MTimerange, adaptFormValidator, clearTypeMatchRules, createForm, createObjectProp, createValues, datetimeFormatter, plugin_default as default, deleteField as deleteFormField, deleteTypeMatchRule, display, filterFunction, getDataByPage, getField as getFormField, getRules, getTypeMatchRule, initValue, registerField as registerFormField, registerTypeMatchRule, registerTypeMatchRules, sortArray, sortChange, submitForm, useAddField, validateForm, validateTypeMatch };

package/dist/es/plugin.js

@@ -1,5 +1,6 @@
 import Hidden_default from "./fields/Hidden.js";
 import { setConfig } from "./utils/config.js";
+import { registerTypeMatchRules } from "./utils/typeMatch.js";
 import Container_default from "./containers/Container.js";
 import Form_default from "./Form.js";
 import FormDialog_default from "./FormDialog.js";
@@ -36,6 +37,7 @@ var plugin_default = { install(app, opt = {}) {
 	const option = Object.assign(defaultInstallOpt, opt);
 	app.config.globalProperties.$MAGIC_FORM = option;
 	setConfig(option);
+	if (option.typeMatchRules) registerTypeMatchRules(option.typeMatchRules);
 	app.component("m-form", Form_default);
 	app.component("m-form-dialog", FormDialog_default);
 	app.component("m-form-container", Container_default);

package/dist/es/schema.js

@@ -2,5 +2,6 @@ import "./_virtual/_rolldown/runtime.js";
 export * from "@tmagic/form-schema";
 //#region packages/form/src/schema.ts
 var FORM_DIFF_CONFIG_KEY = Symbol("mFormDiffConfig");
+var FORM_TYPE_MATCH_VALID_KEY = Symbol("mFormTypeMatchValid");
 //#endregion
-export { FORM_DIFF_CONFIG_KEY };
+export { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY };

package/dist/es/style.css

@@ -23,7 +23,7 @@
 .m-form-dialog .m-dialog-body {
   padding: 0 20px;
 }
-.m-form-dialog .el-table .m-form-item .el-form-item {
+.m-form-dialog .el-table .m-form-item .el-form-item:not(.is-error) {
   margin-bottom: 0;
 }
 
@@ -247,6 +247,10 @@ fieldset.m-fieldset .m-form-tip {
   width: 95vw !important;
 }
 
+.el-form-item .m-fields-table .el-form-item.is-error {
+  margin-bottom: 18px;
+}
+
 .m-fields-table {
   width: 100%;
 }
@@ -269,7 +273,7 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-table .el-table__expanded-cell .m-form-tip {
   margin-left: 80px;
 }
-.m-fields-table .el-form-item {
+.m-fields-table .el-form-item:not(.is-error) {
   margin-bottom: 0;
 }
 .m-fields-table .tmagic-form-table-drag-target {