@visactor/vtable-plugins 1.19.9-alpha.2 → 1.20.0-alpha.0

package/es/contextmenu/menu-manager.js

@@ -0,0 +1,130 @@
+import { vglobal } from "@visactor/vtable/es/vrender";
+
+import { MENU_CONTAINER_CLASS, MENU_ITEM_CLASS, MENU_ITEM_SEPARATOR_CLASS, MENU_ITEM_SUBMENU_CLASS, MENU_STYLES, createElement, applyStyles, createIcon, MENU_ITEM_DISABLED_CLASS } from "./styles";
+
+export class MenuManager {
+    constructor() {
+        this.menuContainer = null, this.activeSubmenus = [], this.clickCallback = null, 
+        this.table = null, this.context = {}, this.hideTimeout = null, this.showTimeout = null, 
+        this.submenuShowDelay = 100, this.submenuHideDelay = 500, this.handleDocumentClick = event => {
+            if (!this.menuContainer || event.target !== this.menuContainer && !this.menuContainer.contains(event.target)) {
+                for (const submenu of this.activeSubmenus) if (event.target === submenu || submenu.contains(event.target)) return;
+                this.release();
+            }
+        };
+    }
+    showMenu(menuItems, x, y, context, table) {
+        this.context = context, this.table = table, this.release(), this.menuContainer = createElement("div", MENU_CONTAINER_CLASS), 
+        applyStyles(this.menuContainer, MENU_STYLES.menuContainer), document.body.appendChild(this.menuContainer), 
+        this.createMenuItems(menuItems, this.menuContainer), this.positionMenu(this.menuContainer, x, y), 
+        setTimeout((() => {
+            vglobal.addEventListener("click", this.handleDocumentClick);
+        }), 0);
+    }
+    setClickCallback(callback) {
+        this.clickCallback = callback;
+    }
+    createMenuItems(items, container, parentItem) {
+        items.forEach((item => {
+            if ("string" == typeof item && "---" === item) {
+                const separator = createElement("div", MENU_ITEM_SEPARATOR_CLASS);
+                applyStyles(separator, MENU_STYLES.menuItemSeparator), container.appendChild(separator);
+            } else if ("object" == typeof item) {
+                const menuItem = item, menuItemElement = createElement("div", MENU_ITEM_CLASS);
+                applyStyles(menuItemElement, MENU_STYLES.menuItem);
+                const leftContainer = createElement("div");
+                if (leftContainer.style.display = "flex", leftContainer.style.alignItems = "center", 
+                menuItem.iconName) {
+                    const icon = createIcon(menuItem.iconName);
+                    leftContainer.appendChild(icon);
+                } else if (menuItem.iconPlaceholder) {
+                    const placeholder = createElement("span");
+                    applyStyles(placeholder, MENU_STYLES.menuItemIcon), leftContainer.appendChild(placeholder);
+                }
+                const text = createElement("span");
+                if (text.textContent = menuItem.text, applyStyles(text, MENU_STYLES.menuItemText), 
+                leftContainer.appendChild(text), item.inputDefaultValue) {
+                    const input = createElement("input");
+                    input.type = "number", input.min = "1", input.value = item.inputDefaultValue.toString(), 
+                    applyStyles(input, MENU_STYLES.inputField), leftContainer.appendChild(input), input.addEventListener("keydown", (e => {
+                        "Enter" === e.key && this.handleMenuItemClick(Object.assign({
+                            menuKey: menuItem.menuKey,
+                            menuText: menuItem.text,
+                            inputValue: parseInt(input.value, 10)
+                        }, this.context));
+                    }));
+                }
+                menuItemElement.appendChild(leftContainer);
+                const rightContainer = createElement("div");
+                if (rightContainer.style.display = "flex", rightContainer.style.alignItems = "center", 
+                menuItem.shortcut) {
+                    const shortcut = createElement("span");
+                    shortcut.textContent = menuItem.shortcut, applyStyles(shortcut, MENU_STYLES.menuItemShortcut), 
+                    rightContainer.appendChild(shortcut);
+                }
+                if (menuItem.children && menuItem.children.length > 0) {
+                    menuItemElement.classList.add(MENU_ITEM_SUBMENU_CLASS);
+                    const arrow = createElement("span");
+                    arrow.textContent = "▶", applyStyles(arrow, MENU_STYLES.submenuArrow), rightContainer.appendChild(arrow);
+                }
+                menuItemElement.appendChild(rightContainer), menuItem.disabled && (menuItemElement.classList.add(MENU_ITEM_DISABLED_CLASS), 
+                applyStyles(menuItemElement, MENU_STYLES.menuItemDisabled)), menuItem.disabled || (menuItem.children && 0 !== menuItem.children.length || menuItemElement.addEventListener("click", (e => {
+                    e.target instanceof HTMLInputElement || this.handleMenuItemClick(Object.assign({
+                        menuKey: menuItem.menuKey,
+                        menuText: menuItem.text
+                    }, this.context));
+                })), menuItemElement.addEventListener("mouseenter", (() => {
+                    applyStyles(menuItemElement, MENU_STYLES.menuItemHover), null !== this.hideTimeout && (clearTimeout(this.hideTimeout), 
+                    this.hideTimeout = null), null !== this.showTimeout && (clearTimeout(this.showTimeout), 
+                    this.showTimeout = null), menuItem.children && menuItem.children.length > 0 ? (this.closeAllSubmenus(), 
+                    this.showTimeout = setTimeout((() => {
+                        document.body.contains(menuItemElement) && this.showSubmenu(menuItem.children, menuItemElement, menuItem);
+                    }), this.submenuShowDelay)) : parentItem || this.closeAllSubmenus();
+                })), menuItemElement.addEventListener("mouseleave", (() => {
+                    Object.keys(MENU_STYLES.menuItemHover).forEach((key => {
+                        menuItemElement.style[key] = "";
+                    })), menuItem.children && menuItem.children.length > 0 && (this.hideTimeout = setTimeout((() => {
+                        this.closeAllSubmenus();
+                    }), this.submenuHideDelay));
+                }))), container.appendChild(menuItemElement);
+            }
+        }));
+    }
+    showSubmenu(items, parentElement, parentItem) {
+        const parentRect = parentElement.getBoundingClientRect(), submenu = createElement("div", MENU_CONTAINER_CLASS);
+        applyStyles(submenu, MENU_STYLES.submenuContainer), this.createMenuItems(items, submenu, parentItem), 
+        document.body.appendChild(submenu);
+        const submenuRect = submenu.getBoundingClientRect();
+        let left = parentRect.right, top = parentRect.top;
+        left + submenuRect.width > window.innerWidth && (left = parentRect.left - submenuRect.width), 
+        top + submenuRect.height > window.innerHeight && (top = window.innerHeight - submenuRect.height), 
+        submenu.style.left = `${left}px`, submenu.style.top = `${top}px`, submenu.addEventListener("mouseenter", (() => {
+            null !== this.hideTimeout && (clearTimeout(this.hideTimeout), this.hideTimeout = null);
+        })), submenu.addEventListener("mouseleave", (() => {
+            this.hideTimeout = setTimeout((() => {
+                this.closeAllSubmenus();
+            }), this.submenuHideDelay);
+        })), this.activeSubmenus.push(submenu);
+    }
+    closeAllSubmenus() {
+        this.activeSubmenus.forEach((submenu => {
+            submenu && submenu.parentNode && submenu.parentNode.removeChild(submenu);
+        })), this.activeSubmenus = [];
+    }
+    positionMenu(menu, x, y) {
+        const menuRect = menu.getBoundingClientRect();
+        let left = x, top = y;
+        left + menuRect.width > window.innerWidth && (left = window.innerWidth - menuRect.width), 
+        top + menuRect.height > window.innerHeight && (top = window.innerHeight - menuRect.height), 
+        menu.style.left = `${left}px`, menu.style.top = `${top}px`;
+    }
+    handleMenuItemClick(args) {
+        this.release(), this.clickCallback && this.table && this.clickCallback(args, this.table);
+    }
+    release() {
+        this.closeAllSubmenus(), this.menuContainer && this.menuContainer.parentNode && (this.menuContainer.parentNode.removeChild(this.menuContainer), 
+        this.menuContainer = null), null !== this.hideTimeout && (clearTimeout(this.hideTimeout), 
+        this.hideTimeout = null), vglobal.removeEventListener("click", this.handleDocumentClick);
+    }
+}
+//# sourceMappingURL=menu-manager.js.map

package/es/contextmenu/menu-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contextmenu/menu-manager.ts"],"names":[],"mappings":"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","file":"menu-manager.js","sourcesContent":["import type { ListTable } from '@visactor/vtable';\nimport { vglobal } from '@visactor/vtable/es/vrender';\nimport {\n  MENU_CONTAINER_CLASS,\n  MENU_ITEM_CLASS,\n  MENU_ITEM_SEPARATOR_CLASS,\n  MENU_ITEM_SUBMENU_CLASS,\n  MENU_STYLES,\n  createElement,\n  applyStyles,\n  createIcon,\n  createNumberInputItem,\n  MENU_ITEM_DISABLED_CLASS\n} from './styles';\nimport type { MenuItemOrSeparator } from './types';\nimport type { MenuItem } from './types';\nimport type { MenuClickEventArgs } from './types';\n\ninterface MenuContext {\n  rowIndex?: number;\n  colIndex?: number;\n}\n\n/**\n * 菜单管理器\n */\nexport class MenuManager {\n  private menuContainer: HTMLElement | null = null;\n  private activeSubmenus: HTMLElement[] = [];\n  private clickCallback: Function | null = null;\n  private table: ListTable | null = null;\n  private context: MenuContext = {};\n  private hideTimeout: any = null;\n  private showTimeout: any = null;\n  private submenuShowDelay = 100;\n  private submenuHideDelay = 500;\n\n  /**\n   * 显示菜单\n   */\n  showMenu(menuItems: MenuItemOrSeparator[], x: number, y: number, context: MenuContext, table: ListTable): void {\n    // 保存上下文\n    this.context = context;\n    this.table = table;\n\n    // 清除之前的菜单\n    this.release();\n\n    // 创建菜单容器\n    this.menuContainer = createElement('div', MENU_CONTAINER_CLASS);\n    applyStyles(this.menuContainer, MENU_STYLES.menuContainer);\n    document.body.appendChild(this.menuContainer);\n\n    // 创建菜单项\n    this.createMenuItems(menuItems, this.menuContainer);\n\n    // 调整菜单位置\n    this.positionMenu(this.menuContainer, x, y);\n\n    // 添加全局点击事件，用于关闭菜单\n    setTimeout(() => {\n      vglobal.addEventListener('click', this.handleDocumentClick);\n    }, 0);\n  }\n\n  /**\n   * 设置菜单点击回调\n   */\n  setClickCallback(callback: Function): void {\n    this.clickCallback = callback;\n  }\n\n  /**\n   * 创建菜单项\n   */\n  private createMenuItems(items: MenuItemOrSeparator[], container: HTMLElement, parentItem?: MenuItem): void {\n    items.forEach(item => {\n      if (typeof item === 'string' && item === '---') {\n        // 创建分隔线\n        const separator = createElement('div', MENU_ITEM_SEPARATOR_CLASS);\n        applyStyles(separator, MENU_STYLES.menuItemSeparator);\n        container.appendChild(separator);\n        // } else if (typeof item === 'object' && 'type' in item && item.type === 'input') {\n        //   // 创建输入框菜单项\n        //   const inputItem = item as MenuItemInput;\n        //   const wrapper = createNumberInputItem(\n        //     inputItem.label,\n        //     inputItem.defaultValue || 1,\n        //     inputItem.iconName,\n        //     (value: number) => {\n        //       this.handleMenuItemClick({\n        //         menuKey: inputItem.menuKey,\n        //         menuText: inputItem.label,\n        //         inputValue: value,\n        //         ...this.context\n        //       });\n        //     }\n        //   );\n        //   container.appendChild(wrapper);\n      } else if (typeof item === 'object') {\n        // 创建普通菜单项\n        const menuItem = item as MenuItem;\n        const menuItemElement = createElement('div', MENU_ITEM_CLASS);\n        applyStyles(menuItemElement, MENU_STYLES.menuItem);\n\n        // 创建左侧图标容器\n        const leftContainer = createElement('div');\n        leftContainer.style.display = 'flex';\n        leftContainer.style.alignItems = 'center';\n\n        // 添加图标\n        if (menuItem.iconName) {\n          const icon = createIcon(menuItem.iconName);\n          leftContainer.appendChild(icon);\n        } else if (menuItem.iconPlaceholder) {\n          // 占位图标，保持对齐\n          const placeholder = createElement('span');\n          applyStyles(placeholder, MENU_STYLES.menuItemIcon);\n          leftContainer.appendChild(placeholder);\n        }\n\n        // 添加文本\n        const text = createElement('span');\n        text.textContent = menuItem.text;\n        applyStyles(text, MENU_STYLES.menuItemText);\n        leftContainer.appendChild(text);\n        if (item.inputDefaultValue) {\n          // 创建输入框\n          const input = createElement('input') as HTMLInputElement;\n          input.type = 'number';\n          input.min = '1';\n          input.value = item.inputDefaultValue.toString();\n          applyStyles(input, MENU_STYLES.inputField);\n          leftContainer.appendChild(input);\n          //监听enter 回车确认\n          input.addEventListener('keydown', (e: KeyboardEvent) => {\n            if (e.key === 'Enter') {\n              this.handleMenuItemClick({\n                menuKey: menuItem.menuKey,\n                menuText: menuItem.text,\n                inputValue: parseInt(input.value, 10),\n                ...this.context\n              });\n            }\n          });\n        }\n\n        menuItemElement.appendChild(leftContainer);\n\n        // 创建右侧容器\n        const rightContainer = createElement('div');\n        rightContainer.style.display = 'flex';\n        rightContainer.style.alignItems = 'center';\n\n        // 添加快捷键\n        if (menuItem.shortcut) {\n          const shortcut = createElement('span');\n          shortcut.textContent = menuItem.shortcut;\n          applyStyles(shortcut, MENU_STYLES.menuItemShortcut);\n          rightContainer.appendChild(shortcut);\n        }\n\n        // 添加子菜单箭头\n        if (menuItem.children && menuItem.children.length > 0) {\n          menuItemElement.classList.add(MENU_ITEM_SUBMENU_CLASS);\n          const arrow = createElement('span');\n          arrow.textContent = '▶';\n          applyStyles(arrow, MENU_STYLES.submenuArrow);\n          rightContainer.appendChild(arrow);\n        }\n\n        menuItemElement.appendChild(rightContainer);\n\n        // 禁用状态\n        if (menuItem.disabled) {\n          menuItemElement.classList.add(MENU_ITEM_DISABLED_CLASS);\n          applyStyles(menuItemElement, MENU_STYLES.menuItemDisabled);\n        }\n\n        // 添加事件监听\n        if (!menuItem.disabled) {\n          // 点击事件\n          if (!menuItem.children || menuItem.children.length === 0) {\n            menuItemElement.addEventListener('click', (e: MouseEvent) => {\n              //判断如果点击到input 则不触发点击事件\n              if (e.target instanceof HTMLInputElement) {\n                return;\n              }\n              this.handleMenuItemClick({\n                menuKey: menuItem.menuKey,\n                menuText: menuItem.text,\n                ...this.context\n              });\n            });\n          }\n\n          // 鼠标悬停事件\n          menuItemElement.addEventListener('mouseenter', () => {\n            console.log('mouseenter', menuItem.text);\n            // 添加悬停样式\n            applyStyles(menuItemElement, MENU_STYLES.menuItemHover);\n\n            // 清除隐藏定时器\n            if (this.hideTimeout !== null) {\n              clearTimeout(this.hideTimeout);\n              this.hideTimeout = null;\n            }\n            if (this.showTimeout !== null) {\n              clearTimeout(this.showTimeout);\n              this.showTimeout = null;\n            }\n\n            // 如果有子菜单，显示子菜单\n            if (menuItem.children && menuItem.children.length > 0) {\n              // 关闭其他子菜单\n              this.closeAllSubmenus();\n\n              // 显示当前子菜单\n              this.showTimeout = setTimeout(() => {\n                if (document.body.contains(menuItemElement)) {\n                  this.showSubmenu(menuItem.children, menuItemElement, menuItem);\n                }\n              }, this.submenuShowDelay);\n            } else if (!parentItem) {\n              // 没有子菜单，关闭所有子菜单\n              this.closeAllSubmenus();\n            }\n          });\n\n          // 鼠标离开事件\n          menuItemElement.addEventListener('mouseleave', () => {\n            console.log('mouseleave', menuItem.text);\n            // 移除悬停样式，使用与添加时相同的方式\n            // 通过设置空对象来重置之前应用的menuItemHover样式的属性\n            Object.keys(MENU_STYLES.menuItemHover).forEach(key => {\n              (menuItemElement.style as any)[key] = '';\n            });\n\n            // 如果有子菜单，设置延迟关闭\n            if (menuItem.children && menuItem.children.length > 0) {\n              this.hideTimeout = setTimeout(() => {\n                this.closeAllSubmenus();\n              }, this.submenuHideDelay);\n            }\n          });\n        }\n\n        container.appendChild(menuItemElement);\n      }\n    });\n  }\n\n  /**\n   * 显示子菜单\n   */\n  private showSubmenu(items: MenuItemOrSeparator[], parentElement: HTMLElement, parentItem?: MenuItem): void {\n    const parentRect = parentElement.getBoundingClientRect();\n\n    // 创建子菜单容器\n    const submenu = createElement('div', MENU_CONTAINER_CLASS);\n    applyStyles(submenu, MENU_STYLES.submenuContainer);\n\n    // 创建子菜单项\n    this.createMenuItems(items, submenu, parentItem);\n\n    // 添加到文档\n    document.body.appendChild(submenu);\n\n    // 调整子菜单位置\n    const submenuRect = submenu.getBoundingClientRect();\n    let left = parentRect.right;\n    let top = parentRect.top;\n\n    // 检查是否超出视窗右侧\n    if (left + submenuRect.width > window.innerWidth) {\n      left = parentRect.left - submenuRect.width;\n    }\n\n    // 检查是否超出视窗底部\n    if (top + submenuRect.height > window.innerHeight) {\n      top = window.innerHeight - submenuRect.height;\n    }\n\n    submenu.style.left = `${left}px`;\n    submenu.style.top = `${top}px`;\n\n    // 添加鼠标进入事件，清除隐藏定时器\n    submenu.addEventListener('mouseenter', () => {\n      if (this.hideTimeout !== null) {\n        clearTimeout(this.hideTimeout);\n        this.hideTimeout = null;\n      }\n    });\n\n    // 添加鼠标离开事件，设置延迟关闭\n    submenu.addEventListener('mouseleave', () => {\n      this.hideTimeout = setTimeout(() => {\n        this.closeAllSubmenus();\n      }, this.submenuHideDelay);\n    });\n\n    // 保存子菜单引用\n    this.activeSubmenus.push(submenu);\n  }\n\n  /**\n   * 关闭所有子菜单\n   */\n  private closeAllSubmenus(): void {\n    this.activeSubmenus.forEach(submenu => {\n      if (submenu && submenu.parentNode) {\n        submenu.parentNode.removeChild(submenu);\n      }\n    });\n    this.activeSubmenus = [];\n  }\n\n  /**\n   * 调整菜单位置\n   */\n  private positionMenu(menu: HTMLElement, x: number, y: number): void {\n    const menuRect = menu.getBoundingClientRect();\n    let left = x;\n    let top = y;\n\n    // 检查是否超出视窗右侧\n    if (left + menuRect.width > window.innerWidth) {\n      left = window.innerWidth - menuRect.width;\n    }\n\n    // 检查是否超出视窗底部\n    if (top + menuRect.height > window.innerHeight) {\n      top = window.innerHeight - menuRect.height;\n    }\n\n    menu.style.left = `${left}px`;\n    menu.style.top = `${top}px`;\n  }\n\n  /**\n   * 处理菜单项点击\n   */\n  private handleMenuItemClick(args: MenuClickEventArgs): void {\n    // 关闭菜单\n    this.release();\n    // 调用回调\n    if (this.clickCallback && this.table) {\n      this.clickCallback(args, this.table);\n    }\n  }\n\n  /**\n   * 处理文档点击，用于关闭菜单\n   */\n  private handleDocumentClick = (event: MouseEvent): void => {\n    // 如果点击的是菜单内部，不关闭菜单\n    if (\n      this.menuContainer &&\n      (event.target === this.menuContainer || this.menuContainer.contains(event.target as Node))\n    ) {\n      return;\n    }\n\n    // 如果点击的是子菜单内部，不关闭菜单\n    for (const submenu of this.activeSubmenus) {\n      if (event.target === submenu || submenu.contains(event.target as Node)) {\n        return;\n      }\n    }\n\n    // 关闭菜单\n    this.release();\n  };\n\n  /**\n   * 销毁菜单\n   */\n  release(): void {\n    // 关闭所有子菜单\n    this.closeAllSubmenus();\n\n    // 移除菜单容器\n    if (this.menuContainer && this.menuContainer.parentNode) {\n      this.menuContainer.parentNode.removeChild(this.menuContainer);\n      this.menuContainer = null;\n    }\n\n    // 清除定时器\n    if (this.hideTimeout !== null) {\n      clearTimeout(this.hideTimeout);\n      this.hideTimeout = null;\n    }\n\n    // 移除全局事件监听\n    vglobal.removeEventListener('click', this.handleDocumentClick);\n  }\n}\n"]}

package/es/contextmenu/styles.d.ts

@@ -0,0 +1,106 @@
+export declare const MENU_CONTAINER_CLASS = "vtable-context-menu-container";
+export declare const MENU_ITEM_CLASS = "vtable-context-menu-item";
+export declare const MENU_ITEM_DISABLED_CLASS = "vtable-context-menu-item-disabled";
+export declare const MENU_ITEM_SEPARATOR_CLASS = "vtable-context-menu-item-separator";
+export declare const MENU_ITEM_SUBMENU_CLASS = "vtable-context-menu-item-submenu";
+export declare const MENU_STYLES: {
+    menuContainer: {
+        position: string;
+        backgroundColor: string;
+        boxShadow: string;
+        borderRadius: string;
+        padding: string;
+        zIndex: number;
+        minWidth: string;
+        maxHeight: string;
+        overflowY: string;
+        fontSize: string;
+    };
+    menuItem: {
+        padding: string;
+        cursor: string;
+        whiteSpace: string;
+        position: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    menuItemHover: {
+        backgroundColor: string;
+    };
+    menuItemDisabled: {
+        opacity: number;
+        cursor: string;
+    };
+    menuItemSeparator: {
+        height: string;
+        backgroundColor: string;
+        margin: string;
+    };
+    menuItemIcon: {
+        marginRight: string;
+        width: string;
+        height: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    menuItemText: {
+        flex: number;
+    };
+    menuItemShortcut: {
+        marginLeft: string;
+        color: string;
+        fontSize: string;
+    };
+    submenuArrow: {
+        marginLeft: string;
+        fontSize: string;
+        color: string;
+    };
+    submenuContainer: {
+        position: string;
+        left: string;
+        top: string;
+        backgroundColor: string;
+        boxShadow: string;
+        borderRadius: string;
+        padding: string;
+        zIndex: number;
+        minWidth: string;
+        fontSize: string;
+    };
+    inputContainer: {
+        padding: string;
+        display: string;
+        alignItems: string;
+    };
+    inputLabel: {
+        marginRight: string;
+        whiteSpace: string;
+    };
+    inputField: {
+        width: string;
+        padding: string;
+        border: string;
+        borderRadius: string;
+    };
+    buttonContainer: {
+        display: string;
+        justifyContent: string;
+        padding: string;
+    };
+    button: {
+        padding: string;
+        backgroundColor: string;
+        color: string;
+        border: string;
+        borderRadius: string;
+        cursor: string;
+        fontSize: string;
+    };
+};
+export declare function createElement(tag: string, className?: string, styles?: Record<string, any>): HTMLElement;
+export declare function applyStyles(element: HTMLElement, styles: Record<string, any>): void;
+export declare function createIcon(iconName: string): HTMLElement;
+export declare function createNumberInputItem(label: string, defaultValue: number, iconName: string, callback: (value: number) => void): HTMLElement;

package/es/contextmenu/styles.js

@@ -0,0 +1,197 @@
+export const MENU_CONTAINER_CLASS = "vtable-context-menu-container";
+
+export const MENU_ITEM_CLASS = "vtable-context-menu-item";
+
+export const MENU_ITEM_DISABLED_CLASS = "vtable-context-menu-item-disabled";
+
+export const MENU_ITEM_SEPARATOR_CLASS = "vtable-context-menu-item-separator";
+
+export const MENU_ITEM_SUBMENU_CLASS = "vtable-context-menu-item-submenu";
+
+export const MENU_STYLES = {
+    menuContainer: {
+        position: "absolute",
+        backgroundColor: "#ffffff",
+        boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
+        borderRadius: "4px",
+        padding: "5px 0",
+        zIndex: 1e3,
+        minWidth: "180px",
+        maxHeight: "300px",
+        overflowY: "auto",
+        fontSize: "12px"
+    },
+    menuItem: {
+        padding: "6px 20px",
+        cursor: "pointer",
+        whiteSpace: "nowrap",
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between"
+    },
+    menuItemHover: {
+        backgroundColor: "#f5f5f5"
+    },
+    menuItemDisabled: {
+        opacity: .5,
+        cursor: "not-allowed"
+    },
+    menuItemSeparator: {
+        height: "1px",
+        backgroundColor: "#e0e0e0",
+        margin: "5px 0"
+    },
+    menuItemIcon: {
+        marginRight: "8px",
+        width: "16px",
+        height: "16px",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+    },
+    menuItemText: {
+        flex: 1
+    },
+    menuItemShortcut: {
+        marginLeft: "20px",
+        color: "#999",
+        fontSize: "11px"
+    },
+    submenuArrow: {
+        marginLeft: "5px",
+        fontSize: "12px",
+        color: "#666"
+    },
+    submenuContainer: {
+        position: "absolute",
+        left: "100%",
+        top: "0",
+        backgroundColor: "#ffffff",
+        boxShadow: "0 2px 10px rgba(0, 0, 0, 0.2)",
+        borderRadius: "4px",
+        padding: "5px 0",
+        zIndex: 1001,
+        minWidth: "180px",
+        fontSize: "12px"
+    },
+    inputContainer: {
+        padding: "8px 12px",
+        display: "flex",
+        alignItems: "center"
+    },
+    inputLabel: {
+        marginRight: "8px",
+        whiteSpace: "nowrap"
+    },
+    inputField: {
+        width: "60px",
+        padding: "4px",
+        border: "1px solid #ddd",
+        borderRadius: "3px"
+    },
+    buttonContainer: {
+        display: "flex",
+        justifyContent: "flex-end",
+        padding: "5px 12px"
+    },
+    button: {
+        padding: "4px 8px",
+        backgroundColor: "#1890ff",
+        color: "white",
+        border: "none",
+        borderRadius: "3px",
+        cursor: "pointer",
+        fontSize: "12px"
+    }
+};
+
+export function createElement(tag, className, styles) {
+    const element = document.createElement(tag);
+    return className && (element.className = className), styles && applyStyles(element, styles), 
+    element;
+}
+
+export function applyStyles(element, styles) {
+    Object.entries(styles).forEach((([key, value]) => {
+        element.style[key] = value;
+    }));
+}
+
+export function createIcon(iconName) {
+    const iconElement = createElement("span");
+    switch (iconName) {
+      case "copy":
+        iconElement.innerHTML = "📋";
+        break;
+
+      case "paste":
+        iconElement.innerHTML = "📌";
+        break;
+
+      case "cut":
+        iconElement.innerHTML = "✂️";
+        break;
+
+      case "delete":
+        iconElement.innerHTML = "🗑️";
+        break;
+
+      case "insert":
+        iconElement.innerHTML = "➕";
+        break;
+
+      case "sort":
+        iconElement.innerHTML = "🔃";
+        break;
+
+      case "protect":
+        iconElement.innerHTML = "🔒";
+        break;
+
+      case "hide":
+        iconElement.innerHTML = "👁️";
+        break;
+
+      case "freeze":
+        iconElement.innerHTML = "❄️";
+        break;
+
+      case "up-arrow":
+        iconElement.innerHTML = "🔼";
+        break;
+
+      case "down-arrow":
+        iconElement.innerHTML = "🔽";
+        break;
+
+      case "left-arrow":
+        iconElement.innerHTML = "◀️";
+        break;
+
+      case "right-arrow":
+        iconElement.innerHTML = "▶️";
+        break;
+
+      default:
+        iconElement.innerHTML = "•";
+    }
+    return applyStyles(iconElement, MENU_STYLES.menuItemIcon), iconElement;
+}
+
+export function createNumberInputItem(label, defaultValue = 1, iconName, callback) {
+    const container = createElement("div");
+    if (applyStyles(container, MENU_STYLES.inputContainer), iconName) {
+        const icon = createIcon(iconName);
+        container.appendChild(icon);
+    }
+    const labelElement = createElement("label");
+    labelElement.textContent = label, applyStyles(labelElement, MENU_STYLES.inputLabel), 
+    container.appendChild(labelElement);
+    const input = createElement("input");
+    input.type = "number", input.min = "1", input.value = defaultValue.toString(), applyStyles(input, MENU_STYLES.inputField), 
+    container.appendChild(input);
+    const wrapper = createElement("div");
+    return wrapper.appendChild(container), wrapper;
+}
+//# sourceMappingURL=styles.js.map

package/es/contextmenu/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contextmenu/styles.ts"],"names":[],"mappings":"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","file":"styles.js","sourcesContent":["/**\n * 右键菜单的样式定义\n */\n\nexport const MENU_CONTAINER_CLASS = 'vtable-context-menu-container';\nexport const MENU_ITEM_CLASS = 'vtable-context-menu-item';\nexport const MENU_ITEM_DISABLED_CLASS = 'vtable-context-menu-item-disabled';\nexport const MENU_ITEM_SEPARATOR_CLASS = 'vtable-context-menu-item-separator';\nexport const MENU_ITEM_SUBMENU_CLASS = 'vtable-context-menu-item-submenu';\n\nexport const MENU_STYLES = {\n  menuContainer: {\n    position: 'absolute',\n    backgroundColor: '#ffffff',\n    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',\n    borderRadius: '4px',\n    padding: '5px 0',\n    zIndex: 1000,\n    minWidth: '180px',\n    maxHeight: '300px', // 设置最大高度\n    overflowY: 'auto', // 添加垂直滚动\n    fontSize: '12px'\n  },\n  menuItem: {\n    padding: '6px 20px',\n    cursor: 'pointer',\n    whiteSpace: 'nowrap',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between'\n  },\n  menuItemHover: {\n    backgroundColor: '#f5f5f5'\n  },\n  menuItemDisabled: {\n    opacity: 0.5,\n    cursor: 'not-allowed'\n  },\n  menuItemSeparator: {\n    height: '1px',\n    backgroundColor: '#e0e0e0',\n    margin: '5px 0'\n  },\n  menuItemIcon: {\n    marginRight: '8px',\n    width: '16px',\n    height: '16px',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center'\n  },\n  menuItemText: {\n    flex: 1\n  },\n  menuItemShortcut: {\n    marginLeft: '20px',\n    color: '#999',\n    fontSize: '11px'\n  },\n  submenuArrow: {\n    marginLeft: '5px',\n    fontSize: '12px',\n    color: '#666'\n  },\n  submenuContainer: {\n    position: 'absolute',\n    left: '100%',\n    top: '0',\n    backgroundColor: '#ffffff',\n    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',\n    borderRadius: '4px',\n    padding: '5px 0',\n    zIndex: 1001,\n    minWidth: '180px',\n    fontSize: '12px'\n  },\n  inputContainer: {\n    padding: '8px 12px',\n    display: 'flex',\n    alignItems: 'center'\n  },\n  inputLabel: {\n    marginRight: '8px',\n    whiteSpace: 'nowrap'\n  },\n  inputField: {\n    width: '60px',\n    padding: '4px',\n    border: '1px solid #ddd',\n    borderRadius: '3px'\n  },\n  buttonContainer: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: '5px 12px'\n  },\n  button: {\n    padding: '4px 8px',\n    backgroundColor: '#1890ff',\n    color: 'white',\n    border: 'none',\n    borderRadius: '3px',\n    cursor: 'pointer',\n    fontSize: '12px'\n  }\n};\n\n/**\n * 创建DOM元素\n */\nexport function createElement(tag: string, className?: string, styles?: Record<string, any>): HTMLElement {\n  const element = document.createElement(tag);\n  if (className) {\n    element.className = className;\n  }\n  if (styles) {\n    applyStyles(element, styles);\n  }\n  return element;\n}\n\n/**\n * 应用样式到元素\n */\nexport function applyStyles(element: HTMLElement, styles: Record<string, any>): void {\n  Object.entries(styles).forEach(([key, value]) => {\n    (element.style as any)[key] = value;\n  });\n}\n\n/**\n * 创建图标元素\n */\nexport function createIcon(iconName: string): HTMLElement {\n  const iconElement = createElement('span');\n\n  // 根据图标名称设置不同的内容\n  switch (iconName) {\n    case 'copy':\n      iconElement.innerHTML = '📋';\n      break;\n    case 'paste':\n      iconElement.innerHTML = '📌';\n      break;\n    case 'cut':\n      iconElement.innerHTML = '✂️';\n      break;\n    case 'delete':\n      iconElement.innerHTML = '🗑️';\n      break;\n    case 'insert':\n      iconElement.innerHTML = '➕';\n      break;\n    case 'sort':\n      iconElement.innerHTML = '🔃';\n      break;\n    // case 'merge':\n    //   iconElement.innerHTML = ;\n    //   break;\n    // case 'unmerge':\n    //   iconElement.innerHTML = ;\n    //   break;\n    case 'protect':\n      iconElement.innerHTML = '🔒';\n      break;\n    case 'hide':\n      iconElement.innerHTML = '👁️';\n      break;\n    case 'freeze':\n      iconElement.innerHTML = '❄️';\n      break;\n    case 'up-arrow':\n      iconElement.innerHTML = '🔼';\n      break;\n    case 'down-arrow':\n      iconElement.innerHTML = '🔽';\n      break;\n    case 'left-arrow':\n      iconElement.innerHTML = '◀️';\n      break;\n    case 'right-arrow':\n      iconElement.innerHTML = '▶️';\n      break;\n    default:\n      iconElement.innerHTML = '•';\n  }\n\n  applyStyles(iconElement, MENU_STYLES.menuItemIcon);\n  return iconElement;\n}\n\n/**\n * 创建带有数字输入框的菜单项\n */\nexport function createNumberInputItem(\n  label: string,\n  defaultValue: number = 1,\n  iconName: string,\n  callback: (value: number) => void\n): HTMLElement {\n  // 创建容器\n  const container = createElement('div');\n  applyStyles(container, MENU_STYLES.inputContainer);\n\n  // 创建左侧图标容器\n\n  // 添加图标\n  if (iconName) {\n    const icon = createIcon(iconName);\n    container.appendChild(icon);\n  }\n  // 创建标签\n  const labelElement = createElement('label');\n  labelElement.textContent = label;\n  applyStyles(labelElement, MENU_STYLES.inputLabel);\n  container.appendChild(labelElement);\n\n  // 创建输入框\n  const input = createElement('input') as HTMLInputElement;\n  input.type = 'number';\n  input.min = '1';\n  input.value = defaultValue.toString();\n  applyStyles(input, MENU_STYLES.inputField);\n  container.appendChild(input);\n  // 创建包装容器\n  const wrapper = createElement('div');\n  wrapper.appendChild(container);\n\n  return wrapper;\n}\n"]}

package/es/contextmenu/types.d.ts

@@ -0,0 +1,69 @@
+export interface MenuClickEventArgs {
+    menuKey: MenuKey;
+    menuText: string;
+    rowIndex?: number;
+    colIndex?: number;
+    cellValue?: any;
+    inputValue?: number | string;
+}
+export declare enum MenuKey {
+    EMPTY = 0,
+    COPY = "copy",
+    CUT = "cut",
+    PASTE = "paste",
+    INSERT_COLUMN_LEFT = "insert_column_left",
+    INSERT_COLUMN_RIGHT = "insert_column_right",
+    INSERT_ROW_ABOVE = "insert_row_above",
+    INSERT_ROW_BELOW = "insert_row_below",
+    DELETE_ROW = "delete_row",
+    DELETE_COLUMN = "delete_column",
+    FREEZE_TO_THIS_ROW = "freeze_to_this_row",
+    FREEZE_TO_THIS_COLUMN = "freeze_to_this_column",
+    FREEZE_TO_THIS_ROW_AND_COLUMN = "freeze_to_this_row_and_column",
+    UNFREEZE = "unfreeze",
+    MERGE_CELLS = "merge_cells",
+    UNMERGE_CELLS = "unmerge_cells",
+    HIDE_COLUMN = "hide_column",
+    SORT = "sort"
+}
+export interface MenuItem {
+    text: string;
+    menuKey: MenuKey | string;
+    disabled?: boolean;
+    shortcut?: string;
+    iconName?: string;
+    iconPlaceholder?: boolean;
+    inputDefaultValue?: number;
+    children?: (MenuItem | string)[];
+}
+export type MenuItemOrSeparator = MenuItem | string;
+export declare const DEFAULT_BODY_MENU_ITEMS: (string | {
+    text: string;
+    menuKey: MenuKey;
+} | {
+    text: string;
+    menuKey: MenuKey;
+    iconName: string;
+    children: {
+        text: string;
+        menuKey: MenuKey;
+    }[];
+})[];
+export declare const DEFAULT_HEADER_MENU_ITEMS: (string | {
+    text: string;
+    menuKey: MenuKey;
+})[];
+export declare const DEFAULT_COLUMN_SERIES_MENU_ITEMS: (string | {
+    text: string;
+    menuKey: MenuKey;
+})[];
+export declare const DEFAULT_ROW_SERIES_MENU_ITEMS: (string | {
+    text: string;
+    menuKey: MenuKey;
+})[];
+export declare const DEFAULT_CORNER_SERIES_MENU_ITEMS: {
+    text: string;
+    menuKey: MenuKey;
+    iconName: string;
+    shortcut: string;
+}[];