@toolbox-web/grid 0.4.2 → 0.6.0

package/lib/plugins/master-detail/index.js

@@ -1,4 +1,4 @@
-const R = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", b = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, E = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, v = /* @__PURE__ */ new Set([
+const x = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", R = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, E = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, v = /* @__PURE__ */ new Set([
   "script",
   "iframe",
   "object",
@@ -23,7 +23,7 @@ const R = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", b = /^[\w$. '?+\-*/%:()!<>=,
   "plaintext",
   "xmp",
   "listing"
-]), h = /^on\w+$/i, y = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), C = /^\s*(javascript|vbscript|data|blob):/i;
+]), g = /^on\w+$/i, y = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), C = /^\s*(javascript|vbscript|data|blob):/i;
 function _(n) {
   if (!n || typeof n != "string") return "";
   if (n.indexOf("<") === -1) return n;
@@ -33,29 +33,29 @@ function _(n) {
 function A(n) {
   const e = [], t = n.querySelectorAll("*");
   for (const i of t) {
-    const r = i.tagName.toLowerCase();
-    if (v.has(r)) {
+    const s = i.tagName.toLowerCase();
+    if (v.has(s)) {
       e.push(i);
       continue;
     }
-    if ((r === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
-      (s) => h.test(s.name) || s.name === "href" || s.name === "xlink:href"
+    if ((s === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
+      (r) => g.test(r.name) || r.name === "href" || r.name === "xlink:href"
     )) {
       e.push(i);
       continue;
     }
     const l = [];
     for (const o of i.attributes) {
-      const s = o.name.toLowerCase();
-      if (h.test(s)) {
+      const r = o.name.toLowerCase();
+      if (g.test(r)) {
         l.push(o.name);
         continue;
       }
-      if (y.has(s) && C.test(o.value)) {
+      if (y.has(r) && C.test(o.value)) {
         l.push(o.name);
         continue;
       }
-      if (s === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(o.value)) {
+      if (r === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(o.value)) {
         l.push(o.name);
         continue;
       }
@@ -66,24 +66,24 @@ function A(n) {
 }
 function D(n, e) {
   if (!n || n.indexOf("{{") === -1) return n;
-  const t = [], i = n.replace(R, (s, a) => {
+  const t = [], i = n.replace(x, (r, a) => {
     const d = S(a, e);
     return t.push({ expr: a.trim(), result: d }), d;
-  }), r = L(i), l = t.length && t.every((s) => s.result === "" || s.result === u);
-  return /Reflect\.|\bProxy\b|ownKeys\(/.test(n) || l ? "" : r;
+  }), s = L(i), l = t.length && t.every((r) => r.result === "" || r.result === u);
+  return /Reflect\.|\bProxy\b|ownKeys\(/.test(n) || l ? "" : s;
 }
 function S(n, e) {
   if (n = (n || "").trim(), !n || /\b(Reflect|Proxy|ownKeys)\b/.test(n)) return u;
   if (n === "value") return e.value == null ? u : String(e.value);
   if (n.startsWith("row.") && !/[()?]/.test(n) && !n.includes(":")) {
-    const i = n.slice(4), r = e.row ? e.row[i] : void 0;
-    return r == null ? u : String(r);
+    const i = n.slice(4), s = e.row ? e.row[i] : void 0;
+    return s == null ? u : String(s);
   }
-  if (n.length > 80 || !b.test(n) || E.test(n)) return u;
+  if (n.length > 80 || !R.test(n) || E.test(n)) return u;
   const t = n.match(/\./g);
   if (t && t.length > 1) return u;
   try {
-    const r = new Function("value", "row", `return (${n});`)(e.value, e.row), l = r == null ? "" : String(r);
+    const s = new Function("value", "row", `return (${n});`)(e.value, e.row), l = s == null ? "" : String(s);
     return /Reflect|Proxy|ownKeys/.test(l) ? u : l || u;
   } catch {
     return u;
@@ -279,10 +279,21 @@ class T {
     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.
@@ -333,7 +344,7 @@ class T {
     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;
   }
   /**
@@ -349,7 +360,7 @@ class T {
    * ```
    */
   get animationDuration() {
-    const e = this.shadowRoot?.host;
+    const e = this.gridElement;
     if (e) {
       const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(t, 10);
       if (!isNaN(i)) return i;
@@ -401,6 +412,8 @@ function O(n) {
     width: H,
     resizable: !1,
     sortable: !1,
+    filterable: !1,
+    // No filter button for expander column
     meta: {
       lockPosition: !0,
       suppressMovable: !0,
@@ -411,7 +424,7 @@ function O(n) {
     }
   };
 }
-function g(n, e) {
+function h(n, e) {
   const t = new Set(n);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
@@ -427,14 +440,14 @@ function P(n, e) {
   return n.has(e);
 }
 function M(n, e, t, i) {
-  const r = document.createElement("div");
-  r.className = "master-detail-row", r.setAttribute("data-detail-for", String(e)), r.setAttribute("role", "row");
+  const s = document.createElement("div");
+  s.className = "master-detail-row", s.setAttribute("data-detail-for", String(e)), s.setAttribute("role", "row");
   const l = document.createElement("div");
   l.className = "master-detail-cell", l.setAttribute("role", "cell"), l.style.gridColumn = `1 / ${i + 1}`;
   const o = t(n, e);
-  return typeof o == "string" ? l.innerHTML = o : o instanceof HTMLElement && l.appendChild(o), r.appendChild(l), r;
+  return typeof o == "string" ? l.innerHTML = o : o instanceof HTMLElement && l.appendChild(o), s.appendChild(l), s;
 }
-const F = ".cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:center}.header-row .cell[data-field=__tbw_expander]{visibility:hidden;border:none!important;padding:0;overflow:hidden}.header-row .cell[data-field=__tbw_expander]+.cell{margin-left:-32px;padding-left:calc(var(--tbw-cell-padding, 8px) + 32px)}.master-detail-expander{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.master-detail-toggle{cursor:pointer;opacity:.7;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}.master-detail-toggle:hover{opacity:1}.master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border));overflow:hidden}.master-detail-cell{padding:16px;overflow:auto}.master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}.master-detail-row.tbw-collapsing{animation:tbw-detail-collapse var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-detail-expand{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:500px;padding-top:16px;padding-bottom:16px}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}";
+const F = "@layer tbw-plugins{tbw-grid .cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:center}tbw-grid .header-row .cell[data-field=__tbw_expander]{display:none}tbw-grid .header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}tbw-grid .master-detail-expander{display:flex;align-items:center;justify-content:center;width:100%;height:100%}tbw-grid .master-detail-toggle{cursor:pointer;opacity:.7;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}tbw-grid .master-detail-toggle:hover{opacity:1}tbw-grid .master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border));overflow:hidden}tbw-grid .master-detail-cell{padding:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));overflow:auto}tbw-grid .master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}tbw-grid .master-detail-row.tbw-collapsing{animation:tbw-detail-collapse var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-detail-expand{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:var(--tbw-detail-max-height, 31.25rem);padding-top:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));padding-bottom:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem))}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:var(--tbw-detail-max-height, 31.25rem)}to{opacity:0;max-height:0}}}";
 class w extends T {
   name = "masterDetail";
   styles = F;
@@ -491,12 +504,12 @@ class w extends T {
         return;
       }
     }
-    const r = t.getAttribute("animation"), l = t.getAttribute("show-expand-column"), o = t.getAttribute("expand-on-row-click"), s = t.getAttribute("collapse-on-click-outside"), a = t.getAttribute("height"), d = {};
-    r !== null && (d.animation = r === "false" ? !1 : r), l !== null && (d.showExpandColumn = l !== "false"), o !== null && (d.expandOnRowClick = o === "true"), s !== null && (d.collapseOnClickOutside = s === "true"), a !== null && (d.detailHeight = a === "auto" ? "auto" : parseInt(a, 10));
+    const s = t.getAttribute("animation"), l = t.getAttribute("show-expand-column"), o = t.getAttribute("expand-on-row-click"), r = t.getAttribute("collapse-on-click-outside"), a = t.getAttribute("height"), d = {};
+    s !== null && (d.animation = s === "false" ? !1 : s), l !== null && (d.showExpandColumn = l !== "false"), o !== null && (d.expandOnRowClick = o === "true"), r !== null && (d.collapseOnClickOutside = r === "true"), a !== null && (d.detailHeight = a === "auto" ? "auto" : parseInt(a, 10));
     const c = t.innerHTML.trim();
     c && !this.config.detailRenderer && (d.detailRenderer = (f, G) => {
-      const x = D(c, { value: f, row: f });
-      return _(x);
+      const b = D(c, { value: f, row: f });
+      return _(b);
     }), Object.keys(d).length > 0 && (this.config = { ...this.config, ...d });
   }
   // #endregion
@@ -551,7 +564,7 @@ class w extends T {
    * Toggle a row's detail and emit event.
    */
   toggleAndEmit(e, t) {
-    this.expandedRows = g(this.expandedRows, e), this.emit("detail-expand", {
+    this.expandedRows = h(this.expandedRows, e), this.emit("detail-expand", {
       rowIndex: t,
       row: e,
       expanded: this.expandedRows.has(e)
@@ -570,13 +583,13 @@ class w extends T {
     const t = [...e];
     if (k(t))
       return t;
-    const r = O(this.name);
-    return r.viewRenderer = (l) => {
-      const { row: o } = l, s = this.expandedRows.has(o), a = document.createElement("span");
+    const s = O(this.name);
+    return s.viewRenderer = (l) => {
+      const { row: o } = l, r = this.expandedRows.has(o), a = document.createElement("span");
       a.className = "master-detail-expander expander-cell";
       const d = document.createElement("span");
-      return d.className = `master-detail-toggle${s ? " expanded" : ""}`, this.setIcon(d, this.resolveIcon(s ? "collapse" : "expand")), d.setAttribute("role", "button"), d.setAttribute("tabindex", "0"), d.setAttribute("aria-expanded", String(s)), d.setAttribute("aria-label", s ? "Collapse details" : "Expand details"), a.appendChild(d), a;
-    }, [r, ...t];
+      return d.className = `master-detail-toggle${r ? " expanded" : ""}`, this.setIcon(d, this.resolveIcon(r ? "collapse" : "expand")), d.setAttribute("role", "button"), d.setAttribute("tabindex", "0"), d.setAttribute("aria-expanded", String(r)), d.setAttribute("aria-label", r ? "Collapse details" : "Expand details"), a.appendChild(d), a;
+    }, [s, ...t];
   }
   onRowClick(e) {
     if (!(!this.config.expandOnRowClick || !this.config.detailRenderer))
@@ -589,8 +602,8 @@ class w extends T {
   }
   onKeyDown(e) {
     if (e.key !== " ") return;
-    const t = this.grid._focusCol, i = this.grid._focusRow, r = this.columns[t];
-    if (!r || !m(r)) return;
+    const t = this.grid._focusCol, i = this.grid._focusRow, s = this.columns[t];
+    if (!s || !m(s)) return;
     const l = this.rows[i];
     if (l)
       return e.preventDefault(), this.toggleAndEmit(l, i), this.requestRenderWithFocus(), !0;
@@ -611,28 +624,28 @@ class w extends T {
    */
   #e() {
     if (!this.config.detailRenderer) return;
-    const e = this.shadowRoot?.querySelector(".rows");
+    const e = this.gridElement?.querySelector(".rows");
     if (!e) return;
-    const t = /* @__PURE__ */ new Map(), i = e.querySelectorAll(".data-grid-row"), r = this.columns.length;
+    const t = /* @__PURE__ */ new Map(), i = e.querySelectorAll(".data-grid-row"), s = this.columns.length;
     for (const o of i) {
-      const s = o.querySelector(".cell[data-row]"), a = s ? parseInt(s.getAttribute("data-row") ?? "-1", 10) : -1;
+      const r = o.querySelector(".cell[data-row]"), a = r ? parseInt(r.getAttribute("data-row") ?? "-1", 10) : -1;
       a >= 0 && t.set(a, o);
     }
     const l = e.querySelectorAll(".master-detail-row");
     for (const o of l) {
-      const s = parseInt(o.getAttribute("data-detail-for") ?? "-1", 10), a = s >= 0 ? this.rows[s] : void 0, d = a && this.expandedRows.has(a), c = t.has(s);
+      const r = parseInt(o.getAttribute("data-detail-for") ?? "-1", 10), a = r >= 0 ? this.rows[r] : void 0, d = a && this.expandedRows.has(a), c = t.has(r);
       (!d || !c) && (o.remove(), a && this.detailElements.delete(a));
     }
-    for (const [o, s] of t) {
+    for (const [o, r] of t) {
       const a = this.rows[o];
       if (!a || !this.expandedRows.has(a)) continue;
       const d = this.detailElements.get(a);
       if (d) {
-        d.previousElementSibling !== s && s.after(d);
+        d.previousElementSibling !== r && r.after(d);
         continue;
       }
-      const c = M(a, o, this.config.detailRenderer, r);
-      typeof this.config.detailHeight == "number" && (c.style.height = `${this.config.detailHeight}px`), s.after(c), this.detailElements.set(a, c), this.animateExpand(c);
+      const c = M(a, o, this.config.detailRenderer, s);
+      typeof this.config.detailHeight == "number" && (c.style.height = `${this.config.detailHeight}px`), r.after(c), this.detailElements.set(a, c), this.animateExpand(c);
     }
   }
   /**
@@ -652,8 +665,8 @@ class w extends T {
   getExtraHeightBefore(e) {
     let t = 0;
     for (const i of this.expandedRows) {
-      const r = this.rows.indexOf(i);
-      r >= 0 && r < e && (t += this.getDetailHeight(i));
+      const s = this.rows.indexOf(i);
+      s >= 0 && s < e && (t += this.getDetailHeight(i));
     }
     return t;
   }
@@ -663,16 +676,16 @@ class w extends T {
    */
   adjustVirtualStart(e, t, i) {
     if (this.expandedRows.size === 0) return e;
-    const r = [];
-    for (const s of this.expandedRows) {
-      const a = this.rows.indexOf(s);
-      a >= 0 && r.push({ index: a, row: s });
+    const s = [];
+    for (const r of this.expandedRows) {
+      const a = this.rows.indexOf(r);
+      a >= 0 && s.push({ index: a, row: r });
     }
-    r.sort((s, a) => s.index - a.index);
+    s.sort((r, a) => r.index - a.index);
     let l = e, o = 0;
-    for (const { index: s, row: a } of r) {
-      const d = s * i + o, c = this.getDetailHeight(a), f = d + i + c;
-      o += c, !(s >= e) && f > t && s < l && (l = s);
+    for (const { index: r, row: a } of s) {
+      const d = r * i + o, c = this.getDetailHeight(a), f = d + i + c;
+      o += c, !(r >= e) && f > t && r < l && (l = r);
     }
     return l;
   }
@@ -700,7 +713,7 @@ class w extends T {
    */
   toggle(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = g(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = h(this.expandedRows, t), this.requestRender());
   }
   /**
    * Check if the detail row at the given index is expanded.