@toolbox-web/grid 0.2.6 → 0.2.7

package/lib/plugins/tree/index.js

@@ -1,4 +1,4 @@
-const v = {
+const S = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,7 +8,7 @@ const v = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class b {
+class K {
   /** Plugin version - override in subclass if needed */
   version = "1.0.0";
   /** CSS styles to inject into the grid's shadow DOM */
@@ -133,7 +133,7 @@ class b {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...v, ...e };
+    return { ...S, ...e };
   }
   /**
    * Resolve an icon value to string or HTMLElement.
@@ -164,80 +164,62 @@ class b {
   }
   // #endregion
 }
-function w(r, e, t) {
-  return r.id !== void 0 ? String(r.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 E(r, e, t, n = null, s = 0) {
-  const o = e.childrenField ?? "children", i = [];
-  for (let c = 0; c < r.length; c++) {
-    const a = r[c], d = w(a, c, n), h = a[o], f = Array.isArray(h) && h.length > 0, g = t.has(d);
-    if (i.push({
-      key: d,
-      data: a,
-      depth: s,
-      hasChildren: f,
-      isExpanded: g,
-      parentKey: n
-    }), f && g) {
-      const y = E(h, e, t, d, s + 1);
-      i.push(...y);
-    }
-  }
-  return i;
-}
-function C(r, e) {
-  const t = new Set(r);
+function w(o, e) {
+  const t = new Set(o);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function x(r, e, t = null, n = 0) {
-  const s = e.childrenField ?? "children", o = /* @__PURE__ */ new Set();
-  for (let i = 0; i < r.length; i++) {
-    const c = r[i], a = w(c, i, t), d = c[s];
+function p(o, e, t = null, n = 0) {
+  const r = e.childrenField ?? "children", i = /* @__PURE__ */ new Set();
+  for (let s = 0; s < o.length; s++) {
+    const a = o[s], l = x(a, s, t), d = a[r];
     if (Array.isArray(d) && d.length > 0) {
-      o.add(a);
-      const h = x(d, e, a, n + 1);
-      for (const f of h) o.add(f);
+      i.add(l);
+      const h = p(d, e, l, n + 1);
+      for (const u of h) i.add(u);
     }
   }
-  return o;
+  return i;
 }
-function S() {
+function R() {
   return /* @__PURE__ */ new Set();
 }
-function m(r, e, t, n = null, s = 0) {
-  const o = t.childrenField ?? "children";
-  for (let i = 0; i < r.length; i++) {
-    const c = r[i], a = w(c, i, n);
-    if (a === e)
-      return [a];
-    const d = c[o];
+function b(o, e, t, n = null, r = 0) {
+  const i = t.childrenField ?? "children";
+  for (let s = 0; s < o.length; s++) {
+    const a = o[s], l = x(a, s, n);
+    if (l === e)
+      return [l];
+    const d = a[i];
     if (Array.isArray(d) && d.length > 0) {
-      const h = m(d, e, t, a, s + 1);
+      const h = b(d, e, t, l, r + 1);
       if (h)
-        return [a, ...h];
+        return [l, ...h];
     }
   }
   return null;
 }
-function I(r, e, t, n) {
-  const s = m(r, e, t);
-  if (!s) return n;
-  const o = new Set(n);
-  for (let i = 0; i < s.length - 1; i++)
-    o.add(s[i]);
-  return o;
+function C(o, e, t, n) {
+  const r = b(o, e, t);
+  if (!r) return n;
+  const i = new Set(n);
+  for (let s = 0; s < r.length - 1; s++)
+    i.add(r[s]);
+  return i;
 }
-function K(r, e = "children") {
-  if (!Array.isArray(r) || r.length === 0) return !1;
-  for (const t of r)
+function m(o, e = "children") {
+  if (!Array.isArray(o) || o.length === 0) return !1;
+  for (const t of o)
     if (t && Array.isArray(t[e]) && t[e].length > 0)
       return !0;
   return !1;
 }
-function D(r) {
-  if (!Array.isArray(r) || r.length === 0) return null;
+function _(o) {
+  if (!Array.isArray(o) || o.length === 0) return null;
   const e = ["children", "items", "nodes", "subRows", "nested"];
-  for (const t of r)
+  for (const t of o)
     if (!(!t || typeof t != "object")) {
       for (const n of e)
         if (Array.isArray(t[n]) && t[n].length > 0)
@@ -245,200 +227,229 @@ function D(r) {
     }
   return null;
 }
-function F(r, e = "children", t = 0) {
-  if (!Array.isArray(r) || r.length === 0) return t;
+function v(o, e = "children", t = 0) {
+  if (!Array.isArray(o) || o.length === 0) return t;
   let n = t;
-  for (const s of r) {
-    if (!s) continue;
-    const o = s[e];
-    if (Array.isArray(o) && o.length > 0) {
-      const i = F(o, e, t + 1);
-      i > n && (n = i);
+  for (const r of o) {
+    if (!r) continue;
+    const i = r[e];
+    if (Array.isArray(i) && i.length > 0) {
+      const s = v(i, e, t + 1);
+      s > n && (n = s);
     }
   }
   return n;
 }
-function M(r, e = "children") {
-  if (!Array.isArray(r)) return 0;
+function E(o, e = "children") {
+  if (!Array.isArray(o)) return 0;
   let t = 0;
-  for (const n of r) {
+  for (const n of o) {
     if (!n) continue;
     t++;
-    const s = n[e];
-    Array.isArray(s) && (t += M(s, e));
+    const r = n[e];
+    Array.isArray(r) && (t += E(r, e));
   }
   return t;
 }
-const k = ".tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .2s}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}";
-class q extends b {
+const k = ".tree-cell{display:flex;align-items:center;padding-left:calc(var(--tree-depth, 0) * var(--tbw-tree-indent, 20px))}.tree-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;margin-right:4px}.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 T extends K {
   name = "tree";
   version = "1.0.0";
+  styles = k;
   get defaultConfig() {
     return {
       childrenField: "children",
       autoDetect: !0,
       defaultExpanded: !1,
       indentWidth: 20,
-      showExpandIcons: !0
+      showExpandIcons: !0,
+      animation: "slide"
     };
   }
-  // #region Internal State
-  /** Set of expanded row keys */
+  // #region State
   expandedKeys = /* @__PURE__ */ new Set();
-  /** Whether initial expansion (based on defaultExpanded config) has been applied */
   initialExpansionDone = !1;
-  /** Flattened tree rows for rendering */
   flattenedRows = [];
-  /** Map from key to flattened row for quick lookup */
   rowKeyMap = /* @__PURE__ */ new Map();
-  // #endregion
-  // #region Lifecycle
+  previousVisibleKeys = /* @__PURE__ */ new Set();
+  keysToAnimate = /* @__PURE__ */ new Set();
+  sortState = null;
   detach() {
-    this.expandedKeys.clear(), this.initialExpansionDone = !1, this.flattenedRows = [], this.rowKeyMap.clear();
+    this.expandedKeys.clear(), this.initialExpansionDone = !1, this.flattenedRows = [], this.rowKeyMap.clear(), this.previousVisibleKeys.clear(), this.keysToAnimate.clear(), this.sortState = null;
+  }
+  // #endregion
+  // #region Animation
+  get animationStyle() {
+    const t = this.grid.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (t === !1 || t === "off") return !1;
+    if (t !== !0 && t !== "on") {
+      const n = this.shadowRoot?.host;
+      if (n && getComputedStyle(n).getPropertyValue("--tbw-animation-enabled").trim() === "0")
+        return !1;
+    }
+    return this.config.animation ?? "slide";
   }
   // #endregion
   // #region Auto-Detection
-  /**
-   * Detects if tree functionality should be enabled based on data structure.
-   * Called by the grid during plugin initialization.
-   */
   detect(e) {
     if (!this.config.autoDetect) return !1;
-    const t = this.config.childrenField ?? D(e) ?? "children";
-    return K(e, t);
+    const t = this.config.childrenField ?? _(e) ?? "children";
+    return m(e, t);
   }
   // #endregion
   // #region Data Processing
   processRows(e) {
     const t = this.config.childrenField ?? "children";
-    if (!K(e, t))
-      return this.flattenedRows = [], this.rowKeyMap.clear(), [...e];
-    this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = x(e, this.config), this.initialExpansionDone = !0), this.flattenedRows = E(e, this.config, this.expandedKeys), this.rowKeyMap.clear();
-    for (const n of this.flattenedRows)
-      this.rowKeyMap.set(n.key, n);
-    return this.flattenedRows.map((n) => ({
-      ...n.data,
-      __treeKey: n.key,
-      __treeDepth: n.depth,
-      __treeHasChildren: n.hasChildren,
-      __treeExpanded: n.isExpanded
+    if (!m(e, t))
+      return this.flattenedRows = [], this.rowKeyMap.clear(), this.previousVisibleKeys.clear(), [...e];
+    let n = this.withStableKeys(e);
+    this.sortState && (n = this.sortTree(n, this.sortState.field, this.sortState.direction)), this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = p(n, this.config), this.initialExpansionDone = !0), this.flattenedRows = this.flattenTree(n, this.expandedKeys), this.rowKeyMap.clear(), this.keysToAnimate.clear();
+    const r = /* @__PURE__ */ new Set();
+    for (const i of this.flattenedRows)
+      this.rowKeyMap.set(i.key, i), r.add(i.key), !this.previousVisibleKeys.has(i.key) && i.depth > 0 && this.keysToAnimate.add(i.key);
+    return this.previousVisibleKeys = r, this.flattenedRows.map((i) => ({
+      ...i.data,
+      __treeKey: i.key,
+      __treeDepth: i.depth,
+      __treeHasChildren: i.hasChildren,
+      __treeExpanded: i.isExpanded
     }));
   }
+  /** Assign stable keys to rows (preserves key across sort operations) */
+  withStableKeys(e, t = null) {
+    const n = this.config.childrenField ?? "children";
+    return e.map((r, i) => {
+      const s = r.id !== void 0 ? String(r.id) : r.__stableKey ?? (t ? `${t}-${i}` : String(i)), a = r[n], l = Array.isArray(a) && a.length > 0;
+      return {
+        ...r,
+        __stableKey: s,
+        ...l ? { [n]: this.withStableKeys(a, s) } : {}
+      };
+    });
+  }
+  /** Flatten tree using stable keys */
+  flattenTree(e, t, n = 0) {
+    const r = this.config.childrenField ?? "children", i = [];
+    for (const s of e) {
+      const a = s.__stableKey ?? s.id ?? "?", l = s[r], d = Array.isArray(l) && l.length > 0, h = t.has(a);
+      i.push({
+        key: a,
+        data: s,
+        depth: n,
+        hasChildren: d,
+        isExpanded: h,
+        parentKey: n > 0 && a.substring(0, a.lastIndexOf("-")) || null
+      }), d && h && i.push(...this.flattenTree(l, t, n + 1));
+    }
+    return i;
+  }
+  /** Sort tree recursively, keeping children with parents */
+  sortTree(e, t, n) {
+    const r = this.config.childrenField ?? "children";
+    return [...e].sort((s, a) => {
+      const l = s[t], d = a[t];
+      return l == null && d == null ? 0 : l == null ? -1 : d == null ? 1 : l > d ? n : l < d ? -n : 0;
+    }).map((s) => {
+      const a = s[r];
+      return Array.isArray(a) && a.length > 0 ? { ...s, [r]: this.sortTree(a, t, n) } : s;
+    });
+  }
   processColumns(e) {
     if (this.flattenedRows.length === 0) return [...e];
     const t = [...e];
-    if (t.length > 0) {
-      const n = { ...t[0] }, s = n.viewRenderer;
-      if (s?.__treeWrapped)
-        return t;
-      const o = () => this.config, i = (c) => {
-        const { value: a, row: d, column: h } = c, f = d.__treeDepth ?? 0, g = d.__treeHasChildren ?? !1, y = d.__treeExpanded ?? !1, R = o(), _ = R.indentWidth ?? 20, A = R.showExpandIcons ?? !0, u = document.createElement("span");
-        if (u.style.display = "flex", u.style.alignItems = "center", u.style.paddingLeft = `${f * _}px`, g && A) {
-          const l = document.createElement("span");
-          l.className = "tree-toggle", this.setIcon(l, this.resolveIcon(y ? "collapse" : "expand")), l.style.cursor = "pointer", l.style.marginRight = "4px", l.style.fontSize = "10px", l.setAttribute("data-tree-key", d.__treeKey), u.appendChild(l);
-        } else if (A) {
-          const l = document.createElement("span");
-          l.style.width = "14px", l.style.display = "inline-block", u.appendChild(l);
-        }
-        const p = document.createElement("span");
-        if (s) {
-          const l = s(c);
-          l instanceof Node ? p.appendChild(l) : p.textContent = String(l ?? a ?? "");
-        } else
-          p.textContent = String(a ?? "");
-        return u.appendChild(p), u;
-      };
-      i.__treeWrapped = !0, n.viewRenderer = i, t[0] = n;
-    }
-    return t;
+    if (t.length === 0) return t;
+    const n = { ...t[0] }, r = n.viewRenderer;
+    if (r?.__treeWrapped) return t;
+    const i = () => this.config, s = this.setIcon.bind(this), a = this.resolveIcon.bind(this), l = (d) => {
+      const { value: h, row: u } = d, { indentWidth: A = 20, showExpandIcons: y = !0 } = i(), f = document.createElement("span");
+      if (f.className = "tree-cell", f.style.setProperty("--tree-depth", String(u.__treeDepth ?? 0)), f.style.setProperty("--tbw-tree-indent", `${A}px`), u.__treeHasChildren && y) {
+        const c = document.createElement("span");
+        c.className = `tree-toggle${u.__treeExpanded ? " expanded" : ""}`, s(c, a(u.__treeExpanded ? "collapse" : "expand")), c.setAttribute("data-tree-key", u.__treeKey), f.appendChild(c);
+      } else if (y) {
+        const c = document.createElement("span");
+        c.className = "tree-spacer", f.appendChild(c);
+      }
+      const g = document.createElement("span");
+      if (r) {
+        const c = r(d);
+        c instanceof Node ? g.appendChild(c) : g.textContent = String(c ?? h ?? "");
+      } else
+        g.textContent = String(h ?? "");
+      return f.appendChild(g), f;
+    };
+    return l.__treeWrapped = !0, n.viewRenderer = l, t[0] = n, t;
   }
   // #endregion
   // #region Event Handlers
   onCellClick(e) {
     const t = e.originalEvent?.target;
     if (!t?.classList.contains("tree-toggle")) return !1;
-    const n = t.getAttribute("data-tree-key");
-    if (!n) return !1;
-    const s = this.rowKeyMap.get(n);
-    return s ? (this.expandedKeys = C(this.expandedKeys, n), this.emit("tree-expand", {
+    const n = t.getAttribute("data-tree-key"), r = n ? this.rowKeyMap.get(n) : null;
+    return r ? (this.expandedKeys = w(this.expandedKeys, n), this.emit("tree-expand", {
       key: n,
-      row: s.data,
+      row: r.data,
       expanded: this.expandedKeys.has(n),
-      depth: s.depth
+      depth: r.depth
     }), this.requestRender(), !0) : !1;
   }
+  onHeaderClick(e) {
+    if (this.flattenedRows.length === 0 || !e.column.sortable) return !1;
+    const { field: t } = e.column;
+    !this.sortState || this.sortState.field !== t ? this.sortState = { field: t, direction: 1 } : this.sortState.direction === 1 ? this.sortState = { field: t, direction: -1 } : this.sortState = null;
+    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;
+  }
+  afterRender() {
+    const e = this.animationStyle;
+    if (e === !1 || this.keysToAnimate.size === 0) return;
+    const t = this.shadowRoot?.querySelector(".rows");
+    if (!t) return;
+    const n = e === "fade" ? "tbw-tree-fade-in" : "tbw-tree-slide-in";
+    for (const r of t.querySelectorAll(".data-grid-row")) {
+      const i = r.querySelector(".cell[data-row]"), s = i ? parseInt(i.getAttribute("data-row") ?? "-1", 10) : -1, a = this.flattenedRows[s]?.key;
+      a && this.keysToAnimate.has(a) && (r.classList.add(n), r.addEventListener("animationend", () => r.classList.remove(n), { once: !0 }));
+    }
+    this.keysToAnimate.clear();
+  }
   // #endregion
   // #region Public API
-  /**
-   * Expand a specific node by key.
-   */
   expand(e) {
     this.expandedKeys.add(e), this.requestRender();
   }
-  /**
-   * Collapse a specific node by key.
-   */
   collapse(e) {
     this.expandedKeys.delete(e), this.requestRender();
   }
-  /**
-   * Toggle the expansion state of a node.
-   */
   toggle(e) {
-    this.expandedKeys = C(this.expandedKeys, e), this.requestRender();
+    this.expandedKeys = w(this.expandedKeys, e), this.requestRender();
   }
-  /**
-   * Expand all nodes in the tree.
-   */
   expandAll() {
-    this.expandedKeys = x(this.rows, this.config), this.requestRender();
+    this.expandedKeys = p(this.rows, this.config), this.requestRender();
   }
-  /**
-   * Collapse all nodes in the tree.
-   */
   collapseAll() {
-    this.expandedKeys = S(), this.requestRender();
+    this.expandedKeys = R(), this.requestRender();
   }
-  /**
-   * Check if a node is currently expanded.
-   */
   isExpanded(e) {
     return this.expandedKeys.has(e);
   }
-  /**
-   * Get all currently expanded keys.
-   */
   getExpandedKeys() {
     return [...this.expandedKeys];
   }
-  /**
-   * Get the flattened tree rows with metadata.
-   */
   getFlattenedRows() {
     return [...this.flattenedRows];
   }
-  /**
-   * Get a row's original data by its key.
-   */
   getRowByKey(e) {
     return this.rowKeyMap.get(e)?.data;
   }
-  /**
-   * Expand all ancestors of a node to make it visible.
-   */
   expandToKey(e) {
-    this.expandedKeys = I(this.rows, e, this.config, this.expandedKeys), this.requestRender();
+    this.expandedKeys = C(this.rows, e, this.config, this.expandedKeys), this.requestRender();
   }
   // #endregion
-  // #region Styles
-  styles = k;
-  // #endregion
 }
 export {
-  q as TreePlugin,
-  M as countNodes,
-  K as detectTreeStructure,
-  F as getMaxDepth,
-  D as inferChildrenField
+  T as TreePlugin,
+  E as countNodes,
+  m as detectTreeStructure,
+  v as getMaxDepth,
+  _ as inferChildrenField
 };
 //# sourceMappingURL=index.js.map