@tmagic/form 1.8.0-manmanyu.9 → 1.8.1

package/dist/es/Form.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,15 @@
-import { FORM_DIFF_CONFIG_KEY } from "./schema.js";
-import { getConfig } from "./utils/config.js";
-import { initValue } from "./utils/form.js";
+import { FORM_CONTEXT_KEY, FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "./schema.js";
+import { createFormStateProxy, mergeFormContexts } from "./utils/formStateProxy.js";
+import { createFormStateBase, initValue } from "./utils/form.js";
+import { applyMountValueEffects } from "./utils/collectFields.js";
+import { formatValidateError, getTextByName } from "./utils/validateError.js";
 import Container_default from "./containers/Container.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, reactive, ref, renderList, renderSlot, shallowRef, toRaw, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
-import { cloneDeep, isEqual } from "lodash-es";
-import { M_THEME_KEY, TMagicForm, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, provide, reactive, ref, renderList, renderSlot, shallowRef, toRaw, unref, useTemplateRef, watch, withCtx } from "vue";
+import { cloneDeep, isEqualWith } from "lodash-es";
 import { setValueByKeyPath } from "@tmagic/utils";
+import { M_THEME_KEY, TMagicForm, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
 //#region packages/form/src/Form.vue?vue&type=script&setup=true&lang.ts
-var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MForm",
 	__name: "Form",
 	props: {
@@ -20,6 +22,11 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		},
 		parentValues: { default: () => ({}) },
 		labelWidth: { default: "200px" },
+		typeMatchValid: { type: Boolean },
+		validateOnInit: {
+			type: Boolean,
+			default: false
+		},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -35,7 +42,11 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		keyProp: { default: "__key" },
 		popperClass: {},
 		preventSubmitDefault: { type: Boolean },
-		extendState: {},
+		useFieldTextInError: {
+			type: Boolean,
+			default: true
+		},
+		context: {},
 		showDiff: {},
 		selfDiffFieldTypes: {},
 		theme: {}
@@ -50,12 +61,11 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		provide(FORM_TYPE_MATCH_VALID_KEY, computed(() => props.typeMatchValid));
 		const tMagicFormRef = useTemplateRef("tMagicForm");
 		const initialized = ref(false);
 		const values = ref({});
 		const lastValuesProcessed = ref({});
-		const fields = /* @__PURE__ */ new Map();
-		const requestFuc = getConfig("request");
 		/**
 		* 当前表单生效的主题名称：
 		* - 优先用本组件自己的 `props.theme`；
@@ -85,18 +95,14 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		* 2. `values` / `lastValuesProcessed` 是 ref，Vue 的 `reactive` 会自动解包，因此每次
 		*    访问 `formState.values` / `formState.lastValuesProcessed` 也都是当前 ref 值。
 		*
-		* 3. `extendState` 注入的字段在下方的 `watchEffect` 中合并到 `formState`：
-		*    - data 描述符（普通字段）通过 `formState[key] = value` 写入，走 reactive proxy 的
-		*      set，触发依赖通知；`extendState` 同步段读到的响应式数据变化时会自动重跑，
-		*      把最新值刷进 formState。
-		*    - accessor 描述符（`{ get stage() { return ... } }`）按原样写入，调用方可以控制
-		*      读时求值，每次读取都会重新执行 getter。
+		* 3. 宿主业务上下文不再 merge 进 coreState，而是单独放在 `contextRef` 上，由读穿
+		*    Proxy 在 miss 时落到 context。核心字段结构性优先，`mForm.xxx` 永久兼容旧读法。
 		*
 		* 4. `popperClass` 会自动拼接 `themeClass`：调用方传入的 `popperClass` + 当前主题
 		*    修饰类（含祖先 `<MEditor>` provide 的主题）。这样所有透传到 Element Plus 弹层
 		*    `popper-class` 的字段（Select / DateTime / Cascader 等）能自带主题作用域。
 		*/
-		const formState = reactive({
+		const coreState = reactive({
 			get keyProp() {
 				return props.keyProp;
 			},
@@ -125,68 +131,27 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			values,
 			lastValuesProcessed,
 			$emit: emit,
-			fields,
-			setField: (prop, field) => fields.set(prop, field),
-			getField: (prop) => fields.get(prop),
-			deleteField: (prop) => fields.delete(prop),
-			$messageBox: tMagicMessageBox,
-			$message: tMagicMessage,
-			post: (options) => {
-				if (requestFuc) return requestFuc({
-					method: "POST",
-					...options
-				});
-			}
+			...createFormStateBase({
+				$message: tMagicMessage,
+				$messageBox: tMagicMessageBox
+			})
 		});
+		const ancestorContext = inject(FORM_CONTEXT_KEY, void 0);
 		/**
-		* `extendState` 的同步段（直到第一个 `await` 之前）所访问的任何响应式数据，
-		* 都会被 `watchEffect` 自动跟踪。这样可以兼容历史用法 ——
-		*
-		*   extendState: (formState) => ({
-		*     username: store.username,   // 同步读 store，会被跟踪
-		*     env: store.env,
-		*   })
-		*
-		* 当 `store.username` 变化时，整个 effect 重跑，新值会被刷进 `formState`。
-		*
-		* prop 派生字段（initValues / config / ...）已经在上方用 getter 定义，
-		* 这里不再重复同步；因此 `props.initValues` 这类高频变化也不会再触发
-		* `extendState` 重跑（旧版的性能问题修复点）。
-		*
-		* 实现细节：
-		* - data 描述符：通过 `formState[key] = value` 走 reactive proxy 的 set，
-		*   触发依赖通知；与旧版「逐项赋值」语义完全等价。
-		* - accessor 描述符（`{ get stage() {...} }`）按原样写入 formState，调用方
-		*   可以自行控制读时求值；强制 `configurable: true` 以便下一次重跑可再 define。
+		* 宿主业务上下文：`props.context` 覆盖祖先注入的同名字段。
+		* 嵌套表单（Link / FormBox / FormDialog）通过下面的 provide 自动继承。
 		*/
-		watchEffect(async (onCleanup) => {
-			const { extendState } = props;
-			if (typeof extendState !== "function") return;
-			let stale = false;
-			onCleanup(() => {
-				stale = true;
-			});
-			let state = {};
-			try {
-				state = await extendState(formState) || {};
-			} catch (e) {
-				console.error("[MForm] extendState failed:", e);
-				return;
-			}
-			if (stale) return;
-			for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) if ("value" in descriptor) formState[key] = state[key];
-			else {
-				descriptor.configurable = true;
-				Object.defineProperty(formState, key, descriptor);
-			}
-		});
+		const contextRef = computed(() => mergeFormContexts(ancestorContext?.value, props.context));
+		const formState = createFormStateProxy(coreState, () => contextRef.value);
 		provide("mForm", formState);
+		provide(FORM_CONTEXT_KEY, contextRef);
 		/**
 		* 把生效主题（自身或祖先）再 provide 出去，供 form 子树内含 `Teleport` 的组件
 		* （如 `TMagicPopover`）在传送目标上挂 `m-theme--<theme>` 类。
 		* 详见 `@tmagic/design/theme.ts`。
 		*/
 		provide(M_THEME_KEY, effectiveTheme);
+		provide("formInline", props.inline);
 		provide(FORM_DIFF_CONFIG_KEY, {
 			get showDiff() {
 				return props.showDiff;
@@ -196,21 +161,35 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			}
 		});
 		const changeRecords = shallowRef([]);
-		watch([() => props.config, () => props.initValues], ([config], [preConfig]) => {
+		/**
+		* 两份配置的结构是否一致；函数一律视为相等。
+		*
+		* 宿主（如编辑器属性面板）往往在每次节点更新后整份重新生成配置，其中的
+		* `display` / `options` / `onChange` 都是新闭包，深比较必然判不等。若据此把 `initialized`
+		* 置 false，整棵表单会卸载重挂，滚动位置、展开态、输入焦点全部丢失。
+		* 配置是响应式 prop，闭包换了照样生效，只有结构变化（增删字段、换组件类型）才需要重挂。
+		*/
+		const isSameConfigShape = (config, preConfig) => isEqualWith(config, preConfig, (a, b) => typeof a === "function" && typeof b === "function" ? true : void 0);
+		watch([() => props.config, () => props.initValues], async ([config], [preConfig]) => {
 			changeRecords.value = [];
-			if (!isEqual(toRaw(config), toRaw(preConfig))) initialized.value = false;
+			if (!isSameConfigShape(toRaw(config), toRaw(preConfig))) initialized.value = false;
 			initValue(formState, {
 				initValues: props.initValues,
 				config: props.config
 			}).then((value) => {
 				values.value = value;
+				applyMountValueEffects(formState, props.config, values.value);
 				initialized.value = !props.isCompare;
+				if (props.validateOnInit) nextTick(() => {
+					tMagicFormRef.value?.validate();
+				});
 			});
 			if (props.isCompare) initValue(formState, {
 				initValues: props.lastValues,
 				config: props.config
 			}).then((value) => {
 				lastValuesProcessed.value = value;
+				applyMountValueEffects(formState, props.config, lastValuesProcessed.value);
 				initialized.value = true;
 			});
 		}, { immediate: true });
@@ -228,34 +207,17 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		const submitHandler = (e) => {
 			if (props.preventSubmitDefault) e.preventDefault();
 		};
+		const getTextByName$1 = (name, config = props.config) => getTextByName(name, config);
 		/**
-		* 通过 name 从 config 中查找对应的 text
-		* @param name - 字段名，支持点分隔的路径格式，如 'a.b.c'
-		* @param config - 表单配置数组
-		* @returns 找到的 text 值，如果未找到则返回 undefined
+		* 将校验返回的 invalidFields 汇总为可读的错误文案（多条以 `<br>` 拼接）。
+		*
+		* 实现收口在 `utils/validateError`，供渲染式校验（本组件的 `submitForm` / `validate`）与
+		* 无渲染校验（`validateValues`）共用，保证两条链路产出的错误文案格式完全一致。
 		*/
-		const getTextByName = (name, config = props.config) => {
-			if (!name || !Array.isArray(config)) return void 0;
-			const nameParts = name.split(".");
-			const findInConfig = (configs, parts) => {
-				if (parts.length === 0) return void 0;
-				const [currentPart, ...remainingParts] = parts;
-				for (const item of configs) {
-					if (item.name === currentPart) {
-						if (remainingParts.length === 0) return typeof item.text === "string" ? item.text : void 0;
-						if ("items" in item && Array.isArray(item.items)) {
-							const result = findInConfig(item.items, remainingParts);
-							if (result !== void 0) return result;
-						}
-					}
-					if ("items" in item && Array.isArray(item.items)) {
-						const result = findInConfig(item.items, parts);
-						if (result !== void 0) return result;
-					}
-				}
-			};
-			return findInConfig(config, nameParts);
-		};
+		const formatValidateError$1 = (invalidFields) => formatValidateError(invalidFields, {
+			config: props.config,
+			useFieldTextInError: props.useFieldTextInError
+		});
 		__expose({
 			values,
 			lastValuesProcessed,
@@ -275,18 +237,35 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 					return native ? values.value : cloneDeep(toRaw(values.value));
 				} catch (invalidFields) {
 					emit("error", invalidFields);
-					const error = [];
-					Object.entries(invalidFields).forEach(([prop, ValidateError]) => {
-						ValidateError.forEach(({ field, message }) => {
-							const name = field || prop;
-							const text = getTextByName(name, props.config) || name;
-							error.push(`${text} -> ${message}`);
-						});
-					});
-					throw new Error(error.join("<br>"));
+					throw new Error(formatValidateError$1(invalidFields));
+				}
+			},
+			/**
+			* 校验：对表单当前值执行校验，返回汇总后的错误文案。
+			*
+			* 与 `submitForm` 的区别：
+			* - 校验失败时不抛异常、不触发 `error` 事件，而是以返回值形式给出错误文案；
+			* - 不重置 `changeRecords`，不改变提交语义，仅用于「探测」当前配置是否合法。
+			*
+			* 注意：本方法只改变「校验结果的返回方式」，并不负责「不污染页面表单状态」——
+			* 若需对一份独立的「配置 + 值」做完全不影响页面上已渲染表单的校验，请使用 `validateForm`
+			* （内部会新建一个隐藏的 MForm 实例，通过 `initValues` 传入待校验值，用完即卸载）。
+			*
+			* 典型用途：作为 `validateForm` 内部复用的校验实现；也可在已渲染的表单实例上主动调用，
+			* 根据返回的错误文案自行决定后续处理（如记录节点错误状态）。
+			*
+			* @returns 校验通过返回空字符串 `''`，否则返回以 `<br>` 拼接的错误文案。
+			*/
+			validate: async () => {
+				try {
+					const result = await tMagicFormRef.value?.validate();
+					if (result !== true) throw result;
+					return "";
+				} catch (invalidFields) {
+					return formatValidateError$1(invalidFields);
 				}
 			},
-			getTextByName
+			getTextByName: getTextByName$1
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(TMagicForm), {
@@ -312,6 +291,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 						"last-values": lastValuesProcessed.value,
 						"is-compare": __props.isCompare,
 						"label-width": item.labelWidth || __props.labelWidth,
+						"label-position": item.labelPosition || __props.labelPosition,
 						"step-active": __props.stepActive,
 						size: __props.size,
 						onChange: changeHandler
@@ -326,6 +306,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 						"last-values",
 						"is-compare",
 						"label-width",
+						"label-position",
 						"step-active",
 						"size"
 					]);

package/dist/es/FormBox.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { computed, createElementBlock, createElementVNode, createTextVNode, crea
 import { TMagicButton, TMagicScrollbar } from "@tmagic/design";
 //#region packages/form/src/FormBox.vue?vue&type=script&setup=true&lang.ts
 var footerHeight = 60;
-var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FormBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormBox",
 	__name: "FormBox",
 	props: {
@@ -13,13 +13,22 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		width: {},
 		height: {},
 		labelWidth: {},
+		typeMatchValid: { type: Boolean },
+		validateOnInit: {
+			type: Boolean,
+			default: false
+		},
 		disabled: { type: Boolean },
 		size: {},
 		confirmText: { default: "确定" },
 		inline: { type: Boolean },
 		labelPosition: {},
 		preventSubmitDefault: { type: Boolean },
-		extendState: {}
+		useFieldTextInError: {
+			type: Boolean,
+			default: true
+		},
+		context: {}
 	},
 	emits: [
 		"change",
@@ -45,7 +54,8 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		const submitHandler = async () => {
 			try {
 				const changeRecords = form.value?.changeRecords;
-				emit("submit", await form.value?.submitForm(), { changeRecords });
+				const values = await form.value?.submitForm();
+				emit("submit", values, { changeRecords });
 			} catch (e) {
 				emit("error", e);
 			}
@@ -81,7 +91,10 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
-					"extend-state": __props.extendState,
+					"use-field-text-in-error": __props.useFieldTextInError,
+					context: __props.context,
+					"type-match-valid": __props.typeMatchValid,
+					"validate-on-init": __props.validateOnInit,
 					onChange: changeHandler
 				}, null, 8, [
 					"size",
@@ -93,7 +106,10 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					"label-position",
 					"inline",
 					"prevent-submit-default",
-					"extend-state"
+					"use-field-text-in-error",
+					"context",
+					"type-match-valid",
+					"validate-on-init"
 				]), renderSlot(_ctx.$slots, "default")]),
 				_: 3
 			})], 4), createElementVNode("div", {

package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { computed, createBlock, createCommentVNode, createElementBlock, createEl
 import { M_THEME_KEY, TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from "@tmagic/design";
 //#region packages/form/src/FormDialog.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { style: { "min-height": "1px" } };
-var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormDialog",
 	__name: "FormDialog",
 	props: {
@@ -12,6 +12,11 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		parentValues: {},
 		width: {},
 		labelWidth: {},
+		typeMatchValid: { type: Boolean },
+		validateOnInit: {
+			type: Boolean,
+			default: false
+		},
 		fullscreen: { type: Boolean },
 		disabled: { type: Boolean },
 		title: {},
@@ -41,7 +46,11 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			type: Boolean,
 			default: true
 		},
-		extendState: {},
+		useFieldTextInError: {
+			type: Boolean,
+			default: true
+		},
+		context: {},
 		theme: {}
 	},
 	emits: [
@@ -78,7 +87,8 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const save = async () => {
 			try {
 				const changeRecords = [...form.value?.changeRecords || []];
-				emit("submit", await form.value?.submitForm(), { changeRecords });
+				const values = await form.value?.submitForm();
+				emit("submit", values, { changeRecords });
 			} catch (e) {
 				emit("error", e);
 			}
@@ -195,7 +205,10 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
-					"extend-state": __props.extendState,
+					"use-field-text-in-error": __props.useFieldTextInError,
+					"type-match-valid": __props.typeMatchValid,
+					"validate-on-init": __props.validateOnInit,
+					context: __props.context,
 					theme: effectiveTheme.value,
 					onChange: changeHandler
 				}, null, 8, [
@@ -209,7 +222,10 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position",
 					"inline",
 					"prevent-submit-default",
-					"extend-state",
+					"use-field-text-in-error",
+					"type-match-valid",
+					"validate-on-init",
+					"context",
 					"theme"
 				]), renderSlot(_ctx.$slots, "default")], 4)) : createCommentVNode("v-if", true)]),
 				_: 3

