@tmagic/editor 1.8.0-beta.11 → 1.8.0-beta.13

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

@@ -1,8 +1,8 @@
 import { useServices } from "../hooks/use-services.js";
-import { getDisplayField } from "../utils/data-source/index.js";
+import { getDisplayField, resolveFieldByPath } from "../utils/data-source/index.js";
 import Icon_default from "../components/Icon.js";
 import { TMagicInput, TMagicTag, getDesignConfig } from "@tmagic/design";
-import { getKeysArray, isNumber } from "@tmagic/utils";
+import { getKeysArray } from "@tmagic/utils";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
 import { Coin } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/DataSourceInput.vue?vue&type=script&setup=true&lang.ts
@@ -132,23 +132,11 @@ var DataSourceInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				cb([]);
 				return;
 			}
-			let fields = ds.fields || [];
-			let key = keys.shift();
-			while (key) {
-				if (isNumber(key)) {
-					key = keys.shift();
-					continue;
-				}
-				for (const field of fields) if (field.name === key) {
-					fields = field.fields || [];
-					key = keys.shift();
-					break;
-				}
-			}
-			if (curCharIsDot(dotIndex)) result = fields || [];
+			const { fields } = resolveFieldByPath(ds.fields, keys, { skipNumberIndices: true });
+			if (curCharIsDot(dotIndex)) result = fields;
 			else if (dotIndex > -1) {
 				const queryName = queryString.substring(dotIndex + 1).toLowerCase();
-				result = fields.filter((field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName)) || [];
+				result = fields.filter((field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName));
 			}
 			cb(result.map((field) => ({
 				value: field.name,

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

@@ -213,6 +213,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const addDialogVisible = useModel(__props, "visible");
 		const { height: editorHeight } = useEditorContentHeight();
 		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createVNode(unref(MagicTable), {
@@ -230,6 +231,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					_: 1
 				}, 8, ["disabled"])])) : createCommentVNode("v-if", true),
 				createVNode(FloatingBox_default, {
+					"body-style": { padding: "0 16px" },
 					visible: addDialogVisible.value,
 					"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),
 					width: width.value,
@@ -237,6 +239,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					height: unref(editorHeight),
 					"onUpdate:height": _cache[3] || (_cache[3] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
 					title: drawerTitle.value,
+					"framework-width": frameworkWidth.value,
 					position: unref(boxPosition)
 				}, {
 					body: withCtx(() => [createVNode(unref(MFormBox), {
@@ -257,6 +260,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					"width",
 					"height",
 					"title",
+					"framework-width",
 					"position"
 				])
 			]);

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

@@ -70,7 +70,16 @@ var DisplayConds_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						value: "key",
 						label: "字段",
 						checkStrictly: false,
-						onChange: fieldOnChange
+						onChange: fieldOnChange,
+						defaultValue: () => [],
+						rules: [{
+							required: true,
+							trigger: "blur",
+							message: "请选择字段"
+						}, {
+							typeMatch: true,
+							trigger: "change"
+						}]
 					} : {
 						type: "data-source-field-select",
 						name: "field",
@@ -83,14 +92,31 @@ var DisplayConds_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 							"boolean",
 							"any"
 						],
-						onChange: fieldOnChange
+						onChange: fieldOnChange,
+						defaultValue: () => [],
+						rules: [{
+							required: true,
+							trigger: "blur",
+							message: "请选择字段"
+						}, {
+							typeMatch: true,
+							trigger: "change"
+						}]
 					},
 					{
 						type: "cond-op-select",
 						parentFields: parentFields.value,
 						label: "条件",
 						width: 140,
-						name: "op"
+						name: "op",
+						rules: [{
+							required: true,
+							trigger: "blur",
+							message: "请选择条件"
+						}, {
+							typeMatch: true,
+							trigger: "change"
+						}]
 					},
 					{
 						label: "值",

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

@@ -1,8 +1,7 @@
 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 { has } from "lodash-es";
@@ -44,75 +43,51 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				labelWidth: "40px",
 				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",
 				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"
+				}],
 				...props.config.actionTypeConfig
 			};
 		});
@@ -125,6 +100,10 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				onChange: (_MForm, _v, { setModel }) => {
 					setModel("method", "");
 				},
+				rules: [{
+					typeMatch: true,
+					trigger: "blur"
+				}],
 				...props.config.targetCompConfig
 			};
 		});
