@toolbox-web/grid 0.4.2 → 0.6.0

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

@@ -185,10 +185,21 @@ class I {
     return this.grid;
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -239,7 +250,7 @@ class I {
     const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
     if (e === !1 || e === "off") return !1;
     if (e === !0 || e === "on") return !0;
-    const t = this.shadowRoot?.host;
+    const t = this.gridElement;
     return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
   /**
@@ -255,7 +266,7 @@ class I {
    * ```
    */
   get animationDuration() {
-    const e = this.shadowRoot?.host;
+    const e = this.gridElement;
     if (e) {
       const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), n = parseInt(t, 10);
       if (!isNaN(n)) return n;
@@ -292,81 +303,81 @@ class I {
   }
   // #endregion
 }
-const g = ".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 w(s, e) {
-  return (typeof s == "function" ? s(e) : s).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
+const g = "@layer tbw-plugins{.tbw-context-menu{position:fixed;background:var(--tbw-context-menu-bg, var(--tbw-color-panel-bg, light-dark(#f5f5f5, #2a2a2a)));color:var(--tbw-context-menu-fg, var(--tbw-color-fg, light-dark(#222, #eee)));border:1px solid var(--tbw-context-menu-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-border-radius, .25rem);box-shadow:0 2px 10px var(--tbw-color-shadow, rgba(0, 0, 0, .15));min-width:var(--tbw-menu-min-width, 10rem);padding:var(--tbw-spacing-xs, .25rem) 0;z-index:10000;font-size:var(--tbw-font-size-sm, .8125rem);font-family:var(--tbw-font-family, system-ui, sans-serif)}.tbw-context-menu-item{display:flex;align-items:center;padding:var(--tbw-menu-item-padding, .375rem .75rem);cursor:pointer;gap:var(--tbw-menu-item-gap, .5rem)}.tbw-context-menu-item:hover:not(.disabled){background:var(--tbw-context-menu-hover, var(--tbw-color-row-hover, 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:var(--tbw-icon-size, 1rem);text-align:center}.tbw-context-menu-label{flex:1}.tbw-context-menu-shortcut{color:var(--tbw-color-fg-muted, light-dark(#888, #888));font-size:var(--tbw-font-size-xs, .6875rem)}.tbw-context-menu-arrow{font-size:var(--tbw-font-size-2xs, .625rem);color:var(--tbw-color-fg-muted, light-dark(#888, #888))}.tbw-context-menu-separator{height:1px;background:var(--tbw-context-menu-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));margin:var(--tbw-spacing-xs, .25rem) 0}}";
+function v(r, e) {
+  return (typeof r == "function" ? r(e) : r).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
 }
-function M(s, e) {
-  return s.disabled === !0 ? !0 : typeof s.disabled == "function" ? s.disabled(e) : !1;
+function M(r, e) {
+  return r.disabled === !0 ? !0 : typeof r.disabled == "function" ? r.disabled(e) : !1;
 }
-function v(s, e, t, n = C.submenuArrow) {
+function x(r, e, t, n = C.submenuArrow) {
   const l = document.createElement("div");
   l.className = "tbw-context-menu", l.setAttribute("role", "menu");
-  for (const o of s) {
+  for (const o of r) {
     if (o.separator) {
-      const r = document.createElement("div");
-      r.className = "tbw-context-menu-separator", r.setAttribute("role", "separator"), l.appendChild(r);
+      const s = document.createElement("div");
+      s.className = "tbw-context-menu-separator", s.setAttribute("role", "separator"), l.appendChild(s);
       continue;
     }
     const i = document.createElement("div");
     i.className = "tbw-context-menu-item", o.cssClass && i.classList.add(o.cssClass), i.setAttribute("role", "menuitem"), i.setAttribute("data-id", o.id);
-    const a = M(o, e);
-    if (a && (i.classList.add("disabled"), i.setAttribute("aria-disabled", "true")), o.icon) {
-      const r = document.createElement("span");
-      r.className = "tbw-context-menu-icon", r.innerHTML = o.icon, i.appendChild(r);
+    const d = M(o, e);
+    if (d && (i.classList.add("disabled"), i.setAttribute("aria-disabled", "true")), o.icon) {
+      const s = document.createElement("span");
+      s.className = "tbw-context-menu-icon", s.innerHTML = o.icon, i.appendChild(s);
     }
-    const d = document.createElement("span");
-    if (d.className = "tbw-context-menu-label", d.textContent = o.name, i.appendChild(d), o.shortcut) {
-      const r = document.createElement("span");
-      r.className = "tbw-context-menu-shortcut", r.textContent = o.shortcut, i.appendChild(r);
+    const a = document.createElement("span");
+    if (a.className = "tbw-context-menu-label", a.textContent = o.name, i.appendChild(a), o.shortcut) {
+      const s = document.createElement("span");
+      s.className = "tbw-context-menu-shortcut", s.textContent = o.shortcut, i.appendChild(s);
     }
     if (o.subMenu?.length) {
-      const r = document.createElement("span");
-      r.className = "tbw-context-menu-arrow", typeof n == "string" ? r.innerHTML = n : n instanceof HTMLElement && r.appendChild(n.cloneNode(!0)), i.appendChild(r), i.addEventListener("mouseenter", () => {
+      const s = document.createElement("span");
+      s.className = "tbw-context-menu-arrow", typeof n == "string" ? s.innerHTML = n : n instanceof HTMLElement && s.appendChild(n.cloneNode(!0)), i.appendChild(s), i.addEventListener("mouseenter", () => {
         if (i.querySelector(".tbw-context-menu") || !o.subMenu) return;
-        const h = w(o.subMenu, e), c = v(h, e, t, n);
+        const h = v(o.subMenu, e), c = x(h, e, t, n);
         c.classList.add("tbw-context-submenu"), c.style.position = "absolute", c.style.left = "100%", c.style.top = "0", i.style.position = "relative", i.appendChild(c);
       }), i.addEventListener("mouseleave", () => {
         const u = i.querySelector(".tbw-context-menu");
         u && u.remove();
       });
     }
-    !a && o.action && !o.subMenu && i.addEventListener("click", (r) => {
-      r.stopPropagation(), t(o);
+    !d && o.action && !o.subMenu && i.addEventListener("click", (s) => {
+      s.stopPropagation(), t(o);
     }), l.appendChild(i);
   }
   return l;
 }
-function y(s, e, t) {
-  s.style.position = "fixed", s.style.left = `${e}px`, s.style.top = `${t}px`, s.style.visibility = "hidden", s.style.zIndex = "10000";
-  const n = s.getBoundingClientRect(), l = window.innerWidth, o = window.innerHeight;
-  let i = e, a = t;
-  e + n.width > l && (i = e - n.width), t + n.height > o && (a = t - n.height), i = Math.max(0, i), a = Math.max(0, a), s.style.left = `${i}px`, s.style.top = `${a}px`, s.style.visibility = "visible";
+function y(r, e, t) {
+  r.style.position = "fixed", r.style.left = `${e}px`, r.style.top = `${t}px`, r.style.visibility = "hidden", r.style.zIndex = "10000";
+  const n = r.getBoundingClientRect(), l = window.innerWidth, o = window.innerHeight;
+  let i = e, d = t;
+  e + n.width > l && (i = e - n.width), t + n.height > o && (d = t - n.height), i = Math.max(0, i), d = Math.max(0, d), r.style.left = `${i}px`, r.style.top = `${d}px`, r.style.visibility = "visible";
 }
-let f = null, p = null, m = null, b = 0;
-const x = [
+let f = null, b = null, m = null, p = 0;
+const w = [
   {
     id: "copy",
     name: "Copy",
     shortcut: "Ctrl+C",
-    action: (s) => {
-      s.grid?.plugins?.clipboard?.copy?.();
+    action: (r) => {
+      r.grid?.plugins?.clipboard?.copy?.();
     }
   },
   { separator: !0, id: "sep1", name: "" },
   {
     id: "export-csv",
     name: "Export CSV",
-    action: (s) => {
-      s.grid?.plugins?.export?.exportCsv?.();
+    action: (r) => {
+      r.grid?.plugins?.export?.exportCsv?.();
     }
   }
 ];
-class R extends I {
+class H extends I {
   name = "contextMenu";
   get defaultConfig() {
     return {
-      items: x
+      items: w
     };
   }
   // #region Internal State
@@ -377,7 +388,7 @@ class R extends I {
   // #endregion
   // #region Lifecycle
   attach(e) {
-    super.attach(e), this.installGlobalHandlers(), b++;
+    super.attach(e), this.installGlobalHandlers(), p++;
   }
   detach() {
     this.menuElement && (this.menuElement.remove(), this.menuElement = null), this.isOpen = !1, this.params = null, this.uninstallGlobalHandlers();
@@ -387,31 +398,31 @@ class R extends I {
   installGlobalHandlers() {
     !m && typeof document < "u" && typeof g == "string" && g && (m = document.createElement("style"), m.id = "tbw-context-menu-styles", m.textContent = g, document.head.appendChild(m)), f || (f = () => {
       document.querySelectorAll(".tbw-context-menu").forEach((t) => t.remove());
-    }, document.addEventListener("click", f)), p || (p = (e) => {
+    }, document.addEventListener("click", f)), b || (b = (e) => {
       e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((n) => n.remove());
-    }, document.addEventListener("keydown", p));
+    }, document.addEventListener("keydown", b));
   }
   /**
    * Clean up global handlers when the last instance detaches.
    * Uses reference counting to ensure handlers persist while any grid uses the plugin.
    */
   uninstallGlobalHandlers() {
-    b--, !(b > 0) && (f && (document.removeEventListener("click", f), f = null), p && (document.removeEventListener("keydown", p), p = null), m && (m.remove(), m = null));
+    p--, !(p > 0) && (f && (document.removeEventListener("click", f), f = null), b && (document.removeEventListener("keydown", b), b = null), m && (m.remove(), m = null));
   }
   // #endregion
   // #region Hooks
   afterRender() {
-    const e = this.shadowRoot;
+    const e = this.gridElement;
     if (!e) return;
     const t = e.children[0];
     t && t.getAttribute("data-context-menu-bound") !== "true" && (t.setAttribute("data-context-menu-bound", "true"), t.addEventListener("contextmenu", (n) => {
       const l = n;
       l.preventDefault();
-      const o = l.target, i = o.closest("[data-row][data-col]"), a = o.closest(".header-cell");
-      let d;
+      const o = l.target, i = o.closest("[data-row][data-col]"), d = o.closest(".header-cell");
+      let a;
       if (i) {
         const u = parseInt(i.getAttribute("data-row") ?? "-1", 10), h = parseInt(i.getAttribute("data-col") ?? "-1", 10), c = this.columns[h], E = this.rows[u];
-        d = {
+        a = {
           row: E,
           rowIndex: u,
           column: c,
@@ -421,9 +432,9 @@ class R extends I {
           isHeader: !1,
           event: l
         };
-      } else if (a) {
-        const u = parseInt(a.getAttribute("data-col") ?? "-1", 10), h = this.columns[u];
-        d = {
+      } else if (d) {
+        const u = parseInt(d.getAttribute("data-col") ?? "-1", 10), h = this.columns[u];
+        a = {
           row: null,
           rowIndex: -1,
           column: h,
@@ -435,16 +446,16 @@ class R extends I {
         };
       } else
         return;
-      this.params = d, this.position = { x: l.clientX, y: l.clientY };
-      const r = w(this.config.items ?? x, d);
-      r.length && (this.menuElement && this.menuElement.remove(), this.menuElement = v(
-        r,
-        d,
+      this.params = a, this.position = { x: l.clientX, y: l.clientY };
+      const s = v(this.config.items ?? w, a);
+      s.length && (this.menuElement && this.menuElement.remove(), this.menuElement = x(
+        s,
+        a,
         (u) => {
-          u.action && u.action(d), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+          u.action && u.action(a), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
         },
         this.gridIcons.submenuArrow
-      ), document.body.appendChild(this.menuElement), y(this.menuElement, l.clientX, l.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: d, items: r }));
+      ), document.body.appendChild(this.menuElement), y(this.menuElement, l.clientX, l.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: s }));
     }));
   }
   // #endregion
@@ -465,8 +476,8 @@ class R extends I {
       value: n.value ?? null,
       isHeader: n.isHeader ?? !1,
       event: n.event ?? new MouseEvent("contextmenu")
-    }, o = w(this.config.items ?? x, l);
-    this.menuElement && this.menuElement.remove(), this.menuElement = v(
+    }, o = v(this.config.items ?? w, l);
+    this.menuElement && this.menuElement.remove(), this.menuElement = x(
       o,
       l,
       (i) => {
@@ -492,6 +503,6 @@ class R extends I {
   // Styles are injected globally via installGlobalHandlers() since menu renders in document.body
 }
 export {
-  R as ContextMenuPlugin
+  H as ContextMenuPlugin
 };
 //# sourceMappingURL=index.js.map