@tmagic/editor 1.7.14-beta.3 → 1.8.0-beta.1

package/dist/tmagic-editor.umd.cjs

@@ -5397,7 +5397,7 @@
 	var serializeConfig = (config) => (0, serialize_javascript.default)(config, {
 		space: 2,
 		unsafe: true
-	}).replace(/"(\w+)":\s/g, "$1: ");
+	}).replace(/(^|\n)(\s*)"(\w+)":\s/g, "$1$2$3: ");
 	var moveItemsInContainer = (sourceIndices, parent, targetIndex) => {
 		sourceIndices.sort((a, b) => a - b);
 		for (let i = sourceIndices.length - 1; i >= 0; i--) {
@@ -5902,6 +5902,19 @@
 			return parent;
 		}
 		/**
+		* 判断给定节点是否位于非当前页面（即选中该节点将会引起当前页面切换）
+		* @param node 节点
+		* @returns true 表示该节点位于非当前页面
+		*/
+		isOnDifferentPage(node) {
+			const currentPageId = this.get("page")?.id;
+			if (currentPageId === void 0 || currentPageId === null) return false;
+			if ((0, _tmagic_utils.isPage)(node) || (0, _tmagic_utils.isPageFragment)(node)) return `${node.id}` !== `${currentPageId}`;
+			const nodePage = this.getNodeInfo(node.id, false).page;
+			if (!nodePage) return false;
+			return `${nodePage.id}` !== `${currentPageId}`;
+		}
+		/**
 		* 只有容器拥有布局
 		*/
 		async getLayout(parent, node) {
@@ -6022,11 +6035,12 @@
 		* @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
 		* @param options 可选配置
 		* @param options.doNotSelect 添加后是否不更新当前选中节点（默认 false，添加后会选中新增的节点）
+		* @param options.doNotSwitchPage 添加后是否不切换当前页面（默认 false；新增页面 / 跨页新增时为 true 会跳过会引发页面切换的选中操作）
 		* @returns 添加后的节点
 		*/
 		async add(addNode, parent, options) {
 			const safeParentNode = safeParent(parent);
-			const { doNotSelect = false } = safeOptions(options);
+			const { doNotSelect = false, doNotSwitchPage = false } = safeOptions(options);
 			this.captureSelectionBeforeOp();
 			const stage = this.get("stage");
 			const addNodes = [];
@@ -6043,16 +6057,19 @@
 				return this.doAdd(node, parentNode);
 			}));
 			if (newNodes.length > 1) {
-				if (!doNotSelect) {
+				const wouldSwitchPage = newNodes.some((n) => this.isOnDifferentPage(n));
+				if (!doNotSelect && !(doNotSwitchPage && wouldSwitchPage)) {
 					const newNodeIds = newNodes.map((node) => node.id);
 					stage?.multiSelect(newNodeIds);
 					await this.multiSelect(newNodeIds);
 				}
 			} else {
-				if (!doNotSelect) await this.select(newNodes[0]);
+				const wouldSwitchPage = this.isOnDifferentPage(newNodes[0]);
+				const skipSelect = doNotSelect || doNotSwitchPage && wouldSwitchPage;
+				if (!skipSelect) await this.select(newNodes[0]);
 				if ((0, _tmagic_utils.isPage)(newNodes[0])) this.state.pageLength += 1;
 				else if ((0, _tmagic_utils.isPageFragment)(newNodes[0])) this.state.pageFragmentLength += 1;
-				else if (!doNotSelect) stage?.select(newNodes[0].id);
+				else if (!skipSelect) stage?.select(newNodes[0].id);
 			}
 			if (!((0, _tmagic_utils.isPage)(newNodes[0]) || (0, _tmagic_utils.isPageFragment)(newNodes[0]))) {
 				const pageForOp = this.getNodeInfo(newNodes[0].id, false).page;
@@ -6072,7 +6089,7 @@
 			return Array.isArray(addNode) ? newNodes : newNodes[0];
 		}
 		async doRemove(node, options) {
-			const { doNotSelect = false } = safeOptions(options);
+			const { doNotSelect = false, doNotSwitchPage = false } = safeOptions(options);
 			const root = this.get("root");
 			if (!root) throw new Error("root不能为空");
 			const { parent, node: curNode } = this.getNodeInfo(node.id, false);
@@ -6086,18 +6103,16 @@
 				parentId: parent.id,
 				root: cloneDeep(root)
 			});
