@tmagic/editor 1.8.0-beta.2 → 1.8.0-beta.20

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

@@ -1,19 +1,20 @@
 import { useServices } from "../hooks/use-services.js";
-import { getCascaderOptionsFromFields } from "../utils/data-source/index.js";
+import { getCompActionAllowedValues, getCompActionOptions, getEventNameAllowedValues, getEventNameOptions, normalizeCompActionValue } from "../utils/event.js";
 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, 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 EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsEventSelect",
 	__name: "EventSelect",
 	props: {
@@ -26,7 +27,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,82 +40,65 @@ 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 }) => {
-					let events = [];
-					if (props.config.src === "component") {
-						events = eventsService.getEvent(formValue.type);
-						if (formValue.type === "page-fragment-container" && formValue.pageFragmentId) {
-							const pageFragment = editorService.get("root")?.items?.find((page) => page.id === formValue.pageFragmentId);
-							if (pageFragment) {
-								events = [{
-									label: pageFragment.name || "页面片容器",
-									value: pageFragment.id,
-									children: events
-								}];
-								pageFragment.items.forEach((node) => {
-									traverseNode(node, (node) => {
-										const nodeEvents = node.type && eventsService.getEvent(node.type) || [];
-										events.push({
-											label: `${node.name}_${node.id}`,
-											value: `${node.id}`,
-											children: nodeEvents
-										});
-									});
-								});
-								return events;
-							}
-						}
-						return events.map((option) => ({
-							text: option.label,
-							value: option.value
-						}));
-					}
-					if (props.config.src === "datasource") {
-						events = dataSourceService.getFormEvent(formValue.type);
-						const fields = dataSourceService.getDataSourceById(formValue.id)?.fields || [];
-						if (fields.length > 0) return [...events, {
-							label: "数据变化",
-							value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
-							children: getCascaderOptionsFromFields(fields)
-						}];
-						return events;
-					}
-				},
+				options: (_mForm, { formValue }) => getEventNameOptions(props.config.src, formValue),
+				rules: [{
+					validator: ({ value, callback }, { formValue }) => {
+						const allowedNames = getEventNameAllowedValues(props.config, formValue);
+						if (allowedNames && allowedNames.size > 0 && value && !allowedNames.has(value)) return callback(`事件名(${value})不存在`);
+						callback();
+					},
+					trigger: "blur"
+				}],
 				...props.config.eventNameConfig
 			};
 		});
+		const actionTypeOptions = computed(() => {
+			const o = [{
+				text: "组件",
+				label: "组件",
+				value: ActionType.COMP
+			}];
+			if (!propsService.getDisabledCodeBlock()) o.push({
+				text: "代码",
+				label: "代码",
+				disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
+				value: ActionType.CODE
+			});
+			if (!propsService.getDisabledDataSource()) o.push({
+				text: "数据源",
+				label: "数据源",
+				value: ActionType.DATA_SOURCE
+			});
+			return o;
+		});
 		const actionTypeConfig = computed(() => {
 			return {
 				name: "actionType",
 				text: "联动类型",
 				type: "select",
+				labelPosition: "left",
 				defaultValue: ActionType.COMP,
-				options: () => {
-					const o = [{
-						text: "组件",
-						label: "组件",
-						value: ActionType.COMP
-					}];
-					if (!propsService.getDisabledCodeBlock()) o.push({
-						text: "代码",
-						label: "代码",
-						disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
-						value: ActionType.CODE
-					});
-					if (!propsService.getDisabledDataSource()) o.push({
-						text: "数据源",
-						label: "数据源",
-						value: ActionType.DATA_SOURCE
-					});
-					return o;
+				options: actionTypeOptions.value,
+				rules: [{
+					required: true,
+					message: "联动类型不能为空"
+				}, {
+					typeMatch: true,
+					trigger: "blur"
+				}],
+				onChange: (_mForm, _v, { setModel }) => {
+					setModel("to", "");
+					setModel("method", "");
+					setModel("codeId", "");
+					setModel("dataSourceMethod", []);
 				},
 				...props.config.actionTypeConfig
 			};
@@ -121,10 +108,15 @@ 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 }) => {
+				onChange: (_mForm, _v, { setModel }) => {
 					setModel("method", "");
 				},
+				rules: [{
+					typeMatch: true,
+					trigger: "blur"
+				}],
 				...props.config.targetCompConfig
 			};
 		});
@@ -132,6 +124,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";
@@ -139,33 +132,16 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				},
 				checkStrictly: () => props.config.src !== "component",
 				display: (mForm, { model }) => model.actionType === ActionType.COMP,
