@veltra/sheet 2.0.0 → 2.1.1

package/dist/vue/sheet-toolbar.js

@@ -0,0 +1,106 @@
+import { useToolbarScroll } from "./use-toolbar-scroll.js";
+import { ArrowLeft, ArrowRight } from "@veltra/icons/normal";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, resolveComponent, resolveDynamicComponent, toDisplayString, toRef, unref, useTemplateRef, withCtx } from "vue";
+import { UIcon } from "@veltra/desktop";
+import { bem } from "@veltra/utils";
+//#region src/vue/sheet-toolbar.vue
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = [
+	"data-tool-id",
+	"disabled",
+	"title",
+	"onClick"
+];
+const _hoisted_3 = { key: 1 };
+const _hoisted_4 = ["disabled"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "USheetToolbar",
+	__name: "sheet-toolbar",
+	props: { groups: {} },
+	emits: ["toolClick"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* 工具栏（渲染 defaultToolRegistry 分组工具 + 分隔符，单行溢出滚动）。
+		* 纯展示：有 icon 时只渲染图标（title/tooltip 经 UTip + 原生 title 兜底）；
+		* 无 icon 时回落文字按钮（自定义工具兼容）。
+		* 内容超出视口时显示左右箭头（点击步进滚动、滚轮横滚），不换行挤压 grid。
+		*/
+		const props = __props;
+		const emit = __emit;
+		const cls = bem("sheet");
+		const scrollRef = useTemplateRef("scrollRef");
+		const listRef = useTemplateRef("listRef");
+		const { showNav, canPrev, canNext, scrollByStep } = useToolbarScroll({
+			viewportRef: scrollRef,
+			listRef,
+			content: toRef(props, "groups")
+		});
+		return (_ctx, _cache) => {
+			const _component_u_tip = resolveComponent("u-tip");
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cls).e("toolbar")) }, [
+				unref(showNav) ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: normalizeClass(unref(cls).e("toolbar-nav")),
+					disabled: !unref(canPrev),
+					"aria-label": "向左滚动工具栏",
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(scrollByStep)(-1))
+				}, [createVNode(unref(UIcon), null, {
+					default: withCtx(() => [createVNode(unref(ArrowLeft))]),
+					_: 1
+				})], 10, _hoisted_1)) : createCommentVNode("v-if", true),
+				createCommentVNode(" 单行滚动视口：内容超出时由左右箭头导航（use-toolbar-scroll），不再换行 "),
+				createElementVNode("div", {
+					ref_key: "scrollRef",
+					ref: scrollRef,
+					class: normalizeClass(unref(cls).e("toolbar-scroll"))
+				}, [createElementVNode("div", {
+					ref_key: "listRef",
+					ref: listRef,
+					class: normalizeClass(unref(cls).e("toolbar-list"))
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.groups, (group, groupIndex) => {
+					return openBlock(), createElementBlock(Fragment, { key: group.name }, [groupIndex > 0 ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass(unref(cls).e("toolbar-divider"))
+					}, null, 2)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group.tools, (item) => {
+						return openBlock(), createBlock(_component_u_tip, {
+							key: item.tool.id,
+							content: item.tool.tooltip ?? item.tool.title,
+							trigger: "hover",
+							direction: "top",
+							alignment: "center",
+							"show-delay": 400,
+							disabled: item.disabled
+						}, {
+							default: withCtx(() => [createElementVNode("button", {
+								type: "button",
+								class: normalizeClass([unref(cls).e("tool"), unref(bem).is("active", item.active)]),
+								"data-tool-id": item.tool.id,
+								disabled: item.disabled,
+								title: item.tool.tooltip ?? item.tool.title,
+								onClick: ($event) => emit("toolClick", item.tool, $event)
+							}, [item.tool.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.tool.icon), {
+								key: 0,
+								class: normalizeClass(unref(cls).e("tool-icon"))
+							}, null, 8, ["class"])) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(item.tool.title), 1))], 10, _hoisted_2)]),
+							_: 2
+						}, 1032, ["content", "disabled"]);
+					}), 128))], 64);
+				}), 128))], 2)], 2),
+				unref(showNav) ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					type: "button",
+					class: normalizeClass(unref(cls).e("toolbar-nav")),
+					disabled: !unref(canNext),
+					"aria-label": "向右滚动工具栏",
+					onClick: _cache[1] || (_cache[1] = ($event) => unref(scrollByStep)(1))
+				}, [createVNode(unref(UIcon), null, {
+					default: withCtx(() => [createVNode(unref(ArrowRight))]),
+					_: 1
+				})], 10, _hoisted_4)) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };

package/dist/vue/sheet.js

@@ -1,16 +1,22 @@
-import { defaultToolRegistry } from "../tools/registry.js";
-import { Workbook } from "../core/workbook.js";
-import { SheetGrid } from "../grid/sheet-grid.js";
-import { createSheetContext } from "../tools/context.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, resolveDynamicComponent, shallowRef, toDisplayString, unref, useTemplateRef, watch } from "vue";
+import _sfc_main$1 from "./formula-bar.js";
+import { pickAndImportFile } from "./import-file.js";
+import _sfc_main$2 from "./popups/border-popup.js";
+import _sfc_main$3 from "./popups/export-popup.js";
+import _sfc_main$4 from "./popups/fill-color-popup.js";
+import _sfc_main$5 from "./popups/find-popup.js";
+import _sfc_main$6 from "./popups/font-color-popup.js";
+import _sfc_main$7 from "./popups/font-size-popup.js";
+import _sfc_main$8 from "./popups/insert-image-popup.js";
+import _sfc_main$9 from "./sheet-tabs.js";
+import _sfc_main$10 from "./sheet-toolbar.js";
+import { useSheetGrid } from "./use-sheet-grid.js";
+import { useSheetState } from "./use-sheet-state.js";
+import { useToolGroups } from "./use-tool-groups.js";
+import { useToolPopup } from "./use-tool-popup.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { UDropdown } from "@veltra/desktop";
 import { bem } from "@veltra/utils";
 //#region src/vue/sheet.vue
-const _hoisted_1 = [
-	"disabled",
-	"title",
-	"onClick"
-];
-const _hoisted_2 = ["onClick"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "USheet",
 	__name: "sheet",
@@ -22,6 +28,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: true
 		},
