@tmagic/editor 1.8.0-beta.1 → 1.8.0-beta.10

package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js

@@ -18,17 +18,18 @@ import keybinding_default from "./services/keybinding.js";
 import stageOverlay_default from "./services/stageOverlay.js";
 import { defaultEditorProps } from "./editorProps.js";
 import { initServiceEvents, initServiceState } from "./initService.js";
-import { createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, renderSlot, unref, withCtx } from "vue";
+import { 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({
+var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditor",
 	__name: "Editor",
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
 		modelValue: {},
 		componentGroupList: {},
 		datasourceList: {},
 		sidebar: {},
+		hideSidebar: { type: Boolean },
 		menu: {},
 		layerContentMenu: {},
 		stageContentMenu: {},
@@ -53,6 +54,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		disabledMultiSelect: { type: Boolean },
 		alwaysMultiSelect: { type: Boolean },
 		disabledPageFragment: { type: Boolean },
+		disabledFlashTip: { type: Boolean },
 		disabledStageOverlay: { type: Boolean },
 		disabledShowSrc: { type: Boolean },
 		disabledDataSource: { type: Boolean },
@@ -69,6 +71,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		beforeDblclick: { type: Function },
 		beforeLayerNodeDblclick: { type: Function },
 		extendFormState: { type: Function },
+		historyListExtraTabs: {},
 		pageBarSortOptions: {},
 		pageFilterFunction: { type: Function }
 	}, defaultEditorProps),
@@ -118,17 +121,38 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			guidesOptions: props.guidesOptions,
 			disabledMultiSelect: props.disabledMultiSelect,
 			alwaysMultiSelect: props.alwaysMultiSelect,
+			disabledFlashTip: props.disabledFlashTip,
 			beforeDblclick: props.beforeDblclick
 		};
 		stageOverlay_default.set("stageOptions", stageOptions);
+		const propsPanelRef = ref(null);
 		provide("services", services);
 		provide("codeOptions", props.codeOptions);
 		provide("stageOptions", stageOptions);
+		/**
+		* 把顶层 `extendFormState` 提供给非 PropsPanel 链路上的组件使用（例如历史差异对话框 HistoryDiffDialog
+		* 内部的 CompareForm）。这样所有依赖业务上下文的表单 filterFunction 都能拿到一致的扩展状态，
+		* 与 PropsPanel 通过 `:extend-state` 显式传入的方式保持等价。
+		*/
+		provide("extendFormState", props.extendFormState);
+		/**
+		* 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
+		* 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
+		*/
+		provide("getPropsPanelFormState", () => propsPanelRef.value?.configForm?.formState);
+		/**
+		* 把历史记录面板的自定义扩展 tab 提供给深层的 HistoryListPanel（它挂在 NavMenu 中，
+		* 以 markRaw component 形式渲染，无法直接通过 props 透传）。业务方可借此在历史记录
+		* 面板内追加自定义模块的历史 tab。
+		*/
+		provide("historyListExtraTabs", props.historyListExtraTabs);
 		provide("eventBus", new EventEmitter());
 		const propsPanelMountedHandler = (e) => {
+			propsPanelRef.value = e;
 			emit("props-panel-mounted", e);
 		};
 		const propsPanelUnmountedHandler = () => {
+			propsPanelRef.value = null;
 			emit("props-panel-unmounted");
 		};
 		const propsPanelSubmitErrorHandler = (e) => {
@@ -145,7 +169,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			return openBlock(), createBlock(Framework_default, {
 				"disabled-page-fragment": __props.disabledPageFragment,
 				"page-bar-sort-options": __props.pageBarSortOptions,
-				"page-filter-function": __props.pageFilterFunction
+				"page-filter-function": __props.pageFilterFunction,
+				"hide-sidebar": __props.hideSidebar
 			}, {
 				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"])])]),
@@ -225,7 +250,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			}, 8, [
 				"disabled-page-fragment",
 				"page-bar-sort-options",
-				"page-filter-function"
+				"page-filter-function",
+				"hide-sidebar"
 			]);
 		};
 	}

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

