@toolbox-web/grid 1.6.0 → 1.6.2

package/lib/plugins/context-menu/ContextMenuPlugin.d.ts

@@ -93,6 +93,17 @@ export declare class ContextMenuPlugin extends BaseGridPlugin<ContextMenuConfig>
     attach(grid: import('../../core/plugin/base-plugin').GridElement): void;
     /** @internal */
     detach(): void;
+    /**
+     * CSS variables to copy from the grid element to the context menu.
+     * Includes both base variables and context-menu specific overrides.
+     */
+    private static readonly CSS_VARS_TO_COPY;
+    /**
+     * Copy CSS custom properties from the grid element to the menu element.
+     * This allows the context menu (appended to document.body) to inherit
+     * theme variables set on tbw-grid.
+     */
+    private copyGridStyles;
     private installGlobalHandlers;
     /**
      * Clean up global handlers when the last instance detaches.

package/lib/plugins/context-menu/ContextMenuPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/context-menu/ContextMenuPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAG/D,OAAO,KAAK,EAAE,iBAAiB,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAkCrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,qBAAa,iBAAkB,SAAQ,cAAc,CAAC,iBAAiB,CAAC;IACtE,gBAAgB;IAChB,QAAQ,CAAC,IAAI,iBAAiB;IAE9B,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,iBAAiB,CAAC,CAIjE;IAGD,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,WAAW,CAA4B;IAK/C,gBAAgB;IACP,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAMhF,gBAAgB;IACP,MAAM,IAAI,IAAI;IAavB,OAAO,CAAC,qBAAqB;IAqC7B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAsB/B,gBAAgB;IACP,WAAW,IAAI,IAAI;IA0F5B;;;;;OAKG;IACH,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI;IAmCxE;;OAEG;IACH,QAAQ,IAAI,IAAI;IAQhB;;;OAGG;IACH,UAAU,IAAI,OAAO;CAMtB"}
+{"version":3,"file":"ContextMenuPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/context-menu/ContextMenuPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAG/D,OAAO,KAAK,EAAE,iBAAiB,EAAmB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAkCrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,qBAAa,iBAAkB,SAAQ,cAAc,CAAC,iBAAiB,CAAC;IACtE,gBAAgB;IAChB,QAAQ,CAAC,IAAI,iBAAiB;IAE9B,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,iBAAiB,CAAC,CAIjE;IAGD,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,WAAW,CAA4B;IAK/C,gBAAgB;IACP,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAMhF,gBAAgB;IACP,MAAM,IAAI,IAAI;IAavB;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAoCtC;IAEF;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,qBAAqB;IAqC7B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAsB/B,gBAAgB;IACP,WAAW,IAAI,IAAI;IA2F5B;;;;;OAKG;IACH,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAAG,IAAI;IAoCxE;;OAEG;IACH,QAAQ,IAAI,IAAI;IAQhB;;;OAGG;IACH,UAAU,IAAI,OAAO;CAMtB"}

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

@@ -311,59 +311,59 @@ class M {
   }
   // #endregion
 }
-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) {
+const w = "@layer tbw-plugins{.tbw-context-menu{position:fixed;background:var(--tbw-context-menu-bg, var(--tbw-color-panel-bg));color:var(--tbw-context-menu-fg, var(--tbw-color-fg));border:1px solid var(--tbw-context-menu-border, var(--tbw-color-border));border-radius:var(--tbw-context-menu-radius, var(--tbw-border-radius));box-shadow:0 2px 10px var(--tbw-context-menu-shadow, var(--tbw-color-shadow));min-width:var(--tbw-context-menu-min-width, var(--tbw-menu-min-width));padding:var(--tbw-spacing-xs) 0;z-index:10000;font-size:var(--tbw-context-menu-font-size, var(--tbw-font-size-sm));font-family:var(--tbw-context-menu-font-family, var(--tbw-font-family))}.tbw-context-menu-item{display:flex;align-items:center;padding:var(--tbw-context-menu-item-padding, var(--tbw-menu-item-padding));cursor:pointer;gap:var(--tbw-context-menu-item-gap, var(--tbw-menu-item-gap))}.tbw-context-menu-item:hover:not(.disabled){background:var(--tbw-context-menu-hover, var(--tbw-color-row-hover))}.tbw-context-menu-item.disabled{opacity:.5;cursor:default}.tbw-context-menu-item.danger{color:var(--tbw-context-menu-danger, var(--tbw-color-danger))}.tbw-context-menu-icon{width:var(--tbw-context-menu-icon-size, var(--tbw-icon-size));text-align:center}.tbw-context-menu-label{flex:1}.tbw-context-menu-shortcut{color:var(--tbw-context-menu-muted, var(--tbw-color-fg-muted));font-size:var(--tbw-context-menu-shortcut-size, var(--tbw-font-size-xs))}.tbw-context-menu-arrow{font-size:var(--tbw-context-menu-arrow-size, var(--tbw-font-size-2xs));color:var(--tbw-context-menu-muted, var(--tbw-color-fg-muted))}.tbw-context-menu-separator{height:1px;background:var(--tbw-context-menu-border, var(--tbw-color-border));margin:var(--tbw-spacing-xs) 0}}";
+function x(r, e) {
   return (typeof r == "function" ? r(e) : r).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
 }
-function H(r, e) {
+function z(r, e) {
   return r.disabled === !0 ? !0 : typeof r.disabled == "function" ? r.disabled(e) : !1;
 }
-function x(r, e, t, n = I.submenuArrow) {
-  const l = document.createElement("div");
-  l.className = "tbw-context-menu", l.setAttribute("role", "menu");
-  for (const s of r) {
-    if (s.separator) {
-      const o = document.createElement("div");
-      o.className = "tbw-context-menu-separator", o.setAttribute("role", "separator"), l.appendChild(o);
+function v(r, e, t, n = I.submenuArrow) {
+  const s = document.createElement("div");
+  s.className = "tbw-context-menu", s.setAttribute("role", "menu");
+  for (const o of r) {
+    if (o.separator) {
+      const l = document.createElement("div");
+      l.className = "tbw-context-menu-separator", l.setAttribute("role", "separator"), s.appendChild(l);
       continue;
     }
     const i = document.createElement("div");
-    i.className = "tbw-context-menu-item", s.cssClass && i.classList.add(s.cssClass), i.setAttribute("role", "menuitem"), i.setAttribute("data-id", s.id);
-    const d = H(s, e);
-    if (d && (i.classList.add("disabled"), i.setAttribute("aria-disabled", "true")), s.icon) {
-      const o = document.createElement("span");
-      o.className = "tbw-context-menu-icon", o.innerHTML = s.icon, i.appendChild(o);
+    i.className = "tbw-context-menu-item", o.cssClass && i.classList.add(o.cssClass), i.setAttribute("role", "menuitem"), i.setAttribute("data-id", o.id);
+    const c = z(o, e);
+    if (c && (i.classList.add("disabled"), i.setAttribute("aria-disabled", "true")), o.icon) {
+      const l = document.createElement("span");
+      l.className = "tbw-context-menu-icon", l.innerHTML = o.icon, i.appendChild(l);
     }
-    const u = document.createElement("span");
-    if (u.className = "tbw-context-menu-label", u.textContent = s.name, i.appendChild(u), s.shortcut) {
-      const o = document.createElement("span");
-      o.className = "tbw-context-menu-shortcut", o.textContent = s.shortcut, i.appendChild(o);
+    const a = document.createElement("span");
+    if (a.className = "tbw-context-menu-label", a.textContent = o.name, i.appendChild(a), o.shortcut) {
+      const l = document.createElement("span");
+      l.className = "tbw-context-menu-shortcut", l.textContent = o.shortcut, i.appendChild(l);
     }
-    if (s.subMenu?.length) {
-      const o = document.createElement("span");
-      o.className = "tbw-context-menu-arrow", typeof n == "string" ? o.innerHTML = n : n instanceof HTMLElement && o.appendChild(n.cloneNode(!0)), i.appendChild(o), i.addEventListener("mouseenter", () => {
-        if (i.querySelector(".tbw-context-menu") || !s.subMenu) return;
-        const h = v(s.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);
+    if (o.subMenu?.length) {
+      const l = document.createElement("span");
+      l.className = "tbw-context-menu-arrow", typeof n == "string" ? l.innerHTML = n : n instanceof HTMLElement && l.appendChild(n.cloneNode(!0)), i.appendChild(l), i.addEventListener("mouseenter", () => {
+        if (i.querySelector(".tbw-context-menu") || !o.subMenu) return;
+        const b = x(o.subMenu, e), d = v(b, e, t, n);
+        d.classList.add("tbw-context-submenu"), d.style.position = "absolute", d.style.left = "100%", d.style.top = "0", i.style.position = "relative", i.appendChild(d);
       }), i.addEventListener("mouseleave", () => {
-        const a = i.querySelector(".tbw-context-menu");
-        a && a.remove();
+        const u = i.querySelector(".tbw-context-menu");
+        u && u.remove();
       });
     }
-    !d && s.action && !s.subMenu && i.addEventListener("click", (o) => {
-      o.stopPropagation(), t(s);
-    }), l.appendChild(i);
+    !c && o.action && !o.subMenu && i.addEventListener("click", (l) => {
+      l.stopPropagation(), t(o);
+    }), s.appendChild(i);
   }
-  return l;
+  return s;
 }
 function C(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, s = window.innerHeight;
-  let i = e, d = t;
-  e + n.width > l && (i = e - n.width), t + n.height > s && (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";
+  const n = r.getBoundingClientRect(), s = window.innerWidth, o = window.innerHeight;
+  let i = e, c = t;
+  e + n.width > s && (i = e - n.width), t + n.height > o && (c = t - n.height), i = Math.max(0, i), c = Math.max(0, c), r.style.left = `${i}px`, r.style.top = `${c}px`, r.style.visibility = "visible";
 }
-let f = null, b = null, m = null, p = 0;
-const w = [
+let h = null, f = null, m = null, g = 0;
+const p = [
   {
     id: "copy",
     name: "Copy",
@@ -381,13 +381,13 @@ const w = [
     }
   }
 ];
-class L extends M {
+class S extends M {
   /** @internal */
   name = "contextMenu";
   /** @internal */
   get defaultConfig() {
     return {
-      items: w
+      items: p
     };
   }
   // #region Internal State
