@tmagic/editor 1.8.0-beta.7 → 1.8.0-manmanyu.10

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

@@ -1,14 +1,13 @@
 import { useServices } from "../../hooks/use-services.js";
 import Icon_default from "../../components/Icon.js";
+import DatasourceIcon_default from "../../icons/DatasourceIcon.js";
 import FieldSelect_default from "./FieldSelect.js";
 import { getFormField } from "@tmagic/form";
 import { TMagicButton, TMagicTooltip, tMagicMessage } from "@tmagic/design";
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, removeDataSourceFieldPrefix } from "@tmagic/utils";
-import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, openBlock, ref, resolveComponent, resolveDynamicComponent, unref, watch, withCtx } from "vue";
-import { Coin } from "@element-plus/icons-vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, normalizeClass, openBlock, ref, resolveComponent, resolveDynamicComponent, unref, watch, withCtx } from "vue";
 //#region packages/editor/src/fields/DataSourceFieldSelect/Index.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "m-fields-data-source-field-select" };
-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: "MFieldsDataSourceFieldSelect",
 	__name: "Index",
 	props: {
@@ -24,13 +23,17 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const props = __props;
 		const showDataSourceFieldSelect = ref(false);
+		const isSelectValid = computed(() => !disabledDataSource.value && (showDataSourceFieldSelect.value || !props.config.fieldConfig));
 		watch(() => props.model[props.name], (value) => {
 			if (Array.isArray(value) && typeof value[0] === "string" && value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)) showDataSourceFieldSelect.value = true;
 			else showDataSourceFieldSelect.value = false;
@@ -100,7 +103,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value;
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [!disabledDataSource.value && (showDataSourceFieldSelect.value || !__props.config.fieldConfig) ? (openBlock(), createBlock(FieldSelect_default, {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["m-fields-data-source-field-select", { [`data-source-field-${type.value}`]: !isSelectValid.value }]) }, [isSelectValid.value ? (openBlock(), createBlock(FieldSelect_default, {
 				key: 0,
 				"model-value": __props.model[__props.name],
 				disabled: __props.disabled,
@@ -151,7 +154,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					disabled: __props.disabled,
 					onClick: onToggleDataSourceFieldSelectHandler
 				}, {
-					default: withCtx(() => [createVNode(Icon_default, { icon: unref(Coin) }, null, 8, ["icon"])]),
+					default: withCtx(() => [createVNode(Icon_default, { icon: DatasourceIcon_default })]),
 					_: 1
 				}, 8, [
 					"type",
@@ -159,7 +162,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					"disabled"
 				])]),
 				_: 1
-			}, 8, ["disabled"])) : createCommentVNode("v-if", true)]);
+			}, 8, ["disabled"])) : createCommentVNode("v-if", true)], 2);
 		};
 	}
 });

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

@@ -14,10 +14,10 @@ var _hoisted_2 = {
 	key: 0,
 	class: "m-editor-data-source-fields-footer"
 };
-var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceFields",
 	__name: "DataSourceFields",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		config: {},
 		model: {},
 		initValues: {},
@@ -30,7 +30,10 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	}, {
 		"width": { default: 670 },
 		"widthModifiers": {},
@@ -45,7 +48,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		},
 		"visible1Modifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["change"], [
