@tmagic/editor 1.8.0-beta.0 → 1.8.0-beta.1

package/dist/es/fields/DataSourceFieldSelect/Index.vue_vue_type_script_setup_true_lang.js

@@ -95,6 +95,10 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				emit("change", [dsId], eventData);
 			}
 		};
+		const onToggleDataSourceFieldSelectHandler = () => {
+			if (props.disabled || mForm?.isCompare) return;
+			showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value;
+		};
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [!disabledDataSource.value && (showDataSourceFieldSelect.value || !__props.config.fieldConfig) ? (openBlock(), createBlock(FieldSelect_default, {
 				key: 0,
@@ -144,11 +148,16 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				default: withCtx(() => [createVNode(unref(TMagicButton), {
 					type: showDataSourceFieldSelect.value ? "primary" : "default",
 					size: __props.size,
-					onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
+					disabled: __props.disabled || unref(mForm)?.isCompare,
+					onClick: onToggleDataSourceFieldSelectHandler
 				}, {
 					default: withCtx(() => [createVNode(Icon_default, { icon: unref(Coin) }, null, 8, ["icon"])]),
 					_: 1
-				}, 8, ["type", "size"])]),
+				}, 8, [
+					"type",
+					"size",
+					"disabled"
+				])]),
 				_: 1
 			}, 8, ["disabled"])) : createCommentVNode("v-if", true)]);
 		};

package/dist/es/fields/StyleSetter/Index.vue_vue_type_script_setup_true_lang.js

@@ -24,7 +24,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		lastValues: {},
 		isCompare: { type: Boolean }
 	},
-	emits: ["change"],
+	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -63,6 +63,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			});
 			emit("change", v, eventData);
 		};
+		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(TMagicCollapse), {
 				class: "m-fields-style-setter",
@@ -78,11 +79,16 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						default: withCtx(() => [item.component ? (openBlock(), createBlock(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"
 						])) : createCommentVNode("v-if", true)]),

package/dist/es/fields/StyleSetter/components/Border.vue_vue_type_script_setup_true_lang.js

@@ -11,10 +11,12 @@ var Border_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 	__name: "Border",
 	props: {
 		model: {},
+		lastValues: {},
+		isCompare: { type: Boolean },
 		disabled: { type: Boolean },
 		size: {}
 	},
-	emits: ["change"],
+	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const direction = ref("");
 		const config = computed(() => defineFormItem({ items: [
@@ -57,6 +59,7 @@ var Border_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				emit("change", record.value, { modifyKey: record.propPath });
 			});
 		};
+		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [
 				createElementVNode("div", _hoisted_3, [createElementVNode("div", {
@@ -84,12 +87,17 @@ var Border_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			]), createElementVNode("div", _hoisted_6, [createVNode(unref(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"
 			])])]);

package/dist/es/fields/StyleSetter/components/Box.vue_vue_type_script_setup_true_lang.js

@@ -17,7 +17,9 @@ var Box_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 	props: {
 		disabled: { type: Boolean },
 		size: {},
-		model: {}
+		model: {},
+		lastValues: {},
+		isCompare: { type: Boolean }
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

package/dist/es/fields/StyleSetter/pro/Background.vue_vue_type_script_setup_true_lang.js

@@ -10,10 +10,12 @@ var Background_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 	__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 = defineFormItem({ items: [
@@ -95,16 +97,22 @@ var Background_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
+		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(MContainer), {
 				config: 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"
 			]);

package/dist/es/fields/StyleSetter/pro/Border.vue_vue_type_script_setup_true_lang.js

@@ -6,10 +6,12 @@ var Border_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 	__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 = defineFormItem({ items: [{
@@ -22,25 +24,36 @@ var Border_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
+		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(MContainer), {
 				config: 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"
 			]), createVNode(Border_default, {
 				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);

package/dist/es/fields/StyleSetter/pro/Font.vue_vue_type_script_setup_true_lang.js

@@ -8,10 +8,12 @@ var Font_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 	__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 = defineFormItem({ items: [
@@ -79,16 +81,22 @@ var Font_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
+		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(MContainer), {
 				config: 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"
 			]);

package/dist/es/fields/StyleSetter/pro/Layout.vue_vue_type_script_setup_true_lang.js

@@ -20,10 +20,12 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 	__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 = defineFormItem({ items: [
@@ -259,25 +261,35 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
+		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(MContainer), {
 				config: 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"
 			]), withDirectives(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"
 			]), [[vShow, !["fixed", "absolute"].includes(__props.values.position)]])], 64);

package/dist/es/fields/StyleSetter/pro/Position.vue_vue_type_script_setup_true_lang.js

@@ -5,10 +5,12 @@ var Position_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	__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;
@@ -76,16 +78,22 @@ var Position_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
+		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(MContainer), {
 				config: 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"
 			]);

package/dist/es/fields/StyleSetter/pro/Transform.vue_vue_type_script_setup_true_lang.js

@@ -5,10 +5,12 @@ var Transform_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 	__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 = defineFormItem({ items: [{
@@ -34,16 +36,22 @@ var Transform_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
+		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(MContainer), {
 				config: 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"
 			]);

package/dist/es/layouts/sidebar/layer/use-node-status.js

@@ -27,10 +27,43 @@ var useNodeStatus = ({ editorService }) => {
 	const nodeStatusMaps = ref(/* @__PURE__ */ new Map());
 	/** 当前页面的节点状态 */
 	const nodeStatusMap = computed(() => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map());
-	watch(() => page.value?.id, (pageId) => {
-		if (!pageId) return;
-		nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value, nodeStatusMaps.value.get(pageId)));
+	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);
 	watch(nodes, (nodes) => {
 		if (!nodeStatusMap.value) return;
 		for (const [id, status] of nodeStatusMap.value.entries()) {
@@ -63,6 +96,7 @@ var useNodeStatus = ({ editorService }) => {
 	};
 	editorService.on("remove", removeHandler);
 	onBeforeUnmount(() => {
+		editorService.off("root-change", rootChangeHandler);
 		editorService.off("remove", removeHandler);
 		editorService.off("add", addHandler);
 	});

package/dist/es/utils/editor.js

@@ -196,7 +196,7 @@ var fixNodePosition = (config, parent, stage) => {
 var serializeConfig = (config) => serialize(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--) {