@@ -399,7 +399,7 @@ class L extends M {
   // #region Lifecycle
   /** @internal */
   attach(e) {
-    super.attach(e), this.installGlobalHandlers(), p++;
+    super.attach(e), this.installGlobalHandlers(), g++;
   }
   /** @internal */
   detach() {
@@ -407,19 +407,78 @@ class L extends M {
   }
   // #endregion
   // #region Private Methods
+  /**
+   * CSS variables to copy from the grid element to the context menu.
+   * Includes both base variables and context-menu specific overrides.
+   */
+  static CSS_VARS_TO_COPY = [
+    // Base palette (for themes that only set base vars)
+    "--tbw-color-panel-bg",
+    "--tbw-color-fg",
+    "--tbw-color-fg-muted",
+    "--tbw-color-border",
+    "--tbw-color-row-hover",
+    "--tbw-color-shadow",
+    "--tbw-color-danger",
+    "--tbw-border-radius",
+    "--tbw-font-family",
+    "--tbw-font-size-sm",
+    "--tbw-font-size-xs",
+    "--tbw-font-size-2xs",
+    "--tbw-spacing-xs",
+    "--tbw-icon-size",
+    "--tbw-menu-min-width",
+    "--tbw-menu-item-padding",
+    "--tbw-menu-item-gap",
+    // Context menu specific overrides
+    "--tbw-context-menu-bg",
+    "--tbw-context-menu-fg",
+    "--tbw-context-menu-border",
+    "--tbw-context-menu-radius",
+    "--tbw-context-menu-shadow",
+    "--tbw-context-menu-hover",
+    "--tbw-context-menu-danger",
+    "--tbw-context-menu-muted",
+    "--tbw-context-menu-min-width",
+    "--tbw-context-menu-font-size",
+    "--tbw-context-menu-font-family",
+    "--tbw-context-menu-item-padding",
+    "--tbw-context-menu-item-gap",
+    "--tbw-context-menu-icon-size",
+    "--tbw-context-menu-shortcut-size",
+    "--tbw-context-menu-arrow-size"
+  ];
+  /**
+   * Copy CSS custom properties from the grid element to the menu element.
+   * This allows the context menu (appended to document.body) to inherit
+   * theme variables set on tbw-grid.
+   */
+  copyGridStyles(e) {
+    const t = this.gridElement;
+    if (!t) return;
+    const n = getComputedStyle(t), s = [];
+    for (const o of S.CSS_VARS_TO_COPY) {
+      const i = n.getPropertyValue(o).trim();
+      i && s.push(`${o}: ${i}`);
+    }
+    if (s.length > 0) {
+      const o = e.getAttribute("style") || "";
+      e.setAttribute("style", o + s.join("; ") + ";");
+    }
+  }
   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 = () => {
+    !m && typeof document < "u" && typeof w == "string" && w && (m = document.createElement("style"), m.id = "tbw-context-menu-styles", m.textContent = w, document.head.appendChild(m)), h || (h = () => {
       document.querySelectorAll(".tbw-context-menu").forEach((t) => t.remove());
-    }, document.addEventListener("click", f)), b || (b = (e) => {
+    }, document.addEventListener("click", h)), f || (f = (e) => {
       e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((n) => n.remove());
-    }, document.addEventListener("keydown", b));
+    }, document.addEventListener("keydown", f));
   }
   /**
    * Clean up global handlers when the last instance detaches.
    * Uses reference counting to ensure handlers persist while any grid uses the plugin.
    */
   uninstallGlobalHandlers() {
-    p--, !(p > 0) && (f && (document.removeEventListener("click", f), f = null), b && (document.removeEventListener("keydown", b), b = null), m && (m.remove(), m = null));
+    g--, !(g > 0) && (h && (document.removeEventListener("click", h), h = null), f && (document.removeEventListener("keydown", f), f = null), m && (m.remove(), m = null));
   }
   // #endregion
   // #region Hooks
