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

package/dist/es/submitForm.js

@@ -2,6 +2,178 @@ import Form_default from "./Form.js";
 import { createApp, defineComponent, h, nextTick, ref, watch } from "vue";
 //#region packages/form/src/submitForm.ts
 /**
+* submitForm / validateForm 的公共脚手架：
+*
+* 创建临时容器 → 挂载一个 wrapper 组件（内含 MForm）→ 提供统一的 cleanup / timeout / appContext 继承 →
+* 由 `createWrapper` 决定「何时调用 MForm 的哪个方法、如何 resolve/reject」。
+*
+* 调用方只需关注差异逻辑（调用 `submitForm` 还是 `validate`、结果如何包装、是否需要调试弹层），
+* 容器创建、卸载、超时、上下文注入等模板代码在此统一收口。
+*/
+var mountFormInstance = (options) => {
+	const { formProps, appContext, timeout, timeoutMessage, hidden = true, skipTimeout = false, createWrapper } = options;
+	return new Promise((resolve, reject) => {
+		const container = document.createElement("div");
+		if (hidden) container.style.display = "none";
+		document.body.appendChild(container);
+		let cleaned = false;
+		let timer = null;
+		const instance = { app: null };
+		const cleanup = () => {
+			if (cleaned) return;
+			cleaned = true;
+			if (timer) {
+				clearTimeout(timer);
+				timer = null;
+			}
+			try {
+				instance.app?.unmount();
+			} catch {}
+			container.parentNode?.removeChild(container);
+		};
+		const formRef = ref(null);
+		const { extendState, ...restFormProps } = formProps;
+		const userWrapper = createWrapper({
+			formRef,
+			formProps: restFormProps,
+			cleanup,
+			resolve,
+			reject
+		});
+		const app = createApp(typeof extendState === "function" ? defineComponent({
+			name: "MFormExtendStateInjector",
+			setup() {
+				watch(() => formRef.value, (form) => {
+					if (!form) return;
+					let result;
+					try {
+						result = extendState(form.formState);
+					} catch (e) {
+						console.error("[MForm] extendState failed:", e);
+						return;
+					}
+					const apply = (state) => {
+						if (!state) return;
+						for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) if ("value" in descriptor) form.formState[key] = state[key];
+						else {
+							descriptor.configurable = true;
+							Object.defineProperty(form.formState, key, descriptor);
+						}
+					};
+					if (result && typeof result.then === "function") result.then(apply, (e) => console.error("[MForm] extendState failed:", e));
+					else apply(result);
+				}, {
+					flush: "sync",
+					immediate: true
+				});
+				return () => h(userWrapper);
+			}
+		}) : userWrapper);
+		instance.app = app;
+		if (appContext) Object.assign(app._context, appContext);
+		if (timeout > 0 && !skipTimeout) timer = setTimeout(() => {
+			if (!cleaned) {
+				reject(new Error(timeoutMessage));
+				cleanup();
+			}
+		}, timeout);
+		try {
+			app.mount(container);
+		} catch (err) {
+			reject(err);
+			cleanup();
+		}
+	});
+};
+/**
+* 构造调试模式下的可见弹层 wrapper：以 fixed 遮罩居中渲染 MForm，提供「确定 / 取消」按钮与错误展示区。
+*
+* submitForm 与 validateForm 的调试弹层 UI 完全一致，仅「确定」时调用的实例方法、错误处理与取消文案不同，
+* 这些差异通过 `onConfirm` / `onCancel` 注入，弹层结构在此统一收口。
+*/
+var createDebugWrapper = (options) => {
+	const { formRef, formProps, title, name, onConfirm, onCancel } = options;
+	const btnBase = {
+		padding: "8px 20px",
+		fontSize: "14px",
+		lineHeight: "1",
+		border: "1px solid #dcdfe6",
+		borderRadius: "4px",
+		cursor: "pointer"
+	};
+	return defineComponent({
+		name,
+		setup() {
+			const errorMsg = ref("");
+			const setError = (msg) => {
+				errorMsg.value = msg;
+			};
+			return () => h("div", { style: {
+				position: "fixed",
+				inset: "0",
+				zIndex: "10000",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				background: "rgba(0, 0, 0, 0.5)"
+			} }, [h("div", { style: {
+				display: "flex",
+				flexDirection: "column",
+				width: "600px",
+				maxWidth: "90vw",
+				maxHeight: "85vh",
+				background: "#fff",
+				borderRadius: "8px",
+				boxShadow: "0 8px 24px rgba(0, 0, 0, 0.2)",
+				overflow: "hidden"
+			} }, [
+				h("div", { style: {
+					padding: "16px 20px",
+					fontSize: "16px",
+					fontWeight: "600",
+					borderBottom: "1px solid #ebeef5"
+				} }, title),
+				h("div", { style: {
+					flex: "1",
+					padding: "20px",
+					overflow: "auto"
+				} }, [h(Form_default, {
+					...formProps,
+					ref: formRef
+				}), errorMsg.value ? h("div", {
+					style: {
+						marginTop: "12px",
+						color: "#f56c6c",
+						fontSize: "13px",
+						lineHeight: "1.5"
+					},
+					innerHTML: errorMsg.value
+				}) : null]),
+				h("div", { style: {
+					display: "flex",
+					justifyContent: "flex-end",
+					gap: "12px",
+					padding: "12px 20px",
+					borderTop: "1px solid #ebeef5"
+				} }, [h("button", {
+					type: "button",
+					onClick: onCancel,
+					style: { ...btnBase }
+				}, "取消"), h("button", {
+					type: "button",
+					onClick: () => onConfirm(setError),
+					style: {
+						...btnBase,
+						color: "#fff",
+						background: "#409eff",
+						borderColor: "#409eff"
+					}
+				}, "确定")])
+			])]);
+		}
+	});
+};
+/**
 * 以命令式方式调用 Form.vue 完成一次表单校验/提交。
 *
 * 类似 ElMessage 的用法：传入 props（包含 `config`/`initValues` 等），函数内部会临时挂载
@@ -39,152 +211,212 @@ import { createApp, defineComponent, h, nextTick, ref, watch } from "vue";
 */
 var submitForm = (options) => {
 	const { native, appContext, timeout = 1e4, returnChangeRecords, debug = false, ...formProps } = options;
-	return new Promise((resolve, reject) => {
-		const container = document.createElement("div");
-		if (!debug) container.style.display = "none";
-		document.body.appendChild(container);
-		let cleaned = false;
-		let timer = null;
-		const app = createApp(defineComponent({
-			name: "MFormSubmitWrapper",
-			setup() {
-				const formRef = ref(null);
-				const errorMsg = ref("");
-				const doSubmit = async () => {
-					try {
-						await nextTick();
-						const changeRecords = [...formRef.value?.changeRecords ?? []];
-						const result = await formRef.value.submitForm(native);
-						resolve(returnChangeRecords ? {
-							values: result,
-							changeRecords
-						} : result);
-						cleanup();
-					} catch (err) {
-						if (debug) {
-							errorMsg.value = err instanceof Error ? err.message : String(err);
-							return;
-						}
-						reject(err);
+	return mountFormInstance({
+		formProps,
+		appContext,
+		timeout,
+		hidden: !debug,
+		skipTimeout: debug,
+		timeoutMessage: `submitForm timeout after ${timeout}ms: form is not initialized.`,
+		createWrapper: ({ formRef, formProps, cleanup, resolve, reject }) => {
+			/**
+			* 执行一次提交：nextTick 等待子组件渲染 → 快照 changeRecords → 调用实例 submitForm → resolve。
+			* 校验失败时交给 `onValidateError` 决定「保留弹层展示错误（debug）」还是「reject 并清理（普通）」，
+			* 从而让 debug 与普通模式共享同一份提交逻辑。
+			*/
+			const doSubmit = async (onValidateError) => {
+				try {
+					await nextTick();
+					const changeRecords = [...formRef.value?.changeRecords ?? []];
+					const result = await formRef.value.submitForm(native);
+					resolve(returnChangeRecords ? {
+						values: result,
+						changeRecords
+					} : result);
+					cleanup();
+				} catch (err) {
+					onValidateError(err);
+				}
+			};
+			if (debug) return createDebugWrapper({
+				formRef,
+				formProps,
+				name: "MFormSubmitWrapper",
+				title: "submitForm 调试",
+				onConfirm: (setError) => doSubmit((err) => {
+					setError(err instanceof Error ? err.message : String(err));
+				}),
+				onCancel: () => {
+					reject(/* @__PURE__ */ new Error("submitForm canceled in debug mode."));
+					cleanup();
+				}
+			});
+			return defineComponent({
+				name: "MFormSubmitWrapper",
+				setup() {
+					const stop = watch(() => formRef.value?.initialized, (initialized) => {
+						if (!initialized) return;
+						stop();
+						doSubmit((err) => {
+							reject(err);
+							cleanup();
+						});
+					}, {
+						flush: "post",
+						immediate: true
+					});
+					return () => h(Form_default, {
+						...formProps,
+						ref: formRef
+					});
+				}
+			});
+		}
+	});
+};
+/**
+* 深拷贝配置值，保留函数（display / onTabClick 等回调）引用，避免破坏配置中的回调。
+*/
+var cloneConfigValue = (value) => {
+	if (Array.isArray(value)) return value.map(cloneConfigValue);
+	if (value && typeof value === "object") return Object.keys(value).reduce((acc, key) => {
+		acc[key] = cloneConfigValue(value[key]);
+		return acc;
+	}, {});
+	return value;
+};
+/**
+* 深度遍历配置，去掉所有 type 为 'tab' 的容器中各标签页（items）的 lazy 配置。
+*/
+var removeTabItemsLazy = (node) => {
+	if (Array.isArray(node)) {
+		node.forEach(removeTabItemsLazy);
+		return;
+	}
+	if (!node || typeof node !== "object") return;
+	if (node.type === "tab" && Array.isArray(node.items)) node.items.forEach((pane) => {
+		if (pane && typeof pane === "object") delete pane.lazy;
+	});
+	Object.keys(node).forEach((key) => {
+		removeTabItemsLazy(node[key]);
+	});
+};
+/**
+* 返回一份去除了 tab 标签页 lazy 的配置副本。
+*
+* tab 容器开启 lazy 时，非激活标签页的内容不会渲染，导致 validateForm 静默挂载后
+* 无法校验到这些标签页内的字段。校验场景需要一次性渲染全部字段，故在此统一去除 lazy。
+* 处理基于深拷贝，不会污染调用方传入的原始 config。
+*/
+var stripTabItemsLazy = (config) => {
+	const cloned = cloneConfigValue(config);
+	removeTabItemsLazy(cloned);
+	return cloned;
+};
+/**
+* 以命令式方式对一份「表单配置 + 值」做一次静默校验，**不依赖也不影响任何已渲染的表单**。
+*
+* 与 `submitForm` 类似，内部会临时挂载一个不可见的 MForm 实例，等待其初始化完成后调用
+* 实例的 `validate` 方法，返回汇总后的错误文案，随后自动卸载实例。
+*
+* 与 `submitForm` 的区别：
+* - 「静默」：校验失败不抛异常、不触发 `error` 事件、不返回表单值；
+* - 仅用于「探测」配置是否合法，适合源码保存后校验、批量校验组件配置等场景。
+*
+* 由于每次都新建一个独立的 MForm 实例，调用方无需持有任何表单 ref，也不会污染
+* 页面上正在展示的表单状态。
+*
+* @returns 校验通过返回空字符串 `''`，否则返回以 `<br>` 拼接的错误文案。
+*   仅在初始化超时或挂载失败等异常情况下才会 reject。
+*
+* @example
+* ```ts
+* import { validateForm } from '@tmagic/form';
+*
+* const error = await validateForm({
+*   config: [...],
+*   initValues: { name: 'foo' },
+*   appContext: getCurrentInstance()?.appContext,
+* });
+* if (error) {
+*   // 配置不合法，error 为错误文案
+* }
+*
+* // 调试模式：可见地渲染表单，点击「确定」才校验，校验失败保留弹层可修正重试：
+* const error = await validateForm({
+*   config: [...],
+*   initValues: { name: 'foo' },
+*   debug: true,
+* });
+* ```
+*/
+var validateForm = (options) => {
+	const { appContext, timeout = 1e4, debug = false, config, ...rest } = options;
+	return mountFormInstance({
+		formProps: {
+			...rest,
+			config: stripTabItemsLazy(config)
+		},
+		appContext,
+		timeout,
+		hidden: !debug,
+		skipTimeout: debug,
+		timeoutMessage: `validateForm timeout after ${timeout}ms: form is not initialized.`,
+		createWrapper: ({ formRef, formProps, cleanup, resolve, reject }) => {
+			/**
+			* 执行一次校验：nextTick 等待子组件渲染 → 调用实例 validate → 通过则 resolve ''。
+			* 校验失败（返回非空错误文案）时交给 `onInvalid` 决定「静默 resolve 错误文案（普通）」
+			* 还是「在弹层展示错误并保留供重试（debug）」，从而让两种模式共享同一份校验逻辑。
+			*/
+			const doValidate = async (onInvalid) => {
+				try {
+					await nextTick();
+					const error = await formRef.value.validate();
+					if (error) onInvalid(error);
+					else {
+						resolve("");
 						cleanup();
 					}
-				};
-				if (debug) {
-					const handleCancel = () => {
-						reject(/* @__PURE__ */ new Error("submitForm canceled in debug mode."));
-						cleanup();
-					};
-					const btnBase = {
-						padding: "8px 20px",
-						fontSize: "14px",
-						lineHeight: "1",
-						border: "1px solid #dcdfe6",
-						borderRadius: "4px",
-						cursor: "pointer"
-					};
-					return () => h("div", { style: {
-						position: "fixed",
-						inset: "0",
-						zIndex: "10000",
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						background: "rgba(0, 0, 0, 0.5)"
-					} }, [h("div", { style: {
-						display: "flex",
-						flexDirection: "column",
-						width: "600px",
-						maxWidth: "90vw",
-						maxHeight: "85vh",
-						background: "#fff",
-						borderRadius: "8px",
-						boxShadow: "0 8px 24px rgba(0, 0, 0, 0.2)",
-						overflow: "hidden"
-					} }, [
-						h("div", { style: {
-							padding: "16px 20px",
-							fontSize: "16px",
-							fontWeight: "600",
-							borderBottom: "1px solid #ebeef5"
-						} }, "submitForm 调试"),
-						h("div", { style: {
-							flex: "1",
-							padding: "20px",
-							overflow: "auto"
-						} }, [h(Form_default, {
-							...formProps,
-							ref: formRef
-						}), errorMsg.value ? h("div", {
-							style: {
-								marginTop: "12px",
-								color: "#f56c6c",
-								fontSize: "13px",
-								lineHeight: "1.5"
-							},
-							innerHTML: errorMsg.value
-						}) : null]),
-						h("div", { style: {
-							display: "flex",
-							justifyContent: "flex-end",
-							gap: "12px",
-							padding: "12px 20px",
-							borderTop: "1px solid #ebeef5"
-						} }, [h("button", {
-							type: "button",
-							onClick: handleCancel,
-							style: { ...btnBase }
-						}, "取消"), h("button", {
-							type: "button",
-							onClick: doSubmit,
-							style: {
-								...btnBase,
-								color: "#fff",
-								background: "#409eff",
-								borderColor: "#409eff"
-							}
-						}, "确定")])
-					])]);
+				} catch (err) {
+					reject(err);
+					cleanup();
 				}
-				const stop = watch(() => formRef.value?.initialized, (initialized) => {
-					if (!initialized) return;
-					stop();
-					doSubmit();
-				}, {
-					flush: "post",
-					immediate: true
-				});
-				return () => h(Form_default, {
-					...formProps,
-					ref: formRef
-				});
-			}
-		}));
-		if (appContext) Object.assign(app._context, appContext);
-		const cleanup = () => {
-			if (cleaned) return;
-			cleaned = true;
-			if (timer) {
-				clearTimeout(timer);
-				timer = null;
-			}
-			try {
-				app.unmount();
-			} catch {}
-			container.parentNode?.removeChild(container);
-		};
-		if (timeout > 0 && !debug) timer = setTimeout(() => {
-			if (!cleaned) {
-				reject(/* @__PURE__ */ new Error(`submitForm timeout after ${timeout}ms: form is not initialized.`));
-				cleanup();
-			}
-		}, timeout);
-		try {
-			app.mount(container);
-		} catch (err) {
-			reject(err);
-			cleanup();
+			};
+			if (debug) return createDebugWrapper({
+				formRef,
+				formProps,
+				name: "MFormValidateWrapper",
+				title: "validateForm 调试",
+				onConfirm: (setError) => doValidate((error) => {
+					setError(error);
+				}),
+				onCancel: () => {
+					reject(/* @__PURE__ */ new Error("validateForm canceled in debug mode."));
+					cleanup();
+				}
+			});
+			return defineComponent({
+				name: "MFormValidateWrapper",
+				setup() {
+					const stop = watch(() => formRef.value?.initialized, (initialized) => {
+						if (!initialized) return;
+						stop();
+						doValidate((error) => {
+							resolve(error);
+							cleanup();
+						});
+					}, {
+						flush: "post",
+						immediate: true
+					});
+					return () => h(Form_default, {
+						...formProps,
+						ref: formRef
+					});
+				}
+			});
 		}
 	});
 };
 //#endregion
-export { submitForm };
+export { submitForm, validateForm };

package/dist/es/utils/form.js

@@ -1,9 +1,44 @@
+import { createTypeMatchValidator } from "./typeMatch.js";
 import { readonly } from "vue";
 import { cloneDeep } from "lodash-es";
+import { getDesignConfig } from "@tmagic/design";
 import { getValueByKeyPath } from "@tmagic/utils";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 //#region packages/form/src/utils/form.ts
+var isTDesignAdapter = () => getDesignConfig("adapterType") === "tdesign-vue-next";
+/**
+* 将 async-validator（Element Plus）风格的 validator 适配到当前 UI 库。
+* TDesign 调用签名为 `(val) => boolean | CustomValidateObj | Promise`，无 callback。
+*/
+var adaptFormValidator = (validator) => {
+	return (arg1, arg2, arg3, arg4, arg5) => {
+		if (!isTDesignAdapter()) return validator(arg1, arg2, arg3, arg4, arg5);
+		const value = arg1;
+		return new Promise((resolve) => {
+			let settled = false;
+			const callback = (error) => {
+				if (settled) return;
+				settled = true;
+				if (error) resolve({
+					result: false,
+					message: typeof error === "string" ? error : error.message
+				});
+				else resolve(true);
+			};
+			try {
+				const result = validator(void 0, value, callback);
+				if (result !== null && typeof result.then === "function") Promise.resolve(result).then(() => {
+					if (!settled) callback();
+				}, (err) => {
+					callback(err instanceof Error ? err : new Error(String(err)));
+				});
+			} catch (e) {
+				callback(e instanceof Error ? e : new Error(String(e)));
+			}
+		});
+	};
+};
 var TABLE_SELECT_TYPES = /* @__PURE__ */ new Set(["table-select", "tableSelect"]);
 var isTableSelect = (type) => typeof type === "string" && TABLE_SELECT_TYPES.has(type);
 var asyncLoadConfig = (value, initValue, { asyncLoad, name, type }) => {
@@ -99,13 +134,18 @@ var display = function(mForm, config, props) {
 	if (config === false) return false;
 	return true;
 };
-var getRules = function(mForm, rules = [], props) {
-	rules = cloneDeep(rules);
+var getRules = function(mForm, r = [], props, typeMatchValid) {
+	let rules = cloneDeep(r);
 	if (typeof rules === "object" && !Array.isArray(rules)) rules = [rules];
+	if (typeMatchValid?.value && !rules.some((r) => typeof r.typeMatch !== "undefined")) rules.push({ typeMatch: true });
 	return rules.map((item) => {
+		if (item.typeMatch) {
+			item.validator = adaptFormValidator(createTypeMatchValidator(mForm, props, item));
+			return item;
+		}
 		if (typeof item.validator === "function") {
 			const fnc = item.validator;
-			item.validator = (rule, value, callback, source, options) => fnc({
+			item.validator = adaptFormValidator((rule, value, callback, source, options) => fnc({
 				rule,
 				value: props.config.names ? props.model : value,
 				callback,
@@ -118,7 +158,7 @@ var getRules = function(mForm, rules = [], props) {
 				formValue: mForm?.values || props.model,
 				prop: props.prop,
 				config: props.config
-			}, mForm);
+			}, mForm));
 		}
 		return item;
 	});
@@ -172,4 +212,4 @@ var createObjectProp = (prop, key, name) => {
 	return `${[...itemPath, key].join(".")}`;
 };
 //#endregion
-export { createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange };
+export { adaptFormValidator, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange };