@toolbox-web/grid 0.0.4 → 0.0.6

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

@@ -1,4 +1,13 @@
-class v {
+const v = {
+  expand: "▶",
+  collapse: "▼",
+  sortAsc: "▲",
+  sortDesc: "▼",
+  sortNone: "⇅",
+  submenuArrow: "▶",
+  dragHandle: "⋮⋮"
+};
+class y {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -49,8 +58,8 @@ class v {
   /**
    * Emit a custom event from the grid.
    */
-  emit(e, l) {
-    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: l, bubbles: !0 }));
+  emit(e, n) {
+    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: n, bubbles: !0 }));
   }
   /**
    * Request a re-render of the grid.
@@ -97,6 +106,55 @@ class v {
   get shadowRoot() {
     return this.grid?.shadowRoot ?? null;
   }
+  /**
+   * Get the disconnect signal for event listener cleanup.
+   * This signal is aborted when the grid disconnects from the DOM.
+   * Use this when adding event listeners that should be cleaned up automatically.
+   *
+   * Best for:
+   * - Document/window-level listeners added in attach()
+   * - Listeners on the grid element itself
+   * - Any listener that should persist across renders
+   *
+   * Not needed for:
+   * - Listeners on elements created in afterRender() (removed with element)
+   *
+   * @example
+   * element.addEventListener('click', handler, { signal: this.disconnectSignal });
+   * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
+   */
+  get disconnectSignal() {
+    return this.grid?.disconnectSignal;
+  }
+  /**
+   * Get the grid-level icons configuration.
+   * Returns merged icons (user config + defaults).
+   */
+  get gridIcons() {
+    const e = this.grid?.gridConfig?.icons ?? {};
+    return { ...v, ...e };
+  }
+  /**
+   * Resolve an icon value to string or HTMLElement.
+   * Checks plugin config first, then grid-level icons, then defaults.
+   *
+   * @param iconKey - The icon key in GridIcons (e.g., 'expand', 'collapse')
+   * @param pluginOverride - Optional plugin-level override
+   * @returns The resolved icon value
+   */
+  resolveIcon(e, n) {
+    return n !== void 0 ? n : this.gridIcons[e];
+  }
+  /**
+   * Set an icon value on an element.
+   * Handles both string (text/HTML) and HTMLElement values.
+   *
+   * @param element - The element to set the icon on
+   * @param icon - The icon value (string or HTMLElement)
+   */
+  setIcon(e, n) {
+    typeof n == "string" ? e.innerHTML = n : n instanceof HTMLElement && (e.innerHTML = "", e.appendChild(n.cloneNode(!0)));
+  }
   /**
    * Log a warning message.
    */
@@ -104,58 +162,58 @@ class v {
     console.warn(`[tbw-grid:${this.name}] ${e}`);
   }
 }
-function g(i, e) {
-  return (typeof i == "function" ? i(e) : i).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
+function b(s, e) {
+  return (typeof s == "function" ? s(e) : s).filter((i) => !(i.hidden === !0 || typeof i.hidden == "function" && i.hidden(e)));
 }
-function y(i, e) {
-  return i.disabled === !0 ? !0 : typeof i.disabled == "function" ? i.disabled(e) : !1;
+function C(s, e) {
+  return s.disabled === !0 ? !0 : typeof s.disabled == "function" ? s.disabled(e) : !1;
 }
-function x(i, e, l) {
-  const n = document.createElement("div");
-  n.className = "tbw-context-menu", n.setAttribute("role", "menu");
-  for (const t of i) {
-    if (t.separator) {
-      const o = document.createElement("div");
-      o.className = "tbw-context-menu-separator", o.setAttribute("role", "separator"), n.appendChild(o);
+function x(s, e, n, i = v.submenuArrow) {
+  const l = document.createElement("div");
+  l.className = "tbw-context-menu", l.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);
       continue;
     }
-    const s = document.createElement("div");
-    s.className = "tbw-context-menu-item", t.cssClass && s.classList.add(t.cssClass), s.setAttribute("role", "menuitem"), s.setAttribute("data-id", t.id);
-    const r = y(t, e);
-    if (r && (s.classList.add("disabled"), s.setAttribute("aria-disabled", "true")), t.icon) {
-      const o = document.createElement("span");
-      o.className = "tbw-context-menu-icon", o.innerHTML = t.icon, s.appendChild(o);
+    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);
+    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 u = document.createElement("span");
-    if (u.className = "tbw-context-menu-label", u.textContent = t.name, s.appendChild(u), t.shortcut) {
-      const o = document.createElement("span");
-      o.className = "tbw-context-menu-shortcut", o.textContent = t.shortcut, s.appendChild(o);
+    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);
     }
-    if (t.subMenu?.length) {
-      const o = document.createElement("span");
-      o.className = "tbw-context-menu-arrow", o.textContent = "▶", s.appendChild(o), s.addEventListener("mouseenter", () => {
-        if (s.querySelector(".tbw-context-menu") || !t.subMenu) return;
-        const a = g(t.subMenu, e), d = x(a, e, l);
-        d.classList.add("tbw-context-submenu"), d.style.position = "absolute", d.style.left = "100%", d.style.top = "0", s.style.position = "relative", s.appendChild(d);
-      }), s.addEventListener("mouseleave", () => {
-        const c = s.querySelector(".tbw-context-menu");
-        c && c.remove();
+    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", () => {
+        if (t.querySelector(".tbw-context-menu") || !o.subMenu) return;
+        const m = b(o.subMenu, e), a = x(m, 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();
       });
     }
-    !r && t.action && !t.subMenu && s.addEventListener("click", (o) => {
-      o.stopPropagation(), l(t);
-    }), n.appendChild(s);
+    !c && o.action && !o.subMenu && t.addEventListener("click", (r) => {
+      r.stopPropagation(), n(o);
+    }), l.appendChild(t);
   }
-  return n;
+  return l;
 }
-function E(i, e, l) {
-  i.style.position = "fixed", i.style.left = `${e}px`, i.style.top = `${l}px`, i.style.visibility = "hidden", i.style.zIndex = "10000";
-  const n = i.getBoundingClientRect(), t = window.innerWidth, s = window.innerHeight;
-  let r = e, u = l;
-  e + n.width > t && (r = e - n.width), l + n.height > s && (u = l - n.height), r = Math.max(0, r), u = Math.max(0, u), i.style.left = `${r}px`, i.style.top = `${u}px`, i.style.visibility = "visible";
+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;
+  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";
 }
-let f = null, p = null, m = null;
-const C = `
+let f = null, p = null, h = null;
+const I = `
   .tbw-context-menu {
     position: fixed;
     background: light-dark(#f5f5f5, #2a2a2a);
@@ -206,31 +264,31 @@ const C = `
     background: light-dark(#d0d0d4, #454545);
     margin: 4px 0;
   }
-`, b = [
+`, g = [
   {
     id: "copy",
     name: "Copy",
     shortcut: "Ctrl+C",
-    action: (i) => {
-      i.grid?.plugins?.clipboard?.copy?.();
+    action: (s) => {
+      s.grid?.plugins?.clipboard?.copy?.();
     }
   },
   { separator: !0, id: "sep1", name: "" },
   {
     id: "export-csv",
     name: "Export CSV",
-    action: (i) => {
-      i.grid?.plugins?.export?.exportCsv?.();
+    action: (s) => {
+      s.grid?.plugins?.export?.exportCsv?.();
     }
   }
 ];
-class M extends v {
+class M extends y {
   name = "contextMenu";
   version = "1.0.0";
   get defaultConfig() {
     return {
       enabled: !0,
-      items: b
+      items: g
     };
   }
   // ===== Internal State =====
@@ -247,10 +305,10 @@ class M extends v {
   }
   // ===== Private Methods =====
   installGlobalHandlers() {
-    !m && typeof document < "u" && (m = document.createElement("style"), m.id = "tbw-context-menu-styles", m.textContent = C, document.head.appendChild(m)), f || (f = () => {
-      document.querySelectorAll(".tbw-context-menu").forEach((l) => l.remove());
+    !h && typeof document < "u" && (h = document.createElement("style"), h.id = "tbw-context-menu-styles", h.textContent = I, document.head.appendChild(h)), 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((n) => n.remove());
+      e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((i) => i.remove());
     }, document.addEventListener("keydown", p));
   }
   // ===== Hooks =====
@@ -258,44 +316,49 @@ class M extends v {
     if (!this.config.enabled) return;
     const e = this.shadowRoot;
     if (!e) return;
-    const l = e.children[0];
-    l && l.getAttribute("data-context-menu-bound") !== "true" && (l.setAttribute("data-context-menu-bound", "true"), l.addEventListener("contextmenu", (n) => {
+    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 t = n;
-      t.preventDefault();
-      const s = t.target, r = s.closest("[data-row][data-col]"), u = s.closest(".header-cell");
-      let o;
-      if (r) {
-        const a = parseInt(r.getAttribute("data-row") ?? "-1", 10), d = parseInt(r.getAttribute("data-col") ?? "-1", 10), h = this.columns[d], w = this.rows[a];
-        o = {
+      const l = i;
+      l.preventDefault();
+      const o = l.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];
+        d = {
           row: w,
-          rowIndex: a,
-          column: h,
-          columnIndex: d,
-          field: h?.field ?? "",
-          value: w?.[h?.field] ?? null,
+          rowIndex: u,
+          column: a,
+          columnIndex: m,
+          field: a?.field ?? "",
+          value: w?.[a?.field] ?? null,
           isHeader: !1,
-          event: t
+          event: l
         };
-      } else if (u) {
-        const a = parseInt(u.getAttribute("data-col") ?? "-1", 10), d = this.columns[a];
-        o = {
+      } else if (c) {
+        const u = parseInt(c.getAttribute("data-col") ?? "-1", 10), m = this.columns[u];
+        d = {
           row: null,
           rowIndex: -1,
-          column: d,
-          columnIndex: a,
-          field: d?.field ?? "",
+          column: m,
+          columnIndex: u,
+          field: m?.field ?? "",
           value: null,
           isHeader: !0,
-          event: t
+          event: l
         };
       } else
         return;
-      this.params = o, this.position = { x: t.clientX, y: t.clientY };
-      const c = g(this.config.items ?? b, o);
-      c.length && (this.menuElement && this.menuElement.remove(), this.menuElement = x(c, o, (a) => {
-        a.action && a.action(o), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
-      }), document.body.appendChild(this.menuElement), E(this.menuElement, t.clientX, t.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: o, items: c }));
+      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,
+        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 }));
     }));
   }
   // ===== Public API =====
@@ -305,20 +368,25 @@ class M extends v {
    * @param y - Y coordinate
    * @param params - Partial context menu parameters
    */
-  showMenu(e, l, n) {
-    const t = {
-      row: n.row ?? null,
-      rowIndex: n.rowIndex ?? -1,
-      column: n.column ?? null,
-      columnIndex: n.columnIndex ?? -1,
-      field: n.field ?? "",
-      value: n.value ?? null,
-      isHeader: n.isHeader ?? !1,
-      event: n.event ?? new MouseEvent("contextmenu")
-    }, s = g(this.config.items ?? b, t);
-    this.menuElement && this.menuElement.remove(), this.menuElement = x(s, t, (r) => {
-      r.action && r.action(t), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
-    }), document.body.appendChild(this.menuElement), E(this.menuElement, e, l), this.isOpen = !0;
+  showMenu(e, n, i) {
+    const l = {
+      row: i.row ?? null,
+      rowIndex: i.rowIndex ?? -1,
+      column: i.column ?? null,
+      columnIndex: i.columnIndex ?? -1,
+      field: i.field ?? "",
+      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,
+      l,
+      (t) => {
+        t.action && t.action(l), 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;
   }
   /**
    * Hide the context menu.