@tmagic/editor 1.7.6 → 1.7.8-beta.1

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

@@ -0,0 +1,156 @@
+import { useServices } from "../hooks/use-services.js";
+import { getCascaderOptionsFromFields, getFieldType } from "../utils/data-source/index.js";
+import { MGroupList, filterFunction } from "@tmagic/form";
+import { computed, createBlock, 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({
+	name: "m-fields-display-conds",
+	__name: "DisplayConds",
+	props: {
+		config: {},
+		model: {},
+		initValues: {},
+		values: {},
+		name: {},
+		prop: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		lastValues: {},
+		isCompare: { type: Boolean }
+	},
+	emits: ["change"],
+	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,
+			items: [{
+				type: "table",
+				name: "cond",
+				operateColWidth: 80,
+				enableToggleMode: false,
+				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 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%" },
+				config: config.value,
+				name: __props.name,
+				disabled: __props.disabled,
+				model: __props.model,
+				"last-values": __props.lastValues,
+				prop: __props.prop,
+				size: __props.size,
+				onChange: changeHandler
+			}, null, 8, [
+				"config",
+				"name",
+				"disabled",
+				"model",
+				"last-values",
+				"prop",
+				"size"
+			]);
+		};
+	}
+});
+//#endregion
+export { DisplayConds_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/EventSelect.js

@@ -0,0 +1,5 @@
+import EventSelect_vue_vue_type_script_setup_true_lang_default from "./EventSelect.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/fields/EventSelect.vue
+var EventSelect_default = EventSelect_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { EventSelect_default as default };

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

@@ -0,0 +1,338 @@
+import { useServices } from "../hooks/use-services.js";
+import { getCascaderOptionsFromFields } from "../utils/data-source/index.js";
+import { MContainer, MPanel, MTable } 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, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
+import { has } from "lodash-es";
+import { Delete } from "@element-plus/icons-vue";
+//#region packages/editor/src/fields/EventSelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-fields-event-select" };
+var _hoisted_2 = {
+	key: 1,
+	class: "fullWidth"
+};
+var EventSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFieldsEventSelect",
+	__name: "EventSelect",
+	props: {
+		config: {},
+		model: {},
+		initValues: {},
+		values: {},
+		name: {},
+		prop: {},
+		disabled: { type: Boolean },
+		size: {},
+		lastValues: {},
+		isCompare: { type: Boolean }
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { editorService, dataSourceService, eventsService, codeBlockService, propsService } = useServices();
+		const eventNameConfig = computed(() => {
+			return {
+				name: "name",
+				text: "事件",
+				type: (mForm, { formValue }) => {
+					if (props.config.src !== "component" || formValue.type === "page-fragment-container" && formValue.pageFragmentId) return "cascader";
+					return "select";
+				},
+				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;
+					}
+				},
+				...props.config.eventNameConfig
+			};
+		});
+		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;
+				},
+				...props.config.actionTypeConfig
+			};
+		});
+		const targetCompConfig = computed(() => {
+			return {
+				name: "to",
+				text: "联动组件",
+				type: "ui-select",
+				display: (mForm, { model }) => model.actionType === ActionType.COMP,
+				onChange: (MForm, v, { setModel }) => {
+					setModel("method", "");
+				},
+				...props.config.targetCompConfig
+			};
+		});
+		const compActionConfig = computed(() => {
+			return {
+				name: "method",
+				text: "动作",
+				type: (mForm, { model }) => {
+					const to = editorService.getNodeById(model.to);
+					if (to && to.type === "page-fragment-container" && to.pageFragmentId) return "cascader";
+					return "select";
+				},
+				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;
+						}
+					}
+					return methods.map((method) => ({
+						text: method.label,
+						value: method.value
+					}));
+				},
+				...props.config.compActionConfig
+			};
+		});
+		const codeActionConfig = computed(() => {
+			return {
+				type: "code-select-col",
+				text: "代码块",
+				name: "codeId",
+				notEditable: () => !codeBlockService.getEditStatus(),
+				display: (mForm, { model }) => model.actionType === ActionType.CODE,
+				...props.config.codeActionConfig
+			};
+		});
+		const dataSourceActionConfig = computed(() => {
+			return {
+				type: "data-source-method-select",
+				text: "数据源方法",
+				name: "dataSourceMethod",
+				notEditable: () => !dataSourceService.get("editable"),
+				display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
+				...props.config.dataSourceActionConfig
+			};
+		});
+		const tableConfig = computed(() => ({
+			type: "table",
+			name: "events",
+			items: [
+				{
+					name: "name",
+					label: "事件名",
+					type: eventNameConfig.value.type,
+					options: (mForm, { formValue }) => eventsService.getEvent(formValue.type).map((option) => ({
+						text: option.label,
+						value: option.value
+					}))
+				},
+				{
+					name: "to",
+					label: "联动组件",
+					type: "ui-select"
+				},
+				{
+					name: "method",
+					label: "动作",
+					type: compActionConfig.value.type,
+					options: (mForm, { model }) => {
+						const node = editorService.getNodeById(model.to);
+						if (!node?.type) return [];
+						return eventsService.getMethod(node.type, model.to).map((option) => ({
+							text: option.label,
+							value: option.value
+						}));
+					}
+				}
+			]
+		}));
+		const actionsConfig = computed(() => ({
+			type: "panel",
+			items: [{
+				type: "group-list",
+				name: "actions",
+				expandAll: true,
+				enableToggleMode: false,
+				titlePrefix: "动作",
+				items: [
+					actionTypeConfig.value,
+					targetCompConfig.value,
+					compActionConfig.value,
+					codeActionConfig.value,
+					dataSourceActionConfig.value
+				]
+			}]
+		}));
+		const isOldVersion = computed(() => {
+			if (props.model[props.name].length === 0) return false;
+			return !has(props.model[props.name][0], "actions");
+		});
+		const addEvent = () => {
+			const defaultEvent = {
+				name: "",
+				actions: []
+			};
+			if (!props.model[props.name]) props.model[props.name] = [];
+			emit("change", defaultEvent, { modifyKey: props.model[props.name].length });
+		};
+		const removeEvent = (index) => {
+			if (!props.name) return;
+			props.model[props.name].splice(index, 1);
+			emit("change", props.model[props.name]);
+		};
+		const eventNameChangeHandler = (v, eventData) => {
+			emit("change", props.model[props.name], eventData);
+		};
+		const onChangeHandler = (v, eventData) => emit("change", props.model[props.name], eventData);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [isOldVersion.value ? (openBlock(), createBlock(unref(MTable), {
+				key: 0,
+				name: "events",
+				size: __props.size,
+				disabled: __props.disabled,
+				model: __props.model,
+				config: tableConfig.value,
+				onChange: onChangeHandler
+			}, null, 8, [
+				"size",
+				"disabled",
+				"model",
+				"config"
+			])) : (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(TMagicButton), {
+				class: "create-button",
+				type: "primary",
+				size: __props.size,
+				disabled: __props.disabled,
+				onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
+			}, {
+				default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("添加事件", -1)])]),
+				_: 1
+			}, 8, ["size", "disabled"]), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.model[__props.name], (cardItem, index) => {
+				return openBlock(), createBlock(unref(MPanel), {
+					key: index,
+					disabled: __props.disabled,
+					size: __props.size,
+					prop: `${__props.prop}.${index}`,
+					config: actionsConfig.value,
+					model: cardItem,
+					"label-width": __props.config.labelWidth || "100px",
+					onChange: onChangeHandler
+				}, {
+					header: withCtx(() => [createVNode(unref(MContainer), {
+						class: "fullWidth",
+						config: eventNameConfig.value,
+						model: cardItem,
+						disabled: __props.disabled,
+						size: __props.size,
+						prop: `${__props.prop}.${index}`,
+						onChange: eventNameChangeHandler
+					}, null, 8, [
+						"config",
+						"model",
+						"disabled",
+						"size",
+						"prop"
+					]), createVNode(unref(TMagicButton), {
+						style: { "color": "#f56c6c" },
+						link: "",
+						icon: unref(Delete),
+						disabled: __props.disabled,
+						size: __props.size,
+						onClick: ($event) => removeEvent(Number(index))
+					}, null, 8, [
+						"icon",
+						"disabled",
+						"size",
+						"onClick"
+					])]),
+					_: 2
+				}, 1032, [
+					"disabled",
+					"size",
+					"prop",
+					"config",
+					"model",
+					"label-width"
+				]);
+			}), 128))]))]);
+		};
+	}
+});
+//#endregion
+export { EventSelect_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/KeyValue.js

@@ -0,0 +1,5 @@
+import KeyValue_vue_vue_type_script_setup_true_lang_default from "./KeyValue.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/fields/KeyValue.vue
+var KeyValue_default = KeyValue_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { KeyValue_default as default };

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

@@ -0,0 +1,158 @@
+import CodeEditor_default from "../layouts/CodeEditor.js";
+import CodeIcon_default from "../icons/CodeIcon.js";
+import { TMagicButton, TMagicInput } from "@tmagic/design";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, renderList, unref, watchEffect, withCtx } from "vue";
+import { Delete, Plus } from "@element-plus/icons-vue";
+//#region packages/editor/src/fields/KeyValue.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-fields-key-value" };
+var _hoisted_2 = { key: 0 };
+var KeyValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFieldsKeyValue",
+	__name: "KeyValue",
+	props: {
+		config: {},
+		model: {},
+		initValues: {},
+		values: {},
+		name: {},
+		prop: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		lastValues: {},
+		isCompare: { type: Boolean }
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const records = ref([]);
+		const showCode = ref(false);
+		watchEffect(() => {
+			if (typeof props.model[props.name] === "function") showCode.value = true;
+			else {
+				const initValues = Object.entries(props.model[props.name] || {});
+				for (const [, value] of initValues) if (typeof value !== "string") {
+					showCode.value = true;
+					break;
+				}
+				records.value = initValues;
+			}
+		});
+		const getValue = () => {
+			const record = {};
+			records.value.forEach(([key, value]) => {
+				if (key) record[key] = value;
+			});
+			return record;
+		};
+		const keyChangeHandler = () => {
+			emit("change", getValue());
+		};
+		const valueChangeHandler = () => {
+			emit("change", getValue());
+		};
+		const addHandler = () => {
+			records.value.push(["", ""]);
+		};
+		const deleteHandler = (index) => {
+			records.value.splice(index, 1);
+			emit("change", getValue());
+		};
+		const save = (v) => {
+			emit("change", v);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				!showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
+					return openBlock(), createElementBlock("div", {
+						class: "m-fields-key-value-item",
+						key: index
+					}, [
+						createVNode(unref(TMagicInput), {
+							placeholder: "key",
+							modelValue: records.value[index][0],
+							"onUpdate:modelValue": ($event) => records.value[index][0] = $event,
+							disabled: __props.disabled,
+							size: __props.size,
+							onChange: keyChangeHandler
+						}, null, 8, [
+							"modelValue",
+							"onUpdate:modelValue",
+							"disabled",
+							"size"
+						]),
+						_cache[1] || (_cache[1] = createElementVNode("span", { class: "m-fields-key-value-delimiter" }, ":", -1)),
+						createVNode(unref(TMagicInput), {
+							placeholder: "value",
+							modelValue: records.value[index][1],
+							"onUpdate:modelValue": ($event) => records.value[index][1] = $event,
+							disabled: __props.disabled,
+							size: __props.size,
+							onChange: valueChangeHandler
+						}, null, 8, [
+							"modelValue",
+							"onUpdate:modelValue",
+							"disabled",
+							"size"
+						]),
+						createVNode(unref(TMagicButton), {
+							class: "m-fields-key-value-delete",
+							type: "danger",
+							size: __props.size,
+							disabled: __props.disabled,
+							circle: "",
+							plain: "",
+							icon: unref(Delete),
+							onClick: ($event) => deleteHandler(index)
+						}, null, 8, [
+							"size",
+							"disabled",
+							"icon",
+							"onClick"
+						])
+					]);
+				}), 128)), createVNode(unref(TMagicButton), {
+					type: "primary",
+					size: __props.size,
+					disabled: __props.disabled,
+					plain: "",
+					icon: unref(Plus),
+					onClick: addHandler
+				}, {
+					default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("添加", -1)])]),
+					_: 1
+				}, 8, [
+					"size",
+					"disabled",
+					"icon"
+				])])) : createCommentVNode("v-if", true),
+				__props.config.advanced && showCode.value ? (openBlock(), createBlock(CodeEditor_default, {
+					key: 1,
+					"editor-custom-type": "m-fields-key-value",
+					language: "javascript",
+					"init-values": __props.model[__props.name],
+					options: { readOnly: __props.disabled },
+					autosize: {
+						minRows: 1,
+						maxRows: 20
+					},
+					parse: true,
+					onSave: save
+				}, null, 8, ["init-values", "options"])) : createCommentVNode("v-if", true),
+				__props.config.advanced ? (openBlock(), createBlock(unref(TMagicButton), {
+					key: 2,
+					size: "default",
+					disabled: __props.disabled,
+					link: "",
+					icon: CodeIcon_default,
+					onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
+				}, null, 8, ["disabled"])) : createCommentVNode("v-if", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { KeyValue_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/PageFragmentSelect.js

@@ -0,0 +1,5 @@
+import PageFragmentSelect_vue_vue_type_script_setup_true_lang_default from "./PageFragmentSelect.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/fields/PageFragmentSelect.vue
+var PageFragmentSelect_default = PageFragmentSelect_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { PageFragmentSelect_default as default };