@@ -139,33 +118,16 @@ var EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				},
 				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
 			};
 		});

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

@@ -26,7 +26,6 @@ var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 	},
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
-		const props = __props;
 		const emit = __emit;
 		const list = [
 			{
@@ -57,10 +56,6 @@ var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		];
 		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");
@@ -79,6 +74,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 						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 +83,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 							onAddDiffCount
 						}, null, 40, [
 							"values",
+							"prop",
 							"last-values",
 							"is-compare",
 							"size",

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

@@ -3,8 +3,8 @@ import Repeat_default from "../icons/background-repeat/Repeat.js";
 import RepeatX_default from "../icons/background-repeat/RepeatX.js";
 import RepeatY_default from "../icons/background-repeat/RepeatY.js";
 import NoRepeat_default from "../icons/background-repeat/NoRepeat.js";
-import { MContainer, defineFormItem } from "@tmagic/form";
-import { createBlock, defineComponent, markRaw, openBlock, unref } from "vue";
+import { MContainer, defineFormConfig } from "@tmagic/form";
+import { Fragment, createBlock, createElementBlock, defineComponent, markRaw, openBlock, renderList, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Background.vue?vue&type=script&setup=true&lang.ts
 var Background_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Background",
@@ -13,12 +13,13 @@ var Background_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		lastValues: {},
 		isCompare: { type: Boolean },
 		disabled: { type: Boolean },
-		size: {}
+		size: {},
+		prop: {}
 	},
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const config = defineFormItem({ items: [
+		const formConfig = defineFormConfig([
 			{
 				name: "backgroundColor",
 				text: "背景色",
@@ -55,7 +56,26 @@ var Background_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 						text: "等比覆盖",
 						tooltip: "等比覆盖 cover"
 					}
-				]
+				],
+				rules: [{ typeMatch: false }, { validator: ({ value, callback }) => {
+					if (value === "" || value === null || value === void 0) return callback();
+					const keywords = [
+						"auto",
+						"cover",
+						"contain",
+						"inherit",
+						"initial",
+						"revert",
+						"unset"
+					];
+					const lengthPercent = /^-?\d+(\.\d+)?(px|em|rem|ex|ch|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)$/;
+					const singleValue = (v) => keywords.includes(v) || lengthPercent.test(v);
+					const parts = String(value).trim().split(/\s+/);
+					if (parts.length > 1 && (parts.includes("cover") || parts.includes("contain"))) return callback("cover/contain 不能与其他值组合");
+					if (parts.length > 2) return callback("backgroundSize 最多支持两个值");
+					if (parts.every((part) => singleValue(part))) return callback();
+					return callback("backgroundSize 值不合法");
+				} }]
 			},
 			{
 				name: "backgroundRepeat",
@@ -93,29 +113,34 @@ var Background_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				component: BackgroundPosition_default,
 				labelWidth: "68px"
 			}
-		] });
+		]);
 		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,
-				onAddDiffCount
-			}, null, 8, [
-				"config",
-				"model",
-				"last-values",
-				"is-compare",
-				"size",
-				"disabled"
-			]);
+			return openBlock(true), createElementBlock(Fragment, null, renderList(unref(formConfig), (item) => {
+				return openBlock(), createBlock(unref(MContainer), {
+					prop: __props.prop,
+					key: item.name,
+					config: item,
+					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
+					size: __props.size,
+					disabled: __props.disabled,
+					onChange: change,
+					onAddDiffCount
+				}, null, 8, [
+					"prop",
+					"config",
+					"model",
+					"last-values",
+					"is-compare",
+					"size",
+					"disabled"
+				]);
+			}), 128);
 		};
 	}
 });

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

@@ -9,24 +9,26 @@ var Border_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		lastValues: {},
 		isCompare: { type: Boolean },
 		disabled: { type: Boolean },
