@ninebone/table 0.0.315 → 0.0.316

package/dist/nine-table.js

@@ -23,7 +23,7 @@ const Vt = class Vt extends oe.constructor {
 c(Vt, "Trace");
 let Mt = Vt;
 const tt = new Mt();
-var C, M, y, D, N, P, dt, B, ft;
+var C, M, y, D, B, N, dt, P, ft;
 const Xt = class Xt extends HTMLElement {
   constructor() {
     super();
@@ -31,14 +31,14 @@ const Xt = class Xt extends HTMLElement {
     h(this, M, !1);
     h(this, y);
     h(this, D);
+    h(this, B);
     h(this, N);
-    h(this, P);
     h(this, dt, /* @__PURE__ */ c(() => {
       if (!t(this, C)) return;
       const e = t(this, C).querySelector(".ng-container-body");
-      e && (g(this, P, new ResizeObserver(() => {
+      e && (g(this, N, new ResizeObserver(() => {
         this.refresh();
-      })), t(this, P).observe(e));
+      })), t(this, N).observe(e));
     }, "#observeResize"));
     w(this, "refresh", /* @__PURE__ */ c(() => {
       if (!t(this, C) || !t(this, y) || t(this, M)) return;
@@ -61,7 +61,7 @@ const Xt = class Xt extends HTMLElement {
       const E = d - f;
       m > E && (m = E), r.style.left = `${m}px`, tt.log(m), t(this, y).left.disabled = m === 0, t(this, y).right.disabled = m >= E - 1;
     }, "refresh"));
-    h(this, B, /* @__PURE__ */ c((e) => {
+    h(this, P, /* @__PURE__ */ c((e) => {
       if (!t(this, y)) return !1;
       const s = t(this, y).container, o = s.querySelector("table");
       if (!o) return !1;
@@ -75,16 +75,16 @@ const Xt = class Xt extends HTMLElement {
     }, "#thumbMoveTo"));
     h(this, ft, /* @__PURE__ */ c(() => {
       const e = /* @__PURE__ */ c((o) => {
-        clearInterval(t(this, D)), clearInterval(t(this, N));
+        clearInterval(t(this, D)), clearInterval(t(this, B));
         const r = parseInt(t(this, y).thumb.style.left || 0, 10);
-        t(this, B).call(this, r + o), g(this, D, setInterval(() => {
-          clearInterval(t(this, D)), g(this, N, setInterval(() => {
+        t(this, P).call(this, r + o), g(this, D, setInterval(() => {
+          clearInterval(t(this, D)), g(this, B, setInterval(() => {
             const n = parseInt(t(this, y).thumb.style.left || 0, 10);
-            t(this, B).call(this, n + o) || clearInterval(t(this, N));
+            t(this, P).call(this, n + o) || clearInterval(t(this, B));
           }, 50));
         }, 500));
       }, "delayScroll"), s = /* @__PURE__ */ c(() => {
-        clearInterval(t(this, D)), clearInterval(t(this, N));
+        clearInterval(t(this, D)), clearInterval(t(this, B));
       }, "clearTimer");
       ["mouseup", "mouseleave", "touchend"].forEach((o) => {
         t(this, y).left.addEventListener(o, s), t(this, y).right.addEventListener(o, s), t(this, y).track.addEventListener(o, s);
@@ -96,14 +96,14 @@ const Xt = class Xt extends HTMLElement {
         if (o.button !== 0) return;
         o.preventDefault();
         const r = t(this, y).track.getBoundingClientRect(), n = t(this, y).thumb.clientWidth;
-        t(this, B).call(this, o.clientX - r.left - n / 2);
+        t(this, P).call(this, o.clientX - r.left - n / 2);
       }), t(this, y).thumb.addEventListener("mousedown", (o) => {
         if (o.button !== 0) return;
         o.stopPropagation(), o.preventDefault(), g(this, M, !0), this.shiftX = o.clientX - t(this, y).thumb.getBoundingClientRect().left;
         const r = /* @__PURE__ */ c((l) => {
           if (!t(this, M)) return;
           const a = t(this, y).track.getBoundingClientRect();
-          t(this, B).call(this, l.clientX - a.left - this.shiftX);
+          t(this, P).call(this, l.clientX - a.left - this.shiftX);
         }, "onMouseMove"), n = /* @__PURE__ */ c(() => {
           g(this, M, !1), s(), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", n), this.refresh();
         }, "onMouseUp");
@@ -195,10 +195,10 @@ const Xt = class Xt extends HTMLElement {
     e();
   }
   disconnectedCallback() {
-    t(this, P) && t(this, P).disconnect();
+    t(this, N) && t(this, N).disconnect();
   }
 };
-C = new WeakMap(), M = new WeakMap(), y = new WeakMap(), D = new WeakMap(), N = new WeakMap(), P = new WeakMap(), dt = new WeakMap(), B = new WeakMap(), ft = new WeakMap(), c(Xt, "NineTableHScrollBar");
+C = new WeakMap(), M = new WeakMap(), y = new WeakMap(), D = new WeakMap(), B = new WeakMap(), N = new WeakMap(), dt = new WeakMap(), P = new WeakMap(), ft = new WeakMap(), c(Xt, "NineTableHScrollBar");
 let It = Xt;
 customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", It);
 var Y, I, S, it, st, ut;
@@ -244,10 +244,10 @@ const Ut = class Ut extends HTMLElement {
           if (!t(this, I)) return;
           const l = t(this, S).track.getBoundingClientRect(), a = t(this, S).thumb.clientHeight, f = l.height - a, u = n.clientY - t(this, it), b = e.clientHeight, m = e.querySelector("table");
           tt.log(m), tt.log(m.scrollHeight);
-          const k = m.scrollHeight - b;
-          if (f > 0 && k > 0) {
-            const z = u / f * k;
-            e.scrollTop = t(this, st) + z;
+          const T = m.scrollHeight - b;
+          if (f > 0 && T > 0) {
+            const O = u / f * T;
+            e.scrollTop = t(this, st) + O;
           }
           this.refresh();
         }, "onMouseMove"), r = /* @__PURE__ */ c(() => {
@@ -410,8 +410,8 @@ bt = new WeakMap(), K = new WeakMap(), c(H, "TableCompiler"), h(H, bt, /* @__PUR
         }
       const b = u.rowSpan || 1, m = u.colSpan || 1;
       for (let E = 0; E < b; E++)
-        for (let k = 0; k < m; k++)
-          d + E < r && f + k < n && (l[d + E][f + k] = E === 0 && k === 0 ? "1" : "0");
+        for (let T = 0; T < m; T++)
+          d + E < r && f + T < n && (l[d + E][f + T] = E === 0 && T === 0 ? "1" : "0");
     });
   }), s.forEach((a) => {
     const d = a.sectionRowIndex;
@@ -560,8 +560,8 @@ const Kt = class Kt {
         const a = l.querySelector("tbody");
         if (!a) return;
         Array.from(a.querySelectorAll("tr:not(.nodata)")).forEach((f, u) => {
-          var E, k, z, Qt;
-          const b = s + Math.floor(u / o), m = (typeof t(this, p).getData == "function" ? t(this, p).getData(b) : null) ?? (typeof ((E = t(this, p).data) == null ? void 0 : E.get) == "function" ? t(this, p).data.get(b) : null) ?? ((z = (k = t(this, p).dataManager) == null ? void 0 : k.rawRecords) == null ? void 0 : z[b]) ?? ((Qt = t(this, p).data) == null ? void 0 : Qt[b]) ?? { _index: b };
+          var E, T, O, Qt;
+          const b = s + Math.floor(u / o), m = (typeof t(this, p).getData == "function" ? t(this, p).getData(b) : null) ?? (typeof ((E = t(this, p).data) == null ? void 0 : E.get) == "function" ? t(this, p).data.get(b) : null) ?? ((O = (T = t(this, p).dataManager) == null ? void 0 : T.rawRecords) == null ? void 0 : O[b]) ?? ((Qt = t(this, p).data) == null ? void 0 : Qt[b]) ?? { _index: b };
           f.style.display = "", t(this, xt).call(this, f, m, b);
         });
       });
@@ -586,7 +586,7 @@ const Kt = class Kt {
   }
 };
 p = new WeakMap(), _ = new WeakMap(), R = new WeakMap(), $ = new WeakMap(), V = new WeakMap(), j = new WeakMap(), gt = new WeakMap(), yt = new WeakMap(), nt = new WeakMap(), ot = new WeakMap(), pt = new WeakMap(), mt = new WeakMap(), rt = new WeakMap(), F = new WeakMap(), xt = new WeakMap(), c(Kt, "RowManager");
-let Ot = Kt;
+let zt = Kt;
 var Z, G, vt, wt, St, Et, Rt;
 const et = class et extends HTMLElement {
   constructor() {
@@ -617,10 +617,16 @@ const et = class et extends HTMLElement {
       });
     }, "#updateContainerWidths"));
     w(this, "generate", /* @__PURE__ */ c((e) => {
-      e && (g(this, Z, Wt.compile(e)), t(this, Z).style.display = "table", t(this, vt).call(this), t(this, wt).call(this), t(this, G).initialize(), setTimeout(() => {
-        var s;
-        (s = this.querySelector("nine-table-hscrollbar")) == null || s.refresh();
-      }, 0));
+      var o;
+      if (!e) return;
+      g(this, Z, Wt.compile(e)), t(this, Z).style.display = "table", t(this, vt).call(this), t(this, wt).call(this);
+      const s = ((o = this.querySelector("thead")) == null ? void 0 : o.getBoundingClientRect().height) || 30;
+      this.querySelectorAll("tbody.fixed-tbody").forEach((r) => {
+        r.style.top = `${s}px`;
+      }), t(this, G).initialize(), setTimeout(() => {
+        var r;
+        (r = this.querySelector("nine-table-hscrollbar")) == null || r.refresh();
+      }, 0);
     }, "generate"));
     /**
      * 🎯 마스터 테이블을 기반으로 특정 fixed 타입 영역만 남기는 분할 헬퍼
@@ -629,7 +635,7 @@ const et = class et extends HTMLElement {
       const o = e.cloneNode(!0), r = o.querySelector("tbody");
       if (r) {
         const n = document.createElement("tbody");
-        n.className = "ng-fixed-tbody", r.className = "ng-scroll-tbody", r.before(n);
+        n.className = "fixed-tbody", r.className = "bindable-tbody", r.before(n);
       }
       return s === "left" ? o.querySelectorAll("col, th, td, tfoot td, tfoot th").forEach((n) => {
         n.getAttribute("fixed") !== "left" && n.remove();
@@ -693,6 +699,13 @@ const et = class et extends HTMLElement {
                     position: sticky;
                     top: 0;
                 }
+                nine-table-sheet tbody.fixed-tbody {
+                    position: sticky;
+                    --top: 25px; /* 헤더(thead)의 높이만큼 top 값을 주거나 헤더 바로 밑에 오도록 설정 */
+                    z-index: 4;
+                    background-color: red;
+                    height: 100px;
+                }
                 
     
                 nine-table-sheet .ng-container-body {
@@ -794,7 +807,7 @@ const et = class et extends HTMLElement {
             </div>
         `;
     }, "#render"));
-    g(this, G, new Ot(this));
+    g(this, G, new zt(this));
   }
   connectedCallback() {
     t(this, Et).call(this);
@@ -806,11 +819,11 @@ const et = class et extends HTMLElement {
 Z = new WeakMap(), G = new WeakMap(), vt = new WeakMap(), wt = new WeakMap(), St = new WeakMap(), Et = new WeakMap(), Rt = new WeakMap(), c(et, "NineTableSheet"), w(et, "SCROLLBAR_SIZE", 16);
 let ht = et;
 customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", ht);
-var Tt, lt;
+var kt, lt;
 const jt = class jt extends HTMLElement {
   constructor() {
     super();
-    h(this, Tt, /* @__PURE__ */ c(() => {
+    h(this, kt, /* @__PURE__ */ c(() => {
       var e;
       (e = this.querySelector(".nine-tab-bar")) == null || e.addEventListener("click", (s) => {
         var n;
@@ -824,8 +837,8 @@ const jt = class jt extends HTMLElement {
         Array.from(this.querySelectorAll("nine-splitter")).forEach((m) => m.style.setProperty("display", "none"));
         const b = f.filter((m) => m.classList.contains("active"));
         b.length < 2 || b.forEach((m) => {
-          const E = parseInt(m.getAttribute("data-index"), 10), k = this.querySelector(`nine-splitter[data-split-index="${E}"]`), z = f[E + 1];
-          k && z && z.classList.contains("active") && k.style.setProperty("display", "flex");
+          const E = parseInt(m.getAttribute("data-index"), 10), T = this.querySelector(`nine-splitter[data-split-index="${E}"]`), O = f[E + 1];
+          T && O && O.classList.contains("active") && T.style.setProperty("display", "flex");
         });
       }, "updateSplitters"), r = this.querySelector(".nine-tab-bar"), n = this.querySelector("nine-table-sheets-body"), l = r.querySelectorAll(".nine-tab-item"), a = n.querySelectorAll("nine-table-sheet");
       if (!l[e]) return;
@@ -851,35 +864,35 @@ const jt = class jt extends HTMLElement {
     }, "#switchSheet"));
   }
   connectedCallback() {
-    t(this, Tt).call(this);
+    t(this, kt).call(this);
   }
 };
-Tt = new WeakMap(), lt = new WeakMap(), c(jt, "NineTableSheets");
-let zt = jt;
-customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets", zt);
-var T, kt, ct, qt;
+kt = new WeakMap(), lt = new WeakMap(), c(jt, "NineTableSheets");
+let Ot = jt;
+customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets", Ot);
+var k, Tt, ct, qt;
 const Ft = class Ft {
   constructor(i) {
-    h(this, T);
-    h(this, kt, /* @__PURE__ */ c(() => {
+    h(this, k);
+    h(this, Tt, /* @__PURE__ */ c(() => {
       t(this, qt).call(this), new ResizeObserver((i) => {
         for (let e of i)
-          t(this, T).getAttribute("auto-height") === "true" && t(this, ct).call(this);
-      }).observe(t(this, T));
+          t(this, k).getAttribute("auto-height") === "true" && t(this, ct).call(this);
+      }).observe(t(this, k));
     }, "#init"));
     h(this, ct, /* @__PURE__ */ c(() => {
       var a, d;
-      const i = Array.from(t(this, T).shadowRoot.querySelectorAll("nine-table-sheet.active"));
+      const i = Array.from(t(this, k).shadowRoot.querySelectorAll("nine-table-sheet.active"));
       if (i.length === 0) return;
-      const e = parseInt(t(this, T).getAttribute("max-display-row"), 10) || 10, s = Math.max(...i.map((f) => f.getRowHeight())), o = (a = t(this, T).shadowRoot.querySelector("nine-table-header")) == null ? void 0 : a.getBoundingClientRect().height, r = (d = t(this, T).shadowRoot.querySelector("nine-table-sheets-footer")) == null ? void 0 : d.getBoundingClientRect().height, n = ht.SCROLLBAR_SIZE, l = e * s + o + r + n;
-      t(this, T).style.height = `${l}px`;
+      const e = parseInt(t(this, k).getAttribute("max-display-row"), 10) || 10, s = Math.max(...i.map((f) => f.getRowHeight())), o = (a = t(this, k).shadowRoot.querySelector("nine-table-header")) == null ? void 0 : a.getBoundingClientRect().height, r = (d = t(this, k).shadowRoot.querySelector("nine-table-sheets-footer")) == null ? void 0 : d.getBoundingClientRect().height, n = ht.SCROLLBAR_SIZE, l = e * s + o + r + n;
+      t(this, k).style.height = `${l}px`;
     }, "#applyAutoHeight"));
     h(this, qt, /* @__PURE__ */ c(() => {
-      const e = Array.from(t(this, T).children).filter((a) => a.tagName === "TABLE"), s = t(this, T).getAttribute("auto-height") === "true", o = e.length, r = e.map((a, d) => {
+      const e = Array.from(t(this, k).children).filter((a) => a.tagName === "TABLE"), s = t(this, k).getAttribute("auto-height") === "true", o = e.length, r = e.map((a, d) => {
         const u = `<nine-table-sheet class="${d === 0 ? "active" : ""}" data-index="${d}"></nine-table-sheet>`, b = d < o - 1 ? `<nine-splitter class="h" data-split-index="${d}"></nine-splitter>` : "";
         return u + b;
       }).join(""), n = e.map((a, d) => `<div class="nine-tab-item ${d === 0 ? "active" : ""}" data-index="${d}">Sheet ${d + 1}</div>`).join("");
-      t(this, T).shadowRoot.innerHTML = `
+      t(this, k).shadowRoot.innerHTML = `
             <style>
                 :host { 
                     display: flex; 
@@ -978,17 +991,17 @@ const Ft = class Ft {
             </nine-table-body>
             <nine-table-footer></nine-table-footer>
         `;
-      const l = t(this, T).shadowRoot.querySelectorAll("nine-table-sheet");
+      const l = t(this, k).shadowRoot.querySelectorAll("nine-table-sheet");
       l == null || l.forEach((a, d) => {
         e[d] && setTimeout(() => {
           a.generate(e[d]), s && t(this, ct).call(this);
         });
       });
     }, "#render"));
-    g(this, T, i), t(this, kt).call(this);
+    g(this, k, i), t(this, Tt).call(this);
   }
 };
-T = new WeakMap(), kt = new WeakMap(), ct = new WeakMap(), qt = new WeakMap(), c(Ft, "LayoutManager");
+k = new WeakMap(), Tt = new WeakMap(), ct = new WeakMap(), qt = new WeakMap(), c(Ft, "LayoutManager");
 let Dt = Ft;
 var W, X;
 const Zt = class Zt {
@@ -1012,8 +1025,8 @@ const Zt = class Zt {
   }
 };
 W = new WeakMap(), X = new WeakMap(), c(Zt, "ngRow");
-let Nt = Zt;
-var q, v, A, J, At, O, Lt, at, Ht, Ct, Q;
+let Bt = Zt;
+var q, v, A, J, At, z, Lt, at, Ht, Ct, Q;
 const L = class L {
   constructor(i, e) {
     h(this, q);
@@ -1021,15 +1034,15 @@ const L = class L {
     h(this, A, []);
     h(this, J, []);
     h(this, At, 0);
-    h(this, O, []);
+    h(this, z, []);
     h(this, Lt, /* @__PURE__ */ c(() => {
-      g(this, O, []);
+      g(this, z, []);
       const i = t(this, q).template || [];
       Array.from(i).forEach((e) => {
         var s;
-        t(this, O).push(((s = e.getBoundingClientRect) == null ? void 0 : s.call(e).height) || 24);
+        t(this, z).push(((s = e.getBoundingClientRect) == null ? void 0 : s.call(e).height) || 24);
       }), (t(this, v).rawRecords || []).forEach((e) => {
-        e.__ng || (e.__ng = t(this, at).call(this)), e.__ng.height = t(this, O).slice();
+        e.__ng || (e.__ng = t(this, at).call(this)), e.__ng.height = t(this, z).slice();
       });
     }, "#initialize"));
     w(this, "set", /* @__PURE__ */ c((i) => {
@@ -1039,10 +1052,10 @@ const L = class L {
       rowState: L.ROW_STATE.EMPTY,
       deleted: !1,
       filtered: !1,
-      height: t(this, O).slice(),
+      height: t(this, z).slice(),
       o: {},
       c: {},
-      _: [0, 0, 0, 0, L.ROW_STATE.EMPTY, !1, !1, !0, !1, !0, !0, !1, t(this, O).slice(), -1, {}, {}]
+      _: [0, 0, 0, 0, L.ROW_STATE.EMPTY, !1, !1, !0, !1, !0, !0, !1, t(this, z).slice(), -1, {}, {}]
     }), "#getDefaultMeta"));
     w(this, "reset", /* @__PURE__ */ c(() => {
       g(this, A, []), g(this, J, []);
@@ -1149,7 +1162,7 @@ const L = class L {
     return this.length;
   }
 };
-q = new WeakMap(), v = new WeakMap(), A = new WeakMap(), J = new WeakMap(), At = new WeakMap(), O = new WeakMap(), Lt = new WeakMap(), at = new WeakMap(), Ht = new WeakMap(), Ct = new WeakMap(), Q = new WeakMap(), c(L, "ngData"), // 🎯 행 상태 정의 상수를 클래스 내부로 내재화
+q = new WeakMap(), v = new WeakMap(), A = new WeakMap(), J = new WeakMap(), At = new WeakMap(), z = new WeakMap(), Lt = new WeakMap(), at = new WeakMap(), Ht = new WeakMap(), Ct = new WeakMap(), Q = new WeakMap(), c(L, "ngData"), // 🎯 행 상태 정의 상수를 클래스 내부로 내재화
 w(L, "ROW_STATE", {
   EMPTY: "EMPTY",
   NORMAL: "NORMAL",
@@ -1157,10 +1170,10 @@ w(L, "ROW_STATE", {
   UPDATE: "UPDATE",
   DELETE: "DELETE"
 });
-let Pt = L;
+let Nt = L;
 const Gt = class Gt {
   constructor(i) {
-    this.owner = i, this.row = new Nt(this), this.data = new Pt(i, this), this.rawRecords = [], this.viewRecords = [], this.delRecords = [], this.pageCnt = 25, this.viewRecords.reset = () => {
+    this.owner = i, this.row = new Bt(this), this.data = new Nt(i, this), this.rawRecords = [], this.viewRecords = [], this.delRecords = [], this.pageCnt = 25, this.viewRecords.reset = () => {
       var e;
       (e = this.owner.view) != null && e.redraw && this.owner.view.redraw();
     }, this.setDataSource = (e) => {
@@ -1178,7 +1191,7 @@ const Gt = class Gt {
   }
 };
 c(Gt, "ngDataManager");
-let Bt = Gt;
+let Pt = Gt;
 var U, _t;
 const Jt = class Jt extends HTMLElement {
   constructor() {
@@ -1186,7 +1199,7 @@ const Jt = class Jt extends HTMLElement {
     //#created = false;
     h(this, U);
     h(this, _t);
-    this.attachShadow({ mode: "open" }), g(this, U, new Bt(this));
+    this.attachShadow({ mode: "open" }), g(this, U, new Pt(this));
   }
   connectedCallback() {
     g(this, _t, new Dt(this)), tt.log("NineTable connected."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } }));