@tmagic/editor 1.8.0-manmanyu.9 → 1.8.0

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

@@ -1,7 +1,7 @@
 import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, useTemplateRef } from "vue";
 import Gesto from "gesto";
 //#region packages/editor/src/components/ScrollBar.vue?vue&type=script&setup=true&lang.ts
-var ScrollBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScrollBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorScrollBar",
 	__name: "ScrollBar",
 	props: {
@@ -48,9 +48,10 @@ var ScrollBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			return props.scrollSize * ratio;
 		};
 		const scrollBy = (delta) => {
-			if (delta < 0) if (props.pos <= 0) emit("scroll", 0);
-			else emit("scroll", -Math.min(-delta, props.pos));
-			else {
+			if (delta < 0) {
+				if (props.pos <= 0) emit("scroll", 0);
+				else emit("scroll", -Math.min(-delta, props.pos));
+			} else {
 				const leftPos = props.size - (thumbSize.value + thumbPos.value);
 				if (leftPos <= 0) emit("scroll", 0);
 				else emit("scroll", Math.min(delta, leftPos));

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

@@ -7,7 +7,7 @@ var _hoisted_1 = {
 	class: "m-editor-scroll-viewer-container",
 	ref: "container"
 };
-var ScrollViewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScrollViewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorScrollViewer",
 	__name: "ScrollViewer",
 	props: {

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

@@ -2,7 +2,7 @@ import { TMagicIcon, TMagicInput } from "@tmagic/design";
 import { createBlock, createVNode, defineComponent, openBlock, ref, unref, withCtx } from "vue";
 import { Search } from "@element-plus/icons-vue";
 //#region packages/editor/src/components/SearchInput.vue?vue&type=script&setup=true&lang.ts
-var SearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var SearchInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorSearchInput",
 	__name: "SearchInput",
 	emits: ["search"],

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

@@ -1,7 +1,7 @@
 import Resizer_default from "./Resizer.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, useTemplateRef, watchEffect } from "vue";
 //#region packages/editor/src/components/SplitView.vue?vue&type=script&setup=true&lang.ts
-var SplitView_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var SplitView_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorSplitView",
 	__name: "SplitView",
 	props: {

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

@@ -9,7 +9,7 @@ var _hoisted_1 = {
 	class: "menu-item-text"
 };
 var _hoisted_2 = { class: "el-dropdown-link menubar-menu-button" };
-var ToolButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ToolButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorToolButton",
 	__name: "ToolButton",
 	props: {

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

@@ -5,7 +5,7 @@ var _hoisted_1 = {
 	key: 1,
 	class: "m-editor-tree-empty"
 };
-var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Tree_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorTree",
 	__name: "Tree",
 	props: {

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

@@ -16,7 +16,7 @@ var _hoisted_4 = {
 	key: 0,
 	class: "m-editor-tree-node-children"
 };
-var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var TreeNode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorTreeNode",
 	__name: "TreeNode",
 	props: {

package/dist/es/components/ViewForm.js

@@ -0,0 +1,5 @@
+import ViewForm_vue_vue_type_script_setup_true_lang_default from "./ViewForm.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/components/ViewForm.vue
+var ViewForm_default = ViewForm_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ViewForm_default as default };

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

@@ -0,0 +1,56 @@
+import { useCompareForm } from "../hooks/use-compare-form.js";
+import { MForm } from "@tmagic/form";
+import { createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeStyle, openBlock, unref } from "vue";
+//#region packages/editor/src/components/ViewForm.vue?vue&type=script&setup=true&lang.ts
+var ViewForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MEditorViewForm",
+	__name: "ViewForm",
+	props: {
+		value: {},
+		type: {},
+		category: { default: "node" },
+		dataSourceType: {},
+		labelWidth: { default: "120px" },
+		height: {},
+		size: {},
+		loadConfig: {},
+		services: {},
+		disabled: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const { config, currentValues, wrapperStyle, formContext, loadConfig, formRef } = useCompareForm(__props);
+		__expose({
+			form: formRef,
+			config,
+			reload: loadConfig
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "m-editor-view-form-wrapper",
+				style: normalizeStyle(unref(wrapperStyle))
+			}, [unref(config).length ? (openBlock(), createBlock(unref(MForm), {
+				key: 0,
+				ref: "form",
+				class: "m-editor-view-form",
+				config: unref(config),
+				"init-values": unref(currentValues),
+				disabled: __props.disabled,
+				"label-width": __props.labelWidth,
+				context: unref(formContext),
+				size: __props.size
+			}, null, 8, [
+				"config",
+				"init-values",
+				"disabled",
+				"label-width",
+				"context",
+				"size"
+			])) : createCommentVNode("v-if", true)], 4);
+		};
+	}
+});
+//#endregion
+export { ViewForm_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/editorProps.js

@@ -1,6 +1,11 @@
 import { CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, RenderType } from "@tmagic/stage";
 import { getIdFromEl } from "@tmagic/utils";
 //#region packages/editor/src/editorProps.ts
+/**
+* 「属性配置表单校验」联动能力的 provide/inject 注入键。
+* 使用 Symbol 避免与其它字符串键冲突，供 PropsPanel / FormPanel 注入判断校验失败时是否仍更新节点并记录错误。
+*/
+var ENABLE_PROPS_FORM_VALIDATE = Symbol("enablePropsFormValidate");
 var defaultEditorProps = {
 	renderType: RenderType.IFRAME,
 	disabledMultiSelect: false,
@@ -11,6 +16,7 @@ var defaultEditorProps = {
 	containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
 	containerHighlightDuration: 800,
 	containerHighlightType: ContainerHighlightType.DEFAULT,
+	containerHighlightAddOnly: false,
 	disabledShowSrc: false,
 	disabledDataSource: false,
 	disabledCodeBlock: false,
@@ -34,4 +40,4 @@ var defaultEditorProps = {
 	customContentMenu: (menus) => menus
 };
 //#endregion
-export { defaultEditorProps };
+export { ENABLE_PROPS_FORM_VALIDATE, defaultEditorProps };

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

@@ -1,7 +1,7 @@
 import CodeEditor_default from "../layouts/CodeEditor.js";
 import { computed, createBlock, defineComponent, openBlock } 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({
+var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsVsCode",
 	__name: "Code",
 	props: {

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

@@ -2,7 +2,7 @@ import { getEditorConfig } from "../utils/config.js";
 import { serializeConfig } from "../utils/editor.js";
 import { computed, createBlock, defineComponent, openBlock, reactive, resolveComponent, watch } from "vue";
 //#region packages/editor/src/fields/CodeLink.vue?vue&type=script&setup=true&lang.ts
-var CodeLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeLink_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCodeLink",
 	__name: "CodeLink",
 	props: {

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

@@ -1,12 +1,8 @@
-import { useServices } from "../hooks/use-services.js";
+import { createCodeSelectConfig, normalizeCodeSelectValue } from "./configs/codeSelect.js";
 import { MContainer } from "@tmagic/form";
-import { TMagicButton, TMagicCard } from "@tmagic/design";
-import { HookCodeType, HookType } from "@tmagic/core";
-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";
+import { computed, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, unref, watch } from "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({
+var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCodeSelect",
 	__name: "CodeSelect",
 	props: {
@@ -27,7 +23,6 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const { dataSourceService, codeBlockService } = useServices();
 		const props = __props;
 		/**
 		* 对比模式判定：
@@ -43,113 +38,35 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		* 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
 		*/
 		const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
-		const newHandler = () => {
-			const defaultCode = {
-				codeType: HookCodeType.CODE,
-				codeId: ""
-			};
-			const name = props.config.name || "";
-			emit("change", defaultCode, { modifyKey: `hookData.${(props.model[name]?.hookData || []).length}` });
-		};
-		const codeConfig = computed(() => ({
-			type: "group-list",
-			name: "hookData",
-			enableToggleMode: false,
-			expandAll: true,
-			flat: true,
-			addable: () => false,
-			title: (mForm, { model, index }) => {
-				if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
-					if (Array.isArray(model.codeId)) {
-						if (model.codeId.length < 2) return index;
-						return `${dataSourceService.getDataSourceById(model.codeId[0])?.title} / ${model.codeId[1]}`;
-					}
-					return Array.isArray(model.codeId) ? model.codeId.join("/") : index;
-				}
-				const codeContent = codeBlockService.getCodeContentById(model.codeId);
-				if (codeContent) return codeContent.name;
-				return model.codeId || index;
-			},
-			titlePrefix: props.config.name === void 0 ? void 0 : String(props.config.name),
-			items: [
-				{
-					text: "代码类型",
-					type: "select",
-					name: "codeType",
-					labelPosition: "right",
-					options: [{
-						value: HookCodeType.CODE,
-						text: "代码块"
-					}, {
-						value: HookCodeType.DATA_SOURCE_METHOD,
-						text: "数据源方法"
-					}],
-					defaultValue: "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: "代码块",
-					display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
-					notEditable: () => !codeBlockService.getEditStatus()
-				},
-				{
-					type: "data-source-method-select",
-					name: "codeId",
-					text: "数据源字段",
-					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] = {
-				hookType: HookType.CODE,
-				hookData: []
-			};
-		}, { immediate: true });
+		const codeConfig = computed(() => createCodeSelectConfig(props.config));
+		watch(() => props.model[props.name], () => {
+			normalizeCodeSelectValue(props.model, props.name);
+		});
 		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), { 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,
-					"last-values": __props.lastValues?.[__props.name],
-					model: __props.model[__props.name],
-					onChange: changeHandler
-				}, null, 8, [
-					"config",
-					"size",
-					"prop",
-					"disabled",
-					"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
-			}, 8, ["flat"])], 2);
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["m-fields-code-select", __props.config.className]) }, [createVNode(unref(MContainer), {
+				config: codeConfig.value,
+				size: __props.size,
+				class: "code-select-content",
+				prop: __props.prop,
+				disabled: __props.disabled,
+				"is-compare": isCompareMode.value,
+				"last-values": __props.lastValues?.[__props.name],
+				model: __props.model[__props.name],
+				"label-position": __props.config.labelPosition,
+				"label-width": __props.config.labelWidth,
+				onChange: changeHandler
+			}, null, 8, [
+				"config",
+				"size",
+				"prop",
+				"disabled",
+				"is-compare",
+				"last-values",
+				"model",
+				"label-position",
+				"label-width"
+			])], 2);
 		};
 	}
 });

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

@@ -10,7 +10,7 @@ import { Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/CodeSelectCol.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-code-select-col" };
 var _hoisted_2 = { class: "code-select-container" };
-var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCodeSelectCol",
 	__name: "CodeSelectCol",
 	props: {
@@ -35,7 +35,7 @@ var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	setup(__props, { emit: __emit }) {
 		const mForm = inject("mForm");
 		const { codeBlockService, uiService } = useServices();
-		const eventBus = inject("eventBus");
+		const eventBus = inject("eventBus", null);
 		const emit = __emit;
 		const props = __props;
 		/**

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

@@ -1,10 +1,11 @@
-import { arrayOptions, eqOptions, numberOptions } from "../utils/props.js";
+import { getCondOpOptionsByFieldType } from "../utils/props.js";
 import { useServices } from "../hooks/use-services.js";
 import { getFieldType } from "../utils/data-source/index.js";
 import { TMagicSelect, getDesignConfig } from "@tmagic/design";
+import { removeDataSourceFieldPrefix } from "@tmagic/utils";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderList, resolveDynamicComponent, unref, withCtx } from "vue";
 //#region packages/editor/src/fields/CondOpSelect.vue?vue&type=script&setup=true&lang.ts
-var CondOpSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CondOpSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCondOpSelect",
 	__name: "CondOpSelect",
 	props: {
@@ -29,23 +30,10 @@ var CondOpSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		const props = __props;
 		const optionComponent = getDesignConfig("components")?.option;
 		const options = computed(() => {
-			const [id, ...fieldNames] = [...props.config.parentFields || [], ...props.model.field];
-			const type = getFieldType(dataSourceService.getDataSourceById(id), fieldNames);
-			if (type === "array") return arrayOptions;
-			if (type === "boolean" || type === "null") return [{
-				text: "是",
-				value: "is"
-			}, {
-				text: "不是",
-				value: "not"
-			}];
-			if (type === "number") return [...eqOptions, ...numberOptions];
-			if (type === "string") return [...arrayOptions, ...eqOptions];
-			return [
-				...arrayOptions,
-				...eqOptions,
-				...numberOptions
-			];
+			const [id, ...fieldNames] = [...props.config.parentFields || [], ...props.model.field || []];
+			const ds = id ? dataSourceService.getDataSourceById(removeDataSourceFieldPrefix(id)) : void 0;
+			const type = getFieldType(ds, fieldNames);
+			return getCondOpOptionsByFieldType(type);
 		});
 		const fieldChangeHandler = (v) => {
 			emit("change", v);

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

@@ -9,9 +9,9 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 import { Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-data-source-field-select" };
-var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FieldSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "FieldSelect",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		value: {},
 		disabled: { type: Boolean },
 		checkStrictly: { type: Boolean },
@@ -20,10 +20,10 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		notEditable: { type: [Boolean, Function] },
 		dataSourceId: {}
 	}, {
-		"modelValue": { default: [] },
+		"modelValue": { default: () => [] },
 		"modelModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["change"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -31,7 +31,7 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		const optionComponent = getDesignConfig("components")?.option;
 		const { dataSourceService, uiService } = useServices();
 		const mForm = inject("mForm");
-		const eventBus = inject("eventBus");
+		const eventBus = inject("eventBus", null);
 		const allDataSources = computed(() => dataSourceService.get("dataSources") || []);
 		const dataSources = computed(() => {
 			if (!props.dataSourceId) return allDataSources.value;
@@ -49,7 +49,8 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		const selectFieldsId = ref([]);
 		watch(modelValue, (value) => {
 			if (props.dataSourceId) {
-				selectDataSourceId.value = valueIsKey.value ? props.dataSourceId : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${props.dataSourceId}`;
+				const dsIdValue = valueIsKey.value ? props.dataSourceId : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${props.dataSourceId}`;
+				selectDataSourceId.value = dsIdValue;
 				selectFieldsId.value = Array.isArray(value) ? value : [];
 			} else if (Array.isArray(value) && value.length) {
 				const [dsId, ...fields] = value;

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

@@ -7,7 +7,7 @@ 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, 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 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: {
@@ -59,7 +59,9 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			let value;
 			if (typeof props.config.checkStrictly !== "function") value = props.config.checkStrictly;
 			else {
-				const dsId = removeDataSourceFieldPrefix(props.model[0]);
+				const fieldValue = props.model[props.name];
+				const rawDsId = props.config.dataSourceId ?? (Array.isArray(fieldValue) ? fieldValue[0] : fieldValue);
+				const dsId = removeDataSourceFieldPrefix(`${rawDsId}`);
 				const dataSource = dataSources.value.find((ds) => ds.id === dsId);
 				value = props.config.checkStrictly(mForm, {
 					values: mForm?.initValues || {},

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: {},
@@ -48,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"
@@ -315,7 +315,9 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const addDialogVisible = useModel(__props, "visible");
 		const addFromJsonDialogVisible = useModel(__props, "visible1");
 		const { height: editorHeight } = useEditorContentHeight();
-		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		const parentFloating = inject("parentFloating", ref(null));
+		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		/**
 		* 由 DataSourceConfigPanel 注入：打开数据源详情后需要直接打开的字段路径（字段名数组）。
 		* 当前层消费 path[0]，并把剩余路径下发给嵌套字段，实现逐层打开。
@@ -356,6 +358,7 @@ var DataSourceFields_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[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),
 					width: width.value,
@@ -363,6 +366,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					height: unref(editorHeight),
 					"onUpdate:height": _cache[4] || (_cache[4] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
 					title: fieldTitle.value,
+					"framework-width": frameworkWidth.value,
 					position: unref(boxPosition)
 				}, {
 					body: withCtx(() => [createVNode(unref(MFormBox), {
@@ -385,9 +389,11 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					"width",
 					"height",
 					"title",
+					"framework-width",
 					"position"
 				]),
 				createVNode(FloatingBox_default, {
+					"body-style": { padding: "0 16px" },
 					visible: addFromJsonDialogVisible.value,
 					"onUpdate:visible": _cache[5] || (_cache[5] = ($event) => addFromJsonDialogVisible.value = $event),
 					width: width.value,
@@ -395,6 +401,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					height: unref(editorHeight),
 					"onUpdate:height": _cache[7] || (_cache[7] = ($event) => isRef(editorHeight) ? editorHeight.value = $event : null),
 					title: "快速添加数据定义",
+					"framework-width": frameworkWidth.value,
 					position: unref(boxPosition)
 				}, {
 					body: withCtx(() => [createVNode(unref(MFormBox), {
@@ -408,6 +415,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					"visible",
 					"width",
 					"height",
+					"framework-width",
 					"position"
 				])
 			]);

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
@@ -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: {
@@ -128,30 +128,19 @@ var DataSourceInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		*/
 		const fieldQuerySearch = (queryString, leftAngleIndex, dotIndex, cb) => {
 			let result = [];
-			const keys = getKeysArray(queryString.substring(leftAngleIndex + 1, dotIndex));
+			const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
+			const keys = getKeysArray(dsKey);
 			const dsId = keys.shift();
 			const ds = dataSources.value.find((ds) => ds.id === dsId);
 			if (!ds) {
 				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,
@@ -230,7 +219,7 @@ var DataSourceInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 				onSelect: selectHandler
 			}), {
 				suffix: withCtx(() => [createVNode(Icon_default, { icon: unref(Coin) }, null, 8, ["icon"])]),
-				default: withCtx(({ item }) => [createElementVNode("div", _hoisted_1, [createElementVNode("div", null, toDisplayString(item.text), 1), createElementVNode("span", _hoisted_2, toDisplayString(item.value), 1)])]),
+				default: withCtx((slotProps) => [createElementVNode("div", _hoisted_1, [createElementVNode("div", null, toDisplayString(slotProps?.item?.text || ""), 1), createElementVNode("span", _hoisted_2, toDisplayString(slotProps?.item?.value || ""), 1)])]),
 				_: 1
 			}, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
 				key: 2,

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: {
@@ -36,7 +36,7 @@ var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default
 	setup(__props, { emit: __emit }) {
 		const { dataSourceService, uiService } = useServices();
 		const mForm = inject("mForm");
-		const eventBus = inject("eventBus");
+		const eventBus = inject("eventBus", null);
 		const emit = __emit;
 		const props = __props;
 		const dataSourceSidePanel = computed(() => (uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE));