@tmagic/form 1.8.0-beta.2 → 1.8.0-beta.21

package/dist/es/submitForm.js

@@ -1,6 +1,200 @@
+import { FORM_SILENT_MODE_KEY } from "./schema.js";
+import { applyExtendState } from "./utils/form.js";
 import Form_default from "./Form.js";
-import { createApp, defineComponent, h, nextTick, ref, watch } from "vue";
+import { createApp, defineComponent, h, nextTick, provide, ref, watch } from "vue";
 //#region packages/form/src/submitForm.ts
+/** 未指定或传入非正数 timeout 时的兜底超时（毫秒），保证非 debug 挂载始终能被清理 */
+var DEFAULT_MOUNT_TIMEOUT = 1e4;
+/**
+* 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, signal, createWrapper } = options;
+	return new Promise((resolve, reject) => {
+		if (signal?.aborted) {
+			reject(signal.reason ?? /* @__PURE__ */ new Error("mountFormInstance aborted"));
+			return;
+		}
+		let cleaned = false;
+		let timer = null;
+		let onAbort = null;
+		const instance = { app: null };
+		const container = document.createElement("div");
+		if (hidden) container.style.display = "none";
+		document.body.appendChild(container);
+		const cleanup = () => {
+			if (cleaned) return;
+			cleaned = true;
+			if (timer) {
+				clearTimeout(timer);
+				timer = null;
+			}
+			if (signal && onAbort) {
+				signal.removeEventListener("abort", onAbort);
+				onAbort = null;
+			}
+			try {
+				instance.app?.unmount();
+			} catch {}
+			container.parentNode?.removeChild(container);
+		};
+		if (signal) {
+			onAbort = () => {
+				if (cleaned) return;
+				reject(signal.reason ?? /* @__PURE__ */ new Error("mountFormInstance aborted"));
+				cleanup();
+			};
+			signal.addEventListener("abort", onAbort);
+		}
+		try {
+			const formRef = ref(null);
+			const { extendState, ...restFormProps } = formProps;
+			const userWrapper = createWrapper({
+				formRef,
+				formProps: restFormProps,
+				cleanup,
+				resolve,
+				reject
+			});
+			const wrapperComponent = 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 reservedStateKeys = new Set(Reflect.ownKeys(form.formState));
+						const apply = (state) => applyExtendState(form.formState, state, reservedStateKeys);
+						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;
+			const app = createApp(hidden ? defineComponent({
+				name: "MFormSilentProvider",
+				setup() {
+					provide(FORM_SILENT_MODE_KEY, true);
+					return () => h(wrapperComponent);
+				}
+			}) : wrapperComponent);
+			instance.app = app;
+			if (appContext) Object.assign(app._context, appContext);
+			if (!skipTimeout) timer = setTimeout(() => {
+				if (!cleaned) {
+					reject(new Error(timeoutMessage));
+					cleanup();
+				}
+			}, timeout > 0 ? timeout : DEFAULT_MOUNT_TIMEOUT);
+			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 完成一次表单校验/提交。
 *
@@ -21,67 +215,232 @@ import { createApp, defineComponent, h, nextTick, ref, watch } from "vue";
 * } catch (e) {
 *   console.error(e);
 * }
