@visactor/vtable-sheet 1.20.1-alpha.0 → 1.20.1

package/cjs/components/sheet-tab-event-handler.d.ts

@@ -0,0 +1,18 @@
+import type VTableSheet from './vtable-sheet';
+export declare class SheetTabEventHandler {
+    private vTableSheet;
+    constructor(vTableSheet: VTableSheet);
+    handleSheetTabDblClick(sheetKey: string, originalTitle: string): void;
+    private renameSheet;
+    private getSheetTabElementByKey;
+    activeSheetTab(): void;
+    updateFadeEffects(tabsContainer: HTMLElement, fadeLeft: HTMLElement, fadeRight: HTMLElement): void;
+    scrollSheetTabs(direction: 'left' | 'right', tabsContainer: HTMLElement): void;
+    scrollTabIntoView(tab: HTMLElement, container: HTMLElement): void;
+    toggleSheetMenu(event: MouseEvent): void;
+    private clickOutsideHandler;
+    addClickOutsideListener(): void;
+    removeClickOutsideListener(): void;
+    updateSheetMenu(): void;
+    activeSheetMenuItem(): void;
+}

package/cjs/components/sheet-tab-event-handler.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.SheetTabEventHandler = void 0;
+
+const snackbar_1 = require("../tools/ui/snackbar"), tools_1 = require("../tools");
+
+class SheetTabEventHandler {
+    constructor(vTableSheet) {
+        this.clickOutsideHandler = event => {
+            var _a, _b;
+            const menuContainer = null === (_a = this.vTableSheet.getSheetTabElement()) || void 0 === _a ? void 0 : _a.querySelector(".vtable-sheet-menu-list"), menuButton = null === (_b = this.vTableSheet.getSheetTabElement()) || void 0 === _b ? void 0 : _b.querySelector(".vtable-sheet-menu-button");
+            menuContainer && menuButton && !menuContainer.contains(event.target) && !menuButton.contains(event.target) && (menuContainer.classList.remove("active"), 
+            this.removeClickOutsideListener());
+        }, this.vTableSheet = vTableSheet;
+    }
+    handleSheetTabDblClick(sheetKey, originalTitle) {
+        const targetTab = this.getSheetTabElementByKey(sheetKey);
+        if (!targetTab) return;
+        targetTab.setAttribute("contenteditable", "true"), targetTab.setAttribute("spellcheck", "false"), 
+        targetTab.classList.add("editing");
+        const range = document.createRange();
+        range.selectNodeContents(targetTab);
+        const selection = window.getSelection();
+        selection.removeAllRanges(), selection.addRange(range);
+        const onBlur = () => {
+            finishInput(!0);
+        }, onKeyDown = e => {
+            e.stopPropagation(), "Enter" === e.key ? (e.preventDefault(), finishInput(!0)) : "Escape" === e.key && finishInput(!1);
+        }, finishInput = commit => {
+            var _a;
+            targetTab.removeEventListener("blur", onBlur), targetTab.removeEventListener("keydown", onKeyDown), 
+            targetTab.classList.remove("editing"), targetTab.setAttribute("contenteditable", "false");
+            const newTitle = null === (_a = targetTab.textContent) || void 0 === _a ? void 0 : _a.trim();
+            commit && newTitle !== originalTitle && this.renameSheet(sheetKey, newTitle) || (targetTab.textContent = originalTitle);
+        };
+        targetTab.addEventListener("blur", onBlur), targetTab.addEventListener("keydown", onKeyDown);
+    }
+    renameSheet(sheetKey, newTitle) {
+        var _a;
+        if (!this.vTableSheet.getSheetManager().getSheet(sheetKey)) return !1;
+        const error = (0, tools_1.checkTabTitle)(newTitle);
+        if (error) return (0, snackbar_1.showSnackbar)(error, 1300), !1;
+        return this.vTableSheet.getSheetManager().getAllSheets().find((s => s.sheetKey !== sheetKey && s.sheetTitle === newTitle)) ? ((0, 
+        snackbar_1.showSnackbar)("工作表名称已存在，请重新输入", 1300), !1) : (this.vTableSheet.getSheetManager().renameSheet(sheetKey, newTitle), 
+        null === (_a = this.vTableSheet.workSheetInstances.get(sheetKey)) || void 0 === _a || _a.setTitle(newTitle), 
+        this.vTableSheet.updateSheetTabs(), this.vTableSheet.updateSheetMenu(), !0);
+    }
+    getSheetTabElementByKey(sheetKey) {
+        var _a;
+        const tabsContainer = null === (_a = this.vTableSheet.getSheetTabElement()) || void 0 === _a ? void 0 : _a.querySelector(".vtable-sheet-tabs-container");
+        return null == tabsContainer ? void 0 : tabsContainer.querySelector(`.vtable-sheet-tab[data-key="${sheetKey}"]`);
+    }
+    activeSheetTab() {
+        var _a;
+        const tabs = null === (_a = this.vTableSheet.getSheetTabElement()) || void 0 === _a ? void 0 : _a.querySelectorAll(".vtable-sheet-tab");
+        let activeTab = null;
+        tabs.forEach((tab => {
+            var _a;
+            tab.classList.remove("active"), tab.dataset.key === (null === (_a = this.vTableSheet.getActiveSheet()) || void 0 === _a ? void 0 : _a.getKey()) && (tab.classList.add("active"), 
+            activeTab = tab);
+        })), setTimeout((() => {
+            activeTab && activeTab.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest"
+            });
+        }), 100);
+    }
+    updateFadeEffects(tabsContainer, fadeLeft, fadeRight) {
+        tabsContainer.scrollLeft > 10 ? fadeLeft.style.display = "block" : fadeLeft.style.display = "none";
+        const maxScroll = tabsContainer.scrollWidth - tabsContainer.clientWidth;
+        tabsContainer.scrollLeft < maxScroll - 10 ? fadeRight.style.display = "block" : fadeRight.style.display = "none";
+    }
+    scrollSheetTabs(direction, tabsContainer) {
+        const currentScroll = tabsContainer.scrollLeft;
+        "left" === direction ? tabsContainer.scrollTo({
+            left: Math.max(0, currentScroll - 200),
+            behavior: "smooth"
+        }) : tabsContainer.scrollTo({
+            left: currentScroll + 200,
+            behavior: "smooth"
+        });
+    }
+    scrollTabIntoView(tab, container) {
+        const tabRect = tab.getBoundingClientRect(), containerRect = container.getBoundingClientRect();
+        tabRect.left < containerRect.left ? container.scrollLeft += tabRect.left - containerRect.left - 10 : tabRect.right > containerRect.right && (container.scrollLeft += tabRect.right - containerRect.right + 10);
+    }
+    toggleSheetMenu(event) {
+        var _a;
+        const menuContainer = null === (_a = this.vTableSheet.getSheetTabElement()) || void 0 === _a ? void 0 : _a.querySelector(".vtable-sheet-menu-list");
+        menuContainer.classList.toggle("active"), menuContainer.classList.contains("active") ? this.addClickOutsideListener() : this.removeClickOutsideListener();
+    }
+    addClickOutsideListener() {
+        document.addEventListener("click", this.clickOutsideHandler);
+    }
+    removeClickOutsideListener() {
+        document.removeEventListener("click", this.clickOutsideHandler);
+    }
+    updateSheetMenu() {
+        var _a;
+        const menuContainer = null === (_a = this.vTableSheet.getSheetTabElement()) || void 0 === _a ? void 0 : _a.querySelector(".vtable-sheet-menu-list");
+        menuContainer.innerHTML = "";
+        this.vTableSheet.getSheetManager().getAllSheets().forEach((sheet => {
+            const li = document.createElement("li");
+            li.className = "vtable-sheet-menu-item", li.dataset.key = sheet.sheetKey;
+            const title = document.createElement("span");
+            title.className = "vtable-sheet-menu-item-title", title.innerText = sheet.sheetTitle, 
+            li.appendChild(title);
+            const div = document.createElement("div");
+            div.className = "vtable-sheet-menu-delete-button", div.innerHTML = '<svg class="x-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', 
+            div.addEventListener("click", (e => {
+                e.stopPropagation(), this.vTableSheet.removeSheet(sheet.sheetKey);
+            })), li.addEventListener("click", (() => this.vTableSheet.activateSheet(sheet.sheetKey))), 
+            li.appendChild(div), menuContainer.appendChild(li);
+        })), this.activeSheetMenuItem(), setTimeout((() => {
+            const activeItem = menuContainer.querySelector(".vtable-sheet-main-menu-item.active");
+            activeItem && activeItem.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest"
+            });
+        }), 100);
+    }
+    activeSheetMenuItem() {
+        var _a;
+        const menuItems = null === (_a = this.vTableSheet.getSheetTabElement()) || void 0 === _a ? void 0 : _a.querySelectorAll(".vtable-sheet-main-menu-item");
+        let activeItem = null;
+        menuItems.forEach((item => {
+            var _a;
+            item.classList.remove("active"), item.dataset.key === (null === (_a = this.vTableSheet.getActiveSheet()) || void 0 === _a ? void 0 : _a.getKey()) && (item.classList.add("active"), 
+            activeItem = item);
+        })), setTimeout((() => {
+            activeItem && activeItem.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest"
+            });
+        }), 100);
+    }
+}
+
+exports.SheetTabEventHandler = SheetTabEventHandler;
+//# sourceMappingURL=sheet-tab-event-handler.js.map

