@toolbox-web/grid 0.6.0 → 1.0.0

package/lib/plugins/tree/index.d.ts

@@ -1,8 +1,9 @@
 /**
  * Tree Plugin Entry Point
  * Re-exports plugin class and types for tree-shakeable imports.
+ *
+ * @module Plugins/Tree
  */
 export { TreePlugin } from './TreePlugin';
-export { countNodes, detectTreeStructure, getMaxDepth, inferChildrenField } from './tree-detect';
-export type { TreeConfig, TreeState, TreeExpandDetail, FlattenedTreeRow } from './types';
+export type { TreeConfig, TreeExpandDetail } from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/plugins/tree/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/tree/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACjG,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/tree/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/lib/plugins/tree/index.js

@@ -1,4 +1,4 @@
-const S = {
+const _ = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,7 +8,7 @@ const S = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class _ {
+class v {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -184,23 +184,6 @@ class _ {
   get gridElement() {
     return this.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.gridElement;
-  }
   /**
    * Get the disconnect signal for event listener cleanup.
    * This signal is aborted when the grid disconnects from the DOM.
@@ -227,7 +210,7 @@ class _ {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...S, ...e };
+    return { ..._, ...e };
   }
   // #region Animation Helpers
   /**
@@ -303,35 +286,35 @@ class _ {
   }
   // #endregion
 }
-function x(s, e, t) {
-  return s.id !== void 0 ? String(s.id) : t ? `${t}-${e}` : String(e);
+function x(o, e, t) {
+  return o.id !== void 0 ? String(o.id) : t ? `${t}-${e}` : String(e);
 }
-function y(s, e) {
-  const t = new Set(s);
+function y(o, e) {
+  const t = new Set(o);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-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 = x(l, r, t), d = l[i];
+function w(o, e, t = null, n = 0) {
+  const i = e.childrenField ?? "children", s = /* @__PURE__ */ new Set();
+  for (let r = 0; r < o.length; r++) {
+    const l = o[r], a = x(l, r, t), d = l[i];
     if (Array.isArray(d) && d.length > 0) {
-      o.add(a);
+      s.add(a);
       const h = w(d, e, a, n + 1);
-      for (const u of h) o.add(u);
+      for (const u of h) s.add(u);
     }
   }
-  return o;
+  return s;
 }
-function v() {
+function A() {
   return /* @__PURE__ */ new Set();
 }
-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 = x(l, r, n);
+function R(o, e, t, n = null, i = 0) {
+  const s = t.childrenField ?? "children";
+  for (let r = 0; r < o.length; r++) {
+    const l = o[r], a = x(l, r, n);
     if (a === e)
       return [a];
-    const d = l[o];
+    const d = l[s];
     if (Array.isArray(d) && d.length > 0) {
       const h = R(d, e, t, a, i + 1);
       if (h)
@@ -340,17 +323,17 @@ function R(s, e, t, n = null, i = 0) {
   }
   return null;
 }
-function E(s, e, t, n) {
-  const i = R(s, e, t);
+function E(o, e, t, n) {
+  const i = R(o, e, t);
   if (!i) return n;
-  const o = new Set(n);
+  const s = new Set(n);
   for (let r = 0; r < i.length - 1; r++)
-    o.add(i[r]);
-  return o;
+    s.add(i[r]);
+  return s;
 }
-function m(s, e = "children") {
-  if (!Array.isArray(s) || s.length === 0) return !1;
-  for (const t of s) {
+function m(o, e = "children") {
+  if (!Array.isArray(o) || o.length === 0) return !1;
+  for (const t of o) {
     if (!t) continue;
     const n = t[e];
     if (Array.isArray(n) && n.length > 0)
@@ -358,10 +341,10 @@ function m(s, e = "children") {
   }
   return !1;
 }
-function C(s) {
-  if (!Array.isArray(s) || s.length === 0) return null;
+function C(o) {
+  if (!Array.isArray(o) || o.length === 0) return null;
   const e = ["children", "items", "nodes", "subRows", "nested"];
-  for (const t of s)
+  for (const t of o)
     if (!(!t || typeof t != "object"))
       for (const n of e) {
         const i = t[n];
@@ -370,34 +353,13 @@ function C(s) {
       }
   return null;
 }
-function k(s, e = "children", t = 0) {
-  if (!Array.isArray(s) || s.length === 0) return t;
-  let n = t;
-  for (const i of s) {
-    if (!i) continue;
-    const o = i[e];
-    if (Array.isArray(o) && o.length > 0) {
-      const r = k(o, e, t + 1);
-      r > n && (n = r);
-    }
-  }
-  return n;
-}
-function T(s, e = "children") {
-  if (!Array.isArray(s)) return 0;
-  let t = 0;
-  for (const n of s) {
-    if (!n) continue;
-    t++;
-    const i = n[e];
-    Array.isArray(i) && (t += T(i, e));
-  }
-  return t;
-}
-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 _ {
+const k = "@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 T extends v {
+  /** @internal */
   name = "tree";
-  styles = I;
+  /** @internal */
+  styles = k;
+  /** @internal */
   get defaultConfig() {
     return {
       childrenField: "children",
@@ -416,6 +378,7 @@ class F extends _ {
   previousVisibleKeys = /* @__PURE__ */ new Set();
   keysToAnimate = /* @__PURE__ */ new Set();
   sortState = null;
+  /** @internal */
   detach() {
     this.expandedKeys.clear(), this.initialExpansionDone = !1, this.flattenedRows = [], this.rowKeyMap.clear(), this.previousVisibleKeys.clear(), this.keysToAnimate.clear(), this.sortState = null;
   }
@@ -437,16 +400,17 @@ class F extends _ {
   }
   // #endregion
   // #region Data Processing
+  /** @internal */
   processRows(e) {
     const t = this.config.childrenField ?? "children", n = e;
     if (!m(n, t))
       return this.flattenedRows = [], this.rowKeyMap.clear(), this.previousVisibleKeys.clear(), [...e];
     let i = this.withStableKeys(n);
     this.sortState && (i = this.sortTree(i, this.sortState.field, this.sortState.direction)), this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = w(i, this.config), this.initialExpansionDone = !0), this.flattenedRows = this.flattenTree(i, this.expandedKeys), this.rowKeyMap.clear(), this.keysToAnimate.clear();
-    const o = /* @__PURE__ */ new Set();
+    const s = /* @__PURE__ */ new Set();
     for (const r of this.flattenedRows)
-      this.rowKeyMap.set(r.key, r), o.add(r.key), !this.previousVisibleKeys.has(r.key) && r.depth > 0 && this.keysToAnimate.add(r.key);
-    return this.previousVisibleKeys = o, this.flattenedRows.map((r) => ({
+      this.rowKeyMap.set(r.key, r), s.add(r.key), !this.previousVisibleKeys.has(r.key) && r.depth > 0 && this.keysToAnimate.add(r.key);
+    return this.previousVisibleKeys = s, this.flattenedRows.map((r) => ({
       ...r.data,
       __treeKey: r.key,
       __treeDepth: r.depth,
@@ -457,8 +421,8 @@ class F extends _ {
   /** Assign stable keys to rows (preserves key across sort operations) */
   withStableKeys(e, t = null) {
     const n = this.config.childrenField ?? "children";
-    return e.map((i, o) => {
-      const r = i.__stableKey, l = i.id !== void 0 ? String(i.id) : r ?? (t ? `${t}-${o}` : String(o)), a = i[n], d = Array.isArray(a) && a.length > 0;
+    return e.map((i, s) => {
+      const r = i.__stableKey, l = i.id !== void 0 ? String(i.id) : r ?? (t ? `${t}-${s}` : String(s)), a = i[n], d = Array.isArray(a) && a.length > 0;
       return {
         ...i,
         __stableKey: l,
@@ -468,19 +432,19 @@ class F extends _ {
   }
   /** Flatten tree using stable keys */
   flattenTree(e, t, n = 0) {
-    const i = this.config.childrenField ?? "children", o = [];
+    const i = this.config.childrenField ?? "children", s = [];
     for (const r of e) {
       const a = r.__stableKey ?? String(r.id ?? "?"), d = r[i], h = Array.isArray(d) && d.length > 0, u = t.has(a);
-      o.push({
+      s.push({
         key: a,
         data: r,
         depth: n,
         hasChildren: h,
         isExpanded: u,
         parentKey: n > 0 && a.substring(0, a.lastIndexOf("-")) || null
-      }), h && u && o.push(...this.flattenTree(d, t, n + 1));
+      }), h && u && s.push(...this.flattenTree(d, t, n + 1));
     }
-    return o;
+    return s;
   }
   /** Sort tree recursively, keeping children with parents */
   sortTree(e, t, n) {
@@ -493,13 +457,14 @@ class F extends _ {
       return Array.isArray(l) && l.length > 0 ? { ...r, [i]: this.sortTree(l, t, n) } : r;
     });
   }
+  /** @internal */
   processColumns(e) {
     if (this.flattenedRows.length === 0) return [...e];
     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, { 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)
+    const n = t[0], i = n.viewRenderer, s = () => this.config, r = this.setIcon.bind(this), l = this.resolveIcon.bind(this), a = (d) => {
+      const { row: h, value: u } = d, { showExpandIcons: K = !0, indentWidth: b } = s(), g = h, S = g.__treeDepth ?? 0, f = document.createElement("span");
+      if (f.className = "tree-cell-wrapper", f.style.setProperty("--tbw-tree-depth", String(S)), b !== void 0 && f.style.setProperty("--tbw-tree-indent-width", `${b}px`), K)
         if (g.__treeHasChildren) {
           const c = document.createElement("span");
           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);
@@ -519,6 +484,7 @@ class F extends _ {
   }
   // #endregion
   // #region Event Handlers
+  /** @internal */
   onCellClick(e) {
     const t = e.originalEvent?.target;
     if (!t?.classList.contains("tree-toggle")) return !1;
@@ -532,6 +498,7 @@ class F extends _ {
       depth: i.depth
     }), this.requestRender(), !0) : !1;
   }
+  /** @internal */
   onKeyDown(e) {
     if (e.key !== " ") return;
     const t = this.grid._focusRow, n = this.flattenedRows[t];
@@ -543,6 +510,7 @@ class F extends _ {
         depth: n.depth
       }), this.requestRenderWithFocus(), !0;
   }
+  /** @internal */
   onHeaderClick(e) {
     if (this.flattenedRows.length === 0 || !e.column.sortable) return !1;
     const { field: t } = e.column;
@@ -550,6 +518,7 @@ class F extends _ {
     const n = this.grid;
     return n._sortState !== void 0 && (n._sortState = this.sortState ? { ...this.sortState } : null), this.emit("sort-change", { field: t, direction: this.sortState?.direction ?? 0 }), this.requestRender(), !0;
   }
+  /** @internal */
   afterRender() {
     const e = this.animationStyle;
     if (e === !1 || this.keysToAnimate.size === 0) return;
@@ -557,7 +526,7 @@ class F extends _ {
     if (!t) return;
     const n = e === "fade" ? "tbw-tree-fade-in" : "tbw-tree-slide-in";
     for (const i of t.querySelectorAll(".data-grid-row")) {
-      const o = i.querySelector(".cell[data-row]"), r = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1, l = this.flattenedRows[r]?.key;
+      const s = i.querySelector(".cell[data-row]"), r = s ? parseInt(s.getAttribute("data-row") ?? "-1", 10) : -1, l = this.flattenedRows[r]?.key;
       l && this.keysToAnimate.has(l) && (i.classList.add(n), i.addEventListener("animationend", () => i.classList.remove(n), { once: !0 }));
     }
     this.keysToAnimate.clear();
@@ -577,7 +546,7 @@ class F extends _ {
     this.expandedKeys = w(this.rows, this.config), this.requestRender();
   }
   collapseAll() {
-    this.expandedKeys = v(), this.requestRender();
+    this.expandedKeys = A(), this.requestRender();
   }
   isExpanded(e) {
     return this.expandedKeys.has(e);
@@ -597,10 +566,6 @@ class F extends _ {
   // #endregion
 }
 export {
-  F as TreePlugin,
-  T as countNodes,
-  m as detectTreeStructure,
-  k as getMaxDepth,
-  C as inferChildrenField
+  T as TreePlugin
 };
 //# sourceMappingURL=index.js.map