@@ -3,9 +3,10 @@ import { useServices } from "../hooks/use-services.js";
 import { useWindowRect } from "../hooks/use-window-rect.js";
 import { useEditorContentHeight } from "../hooks/use-editor-content-height.js";
 import { useNextFloatBoxPosition } from "../hooks/use-next-float-box-position.js";
+import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import CodeEditor_default from "../layouts/CodeEditor.js";
 import FloatingBox_default from "./FloatingBox.js";
-import { MFormBox, defineFormConfig, defineFormItem } from "@tmagic/form";
+import { MFormBox } from "@tmagic/form";
 import { TMagicButton, TMagicDialog, TMagicTag, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, isRef, mergeModels, nextTick, openBlock, ref, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
 //#region packages/editor/src/components/CodeBlockEditor.vue?vue&type=script&setup=true&lang.ts
@@ -16,10 +17,10 @@ var _hoisted_1 = { style: {
 var _hoisted_2 = { style: { "flex": "1" } };
 var _hoisted_3 = { style: { "flex": "1" } };
 var _hoisted_4 = { class: "dialog-footer" };
-var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeBlockEditor",
 	__name: "CodeBlockEditor",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		content: {},
 		disabled: { type: Boolean },
 		isDataSource: { type: Boolean },
@@ -33,7 +34,7 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		},
 		"visibleModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels([
+	emits: /*@__PURE__*/ mergeModels([
 		"submit",
 		"close",
 		"open"
@@ -53,114 +54,21 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 			formBox.value.form.values.content = magicVsEditorRef.value.getEditorValue();
 			difVisible.value = false;
 		};
-		const defaultParamColConfig = defineFormItem({
-			type: "row",
-			label: "参数类型",
-			items: [{
-				text: "参数类型",
-				labelWidth: "70px",
-				type: "select",
-				name: "type",
-				options: [
-					{
-						text: "数字",
-						label: "数字",
-						value: "number"
-					},
-					{
-						text: "字符串",
-						label: "字符串",
-						value: "text"
-					},
-					{
-						text: "组件",
-						label: "组件",
-						value: "ui-select"
-					}
-				]
-			}]
-		});
-		const functionConfig = computed(() => defineFormConfig([
-			{
-				text: "名称",
-				name: "name",
-				rules: [{
-					required: true,
-					message: "请输入名称",
-					trigger: "blur"
-				}]
-			},
-			{
-				text: "描述",
-				name: "desc"
-			},
-			{
-				text: "执行时机",
-				name: "timing",
-				type: "select",
-				options: () => {
-					const options = [{
-						text: "初始化前",
-						value: "beforeInit"
-					}, {
-						text: "初始化后",
-						value: "afterInit"
-					}];
-					if (props.dataSourceType !== "base") {
-						options.push({
-							text: "请求前",
-							value: "beforeRequest"
-						});
-						options.push({
-							text: "请求后",
-							value: "afterRequest"
-						});
-					}
-					return options;
-				},
-				display: () => props.isDataSource
-			},
-			{
-				type: "table",
-				border: true,
-				text: "参数",
-				enableFullscreen: false,
-				enableToggleMode: false,
-				name: "params",
-				dropSort: false,
-				items: [
-					{
-						type: "text",
-						label: "参数名",
-						name: "name"
-					},
-					{
-						type: "text",
-						label: "描述",
-						name: "extra"
-					},
-					codeBlockService.getParamsColConfig() || defaultParamColConfig
-				]
-			},
-			{
-				name: "content",
-				type: "vs-code",
-				options: inject("codeOptions", {}),
-				autosize: {
-					minRows: 10,
-					maxRows: 30
-				},
-				onChange: (_formState, code) => {
-					try {
-						getEditorConfig("parseDSL")(code);
-						return code;
-					} catch (error) {
-						tMagicMessage.error(error.message);
-						throw error;
-					}
-				}
-			}
-		]));
+		const codeOptions = inject("codeOptions", {});
+		/**
+		* 代码块编辑表单配置。统一委托到 utils/code-block 的 `getCodeBlockFormConfig`，
+		* 与 CompareForm 等其它使用方共享同一份 schema，避免双份维护。
+		*
+		* 这里以 computed 包裹是为了让 `props.isDataSource` / `props.dataSourceType` 变化时
+		* "执行时机"字段的可见性与可选项实时刷新。
+		*/
+		const functionConfig = computed(() => getCodeBlockFormConfig({
+			paramColConfig: codeBlockService.getParamsColConfig(),
+			isDataSource: () => Boolean(props.isDataSource),
+			dataSourceType: () => props.dataSourceType,
+			codeOptions,
+			editable: true
+		}));
 		const parseContent = (content) => {
 			if (typeof content === "string") return getEditorConfig("parseDSL")(content);
 			return content;
@@ -304,7 +212,7 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					})])]),
 					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(unref(TMagicTag), {
 						size: "small",
-						type: "info"
+						type: "danger"
 					}, {
 						default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("修改前", -1)])]),
 						_: 1

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

