@tmagic/form 1.8.0-beta.24 → 1.8.0-beta.26

package/dist/es/Form.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,13 @@
-import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "./schema.js";
-import { applyExtendState, initValue } from "./utils/form.js";
-import { getConfig } from "./utils/config.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, nextTick, 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({
 	name: "MForm",
@@ -44,7 +46,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			type: Boolean,
 			default: true
 		},
-		extendState: {},
+		context: {},
 		showDiff: {},
 		selfDiffFieldTypes: {},
 		theme: {}
@@ -64,8 +66,6 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		const initialized = ref(false);
 		const values = ref({});
 		const lastValuesProcessed = ref({});
-		const fields = /* @__PURE__ */ new Map();
-		const requestFuc = getConfig("request");
 		/**
 		* 当前表单生效的主题名称：
 		* - 优先用本组件自己的 `props.theme`；
@@ -95,18 +95,14 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		* 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;
 			},
@@ -135,68 +131,20 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			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);
 		/**
-		* formState 的内置 key 快照（keyProp / values / $emit / fields / post 等）。
-		*
-		* 在 `extendState` 首次合并前捕获，`applyExtendState` 会据此禁止 `extendState`
-		* 覆盖这些已有字段（只能新增字段），避免表单核心状态被外部意外改写。
-		*
-		* 之所以在此处（effect 之外）捕获而不是在 `applyExtendState` 内动态取：
-		* `watchEffect` 会在依赖变化时重跑，若动态取，`extendState` 自己新增的字段在第二次
-		* 合并时也会被当成「已有 key」而拒绝刷新；这里只锁定内置字段即可规避该问题。
+		* 宿主业务上下文：`props.context` 覆盖祖先注入的同名字段。
+		* 嵌套表单（Link / FormBox / FormDialog）通过下面的 provide 自动继承。
 		*/
