@toolbox-web/grid 1.15.0 → 1.16.0

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

@@ -377,7 +377,7 @@ class z {
   }
   // #endregion
 }
-const p = "@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:var(--tbw-context-menu-shadow, 0 2px 10px 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}}";
+const p = "@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:var(--tbw-context-menu-shadow, 0 2px 10px 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 kbd{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 v(l, e) {
   return (typeof l == "function" ? l(e) : l).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
 }
@@ -393,7 +393,7 @@ function H(l, e) {
 function y(l, e, t, n = R.submenuArrow) {
   const s = document.createElement("div");
   s.className = "tbw-context-menu", s.setAttribute("role", "menu");
-  const u = l.some((o) => !o.separator && o.icon);
+  const c = l.some((o) => !o.separator && o.icon);
   for (const o of l) {
     if (o.separator) {
       const r = document.createElement("div");
@@ -402,31 +402,41 @@ function y(l, e, t, n = R.submenuArrow) {
     }
     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 = H(o, e);
-    if (a && (i.classList.add("disabled"), i.setAttribute("aria-disabled", "true")), o.icon) {
+    const d = H(o, e);
+    if (d && (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);
-    } else if (u) {
+    } else if (c) {
       const r = document.createElement("span");
       r.className = "tbw-context-menu-icon", r.innerHTML = " ", i.appendChild(r);
     }
     const b = document.createElement("span");
     if (b.className = "tbw-context-menu-label", b.textContent = o.name, i.appendChild(b), o.shortcut) {
       const r = document.createElement("span");
-      r.className = "tbw-context-menu-shortcut", r.textContent = o.shortcut, i.appendChild(r);
+      if (r.className = "tbw-context-menu-shortcut", Array.isArray(o.shortcut))
+        o.shortcut.forEach((u, m) => {
+          m > 0 && r.appendChild(document.createTextNode("+"));
+          const a = document.createElement("kbd");
+          a.textContent = u, r.appendChild(a);
+        });
+      else {
+        const u = document.createElement("kbd");
+        u.textContent = o.shortcut, r.appendChild(u);
+      }
+      i.appendChild(r);
     }
     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", () => {
         if (i.querySelector(".tbw-context-menu") || !o.subMenu) return;
-        const h = v(o.subMenu, e), d = y(h, 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);
+        const m = v(o.subMenu, e), a = y(m, e, t, n);
+        a.classList.add("tbw-context-submenu"), a.style.position = "absolute", a.style.left = "100%", a.style.top = "0", i.style.position = "relative", i.appendChild(a);
       }), i.addEventListener("mouseleave", () => {
-        const c = i.querySelector(".tbw-context-menu");
-        c && c.remove();
+        const u = i.querySelector(".tbw-context-menu");
+        u && u.remove();
       });
     }
-    !a && o.action && !o.subMenu && i.addEventListener("click", (r) => {
+    !d && o.action && !o.subMenu && i.addEventListener("click", (r) => {
       r.stopPropagation(), t(o);
     }), s.appendChild(i);
   }
@@ -434,12 +444,12 @@ function y(l, e, t, n = R.submenuArrow) {
 }
 function S(l, e, t) {
   l.style.position = "fixed", l.style.left = `${e}px`, l.style.top = `${t}px`, l.style.visibility = "hidden", l.style.zIndex = "10000";
-  const n = l.getBoundingClientRect(), s = window.innerWidth, u = window.innerHeight;
+  const n = l.getBoundingClientRect(), s = window.innerWidth, c = window.innerHeight;
   let o = e, i = t;
-  e + n.width > s && (o = e - n.width), t + n.height > u && (i = t - n.height), o = Math.max(0, o), i = Math.max(0, i), l.style.left = `${o}px`, l.style.top = `${i}px`, l.style.visibility = "visible";
+  e + n.width > s && (o = e - n.width), t + n.height > c && (i = t - n.height), o = Math.max(0, o), i = Math.max(0, i), l.style.left = `${o}px`, l.style.top = `${i}px`, l.style.visibility = "visible";
 }
 const M = "getContextMenuItems";
-let f = null, g = null, m = null, w = 0;
+let f = null, g = null, h = null, w = 0;
 const x = [
   {
     id: "copy",
@@ -557,8 +567,8 @@ class _ extends z {
   copyGridStyles(e) {
     const t = this.gridElement;
     if (!t) return;
-    const n = getComputedStyle(t), s = [], u = n.getPropertyValue("color-scheme").trim();
-    u && s.push(`color-scheme: ${u}`);
+    const n = getComputedStyle(t), s = [], c = n.getPropertyValue("color-scheme").trim();
+    c && s.push(`color-scheme: ${c}`);
     for (const o of _.CSS_VARS_TO_COPY) {
       const i = n.getPropertyValue(o).trim();
       i && s.push(`${o}: ${i}`);
@@ -569,7 +579,7 @@ class _ extends z {
     }
   }
   installGlobalHandlers() {
-    !m && typeof document < "u" && typeof p == "string" && p && (m = document.createElement("style"), m.id = "tbw-context-menu-styles", m.textContent = p, document.head.appendChild(m)), f || (f = () => {
+    !h && typeof document < "u" && typeof p == "string" && p && (h = document.createElement("style"), h.id = "tbw-context-menu-styles", h.textContent = p, document.head.appendChild(h)), f || (f = () => {
       document.querySelectorAll(".tbw-context-menu").forEach((t) => t.remove());
     }, document.addEventListener("click", f)), g || (g = (e) => {
       e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((n) => n.remove());
@@ -580,7 +590,7 @@ class _ extends z {
    * Uses reference counting to ensure handlers persist while any grid uses the plugin.
    */
   uninstallGlobalHandlers() {
-    w--, !(w > 0) && (f && (document.removeEventListener("click", f), f = null), g && (document.removeEventListener("keydown", g), g = null), m && (m.remove(), m = null));
+    w--, !(w > 0) && (f && (document.removeEventListener("click", f), f = null), g && (document.removeEventListener("keydown", g), g = null), h && (h.remove(), h = null));
   }
   /**
    * Query all plugins for context menu items via the query system.
@@ -591,7 +601,7 @@ class _ extends z {
     const t = this.grid.query(M, e), n = [];
     for (const s of t)
       Array.isArray(s) && n.push(...s);
-    return n.sort((s, u) => (s.order ?? 100) - (u.order ?? 100)), this.insertGroupSeparators(n);
+    return n.sort((s, c) => (s.order ?? 100) - (c.order ?? 100)), this.insertGroupSeparators(n);
   }
   /**
    * Insert separators between groups of items with different order ranges.
@@ -606,14 +616,14 @@ class _ extends z {
         t.push(s);
         continue;
       }
-      const u = Math.floor((s.order ?? 100) / 10);
-      n >= 0 && u !== n && t.push({
-        id: `__sep-${n}-${u}`,
+      const c = Math.floor((s.order ?? 100) / 10);
+      n >= 0 && c !== n && t.push({
+        id: `__sep-${n}-${c}`,
         label: "",
         separator: !0,
         action: () => {
         }
-      }), n = u, t.push(s);
+      }), n = c, t.push(s);
     }
     return t;
   }
@@ -642,29 +652,29 @@ class _ extends z {
     t && t.getAttribute("data-context-menu-bound") !== "true" && (t.setAttribute("data-context-menu-bound", "true"), t.addEventListener("contextmenu", (n) => {
       const s = n;
       s.preventDefault();
-      const u = s.target, o = u.closest("[data-row][data-col]"), i = u.closest('[part~="header-cell"]');
-      let a;
+      const c = s.target, o = c.closest("[data-row][data-col]"), i = c.closest('[part~="header-cell"]');
+      let d;
       if (o) {
-        const c = parseInt(o.getAttribute("data-row") ?? "-1", 10), h = parseInt(o.getAttribute("data-col") ?? "-1", 10), d = this.visibleColumns[h], E = this.rows[c], A = this.syncSelectionOnContextMenu(c);
-        a = {
+        const u = parseInt(o.getAttribute("data-row") ?? "-1", 10), m = parseInt(o.getAttribute("data-col") ?? "-1", 10), a = this.visibleColumns[m], E = this.rows[u], A = this.syncSelectionOnContextMenu(u);
+        d = {
           row: E,
-          rowIndex: c,
-          column: d,
-          columnIndex: h,
-          field: d?.field ?? "",
-          value: E?.[d?.field] ?? null,
+          rowIndex: u,
+          column: a,
+          columnIndex: m,
+          field: a?.field ?? "",
+          value: E?.[a?.field] ?? null,
           isHeader: !1,
           event: s,
           selectedRows: A
         };
       } else if (i) {
-        const c = parseInt(i.getAttribute("data-col") ?? "-1", 10), h = this.visibleColumns[c];
-        a = {
+        const u = parseInt(i.getAttribute("data-col") ?? "-1", 10), m = this.visibleColumns[u];
+        d = {
           row: null,
           rowIndex: -1,
-          column: h,
-          columnIndex: c,
-          field: h?.field ?? "",
+          column: m,
+          columnIndex: u,
+          field: m?.field ?? "",
           value: null,
           isHeader: !0,
           event: s,
@@ -672,21 +682,21 @@ class _ extends z {
         };
       } else
         return;
-      this.params = a, this.position = { x: s.clientX, y: s.clientY };
-      const b = this.collectPluginItems(a);
-      let r = v(this.config.items ?? x, a);
+      this.params = d, this.position = { x: s.clientX, y: s.clientY };
+      const b = this.collectPluginItems(d);
+      let r = v(this.config.items ?? x, d);
       if (b.length > 0) {
-        const c = this.convertPluginItems(b);
-        r.length > 0 && c.length > 0 ? r = [...r, { id: "__plugin-sep", name: "", separator: !0 }, ...c] : r = [...r, ...c];
+        const u = this.convertPluginItems(b);
+        r.length > 0 && u.length > 0 ? r = [...r, { id: "__plugin-sep", name: "", separator: !0 }, ...u] : r = [...r, ...u];
       }
       r = I(r), r.length && (this.menuElement && this.menuElement.remove(), this.menuElement = y(
         r,
-        a,
-        (c) => {
-          c.action && c.action(a), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+        d,
+        (u) => {
+          u.action && u.action(d), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
         },
         this.gridIcons.submenuArrow
-      ), document.body.appendChild(this.menuElement), this.copyGridStyles(this.menuElement), S(this.menuElement, s.clientX, s.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: r }));
+      ), document.body.appendChild(this.menuElement), this.copyGridStyles(this.menuElement), S(this.menuElement, s.clientX, s.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: d, items: r }));
     }));
   }
   // #endregion
@@ -708,10 +718,10 @@ class _ extends z {
       isHeader: n.isHeader ?? !1,
       event: n.event ?? new MouseEvent("contextmenu"),
       selectedRows: n.selectedRows ?? []
-    }, u = this.collectPluginItems(s);
+    }, c = this.collectPluginItems(s);
     let o = v(this.config.items ?? x, s);
-    if (u.length > 0) {
-      const i = this.convertPluginItems(u);
+    if (c.length > 0) {
+      const i = this.convertPluginItems(c);
       o.length > 0 && i.length > 0 ? o = [...o, { id: "__plugin-sep", name: "", separator: !0 }, ...i] : o = [...o, ...i];
     }
     o = I(o), this.menuElement && this.menuElement.remove(), this.menuElement = y(