@@ -429,46 +488,46 @@ class L extends M {
     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 s = l.target, i = s.closest("[data-row][data-col]"), d = s.closest(".header-cell");
-      let u;
+      const s = n;
+      s.preventDefault();
+      const o = s.target, i = o.closest("[data-row][data-col]"), c = o.closest(".header-cell");
+      let a;
       if (i) {
-        const a = parseInt(i.getAttribute("data-row") ?? "-1", 10), h = parseInt(i.getAttribute("data-col") ?? "-1", 10), c = this.columns[h], E = this.rows[a];
-        u = {
+        const u = parseInt(i.getAttribute("data-row") ?? "-1", 10), b = parseInt(i.getAttribute("data-col") ?? "-1", 10), d = this.columns[b], E = this.rows[u];
+        a = {
           row: E,
-          rowIndex: a,
-          column: c,
-          columnIndex: h,
-          field: c?.field ?? "",
-          value: E?.[c?.field] ?? null,
+          rowIndex: u,
+          column: d,
+          columnIndex: b,
+          field: d?.field ?? "",
+          value: E?.[d?.field] ?? null,
           isHeader: !1,
-          event: l
+          event: s
         };
-      } else if (d) {
-        const a = parseInt(d.getAttribute("data-col") ?? "-1", 10), h = this.columns[a];
-        u = {
+      } else if (c) {
+        const u = parseInt(c.getAttribute("data-col") ?? "-1", 10), b = this.columns[u];
+        a = {
           row: null,
           rowIndex: -1,
-          column: h,
-          columnIndex: a,
-          field: h?.field ?? "",
+          column: b,
+          columnIndex: u,
+          field: b?.field ?? "",
           value: null,
           isHeader: !0,
-          event: l
+          event: s
         };
       } else
         return;
-      this.params = u, this.position = { x: l.clientX, y: l.clientY };
-      const o = v(this.config.items ?? w, u);
-      o.length && (this.menuElement && this.menuElement.remove(), this.menuElement = x(
-        o,
-        u,
-        (a) => {
-          a.action && a.action(u), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+      this.params = a, this.position = { x: s.clientX, y: s.clientY };
+      const l = x(this.config.items ?? p, a);
+      l.length && (this.menuElement && this.menuElement.remove(), this.menuElement = v(
+        l,
+        a,
+        (u) => {
+          u.action && u.action(a), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
         },
         this.gridIcons.submenuArrow
-      ), document.body.appendChild(this.menuElement), C(this.menuElement, l.clientX, l.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: u, items: o }));
+      ), document.body.appendChild(this.menuElement), this.copyGridStyles(this.menuElement), C(this.menuElement, s.clientX, s.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: l }));
     }));
   }
   // #endregion