-				options: (mForm, { model }) => {
-					const node = editorService.getNodeById(model.to);
-					if (!node?.type) return [];
-					let methods = [];
-					methods = eventsService.getMethod(node.type, model.to);
-					if (node.type === "page-fragment-container" && node.pageFragmentId) {
-						const pageFragment = editorService.get("root")?.items?.find((page) => page.id === node.pageFragmentId);
-						if (pageFragment) {
-							methods = [];
-							pageFragment.items.forEach((node) => {
-								traverseNode(node, (node) => {
-									const nodeMethods = node.type && eventsService.getMethod(node.type, node.id) || [];
-									if (nodeMethods.length) methods.push({
-										label: `${node.name}_${node.id}`,
-										value: `${node.id}`,
-										children: nodeMethods
-									});
-								});
-							});
-							return methods;
-						}
+				options: (_mForm, { model }) => getCompActionOptions(model.to),
+				rules: [{
+					trigger: "blur",
+					validator: ({ value, callback }, { model }) => {
+						const allowedMethods = getCompActionAllowedValues(props.config, model);
+						const normalized = normalizeCompActionValue(value);
+						if (allowedMethods && allowedMethods.size > 0 && normalized && !allowedMethods.has(normalized)) return callback(`动作名(${normalized})不存在`);
+						callback();
 					}
-					return methods.map((method) => ({
-						text: method.label,
-						value: method.value
-					}));
-				},
+				}],
 				...props.config.compActionConfig
 			};
 		});
@@ -224,12 +200,14 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		}));
 		const actionsConfig = computed(() => defineFormItem({
 			type: "panel",
+			labelPosition: "left",
 			items: [{
 				type: "group-list",
 				name: "actions",
 				expandAll: true,
 				enableToggleMode: false,
 				titlePrefix: "动作",
+				labelPosition: "left",
 				items: [
 					actionTypeConfig.value,
 					targetCompConfig.value,
@@ -311,73 +289,93 @@ 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": false,
+						"label-width": __props.config.labelWidth || "100px",
+						onChange: onChangeHandler
+					}, {
+						header: withCtx(() => [createElementVNode("div", _hoisted_4, [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,11 +20,13 @@ 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 }) {
-		const props = __props;
 		const emit = __emit;
 		const list = [
 			{
@@ -57,10 +57,6 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		];
 		const collapseValue = shallowRef(Array(list.length).fill(1).map((x, i) => `${i}`));
 		const change = (v, eventData) => {
-			eventData.changeRecords?.forEach((record) => {
-				if (props.prop) record.propPath = `${props.prop}.${record.propPath}`;
-				else if (props.name) record.propPath = `${props.name}.${record.propPath}`;
-			});
 			emit("change", v, eventData);
 		};
 		const onAddDiffCount = () => emit("addDiffCount");
@@ -75,10 +71,11 @@ 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],
+							prop: __props.prop || __props.name,
 							"last-values": __props.lastValues?.[__props.name],
 							"is-compare": __props.isCompare,
 							size: __props.size,
@@ -87,6 +84,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 							onAddDiffCount
 						}, null, 40, [
 							"values",
+							"prop",
 							"last-values",
 							"is-compare",
 							"size",

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: {},
@@ -54,6 +54,13 @@ 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 });
@@ -63,25 +70,40 @@ var Border_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		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 center", {
+							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), {

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 },

package/dist/es/fields/StyleSetter/icons/align-items/Center.js

@@ -0,0 +1,31 @@
+import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_export-helper.js";
+import { createElementBlock, createElementVNode, openBlock } from "vue";
+//#region packages/editor/src/fields/StyleSetter/icons/align-items/Center.vue
+var _sfc_main = {};
+var _hoisted_1 = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "16",
+	height: "16",
+	viewBox: "0 0 16 16",
+	fill: "currentColor"
+};
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", { d: "M12 4C12.5523 4 13 4.44772 13 5V11C13 11.5523 12.5523 12 12 12H4C3.44772 12 3 11.5523 3 11V5C3 4.44772 3.44772 4 4 4H12ZM4.5 5C4.22386 5 4 5.22386 4 5.5V10.5C4 10.7761 4.22386 11 4.5 11H11.5C11.7761 11 12 10.7761 12 10.5V5.5C12 5.22386 11.7761 5 11.5 5H4.5Z" }, null, -1), createElementVNode("rect", {
+		x: "13.75",
+		y: "7.75",
+		width: "0.5",
+		height: "11.5",
+		rx: "0.25",
+		transform: "rotate(90 13.75 7.75)",
+		stroke: "black",
+		"stroke-opacity": "0.3",
+		style: {
+			"stroke": "black",
+			"stroke-opacity": "0.3"
+		},
+		"stroke-width": "0.5"
+	}, null, -1)])]);
+}
+var Center_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+//#endregion
+export { Center_default as default };