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

package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js

@@ -18,13 +18,16 @@ import dep_default from "./services/dep.js";
 import keybinding_default from "./services/keybinding.js";
 import stageOverlay_default from "./services/stageOverlay.js";
 import { initServiceEvents, initServiceState } from "./initService.js";
-import { createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, ref, renderSlot, unref, withCtx } from "vue";
+import { M_THEME_KEY } from "@tmagic/design";
+import { computed, createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, ref, renderSlot, unref, withCtx } from "vue";
 import { EventEmitter } from "events";
 //#region packages/editor/src/Editor.vue?vue&type=script&setup=true&lang.ts
 var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditor",
 	__name: "Editor",
 	props: /*@__PURE__*/ mergeDefaults({
+		isLargeStageContainer: { type: Boolean },
+		theme: {},
 		modelValue: {},
 		componentGroupList: {},
 		datasourceList: {},
@@ -138,6 +141,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		* 与 PropsPanel 通过 `:extend-state` 显式传入的方式保持等价。
 		*/
 		provide("extendFormState", props.extendFormState);
+		provide("isLargeStageContainer", computed(() => props.isLargeStageContainer));
 		/**
 		* 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
 		* 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
@@ -150,6 +154,12 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		*/
 		provide("historyListExtraTabs", props.historyListExtraTabs);
 		provide("eventBus", new EventEmitter());
+		/**
+		* 把当前主题以响应式 ref 形式 provide 给后代，供包含 `Teleport` 的组件
+		* （如 `TMagicPopover` / `FloatingBox` / `ContentMenu`）在传送目标上挂 `m-theme--<theme>`
+		* 类，让主题级 CSS 变量在 portal 节点上也能命中。详见 `@tmagic/design/theme.ts`。
+		*/
+		provide(M_THEME_KEY, computed(() => props.theme ?? ""));
 		const propsPanelMountedHandler = (e) => {
 			propsPanelRef.value = e;
 			emit("props-panel-mounted", e);
@@ -173,7 +183,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				"disabled-page-fragment": __props.disabledPageFragment,
 				"page-bar-sort-options": __props.pageBarSortOptions,
 				"page-filter-function": __props.pageFilterFunction,
-				"hide-sidebar": __props.hideSidebar
+				"hide-sidebar": __props.hideSidebar,
+				theme: __props.theme
 			}, {
 				header: withCtx(() => [renderSlot(_ctx.$slots, "header")]),
 				nav: withCtx(() => [renderSlot(_ctx.$slots, "nav", { editorService: unref(editor_default) }, () => [createVNode(NavMenu_default, { data: __props.menu }, null, 8, ["data"])])]),
@@ -254,7 +265,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 				"disabled-page-fragment",
 				"page-bar-sort-options",
 				"page-filter-function",
-				"hide-sidebar"
+				"hide-sidebar",
+				"theme"
 			]);
 		};
 	}

package/dist/es/components/ContentMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import ToolButton_default from "./ToolButton.js";
-import { useZIndex } from "@tmagic/design";
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveComponent, useTemplateRef, vShow, withCtx, withDirectives, withModifiers } from "vue";
+import { useThemeClass, useZIndex } from "@tmagic/design";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveComponent, unref, useTemplateRef, vShow, withCtx, withDirectives, withModifiers } from "vue";
 //#region packages/editor/src/components/ContentMenu.vue?vue&type=script&setup=true&lang.ts
 var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorContentMenu",
@@ -29,6 +29,13 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const buttonRefs = useTemplateRef("buttons");
 		const subMenuRef = useTemplateRef("subMenu");
 		const visible = ref(false);
+		/**
+		* 主题修饰类（来自最近的 `<MEditor>` / `<MForm>` 祖先 provide）。
+		* - 顶层 `ContentMenu` 渲染在编辑器子树中，加上去是冗余但无害；
+		* - 子菜单（递归 `<content-menu :is-sub-menu="true">` 被 `<teleport to="body">` 送到 body）
+		*   不在编辑器子树中，必须显式挂上主题类，主题级 CSS 变量才能命中。
+		*/
+		const themeClass = useThemeClass();
 		const subMenuData = ref([]);
 		const zIndex = useZIndex();
 		const curZIndex = ref(0);