+*
+* // 需要同时获取变更记录时：
+* const { values, changeRecords } = await submitForm({
+*   config: [...],
+*   initValues: { name: 'foo' },
+*   returnChangeRecords: true,
+* });
+*
+* // 调试模式：可见地渲染表单，点击「确定」才提交：
+* const values = await submitForm({
+*   config: [...],
+*   initValues: { name: 'foo' },
+*   debug: true,
+* });
 * ```
 */
 var submitForm = (options) => {
-	const { native, appContext, timeout = 1e4, ...formProps } = options;
-	return new Promise((resolve, reject) => {
-		const container = document.createElement("div");
-		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 stop = watch(() => formRef.value?.initialized, async (initialized) => {
-					if (!initialized) return;
-					stop();
-					try {
-						await nextTick();
-						resolve(await formRef.value.submitForm(native));
-					} catch (err) {
-						reject(err);
-					} finally {
+	const { native, appContext, timeout = 1e4, returnChangeRecords, debug = false, signal, ...formProps } = options;
+	return mountFormInstance({
+		formProps,
+		appContext,
+		timeout,
+		signal,
+		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, signal, ...rest } = options;
+	return mountFormInstance({
+		formProps: {
+			...rest,
+			config: stripTabItemsLazy(config)
+		},
+		appContext,
+		timeout,
+		signal,
+		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();
 					}
-				}, {
-					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) 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();
+				} 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 { stripTabItemsLazy, submitForm, validateForm };

package/dist/es/utils/config.js

@@ -1,7 +1,10 @@
+import { ref } from "vue";
 //#region packages/form/src/utils/config.ts
 var $MAGIC_FORM = {};
+var isGlobalFlat = ref(false);
 var setConfig = (option) => {
 	$MAGIC_FORM = option;
+	isGlobalFlat.value = option.flat ?? false;
 };
 var getConfig = (key) => $MAGIC_FORM[key];
 var fieldRegistry = /* @__PURE__ */ new Map();
@@ -12,4 +15,4 @@ var registerField = (tagName, component) => {
 var getField = (tagName) => fieldRegistry.get(tagName);
 var deleteField = (tagName) => fieldRegistry.delete(tagName);
 //#endregion
-export { deleteField, getConfig, getField, registerField, setConfig };
+export { deleteField, getConfig, getField, isGlobalFlat, registerField, setConfig };

package/dist/es/utils/form.js

@@ -1,10 +1,46 @@
+import { createTypeMatchValidator } from "./typeMatch.js";
 import { readonly } from "vue";
-import { cloneDeep } from "lodash-es";
-import { getValueByKeyPath } from "@tmagic/utils";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import { cloneDeep } from "lodash-es";
+import { getDesignConfig } from "@tmagic/design";
+import { getValueByKeyPath } from "@tmagic/utils";
 //#region packages/form/src/utils/form.ts
-var TABLE_SELECT_TYPES = new Set(["table-select", "tableSelect"]);
+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;
+				const first = Array.isArray(error) ? error[0] : error;
+				if (first) resolve({
+					result: false,
+					message: typeof first === "string" ? first : first.message
+				});
+				else resolve(true);
+			};
+			try {
+				const result = validator(void 0, value, callback);
+				if (result && 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 }) => {
 	if (type === "html" && typeof asyncLoad === "object" && typeof name !== "undefined") {
@@ -12,7 +48,7 @@ var asyncLoadConfig = (value, initValue, { asyncLoad, name, type }) => {
 		value.asyncLoad = typeof initValue.asyncLoad === "object" ? initValue.asyncLoad : asyncLoad;
 	}
 };
-var MULTIPLE_VALUE_TYPES = new Set([
+var MULTIPLE_VALUE_TYPES = /* @__PURE__ */ new Set([
 	"checkbox-group",
 	"checkboxGroup",
 	"table",
@@ -99,13 +135,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 +159,7 @@ var getRules = function(mForm, rules = [], props) {
 				formValue: mForm?.values || props.model,
 				prop: props.prop,
 				config: props.config
-			}, mForm);
+			}, mForm));
 		}
 		return item;
 	});
@@ -163,6 +204,40 @@ var sortChange = (data, { prop, order }) => {
 	if (order === "ascending") data.sort((a, b) => a[prop] - b[prop]);
 	else if (order === "descending") data.sort((a, b) => b[prop] - a[prop]);
 };
+/**
+* 将 extendState 返回的扩展字段合并进 formState。
+*
+* - data 描述符（普通字段）通过 `formState[key] = value` 写入，走 reactive proxy 的 set，
+*   触发依赖通知；
+* - accessor 描述符（`{ get stage() { return ... } }`）按原样 defineProperty，调用方
+*   可控制读时求值；强制 `configurable: true` 以便下一次合并可再 define。
+*
+* 注意：extendState 只能向 formState「新增」字段，不允许覆盖其已有 key。
+* 调用方可通过 `reservedKeys` 传入合并前已存在的内置 key 快照（keyProp / popperClass /
+* config / initValues / isCompare / lastValues / parentValues / values / $emit / fields /
+* post 等），命中这些 key 时统一跳过并告警。
+*
+* 兜底：未传 `reservedKeys` 时，仍会拦截 props 派生的只读 getter 字段（无 setter），
+* 否则以普通字段形式赋值会让 proxy 的 set trap 抛出
+* `TypeError: 'set' on proxy: trap returned falsish`。
+*/
+var applyExtendState = (formState, state, reservedKeys) => {
+	if (!state) return;
+	for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) {
+		if (reservedKeys?.has(key)) continue;
+		if (!("value" in descriptor)) {
+			descriptor.configurable = true;
+			Object.defineProperty(formState, key, descriptor);
+			continue;
+		}
+		const targetDescriptor = Object.getOwnPropertyDescriptor(formState, key);
+		if (targetDescriptor && !("value" in targetDescriptor) && typeof targetDescriptor.set !== "function") {
+			console.warn(`[MForm] extendState: "${key}" is a read-only field derived from props and cannot be assigned a plain value. Return it as a getter accessor if you really need to override it.`);
+			continue;
+		}
+		formState[key] = state[key];
+	}
+};
 var createObjectProp = (prop, key, name) => {
 	if (prop === "") return key;
 	const itemPath = `${prop}`.split(".");
@@ -172,4 +247,4 @@ var createObjectProp = (prop, key, name) => {
 	return `${[...itemPath, key].join(".")}`;
 };
 //#endregion
-export { createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange };
+export { adaptFormValidator, applyExtendState, createObjectProp, createValues, datetimeFormatter, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange };