@toolbox-web/grid 0.0.7 → 0.1.1

package/lib/plugins/context-menu/index.js

@@ -1,13 +1,14 @@
-const v = {
+const y = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
   sortDesc: "▼",
   sortNone: "⇅",
   submenuArrow: "▶",
-  dragHandle: "⋮⋮"
+  dragHandle: "⋮⋮",
+  toolPanel: "☰"
 };
-class y {
+class C {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -132,7 +133,7 @@ class y {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...v, ...e };
+    return { ...y, ...e };
   }
   /**
    * Resolve an icon value to string or HTMLElement.
@@ -162,109 +163,59 @@ class y {
     console.warn(`[tbw-grid:${this.name}] ${e}`);
   }
 }
-function b(s, e) {
+const I = ".tbw-context-menu{position:fixed;background:light-dark(#f5f5f5,#2a2a2a);color:light-dark(#222,#eee);border:1px solid light-dark(#d0d0d4,#454545);border-radius:4px;box-shadow:0 2px 10px #00000026;min-width:160px;padding:4px 0;z-index:10000;font-size:13px;font-family:system-ui,sans-serif}.tbw-context-menu-item{display:flex;align-items:center;padding:6px 12px;cursor:pointer;gap:8px}.tbw-context-menu-item:hover:not(.disabled){background:light-dark(#e8e8e8,#3a3a3a)}.tbw-context-menu-item.disabled{opacity:.5;cursor:default}.tbw-context-menu-item.danger{color:light-dark(#c00,#f66)}.tbw-context-menu-icon{width:16px;text-align:center}.tbw-context-menu-label{flex:1}.tbw-context-menu-shortcut{color:light-dark(#888,#888);font-size:11px}.tbw-context-menu-arrow{font-size:10px;color:light-dark(#888,#888)}.tbw-context-menu-separator{height:1px;background:light-dark(#d0d0d4,#454545);margin:4px 0}";
+function x(s, e) {
   return (typeof s == "function" ? s(e) : s).filter((i) => !(i.hidden === !0 || typeof i.hidden == "function" && i.hidden(e)));
 }
-function C(s, e) {
+function M(s, e) {
   return s.disabled === !0 ? !0 : typeof s.disabled == "function" ? s.disabled(e) : !1;
 }
-function x(s, e, n, i = v.submenuArrow) {
-  const l = document.createElement("div");
-  l.className = "tbw-context-menu", l.setAttribute("role", "menu");
+function w(s, e, n, i = y.submenuArrow) {
+  const r = document.createElement("div");
+  r.className = "tbw-context-menu", r.setAttribute("role", "menu");
   for (const o of s) {
     if (o.separator) {
-      const r = document.createElement("div");
-      r.className = "tbw-context-menu-separator", r.setAttribute("role", "separator"), l.appendChild(r);
+      const l = document.createElement("div");
+      l.className = "tbw-context-menu-separator", l.setAttribute("role", "separator"), r.appendChild(l);
       continue;
     }
     const t = document.createElement("div");
     t.className = "tbw-context-menu-item", o.cssClass && t.classList.add(o.cssClass), t.setAttribute("role", "menuitem"), t.setAttribute("data-id", o.id);
-    const c = C(o, e);
+    const c = M(o, e);
     if (c && (t.classList.add("disabled"), t.setAttribute("aria-disabled", "true")), o.icon) {
-      const r = document.createElement("span");
-      r.className = "tbw-context-menu-icon", r.innerHTML = o.icon, t.appendChild(r);
+      const l = document.createElement("span");
+      l.className = "tbw-context-menu-icon", l.innerHTML = o.icon, t.appendChild(l);
     }
     const d = document.createElement("span");
     if (d.className = "tbw-context-menu-label", d.textContent = o.name, t.appendChild(d), o.shortcut) {
-      const r = document.createElement("span");
-      r.className = "tbw-context-menu-shortcut", r.textContent = o.shortcut, t.appendChild(r);
+      const l = document.createElement("span");
+      l.className = "tbw-context-menu-shortcut", l.textContent = o.shortcut, t.appendChild(l);
     }
     if (o.subMenu?.length) {
-      const r = document.createElement("span");
-      r.className = "tbw-context-menu-arrow", typeof i == "string" ? r.innerHTML = i : i instanceof HTMLElement && r.appendChild(i.cloneNode(!0)), t.appendChild(r), t.addEventListener("mouseenter", () => {
+      const l = document.createElement("span");
+      l.className = "tbw-context-menu-arrow", typeof i == "string" ? l.innerHTML = i : i instanceof HTMLElement && l.appendChild(i.cloneNode(!0)), t.appendChild(l), t.addEventListener("mouseenter", () => {
         if (t.querySelector(".tbw-context-menu") || !o.subMenu) return;
-        const m = b(o.subMenu, e), a = x(m, e, n, i);
+        const h = x(o.subMenu, e), a = w(h, e, n, i);
         a.classList.add("tbw-context-submenu"), a.style.position = "absolute", a.style.left = "100%", a.style.top = "0", t.style.position = "relative", t.appendChild(a);
       }), t.addEventListener("mouseleave", () => {
         const u = t.querySelector(".tbw-context-menu");
         u && u.remove();
       });
     }
-    !c && o.action && !o.subMenu && t.addEventListener("click", (r) => {
-      r.stopPropagation(), n(o);
-    }), l.appendChild(t);
+    !c && o.action && !o.subMenu && t.addEventListener("click", (l) => {
+      l.stopPropagation(), n(o);
+    }), r.appendChild(t);
   }
-  return l;
+  return r;
 }
 function E(s, e, n) {
   s.style.position = "fixed", s.style.left = `${e}px`, s.style.top = `${n}px`, s.style.visibility = "hidden", s.style.zIndex = "10000";
-  const i = s.getBoundingClientRect(), l = window.innerWidth, o = window.innerHeight;
+  const i = s.getBoundingClientRect(), r = window.innerWidth, o = window.innerHeight;
   let t = e, c = n;
-  e + i.width > l && (t = e - i.width), n + i.height > o && (c = n - i.height), t = Math.max(0, t), c = Math.max(0, c), s.style.left = `${t}px`, s.style.top = `${c}px`, s.style.visibility = "visible";
+  e + i.width > r && (t = e - i.width), n + i.height > o && (c = n - i.height), t = Math.max(0, t), c = Math.max(0, c), s.style.left = `${t}px`, s.style.top = `${c}px`, s.style.visibility = "visible";
 }
-let f = null, p = null, h = null;
-const I = `
-  .tbw-context-menu {
-    position: fixed;
-    background: light-dark(#f5f5f5, #2a2a2a);
-    color: light-dark(#222, #eee);
-    border: 1px solid light-dark(#d0d0d4, #454545);
-    border-radius: 4px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
-    min-width: 160px;
-    padding: 4px 0;
-    z-index: 10000;
-    font-size: 13px;
-    font-family: system-ui, sans-serif;
-  }
-  .tbw-context-menu-item {
-    display: flex;
-    align-items: center;
-    padding: 6px 12px;
-    cursor: pointer;
-    gap: 8px;
-  }
-  .tbw-context-menu-item:hover:not(.disabled) {
-    background: light-dark(#e8e8e8, #3a3a3a);
-  }
-  .tbw-context-menu-item.disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-  .tbw-context-menu-item.danger {
-    color: light-dark(#c00, #f66);
-  }
-  .tbw-context-menu-icon {
-    width: 16px;
-    text-align: center;
-  }
-  .tbw-context-menu-label {
-    flex: 1;
-  }
-  .tbw-context-menu-shortcut {
-    color: light-dark(#888, #888);
-    font-size: 11px;
-  }
-  .tbw-context-menu-arrow {
-    font-size: 10px;
-    color: light-dark(#888, #888);
-  }
-  .tbw-context-menu-separator {
-    height: 1px;
-    background: light-dark(#d0d0d4, #454545);
-    margin: 4px 0;
-  }
-`, g = [
+let f = null, p = null, m = null, g = 0;
+const b = [
   {
     id: "copy",
     name: "Copy",
@@ -282,13 +233,12 @@ const I = `
     }
   }
 ];
-class M extends y {
+class H extends C {
   name = "contextMenu";
   version = "1.0.0";
   get defaultConfig() {
     return {
-      enabled: !0,
-      items: g
+      items: b
     };
   }
   // ===== Internal State =====
@@ -298,67 +248,72 @@ class M extends y {
   menuElement = null;
   // ===== Lifecycle =====
   attach(e) {
-    super.attach(e), this.installGlobalHandlers();
+    super.attach(e), this.installGlobalHandlers(), g++;
   }
   detach() {
-    this.menuElement && (this.menuElement.remove(), this.menuElement = null), this.isOpen = !1, this.params = null;
+    this.menuElement && (this.menuElement.remove(), this.menuElement = null), this.isOpen = !1, this.params = null, this.uninstallGlobalHandlers();
   }
   // ===== Private Methods =====
   installGlobalHandlers() {
-    !h && typeof document < "u" && (h = document.createElement("style"), h.id = "tbw-context-menu-styles", h.textContent = I, document.head.appendChild(h)), f || (f = () => {
+    !m && typeof document < "u" && (m = document.createElement("style"), m.id = "tbw-context-menu-styles", m.textContent = I, document.head.appendChild(m)), f || (f = () => {
       document.querySelectorAll(".tbw-context-menu").forEach((n) => n.remove());
     }, document.addEventListener("click", f)), p || (p = (e) => {
       e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((i) => i.remove());
     }, document.addEventListener("keydown", p));
   }
+  /**
+   * Clean up global handlers when the last instance detaches.
+   * Uses reference counting to ensure handlers persist while any grid uses the plugin.
+   */
+  uninstallGlobalHandlers() {
+    g--, !(g > 0) && (f && (document.removeEventListener("click", f), f = null), p && (document.removeEventListener("keydown", p), p = null), m && (m.remove(), m = null));
+  }
   // ===== Hooks =====
   afterRender() {
-    if (!this.config.enabled) return;
     const e = this.shadowRoot;
     if (!e) return;
     const n = e.children[0];
     n && n.getAttribute("data-context-menu-bound") !== "true" && (n.setAttribute("data-context-menu-bound", "true"), n.addEventListener("contextmenu", (i) => {
-      if (!this.config.enabled) return;
-      const l = i;
-      l.preventDefault();
-      const o = l.target, t = o.closest("[data-row][data-col]"), c = o.closest(".header-cell");
+      const r = i;
+      r.preventDefault();
+      const o = r.target, t = o.closest("[data-row][data-col]"), c = o.closest(".header-cell");
       let d;
       if (t) {
-        const u = parseInt(t.getAttribute("data-row") ?? "-1", 10), m = parseInt(t.getAttribute("data-col") ?? "-1", 10), a = this.columns[m], w = this.rows[u];
+        const u = parseInt(t.getAttribute("data-row") ?? "-1", 10), h = parseInt(t.getAttribute("data-col") ?? "-1", 10), a = this.columns[h], v = this.rows[u];
         d = {
-          row: w,
+          row: v,
           rowIndex: u,
           column: a,
-          columnIndex: m,
+          columnIndex: h,
           field: a?.field ?? "",
-          value: w?.[a?.field] ?? null,
+          value: v?.[a?.field] ?? null,
           isHeader: !1,
-          event: l
+          event: r
         };
       } else if (c) {
-        const u = parseInt(c.getAttribute("data-col") ?? "-1", 10), m = this.columns[u];
+        const u = parseInt(c.getAttribute("data-col") ?? "-1", 10), h = this.columns[u];
         d = {
           row: null,
           rowIndex: -1,
-          column: m,
+          column: h,
           columnIndex: u,
-          field: m?.field ?? "",
+          field: h?.field ?? "",
           value: null,
           isHeader: !0,
-          event: l
+          event: r
         };
       } else
         return;
-      this.params = d, this.position = { x: l.clientX, y: l.clientY };
-      const r = b(this.config.items ?? g, d);
-      r.length && (this.menuElement && this.menuElement.remove(), this.menuElement = x(
-        r,
+      this.params = d, this.position = { x: r.clientX, y: r.clientY };
+      const l = x(this.config.items ?? b, d);
+      l.length && (this.menuElement && this.menuElement.remove(), this.menuElement = w(
+        l,
         d,
         (u) => {
           u.action && u.action(d), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
         },
         this.gridIcons.submenuArrow
-      ), document.body.appendChild(this.menuElement), E(this.menuElement, l.clientX, l.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: d, items: r }));
+      ), document.body.appendChild(this.menuElement), E(this.menuElement, r.clientX, r.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: d, items: l }));
     }));
   }
   // ===== Public API =====
@@ -369,7 +324,7 @@ class M extends y {
    * @param params - Partial context menu parameters
    */
   showMenu(e, n, i) {
-    const l = {
+    const r = {
       row: i.row ?? null,
       rowIndex: i.rowIndex ?? -1,
       column: i.column ?? null,
@@ -378,12 +333,12 @@ class M extends y {
       value: i.value ?? null,
       isHeader: i.isHeader ?? !1,
       event: i.event ?? new MouseEvent("contextmenu")
-    }, o = b(this.config.items ?? g, l);
-    this.menuElement && this.menuElement.remove(), this.menuElement = x(
+    }, o = x(this.config.items ?? b, r);
+    this.menuElement && this.menuElement.remove(), this.menuElement = w(
       o,
-      l,
+      r,
       (t) => {
-        t.action && t.action(l), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+        t.action && t.action(r), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
       },
       this.gridIcons.submenuArrow
     ), document.body.appendChild(this.menuElement), E(this.menuElement, e, n), this.isOpen = !0;
@@ -404,6 +359,6 @@ class M extends y {
   // Styles are injected globally via installGlobalHandlers() since menu renders in document.body
 }
 export {
-  M as ContextMenuPlugin
+  H as ContextMenuPlugin
 };
 //# sourceMappingURL=index.js.map