@@ -59,15 +66,29 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			if (contains(target)) return;
 			hide();
 		};
+		const fixPosition = () => {
+			const menu = menuEl.value;
+			if (!menu || !visible.value) return;
+			const menuHeight = menu.clientHeight;
+			const menuWidth = menu.clientWidth;
+			let { top, left } = menuPosition.value;
+			if (top + menuHeight > document.body.clientHeight) top = Math.max(0, document.body.clientHeight - menuHeight);
+			if (left + menuWidth > document.body.clientWidth) left = Math.max(0, document.body.clientWidth - menuWidth);
+			if (top !== menuPosition.value.top || left !== menuPosition.value.left) menuPosition.value = {
+				top,
+				left
+			};
+		};
 		const setPosition = (e) => {
-			const menuHeight = menuEl.value?.clientHeight || 0;
-			let top = e.clientY;
-			if (menuHeight + e.clientY > document.body.clientHeight) top = document.body.clientHeight - menuHeight;
 			menuPosition.value = {
-				top,
+				top: e.clientY,
 				left: e.clientX
 			};
+			fixPosition();
 		};
+		const resizeObserver = new ResizeObserver(() => {
+			fixPosition();
+		});
 		const show = (e) => {
 			visible.value = true;
 			nextTick(() => {
@@ -96,10 +117,12 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			emit("mouseenter");
 		};
 		onMounted(() => {
+			if (menuEl.value) resizeObserver.observe(menuEl.value);
 			if (props.isSubMenu) return;
 			globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
 		});
 		onBeforeUnmount(() => {
+			resizeObserver.disconnect();
 			if (props.isSubMenu) return;
 			globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
 		});
@@ -118,8 +141,8 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				persisted: ""
 			}, {
 				default: withCtx(() => [withDirectives(createElementVNode("div", {
-					class: "magic-editor-content-menu",
 					ref: "menu",
+					class: normalizeClass(["magic-editor-content-menu", unref(themeClass)]),
 					style: normalizeStyle(menuStyle.value),
 					onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler()),
 					onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
@@ -150,7 +173,7 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 						"is-sub-menu": true,
 						onHide: hide
 					}, null, 8, ["active", "menu-data"])) : createCommentVNode("v-if", true)]))
-				], 36), [[vShow, visible.value]])]),
+				], 38), [[vShow, visible.value]])]),
 				_: 3
 			});
 		};

package/dist/es/components/FloatingBox.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
 import Icon_default from "./Icon.js";
-import { TMagicButton, useZIndex } from "@tmagic/design";
+import { TMagicButton, useThemeClass, useZIndex } from "@tmagic/design";
 import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
 import { Close } from "@element-plus/icons-vue";
 import VanillaMoveable from "moveable";
@@ -43,6 +43,11 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const props = __props;
 		const targetEl = useTemplateRef("target");
 		const titleEl = useTemplateRef("title");
+		/**
+		* 主题修饰类（来自最近的 `<MEditor>` / `<MForm>` 祖先 provide）。
+		* 挂在 `Teleport` 出去的浮动面板根节点上，让主题级 CSS 变量在 portal 节点上也能命中。
+		*/
+		const themeClass = useThemeClass();
 		const zIndex = useZIndex();
 		const curZIndex = ref(0);
 		const titleHeight = ref(0);