@@ -2,11 +2,13 @@ import { error } from "../utils/logger.js";
 import { MForm } from "@tmagic/form";
 import { computed, createBlock, defineComponent, openBlock, unref, useTemplateRef } from "vue";
 //#region packages/editor/src/components/CodeParams.vue?vue&type=script&setup=true&lang.ts
-var CodeParams_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeParams_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeParams",
 	__name: "CodeParams",
 	props: {
 		model: {},
+		lastValues: {},
+		isCompare: { type: Boolean },
 		size: {},
 		disabled: { type: Boolean },
 		name: {},
@@ -56,6 +58,8 @@ var CodeParams_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				ref: "form",
 				config: codeParamsConfig.value,
 				"init-values": __props.model,
+				"last-values": __props.lastValues,
+				"is-compare": __props.isCompare,
 				disabled: __props.disabled,
 				size: __props.size,
 				"watch-props": false,
@@ -63,6 +67,8 @@ var CodeParams_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			}, null, 8, [
 				"config",
 				"init-values",
+				"last-values",
+				"is-compare",
 				"disabled",
 				"size"
 			]);

package/dist/es/components/CompareForm.js

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

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

@@ -0,0 +1,196 @@
+import { getCodeBlockFormConfig } from "../utils/code-block.js";
+import { MForm } from "@tmagic/form";
+import { HookType } from "@tmagic/core";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, normalizeStyle, openBlock, provide, ref, unref, useTemplateRef, watch, watchEffect } from "vue";
+import { isEqual } from "lodash-es";
+//#region packages/editor/src/components/CompareForm.vue?vue&type=script&setup=true&lang.ts
+var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MEditorCompareForm",
+	__name: "CompareForm",
+	props: {
+		value: {},
+		lastValue: {},
+		type: {},
+		category: { default: "node" },
+		dataSourceType: {},
+		labelWidth: { default: "120px" },
+		height: {},
+		extendState: {
+			type: Function,
+			default: (state) => state
+		},
+		baseFormState: {},
+		selfDiffFieldTypes: {},
+		loadConfig: {},
+		services: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		provide("services", props.services);
+		const config = ref([]);
+		/** vs-code 编辑器的 monaco 配置项，沿用 Editor 顶层 provide('codeOptions', ...) 的注入。 */
+		const codeOptions = inject("codeOptions", {});
+		/** 将代码块的 content 字段统一成字符串，便于在表单/对比中展示 */
+		const normalizeCodeBlockValue = (v) => {
+			if (!v) return {};
+			const next = { ...v };
+			if (next.content && typeof next.content !== "string") try {
+				next.content = next.content.toString();
+			} catch {
+				next.content = "";
+			}
+			return next;
+		};
+		const currentValues = computed(() => {
+			if (props.category === "code-block") return normalizeCodeBlockValue(props.value);
+			return props.value || {};
+		});
+		const lastValuesProcessed = computed(() => {
+			if (props.category === "code-block") return normalizeCodeBlockValue(props.lastValue);
+			return props.lastValue || {};
+		});
+		/**
+		* 外层包裹层的样式：当传入 `height` 时启用固定高度 + 内部滚动，
+		* 这样滚动条会出现在 CompareForm 内部，避免父容器（如 Dialog）自身也产生滚动。
+		*/
+		const wrapperStyle = computed(() => {
+			if (!props.height) return void 0;
+			return {
+				height: props.height,
+				overflow: "auto"
+			};
+		});
+		/**
+		* `code-select` 字段在历史数据中存在两种"语义为空"的形态：
+		* - 字符串 `''`（旧数据 / 用户从未配置过钩子）；
+		* - `{ hookType: HookType.CODE, hookData: [] }`（CodeSelect.vue 在挂载时
+		*   写入的默认结构，参见 packages/editor/src/fields/CodeSelect.vue 中
+		*   `props.model[props.name] = { hookType: HookType.CODE, hookData: [] }`）。
+		*
+		* 直接 `isEqual` 会把两者判为不等，从而在历史对比里对每个未配置过钩子的组件
+		* 都展示一份"差异"，体验很糟糕。这里把它们视为相等，跳过对比。
+		*
+		* 其它类型字段沿用 MForm/Container 的默认 `!isEqual` 判断逻辑。
+		*/
+		const isEmptyCodeSelectValue = (v) => {
+			if (v === "" || v === void 0 || v === null) return true;
+			if (Array.isArray(v) && v.length === 0) return true;
+			return typeof v === "object" && v.hookType === HookType.CODE && Array.isArray(v.hookData) && v.hookData.length === 0;
+		};
+		const showDiff = ({ curValue, lastValue, config }) => {
+			if (config?.type === "code-select") {
+				if (isEmptyCodeSelectValue(curValue) && isEmptyCodeSelectValue(lastValue)) return false;
+			}
+			return !isEqual(curValue, lastValue);
+		};
+		const removeStyleDisplayConfig = (formConfig) => formConfig.map((item) => {
+			if (!("type" in item)) return item;
+			if (item?.type !== "tab" || !Array.isArray(item.items)) return item;
+			return {
+				...item,
+				items: item.items.map((tabPane) => {
+					if (tabPane?.title !== "样式" || !Array.isArray(tabPane.items)) return tabPane;
+					return {
+						...tabPane,
+						display: true
+					};
+				})
+			};
+		});
+		const mergedExtendState = (state) => {
+			return props.extendState(props.baseFormState || state);
+		};
+		/**
+		* 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
+		* 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
+		*/
+		const defaultLoadConfig = async () => {
+			if (!props.services) return [];
+			switch (props.category) {
+				case "node":
+					if (!props.type) return [];
+					return removeStyleDisplayConfig(await props.services.propsService.getPropsConfig(props.type, { node: props.value }));
+				case "data-source": return props.services.dataSourceService.getFormConfig(props.type || "base").map((item) => "type" in item && item.type === "tab" ? {
+					...item,
+					active: "fields"
+				} : item);
+				case "code-block": return getCodeBlockFormConfig({
+					paramColConfig: props.services.codeBlockService.getParamsColConfig(),
+					isDataSource: () => Boolean(props.dataSourceType),
+					dataSourceType: () => props.dataSourceType,
+					codeOptions,
+					editable: false
+				});
+				default: return [];
+			}
+		};
+		const loadConfig = async () => {
+			if (props.loadConfig) {
+				config.value = await props.loadConfig({
+					category: props.category,
+					type: props.type,
+					dataSourceType: props.dataSourceType,
+					defaultLoadConfig
+				});
+				return;
+			}
+			config.value = await defaultLoadConfig();
+		};
+		watch([
+			() => props.category,
+			() => props.type,
+			() => props.dataSourceType,
+			() => props.loadConfig
+		], () => {
+			loadConfig();
+		}, { immediate: true });
+		const formRef = useTemplateRef("form");
+		/**
+		* 把 services / stage 注入 MForm 的 formState，避免 propsService 注入的表单配置中
+		* 形如 `display: ({ services }) => services.uiService.get(...)` 的 filterFunction
+		* 在执行时拿不到 `formState.services` 而报错。
+		*
+		* 与 props-panel/FormPanel.vue 中的注入方式保持一致：
+		* - services：整个 useServices() 返回的服务集合；
+		* - stage：当前 editorService.get('stage') 的最新值。
+		*/
+		watchEffect(() => {
+			if (formRef.value && props.services) {
+				formRef.value.formState.stage = props.services.editorService.get("stage");
+				formRef.value.formState.services = props.services;
+			}
+		});
+		__expose({
+			form: formRef,
+			config,
+			reload: loadConfig
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "m-editor-compare-form-wrapper",
+				style: normalizeStyle(wrapperStyle.value)
+			}, [config.value.length ? (openBlock(), createBlock(unref(MForm), {
+				key: 0,
+				ref: "form",
+				class: "m-editor-compare-form",
+				config: config.value,
+				"init-values": currentValues.value,
+				"last-values": lastValuesProcessed.value,
+				"is-compare": true,
+				disabled: true,
+				"label-width": __props.labelWidth,
+				"extend-state": mergedExtendState,
+				"show-diff": showDiff,
+				"self-diff-field-types": __props.selfDiffFieldTypes
+			}, null, 8, [
+				"config",
+				"init-values",
+				"last-values",
+				"label-width",
+				"self-diff-field-types"
+			])) : createCommentVNode("v-if", true)], 4);
+		};
+	}
+});
+//#endregion
+export { CompareForm_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -2,7 +2,7 @@ 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";
 //#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({
+var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorContentMenu",
 	__name: "ContentMenu",
 	props: {

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

@@ -9,9 +9,9 @@ var _hoisted_1 = {
 	ref: "title",
 	class: "m-editor-float-box-title"
 };
-var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "FloatingBox",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		position: { default: () => ({
 			left: 0,
 			top: 0

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

@@ -3,7 +3,7 @@ import { createBlock, createElementBlock, createElementVNode, createVNode, defin
 import { Edit } from "@element-plus/icons-vue";
 //#region packages/editor/src/components/Icon.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src"];
-var Icon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Icon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorIcon",
 	__name: "Icon",
 	props: { icon: {} },

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

@@ -1,7 +1,7 @@
 import { useGetSo } from "../hooks/use-getso.js";
 import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, useTemplateRef } from "vue";
 //#region packages/editor/src/components/Resizer.vue?vue&type=script&setup=true&lang.ts
-var Resizer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Resizer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorResizer",
 	__name: "Resizer",
 	emits: ["change"],

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: {

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: {
@@ -73,11 +73,11 @@ var ToolButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				placement: "bottom-start",
 				content: __props.data.tooltip
 			}, {
-				default: withCtx(() => [createVNode(unref(TMagicButton), {
+				default: withCtx(() => [createVNode(unref(TMagicButton), mergeProps({
 					size: "small",
 					link: "",
 					disabled: disabled.value
-				}, createSlots({ _: 2 }, [__props.data.icon ? {
+				}, __props.data.buttonProps || {}), createSlots({ _: 2 }, [__props.data.icon ? {
 					name: "icon",
 					fn: withCtx(() => [createVNode(Icon_default, { icon: __props.data.icon }, null, 8, ["icon"])]),
 					key: "0"
@@ -85,15 +85,15 @@ var ToolButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					name: "default",
 					fn: withCtx(() => [createTextVNode(toDisplayString(__props.data.text), 1)]),
 					key: "1"
-				} : void 0]), 1032, ["disabled"])]),
+				} : void 0]), 1040, ["disabled"])]),
 				_: 1
-			}, 8, ["content"])) : (openBlock(), createBlock(unref(TMagicButton), {
+			}, 8, ["content"])) : (openBlock(), createBlock(unref(TMagicButton), mergeProps({
 				key: 1,
 				size: "small",
 				link: "",
 				disabled: disabled.value,
 				title: __props.data.text
-			}, createSlots({ _: 2 }, [__props.data.icon ? {
+			}, __props.data.buttonProps || {}), createSlots({ _: 2 }, [__props.data.icon ? {
 				name: "icon",
 				fn: withCtx(() => [createVNode(Icon_default, { icon: __props.data.icon }, null, 8, ["icon"])]),
 				key: "0"
@@ -101,7 +101,7 @@ var ToolButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				name: "default",
 				fn: withCtx(() => [createTextVNode(toDisplayString(__props.data.text), 1)]),
 				key: "1"
-			} : void 0]), 1032, ["disabled", "title"]))], 64)) : __props.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
+			} : void 0]), 1040, ["disabled", "title"]))], 64)) : __props.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
 				key: 3,
 				trigger: "click",
 				disabled: disabled.value,

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: {