@tmagic/editor 1.7.6 → 1.7.8-beta.1

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

@@ -0,0 +1,287 @@
+import Box_default from "../components/Box.js";
+import Block_default from "../icons/display/Block.js";
+import Flex_default from "../icons/display/Flex.js";
+import Inline_default from "../icons/display/Inline.js";
+import InlineBlock_default from "../icons/display/InlineBlock.js";
+import None_default from "../icons/display/None.js";
+import Column_default from "../icons/flex-direction/Column.js";
+import ColumnReverse_default from "../icons/flex-direction/ColumnReverse.js";
+import Row_default from "../icons/flex-direction/Row.js";
+import RowReverse_default from "../icons/flex-direction/RowReverse.js";
+import Center_default from "../icons/justify-content/Center.js";
+import FlexEnd_default from "../icons/justify-content/FlexEnd.js";
+import FlexStart_default from "../icons/justify-content/FlexStart.js";
+import SpaceAround_default from "../icons/justify-content/SpaceAround.js";
+import SpaceBetween_default from "../icons/justify-content/SpaceBetween.js";
+import { MContainer } from "@tmagic/form";
+import { Fragment, createElementBlock, createVNode, defineComponent, markRaw, openBlock, unref, vShow, withDirectives } from "vue";
+//#region packages/editor/src/fields/StyleSetter/pro/Layout.vue?vue&type=script&setup=true&lang.ts
+var Layout_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Layout",
+	props: {
+		values: {},
+		disabled: { type: Boolean },
+		size: {}
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const config = { items: [
+			{
+				name: "display",
+				text: "模式",
+				type: "radioGroup",
+				childType: "button",
+				labelWidth: "68px",
+				options: [
+					{
+						value: "inline",
+						icon: markRaw(Inline_default),
+						tooltip: "内联布局 inline"
+					},
+					{
+						value: "flex",
+						icon: markRaw(Flex_default),
+						tooltip: "弹性布局 flex"
+					},
+					{
+						value: "block",
+						icon: markRaw(Block_default),
+						tooltip: "块级布局 block"
+					},
+					{
+						value: "inline-block",
+						icon: markRaw(InlineBlock_default),
+						tooltip: "内联块布局 inline-block"
+					},
+					{
+						value: "none",
+						icon: markRaw(None_default),
+						tooltip: "隐藏 none"
+					}
+				]
+			},
+			{
+				name: "flexDirection",
+				text: "主轴方向",
+				type: "radioGroup",
+				childType: "button",
+				labelWidth: "68px",
+				options: [
+					{
+						value: "row",
+						icon: markRaw(Row_default),
+						tooltip: "水平方向 起点在左侧 row"
+					},
+					{
+						value: "row-reverse",
+						icon: markRaw(RowReverse_default),
+						tooltip: "水平方向 起点在右侧 row-reverse"
+					},
+					{
+						value: "column",
+						icon: markRaw(Column_default),
+						tooltip: "垂直方向 起点在上沿 column"
+					},
+					{
+						value: "column-reverse",
+						icon: markRaw(ColumnReverse_default),
+						tooltip: "垂直方向 起点在下沿 column-reverse"
+					}
+				],
+				display: (mForm, { model }) => model.display === "flex"
+			},
+			{
+				name: "justifyContent",
+				text: "主轴对齐",
+				type: "radioGroup",
+				childType: "button",
+				labelWidth: "68px",
+				options: [
+					{
+						value: "flex-start",
+						icon: markRaw(FlexStart_default),
+						tooltip: "左对齐 flex-start"
+					},
+					{
+						value: "flex-end",
+						icon: markRaw(FlexEnd_default),
+						tooltip: "右对齐 flex-end"
+					},
+					{
+						value: "center",
+						icon: markRaw(Center_default),
+						tooltip: "居中 center"
+					},
+					{
+						value: "space-between",
+						icon: markRaw(SpaceBetween_default),
+						tooltip: "两端对齐 space-between"
+					},
+					{
+						value: "space-around",
+						icon: markRaw(SpaceAround_default),
+						tooltip: "横向平分 space-around"
+					}
+				],
+				display: (mForm, { model }) => model.display === "flex"
+			},
+			{
+				name: "alignItems",
+				text: "辅轴对齐",
+				type: "radioGroup",
+				childType: "button",
+				labelWidth: "68px",
+				options: [
+					{
+						value: "flex-start",
+						icon: markRaw(FlexStart_default),
+						tooltip: "左对齐 flex-start"
+					},
+					{
+						value: "flex-end",
+						icon: markRaw(FlexEnd_default),
+						tooltip: "右对齐 flex-end"
+					},
+					{
+						value: "center",
+						icon: markRaw(Center_default),
+						tooltip: "居中 center"
+					},
+					{
+						value: "space-between",
+						icon: markRaw(SpaceBetween_default),
+						tooltip: "两端对齐 space-between"
+					},
+					{
+						value: "space-around",
+						icon: markRaw(SpaceAround_default),
+						tooltip: "横向平分 space-around"
+					}
+				],
+				display: (mForm, { model }) => model.display === "flex"
+			},
+			{
+				name: "flexWrap",
+				text: "换行",
+				type: "radioGroup",
+				childType: "button",
+				labelWidth: "68px",
+				options: [
+					{
+						value: "nowrap",
+						text: "不换行",
+						tooltip: "不换行 nowrap"
+					},
+					{
+						value: "wrap",
+						text: "正换行",
+						tooltip: "第一行在上方 wrap"
+					},
+					{
+						value: "wrap-reverse",
+						text: "逆换行",
+						tooltip: "第一行在下方 wrap-reverse"
+					}
+				],
+				display: (mForm, { model }) => model.display === "flex"
+			},
+			{
+				type: "row",
+				items: [{
+					name: "width",
+					text: "宽度",
+					labelWidth: "68px",
+					type: "data-source-field-select",
+					fieldConfig: { type: "text" }
+				}, {
+					name: "height",
+					text: "高度",
+					labelWidth: "68px",
+					type: "data-source-field-select",
+					fieldConfig: { type: "text" }
+				}]
+			},
+			{
+				type: "row",
+				items: [{
+					type: "data-source-field-select",
+					text: "overflow",
+					name: "overflow",
+					labelWidth: "68px",
+					checkStrictly: false,
+					dataSourceFieldType: ["string"],
+					fieldConfig: {
+						type: "select",
+						clearable: true,
+						allowCreate: true,
+						options: [
+							{
+								text: "visible",
+								value: "visible"
+							},
+							{
+								text: "hidden",
+								value: "hidden"
+							},
+							{
+								text: "clip",
+								value: "clip"
+							},
+							{
+								text: "scroll",
+								value: "scroll"
+							},
+							{
+								text: "auto",
+								value: "auto"
+							},
+							{
+								text: "overlay",
+								value: "overlay"
+							},
+							{
+								text: "initial",
+								value: "initial"
+							}
+						]
+					}
+				}, {
+					type: "data-source-field-select",
+					text: "透明度",
+					name: "opacity",
+					labelWidth: "68px",
+					dataSourceFieldType: ["string", "number"],
+					fieldConfig: { type: "text" }
+				}]
+			}
+		] };
+		const change = (value, eventData) => {
+			emit("change", value, eventData);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(MContainer), {
+				config,
+				model: __props.values,
+				size: __props.size,
+				disabled: __props.disabled,
+				onChange: change
+			}, null, 8, [
+				"model",
+				"size",
+				"disabled"
+			]), withDirectives(createVNode(Box_default, {
+				model: __props.values,
+				size: __props.size,
+				disabled: __props.disabled,
+				onChange: change
+			}, null, 8, [
+				"model",
+				"size",
+				"disabled"
+			]), [[vShow, !["fixed", "absolute"].includes(__props.values.position)]])], 64);
+		};
+	}
+});
+//#endregion
+export { Layout_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/StyleSetter/pro/Position.js

@@ -0,0 +1,5 @@
+import Position_vue_vue_type_script_setup_true_lang_default from "./Position.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/fields/StyleSetter/pro/Position.vue
+var Position_default = Position_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Position_default as default };

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

