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

package/dist/es/fields/DataSourceMethods.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,15 @@
 import CodeBlockEditor_default from "../components/CodeBlockEditor.js";
 import { MagicTable } from "@tmagic/table";
 import { TMagicButton, tMagicMessageBox } from "@tmagic/design";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, openBlock, ref, unref, useTemplateRef, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, inject, nextTick, onMounted, openBlock, ref, unref, useTemplateRef, withCtx } from "vue";
 import { cloneDeep } from "lodash-es";
 //#region packages/editor/src/fields/DataSourceMethods.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-data-source-methods" };
-var _hoisted_2 = { class: "m-editor-data-source-methods-footer" };
-var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_2 = {
+	key: 0,
+	class: "m-editor-data-source-methods-footer"
+};
+var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceMethods",
 	__name: "DataSourceMethods",
 	props: {
@@ -28,9 +31,25 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const mForm = inject("mForm");
+		/** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const codeConfig = ref();
 		const codeBlockEditorRef = useTemplateRef("codeBlockEditor");
 		let editIndex = -1;
+		const editMethod = (method, index) => {
+			let codeContent = "({ params, dataSource, app }) => {\n  // place your code here\n}";
+			if (method.content) if (typeof method.content !== "string") codeContent = method.content.toString();
+			else codeContent = method.content;
+			codeConfig.value = {
+				...cloneDeep(method),
+				content: codeContent
+			};
+			editIndex = index;
+			nextTick(() => {
+				codeBlockEditorRef.value?.show();
+			});
+		};
 		const methodColumns = [
 			{
 				label: "名称",
@@ -55,17 +74,7 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				actions: [{
 					text: "编辑",
 					handler: (method, index) => {
-						let codeContent = "({ params, dataSource, app }) => {\n  // place your code here\n}";
-						if (method.content) if (typeof method.content !== "string") codeContent = method.content.toString();
-						else codeContent = method.content;
-						codeConfig.value = {
-							...cloneDeep(method),
-							content: codeContent
-						};
-						editIndex = index;
-						nextTick(() => {
-							codeBlockEditorRef.value?.show();
-						});
+						editMethod(method, index);
 					}
 				}, {
 					text: "删除",
@@ -78,6 +87,8 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				}]
 			}
 		];
+		/** 对比模式下移除「操作」列（编辑/删除按钮），仅保留只读列。 */
+		const displayColumns = computed(() => isCompare.value ? methodColumns.filter((col) => !col.actions) : methodColumns);
 		const createCodeHandler = () => {
 			codeConfig.value = {
 				name: "",
@@ -111,14 +122,24 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			codeConfig.value = void 0;
 			codeBlockEditorRef.value?.hide();
 		};
+		/** 由 DataSourceConfigPanel 注入：打开数据源详情后需要直接打开的方法名 */
+		const editingMethodName = inject("editingDataSourceMethodName", computed(() => ""));
+		onMounted(() => {
+			const methodName = editingMethodName.value;
+			if (!methodName) return;
+			const methods = props.model[props.name] || [];
+			const index = methods.findIndex((method) => method.name === methodName);
+			if (index === -1) return;
+			editMethod(methods[index], index);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createVNode(unref(MagicTable), {
 					data: __props.model[__props.name],
-					columns: methodColumns,
+					columns: displayColumns.value,
 					border: true
-				}, null, 8, ["data"]),
-				createElementVNode("div", _hoisted_2, [createVNode(unref(TMagicButton), {
+				}, null, 8, ["data", "columns"]),
+				!isCompare.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(TMagicButton), {
 					size: "small",
 					type: "primary",
 					disabled: __props.disabled,
@@ -127,9 +148,9 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				}, {
 					default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("添加", -1)])]),
 					_: 1
-				}, 8, ["disabled"])]),
+				}, 8, ["disabled"])])) : createCommentVNode("v-if", true),
 				codeConfig.value ? (openBlock(), createBlock(CodeBlockEditor_default, {
-					key: 0,
+					key: 1,
 					ref: "codeBlockEditor",
 					disabled: __props.disabled,
 					content: codeConfig.value,

package/dist/es/fields/DataSourceMocks.vue_vue_type_script_setup_true_lang.js

@@ -7,14 +7,17 @@ import { MFormBox } from "@tmagic/form";
 import { MagicTable } from "@tmagic/table";
 import { TMagicButton, TMagicSwitch, tMagicMessageBox } from "@tmagic/design";
 import { getDefaultValueFromFields } from "@tmagic/utils";
-import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, isRef, mergeModels, openBlock, ref, unref, useModel, withCtx } from "vue";
+import { computed, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, inject, isRef, mergeModels, openBlock, ref, unref, useModel, withCtx } from "vue";
 //#region packages/editor/src/fields/DataSourceMocks.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-data-source-fields" };
-var _hoisted_2 = { class: "m-editor-data-source-fields-footer" };
-var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_2 = {
+	key: 0,
+	class: "m-editor-data-source-fields-footer"
+};
+var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceMocks",
 	__name: "DataSourceMocks",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		config: {},
 		model: {},
 		initValues: {},
@@ -37,11 +40,14 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		},
 		"visibleModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["change"], ["update:width", "update:visible"]),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:width", "update:visible"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const { uiService } = useServices();
+		const mForm = inject("mForm");
+		/** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const width = useModel(__props, "width");
 		const drawerTitle = ref("");
 		const formValues = ref({});
@@ -175,6 +181,8 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 				}]
 			}
 		];
+		/** 对比模式下移除「操作」列（编辑/删除按钮），仅保留只读列。 */
+		const displayColumns = computed(() => isCompare.value ? columns.filter((col) => !col.actions) : columns);
 		const newHandler = () => {
 			const isFirstRow = props.model[props.name].length === 0;
 			formValues.value = {
@@ -209,9 +217,9 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createVNode(unref(MagicTable), {
 					data: __props.model[__props.name],
-					columns
-				}, null, 8, ["data"]),
-				createElementVNode("div", _hoisted_2, [createVNode(unref(TMagicButton), {
+					columns: displayColumns.value
+				}, null, 8, ["data", "columns"]),
+				!isCompare.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(TMagicButton), {
 					size: "small",
 					type: "primary",
 					disabled: __props.disabled,
@@ -220,7 +228,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 				}, {
 					default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("添加", -1)])]),
 					_: 1
-				}, 8, ["disabled"])]),
+				}, 8, ["disabled"])])) : createCommentVNode("v-if", true),
 				createVNode(FloatingBox_default, {
 					visible: addDialogVisible.value,
 					"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),

package/dist/es/fields/DataSourceSelect.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { computed, createBlock, createCommentVNode, createElementBlock, createVN
 import { Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/DataSourceSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-data-source-select" };
-var DataSourceSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceSelect",
 	__name: "DataSourceSelect",
 	props: {
@@ -34,6 +34,8 @@ var DataSourceSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const eventBus = inject("eventBus");
 		const dataSources = computed(() => dataSourceService.get("dataSources"));
 		const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+		/** 对比模式下隐藏查看/编辑操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const hasDataSourceSidePanel = computed(() => uiService.get("sideBarItems").find((item) => item.$key === SideItemKey.DATA_SOURCE));
 		const selectConfig = computed(() => {
 			const { type, dataSourceType, value, ...config } = props.config;
@@ -80,7 +82,7 @@ var DataSourceSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				"disabled",
 				"config",
 				"last-values"
-			]), __props.model[__props.name] && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+			]), __props.model[__props.name] && hasDataSourceSidePanel.value && !isCompare.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
 				key: 0,
 				content: notEditable.value ? "查看" : "编辑"
 			}, {

package/dist/es/fields/DisplayConds.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { getCascaderOptionsFromFields, getFieldType } from "../utils/data-source
 import { MGroupList, filterFunction } from "@tmagic/form";
 import { computed, createBlock, defineComponent, inject, openBlock, unref } from "vue";
 //#region packages/editor/src/fields/DisplayConds.vue?vue&type=script&setup=true&lang.ts
-var DisplayConds_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DisplayConds_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "m-fields-display-conds",
 	__name: "DisplayConds",
 	props: {

package/dist/es/fields/EventSelect.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import { MContainer, MPanel, MTable, defineFormItem } from "@tmagic/form";
 import { TMagicButton } from "@tmagic/design";
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from "@tmagic/utils";
 import { ActionType } from "@tmagic/core";
-import { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
 import { has } from "lodash-es";
 import { Delete } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/EventSelect.vue?vue&type=script&setup=true&lang.ts
@@ -13,7 +13,7 @@ var _hoisted_2 = {
 	key: 1,
 	class: "fullWidth"
 };
-var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsEventSelect",
 	__name: "EventSelect",
 	props: {
@@ -243,6 +243,39 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			if (props.model[props.name].length === 0) return false;
 			return !has(props.model[props.name][0], "actions");
 		});
+		/**
+		* 对比模式判定：
+		*
+		* event-select 内部由「事件列表 + 嵌套子表单」组成，属于复合字段。父级 `MFormContainer` 已将其
+		* 归入「自接管对比字段」（见 Container.vue 的 `SELF_DIFF_FIELD_TYPES`），即对比时只渲染一次本组件，
+		* 并把当前值 `model` 与历史值 `lastValues` 一并传入，由本组件把 `is-compare`/`lastValues` 透传给
+		* 内部的 MPanel / MFormContainer，逐项（事件名、动作）展示前后差异。
+		*
+		* 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
+		*/
+		const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
+		/**
+		* 待渲染的事件卡片列表。
+		*
+		* - 非对比模式：直接映射当前事件列表，`lastCardItem` 为空；
+		* - 对比模式：按索引对齐当前值与历史值，取两者长度的最大值，使得「新增」（仅当前有）与
+		*   「删除」（仅历史有）的事件都能被渲染出来；缺失的一侧用空对象兜底，从而让子级正确高亮差异。
+		*/
+		const displayList = computed(() => {
+			const current = props.model[props.name] || [];
+			if (!isCompareMode.value) return current.map((cardItem, index) => ({
+				cardItem,
+				lastCardItem: void 0,
+				index
+			}));
+			const last = props.lastValues?.[props.name] || [];
+			const length = Math.max(current.length, last.length);
+			return Array.from({ length }, (_, index) => ({
+				cardItem: current[index] ?? {},
+				lastCardItem: last[index] ?? {},
+				index
+			}));
+		});
 		const addEvent = () => {
 			const defaultEvent = {
 				name: "",
@@ -267,14 +300,19 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				size: __props.size,
 				disabled: __props.disabled,
 				model: __props.model,
+				"last-values": __props.lastValues,
+				"is-compare": isCompareMode.value,
 				config: tableConfig.value,
 				onChange: onChangeHandler
 			}, null, 8, [
 				"size",
 				"disabled",
 				"model",
+				"last-values",
+				"is-compare",
 				"config"
-			])) : (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(TMagicButton), {
+			])) : (openBlock(), createElementBlock("div", _hoisted_2, [!isCompareMode.value ? (openBlock(), createBlock(unref(TMagicButton), {
+				key: 0,
 				class: "create-button",
 				type: "primary",
 				size: __props.size,
@@ -283,44 +321,51 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			}, {
 				default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("添加事件", -1)])]),
 				_: 1
-			}, 8, ["size", "disabled"]), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.model[__props.name], (cardItem, index) => {
+			}, 8, ["size", "disabled"])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(displayList.value, (entry) => {
 				return openBlock(), createBlock(unref(MPanel), {
-					key: index,
+					key: entry.index,
 					disabled: __props.disabled,
 					size: __props.size,
-					prop: `${__props.prop}.${index}`,
+					prop: `${__props.prop}.${entry.index}`,
 					config: actionsConfig.value,
-					model: cardItem,
+					model: entry.cardItem,
+					"last-values": entry.lastCardItem,
+					"is-compare": isCompareMode.value,
 					"label-width": __props.config.labelWidth || "100px",
 					onChange: onChangeHandler
 				}, {
 					header: withCtx(() => [createVNode(unref(MContainer), {
 						class: "fullWidth",
 						config: eventNameConfig.value,
-						model: cardItem,
+						model: entry.cardItem,
+						"last-values": entry.lastCardItem,
+						"is-compare": isCompareMode.value,
 						disabled: __props.disabled,
 						size: __props.size,
-						prop: `${__props.prop}.${index}`,
+						prop: `${__props.prop}.${entry.index}`,
 						onChange: eventNameChangeHandler
 					}, null, 8, [
 						"config",
 						"model",
+						"last-values",
+						"is-compare",
 						"disabled",
 						"size",
 						"prop"
-					]), createVNode(unref(TMagicButton), {
+					]), !isCompareMode.value ? (openBlock(), createBlock(unref(TMagicButton), {
+						key: 0,
 						style: { "color": "#f56c6c" },
 						link: "",
 						icon: unref(Delete),
 						disabled: __props.disabled,
 						size: __props.size,
-						onClick: ($event) => removeEvent(Number(index))
+						onClick: ($event) => removeEvent(Number(entry.index))
 					}, null, 8, [
 						"icon",
 						"disabled",
 						"size",
 						"onClick"
-					])]),
+					])) : createCommentVNode("v-if", true)]),
 					_: 2
 				}, 1032, [
 					"disabled",
@@ -328,6 +373,8 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 					"prop",
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"label-width"
 				]);
 			}), 128))]))]);