+	emits: /*@__PURE__*/ mergeModels(["change"], [
 		"update:width",
 		"update:visible",
 		"update:visible1"

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

@@ -15,7 +15,7 @@ var _hoisted_2 = { style: {
 	"font-size": "10px",
 	"color": "rgba(0, 0, 0, 0.6)"
 } };
-var DataSourceInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceInput",
 	__name: "DataSourceInput",
 	props: {
@@ -31,7 +31,10 @@ var DataSourceInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js

@@ -11,7 +11,7 @@ import { Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/DataSourceMethodSelect.vue?vue&type=script&setup=true&name=true&lang.ts
 var _hoisted_1 = { class: "m-fields-data-source-method-select" };
 var _hoisted_2 = { class: "data-source-method-select-container" };
-var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceMethodSelect",
 	__name: "DataSourceMethodSelect",
 	props: {
@@ -27,7 +27,10 @@ var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

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

@@ -9,7 +9,7 @@ var _hoisted_2 = {
 	key: 0,
 	class: "m-editor-data-source-methods-footer"
 };
-var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceMethods",
 	__name: "DataSourceMethods",
 	props: {
@@ -25,7 +25,10 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

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

@@ -14,10 +14,10 @@ var _hoisted_2 = {
 	key: 0,
 	class: "m-editor-data-source-fields-footer"
 };
-var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+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: {},
@@ -30,7 +30,10 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	}, {
 		"width": { default: 670 },
 		"widthModifiers": {},
@@ -40,7 +43,7 @@ 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;

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: {
@@ -23,7 +23,10 @@ var DataSourceSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

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: {
@@ -19,7 +19,10 @@ var DisplayConds_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
@@ -43,11 +46,14 @@ var DisplayConds_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			titlePrefix: props.config.titlePrefix,
 			expandAll: true,
 			enableToggleMode: false,
+			flat: props.config.flat,
 			items: [{
 				type: "table",
 				name: "cond",
-				operateColWidth: 80,
+				operateColWidth: props.config.operateColWidth,
 				enableToggleMode: false,
+				fixed: props.config.fixed,
+				flat: props.config.flat,
 				items: [
 					parentFields.value.length ? {
 						type: "cascader",

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

@@ -4,16 +4,19 @@ 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, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 import { has } from "lodash-es";
-import { Delete } from "@element-plus/icons-vue";
+import { Delete, Plus } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/EventSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-event-select" };
 var _hoisted_2 = {
 	key: 1,
-	class: "fullWidth"
+	class: "fullWidth event-select-container"
 };
-var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_3 = { class: "event-select-header" };
+var _hoisted_4 = { class: "event-item-header" };
+var _hoisted_5 = { class: "event-item-title" };
+var EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsEventSelect",
 	__name: "EventSelect",
 	props: {
@@ -26,7 +29,10 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		disabled: { type: Boolean },
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
@@ -36,12 +42,12 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		const eventNameConfig = computed(() => {
 			return {
 				name: "name",
-				text: "事件",
+				text: "事件类型",
 				type: (mForm, { formValue }) => {
 					if (props.config.src !== "component" || formValue.type === "page-fragment-container" && formValue.pageFragmentId) return "cascader";
 					return "select";
 				},
-				labelWidth: "40px",
+				labelWidth: "70px",
 				checkStrictly: () => props.config.src !== "component",
 				valueSeparator: ".",
 				options: (mForm, { formValue }) => {
@@ -93,6 +99,7 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				name: "actionType",
 				text: "联动类型",
 				type: "select",
+				labelPosition: "left",
 				defaultValue: ActionType.COMP,
 				options: () => {
 					const o = [{
@@ -121,6 +128,7 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				name: "to",
 				text: "联动组件",
 				type: "ui-select",
+				labelPosition: "left",
 				display: (_mForm, { model }) => model.actionType === ActionType.COMP,
 				onChange: (_MForm, _v, { setModel }) => {
 					setModel("method", "");
@@ -132,6 +140,7 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return {
 				name: "method",
 				text: "动作",
+				labelPosition: "left",
 				type: (mForm, { model }) => {
 					const to = editorService.getNodeById(model.to);
 					if (to && to.type === "page-fragment-container" && to.pageFragmentId) return "cascader";
@@ -224,12 +233,16 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		}));
 		const actionsConfig = computed(() => defineFormItem({
 			type: "panel",
+			labelPosition: "left",
+			flat: true,
 			items: [{
 				type: "group-list",
 				name: "actions",
 				expandAll: true,
 				enableToggleMode: false,
 				titlePrefix: "动作",
+				labelPosition: "left",
+				flat: true,
 				items: [
 					actionTypeConfig.value,
 					targetCompConfig.value,
@@ -311,73 +324,97 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				"last-values",
 				"is-compare",
 				"config"
-			])) : (openBlock(), createElementBlock("div", _hoisted_2, [!isCompareMode.value ? (openBlock(), createBlock(unref(TMagicButton), {
-				key: 0,
-				class: "create-button",
-				type: "primary",
-				size: __props.size,
-				disabled: __props.disabled,
-				onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
-			}, {
-				default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("添加事件", -1)])]),
-				_: 1
-			}, 8, ["size", "disabled"])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(displayList.value, (entry) => {
-				return openBlock(), createBlock(unref(MPanel), {
-					key: entry.index,
-					disabled: __props.disabled,
+			])) : (openBlock(), createElementBlock("div", _hoisted_2, [
+				createElementVNode("div", _hoisted_3, [_cache[3] || (_cache[3] = createElementVNode("div", { class: "event-select-title" }, "事件配置", -1)), !isCompareMode.value && displayList.value.length > 0 ? (openBlock(), createBlock(unref(TMagicButton), {
+					key: 0,
+					class: "create-button",
+					text: "",
+					type: "primary",
+					icon: unref(Plus),
 					size: __props.size,
-					prop: `${__props.prop}.${entry.index}`,
-					config: actionsConfig.value,
-					model: entry.cardItem,
-					"last-values": entry.lastCardItem,
-					"is-compare": isCompareMode.value,
-					"label-width": __props.config.labelWidth || "100px",
-					onChange: onChangeHandler
+					disabled: __props.disabled,
+					onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
 				}, {
-					header: withCtx(() => [createVNode(unref(MContainer), {
-						class: "fullWidth",
-						config: eventNameConfig.value,
-						model: entry.cardItem,
-						"last-values": entry.lastCardItem,
-						"is-compare": isCompareMode.value,
+					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("添加事件", -1)])]),
+					_: 1
+				}, 8, [
+					"icon",
+					"size",
+					"disabled"
+				])) : createCommentVNode("v-if", true)]),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(displayList.value, (entry) => {
+					return openBlock(), createBlock(unref(MPanel), {
+						key: entry.index,
 						disabled: __props.disabled,
 						size: __props.size,
 						prop: `${__props.prop}.${entry.index}`,
-						onChange: eventNameChangeHandler
-					}, null, 8, [
+						config: actionsConfig.value,
+						model: entry.cardItem,
+						"last-values": entry.lastCardItem,
+						"is-compare": isCompareMode.value,
+						"hide-expand": true,
+						"label-width": __props.config.labelWidth || "100px",
+						onChange: onChangeHandler
+					}, {
+						header: withCtx(() => [createElementVNode("div", _hoisted_4, [
+							createElementVNode("div", _hoisted_5, "事件" + toDisplayString(Number(entry.index) + 1), 1),
+							createVNode(unref(MContainer), {
+								class: "fullWidth",
+								config: eventNameConfig.value,
+								model: entry.cardItem,
+								"last-values": entry.lastCardItem,
+								"is-compare": isCompareMode.value,
+								disabled: __props.disabled,
+								size: __props.size,
+								prop: `${__props.prop}.${entry.index}`,
+								onChange: eventNameChangeHandler
+							}, null, 8, [
+								"config",
+								"model",
+								"last-values",
+								"is-compare",
+								"disabled",
+								"size",
+								"prop"
+							]),
+							!isCompareMode.value ? (openBlock(), createBlock(unref(TMagicButton), {
+								key: 0,
+								class: "event-item-delete-button",
+								link: "",
+								icon: unref(Delete),
+								disabled: __props.disabled,
+								size: __props.size,
+								onClick: ($event) => removeEvent(Number(entry.index))
+							}, null, 8, [
+								"icon",
+								"disabled",
+								"size",
+								"onClick"
+							])) : createCommentVNode("v-if", true)
+						])]),
+						_: 2
+					}, 1032, [
+						"disabled",
+						"size",
+						"prop",
 						"config",
 						"model",
 						"last-values",
 						"is-compare",
-						"disabled",
-						"size",
-						"prop"
-					]), !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(entry.index))
-					}, null, 8, [
-						"icon",
-						"disabled",
-						"size",
-						"onClick"
-					])) : createCommentVNode("v-if", true)]),
-					_: 2
-				}, 1032, [
-					"disabled",
-					"size",
-					"prop",
-					"config",
-					"model",
-					"last-values",
-					"is-compare",
-					"label-width"
-				]);
-			}), 128))]))]);
+						"label-width"
+					]);
+				}), 128)),
+				!isCompareMode.value ? (openBlock(), createBlock(unref(TMagicButton), {
+					key: 0,
+					class: "create-button fullWidth",
+					icon: unref(Plus),
+					disabled: __props.disabled,
+					onClick: _cache[1] || (_cache[1] = ($event) => addEvent())
+				}, {
+					default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("添加事件", -1)])]),
+					_: 1
+				}, 8, ["icon", "disabled"])) : createCommentVNode("v-if", true)
+			]))]);
 		};
 	}
 });

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

