@tmagic/editor 1.7.14-beta.0 → 1.7.14-beta.2

package/dist/tmagic-editor.umd.cjs

@@ -5146,10 +5146,10 @@
 			const { protocol = options.protocol, item } = this.getValueAndProtocol(storage.getItem(`${options.namespace || namespace}:${key}`));
 			if (item === null) return null;
 			switch (protocol) {
-				case Protocol.OBJECT: return getEditorConfig("parseDSL")(`(${item})`);
-				case Protocol.JSON: return JSON.parse(item);
-				case Protocol.NUMBER: return Number(item);
-				case Protocol.BOOLEAN:
+				case "object": return getEditorConfig("parseDSL")(`(${item})`);
+				case "json": return JSON.parse(item);
+				case "number": return Number(item);
+				case "boolean":
 					if (item === "true") return true;
 					if (item === "false") return false;
 				default: return item;
@@ -5177,7 +5177,7 @@
 			const namespace = this.getNamespace();
 			let item = value;
 			const protocol = options.protocol ? `${options.protocol}:` : "";
-			if (typeof value === Protocol.STRING || typeof value === Protocol.NUMBER) item = `${protocol}${value}`;
+			if (typeof value === "string" || typeof value === "number") item = `${protocol}${value}`;
 			else item = `${protocol}${(0, serialize_javascript.default)(value)}`;
 			storage.setItem(`${options.namespace || namespace}:${key}`, item);
 		}
@@ -7674,7 +7674,7 @@
 	var SplitView_default = SplitView_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/components/Icon.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$63 = ["src"];
+	var _hoisted_1$64 = ["src"];
 	var Icon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "MEditorIcon",
 		__name: "Icon",
@@ -7692,7 +7692,7 @@
 					key: 1,
 					class: "magic-editor-icon"
 				}, {
-					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("img", { src: __props.icon }, null, 8, _hoisted_1$63)]),
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("img", { src: __props.icon }, null, 8, _hoisted_1$64)]),
 					_: 1
 				})) : typeof __props.icon === "string" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("i", {
 					key: 2,
@@ -7712,7 +7712,7 @@
 	var Icon_default = Icon_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/components/ToolButton.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$62 = {
+	var _hoisted_1$63 = {
 		key: 1,
 		class: "menu-item-text"
 	};
@@ -7727,9 +7727,11 @@
 			}) },
 			eventType: { default: "click" }
 		},
