@tmagic/form 1.8.0-beta.16 → 1.8.0-beta.18

package/dist/es/style.css

@@ -296,12 +296,16 @@ fieldset.m-fieldset .m-form-tip {
   gap: 8px;
 }
 .m-fields-group-list .m-fields-group-list-footer {
-  display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-bottom: 16px;
 }
 
+/** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
+.m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
+  margin-bottom: 10px;
+}
+
 .m-form-panel .el-card__header:hover {
   background: #f2f6fc;
 }

package/dist/es/submitForm.js

@@ -3,6 +3,8 @@ import { applyExtendState } from "./utils/form.js";
 import Form_default from "./Form.js";
 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 的公共脚手架：
 *
@@ -13,14 +15,19 @@ import { createApp, defineComponent, h, nextTick, provide, ref, watch } from "vu
 * 容器创建、卸载、超时、上下文注入等模板代码在此统一收口。
 */
 var mountFormInstance = (options) => {
-	const { formProps, appContext, timeout, timeoutMessage, hidden = true, skipTimeout = false, createWrapper } = options;
+	const { formProps, appContext, timeout, timeoutMessage, hidden = true, skipTimeout = false, signal, createWrapper } = options;
 	return new Promise((resolve, reject) => {
-		const container = document.createElement("div");
-		if (hidden) container.style.display = "none";
-		document.body.appendChild(container);
+		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;
@@ -28,59 +35,71 @@ var mountFormInstance = (options) => {
 				clearTimeout(timer);
 				timer = null;
 			}
+			if (signal && onAbort) {
+				signal.removeEventListener("abort", onAbort);
+				onAbort = 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 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 (timeout > 0 && !skipTimeout) timer = setTimeout(() => {
-			if (!cleaned) {
-				reject(new Error(timeoutMessage));
+		if (signal) {
+			onAbort = () => {
+				if (cleaned) return;
+				reject(signal.reason ?? /* @__PURE__ */ new Error("mountFormInstance aborted"));
 				cleanup();
-			}
-		}, timeout);
+			};
+			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);
@@ -213,11 +232,12 @@ var createDebugWrapper = (options) => {
 * ```
 */
 var submitForm = (options) => {
-	const { native, appContext, timeout = 1e4, returnChangeRecords, debug = false, ...formProps } = options;
+	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.`,
@@ -354,7 +374,7 @@ var stripTabItemsLazy = (config) => {
 * ```
 */
 var validateForm = (options) => {
-	const { appContext, timeout = 1e4, debug = false, config, ...rest } = options;
+	const { appContext, timeout = 1e4, debug = false, config, signal, ...rest } = options;
 	return mountFormInstance({
 		formProps: {
 			...rest,
@@ -362,6 +382,7 @@ var validateForm = (options) => {
 		},
 		appContext,
 		timeout,
+		signal,
 		hidden: !debug,
 		skipTimeout: debug,
 		timeoutMessage: `validateForm timeout after ${timeout}ms: form is not initialized.`,

package/dist/es/utils/form.js

@@ -20,15 +20,16 @@ var adaptFormValidator = (validator) => {
 			const callback = (error) => {
 				if (settled) return;
 				settled = true;
-				if (error) resolve({
+				const first = Array.isArray(error) ? error[0] : error;
+				if (first) resolve({
 					result: false,
-					message: typeof error === "string" ? error : error.message
+					message: typeof first === "string" ? first : first.message
 				});
 				else resolve(true);
 			};
 			try {
 				const result = validator(void 0, value, callback);
-				if (result !== null && typeof result.then === "function") Promise.resolve(result).then(() => {
+				if (result && typeof result.then === "function") Promise.resolve(result).then(() => {
 					if (!settled) callback();
 				}, (err) => {
 					callback(err instanceof Error ? err : new Error(String(err)));

package/dist/es/utils/typeMatch.js

@@ -361,6 +361,11 @@ var validateBuiltinTypeMatch = (value, fieldType, mForm, props, message) => {
 		return;
 	}
 };
+/**
+* 校验取值与字段 type 是否匹配；通过返回 undefined，否则返回错误文案。
+*
+* 命中的自定义规则是异步校验器时返回 Promise，内置规则始终同步返回。
+*/
 var validateTypeMatch = (value, mForm, props, message) => {
 	if (isEmptyValue(value) || isEmptyArray(value)) return;
 	if (!props.config?.name) return;
@@ -376,34 +381,106 @@ var validateTypeMatch = (value, mForm, props, message) => {
 	});
 	return validateBuiltinTypeMatch(value, fieldType, mForm, props, message);
 };
+var toError = (error) => error instanceof Error ? error : /* @__PURE__ */ new Error(`${error}`);
 var createTypeMatchValidator = (mForm, props, rule) => {
 	const originalValidator = typeof rule.validator === "function" ? rule.validator : void 0;
+	/**
+	* 每次校验取一个自增序号，只有最新一轮的结论会被采用。
+	*
+	* 旧值的在途校验不能用自己的结论结算：它可能晚于新校验结束，用过期结论覆盖新结论
+	* （表单取最后结束的那次结果）；也不能在新校验开始时无条件按通过结算，否则
+	* `form.validate()` 会对一个还没校验过的值返回成功。因此所有尚未结算的调用都登记在
+	* pendingSettlers 中，等最新一轮出结论后用同一个结论一起结算。
+	*
+	* 不比较取值本身：配了 names 或取值为对象/数组时拿到的是同一个引用，就地修改后比较不出变化。
+	*/
+	let generation = 0;
+	let pendingSettlers = [];
 	return (asyncValidatorRule, value, callback, source, options) => {
 		const actualValue = props.config?.names ? props.model : value;
-		try {
-			const error = validateTypeMatch(actualValue, mForm, props, rule.message);
-			if (error) {
-				callback(new Error(error));
+		generation += 1;
+		const currentGeneration = generation;
+		/** 已有更新的一轮校验开始，本轮结论作废 */
+		const isStale = () => currentGeneration !== generation;
+		pendingSettlers.push((args) => callback(...args));
+		/**
+		* 结算本轮与被本轮取代的所有在途校验。
+		*
+		* async-validator 的 callback 不幂等：重复调用会让它的内部计数提前满足、错误信息重复；
+		* 原始 validator 写成 async 时很容易既调 callback 又返回 Promise，故所有回调都收敛到这里，
+		* 由「取出即出队」保证每个调用的 callback 只会被调用一次。
+		*/
+		const conclude = (...args) => {
+			if (isStale()) return;
+			const settlers = pendingSettlers;
+			pendingSettlers = [];
+			for (const settle of settlers) settle(args);
+		};
+		/**
+		* 执行原始 validator 并把结果统一转成 callback。
+		*
+		* async-validator 只解析同步返回给它的返回值（true / false / Error / 错误数组 / Promise，
+		* 抛错转成错误信息），异步路径已脱离它的调用栈，这些约定会失效导致校验永不结束，故复刻一份。
+		*/
+		const settleWithOriginalValidator = () => {
+			if (isStale()) return;
+			if (!originalValidator) {
+				conclude();
+				return;
+			}
+			let result;
+			try {
+				result = originalValidator({
+					rule: asyncValidatorRule,
+					value: actualValue,
+					callback: conclude,
+					source,
+					options
+				}, {
+					values: mForm?.initValues || {},
+					model: props.model,
+					parent: mForm?.parentValues || {},
+					formValue: mForm?.values || props.model,
+					prop: props.prop,
+					config: props.config
+				}, mForm);
+			} catch (err) {
+				conclude(toError(err));
 				return;
 			}
-		} catch (error) {
-			console.error(error);
+			if (isPromise(result)) result.then(() => conclude(), (err) => conclude(toError(err)));
+			else if (result === true) conclude();
+			else if (result === false) {
+				const field = asyncValidatorRule?.fullField || asyncValidatorRule?.field || props.prop;
+				conclude(new Error(rule.message || `${field} fails`));
+			} else if (result instanceof Error || Array.isArray(result)) conclude(result);
+		};
+		const skipFailedTypeMatch = (err) => {
+			console.error(err);
+			settleWithOriginalValidator();
+		};
+		let error;
+		try {
+			error = validateTypeMatch(actualValue, mForm, props, rule.message);
+		} catch (err) {
+			skipFailedTypeMatch(err);
+			return;
+		}
+		if (isPromise(error)) {
+			error.then((asyncMessage) => {
+				if (asyncMessage) {
+					conclude(new Error(asyncMessage));
+					return;
+				}
+				settleWithOriginalValidator();
+			}, skipFailedTypeMatch);
+			return;
+		}
+		if (error) {
+			conclude(new Error(error));
+			return;
 		}
-		if (originalValidator) return originalValidator({
-			rule: asyncValidatorRule,
-			value: actualValue,
-			callback,
-			source,
-			options
-		}, {
-			values: mForm?.initValues || {},
-			model: props.model,
-			parent: mForm?.parentValues || {},
-			formValue: mForm?.values || props.model,
-			prop: props.prop,
-			config: props.config
-		}, mForm);
-		callback();
+		settleWithOriginalValidator();
 	};
 };
 //#endregion

package/dist/style.css

@@ -296,12 +296,16 @@ fieldset.m-fieldset .m-form-tip {
   gap: 8px;
 }
 .m-fields-group-list .m-fields-group-list-footer {
-  display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-bottom: 16px;
 }
 
+/** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
+.m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
+  margin-bottom: 10px;
+}
+
 .m-form-panel .el-card__header:hover {
   background: #f2f6fc;
 }

package/dist/themes/magic-admin.css

@@ -296,12 +296,16 @@ fieldset.m-fieldset .m-form-tip {
   gap: 8px;
 }
 .m-fields-group-list .m-fields-group-list-footer {
-  display: flex;
   justify-content: space-between;
   margin-top: 10px;
   margin-bottom: 16px;
 }
 
+/** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
+.m-container-group-list.outer-gorup_list > .m-fields-group-list > .m-fields-group-list-item {
+  margin-bottom: 10px;
+}
+
 .m-form-panel .el-card__header:hover {
   background: #f2f6fc;
 }
@@ -496,4 +500,10 @@ fieldset.m-fieldset .m-form-tip {
 }
 .m-form.m-form--magic-admin .m-form-container .m-form-container-expand {
   text-align: left;
+}
+.m-form.m-form--magic-admin .m-fields-group-list .el-table__empty-block .el-table__empty-text {
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.03);
+  margin-top: 8px;
+  border-radius: 4px;
 }