package/dist/es/fields/KeyValue.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,12 @@
 import CodeEditor_default from "../layouts/CodeEditor.js";
 import CodeIcon_default from "../icons/CodeIcon.js";
 import { TMagicButton, TMagicInput } from "@tmagic/design";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, unref, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, openBlock, ref, renderList, unref, watchEffect, withCtx } from "vue";
 import { Delete, Plus } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/KeyValue.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-key-value" };
 var _hoisted_2 = { key: 0 };
-var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var KeyValue_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsKeyValue",
 	__name: "KeyValue",
 	props: {
@@ -28,6 +28,9 @@ var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const mForm = inject("mForm");
+		/** 对比模式下隐藏增删/代码切换等操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const records = ref([]);
 		const showCode = ref(false);
 		watchEffect(() => {
@@ -98,7 +101,8 @@ var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 							"disabled",
 							"size"
 						]),
-						createVNode(unref(TMagicButton), {
+						!isCompare.value ? (openBlock(), createBlock(unref(TMagicButton), {
+							key: 0,
 							class: "m-fields-key-value-delete",
 							type: "danger",
 							size: __props.size,
@@ -112,9 +116,10 @@ var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 							"disabled",
 							"icon",
 							"onClick"
-						])
+						])) : createCommentVNode("v-if", true)
 					]);
-				}), 128)), createVNode(unref(TMagicButton), {
+				}), 128)), !isCompare.value ? (openBlock(), createBlock(unref(TMagicButton), {
+					key: 0,
 					type: "primary",
 					size: __props.size,
 					disabled: __props.disabled,
@@ -128,7 +133,7 @@ var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"size",
 					"disabled",
 					"icon"
-				])])) : createCommentVNode("v-if", true),
+				])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
 				__props.config.advanced && showCode.value ? (openBlock(), createBlock(CodeEditor_default, {
 					key: 1,
 					"editor-custom-type": "m-fields-key-value",
@@ -142,7 +147,7 @@ var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					parse: true,
 					onSave: save
 				}, null, 8, ["init-values", "options"])) : createCommentVNode("v-if", true),
-				__props.config.advanced ? (openBlock(), createBlock(unref(TMagicButton), {
+				__props.config.advanced && !isCompare.value ? (openBlock(), createBlock(unref(TMagicButton), {
 					key: 2,
 					size: "default",
 					disabled: __props.disabled,

package/dist/es/fields/PageFragmentSelect.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { Edit } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/PageFragmentSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-page-fragment-select" };
 var _hoisted_2 = { class: "page-fragment-select-container" };
-var PageFragmentSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var PageFragmentSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsPageFragmentSelect",
 	__name: "PageFragmentSelect",
 	props: {

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

@@ -9,7 +9,7 @@ import { TMagicCollapse, TMagicCollapseItem } from "@tmagic/design";
 import { Fragment, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, resolveDynamicComponent, shallowRef, toDisplayString, unref, withCtx } from "vue";
 import { Grid } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/StyleSetter/Index.vue?vue&type=script&setup=true&lang.ts
-var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsStyleSetter",
 	__name: "Index",
 	props: {
@@ -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/BackgroundPosition.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import { Fragment, createBlock, createElementBlock, createElementVNode, createVN
 var _hoisted_1 = { class: "background-position-container" };
 var _hoisted_2 = { class: "presets-value-list" };
 var _hoisted_3 = { class: "custom-value" };
-var BackgroundPosition_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var BackgroundPosition_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "BackgroundPosition",
 	props: {
 		config: {},

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

@@ -7,14 +7,16 @@ var _hoisted_3 = { class: "border-icon-container-row" };
 var _hoisted_4 = { class: "border-icon-container-row" };
 var _hoisted_5 = { class: "border-icon-container-row" };
 var _hoisted_6 = { class: "border-value-container" };
-var Border_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Border_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__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: [
@@ -52,44 +54,72 @@ var Border_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		] }));
 		const selectDirection = (d) => direction.value = d || "";
 		const emit = __emit;
+		const props = __props;
+		const hasValue = (value) => value !== void 0 && value !== null && value !== "";
+		const isConfigured = (d) => [
+			"Width",
+			"Color",
+			"Style"
+		].some((key) => hasValue(props.model?.[`border${d}${key}`]));
 		const change = (value, eventData) => {
 			eventData.changeRecords?.forEach((record) => {
 				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", {
-					class: normalizeClass(["border-icon border-icon-top", { active: direction.value === "Top" }]),
+					class: normalizeClass(["border-icon border-icon-top", {
+						active: direction.value === "Top",
+						configured: isConfigured("Top")
+					}]),
 					onClick: _cache[0] || (_cache[0] = ($event) => selectDirection("Top"))
 				}, null, 2)]),
 				createElementVNode("div", _hoisted_4, [
 					createElementVNode("div", {
-						class: normalizeClass(["border-icon border-icon-left", { active: direction.value === "Left" }]),
+						class: normalizeClass(["border-icon border-icon-left", {
+							active: direction.value === "Left",
+							configured: isConfigured("Left")
+						}]),
 						onClick: _cache[1] || (_cache[1] = ($event) => selectDirection("Left"))
 					}, null, 2),
 					createElementVNode("div", {
-						class: normalizeClass(["border-icon", { active: direction.value === "" }]),
+						class: normalizeClass(["border-icon", {
+							active: direction.value === "",
+							configured: isConfigured("")
+						}]),
 						onClick: _cache[2] || (_cache[2] = ($event) => selectDirection())
 					}, null, 2),
 					createElementVNode("div", {
-						class: normalizeClass(["border-icon border-icon-right", { active: direction.value === "Right" }]),
+						class: normalizeClass(["border-icon border-icon-right", {
+							active: direction.value === "Right",
+							configured: isConfigured("Right")
+						}]),
 						onClick: _cache[3] || (_cache[3] = ($event) => selectDirection("Right"))
 					}, null, 2)
 				]),
 				createElementVNode("div", _hoisted_5, [createElementVNode("div", {
-					class: normalizeClass(["border-icon border-icon-bottom", { active: direction.value === "Bottom" }]),
+					class: normalizeClass(["border-icon border-icon-bottom", {
+						active: direction.value === "Bottom",
+						configured: isConfigured("Bottom")
+					}]),
 					onClick: _cache[4] || (_cache[4] = ($event) => selectDirection("Bottom"))
 				}, null, 2)])
 			]), 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

@@ -12,12 +12,14 @@ var _hoisted_4 = [
 	"disabled",
 	"onChange"
 ];
-var Box_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Box_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Box",
 	props: {
 		disabled: { type: Boolean },
 		size: {},
-		model: {}
+		model: {},
+		lastValues: {},
+		isCompare: { type: Boolean }
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

package/dist/es/fields/StyleSetter/icons/background-repeat/NoRepeat.js

@@ -12,6 +12,6 @@ function _sfc_render(_ctx, _cache) {
 		fill: "#5D5D5D"
 	}, null, -1)])]);
 }
-var NoRepeat_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+var NoRepeat_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 //#endregion
 export { NoRepeat_default as default };

package/dist/es/fields/StyleSetter/icons/background-repeat/Repeat.js

@@ -9,6 +9,6 @@ var _hoisted_1 = {
 function _sfc_render(_ctx, _cache) {
 	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createStaticVNode("<path d=\"M884.736 102.4l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456C696.32 311.296 712.704 327.68 733.184 327.68l147.456 0c20.48 0 36.864-16.384 36.864-36.864L917.504 139.264C921.6 118.784 905.216 102.4 884.736 102.4zM884.736 290.816l-147.456 0L737.28 139.264l147.456 0L884.736 290.816z\"></path><path d=\"M884.736 696.32l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C921.6 712.704 905.216 696.32 884.736 696.32zM884.736 884.736l-147.456 0 0-147.456 147.456 0L884.736 884.736z\"></path><path d=\"M884.736 401.408l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C921.6 417.792 905.216 401.408 884.736 401.408zM884.736 585.728l-147.456 0 0-147.456 147.456 0L884.736 585.728z\"></path><path d=\"M585.728 401.408l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C622.592 417.792 606.208 401.408 585.728 401.408zM585.728 585.728l-147.456 0 0-147.456 147.456 0L585.728 585.728z\"></path><path d=\"M585.728 102.4l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864L622.592 139.264C622.592 118.784 606.208 102.4 585.728 102.4zM585.728 290.816l-147.456 0L438.272 139.264l147.456 0L585.728 290.816z\"></path><path d=\"M585.728 696.32l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C622.592 712.704 606.208 696.32 585.728 696.32zM585.728 884.736l-147.456 0 0-147.456 147.456 0L585.728 884.736z\"></path><path d=\"M290.816 696.32 139.264 696.32c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C327.68 712.704 311.296 696.32 290.816 696.32zM290.816 884.736 139.264 884.736l0-147.456 147.456 0L286.72 884.736z\"></path><path d=\"M290.816 401.408 139.264 401.408c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C327.68 417.792 311.296 401.408 290.816 401.408zM290.816 585.728 139.264 585.728l0-147.456 147.456 0L286.72 585.728z\"></path><path d=\"M290.816 102.4 139.264 102.4c-20.48 0-36.864 16.384-36.864 36.864l0 147.456C102.4 311.296 118.784 327.68 139.264 327.68l147.456 0C311.296 327.68 327.68 311.296 327.68 290.816L327.68 139.264C327.68 118.784 311.296 102.4 290.816 102.4zM290.816 290.816 139.264 290.816 139.264 139.264l147.456 0L286.72 290.816z\"></path>", 9)])]);
 }
-var Repeat_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+var Repeat_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 //#endregion
 export { Repeat_default as default };

package/dist/es/fields/StyleSetter/icons/background-repeat/RepeatX.js

@@ -12,6 +12,6 @@ function _sfc_render(_ctx, _cache) {
 		fill: "#333333"
 	}, null, -1)])]);
 }
-var RepeatX_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+var RepeatX_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 //#endregion
 export { RepeatX_default as default };

package/dist/es/fields/StyleSetter/icons/background-repeat/RepeatY.js

@@ -12,6 +12,6 @@ function _sfc_render(_ctx, _cache) {
 		fill: "#333333"
 	}, null, -1)])]);
 }
-var RepeatY_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+var RepeatY_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 //#endregion
 export { RepeatY_default as default };