-		setup(__props) {
+		setup(__props, { expose: __expose }) {
 			const props = __props;
 			const services = useServices();
+			const rootElRef = (0, vue.useTemplateRef)("rootEl");
+			const getElRef = () => rootElRef;
 			const disabled = (0, vue.computed)(() => {
 				if (typeof props.data === "string") return false;
 				if (props.data.type === "component") return false;
@@ -7761,9 +7763,11 @@
 				if (props.eventType !== "mouseup") return;
 				if (item.type === "button" && event.button === 0) buttonHandler(item, event);
 			};
+			__expose({ getElRef });
 			return (_ctx, _cache) => {
 				return display.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 					key: 0,
+					ref: "rootEl",
 					class: (0, vue.normalizeClass)(["menu-item", `${__props.data.type} ${__props.data.className || ""}`]),
 					onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(__props.data, $event)),
 					onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(__props.data, $event)),
@@ -7771,7 +7775,7 @@
 				}, [__props.data.type === "divider" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicDivider), {
 					key: 0,
 					direction: __props.data.direction || "vertical"
-				}, null, 8, ["direction"])) : __props.data.type === "text" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$62, (0, vue.toDisplayString)(__props.data.text), 1)) : __props.data.type === "button" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [__props.data.tooltip ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+				}, null, 8, ["direction"])) : __props.data.type === "text" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$63, (0, vue.toDisplayString)(__props.data.text), 1)) : __props.data.type === "button" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [__props.data.tooltip ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
 					key: 0,
 					effect: "dark",
 					placement: "bottom-start",
@@ -7840,7 +7844,7 @@
 	var ToolButton_default = ToolButton_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/AddButton.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$61 = {
+	var _hoisted_1$62 = {
 		key: 0,
 		id: "m-editor-page-bar-add-icon",
 		class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
@@ -7866,7 +7870,7 @@
 				editorService.add(pageConfig);
 			};
 			return (_ctx, _cache) => {
-				return showAddPageButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$61, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
+				return showAddPageButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$62, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
 					reference: (0, vue.withCtx)(() => [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Plus) }, null, 8, ["icon"])]),
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(ToolButton_default, { data: {
 						type: "button",
@@ -7891,7 +7895,7 @@
 	var AddButton_default = AddButton_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$60 = {
+	var _hoisted_1$61 = {
 		class: "m-editor-page-bar",
 		ref: "pageBar"
 	};
@@ -7985,7 +7989,7 @@
 				}
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$60, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$61, [
 					(0, vue.renderSlot)(_ctx.$slots, "prepend"),
 					__props.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$22, [(0, vue.renderSlot)(_ctx.$slots, "default")], 512)) : (0, vue.createCommentVNode)("v-if", true),
 					canScroll.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -8007,7 +8011,7 @@
 	var PageBarScrollContainer_default = PageBarScrollContainer_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/PageList.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$59 = {
+	var _hoisted_1$60 = {
 		key: 0,
 		id: "m-editor-page-bar-list-icon",
 		class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
@@ -8026,7 +8030,7 @@
 				await editorService.select(id);
 			};
 			return (_ctx, _cache) => {
-				return showPageListButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$59, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), {
+				return showPageListButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$60, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), {
 					"popper-class": "page-bar-popover",
 					placement: "top",
 					trigger: "hover",
@@ -8058,7 +8062,7 @@
 	var PageList_default = PageList_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/Search.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$58 = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
+	var _hoisted_1$59 = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
 	var Search_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		__name: "Search",
 		props: {
@@ -8091,7 +8095,7 @@
 				emit("search", values);
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$58, [(0, vue.createVNode)(Icon_default, {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$59, [(0, vue.createVNode)(Icon_default, {
 					icon: (0, vue.unref)(_element_plus_icons_vue.Search),
 					onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
 					class: (0, vue.normalizeClass)({ "icon-active": visible.value })
@@ -8115,7 +8119,7 @@
 	var Search_default = Search_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/PageBar.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$57 = { class: "m-editor-page-bar-tabs" };
+	var _hoisted_1$58 = { class: "m-editor-page-bar-tabs" };
 	var _hoisted_2$20 = ["data-page-id", "onClick"];
 	var _hoisted_3$6 = { class: "m-editor-page-bar-title" };
 	var _hoisted_4$5 = ["title"];
@@ -8183,7 +8187,7 @@
 				}
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$57, [(0, vue.createVNode)(PageBarScrollContainer_default, {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$58, [(0, vue.createVNode)(PageBarScrollContainer_default, {
 					ref: "pageBarScrollContainer",
 					"page-bar-sort-options": __props.pageBarSortOptions,
 					length: list.value.length
@@ -8242,7 +8246,7 @@
 	var PageBar_default = PageBar_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/AddPageBox.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$56 = { class: "m-editor-empty-panel" };
+	var _hoisted_1$57 = { class: "m-editor-empty-panel" };
 	var _hoisted_2$19 = { class: "m-editor-empty-content" };
 	var AddPageBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "MEditorAddPageBox",
@@ -8260,7 +8264,7 @@
 				});
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$56, [(0, vue.createElementVNode)("div", _hoisted_2$19, [(0, vue.createElementVNode)("div", {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$57, [(0, vue.createElementVNode)("div", _hoisted_2$19, [(0, vue.createElementVNode)("div", {
 					class: "m-editor-empty-button",
 					onClick: _cache[0] || (_cache[0] = ($event) => clickHandler((0, vue.unref)(_tmagic_core.NodeType).PAGE))
 				}, [(0, vue.createElementVNode)("div", null, [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Plus) }, null, 8, ["icon"])]), _cache[2] || (_cache[2] = (0, vue.createElementVNode)("p", null, "新增页面", -1))]), !__props.disabledPageFragment ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -8276,7 +8280,7 @@
 	var AddPageBox_default = AddPageBox_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/CodeEditor.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$55 = { class: "magic-code-editor" };
+	var _hoisted_1$56 = { class: "magic-code-editor" };
 	var _hoisted_2$18 = {
 		ref: "codeEditor",
 		class: "magic-code-editor-content"
@@ -8393,23 +8397,23 @@
 				if (props.type === "diff") {
 					const originalModel = monaco.editor.createModel(values.value, "text/javascript");
 					const modifiedModel = monaco.editor.createModel(toString(m, props.language), "text/javascript");
-					const position = vsDiffEditor?.getPosition();
+					const viewState = vsDiffEditor?.saveViewState();
 					const result = vsDiffEditor?.setModel({
 						original: originalModel,
 						modified: modifiedModel
 					});
-					if (position) {
-						vsDiffEditor?.setPosition(position);
+					if (viewState) (0, vue.nextTick)(() => {
+						vsDiffEditor?.restoreViewState(viewState);
 						vsDiffEditor?.focus();
-					}
+					});
 					return result;
 				}
-				const position = vsEditor?.getPosition();
+				const viewState = vsEditor?.saveViewState();
 				const result = vsEditor?.setValue(values.value);
-				if (position) {
-					vsEditor?.setPosition(position);
+				if (viewState) (0, vue.nextTick)(() => {
+					vsEditor?.restoreViewState(viewState);
 					vsEditor?.focus();
-				}
+				});
 				return result;
 			};
 			const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
@@ -8513,7 +8517,7 @@
 				}
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$55, [((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$56, [((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
 					to: "body",
 					disabled: !fullScreen.value
 				}, [(0, vue.createElementVNode)("div", {
@@ -8540,7 +8544,7 @@
 	var CodeEditor_default = CodeEditor_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/Framework.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$54 = {
+	var _hoisted_1$55 = {
 		class: "m-editor",
 		ref: "content",
 		style: { "min-width": "900px" }
@@ -8602,7 +8606,7 @@
 				}
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$54, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$55, [
 					(0, vue.renderSlot)(_ctx.$slots, "header"),
 					(0, vue.renderSlot)(_ctx.$slots, "nav"),
 					(0, vue.renderSlot)(_ctx.$slots, "content-before"),
@@ -8666,6 +8670,205 @@
 	//#region packages/editor/src/layouts/Framework.vue
 	var Framework_default = Framework_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
+	//#region packages/editor/src/layouts/NavMenuColumn.vue?vue&type=script&setup=true&lang.ts
+	var _hoisted_1$54 = { class: "m-editor-nav-menu-overflow-list" };
+	var NavMenuColumn_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+		name: "MEditorNavMenuColumn",
+		__name: "NavMenuColumn",
+		props: {
+			columnKey: {},
+			items: { default: () => [] },
+			width: {},
+			gap: { default: 3 },
+			popoverWidth: { default: 180 }
+		},
+		setup(__props) {
+			const props = __props;
+			const columnEl = (0, vue.useTemplateRef)("columnEl");
+			const moreWrapperEl = (0, vue.useTemplateRef)("moreWrapperEl");
+			const popoverVisible = (0, vue.ref)(false);
+			const togglePopover = () => {
+				popoverVisible.value = !popoverVisible.value;
+			};
+			const itemInstances = (0, vue.ref)([]);
+			let slotsRO;
+			const observedEls = /* @__PURE__ */ new Set();
+			const setItemRef = (inst, index) => {
+				itemInstances.value[index] = inst ?? null;
+			};
+			const itemEls = (0, vue.computed)(() => itemInstances.value.map((inst) => inst?.getElRef?.().value ?? null));
+			const reobserveSlots = () => {
+				if (!slotsRO) return;
+				for (const el of observedEls) slotsRO.unobserve(el);
+				observedEls.clear();
+				for (const el of itemEls.value) if (el) {
+					slotsRO.observe(el);
+					observedEls.add(el);
+				}
+			};
+			const cachedWidths = (0, vue.ref)(/* @__PURE__ */ new Map());
+			const moreWidth = (0, vue.ref)(0);
+			const containerWidth = (0, vue.ref)(0);
+			const hiddenIndexSet = (0, vue.ref)(/* @__PURE__ */ new Set());
+			const hasOverflow = (0, vue.computed)(() => hiddenIndexSet.value.size > 0);
+			const overflowItems = (0, vue.computed)(() => props.items.filter((_, index) => hiddenIndexSet.value.has(index)));
+			const measureAndCompute = () => {
+				if (!columnEl.value) return;
+				containerWidth.value = columnEl.value.clientWidth;
+				const els = itemEls.value;
+				for (let i = 0; i < props.items.length; i++) {
+					const el = els[i];
+					if (!el) {
+						cachedWidths.value.delete(i);
+						continue;
+					}
+					const w = el.getBoundingClientRect().width;
+					if (w > 0) cachedWidths.value.set(i, w);
+					else cachedWidths.value.delete(i);
+				}
+				if (moreWrapperEl.value) {
+					const w = moreWrapperEl.value.getBoundingClientRect().width;
+					if (w > 0) moreWidth.value = w;
+				}
+				const total = props.items.length;
+				if (total === 0 || containerWidth.value <= 0) {
+					if (hiddenIndexSet.value.size > 0) hiddenIndexSet.value = /* @__PURE__ */ new Set();
+					return;
+				}
+				let fullSum = 0;
+				let positive = 0;
+				for (let i = 0; i < total; i++) {
+					const w = cachedWidths.value.get(i) ?? 0;
+					if (w > 0) {
+						fullSum += w;
+						positive += 1;
+					}
+				}
+				fullSum += props.gap * Math.max(0, positive - 1);
+				const effectiveMoreWidth = moreWidth.value > 0 ? moreWidth.value : 32;
+				const reservedMore = effectiveMoreWidth + (positive > 0 ? props.gap : 0);
+				let nextHidden = null;
+				if (fullSum + reservedMore <= containerWidth.value + .5) {
+					if (hiddenIndexSet.value.size > 0) nextHidden = /* @__PURE__ */ new Set();
+				} else {
+					const newHidden = /* @__PURE__ */ new Set();
+					let used = effectiveMoreWidth;
+					let cutoff = -1;
+					for (let i = 0; i < total; i++) {
+						const w = cachedWidths.value.get(i) ?? 0;
+						if (w === 0) continue;
+						const need = props.gap + w;
+						if (used + need > containerWidth.value) {
+							cutoff = i;
+							break;
+						}
+						used += need;
+					}
+					if (cutoff >= 0) for (let j = cutoff; j < total; j++) newHidden.add(j);
+					nextHidden = newHidden;
+				}
+				if (nextHidden) {
+					if (!(nextHidden.size === hiddenIndexSet.value.size && [...nextHidden].every((v) => hiddenIndexSet.value.has(v)))) hiddenIndexSet.value = nextHidden;
+				}
+			};
+			let raf = 0;
+			const scheduleMeasure = () => {
+				if (raf) cancelAnimationFrame(raf);
+				raf = requestAnimationFrame(() => {
+					raf = 0;
+					measureAndCompute();
+					if (hasOverflow.value && moreWidth.value === 0) raf = requestAnimationFrame(() => {
+						raf = 0;
+						measureAndCompute();
+					});
+				});
+			};
+			(0, vue.watch)(hasOverflow, (value) => {
+				if (!value) popoverVisible.value = false;
+			});
+			(0, vue.watch)(() => props.items, () => {
+				cachedWidths.value = /* @__PURE__ */ new Map();
+				hiddenIndexSet.value = /* @__PURE__ */ new Set();
+			}, { deep: true });
+			(0, vue.watch)(itemEls, () => {
+				cachedWidths.value = /* @__PURE__ */ new Map();
+				reobserveSlots();
+				scheduleMeasure();
+			});
+			(0, vue.watch)(() => props.width, () => scheduleMeasure());
+			let ro;
+			(0, vue.onMounted)(() => {
+				if (typeof ResizeObserver !== "undefined") {
+					if (columnEl.value) {
+						ro = new ResizeObserver(() => scheduleMeasure());
+						ro.observe(columnEl.value);
+					}
+					slotsRO = new ResizeObserver(() => scheduleMeasure());
+					reobserveSlots();
+				}
+				scheduleMeasure();
+			});
+			(0, vue.onBeforeUnmount)(() => {
+				if (raf) cancelAnimationFrame(raf);
+				ro?.disconnect();
+				slotsRO?.disconnect();
+				slotsRO = void 0;
+				observedEls.clear();
+			});
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					class: (0, vue.normalizeClass)(`menu-${__props.columnKey} m-editor-nav-menu-column`),
+					style: (0, vue.normalizeStyle)(__props.width != null ? `width: ${__props.width}px` : ""),
+					ref_key: "columnEl",
+					ref: columnEl
+				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.items, (item, index) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)(ToolButton_default, {
+						data: item,
+						key: `item-${index}`,
+						class: (0, vue.normalizeClass)({ "m-editor-nav-menu-slot-hidden": hiddenIndexSet.value.has(index) }),
+						ref_for: true,
+						ref: (comp) => setItemRef(comp, index)
+					}, null, 8, ["data", "class"]);
+				}), 128)), (0, vue.createElementVNode)("div", {
+					class: (0, vue.normalizeClass)(["m-editor-nav-menu-more-wrapper", { "m-editor-nav-menu-more-wrapper-hidden": !hasOverflow.value }]),
+					ref_key: "moreWrapperEl",
+					ref: moreWrapperEl
+				}, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), {
+					placement: "bottom-end",
+					"popper-class": "m-editor-nav-menu-popover",
+					width: __props.popoverWidth,
+					visible: popoverVisible.value
+				}, {
+					reference: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
+						class: "menu-item button m-editor-nav-menu-more",
+						ref: "referenceEl",
+						onClick: togglePopover
+					}, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+						size: "small",
+						text: "",
+						icon: popoverVisible.value ? (0, vue.unref)(_element_plus_icons_vue.ArrowUp) : (0, vue.unref)(_element_plus_icons_vue.ArrowDown),
+						bg: popoverVisible.value,
+						type: popoverVisible.value ? "primary" : ""
+					}, null, 8, [
+						"icon",
+						"bg",
+						"type"
+					])], 512)]),
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_1$54, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(overflowItems.value, (item, index) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)(ToolButton_default, {
+							data: item,
+							key: `o-${index}`
+						}, null, 8, ["data"]);
+					}), 128))])]),
+					_: 1
+				}, 8, ["width", "visible"])], 2)], 6);
+			};
+		}
+	});
+	//#endregion
+	//#region packages/editor/src/layouts/NavMenuColumn.vue
+	var NavMenuColumn_default = NavMenuColumn_vue_vue_type_script_setup_true_lang_default;
+	//#endregion
 	//#region packages/editor/src/layouts/NavMenu.vue?vue&type=script&setup=true&lang.ts
 	var NavMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "MEditorNavMenu",
