@tmagic/form 1.8.0-beta.25 → 1.8.0-beta.27

package/dist/es/submitForm.js

@@ -1,40 +1,30 @@
-import { FORM_SILENT_MODE_KEY } from "./schema.js";
-import { applyExtendState } from "./utils/form.js";
+import { submitForm as submitForm$1, validateForm as validateForm$1 } from "./utils/submitHeadless.js";
 import Form_default from "./Form.js";
-import { createApp, defineComponent, h, nextTick, provide, ref, watch } from "vue";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
 //#region packages/form/src/submitForm.ts
-/** 未指定或传入非正数 timeout 时的兜底超时（毫秒），保证非 debug 挂载始终能被清理 */
-var DEFAULT_MOUNT_TIMEOUT = 1e4;
 /**
-* submitForm / validateForm 的公共脚手架：
+* `dialog: true` 时 submitForm / validateForm 的公共脚手架：
 *
-* 创建临时容器 → 挂载一个 wrapper 组件（内含 MForm）→ 提供统一的 cleanup / timeout / appContext 继承 →
+* 创建临时容器 → 挂载一个 wrapper 组件（内含 MForm）→ 提供统一的 cleanup / appContext 继承 →
 * 由 `createWrapper` 决定「何时调用 MForm 的哪个方法、如何 resolve/reject」。
 *
-* 调用方只需关注差异逻辑（调用 `submitForm` 还是 `validate`、结果如何包装、是否需要调试弹层），
-* 容器创建、卸载、超时、上下文注入等模板代码在此统一收口。
+* 挂载出来的表单等待人工点击，因此没有超时兜底，靠「确定」/「取消」/`signal` 结束。
 */
 var mountFormInstance = (options) => {
-	const { formProps, appContext, timeout, timeoutMessage, hidden = true, skipTimeout = false, signal, createWrapper } = options;
+	const { formProps, appContext, 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;
@@ -54,53 +44,16 @@ var mountFormInstance = (options) => {
 		}
 		try {
 			const formRef = ref(null);
-			const { extendState, ...restFormProps } = formProps;
-			const userWrapper = createWrapper({
+			const wrapperComponent = createWrapper({
 				formRef,
-				formProps: restFormProps,
+				formProps,
 				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 rootComponent = hidden ? defineComponent({
-				name: "MFormSilentProvider",
-				setup() {
-					provide(FORM_SILENT_MODE_KEY, true);
-					return () => h(wrapperComponent);
-				}
-			}) : wrapperComponent;
-			const app = createApp(rootComponent);
+			const app = createApp(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);
@@ -109,12 +62,12 @@ var mountFormInstance = (options) => {
 	});
 };
 /**
-* 构造调试模式下的可见弹层 wrapper：以 fixed 遮罩居中渲染 MForm，提供「确定 / 取消」按钮与错误展示区。
+* 构造可见弹层 wrapper：以 fixed 遮罩居中渲染 MForm，提供「确定 / 取消」按钮与错误展示区。
 *
-* submitForm 与 validateForm 的调试弹层 UI 完全一致，仅「确定」时调用的实例方法、错误处理与取消文案不同，
+* submitForm 与 validateForm 的弹层 UI 完全一致，仅「确定」时调用的实例方法、错误处理与取消文案不同，
 * 这些差异通过 `onConfirm` / `onCancel` 注入，弹层结构在此统一收口。
 */
-var createDebugWrapper = (options) => {
+var createDialogWrapper = (options) => {
 	const { formRef, formProps, title, name, onConfirm, onCancel } = options;
 	const btnBase = {
 		padding: "8px 20px",
@@ -197,57 +150,17 @@ var createDebugWrapper = (options) => {
 	});
 };
 /**
-* 以命令式方式调用 Form.vue 完成一次表单校验/提交。
-*
-* 类似 ElMessage 的用法：传入 props（包含 `config`/`initValues` 等），函数内部会临时挂载
-* 一个不可见的 Form 组件实例，等待初始化完成后调用其 `submitForm` 方法，
-* 校验通过则 resolve 表单值，校验失败则 reject 错误信息，最后自动卸载实例。
-*
-* @example
-* ```ts
-* import { submitForm } from '@tmagic/form';
+* 可见弹层提交：把表单渲染在弹层里，点击「确定」才调用挂载实例的 `submitForm`。
 *
-* try {
-*   const values = await submitForm({
-*     config: [...],
-*     initValues: { name: 'foo' },
-*   });
-*   console.log(values);
-* } 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,
-* });
-* ```
+* 用于需要用户填写/确认的场景；默认路径仍是无渲染校验（见 `submitForm` 的说明）。
 */
-var submitForm = (options) => {
-	const { native, appContext, timeout = 1e4, returnChangeRecords, debug = false, signal, ...formProps } = options;
+var submitFormByDialogRender = (options) => {
+	const { native, appContext, returnChangeRecords, signal, dialog, title, ...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();
@@ -262,39 +175,19 @@ var submitForm = (options) => {
 					onValidateError(err);
 				}
 			};
-			if (debug) return createDebugWrapper({
+			return createDialogWrapper({
 				formRef,
 				formProps,
 				name: "MFormSubmitWrapper",
-				title: "submitForm 调试",
+				title: title ?? "submitForm",
 				onConfirm: (setError) => doSubmit((err) => {
 					setError(err instanceof Error ? err.message : String(err));
 				}),
 				onCancel: () => {
-					reject(/* @__PURE__ */ new Error("submitForm canceled in debug mode."));
+					reject(/* @__PURE__ */ new Error("submitForm canceled."));
 					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
-					});
-				}
-			});
 		}
 	});
 };
@@ -338,61 +231,20 @@ var stripTabItemsLazy = (config) => {
 	return cloned;
 };
 /**
-* 以命令式方式对一份「表单配置 + 值」做一次静默校验，**不依赖也不影响任何已渲染的表单**。
-*
-* 与 `submitForm` 类似，内部会临时挂载一个不可见的 MForm 实例，等待其初始化完成后调用
-* 实例的 `validate` 方法，返回汇总后的错误文案，随后自动卸载实例。
-*
-* 与 `submitForm` 的区别：
-* - 「静默」：校验失败不抛异常、不触发 `error` 事件、不返回表单值；
-* - 仅用于「探测」配置是否合法，适合源码保存后校验、批量校验组件配置等场景。
+* 可见弹层校验：把表单渲染在弹层里，点击「确定」才调用挂载实例的 `validate`。
 *
-* 由于每次都新建一个独立的 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,
-* });
-* ```
+* 用于需要用户填写/确认的场景；默认路径仍是无渲染校验（见 `validateForm` 的说明）。
 */
-var validateForm = (options) => {
-	const { appContext, timeout = 1e4, debug = false, config, signal, ...rest } = options;
+var validateFormByDialogRender = (options) => {
+	const { appContext, config, signal, dialog, title, ...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();
@@ -407,41 +259,39 @@ var validateForm = (options) => {
 					cleanup();
 				}
 			};
-			if (debug) return createDebugWrapper({
+			return createDialogWrapper({
 				formRef,
 				formProps,
 				name: "MFormValidateWrapper",
-				title: "validateForm 调试",
+				title: title ?? "validateForm",
 				onConfirm: (setError) => doValidate((error) => {
 					setError(error);
 				}),
 				onCancel: () => {
-					reject(/* @__PURE__ */ new Error("validateForm canceled in debug mode."));
+					reject(/* @__PURE__ */ new Error("validateForm canceled."));
 					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
-					});
-				}
-			});
 		}
 	});
 };
+/**
+* 以命令式方式对一份「表单配置 + 值」做一次校验并取回表单值。
+*
+* 默认走无渲染实现（见 `@tmagic/form/headless`）。`dialog: true` 会把表单以弹层渲染出来。
+*/
+var submitForm = async (options) => {
+	if (options.dialog) return submitFormByDialogRender(options);
+	return submitForm$1(options);
+};
+/**
+* 以命令式方式对一份「表单配置 + 值」做一次静默校验。
+*
+* 默认走无渲染实现。`dialog: true` 的处理详见 `submitForm`。
+*/
+var validateForm = async (options) => {
+	if (options.dialog) return validateFormByDialogRender(options);
+	return validateForm$1(options);
+};
 //#endregion
 export { stripTabItemsLazy, submitForm, validateForm };

package/dist/es/utils/builtInFields.js

@@ -0,0 +1,49 @@
+import { expandFieldset, expandPanel, expandRow, expandStep, expandTab, expandTableGroupList } from "./collectFields.js";
+import { effect } from "../fields/DynamicField/effect.js";
+import { effect as effect$1 } from "../fields/CheckboxGroup/effect.js";
+import { effect as effect$2 } from "../fields/Date/effect.js";
+import { effect as effect$3 } from "../fields/DateTime/effect.js";
+import { effect as effect$4 } from "../fields/Display/effect.js";
+import { effect as effect$5 } from "../fields/NumberRange/effect.js";
+//#region packages/form/src/utils/builtInFields.ts
+/**
+* 内置字段的无渲染登记表（不含 Vue 组件）。
+*
+* 本模块只导出数据，不登记。调用方自行 `registerBuiltInFields(builtInFields)`，
+* 或 `app.use(MagicForm)`（install 里会登记叠上 Vue 组件后的表）。
+*/
+var builtInFields = {
+	text: {},
+	"img-upload": {},
+	number: {},
+	"number-range": { effect: effect$5 },
+	textarea: {},
+	hidden: {},
+	date: { effect: effect$2 },
+	datetime: { effect: effect$3 },
+	daterange: {},
+	timerange: {},
+	time: {},
+	checkbox: {},
+	switch: {},
+	"color-picker": {},
+	"checkbox-group": { effect: effect$1 },
+	"radio-group": {},
+	display: { effect: effect$4 },
+	link: {},
+	select: {},
+	cascader: {},
+	"dynamic-field": { effect },
+	component: {},
+	tab: { walk: expandTab },
+	row: { walk: expandRow },
+	"flex-layout": { walk: expandRow },
+	fieldset: { walk: expandFieldset },
+	panel: { walk: expandPanel },
+	step: { walk: expandStep },
+	table: { walk: expandTableGroupList },
+	"group-list": { walk: expandTableGroupList },
+	"table-group-list": { walk: expandTableGroupList }
+};
+//#endregion
+export { builtInFields };