-		const reservedStateKeys = new Set(Reflect.ownKeys(formState));
-		/**
-		* `extendState` 的同步段（直到第一个 `await` 之前）所访问的任何响应式数据，
-		* 都会被 `watchEffect` 自动跟踪。这样可以兼容历史用法 ——
-		*
-		*   extendState: (formState) => ({
-		*     username: store.username,   // 同步读 store，会被跟踪
-		*     env: store.env,
-		*   })
-		*
-		* 当 `store.username` 变化时，整个 effect 重跑，新值会被刷进 `formState`。
-		*
-		* prop 派生字段（initValues / config / ...）已经在上方用 getter 定义，
-		* 这里不再重复同步；因此 `props.initValues` 这类高频变化也不会再触发
-		* `extendState` 重跑（旧版的性能问题修复点）。
-		*
-		* 实现细节：合并逻辑统一收口在 `applyExtendState`（utils/form）——
-		* data 描述符走 reactive proxy 的 set 触发依赖通知（与旧版「逐项赋值」语义等价），
-		* accessor 描述符按原样 defineProperty 支持读时求值；
-		* props 派生的只读 getter 字段（keyProp 等）以普通字段形式返回时会被跳过并告警。
-		*/
-		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;
-			applyExtendState(formState, state, reservedStateKeys);
-		});
+		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>` 类。
@@ -213,14 +161,24 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			}
 		});
 		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();
@@ -231,6 +189,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				config: props.config
 			}).then((value) => {
 				lastValuesProcessed.value = value;
+				applyMountValueEffects(formState, props.config, lastValuesProcessed.value);
 				initialized.value = true;
 			});
 		}, { immediate: true });
@@ -248,51 +207,17 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		const submitHandler = (e) => {
 			if (props.preventSubmitDefault) e.preventDefault();
 		};
-		/**
-		* 通过 name 从 config 中查找对应的 text
-		* @param name - 字段名，支持点分隔的路径格式，如 'a.b.c'
-		* @param config - 表单配置数组
-		* @returns 找到的 text 值，如果未找到则返回 undefined
-		*/
-		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 getTextByName$1 = (name, config = props.config) => getTextByName(name, config);
 		/**
 		* 将校验返回的 invalidFields 汇总为可读的错误文案（多条以 `<br>` 拼接）。
 		*
-		* 抽离为独立方法，供 `submitForm`（提交校验）与 `validate`（返回错误文案的校验）复用，
-		* 保证两种校验入口产出的错误文案格式完全一致。
+		* 实现收口在 `utils/validateError`，供渲染式校验（本组件的 `submitForm` / `validate`）与
+		* 无渲染校验（`validateValues`）共用，保证两条链路产出的错误文案格式完全一致。
 		*/
-		const formatValidateError = (invalidFields) => {
-			const error = [];
-			Object.entries(invalidFields).forEach(([prop, validateError]) => {
-				validateError.forEach(({ field, message }) => {
-					const name = field || prop;
-					const text = (props.useFieldTextInError ? getTextByName(name, props.config) : void 0) || name;
-					error.push(`${text} -> ${message}`);
-				});
-			});
-			return error.join("<br>");
-		};
+		const formatValidateError$1 = (invalidFields) => formatValidateError(invalidFields, {
+			config: props.config,
+			useFieldTextInError: props.useFieldTextInError
+		});
 		__expose({
 			values,
 			lastValuesProcessed,
@@ -312,7 +237,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 					return native ? values.value : cloneDeep(toRaw(values.value));
 				} catch (invalidFields) {
 					emit("error", invalidFields);
-					throw new Error(formatValidateError(invalidFields));
+					throw new Error(formatValidateError$1(invalidFields));
 				}
 			},
 			/**
@@ -337,10 +262,10 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 					if (result !== true) throw result;
 					return "";
 				} catch (invalidFields) {
-					return formatValidateError(invalidFields);
+					return formatValidateError$1(invalidFields);
 				}
 			},
-			getTextByName
+			getTextByName: getTextByName$1
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(TMagicForm), {
@@ -366,6 +291,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 						"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
@@ -380,6 +306,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 						"last-values",
 						"is-compare",
 						"label-width",
+						"label-position",
 						"step-active",
 						"size"
 					]);

package/dist/es/FormBox.vue_vue_type_script_setup_true_lang.js

@@ -28,7 +28,7 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			type: Boolean,
 			default: true
 		},
-		extendState: {}
+		context: {}
 	},
 	emits: [
 		"change",
@@ -92,7 +92,7 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
 					"use-field-text-in-error": __props.useFieldTextInError,
-					"extend-state": __props.extendState,
+					context: __props.context,
 					"type-match-valid": __props.typeMatchValid,
 					"validate-on-init": __props.validateOnInit,
 					onChange: changeHandler
@@ -107,7 +107,7 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					"inline",
 					"prevent-submit-default",
 					"use-field-text-in-error",
-					"extend-state",
+					"context",
 					"type-match-valid",
 					"validate-on-init"
 				]), renderSlot(_ctx.$slots, "default")]),

package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js

@@ -50,7 +50,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			type: Boolean,
 			default: true
 		},
-		extendState: {},
+		context: {},
 		theme: {}
 	},
 	emits: [
@@ -208,7 +208,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					"use-field-text-in-error": __props.useFieldTextInError,
 					"type-match-valid": __props.typeMatchValid,
 					"validate-on-init": __props.validateOnInit,
-					"extend-state": __props.extendState,
+					context: __props.context,
 					theme: effectiveTheme.value,
 					onChange: changeHandler
 				}, null, 8, [
@@ -225,7 +225,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					"use-field-text-in-error",
 					"type-match-valid",
 					"validate-on-init",
-					"extend-state",
+					"context",
 					"theme"
 				]), renderSlot(_ctx.$slots, "default")], 4)) : createCommentVNode("v-if", true)]),
 				_: 3

package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js

@@ -34,7 +34,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			default: true
 		},
 		beforeClose: {},
-		extendState: {},
+		context: {},
 		theme: {}
 	},
 	emits: [
@@ -185,7 +185,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					"use-field-text-in-error": __props.useFieldTextInError,
 					"type-match-valid": __props.typeMatchValid,
 					"validate-on-init": __props.validateOnInit,
-					"extend-state": __props.extendState,
+					context: __props.context,
 					theme: effectiveTheme.value,
 					onChange: changeHandler
 				}, null, 8, [
@@ -201,7 +201,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					"use-field-text-in-error",
 					"type-match-valid",
 					"validate-on-init",
-					"extend-state",
+					"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

@@ -12,6 +12,7 @@ var Col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
 		isCompare: { type: Boolean },
 		config: {},
 		labelWidth: {},
+		labelPosition: {},
 		expandMore: { type: Boolean },
 		span: {},
 		size: {},
@@ -36,6 +37,7 @@ var Col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
 					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,
@@ -49,6 +51,7 @@ var Col_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompon
 					"config",
 					"prop",
 					"label-width",
+					"label-position",
 					"expand-more",
 					"size",
 					"disabled"

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

@@ -1,13 +1,12 @@
-import { FORM_DIFF_CONFIG_KEY, FORM_SILENT_MODE_KEY, FORM_TYPE_MATCH_VALID_KEY } from "../schema.js";
-import { createObjectProp, display, filterFunction, getRules } from "../utils/form.js";
+import { FORM_DIFF_CONFIG_KEY, FORM_TYPE_MATCH_VALID_KEY } from "../schema.js";
+import { createObjectProp, display, filterFunction, getItemProp, getRules, isValidName, resolveItemType } from "../utils/form.js";
 import Hidden_default from "../fields/Hidden.js";
-import { getField } from "../utils/config.js";
-import { getSilentLeafFieldTypes } from "../utils/silentLeafFieldTypes.js";
+import { getField } from "../utils/registerField.js";
 import FormLabel_default from "./FormLabel.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, readonly, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, watch, watchEffect, withCtx } from "vue";
 import { isEqual } from "lodash-es";
-import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from "@tmagic/design";
 import { getValueByKeyPath } from "@tmagic/utils";
+import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from "@tmagic/design";
 import { ArrowDown, ArrowUp, WarningFilled } from "@element-plus/icons-vue";
 //#region packages/form/src/containers/Container.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-tmagic-id", "data-tmagic-form-item-prop"];
@@ -36,6 +35,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		prop: { default: "" },
 		disabled: { type: Boolean },
 		labelWidth: {},
+		labelPosition: {},
 		expandMore: {
 			type: Boolean,
 			default: false
@@ -71,20 +71,8 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			return !isEqual(curValue, lastValue);
 		});
 		const items = computed(() => props.config.items);
-		const itemProp = computed(() => {
-			let n = "";
-			if (name.value) n = name.value;
-			else return props.prop;
-			if (typeof props.prop !== "undefined" && props.prop !== "") return `${props.prop}.${n}`;
-			return `${n}`;
-		});
-		const type = computed(() => {
-			let type = "type" in props.config ? props.config.type : "";
-			type = type && filterFunction(mForm, type, props);
-			if (type === "form") return "";
-			if (type === "container") return "";
-			return type?.replace(/([A-Z])/g, "-$1").toLowerCase() || (items.value ? "" : "text");
-		});
+		const itemProp = computed(() => getItemProp(props.prop, name.value));
+		const type = computed(() => resolveItemType(mForm, props.config, props));
 		const tagName = computed(() => {
 			if (type.value === "component" && props.config.component) return props.config.component;
 			return getField(type.value || "container") || `m-${items.value ? "form" : "fields"}-${type.value}`;
@@ -118,8 +106,6 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			return new Set(DEFAULT_SELF_DIFF_FIELD_TYPES);
 		});
 		const isSelfDiffField = computed(() => effectiveSelfDiffFieldTypes.value.has(type.value));
-		const silentMode = inject(FORM_SILENT_MODE_KEY, false);
-		const shouldRenderLeafField = computed(() => !silentMode || !getSilentLeafFieldTypes().has(type.value));
 		const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
 		const text = computed(() => filterFunction(mForm, props.config.text, props));
 		const tooltip = computed(() => {
@@ -151,12 +137,13 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const formItemProps = computed(() => ({
 			prop: itemProp.value,
 			labelWidth: itemLabelWidth.value,
-			labelPosition: props.config.labelPosition,
+			labelPosition: itemLabelPosition.value,
 			rules: rule.value,
 			extra: filterFunction(mForm, props.config.extra, props),
 			extraTips: props.config.extraTips
 		}));
 		const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);
+		const itemLabelPosition = computed(() => props.config.labelPosition ?? props.labelPosition);
 		watchEffect(() => {
 			expand.value = props.expandMore;
 		});
@@ -185,13 +172,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		};
 		const onAddDiffCount = () => emit("addDiffCount");
 		const hasModifyKey = (eventDataItem) => typeof eventDataItem?.modifyKey !== "undefined" && eventDataItem.modifyKey !== "";
-		const isValidName = () => {
-			const valueType = typeof name.value;
-			if (valueType !== "string" && valueType !== "symbol" && valueType !== "number") return false;
-			if (name.value === "") return false;
-			if (typeof name.value === "number") return name.value >= 0;
-			return true;
-		};
+		const isValidName$1 = () => isValidName(name.value);
 		const createModelProxy = (target, setModelFn, pathPrefix = "") => {
 			return new Proxy(target, {
 				get: (obj, key) => {
@@ -283,6 +264,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				"step-active": __props.stepActive,
 				"expand-more": expand.value,
 				"label-width": itemLabelWidth.value,
+				"label-position": itemLabelPosition.value,
 				style: __props.config.fieldStyle,
 				onChange: onChangeHandler,
 				onAddDiffCount
@@ -293,9 +275,10 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				"step-active",
 				"expand-more",
 				"label-width",
+				"label-position",
 				"style"
 			])) : type.value && display$1.value && !showDiff.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, { class: { "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value } }), {
-				label: withCtx(() => [shouldRenderLeafField.value ? renderSlot(_ctx.$slots, "label", {
+				label: withCtx(() => [renderSlot(_ctx.$slots, "label", {
 					config: __props.config,
 					type: type.value,
 					text: text.value,
@@ -313,8 +296,8 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					"use-label",
 					"label-title",
 					"text"
-				]), __props.config.titleExtra && __props.config.labelPosition === "top" ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.config.titleExtra), 1)) : createCommentVNode("v-if", true)], void 0, 0) : createCommentVNode("v-if", true)]),
-				default: withCtx(() => [shouldRenderLeafField.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
+				]), __props.config.titleExtra && itemLabelPosition.value === "top" ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.config.titleExtra), 1)) : createCommentVNode("v-if", true)])]),
+				default: withCtx(() => [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
 					key: 0,
 					placement: tooltip.value.placement
 				}, {
@@ -341,9 +324,9 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					"model",
 					"last-values",
 					"is-compare"
-				]))], 64)) : createCommentVNode("v-if", true)]),
+				]))]),
 				_: 3
-			}, 16, ["class"]), shouldRenderLeafField.value && __props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? (openBlock(), createBlock(unref(TMagicTooltip), {
+			}, 16, ["class"]), __props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? (openBlock(), createBlock(unref(TMagicTooltip), {
 				key: 0,
 				placement: "top"
 			}, {
@@ -363,7 +346,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					"tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value,
 					"self-diff": true
 				} }), {
-					label: withCtx(() => [shouldRenderLeafField.value ? renderSlot(_ctx.$slots, "label", {
+					label: withCtx(() => [renderSlot(_ctx.$slots, "label", {
 						config: __props.config,
 						type: type.value,
 						text: text.value,
@@ -381,8 +364,8 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						"use-label",
 						"label-title",
 						"text"
-					])], void 0, 0) : createCommentVNode("v-if", true)]),
-					default: withCtx(() => [shouldRenderLeafField.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
+					])])]),
+					default: withCtx(() => [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
 						key: 0,
 						placement: tooltip.value.placement
 					}, {
@@ -407,7 +390,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						"model",
 						"last-values",
 						"is-compare"
-					]))], 64)) : createCommentVNode("v-if", true)]),
+					]))]),
 					_: 3
 				}, 16, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
 					createCommentVNode(" 普通字段：渲染前后两份独立的组件用于对比 "),
@@ -416,7 +399,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						"tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value,
 						"show-before-diff": true
 					} }), {
-						label: withCtx(() => [shouldRenderLeafField.value ? renderSlot(_ctx.$slots, "label", {
+						label: withCtx(() => [renderSlot(_ctx.$slots, "label", {
 							config: __props.config,
 							type: type.value,
 							text: text.value,
@@ -434,8 +417,8 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 							"use-label",
 							"label-title",
 							"text"
-						])], void 0, 0) : createCommentVNode("v-if", true)]),
-						default: withCtx(() => [shouldRenderLeafField.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
+						])])]),
+						default: withCtx(() => [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
 							key: 0,
 							placement: tooltip.value.placement
 						}, {
@@ -448,10 +431,10 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						}, 8, ["placement"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps({ key: 1 }, fieldsProps.value, {
 							model: __props.lastValues,
 							onChange: onChangeHandler
-						}), null, 16, ["model"]))], 64)) : createCommentVNode("v-if", true)]),
+						}), null, 16, ["model"]))]),
 						_: 3
 					}, 16, ["class"]),
-					shouldRenderLeafField.value && __props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? (openBlock(), createBlock(unref(TMagicTooltip), {
+					__props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? (openBlock(), createBlock(unref(TMagicTooltip), {
 						key: 0,
 						placement: "top"
 					}, {
@@ -473,7 +456,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 							"show-after-diff": true
 						}
 					}), {
-						label: withCtx(() => [shouldRenderLeafField.value ? renderSlot(_ctx.$slots, "label", {
+						label: withCtx(() => [renderSlot(_ctx.$slots, "label", {
 							config: __props.config,
 							type: type.value,
 							text: text.value,
@@ -491,8 +474,8 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 							"use-label",
 							"label-title",
 							"text"
-						])], void 0, 0) : createCommentVNode("v-if", true)]),
-						default: withCtx(() => [shouldRenderLeafField.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
+						])])]),
+						default: withCtx(() => [tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
 							key: 0,
 							placement: tooltip.value.placement
 						}, {
@@ -505,10 +488,10 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						}, 8, ["placement"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps({ key: 1 }, fieldsProps.value, {
 							model: __props.model,
 							onChange: onChangeHandler
-						}), null, 16, ["model"]))], 64)) : createCommentVNode("v-if", true)]),
+						}), null, 16, ["model"]))]),
 						_: 3
 					}, 16, ["style", "class"]),
-					shouldRenderLeafField.value && __props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? (openBlock(), createBlock(unref(TMagicTooltip), {
+					__props.config.tip && type.value === "checkbox" && !__props.config.useLabel ? (openBlock(), createBlock(unref(TMagicTooltip), {
 						key: 1,
 						placement: "top"
 					}, {
@@ -523,11 +506,11 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						_: 1
 					})) : createCommentVNode("v-if", true)
 				], 64))
-			], 64)) : items.value && display$1.value ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [(isValidName() ? __props.model[name.value] : __props.model) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(items.value, (item) => {
+			], 64)) : items.value && display$1.value ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [(isValidName$1() ? __props.model[name.value] : __props.model) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(items.value, (item) => {
 				return openBlock(), createBlock(_component_Container, {
 					key: key(item),
-					model: isValidName() ? __props.model[name.value] : __props.model,
-					"last-values": isValidName() ? __props.lastValues[name.value] || {} : __props.lastValues,
+					model: isValidName$1() ? __props.model[name.value] : __props.model,
+					"last-values": isValidName$1() ? __props.lastValues[name.value] || {} : __props.lastValues,
 					"is-compare": __props.isCompare,
 					config: item,
 					size: __props.size,
@@ -535,6 +518,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					"step-active": __props.stepActive,
 					"expand-more": expand.value,
 					"label-width": itemLabelWidth.value,
+					"label-position": itemLabelPosition.value,
 					prop: itemProp.value,
 					onChange: onChangeHandler,
 					onAddDiffCount
@@ -552,6 +536,7 @@ var Container_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					"step-active",
 					"expand-more",
 					"label-width",
+					"label-position",
 					"prop"
 				]);
 			}), 128)) : createCommentVNode("v-if", true)], 64)) : createCommentVNode("v-if", true), __props.config.expand && type.value !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_10, [createVNode(unref(TMagicButton), {