+		showFormulaBar: {
+			type: Boolean,
+			default: true
+		},
 		showTabs: {
 			type: Boolean,
 			default: true
@@ -32,154 +42,150 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const cls = bem("sheet");
-		/** 工作簿：外部传入或内部自建（单 sheet） */
-		const internalWorkbook = new Workbook();
-		const workbook = computed(() => props.workbook ?? internalWorkbook);
-		/** 激活 sheet 索引（镜像 workbook.activeSheetIndex，经事件同步） */
-		const activeIndex = ref(workbook.value.activeSheetIndex);
-		/** sheet 列表（tabs 渲染；由 sheets-change 同步） */
-		const sheetList = shallowRef(workbook.value.getSheets());
-		const activeSheet = computed(() => sheetList.value[activeIndex.value] ?? workbook.value.activeSheet);
-		/** 工具上下文：动态解析活动 sheet，tab 切换后自动指向当前 sheet */
-		const context = createSheetContext(() => activeSheet.value);
-		const gridRef = useTemplateRef("gridRef");
-		let grid;
-		const stateTick = ref(0);
-		const bump = () => {
-			stateTick.value++;
-		};
-		let disposeSheetEvents = [];
-		/** 订阅活动 sheet 的状态源（tab 切换 / 工作簿变更时重绑） */
-		function bindSheetEvents(sheet) {
-			for (const dispose of disposeSheetEvents) dispose();
-			disposeSheetEvents = [
-				sheet.on("selection-change", bump),
-				sheet.on("history-change", bump),
-				sheet.on("cell-change", bump),
-				sheet.on("merge-change", bump)
-			];
-		}
-		let disposeWorkbookEvents = [];
-		function bindWorkbookEvents(wb) {
-			for (const dispose of disposeWorkbookEvents) dispose();
-			disposeWorkbookEvents = [wb.on("sheets-change", ({ sheets }) => {
-				sheetList.value = sheets;
-				bump();
-			}), wb.on("active-sheet-change", ({ sheet, index }) => {
-				activeIndex.value = index;
-				bindSheetEvents(sheet);
-				rebuildGrid();
-				bump();
-				emit("active-sheet-change", {
-					sheet,
-					index
+		/** 根容器 ref：Ctrl/Cmd+F 判定焦点是否在本实例内（#6，避免劫持浏览器查找） */
+		const rootRef = useTemplateRef("rootRef");
+		const { workbook, activeIndex, sheetList, activeSheet, context, stateTick, syncFromWorkbook } = useSheetState(props, emit, {
+			onBeforeSheetChange: () => closePopup(),
+			rebuildGrid: () => rebuildGrid(),
+			activateGrid: () => activateGrid(),
+			pruneCache: (sheets) => pruneCache(sheets)
+		});
+		const { popupTool, popupAnchor, closePopup, handleToolClick: openOrRunTool } = useToolPopup(context, rootRef);
+		const parsing = ref(false);
+		const parseProgress = ref({
+			done: 0,
+			total: 0
+		});
+		const parseText = computed(() => parseProgress.value.total > 0 ? `正在解析… ${parseProgress.value.done}/${parseProgress.value.total}` : "正在读取文件结构…");
+		/** 导入无弹层：直接系统文件选择；其余工具走 useToolPopup */
+		function handleToolClick(tool, event) {
+			if (tool.id === "import") {
+				if (tool.disabled?.(context)) return;
+				pickAndImportFile({
+					workbook: workbook.value,
+					activeSheet: activeSheet.value,
+					parsing,
+					parseProgress,
+					onCsvImported: () => rebuildGrid(),
+					onWorkbookReplaced: () => syncFromWorkbook()
 				});
-			})];
+				return;
+			}
+			openOrRunTool(tool, event);
 		}
-		const offRegistryChange = defaultToolRegistry.onChange(bump);
-		const toolGroups = computed(() => {
-			stateTick.value;
-			return defaultToolRegistry.getGroups().map((group) => ({
-				name: group.name,
-				tools: group.tools.map((tool) => ({
-					tool,
-					visible: tool.visible?.(context) ?? true,
-					disabled: tool.disabled?.(context) ?? false
-				})).filter((item) => item.visible)
-			})).filter((group) => group.tools.length > 0);
+		const popupDropdownRef = useTemplateRef("popupDropdownRef");
+		watch(popupTool, () => {
+			const dropdown = popupDropdownRef.value;
+			if (!dropdown) return;
+			if (popupTool.value) dropdown.open({ trigger: popupAnchor.value ?? void 0 });
+			else dropdown.close();
 		});
-		function handleToolClick(tool) {
-			if (tool.disabled?.(context)) return;
-			tool.onClick(context);
-		}
-		function handleTabClick(index) {
-			if (index === activeIndex.value) return;
-			const sheet = sheetList.value[index];
-			if (sheet) workbook.value.activateSheet(sheet.name);
+		/** UDropdown 内部关闭（滚动 / resize / transition 结束）→ 同步状态并提交面板事务 */
+		function handlePopupVisible(visible) {
+			if (!visible) closePopup();
 		}
-		function rebuildGrid() {
-			const container = gridRef.value;
-			if (!container) return;
-			grid?.release();
-			grid = new SheetGrid({
-				container,
-				sheet: activeSheet.value,
-				rows: props.rows,
-				cols: props.cols
-			});
-		}
-		onMounted(() => {
-			bindWorkbookEvents(workbook.value);
-			bindSheetEvents(activeSheet.value);
-			rebuildGrid();
-		});
-		watch(() => [props.rows, props.cols], rebuildGrid);
-		watch(() => props.workbook, (wb, prev) => {
-			if (wb === prev) return;
-			activeIndex.value = workbook.value.activeSheetIndex;
-			sheetList.value = workbook.value.getSheets();
-			bindWorkbookEvents(workbook.value);
-			bindSheetEvents(activeSheet.value);
-			rebuildGrid();
-			bump();
-		});
-		onBeforeUnmount(() => {
-			offRegistryChange();
-			for (const dispose of disposeWorkbookEvents) dispose();
-			for (const dispose of disposeSheetEvents) dispose();
-			grid?.release();
-			grid = void 0;
+		const toolGroups = useToolGroups(context, stateTick);
+		const gridRef = useTemplateRef("gridRef");
+		const formulaBarRef = useTemplateRef("formulaBarRef");
+		const { rebuildGrid, activateGrid, pruneCache, getGrid } = useSheetGrid({
+			props,
+			gridRef,
+			getActiveSheet: () => activeSheet.value,
+			context,
+			formulaBarRef
 		});
 		__expose({
 			workbook,
 			getActiveSheet: () => activeSheet.value,
 			getContext: () => context,
-			getGrid: () => grid
+			getGrid
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(cls).b) }, [
-				__props.showToolbar ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					class: normalizeClass(unref(cls).e("toolbar"))
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(toolGroups.value, (group, groupIndex) => {
-					return openBlock(), createElementBlock(Fragment, { key: group.name }, [groupIndex > 0 ? (openBlock(), createElementBlock("span", {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(unref(cls).b)
+			}, [
+				createElementVNode("div", { class: normalizeClass(unref(cls).e("toolbar-wrap")) }, [
+					__props.showToolbar ? (openBlock(), createBlock(_sfc_main$10, {
 						key: 0,
-						class: normalizeClass(unref(cls).e("toolbar-divider"))
-					}, null, 2)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group.tools, (item) => {
-						return openBlock(), createElementBlock("button", {
-							key: item.tool.id,
-							type: "button",
-							class: normalizeClass(unref(cls).e("tool")),
-							disabled: item.disabled,
-							title: item.tool.tooltip ?? item.tool.title,
-							onClick: ($event) => handleToolClick(item.tool)
-						}, [item.tool.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.tool.icon), {
+						groups: unref(toolGroups),
+						onToolClick: handleToolClick
+					}, null, 8, ["groups"])) : createCommentVNode("v-if", true),
+					createCommentVNode(" 弹层型工具面板（填充/边框/字体色/字号/查找/插入图片/导出）：UDropdown（Teleport 到\n           #pop-container + floating-ui 定位：锚点跟随触发按钮、自动翻转/边界位移；\n           触发元素滚动/窗口缩放时自动关闭）。面板交互走 SheetContext 命令入口。\n           导入无弹层：点击直接系统文件选择（见 handleToolClick → pickAndImportFile） "),
+					createVNode(unref(UDropdown), {
+						ref_key: "popupDropdownRef",
+						ref: popupDropdownRef,
+						trigger: "custom",
+						visible: unref(popupTool) !== null,
+						width: "auto",
+						"onUpdate:visible": handlePopupVisible
+					}, {
+						content: withCtx(() => [unref(popupTool) ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(unref(cls).e("popup")),
+							onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+						}, [unref(popupTool).popup === "fill-color" ? (openBlock(), createBlock(_sfc_main$4, {
 							key: 0,
-							class: normalizeClass(unref(cls).e("tool-icon"))
-						}, null, 8, ["class"])) : createCommentVNode("v-if", true), createElementVNode("span", null, toDisplayString(item.tool.title), 1)], 10, _hoisted_1);
-					}), 128))], 64);
-				}), 128))], 2)) : createCommentVNode("v-if", true),
+							context: unref(context)
+						}, null, 8, ["context"])) : unref(popupTool).popup === "border" ? (openBlock(), createBlock(_sfc_main$2, {
+							key: 1,
+							context: unref(context)
+						}, null, 8, ["context"])) : unref(popupTool).popup === "font-color" ? (openBlock(), createBlock(_sfc_main$6, {
+							key: 2,
+							context: unref(context)
+						}, null, 8, ["context"])) : unref(popupTool).popup === "font-size" ? (openBlock(), createBlock(_sfc_main$7, {
+							key: 3,
+							context: unref(context)
+						}, null, 8, ["context"])) : unref(popupTool).popup === "find" ? (openBlock(), createBlock(_sfc_main$5, {
+							key: 4,
+							sheet: unref(activeSheet),
+							context: unref(context),
+							onClose: unref(closePopup)
+						}, null, 8, [
+							"sheet",
+							"context",
+							"onClose"
+						])) : unref(popupTool).popup === "insert-image" ? (openBlock(), createBlock(_sfc_main$8, {
+							key: 5,
+							context: unref(context),
+							onClose: unref(closePopup)
+						}, null, 8, ["context", "onClose"])) : unref(popupTool).popup === "export" ? (openBlock(), createBlock(_sfc_main$3, {
+							key: 6,
+							context: unref(context),
+							onClose: unref(closePopup)
+						}, null, 8, ["context", "onClose"])) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true)]),
+						_: 1
+					}, 8, ["visible"])
+				], 2),
+				__props.showFormulaBar ? (openBlock(), createBlock(_sfc_main$1, {
+					key: 0,
+					ref_key: "formulaBarRef",
+					ref: formulaBarRef,
+					sheet: unref(activeSheet),
+					context: unref(context)
+				}, null, 8, ["sheet", "context"])) : createCommentVNode("v-if", true),
 				createElementVNode("div", {
 					ref_key: "gridRef",
 					ref: gridRef,
 					class: normalizeClass(unref(cls).e("grid"))
-				}, null, 2),
-				__props.showTabs ? (openBlock(), createElementBlock("div", {
+				}, [createCommentVNode(" 导入解析覆盖层（自绘，不动 desktop Loading 组件）：遮罩 + 动画 + 文字\n           同一层，动画在上、文字在下，不存在被遮罩掩盖的问题 "), parsing.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(cls).e("loading-mask"))
+				}, [createElementVNode("div", { class: normalizeClass(unref(cls).e("loading-spinner")) }, null, 2), createElementVNode("div", { class: normalizeClass(unref(cls).e("loading-text")) }, toDisplayString(parseText.value), 3)], 2)) : createCommentVNode("v-if", true)], 2),
+				__props.showTabs ? (openBlock(), createBlock(_sfc_main$9, {
 					key: 1,
-					class: normalizeClass(unref(cls).e("tabs"))
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(sheetList.value, (sheet, index) => {
-					return openBlock(), createElementBlock("button", {
-						key: sheet.name,
-						type: "button",
-						class: normalizeClass([unref(cls).e("tab"), unref(bem).is("active", index === activeIndex.value)]),
-						onClick: ($event) => handleTabClick(index)
-					}, toDisplayString(sheet.name), 11, _hoisted_2);
-				}), 128))], 2)) : createCommentVNode("v-if", true)
+					workbook: unref(workbook),
+					"sheet-list": unref(sheetList),
+					"active-index": unref(activeIndex)
+				}, null, 8, [
+					"workbook",
+					"sheet-list",
+					"active-index"
+				])) : createCommentVNode("v-if", true)
 			], 2);
 		};
 	}
 });
 //#endregion
 export { _sfc_main as default };