@@ -8827,16 +9030,16 @@
 					style: (0, vue.normalizeStyle)({ height: `${__props.height}px` }),
 					ref: "navMenu"
 				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(keys), (key) => {
-					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
-						class: (0, vue.normalizeClass)(`menu-${key}`),
+					return (0, vue.openBlock)(), (0, vue.createBlock)(NavMenuColumn_default, {
 						key,
-						style: (0, vue.normalizeStyle)(`width: ${columnWidth.value?.[key]}px`)
-					}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(buttons.value[key], (item, index) => {
-						return (0, vue.openBlock)(), (0, vue.createBlock)(ToolButton_default, {
-							data: item,
-							key: index
-						}, null, 8, ["data"]);
-					}), 128))], 6);
+						"column-key": key,
+						items: buttons.value[key],
+						width: columnWidth.value?.[key]
+					}, null, 8, [
+						"column-key",
+						"items",
+						"width"
+					]);
 				}), 128))], 4);
 			};
 		}
@@ -11315,97 +11518,97 @@
 		{
 			command: KeyBindingCommand.DELETE_NODE,
 			keybinding: ["delete", "backspace"],
-			when: [[KeyBindingContainerKey.STAGE, "keyup"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keyup"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.COPY_NODE,
 			keybinding: "ctrl+c",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.PASTE_NODE,
 			keybinding: "ctrl+v",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.CUT_NODE,
 			keybinding: "ctrl+x",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.UNDO,
 			keybinding: "ctrl+z",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.REDO,
 			keybinding: "ctrl+shift+z",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_UP_1,
 			keybinding: "up",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_DOWN_1,
 			keybinding: "down",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_LEFT_1,
 			keybinding: "left",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_RIGHT_1,
 			keybinding: "right",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_UP_10,
 			keybinding: "ctrl+up",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_DOWN_10,
 			keybinding: "ctrl+down",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_LEFT_10,
 			keybinding: "ctrl+left",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.MOVE_RIGHT_10,
 			keybinding: "ctrl+right",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.SWITCH_NODE,
 			keybinding: "tab",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"], [KeyBindingContainerKey.LAYER_PANEL, "keydown"]]
+			when: [["stage", "keydown"], ["layer-panel", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.ZOOM_IN,
 			keybinding: ["ctrl+=", "ctrl+numpadplus"],
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.ZOOM_OUT,
 			keybinding: ["ctrl+-", "ctrl+numpad-"],
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.ZOOM_FIT,
 			keybinding: "ctrl+0",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		},
 		{
 			command: KeyBindingCommand.ZOOM_RESET,
 			keybinding: "ctrl+1",
-			when: [[KeyBindingContainerKey.STAGE, "keydown"]]
+			when: [["stage", "keydown"]]
 		}
 	];
 	//#endregion
@@ -18627,7 +18830,8 @@
 			const collapseValue = (0, vue.shallowRef)(Array(list.length).fill(1).map((x, i) => `${i}`));
 			const change = (v, eventData) => {
 				eventData.changeRecords?.forEach((record) => {
-					record.propPath = `${props.name}.${record.propPath}`;
+					if (props.prop) record.propPath = `${props.prop}.${record.propPath}`;
+					else if (props.name) record.propPath = `${props.name}.${record.propPath}`;
 				});
 				emit("change", v, eventData);
 			};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.14-beta.0",
+  "version": "1.7.14-beta.2",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.7.14-beta.0",
-    "@tmagic/form": "1.7.14-beta.0",
-    "@tmagic/table": "1.7.14-beta.0",
-    "@tmagic/stage": "1.7.14-beta.0",
-    "@tmagic/utils": "1.7.14-beta.0"
+    "@tmagic/design": "1.7.14-beta.2",
+    "@tmagic/form": "1.7.14-beta.2",
+    "@tmagic/stage": "1.7.14-beta.2",
+    "@tmagic/table": "1.7.14-beta.2",
+    "@tmagic/utils": "1.7.14-beta.2"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -75,8 +75,8 @@
     "monaco-editor": "^0.55.1 ",
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
-    "vue": "^3.5.33",
-    "@tmagic/core": "1.7.14-beta.0"
+    "vue": "^3.5.34",
+    "@tmagic/core": "1.7.14-beta.2"
   },
   "peerDependenciesMeta": {
     "typescript": {