package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js

@@ -3,8 +3,8 @@ import { computed, createBlock, createCommentVNode, createElementBlock, createEl
 import { M_THEME_KEY, TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from "@tmagic/design";
 //#region packages/form/src/FormDrawer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { style: { "min-height": "1px" } };
-var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "MFormDialog",
+var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MFormDrawer",
 	__name: "FormDrawer",
 	props: {
 		config: { default: () => [] },
@@ -12,6 +12,11 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		parentValues: {},
 		width: {},
 		labelWidth: {},
+		typeMatchValid: { type: Boolean },
+		validateOnInit: {
+			type: Boolean,
+			default: false
+		},
 		disabled: { type: Boolean },
 		closeOnPressEscape: {
 			type: Boolean,
@@ -24,8 +29,12 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		inline: { type: Boolean },
 		labelPosition: {},
 		preventSubmitDefault: { type: Boolean },
+		useFieldTextInError: {
+			type: Boolean,
+			default: true
+		},
 		beforeClose: {},
-		extendState: {},
+		context: {},
 		theme: {}
 	},
 	emits: [
@@ -46,7 +55,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const drawer = ref();
 		const form = ref();
 		const drawerBody = ref();
-		const visible = ref(false);
+		const dialogVisible = ref(false);
 		const saveFetch = ref(false);
 		const bodyHeight = ref(0);
 		watchEffect(() => {
@@ -55,7 +64,8 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const submitHandler = async () => {
 			try {
 				const changeRecords = form.value?.changeRecords;
-				emit("submit", await form.value?.submitForm(), { changeRecords });
+				const values = await form.value?.submitForm();
+				emit("submit", values, { changeRecords });
 			} catch (e) {
 				emit("error", e);
 			}
@@ -76,21 +86,39 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			emit("closed");
 		};
 		const show = () => {
-			visible.value = true;
+			dialogVisible.value = true;
 		};
 		const hide = () => {
-			visible.value = false;
+			dialogVisible.value = false;
+		};
+		const close = () => {
+			dialogVisible.value = false;
+		};
+		const cancel = () => {
+			hide();
 		};
 		/** 用于关闭 Drawer, 该方法会调用传入的 before-close 方法 */
 		const handleClose = () => {
 			drawer.value?.handleClose();
 		};
+		const save = async () => {
+			try {
+				const changeRecords = [...form.value?.changeRecords || []];
+				const values = await form.value?.submitForm();
+				emit("submit", values, { changeRecords });
+			} catch (e) {
+				emit("error", e);
+			}
+		};
 		__expose({
 			form,
 			saveFetch,
 			bodyHeight,
+			close,
 			show,
 			hide,
+			save,
+			cancel,
 			handleClose
 		});
 		return (_ctx, _cache) => {
@@ -98,8 +126,8 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				class: normalizeClass(["m-form-drawer", effectiveTheme.value ? `m-theme--${effectiveTheme.value}` : ""]),
 				ref_key: "drawer",
 				ref: drawer,
-				modelValue: visible.value,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+				modelValue: dialogVisible.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => dialogVisible.value = $event),
 				title: __props.title,
 				"close-on-press-escape": __props.closeOnPressEscape,
 				"append-to-body": true,
@@ -137,7 +165,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					})]),
 					_: 3
 				})]),
