@tmagic/editor 1.8.0-manmanyu.9 → 1.8.1

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));

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

@@ -9,7 +9,7 @@ var _hoisted_2 = {
 	key: 0,
 	class: "m-editor-data-source-methods-footer"
 };
-var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceMethods",
 	__name: "DataSourceMethods",
 	props: {
@@ -42,8 +42,10 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		let editIndex = -1;
 		const editMethod = (method, index) => {
 			let codeContent = "({ params, dataSource, app }) => {\n  // place your code here\n}";
-			if (method.content) if (typeof method.content !== "string") codeContent = method.content.toString();
-			else codeContent = method.content;
+			if (method.content) {
+				if (typeof method.content !== "string") codeContent = method.content.toString();
+				else codeContent = method.content;
+			}
 			codeConfig.value = {
 				...cloneDeep(method),
 				content: codeContent

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

@@ -14,10 +14,10 @@ var _hoisted_2 = {
 	key: 0,
 	class: "m-editor-data-source-fields-footer"
 };
-var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceMocks",
 	__name: "DataSourceMocks",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		config: {},
 		model: {},
 		initValues: {},
@@ -43,7 +43,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		},
 		"visibleModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["change"], ["update:width", "update:visible"]),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:width", "update:visible"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -215,7 +215,9 @@ 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 parentFloating = inject("parentFloating", ref(null));
+		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createVNode(unref(MagicTable), {
@@ -233,6 +235,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,
@@ -240,6 +243,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), {
@@ -260,6 +264,7 @@ var DataSourceMocks_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					"width",
 					"height",
 					"title",
+					"framework-width",
 					"position"
 				])
 			]);

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

@@ -7,7 +7,7 @@ import { computed, createBlock, createCommentVNode, createElementBlock, createVN
 import { Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/DataSourceSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-data-source-select" };
-var DataSourceSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceSelect",
 	__name: "DataSourceSelect",
 	props: {
@@ -34,7 +34,7 @@ var DataSourceSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const props = __props;
 		const mForm = inject("mForm");
 		const { dataSourceService, uiService } = useServices();
-		const eventBus = inject("eventBus");
+		const eventBus = inject("eventBus", null);
 		const dataSources = computed(() => dataSourceService.get("dataSources"));
 		const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 		/** 对比模式下隐藏查看/编辑操作按钮，仅保留只读展示。 */

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

@@ -1,9 +1,9 @@
-import { useServices } from "../hooks/use-services.js";
-import { getCascaderOptionsFromFields, getFieldType } from "../utils/data-source/index.js";
+import { createDisplayCondsConfig } from "./configs/displayConds.js";
 import { MGroupList, filterFunction } from "@tmagic/form";
-import { computed, createBlock, defineComponent, inject, openBlock, unref } from "vue";
+import { computed, createElementBlock, createVNode, defineComponent, inject, openBlock, unref } from "vue";
 //#region packages/editor/src/fields/DisplayConds.vue?vue&type=script&setup=true&lang.ts
-var DisplayConds_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_1 = { class: "m-fields-display-conds" };
+var DisplayConds_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "m-fields-display-conds",
 	__name: "DisplayConds",
 	props: {
@@ -28,122 +28,21 @@ var DisplayConds_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const props = __props;
-		const { dataSourceService } = useServices();
 		const mForm = inject("mForm");
 		const parentFields = computed(() => filterFunction(mForm, props.config.parentFields, props) || []);
-		const fieldOnChange = (_formState, v, { model }) => {
-			const [id, ...fieldNames] = [...parentFields.value, ...v];
-			const type = getFieldType(dataSourceService.getDataSourceById(id), fieldNames);
-			if (type === "number") model.value = Number(model.value);
-			else if (type === "boolean") model.value = Boolean(model.value);
-			else if (type === "null") model.value = null;
-			else model.value = `${model.value}`;
-			return v;
-		};
-		const config = computed(() => ({
-			type: "groupList",
-			name: props.name,
-			titlePrefix: props.config.titlePrefix,
-			expandAll: true,
-			enableToggleMode: false,
-			flat: props.config.flat,
-			items: [{
-				type: "table",
-				name: "cond",
-				operateColWidth: props.config.operateColWidth,
-				enableToggleMode: false,
-				fixed: props.config.fixed,
-				flat: props.config.flat,
-				items: [
-					parentFields.value.length ? {
-						type: "cascader",
-						options: () => {
-							const [dsId, ...keys] = parentFields.value;
-							const ds = dataSourceService.getDataSourceById(dsId);
-							if (!ds) return [];
-							let fields = ds.fields || [];
-							keys.forEach((key) => {
-								fields = fields.find((f) => f.name === key)?.fields || [];
-							});
-							return getCascaderOptionsFromFields(fields, [
-								"string",
-								"number",
-								"boolean",
-								"any"
-							]);
-						},
-						name: "field",
-						value: "key",
-						label: "字段",
-						checkStrictly: false,
-						onChange: fieldOnChange
-					} : {
-						type: "data-source-field-select",
-						name: "field",
-						value: "key",
-						label: "字段",
-						checkStrictly: false,
-						dataSourceFieldType: [
-							"string",
-							"number",
-							"boolean",
-							"any"
-						],
-						onChange: fieldOnChange
-					},
-					{
-						type: "cond-op-select",
-						parentFields: parentFields.value,
-						label: "条件",
-						width: 140,
-						name: "op"
-					},
-					{
-						label: "值",
-						width: 160,
-						items: [{
-							name: "value",
-							type: (_mForm, { model }) => {
-								const [id, ...fieldNames] = [...parentFields.value, ...model.field];
-								const type = getFieldType(dataSourceService.getDataSourceById(id), fieldNames);
-								if (type === "number") return "number";
-								if (type === "boolean") return "select";
-								if (type === "null") return "display";
-								return "text";
-							},
-							options: [{
-								text: "true",
-								value: true
-							}, {
-								text: "false",
-								value: false
-							}],
-							display: (_mForm, { model }) => !["between", "not_between"].includes(model.op),
-							displayText: (_mForm, { model }) => {
-								if (model.value === null) return "null";
-								return model.value;
-							}
-						}, {
-							name: "range",
-							type: "number-range",
-							display: (vm, { model }) => ["between", "not_between"].includes(model.op)
-						}]
-					}
-				]
-			}]
-		}));
+		const config = computed(() => createDisplayCondsConfig(props.config, props.name, parentFields.value));
+		const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
 		const changeHandler = (v, eventData) => {
-			if (!Array.isArray(props.model[props.name])) props.model[props.name] = [];
 			emit("change", v, eventData);
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(MGroupList), {
-				style: { "width": "100%" },
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(MGroupList), {
 				config: config.value,
 				name: __props.name,
 				disabled: __props.disabled,
 				model: __props.model,
 				"last-values": __props.lastValues,
+				"is-compare": isCompareMode.value,
 				prop: __props.prop,
 				size: __props.size,
 				onChange: changeHandler
@@ -153,9 +52,10 @@ var DisplayConds_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				"disabled",
 				"model",
 				"last-values",
+				"is-compare",
 				"prop",
 				"size"
-			]);
+			])]);
 		};
 	}
 });