-			if (doNotSelect) {
-				const selectedNodes = this.get("nodes");
-				const removedSelectedIndex = selectedNodes.findIndex((n) => `${n.id}` === `${node.id}`);
-				if (removedSelectedIndex !== -1) {
-					const nextSelected = [...selectedNodes];
-					nextSelected.splice(removedSelectedIndex, 1);
-					this.set("nodes", nextSelected);
-				}
-				if ((0, _tmagic_utils.isPage)(node) || (0, _tmagic_utils.isPageFragment)(node)) {
-					const currentPage = this.get("page");
-					if (currentPage && `${currentPage.id}` === `${node.id}`) this.set("page", null);
-				}
+			const selectedNodes = this.get("nodes");
+			const removedSelectedIndex = selectedNodes.findIndex((n) => `${n.id}` === `${node.id}`);
+			if (removedSelectedIndex !== -1) {
+				const nextSelected = [...selectedNodes];
+				nextSelected.splice(removedSelectedIndex, 1);
+				this.set("nodes", nextSelected);
+			}
+			if ((0, _tmagic_utils.isPage)(node) || (0, _tmagic_utils.isPageFragment)(node)) {
+				const currentPage = this.get("page");
+				if (currentPage && `${currentPage.id}` === `${node.id}`) this.set("page", null);
 			}
 			const selectDefault = async (pages) => {
 				if (pages[0]) {
@@ -6111,10 +6126,10 @@
 			const rootItems = root.items || [];
 			if ((0, _tmagic_utils.isPage)(node)) {
 				this.state.pageLength -= 1;
-				if (!doNotSelect) await selectDefault(rootItems);
+				if (!doNotSelect && !doNotSwitchPage) await selectDefault(rootItems);
 			} else if ((0, _tmagic_utils.isPageFragment)(node)) {
 				this.state.pageFragmentLength -= 1;
-				if (!doNotSelect) await selectDefault(rootItems);
+				if (!doNotSelect && !doNotSwitchPage) await selectDefault(rootItems);
 			} else {
 				if (!doNotSelect) {
 					await this.select(parent);
@@ -6132,9 +6147,10 @@
 		* @param {Object} node 要删除的节点或节点集合
 		* @param options 可选配置
 		* @param options.doNotSelect 删除后是否不更新当前选中节点（默认 false，删除后会选中父节点或首个页面）
+		* @param options.doNotSwitchPage 删除后是否不切换当前页面（默认 false；删除页面 / 页面片段时为 true 会跳过自动切换到首个剩余页面）
 		*/
 		async remove(nodeOrNodeList, options) {
-			const { doNotSelect = false } = safeOptions(options);
+			const { doNotSelect = false, doNotSwitchPage = false } = safeOptions(options);
 			this.captureSelectionBeforeOp();
 			const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
 			const removedItems = [];
@@ -6154,7 +6170,10 @@
 					});
 				}
 			}
-			await Promise.all(nodes.map((node) => this.doRemove(node, { doNotSelect })));
+			await Promise.all(nodes.map((node) => this.doRemove(node, {
+				doNotSelect,
+				doNotSwitchPage
+			})));
 			if (removedItems.length > 0 && pageForOp) this.pushOpHistory("remove", { removedItems }, pageForOp);
 			this.emit("remove", nodes);
 		}
@@ -6191,7 +6210,10 @@
 				selectedNodes.splice(targetIndex, 1, newConfig);
 				this.set("nodes", [...selectedNodes]);
 			}