-				default: withCtx(() => [visible.value ? (openBlock(), createElementBlock("div", {
+				default: withCtx(() => [dialogVisible.value ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					ref_key: "drawerBody",
 					ref: drawerBody,
@@ -154,7 +182,10 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
-					"extend-state": __props.extendState,
+					"use-field-text-in-error": __props.useFieldTextInError,
+					"type-match-valid": __props.typeMatchValid,
+					"validate-on-init": __props.validateOnInit,
+					context: __props.context,
 					theme: effectiveTheme.value,
 					onChange: changeHandler
 				}, null, 8, [
@@ -167,7 +198,10 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position",
 					"inline",
 					"prevent-submit-default",
-					"extend-state",
+					"use-field-text-in-error",
+					"type-match-valid",
+					"validate-on-init",
+					"context",
 					"theme"
 				]), renderSlot(_ctx.$slots, "default")], 512)) : createCommentVNode("v-if", true)]),
 				_: 3

package/dist/es/containers/Col.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import Container_default from "./Container.js";
 import { computed, createBlock, createVNode, defineComponent, inject, openBlock, unref, vShow, withCtx, withDirectives } from "vue";
 import { TMagicCol } from "@tmagic/design";
 //#region packages/form/src/containers/Col.vue?vue&type=script&setup=true&lang.ts
-var Col_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormCol",
 	__name: "Col",
 	props: {
@@ -12,6 +12,7 @@ var Col_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 		isCompare: { type: Boolean },
 		config: {},
 		labelWidth: {},
+		labelPosition: {},
 		expandMore: { type: Boolean },
 		span: {},
 		size: {},
@@ -36,11 +37,13 @@ var Col_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 					config: __props.config,
 					prop: __props.prop,
 					"label-width": __props.config.labelWidth || __props.labelWidth,
+					"label-position": __props.config.labelPosition || __props.labelPosition,
 					"expand-more": __props.expandMore,
 					size: __props.size,
 					disabled: __props.disabled,
 					onChange: changeHandler,
-					onAddDiffCount
+					onAddDiffCount,
+					"is-in-row": true
 				}, null, 8, [
 					"model",
 					"lastValues",
@@ -48,6 +51,7 @@ var Col_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 					"config",
 					"prop",
 					"label-width",
+					"label-position",
 					"expand-more",
 					"size",
 					"disabled"