@@ -6,7 +6,7 @@ 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: {
@@ -22,7 +22,10 @@ var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

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: {
@@ -23,7 +23,10 @@ var PageFragmentSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

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

@@ -1,4 +1,3 @@
-import Icon_default from "../../components/Icon.js";
 import Background_default from "./pro/Background.js";
 import Font_default from "./pro/Font.js";
 import Layout_default from "./pro/Layout.js";
@@ -7,9 +6,8 @@ import Border_default from "./pro/Border.js";
 import Transform_default from "./pro/Transform.js";
 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: {
@@ -22,7 +20,10 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		disabled: { type: Boolean },
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
@@ -75,7 +76,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						key: index,
 						name: `${index}`
 					}, {
-						title: withCtx(() => [createVNode(Icon_default, { icon: unref(Grid) }, null, 8, ["icon"]), createTextVNode(toDisplayString(item.title), 1)]),
+						title: withCtx(() => [createTextVNode(toDisplayString(item.title), 1)]),
 						default: withCtx(() => [item.component ? (openBlock(), createBlock(resolveDynamicComponent(item.component), {
 							key: 0,
 							values: __props.model[__props.name],

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: {},
@@ -16,7 +16,10 @@ var BackgroundPosition_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		disabled: { type: Boolean },
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

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

@@ -7,7 +7,7 @@ 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: {},
@@ -85,7 +85,7 @@ var Border_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 						onClick: _cache[1] || (_cache[1] = ($event) => selectDirection("Left"))
 					}, null, 2),
 					createElementVNode("div", {
-						class: normalizeClass(["border-icon", {
+						class: normalizeClass(["border-icon center", {
 							active: direction.value === "",
 							configured: isConfigured("")
 						}]),

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

@@ -12,7 +12,7 @@ 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 },