-			if ((0, _tmagic_utils.isPage)(newConfig) || (0, _tmagic_utils.isPageFragment)(newConfig)) this.set("page", newConfig);
+			if ((0, _tmagic_utils.isPage)(newConfig) || (0, _tmagic_utils.isPageFragment)(newConfig)) {
+				const currentPage = this.get("page");
+				if (currentPage && `${currentPage.id}` === `${newConfig.id}`) this.set("page", newConfig);
+			}
 			this.addModifiedNodeId(newConfig.id);
 			return {
 				oldNode: node,
@@ -6232,6 +6254,7 @@
 		* @param id2 组件ID
 		* @param options 可选配置
 		* @param options.doNotSelect 排序后是否不更新当前选中节点（默认 false）
+		* @param options.doNotSwitchPage 排序后是否不切换当前页面（排序只发生在同一父节点内，方法内为空操作；保留以与其它 DSL 操作 API 一致）
 		* @returns void
 		*/
 		async sort(id1, id2, options) {
@@ -6279,10 +6302,11 @@
 		* @param collectorOptions 可选的依赖收集器配置
 		* @param options 可选配置
 		* @param options.doNotSelect 粘贴后是否不更新当前选中节点（默认 false）
+		* @param options.doNotSwitchPage 粘贴后是否不切换当前页面（默认 false；跨页粘贴时为 true 会跳过页面切换）
 		* @returns 添加后的组件节点配置
 		*/
 		async paste(position = {}, collectorOptions, options) {
-			const { doNotSelect = false } = safeOptions(options);
+			const { doNotSelect = false, doNotSwitchPage = false } = safeOptions(options);
 			const config = storage_default.getItem(COPY_STORAGE_KEY);
 			if (!Array.isArray(config)) return;
 			const node = this.get("node");
@@ -6293,7 +6317,10 @@
 			}
 			const pasteConfigs = await this.doPaste(config, position);
 			if (collectorOptions && typeof collectorOptions.isTarget === "function") props_default.replaceRelateId(config, pasteConfigs, collectorOptions);
-			return this.add(pasteConfigs, parent, { doNotSelect });
+			return this.add(pasteConfigs, parent, {
+				doNotSelect,
+				doNotSwitchPage
+			});
 		}
 		async doPaste(config, position = {}) {
 			props_default.clearRelateId();
@@ -6316,6 +6343,7 @@
 		* @param config 组件节点配置
 		* @param options 可选配置
 		* @param options.doNotSelect 居中后是否不更新当前选中节点（默认 false）
+		* @param options.doNotSwitchPage 居中后是否不切换当前页面（居中只更新节点 style，方法内为空操作；保留以与其它 DSL 操作 API 一致）
 		* @returns 当前组件节点配置
 		*/
 		async alignCenter(config, options) {
@@ -6371,9 +6399,10 @@
 		* @param targetId 容器ID
 		* @param options 可选配置
 		* @param options.doNotSelect 移动后是否不更新当前选中节点（默认 false）
+		* @param options.doNotSwitchPage 移动后是否不切换当前页面（默认 false；目标容器位于其它页面时为 true 会跳过自动选中以避免页面切换）
 		*/
 		async moveToContainer(config, targetId, options) {
-			const { doNotSelect = false } = safeOptions(options);
+			const { doNotSelect = false, doNotSwitchPage = false } = safeOptions(options);
 			this.captureSelectionBeforeOp();
 			const root = this.get("root");
 			const { node, parent, page: pageForOp } = this.getNodeInfo(config.id, false);
@@ -6395,14 +6424,16 @@
 				});
 				newConfig.style = getInitPositionStyle(newConfig.style, layout);
 				target.items.push(newConfig);
-				if (!doNotSelect) await stage.select(targetId);
+				const targetWouldSwitchPage = this.isOnDifferentPage(target);
+				const skipSelect = doNotSelect || doNotSwitchPage && targetWouldSwitchPage;
+				if (!skipSelect) await stage.select(targetId);
 				const targetParent = this.getParentById(target.id);
 				await stage.update({
 					config: cloneDeep(target),
 					parentId: targetParent?.id,
 					root: cloneDeep(root)
 				});
-				if (!doNotSelect) {
+				if (!skipSelect) {
 					await this.select(newConfig);
 					stage.select(newConfig.id);
 				}
@@ -9173,7 +9204,7 @@
 					(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicScrollbar), null, {
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MForm), {
 							ref: "configForm",
-							class: (0, vue.normalizeClass)(propsPanelSize.value),
+							class: (0, vue.normalizeClass)([propsPanelSize.value, "m-editor-props-form-panel-form"]),
 							"popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
 							"label-width": __props.labelWidth,
 							"label-position": __props.labelPosition,
@@ -11728,10 +11759,43 @@
 		const nodeStatusMaps = (0, vue.ref)(/* @__PURE__ */ new Map());
 		/** 当前页面的节点状态 */
 		const nodeStatusMap = (0, vue.computed)(() => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map());
-		(0, vue.watch)(() => page.value?.id, (pageId) => {
-			if (!pageId) return;
-			nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value, nodeStatusMaps.value.get(pageId)));
+		(0, vue.watch)(page, (newPage) => {
+			if (!newPage?.id) return;
+			nodeStatusMaps.value.set(newPage.id, createPageNodeStatus(newPage, nodeStatusMaps.value.get(newPage.id)));
 		}, { immediate: true });
+		/**
+		* root 整体被替换时（外部 modelValue 变化、历史版本恢复、套件编辑模式进入/退出等）：
+		* - 仅 watch page 引用还不够，因为 root-change 同步触发时 page 还是旧引用，
+		*   等 initService 的异步 IIFE 跑完 editorService.select(...) 后 page 才会
+		*   被替换为新 dsl 中的 page；此时上面的 page watch 才会触发重建。
+		* - 但若直接同步清空 nodeStatusMaps，会让 nodeStatusMap (computed) 立刻变
+		*   undefined。上层 LayerPanel 用 `v-if="page && nodeStatusMap"` 渲染组件树，
+		*   会瞬间销毁整个面板；若紧接着的异步 select 链路（套件退出等场景）发生
+		*   竞态、page 引用未变 / 解析失败，watch(page) 不触发重建，组件树就再也回
+		*   不来。
+		* - 此外「污染」问题本质来自 createPageNodeStatus 用旧 status 作为新节点
+		*   initial 值：只要新 root 的 page 是新引用，watch(page) 会触发重建，重建
+		*   时基于新 page.items 生成的 map 只会包含新节点 id；旧节点 id 即便残留在
+		*   initialLayerNodeStatus 中也不会被写入新 map。真正的风险只有「同一 page
+		*   id 下，新旧 dsl 都存在同一节点 id 但其实是不同节点」这种极端情况——这
+		*   在常规业务中不会发生（id 是 uuid）。
+		*
+		* 综合：root-change 时仅清理「在新 root 中已不存在的 page id」对应缓存，
+		* 保留仍然有效的 page status 不动；既避免 v-if 闪断，也不会保留无关 page 的
+		* 死缓存。同 page id 的重建交给下方 watch(page) 触发。
+		*/
+		const rootChangeHandler = (value) => {
+			if (!value) {
+				nodeStatusMaps.value = /* @__PURE__ */ new Map();
+				return;
+			}
+			const validPageIds = /* @__PURE__ */ new Set();
+			(value.items || []).forEach((p) => {
+				if (p?.id !== void 0) validPageIds.add(p.id);
+			});
+			for (const cachedPageId of Array.from(nodeStatusMaps.value.keys())) if (!validPageIds.has(cachedPageId)) nodeStatusMaps.value.delete(cachedPageId);
+		};
+		editorService.on("root-change", rootChangeHandler);
 		(0, vue.watch)(nodes, (nodes) => {
 			if (!nodeStatusMap.value) return;
 			for (const [id, status] of nodeStatusMap.value.entries()) {
@@ -11764,6 +11828,7 @@
 		};
 		editorService.on("remove", removeHandler);
 		(0, vue.onBeforeUnmount)(() => {
+			editorService.off("root-change", rootChangeHandler);
 			editorService.off("remove", removeHandler);
 			editorService.off("add", addHandler);
 		});
@@ -16754,6 +16819,10 @@
 					emit("change", [dsId], eventData);
 				}
 			};
+			const onToggleDataSourceFieldSelectHandler = () => {
+				if (props.disabled || mForm?.isCompare) return;
+				showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value;
+			};
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$29, [!disabledDataSource.value && (showDataSourceFieldSelect.value || !__props.config.fieldConfig) ? ((0, vue.openBlock)(), (0, vue.createBlock)(FieldSelect_default, {
 					key: 0,
@@ -16803,11 +16872,16 @@
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
 						type: showDataSourceFieldSelect.value ? "primary" : "default",
 						size: __props.size,
-						onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
+						disabled: __props.disabled || (0, vue.unref)(mForm)?.isCompare,
+						onClick: onToggleDataSourceFieldSelectHandler
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Coin) }, null, 8, ["icon"])]),
 						_: 1
-					}, 8, ["type", "size"])]),
+					}, 8, [
+						"type",
+						"size",
+						"disabled"
+					])]),
 					_: 1
 				}, 8, ["disabled"])) : (0, vue.createCommentVNode)("v-if", true)]);
 			};