package/cjs/components/sheet-tab-event-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/sheet-tab-event-handler.ts"],"names":[],"mappings":"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","file":"sheet-tab-event-handler.js","sourcesContent":["import type VTableSheet from './vtable-sheet';\nimport { showSnackbar } from '../tools/ui/snackbar';\nimport { checkTabTitle } from '../tools';\n\n/**\n * Sheet Tab Event Handler\n * 专门处理sheet标签页相关的事件逻辑\n */\nexport class SheetTabEventHandler {\n  private vTableSheet: VTableSheet;\n\n  constructor(vTableSheet: VTableSheet) {\n    this.vTableSheet = vTableSheet;\n  }\n\n  /**\n   * 处理sheet标签双击事件\n   * 双击sheet标签后，将标签设为可编辑状态。输入完成后进行重命名。\n   * @param sheetKey 工作表key\n   * @param originalTitle 原始名称\n   */\n  handleSheetTabDblClick(sheetKey: string, originalTitle: string): void {\n    const targetTab = this.getSheetTabElementByKey(sheetKey);\n    if (!targetTab) {\n      return;\n    }\n    // 将原文本节点设为可编辑\n    targetTab.setAttribute('contenteditable', 'true');\n    targetTab.setAttribute('spellcheck', 'false');\n    targetTab.classList.add('editing'); // 添加编辑状态样式\n    // 选中所有文本\n    const range = document.createRange();\n    range.selectNodeContents(targetTab);\n    const selection = window.getSelection();\n    selection.removeAllRanges();\n    selection.addRange(range);\n\n    const onBlur = () => {\n      finishInput(true);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n      e.stopPropagation();\n      if (e.key === 'Enter') {\n        e.preventDefault();\n        finishInput(true);\n      } else if (e.key === 'Escape') {\n        finishInput(false);\n      }\n    };\n    const finishInput = (commit: boolean) => {\n      targetTab.removeEventListener('blur', onBlur);\n      targetTab.removeEventListener('keydown', onKeyDown);\n      targetTab.classList.remove('editing');\n      targetTab.setAttribute('contenteditable', 'false');\n      const newTitle = targetTab.textContent?.trim();\n      if (!commit || newTitle === originalTitle || !this.renameSheet(sheetKey, newTitle)) {\n        targetTab.textContent = originalTitle;\n        return;\n      }\n    };\n    targetTab.addEventListener('blur', onBlur);\n    targetTab.addEventListener('keydown', onKeyDown);\n  }\n\n  /**\n   * 重命名sheet\n   * @param sheetKey 工作表key\n   * @param newTitle 新名称\n   * @returns 是否成功\n   */\n  private renameSheet(sheetKey: string, newTitle: string): boolean {\n    const sheet = this.vTableSheet.getSheetManager().getSheet(sheetKey);\n    if (!sheet) {\n      return false;\n    }\n    const error = checkTabTitle(newTitle);\n    if (error) {\n      showSnackbar(error, 1300);\n      return false;\n    }\n    const isExist = this.vTableSheet\n      .getSheetManager()\n      .getAllSheets()\n      .find(s => s.sheetKey !== sheetKey && s.sheetTitle === newTitle);\n    if (isExist) {\n      showSnackbar('工作表名称已存在，请重新输入', 1300);\n      return false;\n    }\n    this.vTableSheet.getSheetManager().renameSheet(sheetKey, newTitle);\n    this.vTableSheet.workSheetInstances.get(sheetKey)?.setTitle(newTitle);\n    this.vTableSheet.updateSheetTabs();\n    this.vTableSheet.updateSheetMenu();\n    return true;\n  }\n\n  /**\n   * 获取指定sheetKey的标签元素\n   */\n  private getSheetTabElementByKey(sheetKey: string): HTMLElement | null {\n    const tabsContainer = this.vTableSheet\n      .getSheetTabElement()\n      ?.querySelector('.vtable-sheet-tabs-container') as HTMLElement;\n    return tabsContainer?.querySelector(`.vtable-sheet-tab[data-key=\"${sheetKey}\"]`) as HTMLElement;\n  }\n\n  /**\n   * 激活sheet标签并滚动到可见区域\n   */\n  activeSheetTab(): void {\n    const tabs = this.vTableSheet\n      .getSheetTabElement()\n      ?.querySelectorAll('.vtable-sheet-tab') as NodeListOf<HTMLElement>;\n    let activeTab: HTMLElement | null = null;\n    tabs.forEach(tab => {\n      tab.classList.remove('active');\n      if (tab.dataset.key === this.vTableSheet.getActiveSheet()?.getKey()) {\n        tab.classList.add('active');\n        activeTab = tab;\n      }\n    });\n    // 确保激活的标签可见\n    setTimeout(() => {\n      if (activeTab) {\n        activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n      }\n    }, 100);\n  }\n\n  /**\n   * 更新渐变效果\n   * @param tabsContainer 标签容器\n   * @param fadeLeft 左侧渐变效果\n   * @param fadeRight 右侧渐变效果\n   */\n  updateFadeEffects(tabsContainer: HTMLElement, fadeLeft: HTMLElement, fadeRight: HTMLElement): void {\n    // 显示/隐藏左侧渐变\n    if (tabsContainer.scrollLeft > 10) {\n      fadeLeft.style.display = 'block';\n    } else {\n      fadeLeft.style.display = 'none';\n    }\n\n    // 显示/隐藏右侧渐变\n    const maxScroll = tabsContainer.scrollWidth - tabsContainer.clientWidth;\n    if (tabsContainer.scrollLeft < maxScroll - 10) {\n      fadeRight.style.display = 'block';\n    } else {\n      fadeRight.style.display = 'none';\n    }\n  }\n\n  /**\n   * 滚动sheet标签\n   * @param direction 滚动方向\n   * @param tabsContainer 标签容器\n   */\n  scrollSheetTabs(direction: 'left' | 'right', tabsContainer: HTMLElement): void {\n    const scrollAmount = 200; // 每次滚动的像素数\n    const currentScroll = tabsContainer.scrollLeft;\n\n    if (direction === 'left') {\n      tabsContainer.scrollTo({\n        left: Math.max(0, currentScroll - scrollAmount),\n        behavior: 'smooth'\n      });\n    } else {\n      tabsContainer.scrollTo({\n        left: currentScroll + scrollAmount,\n        behavior: 'smooth'\n      });\n    }\n  }\n\n  /**\n   * 滚动以确保标签可见\n   * @param tab 标签\n   * @param container 容器\n   */\n  scrollTabIntoView(tab: HTMLElement, container: HTMLElement): void {\n    const tabRect = tab.getBoundingClientRect();\n    const containerRect = container.getBoundingClientRect();\n\n    if (tabRect.left < containerRect.left) {\n      // 标签在可见区域左侧\n      container.scrollLeft += tabRect.left - containerRect.left - 10;\n    } else if (tabRect.right > containerRect.right) {\n      // 标签在可见区域右侧\n      container.scrollLeft += tabRect.right - containerRect.right + 10;\n    }\n  }\n\n  /**\n   * 显示工作表菜单\n   */\n  toggleSheetMenu(event: MouseEvent): void {\n    const menuContainer = this.vTableSheet\n      .getSheetTabElement()\n      ?.querySelector('.vtable-sheet-menu-list') as HTMLElement;\n    menuContainer.classList.toggle('active');\n\n    // 如果菜单被打开，添加点击外部关闭的监听器\n    if (menuContainer.classList.contains('active')) {\n      this.addClickOutsideListener();\n    } else {\n      this.removeClickOutsideListener();\n    }\n  }\n\n  /**\n   * 添加点击外部关闭菜单的监听器\n   */\n  private clickOutsideHandler = (event: MouseEvent): void => {\n    const menuContainer = this.vTableSheet\n      .getSheetTabElement()\n      ?.querySelector('.vtable-sheet-menu-list') as HTMLElement;\n    const menuButton = this.vTableSheet.getSheetTabElement()?.querySelector('.vtable-sheet-menu-button') as HTMLElement;\n\n    // 如果点击的不是菜单容器和菜单按钮，则关闭菜单\n    if (\n      menuContainer &&\n      menuButton &&\n      !menuContainer.contains(event.target as Node) &&\n      !menuButton.contains(event.target as Node)\n    ) {\n      menuContainer.classList.remove('active');\n      this.removeClickOutsideListener();\n    }\n  };\n\n  /**\n   * 添加点击外部监听器\n   */\n  addClickOutsideListener(): void {\n    document.addEventListener('click', this.clickOutsideHandler);\n  }\n\n  /**\n   * 移除点击外部监听器\n   */\n  removeClickOutsideListener(): void {\n    document.removeEventListener('click', this.clickOutsideHandler);\n  }\n\n  /**\n   * 更新sheet列表\n   */\n  updateSheetMenu(): void {\n    const menuContainer = this.vTableSheet\n      .getSheetTabElement()\n      ?.querySelector('.vtable-sheet-menu-list') as HTMLElement;\n    menuContainer.innerHTML = '';\n    const sheets = this.vTableSheet.getSheetManager().getAllSheets();\n    sheets.forEach(sheet => {\n      // li\n      const li = document.createElement('li');\n      li.className = 'vtable-sheet-menu-item';\n      li.dataset.key = sheet.sheetKey;\n      // title\n      const title = document.createElement('span');\n      title.className = 'vtable-sheet-menu-item-title';\n      title.innerText = sheet.sheetTitle;\n      li.appendChild(title);\n      // delete button\n      const div = document.createElement('div');\n      div.className = 'vtable-sheet-menu-delete-button';\n      div.innerHTML =\n        '<svg class=\"x-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">' +\n        '<path d=\"M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>' +\n        '<path d=\"M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>' +\n        '</svg>';\n      div.addEventListener('click', e => {\n        e.stopPropagation();\n        this.vTableSheet.removeSheet(sheet.sheetKey);\n      });\n      li.addEventListener('click', () => this.vTableSheet.activateSheet(sheet.sheetKey));\n      li.appendChild(div);\n      menuContainer.appendChild(li);\n    });\n    this.activeSheetMenuItem();\n    // 确保激活的标签可见\n    setTimeout(() => {\n      const activeItem = menuContainer.querySelector('.vtable-sheet-main-menu-item.active');\n      if (activeItem) {\n        activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n      }\n    }, 100);\n  }\n\n  /**\n   * 激活sheet菜单项并滚动到可见区域\n   */\n  activeSheetMenuItem(): void {\n    const menuItems = this.vTableSheet\n      .getSheetTabElement()\n      ?.querySelectorAll('.vtable-sheet-main-menu-item') as NodeListOf<HTMLElement>;\n    let activeItem: HTMLElement | null = null;\n    menuItems.forEach(item => {\n      item.classList.remove('active');\n      if (item.dataset.key === this.vTableSheet.getActiveSheet()?.getKey()) {\n        item.classList.add('active');\n        activeItem = item;\n      }\n    });\n    setTimeout(() => {\n      if (activeItem) {\n        activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n      }\n    }, 100);\n  }\n}\n"]}

package/cjs/components/vtable-sheet.d.ts

@@ -20,23 +20,16 @@ export default class VTableSheet {
     private mainMenuElement;
     private contentElement;
     private dragManager;
+    private sheetTabEventHandler;
     constructor(container: HTMLElement, options: IVTableSheetOptions);
     private mergeDefaultOptions;
     private initFormulaAutocomplete;
     private initUI;
     private createSheetTab;
-    private toggleSheetMenu;
-    private updateFadeEffects;
-    private scrollSheetTabs;
     private _activeSheetTab;
     updateSheetTabs(tabsContainer?: HTMLElement): void;
     private createSheetTabItem;
-    private handleSheetTabDblClick;
-    private renameSheet;
-    private getSheetTabElementByKey;
     updateSheetMenu(): void;
-    private activeSheetMenuItem;
-    private scrollTabIntoView;
     private initSheets;
     activateSheet(sheetKey: string): void;
     addSheet(sheet: ISheetDefine): void;

package/cjs/components/vtable-sheet.js

@@ -41,7 +41,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 });
 
-const formula_manager_1 = require("../managers/formula-manager"), sheet_manager_1 = __importDefault(require("../managers/sheet-manager")), WorkSheet_1 = require("../core/WorkSheet"), VTable = __importStar(require("@visactor/vtable")), table_plugins_1 = require("../core/table-plugins"), event_manager_1 = require("../event/event-manager"), snackbar_1 = require("../tools/ui/snackbar"), ts_types_1 = require("../ts-types"), tab_drag_manager_1 = __importDefault(require("../managers/tab-drag-manager")), tools_1 = require("../tools"), formula_autocomplete_1 = require("../formula/formula-autocomplete"), formula_editor_1 = require("../formula/formula-editor"), menu_manager_1 = require("../managers/menu-manager"), formula_ui_manager_1 = require("../formula/formula-ui-manager");
+const formula_manager_1 = require("../managers/formula-manager"), sheet_manager_1 = __importDefault(require("../managers/sheet-manager")), WorkSheet_1 = require("../core/WorkSheet"), VTable = __importStar(require("@visactor/vtable")), table_plugins_1 = require("../core/table-plugins"), event_manager_1 = require("../event/event-manager"), snackbar_1 = require("../tools/ui/snackbar"), ts_types_1 = require("../ts-types"), tab_drag_manager_1 = __importDefault(require("../managers/tab-drag-manager")), formula_autocomplete_1 = require("../formula/formula-autocomplete"), formula_editor_1 = require("../formula/formula-editor"), menu_manager_1 = require("../managers/menu-manager"), formula_ui_manager_1 = require("../formula/formula-ui-manager"), sheet_tab_event_handler_1 = require("./sheet-tab-event-handler");
 
 VTable.register.editor("formula", formula_editor_1.formulaEditor);
 
@@ -52,8 +52,8 @@ class VTableSheet {
         this.container = container, this.options = this.mergeDefaultOptions(options), this.sheetManager = new sheet_manager_1.default, 
         this.formulaManager = new formula_manager_1.FormulaManager(this), this.eventManager = new event_manager_1.EventManager(this), 
         this.dragManager = new tab_drag_manager_1.default(this), this.menuManager = new menu_manager_1.MenuManager(this), 
-        this.formulaUIManager = new formula_ui_manager_1.FormulaUIManager(this), this.initUI(), 
-        this.initSheets(), this.resize();
+        this.formulaUIManager = new formula_ui_manager_1.FormulaUIManager(this), this.sheetTabEventHandler = new sheet_tab_event_handler_1.SheetTabEventHandler(this), 
+        this.initUI(), this.initSheets(), this.resize();
     }
     mergeDefaultOptions(options) {
         return Object.assign({
@@ -89,7 +89,7 @@ class VTableSheet {
         fadeLeft.className = "vtable-sheet-fade-left", fadeLeft.style.display = "none", 
         sheetTab.appendChild(fadeLeft);
         const tabsContainer = document.createElement("div");
-        tabsContainer.className = "vtable-sheet-tabs-container", tabsContainer.addEventListener("scroll", (() => this.updateFadeEffects(tabsContainer, fadeLeft, fadeRight))), 
+        tabsContainer.className = "vtable-sheet-tabs-container", tabsContainer.addEventListener("scroll", (() => this.sheetTabEventHandler.updateFadeEffects(tabsContainer, fadeLeft, fadeRight))), 
         sheetTab.appendChild(tabsContainer);
         const insertIndicator = document.createElement("div");
         insertIndicator.className = "vtable-sheet-insert-indicator", insertIndicator.style.display = "none", 
@@ -104,55 +104,24 @@ class VTableSheet {
         navButtons.className = "vtable-sheet-nav-buttons";
         const leftScrollBtn = document.createElement("button");
         leftScrollBtn.className = "vtable-sheet-scroll-button", leftScrollBtn.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>', 
-        leftScrollBtn.title = "向左滚动", leftScrollBtn.addEventListener("click", (() => this.scrollSheetTabs("left", tabsContainer))), 
+        leftScrollBtn.title = "向左滚动", leftScrollBtn.addEventListener("click", (() => this.sheetTabEventHandler.scrollSheetTabs("left", tabsContainer))), 
         navButtons.appendChild(leftScrollBtn);
         const rightScrollBtn = document.createElement("button");
         rightScrollBtn.className = "vtable-sheet-scroll-button", rightScrollBtn.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>', 
-        rightScrollBtn.title = "向右滚动", rightScrollBtn.addEventListener("click", (() => this.scrollSheetTabs("right", tabsContainer))), 
+        rightScrollBtn.title = "向右滚动", rightScrollBtn.addEventListener("click", (() => this.sheetTabEventHandler.scrollSheetTabs("right", tabsContainer))), 
         navButtons.appendChild(rightScrollBtn);
         const menuButton = document.createElement("button");
         menuButton.className = "vtable-sheet-menu-button", menuButton.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>', 
-        menuButton.title = "工作表选项", menuButton.addEventListener("click", (e => this.toggleSheetMenu(e))), 
+        menuButton.title = "工作表选项", menuButton.addEventListener("click", (e => this.sheetTabEventHandler.toggleSheetMenu(e))), 
         navButtons.appendChild(menuButton);
         const menuContainer = document.createElement("ul");
         return menuContainer.className = "vtable-sheet-menu-list", sheetTab.appendChild(menuContainer), 
         sheetTab.appendChild(navButtons), setTimeout((() => {
-            this.updateFadeEffects(tabsContainer, fadeLeft, fadeRight);
+            this.sheetTabEventHandler.updateFadeEffects(tabsContainer, fadeLeft, fadeRight);
         }), 100), sheetTab;
     }
-    toggleSheetMenu(event) {
-        var _a;
-        (null === (_a = this.sheetTabElement) || void 0 === _a ? void 0 : _a.querySelector(".vtable-sheet-menu-list")).classList.toggle("active");
-    }
-    updateFadeEffects(tabsContainer, fadeLeft, fadeRight) {
-        tabsContainer.scrollLeft > 10 ? fadeLeft.style.display = "block" : fadeLeft.style.display = "none";
-        const maxScroll = tabsContainer.scrollWidth - tabsContainer.clientWidth;
-        tabsContainer.scrollLeft < maxScroll - 10 ? fadeRight.style.display = "block" : fadeRight.style.display = "none";
-    }
-    scrollSheetTabs(direction, tabsContainer) {
-        const currentScroll = tabsContainer.scrollLeft;
-        "left" === direction ? tabsContainer.scrollTo({
-            left: Math.max(0, currentScroll - 200),
-            behavior: "smooth"
-        }) : tabsContainer.scrollTo({
-            left: currentScroll + 200,
-            behavior: "smooth"
-        });
-    }
     _activeSheetTab() {
-        var _a;
-        const tabs = null === (_a = this.sheetTabElement) || void 0 === _a ? void 0 : _a.querySelectorAll(".vtable-sheet-tab");
-        let activeTab = null;
-        tabs.forEach((tab => {
-            var _a;
-            tab.classList.remove("active"), tab.dataset.key === (null === (_a = this.activeWorkSheet) || void 0 === _a ? void 0 : _a.getKey()) && (tab.classList.add("active"), 
-            activeTab = tab);
-        })), setTimeout((() => {
-            activeTab && activeTab.scrollIntoView({
-                behavior: "smooth",
-                block: "nearest"
-            });
-        }), 100);
+        this.sheetTabEventHandler.activeSheetTab();
     }
     updateSheetTabs(tabsContainer) {
         var _a;
@@ -169,89 +138,12 @@ class VTableSheet {
         const tab = document.createElement("div");
         return tab.className = "vtable-sheet-tab", tab.dataset.key = sheet.sheetKey, tab.textContent = sheet.sheetTitle, 
         tab.title = sheet.sheetTitle, tab.addEventListener("click", (() => this.activateSheet(sheet.sheetKey))), 
-        tab.addEventListener("dblclick", (() => this.handleSheetTabDblClick(sheet.sheetKey, sheet.sheetTitle))), 
+        tab.addEventListener("dblclick", (() => this.sheetTabEventHandler.handleSheetTabDblClick(sheet.sheetKey, sheet.sheetTitle))), 
         tab.addEventListener("mousedown", (e => this.dragManager.handleTabMouseDown(e, sheet.sheetKey))), 
         tab;
     }
-    handleSheetTabDblClick(sheetKey, originalTitle) {
-        const targetTab = this.getSheetTabElementByKey(sheetKey);
-        if (!targetTab) return;
-        targetTab.setAttribute("contenteditable", "true"), targetTab.setAttribute("spellcheck", "false"), 
-        targetTab.classList.add("editing");
-        const range = document.createRange();
-        range.selectNodeContents(targetTab);
-        const selection = window.getSelection();
-        selection.removeAllRanges(), selection.addRange(range);
-        const onBlur = () => {
-            finishInput(!0);
-        }, onKeyDown = e => {
-            e.stopPropagation(), "Enter" === e.key ? (e.preventDefault(), finishInput(!0)) : "Escape" === e.key && finishInput(!1);
-        }, finishInput = commit => {
-            var _a;
-            targetTab.removeEventListener("blur", onBlur), targetTab.removeEventListener("keydown", onKeyDown), 
-            targetTab.classList.remove("editing"), targetTab.setAttribute("contenteditable", "false");
-            const newTitle = null === (_a = targetTab.textContent) || void 0 === _a ? void 0 : _a.trim();
-            commit && newTitle !== originalTitle && this.renameSheet(sheetKey, newTitle) || (targetTab.textContent = originalTitle);
-        };
-        targetTab.addEventListener("blur", onBlur), targetTab.addEventListener("keydown", onKeyDown);
-    }
-    renameSheet(sheetKey, newTitle) {
-        var _a;
-        if (!this.sheetManager.getSheet(sheetKey)) return !1;
-        const error = (0, tools_1.checkTabTitle)(newTitle);
-        if (error) return (0, snackbar_1.showSnackbar)(error, 1300), !1;
-        return this.sheetManager.getAllSheets().find((s => s.sheetKey !== sheetKey && s.sheetTitle === newTitle)) ? ((0, 
-        snackbar_1.showSnackbar)("工作表名称已存在，请重新输入", 1300), !1) : (this.sheetManager.renameSheet(sheetKey, newTitle), 
-        null === (_a = this.workSheetInstances.get(sheetKey)) || void 0 === _a || _a.setTitle(newTitle), 
-        this.updateSheetTabs(), this.updateSheetMenu(), !0);
-    }
-    getSheetTabElementByKey(sheetKey) {
-        var _a;
-        const tabsContainer = null === (_a = this.sheetTabElement) || void 0 === _a ? void 0 : _a.querySelector(".vtable-sheet-tabs-container");
-        return null == tabsContainer ? void 0 : tabsContainer.querySelector(`.vtable-sheet-tab[data-key="${sheetKey}"]`);
-    }
     updateSheetMenu() {
-        var _a;
-        const menuContainer = null === (_a = this.sheetTabElement) || void 0 === _a ? void 0 : _a.querySelector(".vtable-sheet-menu-list");
-        menuContainer.innerHTML = "";
-        this.sheetManager.getAllSheets().forEach((sheet => {
-            const li = document.createElement("li");
-            li.className = "vtable-sheet-menu-item", li.dataset.key = sheet.sheetKey;
-            const title = document.createElement("span");
-            title.className = "vtable-sheet-menu-item-title", title.innerText = sheet.sheetTitle, 
-            li.appendChild(title);
-            const div = document.createElement("div");
-            div.className = "vtable-sheet-menu-delete-button", div.innerHTML = '<svg class="x-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>', 
-            div.addEventListener("click", (e => {
-                e.stopPropagation(), this.removeSheet(sheet.sheetKey);
-            })), li.addEventListener("click", (() => this.activateSheet(sheet.sheetKey))), li.appendChild(div), 
-            menuContainer.appendChild(li);
-        })), this.activeSheetMenuItem(), setTimeout((() => {
-            const activeItem = menuContainer.querySelector(".vtable-sheet-main-menu-item.active");
-            activeItem && activeItem.scrollIntoView({
-                behavior: "smooth",
-                block: "nearest"
-            });
-        }), 100);
-    }
-    activeSheetMenuItem() {
-        var _a;
-        const menuItems = null === (_a = this.sheetTabElement) || void 0 === _a ? void 0 : _a.querySelectorAll(".vtable-sheet-main-menu-item");
-        let activeItem = null;
-        menuItems.forEach((item => {
-            var _a;
-            item.classList.remove("active"), item.dataset.key === (null === (_a = this.activeWorkSheet) || void 0 === _a ? void 0 : _a.getKey()) && (item.classList.add("active"), 
-            activeItem = item);
-        })), setTimeout((() => {
-            activeItem && activeItem.scrollIntoView({
-                behavior: "smooth",
-                block: "nearest"
-            });
-        }), 100);
-    }
-    scrollTabIntoView(tab, container) {
-        const tabRect = tab.getBoundingClientRect(), containerRect = container.getBoundingClientRect();
-        tabRect.left < containerRect.left ? container.scrollLeft += tabRect.left - containerRect.left - 10 : tabRect.right > containerRect.right && (container.scrollLeft += tabRect.right - containerRect.right + 10);
+        this.sheetTabEventHandler.updateSheetMenu();
     }
     initSheets() {
         if (this.options.sheets && this.options.sheets.length > 0) {
@@ -273,7 +165,7 @@ class VTableSheet {
             })), this.workSheetInstances.has(sheetKey)) {
                 const instance = this.workSheetInstances.get(sheetKey);
                 instance.getElement().style.display = "block", this.activeWorkSheet = instance, 
-                this.formulaManager.setActiveSheet(sheetKey), this._activeSheetTab(), this.activeSheetMenuItem(), 
+                this.formulaManager.setActiveSheet(sheetKey), this._activeSheetTab(), this.sheetTabEventHandler.activeSheetMenuItem(), 
                 this.restoreFilterState(instance, sheetDefine);
             } else {
                 const instance = this.createWorkSheetInstance(sheetDefine);
@@ -472,7 +364,7 @@ class VTableSheet {
     }
     release() {
         this.eventManager.release(), this.formulaManager.release(), this.formulaUIManager.release(), 
-        this.workSheetInstances.forEach((instance => {
+        this.sheetTabEventHandler.removeClickOutsideListener(), this.workSheetInstances.forEach((instance => {
             instance.release();
         })), this.rootElement && this.rootElement.parentNode && this.rootElement.parentNode.removeChild(this.rootElement), 
         this.formulaAutocomplete && this.formulaAutocomplete.release(), this.formulaManager.cellHighlightManager && this.formulaManager.cellHighlightManager.release();