@toolbox-web/grid 1.3.0 → 1.4.0

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

@@ -1,4 +1,4 @@
-const C = {
+const y = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', I = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -6,9 +6,12 @@ const C = {
   sortNone: "⇅",
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
-  toolPanel: "☰"
+  toolPanel: "☰",
+  filter: y,
+  filterActive: y,
+  print: "🖨️"
 };
-class I {
+class M {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -232,7 +235,7 @@ class I {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...C, ...e };
+    return { ...I, ...e };
   }
   // #region Animation Helpers
   /**
@@ -312,10 +315,10 @@ const g = "@layer tbw-plugins{.tbw-context-menu{position:fixed;background:var(--
 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(r, e) {
+function H(r, e) {
   return r.disabled === !0 ? !0 : typeof r.disabled == "function" ? r.disabled(e) : !1;
 }
-function x(r, e, t, n = C.submenuArrow) {
+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) {
@@ -326,7 +329,7 @@ function x(r, e, t, n = C.submenuArrow) {
     }
     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 = M(s, e);
+    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);
@@ -340,7 +343,7 @@ function x(r, e, t, n = C.submenuArrow) {
       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 f = v(s.subMenu, e), c = x(f, e, t, n);
+        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);
       }), i.addEventListener("mouseleave", () => {
         const a = i.querySelector(".tbw-context-menu");
@@ -353,13 +356,13 @@ function x(r, e, t, n = C.submenuArrow) {
   }
   return l;
 }
-function y(r, e, t) {
+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";
 }
-let h = null, b = null, m = null, p = 0;
+let f = null, b = null, m = null, p = 0;
 const w = [
   {
     id: "copy",
@@ -378,7 +381,7 @@ const w = [
     }
   }
 ];
-class H extends I {
+class L extends M {
   /** @internal */
   name = "contextMenu";
   /** @internal */
@@ -405,9 +408,9 @@ class H extends I {
   // #endregion
   // #region Private Methods
   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)), h || (h = () => {
+    !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", h)), b || (b = (e) => {
+    }, document.addEventListener("click", f)), b || (b = (e) => {
       e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((n) => n.remove());
     }, document.addEventListener("keydown", b));
   }
@@ -416,7 +419,7 @@ class H extends I {
    * Uses reference counting to ensure handlers persist while any grid uses the plugin.
    */
   uninstallGlobalHandlers() {
-    p--, !(p > 0) && (h && (document.removeEventListener("click", h), h = null), b && (document.removeEventListener("keydown", b), b = 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
@@ -431,25 +434,25 @@ class H extends I {
       const s = l.target, i = s.closest("[data-row][data-col]"), d = s.closest(".header-cell");
       let u;
       if (i) {
-        const a = parseInt(i.getAttribute("data-row") ?? "-1", 10), f = parseInt(i.getAttribute("data-col") ?? "-1", 10), c = this.columns[f], E = this.rows[a];
+        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 = {
           row: E,
           rowIndex: a,
           column: c,
-          columnIndex: f,
+          columnIndex: h,
           field: c?.field ?? "",
           value: E?.[c?.field] ?? null,
           isHeader: !1,
           event: l
         };
       } else if (d) {
-        const a = parseInt(d.getAttribute("data-col") ?? "-1", 10), f = this.columns[a];
+        const a = parseInt(d.getAttribute("data-col") ?? "-1", 10), h = this.columns[a];
         u = {
           row: null,
           rowIndex: -1,
-          column: f,
+          column: h,
           columnIndex: a,
-          field: f?.field ?? "",
+          field: h?.field ?? "",
           value: null,
           isHeader: !0,
           event: l
@@ -465,7 +468,7 @@ class H extends I {
           a.action && a.action(u), 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: u, items: o }));
+      ), document.body.appendChild(this.menuElement), C(this.menuElement, l.clientX, l.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: u, items: o }));
     }));
   }
   // #endregion
@@ -494,7 +497,7 @@ class H extends I {
         i.action && i.action(l), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
       },
       this.gridIcons.submenuArrow
-    ), document.body.appendChild(this.menuElement), y(this.menuElement, e, t), this.isOpen = !0;
+    ), document.body.appendChild(this.menuElement), C(this.menuElement, e, t), this.isOpen = !0;
   }
   /**
    * Hide the context menu.
@@ -513,6 +516,6 @@ class H extends I {
   // Styles are injected globally via installGlobalHandlers() since menu renders in document.body
 }
 export {
-  H as ContextMenuPlugin
+  L as ContextMenuPlugin
 };
 //# sourceMappingURL=index.js.map