@@ -480,7 +539,7 @@ class L extends M {
    * @param params - Partial context menu parameters
    */
   showMenu(e, t, n) {
-    const l = {
+    const s = {
       row: n.row ?? null,
       rowIndex: n.rowIndex ?? -1,
       column: n.column ?? null,
@@ -489,15 +548,15 @@ class L extends M {
       value: n.value ?? null,
       isHeader: n.isHeader ?? !1,
       event: n.event ?? new MouseEvent("contextmenu")
-    }, s = v(this.config.items ?? w, l);
-    this.menuElement && this.menuElement.remove(), this.menuElement = x(
+    }, o = x(this.config.items ?? p, s);
+    this.menuElement && this.menuElement.remove(), this.menuElement = v(
+      o,
       s,
-      l,
       (i) => {
-        i.action && i.action(l), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+        i.action && i.action(s), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
       },
       this.gridIcons.submenuArrow
-    ), document.body.appendChild(this.menuElement), C(this.menuElement, e, t), this.isOpen = !0;
+    ), document.body.appendChild(this.menuElement), this.copyGridStyles(this.menuElement), C(this.menuElement, e, t), this.isOpen = !0;
   }
   /**
    * Hide the context menu.
@@ -516,6 +575,6 @@ class L extends M {
   // Styles are injected globally via installGlobalHandlers() since menu renders in document.body
 }
 export {
-  L as ContextMenuPlugin
+  S as ContextMenuPlugin
 };
 //# sourceMappingURL=index.js.map