@@ -0,0 +1,95 @@
+import { MContainer } from "@tmagic/form";
+import { createBlock, defineComponent, openBlock, unref } from "vue";
+//#region packages/editor/src/fields/StyleSetter/pro/Position.vue?vue&type=script&setup=true&lang.ts
+var Position_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Position",
+	props: {
+		values: {},
+		disabled: { type: Boolean },
+		size: {}
+	},
+	emits: ["change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const positionText = {
+			static: "不定位",
+			relative: "相对定位",
+			absolute: "绝对定位",
+			fixed: "固定定位",
+			sticky: "粘性定位"
+		};
+		const config = { items: [
+			{
+				name: "position",
+				text: "定位",
+				labelWidth: "68px",
+				type: "data-source-field-select",
+				fieldConfig: {
+					type: "select",
+					options: Object.keys(positionText).map((item) => ({
+						value: item,
+						text: `${item}(${positionText[item]})`
+					}))
+				}
+			},
+			{
+				type: "row",
+				labelWidth: "68px",
+				display: () => props.values.position !== "static",
+				items: [{
+					name: "left",
+					type: "data-source-field-select",
+					text: "left",
+					fieldConfig: { type: "text" }
+				}, {
+					name: "top",
+					type: "data-source-field-select",
+					text: "top",
+					fieldConfig: { type: "text" }
+				}]
+			},
+			{
+				type: "row",
+				labelWidth: "68px",
+				display: () => props.values.position !== "static",
+				items: [{
+					name: "right",
+					type: "data-source-field-select",
+					text: "right",
+					fieldConfig: { type: "text" }
+				}, {
+					name: "bottom",
+					type: "data-source-field-select",
+					text: "bottom",
+					fieldConfig: { type: "text" }
+				}]
+			},
+			{
+				labelWidth: "68px",
+				name: "zIndex",
+				text: "zIndex",
+				type: "data-source-field-select",
+				fieldConfig: { type: "text" }
+			}
+		] };
+		const change = (value, eventData) => {
+			emit("change", value, eventData);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(MContainer), {
+				config,
+				model: __props.values,
+				size: __props.size,
+				disabled: __props.disabled,
+				onChange: change
+			}, null, 8, [
+				"model",
+				"size",
+				"disabled"
+			]);
+		};
+	}
+});
+//#endregion
+export { Position_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/fields/UISelect.js

@@ -0,0 +1,6 @@
+import UISelect_vue_vue_type_script_setup_true_lang_default from "./UISelect.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                         */
+//#region packages/editor/src/fields/UISelect.vue
+var UISelect_default = UISelect_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { UISelect_default as default };

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

@@ -0,0 +1,161 @@
+import { UI_SELECT_MODE_EVENT_NAME } from "../utils/const.js";
+import { useServices } from "../hooks/use-services.js";
+import { TMagicButton, TMagicTooltip } from "@tmagic/design";
+import { getIdFromEl } from "@tmagic/utils";
+import { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, inject, openBlock, ref, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { throttle } from "lodash-es";
+import { Close, Delete } from "@element-plus/icons-vue";
+//#region packages/editor/src/fields/UISelect.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 1,
+	class: "m-fields-ui-select",
+	style: { "display": "flex" }
+};
+var UISelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MFieldsUISelect",
+	__name: "UISelect",
+	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, uiService, stageOverlayService } = useServices();
+		const mForm = inject("mForm");
+		const val = computed(() => props.model[props.name]);
+		const uiSelectMode = ref(false);
+		const cancelHandler = () => {
+			uiService.set("uiSelectMode", false);
+			uiSelectMode.value = false;
+			globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
+		};
+		const clickHandler = ({ detail }) => {
+			let { id } = detail;
+			if (detail.nodeType) id = getIdFromEl()(detail) || id;
+			if (id) {
+				emit("change", id);
+				mForm?.$emit("field-change", props.prop, id);
+			}
+			if (cancelHandler) cancelHandler();
+		};
+		const toName = computed(() => {
+			return editorService.getNodeById(val.value)?.name || "";
+		});
+		const startSelect = () => {
+			uiService.set("uiSelectMode", true);
+			uiSelectMode.value = true;
+			globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
+		};
+		const deleteHandler = () => {
+			if (props.model) {
+				emit("change", "");
+				mForm?.$emit("field-change", props.prop, "");
+			}
+		};
+		const selectNode = async (id) => {
+			await editorService.select(id);
+			editorService.get("stage")?.select(id);
+			stageOverlayService.get("stage")?.select(id);
+		};
+		const highlight = throttle((id) => {
+			editorService.highlight(id);
+			editorService.get("stage")?.highlight(id);
+			stageOverlayService.get("stage")?.highlight(id);
+		}, 150);
+		const unhighlight = () => {
+			editorService.set("highlightNode", null);
+			editorService.get("stage")?.clearHighlight();
+			stageOverlayService.get("stage")?.clearHighlight();
+		};
+		return (_ctx, _cache) => {
+			return uiSelectMode.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "m-fields-ui-select",
+				onClick: cancelHandler
+			}, [createVNode(unref(TMagicButton), {
+				type: "danger",
+				icon: unref(Delete),
+				disabled: __props.disabled,
+				size: __props.size,
+				link: "",
+				style: { "padding": "0" }
+			}, {
+				default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("取消", -1)])]),
+				_: 1
+			}, 8, [
+				"icon",
+				"disabled",
+				"size"
+			])])) : (openBlock(), createElementBlock("div", _hoisted_1, [val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(TMagicTooltip), {
+				content: "清除",
+				placement: "top"
+			}, {
+				default: withCtx(() => [createVNode(unref(TMagicButton), {
+					style: { "padding": "0" },
+					type: "danger",
+					icon: unref(Close),
+					disabled: __props.disabled,
+					size: __props.size,
+					link: "",
+					onClick: withModifiers(deleteHandler, ["stop"])
+				}, null, 8, [
+					"icon",
+					"disabled",
+					"size"
+				])]),
+				_: 1
+			}), createVNode(unref(TMagicTooltip), {
+				content: "点击选中组件",
+				placement: "top"
+			}, {
+				default: withCtx(() => [createVNode(unref(TMagicButton), {
+					link: "",
+					style: {
+						"padding": "0",
+						"margin": "0"
+					},
+					disabled: __props.disabled,
+					size: __props.size,
+					onClick: _cache[0] || (_cache[0] = ($event) => selectNode(val.value)),
+					onMouseenter: _cache[1] || (_cache[1] = ($event) => unref(highlight)(val.value)),
+					onMouseleave: unhighlight
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(`${toName.value}_${val.value}`), 1)]),
+					_: 1
+				}, 8, ["disabled", "size"])]),
+				_: 1
+			})], 64)) : (openBlock(), createBlock(unref(TMagicTooltip), {
+				key: 1,
+				content: "点击此处选择",
+				placement: "top"
+			}, {
+				default: withCtx(() => [createVNode(unref(TMagicButton), {
+					link: "",
+					style: {
+						"padding": "0",
+						"margin": "0"
+					},
+					disabled: __props.disabled,
+					size: __props.size,
+					onClick: startSelect
+				}, {
+					default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("点击此处选择", -1)])]),
+					_: 1
+				}, 8, ["disabled", "size"])]),
+				_: 1
+			}))]));
+		};
+	}
+});
+//#endregion
+export { UISelect_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/hooks/use-code-block-edit.js

@@ -0,0 +1,54 @@
+import { tMagicMessage } from "@tmagic/design";
+import { nextTick, ref, useTemplateRef } from "vue";
+import { cloneDeep } from "lodash-es";
+//#region packages/editor/src/hooks/use-code-block-edit.ts
+var useCodeBlockEdit = (codeBlockService) => {
+	const codeConfig = ref();
+	const codeId = ref();
+	const codeBlockEditorRef = useTemplateRef("codeBlockEditor");
+	const createCodeBlock = async () => {
+		codeConfig.value = {
+			name: "",
+			content: "({app, params, flowState}) => {\n  // place your code here\n}",
+			params: []
+		};
+		codeId.value = await codeBlockService.getUniqueId();
+		await nextTick();
+		codeBlockEditorRef.value?.show();
+	};
+	const editCode = async (id) => {
+		const codeBlock = await codeBlockService.getCodeContentById(id);
+		if (!codeBlock) {
+			tMagicMessage.error("获取代码块内容失败");
+			return;
+		}
+		let codeContent = codeBlock.content;
+		if (typeof codeContent !== "string") codeContent = codeContent.toString();
+		codeConfig.value = {
+			...cloneDeep(codeBlock),
+			content: codeContent
+		};
+		codeId.value = id;
+		await nextTick();
+		codeBlockEditorRef.value?.show();
+	};
+	const deleteCode = async (key) => {
+		codeBlockService.deleteCodeDslByIds([key]);
+	};
+	const submitCodeBlockHandler = async (values) => {
+		if (!codeId.value) return;
+		await codeBlockService.setCodeDslById(codeId.value, values);
+		codeBlockEditorRef.value?.hide();
+	};
+	return {
+		codeId,
+		codeConfig,
+		codeBlockEditor: codeBlockEditorRef,
+		createCodeBlock,
+		editCode,
+		deleteCode,
+		submitCodeBlockHandler
+	};
+};
+//#endregion
+export { useCodeBlockEdit };

package/dist/es/hooks/use-data-source-edit.js

@@ -0,0 +1,29 @@
+import { computed, ref } from "vue";
+//#region packages/editor/src/hooks/use-data-source-edit.ts
+var useDataSourceEdit = (dataSourceService) => {
+	const dialogTitle = ref("");
+	const editDialog = ref();
+	const dataSourceValues = ref({});
+	const editable = computed(() => dataSourceService.get("editable"));
+	const editHandler = (id) => {
+		if (!editDialog.value) return;
+		dataSourceValues.value = { ...dataSourceService.getDataSourceById(id) || {} };
+		dialogTitle.value = `编辑${dataSourceValues.value.title || ""}`;
+		editDialog.value.show();
+	};
+	const submitDataSourceHandler = (value, eventData) => {
+		if (value.id) dataSourceService.update(value, { changeRecords: eventData.changeRecords });
+		else dataSourceService.add(value);
+		editDialog.value?.hide();
+	};
+	return {
+		dialogTitle,
+		editDialog,
+		dataSourceValues,
+		editable,
+		editHandler,
+		submitDataSourceHandler
+	};
+};
+//#endregion
+export { useDataSourceEdit };

package/dist/es/hooks/use-editor-content-height.js

@@ -0,0 +1,17 @@
+import { useServices } from "./use-services.js";
+import { computed, ref, watch } from "vue";
+//#region packages/editor/src/hooks/use-editor-content-height.ts
+var useEditorContentHeight = () => {
+	const { uiService } = useServices();
+	const frameworkHeight = computed(() => uiService.get("frameworkRect").height);
+	const navMenuHeight = computed(() => uiService.get("navMenuRect").height);
+	const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
+	const height = ref(0);
+	watch(editorContentHeight, () => {
+		if (height.value > 0 && height.value === editorContentHeight.value) return;
+		height.value = editorContentHeight.value;
+	}, { immediate: true });
+	return { height };
+};
+//#endregion
+export { useEditorContentHeight };

package/dist/es/hooks/use-filter.js

@@ -0,0 +1,35 @@
+import { updateStatus } from "../utils/tree.js";
+import { traverseNode } from "@tmagic/utils";
+import { ref } from "vue";
+//#region packages/editor/src/hooks/use-filter.ts
+var useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
+	const filterIsMatch = (value, data) => {
+		const string = !Array.isArray(value) ? [value] : value;
+		if (!string.length) return true;
+		return string.some((v) => filterNodeMethod(v, data));
+	};
+	const filter = (text) => {
+		if (!nodeData.value.length) return;
+		nodeData.value.forEach((node) => {
+			traverseNode(node, (node, parents) => {
+				if (!nodeStatusMap.value) return;
+				const visible = filterIsMatch(text, node);
+				if (visible && parents.length) parents.forEach((parent) => {
+					if (text || text.length) updateStatus(nodeStatusMap.value, parent.id, {
+						visible,
+						expand: true
+					});
+				});
+				updateStatus(nodeStatusMap.value, node.id, { visible });
+			});
+		});
+	};
+	return {
+		filterText: ref(""),
+		filterTextChangeHandler(text) {
+			filter(text);
+		}
+	};
+};
+//#endregion
+export { useFilter };