-		size: {}
+		size: {},
+		prop: {}
 	},
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const config = defineFormItem({ items: [{
+		const config = defineFormItem({
 			labelWidth: "68px",
 			name: "borderRadius",
 			text: "圆角",
 			type: "data-source-field-select",
 			fieldConfig: { type: "text" }
-		}] });
+		});
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
 		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(MContainer), {
+				prop: __props.prop,
 				config: unref(config),
 				model: __props.values,
 				"last-values": __props.lastValues,
@@ -36,6 +38,7 @@ var Border_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				onChange: change,
 				onAddDiffCount
 			}, null, 8, [
+				"prop",
 				"config",
 				"model",
 				"last-values",

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

@@ -1,8 +1,8 @@
 import Left_default from "../icons/text-align/Left.js";
 import Center_default from "../icons/text-align/Center.js";
 import Right_default from "../icons/text-align/Right.js";
-import { MContainer, defineFormItem } from "@tmagic/form";
-import { createBlock, defineComponent, markRaw, openBlock, unref } from "vue";
+import { MContainer, defineFormConfig } from "@tmagic/form";
+import { Fragment, createBlock, createElementBlock, defineComponent, markRaw, openBlock, renderList, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Font.vue?vue&type=script&setup=true&lang.ts
 var Font_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Font",
@@ -11,12 +11,13 @@ var Font_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		lastValues: {},
 		isCompare: { type: Boolean },
 		disabled: { type: Boolean },
-		size: {}
+		size: {},
+		prop: {}
 	},
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const config = defineFormItem({ items: [
+		const formConfig = defineFormConfig([
 			{
 				type: "row",
 				items: [{
@@ -77,29 +78,34 @@ var Font_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 					}
 				]
 			}
-		] });
+		]);
 		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,
-				onAddDiffCount
-			}, null, 8, [
-				"config",
-				"model",
-				"last-values",
-				"is-compare",
-				"size",
-				"disabled"
-			]);
+			return openBlock(true), createElementBlock(Fragment, null, renderList(unref(formConfig), (item, index) => {
+				return openBlock(), createBlock(unref(MContainer), {
+					prop: __props.prop,
+					key: index,
+					config: item,
+					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
+					size: __props.size,
+					disabled: __props.disabled,
+					onChange: change,
+					onAddDiffCount
+				}, null, 8, [
+					"prop",
+					"config",
+					"model",
+					"last-values",
+					"is-compare",
+					"size",
+					"disabled"
+				]);
+			}), 128);
 		};
 	}
 });

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

@@ -13,8 +13,8 @@ import FlexEnd_default from "../icons/justify-content/FlexEnd.js";
 import FlexStart_default from "../icons/justify-content/FlexStart.js";
 import SpaceAround_default from "../icons/justify-content/SpaceAround.js";
 import SpaceBetween_default from "../icons/justify-content/SpaceBetween.js";
-import { MContainer, defineFormItem } from "@tmagic/form";
-import { Fragment, createElementBlock, createVNode, defineComponent, markRaw, openBlock, unref, vShow, withDirectives } from "vue";
+import { MContainer, defineFormConfig } from "@tmagic/form";
+import { Fragment, createBlock, createElementBlock, createVNode, defineComponent, markRaw, openBlock, renderList, unref, vShow, withDirectives } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Layout.vue?vue&type=script&setup=true&lang.ts
 var Layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Layout",
@@ -23,12 +23,13 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		lastValues: {},
 		isCompare: { type: Boolean },
 		disabled: { type: Boolean },
-		size: {}
+		size: {},
+		prop: {}
 	},
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const config = defineFormItem({ items: [
+		const formConfig = defineFormConfig([
 			{
 				name: "display",
 				text: "模式",
@@ -257,29 +258,34 @@ var Layout_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 					fieldConfig: { type: "text" }
 				}]
 			}
-		] });
+		]);
 		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,
-				onAddDiffCount
-			}, null, 8, [
-				"config",
-				"model",
-				"last-values",
-				"is-compare",
-				"size",
-				"disabled"
-			]), withDirectives(createVNode(Box_default, {
+			return openBlock(), createElementBlock(Fragment, null, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(formConfig), (item) => {
+				return openBlock(), createBlock(unref(MContainer), {
+					prop: __props.prop,
+					key: item.name,
+					config: item,
+					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
+					size: __props.size,
+					disabled: __props.disabled,
+					onChange: change,
+					onAddDiffCount
+				}, null, 8, [
+					"prop",
+					"config",
+					"model",
+					"last-values",
+					"is-compare",
+					"size",
+					"disabled"
+				]);
+			}), 128)), withDirectives(createVNode(Box_default, {
 				model: __props.values,
 				"last-values": __props.lastValues,
 				"is-compare": __props.isCompare,