@@ -17794,10 +17868,12 @@
 		__name: "Background",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
 			const config = (0, _tmagic_form.defineFormItem)({ items: [
@@ -17879,16 +17955,22 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]);
@@ -17937,10 +18019,12 @@
 		__name: "Font",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
 			const config = (0, _tmagic_form.defineFormItem)({ items: [
@@ -18008,16 +18092,22 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]);
@@ -18046,7 +18136,9 @@
 		props: {
 			disabled: { type: Boolean },
 			size: {},
-			model: {}
+			model: {},
+			lastValues: {},
+			isCompare: { type: Boolean }
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -18269,10 +18361,12 @@
 		__name: "Layout",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
 			const config = (0, _tmagic_form.defineFormItem)({ items: [
@@ -18508,25 +18602,35 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]), (0, vue.withDirectives)((0, vue.createVNode)(Box_default, {
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
 					onChange: change
 				}, null, 8, [
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]), [[vue.vShow, !["fixed", "absolute"].includes(__props.values.position)]])], 64);
@@ -18542,10 +18646,12 @@
 		__name: "Position",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const props = __props;
 			const emit = __emit;
@@ -18613,16 +18719,22 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]);
@@ -18644,10 +18756,12 @@
 		__name: "Border",
 		props: {
 			model: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const direction = (0, vue.ref)("");
 			const config = (0, vue.computed)(() => (0, _tmagic_form.defineFormItem)({ items: [
@@ -18690,6 +18804,7 @@
 					emit("change", record.value, { modifyKey: record.propPath });
 				});
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [(0, vue.createElementVNode)("div", _hoisted_2, [
 					(0, vue.createElementVNode)("div", _hoisted_3, [(0, vue.createElementVNode)("div", {
@@ -18717,12 +18832,17 @@
 				]), (0, vue.createElementVNode)("div", _hoisted_6, [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: config.value,
 					model: __props.model,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				])])]);
@@ -18738,10 +18858,12 @@
 		__name: "Border",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
 			const config = (0, _tmagic_form.defineFormItem)({ items: [{
@@ -18754,25 +18876,36 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]), (0, vue.createVNode)(Border_default$1, {
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				])], 64);
@@ -18788,10 +18921,12 @@
 		__name: "Transform",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
 			const config = (0, _tmagic_form.defineFormItem)({ items: [{
@@ -18817,16 +18952,22 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]);
@@ -18853,7 +18994,7 @@
 			lastValues: {},
 			isCompare: { type: Boolean }
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const props = __props;
 			const emit = __emit;
@@ -18892,6 +19033,7 @@
 				});
 				emit("change", v, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicCollapse), {
 					class: "m-fields-style-setter",
@@ -18907,11 +19049,16 @@
 							default: (0, vue.withCtx)(() => [item.component ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(item.component), {
 								key: 0,
 								values: __props.model[__props.name],
+								"last-values": __props.lastValues?.[__props.name],
+								"is-compare": __props.isCompare,
 								size: __props.size,
 								disabled: __props.disabled,
-								onChange: change
+								onChange: change,
+								onAddDiffCount
 							}, null, 40, [
 								"values",
+								"last-values",
+								"is-compare",
 								"size",
 								"disabled"
 							])) : (0, vue.createCommentVNode)("v-if", true)]),

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.14-beta.3",
+  "version": "1.8.0-beta.1",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.7.14-beta.3",
-    "@tmagic/form": "1.7.14-beta.3",
-    "@tmagic/stage": "1.7.14-beta.3",
-    "@tmagic/table": "1.7.14-beta.3",
-    "@tmagic/utils": "1.7.14-beta.3"
+    "@tmagic/design": "1.8.0-beta.1",
+    "@tmagic/form": "1.8.0-beta.1",
+    "@tmagic/stage": "1.8.0-beta.1",
+    "@tmagic/table": "1.8.0-beta.1",
+    "@tmagic/utils": "1.8.0-beta.1"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.34",
-    "@tmagic/core": "1.7.14-beta.3"
+    "@tmagic/core": "1.8.0-beta.1"
   },
   "peerDependenciesMeta": {
     "typescript": {