@toolbox-web/grid 0.4.2 → 0.6.0

package/lib/plugins/tree/index.js

@@ -1,4 +1,4 @@
-const _ = {
+const S = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,7 +8,7 @@ const _ = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class S {
+class _ {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -185,10 +185,21 @@ class S {
     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.
@@ -216,7 +227,7 @@ class S {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ..._, ...e };
+    return { ...S, ...e };
   }
   // #region Animation Helpers
   /**
@@ -239,7 +250,7 @@ class S {
     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 S {
    * ```
    */
   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,7 +303,7 @@ class S {
   }
   // #endregion
 }
-function b(s, e, t) {
+function x(s, e, t) {
   return s.id !== void 0 ? String(s.id) : t ? `${t}-${e}` : String(e);
 }
 function y(s, e) {
@@ -302,7 +313,7 @@ function y(s, e) {
 function w(s, e, t = null, n = 0) {
   const i = e.childrenField ?? "children", o = /* @__PURE__ */ new Set();
   for (let r = 0; r < s.length; r++) {
-    const l = s[r], a = b(l, r, t), d = l[i];
+    const l = s[r], a = x(l, r, t), d = l[i];
     if (Array.isArray(d) && d.length > 0) {
       o.add(a);
       const h = w(d, e, a, n + 1);
@@ -314,23 +325,23 @@ function w(s, e, t = null, n = 0) {
 function v() {
   return /* @__PURE__ */ new Set();
 }
-function x(s, e, t, n = null, i = 0) {
+function R(s, e, t, n = null, i = 0) {
   const o = t.childrenField ?? "children";
   for (let r = 0; r < s.length; r++) {
-    const l = s[r], a = b(l, r, n);
+    const l = s[r], a = x(l, r, n);
     if (a === e)
       return [a];
     const d = l[o];
     if (Array.isArray(d) && d.length > 0) {
-      const h = x(d, e, t, a, i + 1);
+      const h = R(d, e, t, a, i + 1);
       if (h)
         return [a, ...h];
     }
   }
   return null;
 }
-function C(s, e, t, n) {
-  const i = x(s, e, t);
+function E(s, e, t, n) {
+  const i = R(s, e, t);
   if (!i) return n;
   const o = new Set(n);
   for (let r = 0; r < i.length - 1; r++)
@@ -347,7 +358,7 @@ function m(s, e = "children") {
   }
   return !1;
 }
-function E(s) {
+function C(s) {
   if (!Array.isArray(s) || s.length === 0) return null;
   const e = ["children", "items", "nodes", "subRows", "nested"];
   for (const t of s)
@@ -383,8 +394,8 @@ function T(s, e = "children") {
   }
   return t;
 }
-const I = ".cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:flex-start}.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)}.tree-expander{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;box-sizing:border-box}.tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}.tree-spacer{width:14px;display:inline-block}.data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}";
-class F extends S {
+const I = "@layer tbw-plugins{tbw-grid .cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:flex-start}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 .tree-cell-wrapper{display:inline-flex;align-items:center;padding-left:calc(var(--tbw-tree-depth, 0) * var(--tbw-tree-indent-width, var(--tbw-tree-toggle-size, 1.25em)))}tbw-grid .tree-expander{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;box-sizing:border-box}tbw-grid .tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-tree-toggle-size, 1.25em);height:var(--tbw-tree-toggle-size, 1.25em);flex-shrink:0}tbw-grid .tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}tbw-grid .tree-spacer{width:var(--tbw-tree-toggle-size, 1.25em);display:inline-block;flex-shrink:0}tbw-grid .data-grid-row.tbw-tree-slide-in{animation:tbw-tree-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}tbw-grid .data-grid-row.tbw-tree-fade-in{animation:tbw-tree-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-tree-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes tbw-tree-fade-in{0%{opacity:0}to{opacity:1}}}";
+class F extends _ {
   name = "tree";
   styles = I;
   get defaultConfig() {
@@ -421,7 +432,7 @@ class F extends S {
   // #region Auto-Detection
   detect(e) {
     if (!this.config.autoDetect) return !1;
-    const t = e, n = this.config.childrenField ?? E(t) ?? "children";
+    const t = e, n = this.config.childrenField ?? C(t) ?? "children";
     return m(t, n);
   }
   // #endregion
@@ -487,22 +498,22 @@ class F extends S {
     const t = [...e];
     if (t.length === 0) return t;
     const n = t[0], i = n.viewRenderer, o = () => this.config, r = this.setIcon.bind(this), l = this.resolveIcon.bind(this), a = (d) => {
-      const { row: h, value: u } = d, { indentWidth: R = 20, showExpandIcons: A = !0 } = o(), p = h, K = p.__treeDepth ?? 0, f = document.createElement("span");
-      if (f.className = "tree-cell-wrapper", f.style.paddingLeft = `${Number(K) * R}px`, A)
-        if (p.__treeHasChildren) {
+      const { row: h, value: u } = d, { showExpandIcons: A = !0, indentWidth: b } = o(), g = h, K = g.__treeDepth ?? 0, f = document.createElement("span");
+      if (f.className = "tree-cell-wrapper", f.style.setProperty("--tbw-tree-depth", String(K)), b !== void 0 && f.style.setProperty("--tbw-tree-indent-width", `${b}px`), A)
+        if (g.__treeHasChildren) {
           const c = document.createElement("span");
-          c.className = `tree-toggle${p.__treeExpanded ? " expanded" : ""}`, r(c, l(p.__treeExpanded ? "collapse" : "expand")), c.setAttribute("data-tree-key", String(p.__treeKey ?? "")), f.appendChild(c);
+          c.className = `tree-toggle${g.__treeExpanded ? " expanded" : ""}`, r(c, l(g.__treeExpanded ? "collapse" : "expand")), c.setAttribute("data-tree-key", String(g.__treeKey ?? "")), f.appendChild(c);
         } else {
           const c = document.createElement("span");
           c.className = "tree-spacer", f.appendChild(c);
         }
-      const g = document.createElement("span");
-      if (g.className = "tree-content", i) {
+      const p = document.createElement("span");
+      if (p.className = "tree-content", i) {
         const c = i(d);
-        c instanceof Node ? g.appendChild(c) : typeof c == "string" && (g.innerHTML = c);
+        c instanceof Node ? p.appendChild(c) : typeof c == "string" && (p.innerHTML = c);
       } else
-        g.textContent = u != null ? String(u) : "";
-      return f.appendChild(g), f;
+        p.textContent = u != null ? String(u) : "";
+      return f.appendChild(p), f;
     };
     return t[0] = { ...n, viewRenderer: a }, t;
   }
@@ -542,7 +553,7 @@ class F extends S {
   afterRender() {
     const e = this.animationStyle;
     if (e === !1 || this.keysToAnimate.size === 0) return;
-    const t = this.shadowRoot?.querySelector(".rows");
+    const t = this.gridElement?.querySelector(".rows");
     if (!t) return;
     const n = e === "fade" ? "tbw-tree-fade-in" : "tbw-tree-slide-in";
     for (const i of t.querySelectorAll(".data-grid-row")) {
@@ -581,7 +592,7 @@ class F extends S {
     return this.rowKeyMap.get(e)?.data;
   }
   expandToKey(e) {
-    this.expandedKeys = C(this.rows, e, this.config, this.expandedKeys), this.requestRender();
+    this.expandedKeys = E(this.rows, e, this.config, this.expandedKeys), this.requestRender();
   }
   // #endregion
 }
@@ -590,6 +601,6 @@ export {
   T as countNodes,
   m as detectTreeStructure,
   k as getMaxDepth,
-  E as inferChildrenField
+  C as inferChildrenField
 };
 //# sourceMappingURL=index.js.map