-
-//# sourceMappingURL=sheet.js.map

package/dist/vue/style.d.ts

@@ -1 +1,11 @@
-export { };
+import "@veltra/desktop/components/contextmenu/style";
+import "@veltra/desktop/components/dropdown/style";
+import "@veltra/desktop/components/number-input/style";
+import "@veltra/desktop/components/palette/style";
+import "@veltra/desktop/components/scroll/style";
+import "@veltra/desktop/components/tip/style";
+import "@veltra/desktop/components/loading/style";
+import "@veltra/desktop/components/message/style";
+import "@veltra/desktop/components/input/style";
+import "@veltra/desktop/components/file-picker/style";
+import "@veltra/desktop/components/icon/style";

package/dist/vue/style.js

@@ -1 +1,12 @@
 import "./style2.css";
+import "@veltra/desktop/components/contextmenu/style";
+import "@veltra/desktop/components/dropdown/style";
+import "@veltra/desktop/components/number-input/style";
+import "@veltra/desktop/components/palette/style";
+import "@veltra/desktop/components/scroll/style";
+import "@veltra/desktop/components/tip/style";
+import "@veltra/desktop/components/loading/style";
+import "@veltra/desktop/components/message/style";
+import "@veltra/desktop/components/input/style";
+import "@veltra/desktop/components/file-picker/style";
+import "@veltra/desktop/components/icon/style";