@tmagic/form 1.8.0-manmanyu.8 → 1.8.0

package/dist/es/style.css

@@ -26,7 +26,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;
 }
 
@@ -226,6 +226,7 @@ a.magic-admin-link i {
 .m-container-fieldset.fieldset-in-card-fit > fieldset.m-fieldset legend {
   position: relative;
   top: 10px;
+  background-color: transparent;
 }
 .m-container-fieldset.fieldset-in-card-fit.fieldset-in-card-fit-last {
   padding-bottom: 0 !important;
@@ -268,6 +269,21 @@ fieldset.m-fieldset .m-form-tip {
   margin-left: 5px;
 }
 
+.m-fields-group-list {
+  --m-group-list-footer-padding-top: 12px;
+  --m-group-list-footer-padding-bottom: 16px;
+  --m-group-list-footer-button-height: 32px;
+  --m-group-list-footer-height: calc(
+    var(--m-group-list-footer-padding-top) +
+      var(--m-group-list-footer-button-height) +
+      var(--m-group-list-footer-padding-bottom)
+  );
+  --m-group-list-footer-bg: var(--el-bg-color, #fff);
+  --m-group-list-header-height: 65px;
+  --m-group-list-header-bg: #fff;
+  width: 100%;
+  min-width: 0;
+}
 .m-fields-group-list .m-fields-group-list-item.tmagic-design-card--flat:last-child {
   border: 0;
 }
@@ -283,21 +299,117 @@ fieldset.m-fieldset .m-form-tip {
   transform: rotate(90deg);
 }
 .m-fields-group-list .m-fields-group-list-item {
+  overflow: visible;
   border-bottom: 1px solid #ebeef5;
   margin-bottom: 7px;
 }
 .m-fields-group-list .m-fields-group-list-item:last-of-type {
   border-bottom: 0;
 }
+.m-fields-group-list .m-fields-group-list-item .el-card__body,
+.m-fields-group-list .m-fields-group-list-item .t-card__body {
+  overflow: visible;
+}
+.m-fields-group-list .m-fields-group-list-item .el-card__body > .m-container-row,
+.m-fields-group-list .m-fields-group-list-item .t-card__body > .m-container-row {
+  overflow: visible;
+}
+.m-fields-group-list .m-fields-group-list-item .el-card__body .tmagic-design-form-item,
+.m-fields-group-list .m-fields-group-list-item .t-card__body .tmagic-design-form-item {
+  margin-bottom: 16px;
+}
 .m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-header {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.m-fields-group-list .m-fields-group-list-footer {
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-title {
+  flex: 1;
+  min-width: 0;
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list-item-actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+}
+.m-fields-group-list > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: var(
+    --m-group-list-nested-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-footer-sticky > .m-fields-group-list-item {
+  --m-group-list-item-footer-bottom: calc(
+    var(--m-group-list-nested-footer-bottom, 0px) +
+      var(--m-group-list-footer-height)
+  );
+}
+.m-fields-group-list .m-fields-group-list-item .m-fields-group-list {
+  --m-group-list-nested-footer-bottom: var(
+    --m-group-list-item-footer-bottom,
+    0px
+  );
+}
+.m-fields-group-list.is-header-sticky {
+  --m-group-list-nested-sticky-top: var(--m-group-list-child-list-sticky-top);
+  --m-group-list-nested-header-z: var(--m-group-list-child-list-header-z);
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item {
+  --m-group-list-item-sticky-top: var(
+    --m-group-list-nested-sticky-top,
+    var(--m-group-list-header-sticky-top, 0px)
+  );
+  --m-group-list-item-header-z: var(--m-group-list-nested-header-z, 7);
+  --m-group-list-child-list-sticky-top: calc(
+    var(--m-group-list-item-sticky-top) + var(--m-group-list-header-height)
+  );
+  --m-group-list-child-list-header-z: calc(
+    var(--m-group-list-item-header-z) - 1
+  );
+}
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .el-card__header,
+.m-fields-group-list.is-header-sticky > .m-fields-group-list-item > .t-card__header {
+  position: sticky;
+  top: var(--m-group-list-item-sticky-top);
+  z-index: var(--m-group-list-item-header-z);
+  background-color: var(--m-group-list-header-bg, #fff);
+}
+.m-fields-group-list .el-table__empty-block {
+  width: 100%;
+  min-height: 0;
+}
+.m-fields-group-list .el-table__empty-text {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+.m-fields-group-list > .m-fields-group-list-footer {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
+  margin-bottom: 16px;
+}
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full {
+  position: sticky;
+  bottom: var(--m-group-list-nested-footer-bottom, 0px);
+  z-index: 7;
+  margin-bottom: 0;
+  padding: var(--m-group-list-footer-padding-top) 0 var(--m-group-list-footer-padding-bottom);
+  background-color: var(--m-group-list-footer-bg);
+}
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full > div {
+  justify-content: stretch;
+}
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .el-button,
+.m-fields-group-list > .m-fields-group-list-footer.is-sticky-full .tmagic-design-button {
+  width: 100%;
+  height: var(--m-group-list-footer-button-height);
+}
+
+/** 最外层的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 {
@@ -343,6 +455,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%;
 }
@@ -365,7 +481,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 {
@@ -417,7 +533,11 @@ fieldset.m-fieldset .m-form-tip {
 .m-form-box .el-box__header {
   margin: 0;
 }
+.m-form-box .m-box-body {
+  min-height: 0;
+}
 .m-form-box .dialog-footer {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;

package/dist/es/submitForm.js

@@ -1,93 +1,59 @@
+import { submitForm as submitForm$1, validateForm as validateForm$1 } from "./utils/submitHeadless.js";
 import Form_default from "./Form.js";
-import { createApp, defineComponent, h, nextTick, ref, watch } from "vue";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
 //#region packages/form/src/submitForm.ts
 /**
-* 以命令式方式调用 Form.vue 完成一次表单校验/提交。
+* `dialog: true` 时 submitForm / validateForm 的公共脚手架：
 *
-* 类似 ElMessage 的用法：传入 props（包含 `config`/`initValues` 等），函数内部会临时挂载
-* 一个不可见的 Form 组件实例，等待初始化完成后调用其 `submitForm` 方法，
-* 校验通过则 resolve 表单值，校验失败则 reject 错误信息，最后自动卸载实例。
+* 创建临时容器 → 挂载一个 wrapper 组件（内含 MForm）→ 提供统一的 cleanup / appContext 继承 →
+* 由 `createWrapper` 决定「何时调用 MForm 的哪个方法、如何 resolve/reject」。
 *
-* @example
-* ```ts
-* import { submitForm } from '@tmagic/form';
-*
-* 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,
-* });
-* ```
+* 挂载出来的表单等待人工点击，因此没有超时兜底，靠「确定」/「取消」/`signal` 结束。
 */
-var submitForm = (options) => {
-	const { native, appContext, timeout = 1e4, returnChangeRecords, ...formProps } = options;
+var mountFormInstance = (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 onAbort = null;
+		const instance = { app: null };
 		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();
-						const changeRecords = [...formRef.value.changeRecords ?? []];
-						const result = await formRef.value.submitForm(native);
-						resolve(returnChangeRecords ? {
-							values: result,
-							changeRecords
-						} : result);
-					} catch (err) {
-						reject(err);
-					} finally {
-						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;
+			if (signal && onAbort) {
+				signal.removeEventListener("abort", onAbort);
+				onAbort = null;
 			}
 			try {
-				app.unmount();
+				instance.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.`));
+		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 wrapperComponent = createWrapper({
+				formRef,
+				formProps,
+				cleanup,
+				resolve,
+				reject
+			});
+			const app = createApp(wrapperComponent);
+			instance.app = app;
+			if (appContext) Object.assign(app._context, appContext);
 			app.mount(container);
 		} catch (err) {
 			reject(err);
@@ -95,5 +61,237 @@ var submitForm = (options) => {
 		}
 	});
 };
+/**
+* 构造可见弹层 wrapper：以 fixed 遮罩居中渲染 MForm，提供「确定 / 取消」按钮与错误展示区。
+*
+* submitForm 与 validateForm 的弹层 UI 完全一致，仅「确定」时调用的实例方法、错误处理与取消文案不同，
+* 这些差异通过 `onConfirm` / `onCancel` 注入，弹层结构在此统一收口。
+*/
+var createDialogWrapper = (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"
+					}
+				}, "确定")])
+			])]);
+		}
+	});
+};
+/**
+* 可见弹层提交：把表单渲染在弹层里，点击「确定」才调用挂载实例的 `submitForm`。
+*
+* 用于需要用户填写/确认的场景；默认路径仍是无渲染校验（见 `submitForm` 的说明）。
+*/
+var submitFormByDialogRender = (options) => {
+	const { native, appContext, returnChangeRecords, signal, dialog, title, ...formProps } = options;
+	return mountFormInstance({
+		formProps,
+		appContext,
+		signal,
+		createWrapper: ({ formRef, formProps, cleanup, resolve, reject }) => {
+			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);
+				}
+			};
+			return createDialogWrapper({
+				formRef,
+				formProps,
+				name: "MFormSubmitWrapper",
+				title: title ?? "submitForm",
+				onConfirm: (setError) => doSubmit((err) => {
+					setError(err instanceof Error ? err.message : String(err));
+				}),
+				onCancel: () => {
+					reject(/* @__PURE__ */ new Error("submitForm canceled."));
+					cleanup();
+				}
+			});
+		}
+	});
+};
+/**
+* 深拷贝配置值，保留函数（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;
+};
+/**
+* 可见弹层校验：把表单渲染在弹层里，点击「确定」才调用挂载实例的 `validate`。
+*
+* 用于需要用户填写/确认的场景；默认路径仍是无渲染校验（见 `validateForm` 的说明）。
+*/
+var validateFormByDialogRender = (options) => {
+	const { appContext, config, signal, dialog, title, ...rest } = options;
+	return mountFormInstance({
+		formProps: {
+			...rest,
+			config: stripTabItemsLazy(config)
+		},
+		appContext,
+		signal,
+		createWrapper: ({ formRef, formProps, cleanup, resolve, reject }) => {
+			const doValidate = async (onInvalid) => {
+				try {
+					await nextTick();
+					const error = await formRef.value.validate();
+					if (error) onInvalid(error);
+					else {
+						resolve("");
+						cleanup();
+					}
+				} catch (err) {
+					reject(err);
+					cleanup();
+				}
+			};
+			return createDialogWrapper({
+				formRef,
+				formProps,
+				name: "MFormValidateWrapper",
+				title: title ?? "validateForm",
+				onConfirm: (setError) => doValidate((error) => {
+					setError(error);
+				}),
+				onCancel: () => {
+					reject(/* @__PURE__ */ new Error("validateForm canceled."));
+					cleanup();
+				}
+			});
+		}
+	});
+};
+/**
+* 以命令式方式对一份「表单配置 + 值」做一次校验并取回表单值。
+*
+* 默认走无渲染实现（见 `@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 { submitForm };
+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 };