@tmagic/form 1.8.0-beta.0 → 1.8.0-beta.10

package/dist/es/Form.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,13 @@
+import { FORM_DIFF_CONFIG_KEY } from "./schema.js";
 import { getConfig } from "./utils/config.js";
 import { initValue } from "./utils/form.js";
 import Container_default from "./containers/Container.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeStyle, openBlock, provide, reactive, ref, renderList, shallowRef, toRaw, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, mergeProps, normalizeStyle, openBlock, provide, reactive, ref, renderList, renderSlot, shallowRef, toRaw, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
 import { cloneDeep, isEqual } from "lodash-es";
 import { TMagicForm, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
 import { setValueByKeyPath } from "@tmagic/utils";
 //#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: {
@@ -34,7 +35,13 @@ 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
+		},
+		extendState: {},
+		showDiff: {},
+		selfDiffFieldTypes: {}
 	},
 	emits: [
 		"change",
@@ -52,14 +59,45 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		const lastValuesProcessed = ref({});
 		const fields = /* @__PURE__ */ new Map();
 		const requestFuc = getConfig("request");
+		/**
+		* formState 实现说明：
+		*
+		* 1. 与 props 直接对应的字段（config / initValues / lastValues / isCompare / parentValues /
+		*    keyProp / popperClass）使用「访问器（getter）」定义，每次读取都会回到 `props.xxx`
+		*    取最新值，不存在「props 变了但 formState 还没同步过来」的中间态。
+		*
+		* 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。
+		*/
 		const formState = reactive({
-			keyProp: props.keyProp,
-			popperClass: props.popperClass,
-			config: props.config,
-			initValues: props.initValues,
-			isCompare: props.isCompare,
-			lastValues: props.lastValues,
-			parentValues: props.parentValues,
+			get keyProp() {
+				return props.keyProp;
+			},
+			get popperClass() {
+				return props.popperClass;
+			},
+			get config() {
+				return props.config;
+			},
+			get initValues() {
+				return props.initValues;
+			},
+			get isCompare() {
+				return props.isCompare;
+			},
+			get lastValues() {
+				return props.lastValues;
+			},
+			get parentValues() {
+				return props.parentValues;
+			},
 			values,
 			lastValuesProcessed,
 			$emit: emit,
@@ -76,22 +114,57 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				});
 			}
 		});
-		watchEffect(async () => {
-			formState.initValues = props.initValues;
-			formState.lastValues = props.lastValues;
-			formState.isCompare = props.isCompare;
-			formState.config = props.config;
-			formState.keyProp = props.keyProp;
-			formState.popperClass = props.popperClass;
-			formState.parentValues = props.parentValues;
-			if (typeof props.extendState === "function") {
-				const state = await props.extendState(formState) || {};
-				Object.entries(state).forEach(([key, value]) => {
-					formState[key] = value;
-				});
+		/**
+		* `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。
+		*/
+		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);
 			}
 		});
 		provide("mForm", formState);
+		provide(FORM_DIFF_CONFIG_KEY, {
+			get showDiff() {
+				return props.showDiff;
+			},
+			get selfDiffFieldTypes() {
+				return props.selfDiffFieldTypes;
+			}
+		});
 		const changeRecords = shallowRef([]);
 		watch([() => props.config, () => props.initValues], ([config], [preConfig]) => {
 			changeRecords.value = [];
@@ -176,7 +249,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 					Object.entries(invalidFields).forEach(([prop, ValidateError]) => {
 						ValidateError.forEach(({ field, message }) => {
 							const name = field || prop;
-							const text = getTextByName(name, props.config) || name;
+							const text = (props.useFieldTextInError ? getTextByName(name, props.config) : void 0) || name;
 							error.push(`${text} -> ${message}`);
 						});
 					});
@@ -208,7 +281,11 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 						"step-active": __props.stepActive,
 						size: __props.size,
 						onChange: changeHandler
-					}, null, 8, [
+					}, createSlots({ _: 2 }, [_ctx.$slots.label ? {
+						name: "label",
+						fn: withCtx((labelProps) => [renderSlot(_ctx.$slots, "label", mergeProps({ ref_for: true }, labelProps))]),
+						key: "0"
+					} : void 0]), 1032, [
 						"disabled",
 						"config",
 						"model",
@@ -219,7 +296,7 @@ var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 						"size"
 					]);
 				}), 128)) : createCommentVNode("v-if", true)]),
-				_: 1
+				_: 3
 			}, 8, [
 				"model",
 				"label-width",

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: {
@@ -19,6 +19,10 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		inline: { type: Boolean },
 		labelPosition: {},
 		preventSubmitDefault: { type: Boolean },
+		useFieldTextInError: {
+			type: Boolean,
+			default: true
+		},
 		extendState: {}
 	},
 	emits: [
@@ -81,6 +85,7 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
+					"use-field-text-in-error": __props.useFieldTextInError,
 					"extend-state": __props.extendState,
 					onChange: changeHandler
 				}, null, 8, [
@@ -93,6 +98,7 @@ var FormBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 					"label-position",
 					"inline",
 					"prevent-submit-default",
+					"use-field-text-in-error",
 					"extend-state"
 				]), renderSlot(_ctx.$slots, "default")]),
 				_: 3

package/dist/es/FormDialog.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { computed, createBlock, createCommentVNode, createElementBlock, createEl
 import { 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: {
@@ -41,6 +41,10 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			type: Boolean,
 			default: true
 		},
+		useFieldTextInError: {
+			type: Boolean,
+			default: true
+		},
 		extendState: {}
 	},
 	emits: [
@@ -191,6 +195,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
+					"use-field-text-in-error": __props.useFieldTextInError,
 					"extend-state": __props.extendState,
 					onChange: changeHandler
 				}, null, 8, [
@@ -204,6 +209,7 @@ var FormDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position",
 					"inline",
 					"prevent-submit-default",
+					"use-field-text-in-error",
 					"extend-state"
 				]), renderSlot(_ctx.$slots, "default")], 4)) : createCommentVNode("v-if", true)]),
 				_: 3

package/dist/es/FormDrawer.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { createBlock, createCommentVNode, createElementBlock, createElementVNode
 import { 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({
+var FormDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFormDialog",
 	__name: "FormDrawer",
 	props: {
@@ -24,6 +24,10 @@ 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: {}
 	},
@@ -149,6 +153,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position": __props.labelPosition,
 					inline: __props.inline,
 					"prevent-submit-default": __props.preventSubmitDefault,
+					"use-field-text-in-error": __props.useFieldTextInError,
 					"extend-state": __props.extendState,
 					onChange: changeHandler
 				}, null, 8, [
@@ -161,6 +166,7 @@ var FormDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"label-position",
 					"inline",
 					"prevent-submit-default",
+					"use-field-text-in-error",
 					"extend-state"
 				]), 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: {