@@ -179,7 +184,7 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				to: "body"
 			}, [createElementVNode("div", mergeProps({
 				ref: "target",
-				class: "m-editor-float-box"
+				class: ["m-editor-float-box", unref(themeClass)]
 			}, _ctx.$attrs, {
 				style: {
 					...style.value,

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

@@ -1,5 +1,6 @@
 import CodeEditor_default from "../layouts/CodeEditor.js";
-import { computed, createBlock, defineComponent, openBlock } from "vue";
+import { FORM_SILENT_MODE_KEY } from "@tmagic/form";
+import { computed, createBlock, createCommentVNode, defineComponent, inject, openBlock, unref } from "vue";
 //#region packages/editor/src/fields/Code.vue?vue&type=script&setup=true&lang.ts
 var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsVsCode",
@@ -17,10 +18,19 @@ var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
+		/**
+		* 静默模式（submitForm/validateForm 隐藏挂载）下跳过 monaco 渲染：
+		* 校验由 FormItem 针对 model 中的值完成，与编辑器实例无关；本组件挂载无值副作用
+		* （save 仅由用户操作/编辑器内容变更触发），跳过可省去 monaco worker/model 的无谓实例化。
+		*/
+		const silentMode = inject(FORM_SILENT_MODE_KEY, false);
 		const emit = __emit;
 		const props = __props;
 		/**
@@ -38,7 +48,8 @@ var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 			emit("change", v);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(CodeEditor_default, {
+			return !unref(silentMode) ? (openBlock(), createBlock(CodeEditor_default, {
+				key: 0,
 				height: __props.config.height,
 				type: diffMode.value ? "diff" : void 0,
 				"init-values": diffMode.value ? (__props.lastValues || {})[__props.name] : __props.model[__props.name],
@@ -62,7 +73,7 @@ var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCompo
 				"autosize",
 				"parse",
 				"editor-custom-type"
-			]);
+			])) : createCommentVNode("v-if", true);
 		};
 	}
 });

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

@@ -15,7 +15,10 @@ var CodeLink_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		disabled: { type: Boolean },
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

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

@@ -1,9 +1,10 @@
 import { useServices } from "../hooks/use-services.js";
 import { MContainer } from "@tmagic/form";
-import { TMagicCard } from "@tmagic/design";
+import { TMagicButton, TMagicCard } from "@tmagic/design";
 import { HookCodeType, HookType } from "@tmagic/core";
-import { computed, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, unref, watch, withCtx } from "vue";
+import { computed, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, watch, withCtx } from "vue";
 import { isEmpty } from "lodash-es";
+import { Plus } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/CodeSelect.vue?vue&type=script&setup=true&lang.ts
 var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCodeSelect",
@@ -18,7 +19,10 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		disabled: { type: Boolean },
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
@@ -39,11 +43,21 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		* 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
 		*/
 		const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
+		const newHandler = () => {
+			const defaultCode = {
+				codeType: HookCodeType.CODE,
+				codeId: ""
+			};
+			const name = props.config.name || "";
+			const hookData = props.model[name]?.hookData || [];
+			emit("change", defaultCode, { modifyKey: `hookData.${hookData.length}` });
+		};
 		const codeConfig = computed(() => ({
 			type: "group-list",
 			name: "hookData",
 			enableToggleMode: false,
 			expandAll: true,
+			addable: () => false,
 			title: (mForm, { model, index }) => {
 				if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
 					if (Array.isArray(model.codeId)) {
@@ -56,57 +70,54 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				if (codeContent) return codeContent.name;
 				return model.codeId || index;
 			},
-			items: [{
-				type: "row",
-				items: [
-					{
-						type: "select",
-						name: "codeType",
-						span: 6,
-						options: [{
-							value: HookCodeType.CODE,
-							text: "代码块"
-						}, {
-							value: HookCodeType.DATA_SOURCE_METHOD,
-							text: "数据源方法"
-						}],
-						rules: [{
-							typeMatch: true,
-							trigger: "change"
-						}],
-						defaultValue: HookCodeType.CODE,
-						onChange: (_mForm, v, { setModel }) => {
-							if (v === HookCodeType.DATA_SOURCE_METHOD) setModel("codeId", []);
-							else setModel("codeId", "");
-							return v;
-						}
-					},
-					{
-						type: "code-select-col",
-						name: "codeId",
-						span: 18,
-						labelWidth: 0,
-						display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
-						notEditable: () => !codeBlockService.getEditStatus(),
-						rules: [{
-							typeMatch: true,
-							trigger: "change"
-						}]
-					},
-					{
-						type: "data-source-method-select",
-						name: "codeId",
-						span: 18,
-						labelWidth: 0,
-						display: (_mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
-						notEditable: () => !dataSourceService.get("editable"),
-						rules: [{
-							typeMatch: true,
-							trigger: "change"
-						}]
+			titlePrefix: props.config.name === void 0 ? void 0 : String(props.config.name),
+			items: [
+				{
+					text: "代码类型",
+					type: "select",
+					name: "codeType",
+					labelPosition: "right",
+					rules: [{
+						typeMatch: true,
+						trigger: "change"
+					}],
+					options: [{
+						value: HookCodeType.CODE,
+						text: "代码块"
+					}, {
+						value: HookCodeType.DATA_SOURCE_METHOD,
+						text: "数据源方法"
+					}],
+					defaultValue: HookCodeType.CODE,
+					onChange: (_mForm, v, { setModel }) => {
+						if (v === HookCodeType.DATA_SOURCE_METHOD) setModel("codeId", []);
+						else setModel("codeId", "");
+						return v;
 					}
-				]
-			}]
+				},
+				{
+					type: "code-select-col",
+					name: "codeId",
+					text: "代码块",
+					rules: [{
+						typeMatch: true,
+						trigger: "change"
+					}],
+					display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+					notEditable: () => !codeBlockService.getEditStatus()
+				},
+				{
+					type: "data-source-method-select",
+					name: "codeId",
+					text: "数据源字段",
+					rules: [{
+						typeMatch: true,
+						trigger: "change"
+					}],
+					display: (_mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+					notEditable: () => !dataSourceService.get("editable")
+				}
+			]
 		}));
 		watch(() => props.model[props.name], (value) => {
 			if (isEmpty(value)) props.model[props.name] = {
@@ -116,10 +127,11 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		}, { immediate: true });
 		const changeHandler = (v, eventData) => emit("change", v, eventData);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["m-fields-code-select", __props.config.className]) }, [createVNode(unref(TMagicCard), null, {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["m-fields-code-select", __props.config.className]) }, [createVNode(unref(TMagicCard), { flat: __props.config.flat }, {
 				default: withCtx(() => [createVNode(unref(MContainer), {
 					config: codeConfig.value,
 					size: __props.size,
+					class: "code-select-content",
 					prop: __props.prop,
 					disabled: __props.disabled,
 					"is-compare": isCompareMode.value,
@@ -134,9 +146,22 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					"is-compare",
 					"last-values",
 					"model"
+				]), createVNode(unref(TMagicButton), {
+					class: "create-button fullWidth",
+					icon: unref(Plus),
+					size: __props.size,
+					disabled: __props.disabled,
+					onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
+				}, {
+					default: withCtx(() => [createTextVNode("添加" + toDisplayString(__props.config.text), 1)]),
+					_: 1
+				}, 8, [
+					"icon",
+					"size",
+					"disabled"
 				])]),
 				_: 1
-			})], 2);
+			}, 8, ["flat"])], 2);
 		};
 	}
 });

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

@@ -26,7 +26,10 @@ var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		},
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
@@ -72,6 +75,7 @@ var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			type: "select",
 			name: props.name,
 			disabled: props.disabled,
+			text: props.config.text,
 			options: () => {
 				if (codeDsl.value) return map(codeDsl.value, (value, key) => ({
 					text: `${value.name}（${key}）`,

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

@@ -17,7 +17,10 @@ var CondOpSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		disabled: { type: Boolean },
 		size: {},
 		lastValues: {},
-		isCompare: { type: Boolean }
+		isCompare: { type: Boolean },
+		text: {},
+		labelWidth: {},
+		labelPosition: {}
 	},
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {

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

@@ -1,13 +1,12 @@
 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({
 	name: "MFieldsDataSourceFieldSelect",
 	__name: "Index",
@@ -24,13 +23,17 @@ var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 		},
 		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__*/ defineComp
 			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__*/ defineComp
 					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__*/ defineComp
 					"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

@@ -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": {},

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

@@ -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

@@ -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

@@ -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

@@ -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": {},

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

@@ -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

@@ -19,7 +19,10 @@ var DisplayConds_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		},
 		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__*/ def
 			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",