@ninebone/table 0.0.80 → 0.0.82

package/dist/nine-table.js

@@ -1,104 +1,112 @@
-var te = Object.defineProperty;
-var ne = (b) => {
-  throw TypeError(b);
+var ne = Object.defineProperty;
+var ie = (g) => {
+  throw TypeError(g);
 };
-var oe = (b, i, t) => i in b ? te(b, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : b[i] = t;
-var f = (b, i) => te(b, "name", { value: i, configurable: !0 });
-var L = (b, i, t) => oe(b, typeof i != "symbol" ? i + "" : i, t), ie = (b, i, t) => i.has(b) || ne("Cannot " + t);
-var e = (b, i, t) => (ie(b, i, "read from private field"), t ? t.call(b) : i.get(b)), y = (b, i, t) => i.has(b) ? ne("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(b) : i.set(b, t), S = (b, i, t, o) => (ie(b, i, "write to private field"), o ? o.call(b, t) : i.set(b, t), t);
-import { trace as se } from "@ninebone/util";
-const Q = class Q extends se.constructor {
+var se = (g, i, t) => i in g ? ne(g, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : g[i] = t;
+var f = (g, i) => ne(g, "name", { value: i, configurable: !0 });
+var L = (g, i, t) => se(g, typeof i != "symbol" ? i + "" : i, t), oe = (g, i, t) => i.has(g) || ie("Cannot " + t);
+var e = (g, i, t) => (oe(g, i, "read from private field"), t ? t.call(g) : i.get(g)), y = (g, i, t) => i.has(g) ? ie("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(g) : i.set(g, t), S = (g, i, t, s) => (oe(g, i, "write to private field"), s ? s.call(g, t) : i.set(g, t), t);
+import { trace as re } from "@ninebone/util";
+const Q = class Q extends re.constructor {
   constructor() {
     super(), this.init("nine-table", "green");
   }
 };
 f(Q, "Trace");
-let F = Q;
-const z = new F();
-var k, T, r, E, R, A, N, I;
-const U = class U extends HTMLElement {
+let Y = Q;
+const z = new Y();
+var v, E, c, R, A, T, N, B, X;
+const V = class V extends HTMLElement {
   constructor() {
     super();
-    y(this, k);
-    y(this, T);
-    y(this, r);
-    y(this, E);
+    y(this, v);
+    y(this, E, !1);
+    y(this, c);
     y(this, R);
+    y(this, A);
+    y(this, T);
+    y(this, N, /* @__PURE__ */ f(() => {
+      if (!e(this, v)) return;
+      const t = e(this, v).querySelector(".ng-container-body");
+      t && (S(this, T, new ResizeObserver(() => {
+        this.refresh();
+      })), e(this, T).observe(t));
+    }, "#observeResize"));
     L(this, "refresh", /* @__PURE__ */ f(() => {
-      if (!e(this, k)) return;
-      const t = e(this, k).querySelector(".ng-container-body");
+      if (!e(this, v) || e(this, E)) return;
+      const t = e(this, v).querySelector(".ng-container-body");
       if (!t) return;
-      const o = t.querySelector("table");
-      if (!o) return;
-      const g = $(e(this, r).track, this), c = $(e(this, r).thumb, this), a = e(this, k).querySelector(".ng-container-bottom");
-      if (t.clientWidth !== 0 && o.scrollWidth > t.clientWidth)
-        $(a).show();
+      const s = t.querySelector("table");
+      if (!s) return;
+      const p = $(e(this, c).track, this), r = $(e(this, c).thumb, this), h = e(this, v).querySelector(".ng-container-bottom");
+      if (t.clientWidth !== 0 && s.scrollWidth > t.clientWidth)
+        $(h).show();
       else {
-        $(a).hide();
+        $(h).hide();
         return;
       }
-      const s = g.width();
-      if (s <= 0) return;
-      const p = Math.max(Math.min(s * (t.clientWidth / o.scrollWidth), s), 20);
-      c.width(p);
-      const n = o.scrollWidth - t.clientWidth, u = s - p;
+      const o = p.width();
+      if (o <= 0) return;
+      const u = t.clientWidth / s.scrollWidth, n = Math.max(Math.min(o * u, o), 20);
+      r.width(n);
+      const b = s.scrollWidth - t.clientWidth, a = o - n;
       let l = 0;
-      n > 0 && (l = parseInt(t.scrollLeft / n * u, 10)), l < 0 && (l = 0), l > u && (l = u), c.css({ left: l }), e(this, r).left.disabled = t.scrollLeft <= 0, e(this, r).right.disabled = t.scrollLeft >= n;
+      b > 0 && (l = parseInt(t.scrollLeft / b * a, 10)), l < 0 && (l = 0), l > a && (l = a), r.css({ left: l + "px" }), e(this, c).left.disabled = t.scrollLeft <= 0, e(this, c).right.disabled = t.scrollLeft >= b;
     }, "refresh"));
-    y(this, A, /* @__PURE__ */ f((t) => {
-      if (!e(this, r)) return;
-      const o = e(this, k).querySelector(".ng-container-body"), g = o.querySelector("table");
-      if (!g) return;
-      const c = e(this, r).track.getBoundingClientRect(), a = e(this, r).thumb.getBoundingClientRect();
-      let s = t;
-      s < 0 && (s = 0), s + a.width > c.width && (s = c.width - a.width), s = parseInt(s, 10), e(this, r).thumb.style.left = s + "px";
-      const p = g.scrollWidth - o.clientWidth, n = c.width - a.width;
-      return n > 0 && p > 0 && (o.scrollLeft = s / n * p), e(this, r).left.disabled = s <= 0, e(this, r).right.disabled = s >= n, s > 0 && s < n;
+    y(this, B, /* @__PURE__ */ f((t) => {
+      if (!e(this, c)) return;
+      const s = e(this, v).querySelector(".ng-container-body"), p = s.querySelector("table");
+      if (!p) return;
+      const r = e(this, c).track.getBoundingClientRect(), h = $(e(this, c).thumb, this).width() || 20;
+      let o = t;
+      o < 0 && (o = 0), o + h > r.width && (o = r.width - h), o = parseInt(o, 10), e(this, c).thumb.style.left = o + "px";
+      const u = p.scrollWidth - s.clientWidth, n = r.width - h;
+      return n > 0 && u > 0 && (s.scrollLeft = o / n * u), e(this, c).left.disabled = o <= 0, e(this, c).right.disabled = o >= n, o > 0 && o < n;
     }, "#thumbMoveTo"));
-    y(this, N, /* @__PURE__ */ f(() => {
-      const t = e(this, k).querySelector(".ng-container-body");
+    y(this, X, /* @__PURE__ */ f(() => {
+      const t = e(this, v).querySelector(".ng-container-body");
       t && t.addEventListener("scroll", () => {
-        this.refresh();
+        e(this, E) || this.refresh();
       });
-      const o = /* @__PURE__ */ f((c) => {
-        clearInterval(e(this, E)), clearInterval(e(this, R));
-        const a = e(this, r).track.getBoundingClientRect(), s = e(this, r).thumb.getBoundingClientRect();
-        e(this, A).call(this, s.x - a.x + c), S(this, E, setInterval(() => {
-          clearInterval(e(this, E)), S(this, R, setInterval(() => {
-            const p = e(this, r).track.getBoundingClientRect(), n = e(this, r).thumb.getBoundingClientRect();
-            e(this, A).call(this, n.x - p.x + c) || clearInterval(e(this, R));
+      const s = /* @__PURE__ */ f((r) => {
+        clearInterval(e(this, R)), clearInterval(e(this, A));
+        const h = e(this, c).track.getBoundingClientRect(), o = e(this, c).thumb.getBoundingClientRect();
+        e(this, B).call(this, o.x - h.x + r), S(this, R, setInterval(() => {
+          clearInterval(e(this, R)), S(this, A, setInterval(() => {
+            const u = e(this, c).track.getBoundingClientRect(), n = e(this, c).thumb.getBoundingClientRect();
+            e(this, B).call(this, n.x - u.x + r) || clearInterval(e(this, A));
           }, 10));
         }, 500));
-      }, "delayScroll"), g = /* @__PURE__ */ f(() => {
-        clearInterval(e(this, E)), clearInterval(e(this, R));
+      }, "delayScroll"), p = /* @__PURE__ */ f(() => {
+        clearInterval(e(this, R)), clearInterval(e(this, A));
       }, "clearTimer");
-      e(this, r).left.ontouchend = e(this, r).right.ontouchend = e(this, r).track.ontouchend = e(this, r).left.onmouseup = e(this, r).left.onmouseleave = e(this, r).right.onmouseup = e(this, r).right.onmouseleave = e(this, r).track.onmouseup = e(this, r).track.onmouseleave = g, $(e(this, r).left).on("mousedown", (c) => {
-        c.buttons == 1 && o(-10);
-      }), $(e(this, r).right).on("mousedown", (c) => {
-        c.buttons == 1 && o(10);
-      }), $(e(this, r).left).on("touchstart", (c) => {
-        o(-10);
-      }), $(e(this, r).right).on("touchstart", (c) => {
-        o(10);
-      }), $(e(this, r).track).on("mousedown", (c) => {
-        if (c.buttons != 1) return;
-        c.preventDefault();
-        const a = e(this, r).track.getBoundingClientRect(), s = e(this, r).thumb.getBoundingClientRect().width;
-        e(this, A).call(this, c.clientX - a.left - s / 2);
-      }), $(e(this, r).thumb).on("mousedown", (c) => {
-        S(this, T, !0), this.shiftX = c.clientX - e(this, r).thumb.getBoundingClientRect().left, document.addEventListener("mousemove", e(this, I));
-      }), document.addEventListener("mouseup", () => {
-        S(this, T, !1), g(), document.removeEventListener("mousemove", e(this, I));
+      e(this, c).left.ontouchend = e(this, c).right.ontouchend = e(this, c).track.ontouchend = e(this, c).left.onmouseup = e(this, c).left.onmouseleave = e(this, c).right.onmouseup = e(this, c).right.onmouseleave = e(this, c).track.onmouseup = e(this, c).track.onmouseleave = p, $(e(this, c).left).on("mousedown", (r) => {
+        r.buttons == 1 && s(-20);
+      }), $(e(this, c).right).on("mousedown", (r) => {
+        r.buttons == 1 && s(20);
+      }), $(e(this, c).track).on("mousedown", (r) => {
+        if (r.buttons != 1) return;
+        r.preventDefault();
+        const h = e(this, c).track.getBoundingClientRect(), o = $(e(this, c).thumb, this).width() || 20;
+        e(this, B).call(this, r.clientX - h.left - o / 2);
+      }), $(e(this, c).thumb).on("mousedown", (r) => {
+        if (r.buttons != 1) return;
+        r.stopPropagation(), r.preventDefault(), S(this, E, !0);
+        const h = e(this, c).thumb.getBoundingClientRect();
+        this.shiftX = r.clientX - h.left;
+        const o = /* @__PURE__ */ f((n) => {
+          if (!e(this, E)) return;
+          const b = e(this, c).track.getBoundingClientRect();
+          e(this, B).call(this, n.clientX - b.left - this.shiftX);
+        }, "onMouseMove"), u = /* @__PURE__ */ f(() => {
+          S(this, E, !1), p(), document.removeEventListener("mousemove", o), document.removeEventListener("mouseup", u), this.refresh();
+        }, "onMouseUp");
+        document.addEventListener("mousemove", o), document.addEventListener("mouseup", u);
       });
     }, "#init"));
-    y(this, I, /* @__PURE__ */ f((t) => {
-      if (!e(this, T)) return;
-      const o = e(this, r).track.getBoundingClientRect();
-      e(this, A).call(this, t.clientX - o.left - this.shiftX);
-    }, "#thumb_onMouseMove"));
   }
   connectedCallback() {
-    S(this, k, this.getRootNode().host), e(this, k) && (this.innerHTML = `
+    S(this, v, this.getRootNode().host), e(this, v) && (this.innerHTML = `
             <style>
                 nine-table-hscrollbar {
                     display: flex;
@@ -108,6 +116,7 @@ const U = class U extends HTMLElement {
                     background: #f9fafb;
                     box-sizing: border-box;
                     user-select: none;
+                    position: relative;
                 }
                 nine-table-hscrollbar button {
                     width: 16px;
@@ -119,6 +128,8 @@ const U = class U extends HTMLElement {
                     align-items: center;
                     justify-content: center;
                     padding: 0;
+                    flex-shrink: 0;
+                    z-index: 2;
                 }
                 nine-table-hscrollbar button:disabled {
                     opacity: 0.4;
@@ -143,94 +154,102 @@ const U = class U extends HTMLElement {
                     position: absolute;
                     top: 2px;
                     bottom: 2px;
-                    background: #d1d5db;
+                    left: 0px;
+                    width: 30px;
+                    background: #9ca3af;
                     border-radius: 4px;
                     cursor: pointer;
+                    z-index: 1;
                 }
                 nine-table-hscrollbar .ng-scroll-thumb:hover {
-                    background: #9ca3af;
+                    background: #6b7280;
                 }
             </style>
             <button class='ng-scroll-left' disabled><div class='ng-scroll-icon'></div></button>
             <div class='ng-scroll-track'><div class='ng-scroll-thumb'></div></div>
             <button class='ng-scroll-right'><div class='ng-scroll-icon'></div></button>
-        `, S(this, r, {
-      container: e(this, k).querySelector(".ng-container-body"),
+        `, S(this, c, {
+      container: e(this, v).querySelector(".ng-container-body"),
       track: this.querySelector(".ng-scroll-track"),
       thumb: this.querySelector(".ng-scroll-thumb"),
       left: this.querySelector(".ng-scroll-left"),
       right: this.querySelector(".ng-scroll-right")
-    }), e(this, N).call(this), setTimeout(() => this.refresh(), 0));
+    }), e(this, X).call(this), e(this, N).call(this), requestAnimationFrame(() => {
+      this.refresh();
+    }));
+  }
+  disconnectedCallback() {
+    e(this, T) && e(this, T).disconnect();
   }
 };
-k = new WeakMap(), T = new WeakMap(), r = new WeakMap(), E = new WeakMap(), R = new WeakMap(), A = new WeakMap(), N = new WeakMap(), I = new WeakMap(), f(U, "NineTableHScrollBar");
-let P = U;
-customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", P);
-var C, X;
-const B = class B extends HTMLElement {
+v = new WeakMap(), E = new WeakMap(), c = new WeakMap(), R = new WeakMap(), A = new WeakMap(), T = new WeakMap(), N = new WeakMap(), B = new WeakMap(), X = new WeakMap(), f(V, "NineTableHScrollBar");
+let D = V;
+customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", D);
+var C, O;
+const I = class I extends HTMLElement {
   constructor() {
     super();
     y(this, C, null);
     L(this, "init", /* @__PURE__ */ f((t) => {
       if (!t) return;
-      const o = /* @__PURE__ */ f((n) => {
-        const u = /* @__PURE__ */ f((h) => {
-          if (h.querySelector("colgroup")) return;
-          const d = h.querySelector("tbody tr") || h.querySelector("tr"), x = d ? d.querySelectorAll("th, td").length : 1, m = document.createElement("colgroup"), w = Math.max(Math.floor((h.clientWidth || 600) / x), 100);
-          for (let v = 0; v < x; v++) {
-            const Y = document.createElement("col");
-            Y.setAttribute("width", w), m.appendChild(Y);
+      const s = /* @__PURE__ */ f((n) => {
+        const b = /* @__PURE__ */ f((l) => {
+          if (l.querySelector("colgroup")) return;
+          const d = l.querySelector("tbody tr") || l.querySelector("tr"), x = d ? d.querySelectorAll("th, td").length : 1, m = document.createElement("colgroup"), k = Math.max(Math.floor((l.clientWidth || 600) / x), 100);
+          for (let w = 0; w < x; w++) {
+            const P = document.createElement("col");
+            P.setAttribute("width", k), m.appendChild(P);
           }
-          h.prepend(m);
-        }, "ensureColgroup"), l = /* @__PURE__ */ f((h) => {
-          if (h.querySelector("thead")) return;
-          const d = document.createElement("thead"), x = h.querySelector("colgroup");
-          x ? x.after(d) : h.prepend(d);
+          l.prepend(m);
+        }, "ensureColgroup"), a = /* @__PURE__ */ f((l) => {
+          if (l.querySelector("thead")) return;
+          const d = document.createElement("thead"), x = l.querySelector("colgroup");
+          x ? x.after(d) : l.prepend(d);
         }, "ensureThead");
-        return u(n), l(n), n.classList.add("nine-table-element"), n;
-      }, "initializeTable"), g = t.cloneNode(!0);
-      S(this, C, o(g)), e(this, C).style.display = "table";
-      const c = this.querySelector(".ng-container-left"), a = this.querySelector(".ng-container-body"), s = this.querySelector(".ng-container-right"), p = /* @__PURE__ */ f((n, u, l = !1) => {
-        const h = n.cloneNode(!0), d = Array.from(h.querySelectorAll("colgroup col")), x = [];
-        return d.forEach((m, w) => {
-          const v = m.getAttribute("fixed");
-          (l ? !v || v === "" : v === u) || x.push(w);
+        return b(n), a(n), n.classList.add("nine-table-element"), n;
+      }, "initializeTable"), p = t.cloneNode(!0);
+      S(this, C, s(p)), e(this, C).style.display = "table";
+      const r = this.querySelector(".ng-container-left"), h = this.querySelector(".ng-container-body"), o = this.querySelector(".ng-container-right"), u = /* @__PURE__ */ f((n, b, a = !1) => {
+        const l = n.cloneNode(!0), d = Array.from(l.querySelectorAll("colgroup col")), x = [];
+        return d.forEach((m, k) => {
+          const w = m.getAttribute("fixed");
+          (a ? !w || w === "" : w === b) || x.push(k);
         }), x.reverse().forEach((m) => {
-          d[m] && d[m].remove(), h.querySelectorAll("tr").forEach((w) => {
-            const v = w.querySelectorAll("th, td");
-            v[m] && v[m].remove();
+          d[m] && d[m].remove(), l.querySelectorAll("tr").forEach((k) => {
+            const w = k.querySelectorAll("th, td");
+            w[m] && w[m].remove();
           });
-        }), h;
+        }), l;
       }, "filterTableByFixed");
-      if (a) {
-        const n = p(e(this, C), null, !0);
-        a.innerHTML = "", a.appendChild(n);
+      if (h) {
+        const n = u(e(this, C), null, !0);
+        h.innerHTML = "", h.appendChild(n);
       }
-      if (c) {
-        const n = p(e(this, C), "left", !1);
-        let u = 0;
-        n.querySelectorAll("col").forEach((h) => {
-          const d = parseInt(h.getAttribute("width"), 10);
-          isNaN(d) || (u += d);
-        }), c.innerHTML = "", c.appendChild(n);
-        const l = u > 0 ? u : 0;
-        c.style.flex = `0 0 ${l}px`, c.style.width = `${l}px`;
+      if (r) {
+        const n = u(e(this, C), "left", !1);
+        let b = 0;
+        n.querySelectorAll("col").forEach((l) => {
+          const d = parseInt(l.getAttribute("width"), 10);
+          isNaN(d) || (b += d);
+        }), r.innerHTML = "", r.appendChild(n);
+        const a = b > 0 ? b : 0;
+        r.style.flex = `0 0 ${a}px`, r.style.width = `${a}px`;
       }
-      if (s) {
-        const n = p(e(this, C), "right", !1);
-        let u = 0;
-        n.querySelectorAll("col").forEach((h) => {
-          const d = parseInt(h.getAttribute("width"), 10);
-          isNaN(d) || (u += d);
-        }), s.innerHTML = "", s.appendChild(n);
-        const l = u > 0 ? u : 0;
-        s.style.flex = `0 0 ${l}px`, s.style.width = `${l}px`;
+      if (o) {
+        const n = u(e(this, C), "right", !1);
+        let b = 0;
+        n.querySelectorAll("col").forEach((l) => {
+          const d = parseInt(l.getAttribute("width"), 10);
+          isNaN(d) || (b += d);
+        }), o.innerHTML = "", o.appendChild(n);
+        const a = b > 0 ? b : 0;
+        o.style.flex = `0 0 ${a}px`, o.style.width = `${a}px`;
       }
-      if (a) {
+      if (h) {
         const n = this.getRowCount();
-        a.style.overflowY = n > 10 ? "auto" : "hidden", a.addEventListener("scroll", () => {
-          const u = this.querySelector("nine-table-hscrollbar");
-          u && typeof u.refresh == "function" && u.refresh();
+        h.style.overflowY = n > 10 ? "auto" : "hidden", h.addEventListener("scroll", () => {
+          const b = this.querySelector("nine-table-hscrollbar");
+          b && typeof b.refresh == "function" && b.refresh();
         });
       }
       setTimeout(() => {
@@ -240,15 +259,15 @@ const B = class B extends HTMLElement {
     }, "init"));
     L(this, "getRowCount", /* @__PURE__ */ f(() => e(this, C) ? e(this, C).querySelectorAll("tbody tr").length : 0, "getRowCount"));
     L(this, "scrollToX", /* @__PURE__ */ f((t) => {
-      const o = this.querySelector(".ng-container-body");
-      o && (o.scrollLeft = t);
+      const s = this.querySelector(".ng-container-body");
+      s && (s.scrollLeft = t);
     }, "scrollToX"));
     L(this, "scrollToY", /* @__PURE__ */ f((t) => {
-      const o = this.querySelector(".ng-container-body");
-      o && (o.scrollTop = t);
+      const s = this.querySelector(".ng-container-body");
+      s && (s.scrollTop = t);
     }, "scrollToY"));
-    y(this, X, /* @__PURE__ */ f(() => {
-      const t = B.SCROLLBAR_SIZE;
+    y(this, O, /* @__PURE__ */ f(() => {
+      const t = I.SCROLLBAR_SIZE;
       this.innerHTML = `
             <style>
                 nine-table-sheet {
@@ -365,68 +384,68 @@ const B = class B extends HTMLElement {
     }, "#render"));
   }
   connectedCallback() {
-    e(this, X).call(this);
+    e(this, O).call(this);
   }
   disconnectedCallback() {
     this.innerHTML = "", z.log("NineTableSheet destroyed.");
   }
 };
-C = new WeakMap(), X = new WeakMap(), f(B, "NineTableSheet"), L(B, "SCROLLBAR_SIZE", 16);
-let Z = B;
+C = new WeakMap(), O = new WeakMap(), f(I, "NineTableSheet"), L(I, "SCROLLBAR_SIZE", 16);
+let Z = I;
 customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", Z);
 var j;
-const V = class V extends HTMLElement {
+const _ = class _ extends HTMLElement {
   constructor() {
     super();
     y(this, j, /* @__PURE__ */ f(() => {
       const t = this.querySelector(".nine-tab-bar");
-      t && (t.addEventListener("click", (o) => {
-        const g = o.target.closest(".nine-tab-item");
-        if (!g) return;
-        const c = o.ctrlKey || o.metaKey || o.shiftKey, a = parseInt(g.dataset.index, 10);
-        this.switchSheet(a, c);
+      t && (t.addEventListener("click", (s) => {
+        const p = s.target.closest(".nine-tab-item");
+        if (!p) return;
+        const r = s.ctrlKey || s.metaKey || s.shiftKey, h = parseInt(p.dataset.index, 10);
+        this.switchSheet(h, r);
       }), this.switchSheet(0, !1));
     }, "#init"));
-    L(this, "switchSheet", /* @__PURE__ */ f((t, o = !1) => {
-      const g = /* @__PURE__ */ f(() => {
-        const l = this.querySelector("nine-table-sheets-body");
-        l.querySelectorAll("nine-splitter").forEach((d) => {
-          const x = parseInt(d.dataset.splitIndex, 10), m = l.querySelector(`nine-table-sheet[data-index="${x - 1}"]`), w = l.querySelector(`nine-table-sheet[data-index="${x}"]`);
-          m && w && m.classList.contains("active") && w.classList.contains("active") ? d.classList.add("active") : d.classList.remove("active");
+    L(this, "switchSheet", /* @__PURE__ */ f((t, s = !1) => {
+      const p = /* @__PURE__ */ f(() => {
+        const a = this.querySelector("nine-table-sheets-body");
+        a.querySelectorAll("nine-splitter").forEach((d) => {
+          const x = parseInt(d.dataset.splitIndex, 10), m = a.querySelector(`nine-table-sheet[data-index="${x - 1}"]`), k = a.querySelector(`nine-table-sheet[data-index="${x}"]`);
+          m && k && m.classList.contains("active") && k.classList.contains("active") ? d.classList.add("active") : d.classList.remove("active");
         });
-      }, "updateSplitters"), c = this.querySelector(".nine-tab-bar"), a = this.querySelector("nine-table-sheets-body"), s = c.querySelectorAll(".nine-tab-item"), p = a.querySelectorAll("nine-table-sheet");
-      if (!s[t]) return;
-      if (!o)
-        s.forEach((l, h) => {
-          l.classList.toggle("active", h === t);
-          const d = a.querySelector(`nine-table-sheet[data-index="${h}"]`);
+      }, "updateSplitters"), r = this.querySelector(".nine-tab-bar"), h = this.querySelector("nine-table-sheets-body"), o = r.querySelectorAll(".nine-tab-item"), u = h.querySelectorAll("nine-table-sheet");
+      if (!o[t]) return;
+      if (!s)
+        o.forEach((a, l) => {
+          a.classList.toggle("active", l === t);
+          const d = h.querySelector(`nine-table-sheet[data-index="${l}"]`);
           d && (d.style.flex = "");
-        }), p.forEach((l, h) => {
-          l.classList.toggle("active", h === t);
+        }), u.forEach((a, l) => {
+          a.classList.toggle("active", l === t);
         });
       else {
-        const l = s[t], h = c.querySelectorAll(".nine-tab-item.active");
-        if (l.classList.contains("active") && h.length <= 1)
+        const a = o[t], l = r.querySelectorAll(".nine-tab-item.active");
+        if (a.classList.contains("active") && l.length <= 1)
           return;
-        l.classList.toggle("active");
-        const d = a.querySelector(`nine-table-sheet[data-index="${t}"]`);
+        a.classList.toggle("active");
+        const d = h.querySelector(`nine-table-sheet[data-index="${t}"]`);
         d && (d.classList.toggle("active"), d.classList.contains("active") || (d.style.flex = ""));
       }
-      const n = Array.from(a.querySelectorAll("nine-table-sheet.active"));
+      const n = Array.from(h.querySelectorAll("nine-table-sheet.active"));
       if (n.length > 1) {
-        const l = 1 / n.length;
-        n.forEach((h) => {
-          (!h.style.flex || h.style.flex === "1 1 100%") && (h.style.flex = `${l} ${l} 0px`);
+        const a = 1 / n.length;
+        n.forEach((l) => {
+          (!l.style.flex || l.style.flex === "1 1 100%") && (l.style.flex = `${a} ${a} 0px`);
         });
       } else
-        n.forEach((l) => {
-          l.style.flex = "1 1 100%";
+        n.forEach((a) => {
+          a.style.flex = "1 1 100%";
         });
-      g();
-      const u = a.querySelector("nine-table-sheet.active");
-      if (u && typeof u.getRowCount == "function") {
-        const l = this.querySelector("#row-count");
-        l && (l.textContent = u.getRowCount().toLocaleString());
+      p();
+      const b = h.querySelector("nine-table-sheet.active");
+      if (b && typeof b.getRowCount == "function") {
+        const a = this.querySelector("#row-count");
+        a && (a.textContent = b.getRowCount().toLocaleString());
       }
     }, "switchSheet"));
   }
@@ -434,32 +453,32 @@ const V = class V extends HTMLElement {
     e(this, j).call(this);
   }
 };
-j = new WeakMap(), f(V, "NineTableSheets");
-let D = V;
-customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets", D);
-var q, H, O, M, K;
-const _ = class _ {
+j = new WeakMap(), f(_, "NineTableSheets");
+let U = _;
+customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets", U);
+var q, M, F, H, K;
+const ee = class ee {
   constructor(i) {
     y(this, q);
-    y(this, H, null);
-    y(this, O, /* @__PURE__ */ f(() => {
+    y(this, M, null);
+    y(this, F, /* @__PURE__ */ f(() => {
       const i = e(this, q).host;
-      i && (S(this, H, new ResizeObserver((t) => {
-        for (let o of t)
-          i.getAttribute("auto-height") === "true" && e(this, M).call(this, i);
-      })), e(this, H).observe(i));
+      i && (S(this, M, new ResizeObserver((t) => {
+        for (let s of t)
+          i.getAttribute("auto-height") === "true" && e(this, H).call(this, i);
+      })), e(this, M).observe(i));
     }, "#observeResize"));
-    y(this, M, /* @__PURE__ */ f((i) => {
-      var w, v;
-      const t = (w = i.shadowRoot) == null ? void 0 : w.querySelector("nine-table-sheet.active");
+    y(this, H, /* @__PURE__ */ f((i) => {
+      var k, w;
+      const t = (k = i.shadowRoot) == null ? void 0 : k.querySelector("nine-table-sheet.active");
       if (!t) return;
-      const o = ((v = t.getRowCount) == null ? void 0 : v.call(t)) || 0, g = parseInt(i.getAttribute("max-display-row"), 10) || 10, c = Math.min(o, g), a = t.querySelector("tbody tr") || t.querySelector("tr"), s = a ? a.getBoundingClientRect().height : 32, p = e(this, q).querySelector("nine-table-header"), n = e(this, q).querySelector("nine-table-sheets-footer"), u = p ? p.getBoundingClientRect().height : 40, l = n ? n.getBoundingClientRect().height : 32, d = u + l + 16, x = c * s + d;
-      i.style.height = `${x}px`, i.style.maxHeight = `${g * s + d}px`;
+      const s = ((w = t.getRowCount) == null ? void 0 : w.call(t)) || 0, p = parseInt(i.getAttribute("max-display-row"), 10) || 10, r = Math.min(s, p), h = t.querySelector("tbody tr") || t.querySelector("tr"), o = h ? h.getBoundingClientRect().height : 32, u = e(this, q).querySelector("nine-table-header"), n = e(this, q).querySelector("nine-table-sheets-footer"), b = u ? u.getBoundingClientRect().height : 40, a = n ? n.getBoundingClientRect().height : 32, d = b + a + 16, x = r * o + d;
+      i.style.height = `${x}px`, i.style.maxHeight = `${p * o + d}px`;
       const m = e(this, q).querySelector("nine-table-sheets-body");
-      m && (m.style.overflowY = o > g ? "auto" : "hidden");
+      m && (m.style.overflowY = s > p ? "auto" : "hidden");
     }, "#applyAutoHeight"));
     y(this, K, /* @__PURE__ */ f(() => {
-      const i = e(this, q).host, o = Array.from(i.children).filter((p) => p.tagName === "TABLE"), g = i.getAttribute("auto-height") === "true", c = o.map((p, n) => `<nine-table-sheet class="${n === 0 ? "active" : ""}" data-index="${n}"></nine-table-sheet>`).join(""), a = o.map((p, n) => `<div class="nine-tab-item ${n === 0 ? "active" : ""}" data-index="${n}">Sheet ${n + 1}</div>`).join("");
+      const i = e(this, q).host, s = Array.from(i.children).filter((u) => u.tagName === "TABLE"), p = i.getAttribute("auto-height") === "true", r = s.map((u, n) => `<nine-table-sheet class="${n === 0 ? "active" : ""}" data-index="${n}"></nine-table-sheet>`).join(""), h = s.map((u, n) => `<div class="nine-tab-item ${n === 0 ? "active" : ""}" data-index="${n}">Sheet ${n + 1}</div>`).join("");
       e(this, q).innerHTML = `
             <style>
                 :host { 
@@ -467,7 +486,7 @@ const _ = class _ {
                     flex-direction: column; 
                     position: relative; 
                     overflow: hidden; 
-                    height: ${g ? "auto" : "100%"}; 
+                    height: ${p ? "auto" : "100%"}; 
                     background: #fff; 
                 }
                 nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
@@ -548,9 +567,9 @@ const _ = class _ {
             <nine-table-body>
                 <nine-table-summary></nine-table-summary>
                 <nine-table-sheets>
-                    <nine-table-sheets-body>${c}</nine-table-sheets-body>
+                    <nine-table-sheets-body>${r}</nine-table-sheets-body>
                     <nine-table-sheets-footer>
-                        <div class="nine-tab-bar">${a}</div>
+                        <div class="nine-tab-bar">${h}</div>
                         <div class="sheets-counter">Total : <span id="row-count">0</span></div>
                     </nine-table-sheets-footer>
                 </nine-table-sheets>
@@ -558,20 +577,20 @@ const _ = class _ {
             </nine-table-body>
             <nine-table-footer></nine-table-footer>
         `;
-      const s = e(this, q).querySelectorAll("nine-table-sheet");
-      s == null || s.forEach((p, n) => {
-        o[n] && setTimeout(() => {
-          p.init(o[n]), g && e(this, M).call(this, i);
+      const o = e(this, q).querySelectorAll("nine-table-sheet");
+      o == null || o.forEach((u, n) => {
+        s[n] && setTimeout(() => {
+          u.init(s[n]), p && e(this, H).call(this, i);
         });
       });
     }, "#render"));
-    S(this, q, i), e(this, K).call(this), e(this, O).call(this);
+    S(this, q, i), e(this, K).call(this), e(this, F).call(this);
   }
 };
-q = new WeakMap(), H = new WeakMap(), O = new WeakMap(), M = new WeakMap(), K = new WeakMap(), f(_, "LayoutManager");
-let G = _;
+q = new WeakMap(), M = new WeakMap(), F = new WeakMap(), H = new WeakMap(), K = new WeakMap(), f(ee, "LayoutManager");
+let G = ee;
 var W;
-const ee = class ee extends HTMLElement {
+const te = class te extends HTMLElement {
   constructor() {
     super();
     y(this, W, !1);
@@ -584,7 +603,7 @@ const ee = class ee extends HTMLElement {
     z.log("NineTable disconnected.");
   }
 };
-W = new WeakMap(), f(ee, "NineTable");
-let J = ee;
+W = new WeakMap(), f(te, "NineTable");
+let J = te;
 customElements.get("nine-table") || customElements.define("nine-table", J);
 //# sourceMappingURL=nine-table.js.map