@ninebone/table 0.0.423 → 0.0.424

package/dist/nine-table.js

@@ -428,7 +428,7 @@ At = new WeakMap(), et = new WeakMap(), a(H, "TableCompiler"), c(H, At, /* @__PU
   });
 }, "#resetColIndex"));
 let Gt = H;
-var _, w, I, T, D, j, B, it, Tt, qt, kt, ft, ut, Lt, Ct, bt, Ht, st, gt;
+var _, w, I, T, D, j, N, it, Tt, qt, kt, ft, ut, Lt, Ct, bt, Ht, st, gt;
 const ce = class ce {
   constructor(i) {
     c(this, _);
@@ -437,7 +437,7 @@ const ce = class ce {
     c(this, T, null);
     c(this, D, null);
     c(this, j, 0);
-    c(this, B, 40);
+    c(this, N, 40);
     c(this, it, !1);
     c(this, Tt, 3);
     v(this, "refresh", /* @__PURE__ */ a(() => {
@@ -477,7 +477,7 @@ const ce = class ce {
       if (!n) return;
       n.querySelectorAll("tr:not(.nodata)").forEach((l) => l.remove());
       const r = n.querySelector("tr.nodata"), o = document.createDocumentFragment();
-      for (let l = 0; l < t(this, B); l++)
+      for (let l = 0; l < t(this, N); l++)
         s.forEach((d) => {
           o.appendChild(d.cloneNode(!0));
         });
@@ -503,38 +503,22 @@ const ce = class ce {
         f += g.offsetHeight || g.getBoundingClientRect().height;
       }), u.forEach((g) => g.remove()), o.style.display = l, o.style.visibility = d, o.style.position = h, b(this, T, f > 0 ? f : 24), t(this, ut).call(this), t(this, T);
     }, "#measureAndCacheHeight"));
-    /**
-        #updateVirtualScrollHeight = () => {
-            const bodyContainer = this.#sheet.querySelector('.ng-container-body');
-            if (!bodyContainer) return;
-    
-            const dataList = this.#host.data.get() || [];
-            const totalCount = dataList.length;
-            const rowHeight = this.#cachedTemplateHeight || 24;
-            const totalVirtualHeight = totalCount * rowHeight;
-    
-            // 🎯 디버깅 로그: 전체 데이터가 몇 건이고 테이블 높이가 얼마로 잡히는지 확인
-            trace.log(`[VirtualHeight] totalCount: ${totalCount}, rowHeight: ${rowHeight}, totalVirtualHeight: ${totalVirtualHeight}`);
-    
-            ['.ng-container-body', '.ng-container-left', '.ng-container-right'].forEach(selector => {
-                const container = this.#sheet.querySelector(selector);
-                const table = container?.querySelector('table');
-                if (table) {
-                    table.style.height = `${totalVirtualHeight}px`;
-                }
-            });
-        }; */
     c(this, ft, /* @__PURE__ */ a(() => {
       if (!t(this, w).querySelector(".ng-container-body")) return;
-      (t(this, _).data.get() || []).length, t(this, T), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((s) => {
-        const n = t(this, w).querySelector(s), r = n == null ? void 0 : n.querySelector("table");
-        r && (r.style.height = "auto", r.style.minHeight = "auto");
+      const s = (t(this, _).data.get() || []).length, n = t(this, T) || 24, r = s * n;
+      [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((o) => {
+        const l = t(this, w).querySelector(o);
+        if (!l) return;
+        const d = l.querySelector("table");
+        d && (d.style.height = "auto", d.style.minHeight = "auto");
+        const h = l.querySelector(".ng-virtual-spacer");
+        h && (h.style.height = `${r}px`);
       });
     }, "#updateVirtualScrollHeight"));
     c(this, ut, /* @__PURE__ */ a(() => {
       if ((t(this, _).data.get() || []).length, t(this, j) > 0 && t(this, T) > 0) {
         const e = Math.ceil(t(this, j) / t(this, T));
-        b(this, B, e + t(this, Tt)), P.log("visibleRows:", e, "cachedRowCount:", t(this, B));
+        b(this, N, e + t(this, Tt)), P.log("visibleRows:", e, "cachedRowCount:", t(this, N));
       }
     }, "#updateRowCount"));
     c(this, Lt, /* @__PURE__ */ a(() => {
@@ -596,8 +580,8 @@ const ce = class ce {
       var d;
       const e = t(this, T);
       if (!e || e <= 0) return;
-      const n = (t(this, _).data.get() || []).length, r = Math.max(0, Math.floor(i / e)), o = ((d = t(this, I).get(".ng-container-body")) == null ? void 0 : d.length) || 1, l = r + t(this, B);
-      P.log(`[Scroll] scrollTop: ${i}, startIndex: ${r}, cachedRowCount: ${t(this, B)}, targetDataIndex range: ${r} ~ ${l} (Total: ${n})`), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((h) => {
+      const n = (t(this, _).data.get() || []).length, r = Math.max(0, Math.floor(i / e)), o = ((d = t(this, I).get(".ng-container-body")) == null ? void 0 : d.length) || 1, l = r + t(this, N);
+      P.log(`[Scroll] scrollTop: ${i}, startIndex: ${r}, cachedRowCount: ${t(this, N)}, targetDataIndex range: ${r} ~ ${l} (Total: ${n})`), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((h) => {
         const f = t(this, w).querySelector(h);
         if (!f) return;
         const u = f.querySelector("tbody.bindable-tbody");
@@ -634,9 +618,9 @@ const ce = class ce {
     return ((e = t(this, I).get(i)) == null ? void 0 : e.length) || 1;
   }
 };
-_ = new WeakMap(), w = new WeakMap(), I = new WeakMap(), T = new WeakMap(), D = new WeakMap(), j = new WeakMap(), B = new WeakMap(), it = new WeakMap(), Tt = new WeakMap(), qt = new WeakMap(), kt = new WeakMap(), ft = new WeakMap(), ut = new WeakMap(), Lt = new WeakMap(), Ct = new WeakMap(), bt = new WeakMap(), Ht = new WeakMap(), st = new WeakMap(), gt = new WeakMap(), a(ce, "RowManager");
+_ = new WeakMap(), w = new WeakMap(), I = new WeakMap(), T = new WeakMap(), D = new WeakMap(), j = new WeakMap(), N = new WeakMap(), it = new WeakMap(), Tt = new WeakMap(), qt = new WeakMap(), kt = new WeakMap(), ft = new WeakMap(), ut = new WeakMap(), Lt = new WeakMap(), Ct = new WeakMap(), bt = new WeakMap(), Ht = new WeakMap(), st = new WeakMap(), gt = new WeakMap(), a(ce, "RowManager");
 let Jt = ce;
-var Mt, nt, K, _t, It, $t, Wt, Ot;
+var Mt, nt, K, _t, $t, It, Wt, Ot;
 const ct = class ct extends HTMLElement {
   constructor() {
     super();
@@ -659,11 +643,15 @@ const ct = class ct extends HTMLElement {
       ].forEach(({ selector: s, type: n }) => {
         const r = this.querySelector(s);
         if (!r) return;
-        const o = t(this, $t).call(this, t(this, nt), n);
-        r.innerHTML = "", r.appendChild(o);
+        const o = t(this, It).call(this, t(this, nt), n);
+        r.innerHTML = "";
+        const l = document.createElement("div");
+        l.className = "ng-scroll-content", l.appendChild(o);
+        const d = document.createElement("div");
+        d.className = "ng-virtual-spacer", l.appendChild(d), r.appendChild(l);
       });
     }, "#renderSplitContainers"));
-    c(this, It, /* @__PURE__ */ a(() => {
+    c(this, $t, /* @__PURE__ */ a(() => {
       ["left", "right"].forEach((e) => {
         const s = this.querySelector(`.ng-container-${e}`), n = s == null ? void 0 : s.querySelector("table");
         if (!s || !n) return;
@@ -675,7 +663,7 @@ const ct = class ct extends HTMLElement {
       });
     }, "#updateContainerWidths"));
     v(this, "generate", /* @__PURE__ */ a((e) => {
-      e && (b(this, nt, Gt.compile(e)), t(this, nt).style.display = "table", t(this, _t).call(this), t(this, It).call(this), requestAnimationFrame(() => {
+      e && (b(this, nt, Gt.compile(e)), t(this, nt).style.display = "table", t(this, _t).call(this), t(this, $t).call(this), requestAnimationFrame(() => {
         var n;
         const s = (n = this.querySelector("thead")) == null ? void 0 : n.getBoundingClientRect().height;
         this.querySelectorAll("tbody.fixed-tbody").forEach((r) => {
@@ -689,7 +677,7 @@ const ct = class ct extends HTMLElement {
     /**
      * 🎯 마스터 테이블을 기반으로 특정 fixed 타입 영역만 남기는 분할 헬퍼
      */
-    c(this, $t, /* @__PURE__ */ a((e, s) => {
+    c(this, It, /* @__PURE__ */ a((e, s) => {
       const n = e.cloneNode(!0), r = n.querySelector("tbody");
       if (r) {
         const o = document.createElement("tbody");
@@ -747,21 +735,14 @@ const ct = class ct extends HTMLElement {
                 nine-table-sheet .ng-container-left {
                     display: flex;
                     flex-direction: column;
-                    overflow: hidden;
+                    overflow-y: auto;
+                    overflow-x: hidden;
                     background: #ffffff;
                     border-right: 1px solid #e5e7eb;
                     flex-shrink: 0;
+                    scrollbar-width: none;
+                    &::-webkit-scrollbar { display: none; }
                 }
-                
-                nine-table-sheet thead {
-                    position: sticky;
-                    top: 0;
-                }
-                nine-table-sheet tbody.fixed-tbody {
-                    position: sticky;
-                    z-index: 4;
-                }
-                
     
                 nine-table-sheet .ng-container-body {
                     display: flex;
@@ -771,23 +752,32 @@ const ct = class ct extends HTMLElement {
                     overflow-x: auto;
                     background: #ffffff;
                     position: relative;
-                    
-                    &::-webkit-scrollbar {
-                        display: none; 
-                        height: 0px;
-                    }
-                    
                     scrollbar-width: none;
+                    &::-webkit-scrollbar { display: none; height: 0px; }
                 }
     
                 nine-table-sheet .ng-container-right {
                     display: flex;
-                    flex-init: 0;
                     flex-direction: column;
-                    overflow: hidden;
+                    overflow-y: auto;
+                    overflow-x: hidden;
                     background: #ffffff;
                     border-left: 1px solid #e5e7eb;
                     flex-shrink: 0;
+                    scrollbar-width: none;
+                    &::-webkit-scrollbar { display: none; }
+                }
+
+                nine-table-sheet .ng-scroll-content {
+                    position: relative;
+                    width: 100%;
+                    height: auto;
+                }
+
+                nine-table-sheet .ng-virtual-spacer {
+                    width: 100%;
+                    visibility: hidden;
+                    pointer-events: none;
                 }
     
                 nine-table-sheet .ng-container-bottom {
@@ -815,6 +805,17 @@ const ct = class ct extends HTMLElement {
                     position: relative;
                 }
     
+                nine-table-sheet thead {
+                    position: sticky;
+                    top: 0;
+                    z-index: 3;
+                }
+
+                nine-table-sheet tbody.fixed-tbody {
+                    position: sticky;
+                    z-index: 4;
+                }
+
                 nine-table-sheet th, nine-table-sheet td {
                     box-sizing: border-box;
                     overflow: hidden;
@@ -871,7 +872,7 @@ const ct = class ct extends HTMLElement {
     this.innerHTML = "", P.log("NineTableSheet destroyed.");
   }
 };
-Mt = new WeakMap(), nt = new WeakMap(), K = new WeakMap(), _t = new WeakMap(), It = new WeakMap(), $t = new WeakMap(), Wt = new WeakMap(), Ot = new WeakMap(), a(ct, "NineTableSheet"), v(ct, "SCROLLBAR_SIZE", 16);
+Mt = new WeakMap(), nt = new WeakMap(), K = new WeakMap(), _t = new WeakMap(), $t = new WeakMap(), It = new WeakMap(), Wt = new WeakMap(), Ot = new WeakMap(), a(ct, "NineTableSheet"), v(ct, "SCROLLBAR_SIZE", 16);
 let wt = ct;
 customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", wt);
 var zt, yt;
@@ -925,12 +926,12 @@ const he = class he extends HTMLElement {
 zt = new WeakMap(), yt = new WeakMap(), a(he, "NineTableSheets");
 let Qt = he;
 customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets", Qt);
-var q, Dt, pt, Bt;
+var q, Dt, pt, Nt;
 const de = class de {
   constructor(i) {
     c(this, q);
     c(this, Dt, /* @__PURE__ */ a(() => {
-      t(this, Bt).call(this), new ResizeObserver((i) => {
+      t(this, Nt).call(this), new ResizeObserver((i) => {
         for (let e of i)
           t(this, q).getAttribute("auto-height") === "true" && t(this, pt).call(this);
       }).observe(t(this, q));
@@ -942,7 +943,7 @@ const de = class de {
       const e = parseInt(t(this, q).getAttribute("max-display-row"), 10) || 10, s = Math.max(...i.map((f) => f.getRowHeight())), n = (d = t(this, q).shadowRoot.querySelector("nine-table-header")) == null ? void 0 : d.getBoundingClientRect().height, r = (h = t(this, q).shadowRoot.querySelector("nine-table-sheets-footer")) == null ? void 0 : h.getBoundingClientRect().height, o = wt.SCROLLBAR_SIZE, l = e * s + n + r + o;
       t(this, q).style.height = `${l}px`;
     }, "#applyAutoHeight"));
-    c(this, Bt, /* @__PURE__ */ a(() => {
+    c(this, Nt, /* @__PURE__ */ a(() => {
       const e = Array.from(t(this, q).children).filter((d) => d.tagName === "TABLE"), s = t(this, q).getAttribute("auto-height") === "true", n = e.length, r = e.map((d, h) => {
         const u = `<nine-table-sheet class="${h === 0 ? "active" : ""}" data-index="${h}"></nine-table-sheet>`, g = h < n - 1 ? `<nine-splitter class="h" data-split-index="${h}"></nine-splitter>` : "";
         return u + g;
@@ -1048,7 +1049,7 @@ const de = class de {
     b(this, q, i), t(this, Dt).call(this);
   }
 };
-q = new WeakMap(), Dt = new WeakMap(), pt = new WeakMap(), Bt = new WeakMap(), a(de, "LayoutManager");
+q = new WeakMap(), Dt = new WeakMap(), pt = new WeakMap(), Nt = new WeakMap(), a(de, "LayoutManager");
 let te = de;
 var mt, ot;
 const fe = class fe {
@@ -1068,23 +1069,23 @@ const fe = class fe {
 };
 mt = new WeakMap(), ot = new WeakMap(), a(fe, "ngRow");
 let ee = fe;
-var k, R, L, rt, Nt, N, Pt, Z, xt, Yt, Vt, lt;
+var k, R, L, rt, Bt, B, Pt, Z, xt, Yt, Vt, lt;
 const C = class C {
   constructor(i, e) {
     c(this, k);
     c(this, R);
     c(this, L, []);
     c(this, rt, []);
-    c(this, Nt, 0);
-    c(this, N, []);
+    c(this, Bt, 0);
+    c(this, B, []);
     c(this, Pt, /* @__PURE__ */ a(() => {
-      b(this, N, []);
+      b(this, B, []);
       const i = t(this, k).template || [];
       Array.from(i).forEach((e) => {
         var s;
-        t(this, N).push(((s = e.getBoundingClientRect) == null ? void 0 : s.call(e).height) || 24);
+        t(this, B).push(((s = e.getBoundingClientRect) == null ? void 0 : s.call(e).height) || 24);
       }), (t(this, R).rawRecords || []).forEach((e) => {
-        e.__ng || (e.__ng = t(this, xt).call(this)), e.__ng.height = t(this, N).slice();
+        e.__ng || (e.__ng = t(this, xt).call(this)), e.__ng.height = t(this, B).slice();
       });
     }, "#initialize"));
     c(this, Z, /* @__PURE__ */ a(() => {
@@ -1112,10 +1113,10 @@ const C = class C {
       rowState: C.ROW_STATE.EMPTY,
       deleted: !1,
       filtered: !1,
-      height: t(this, N).slice(),
+      height: t(this, B).slice(),
       o: {},
       c: {},
-      _: [0, 0, 0, 0, C.ROW_STATE.EMPTY, !1, !1, !0, !1, !0, !0, !1, t(this, N).slice(), -1, {}, {}]
+      _: [0, 0, 0, 0, C.ROW_STATE.EMPTY, !1, !1, !0, !1, !0, !0, !1, t(this, B).slice(), -1, {}, {}]
     }), "#getDefaultMeta"));
     v(this, "reset", /* @__PURE__ */ a(() => {
       b(this, L, []), b(this, rt, []), t(this, Z).call(this);
@@ -1198,7 +1199,7 @@ const C = class C {
     this.clear(), this.add(i, !1);
   }
   get nextId() {
-    return ++ve(this, Nt)._;
+    return ++ve(this, Bt)._;
   }
   get length() {
     return t(this, L).length;
@@ -1207,7 +1208,7 @@ const C = class C {
     return this.length;
   }
 };
-k = new WeakMap(), R = new WeakMap(), L = new WeakMap(), rt = new WeakMap(), Nt = new WeakMap(), N = new WeakMap(), Pt = new WeakMap(), Z = new WeakMap(), xt = new WeakMap(), Yt = new WeakMap(), Vt = new WeakMap(), lt = new WeakMap(), a(C, "ngData"), // 🎯 행 상태 정의 상수를 클래스 내부로 내재화
+k = new WeakMap(), R = new WeakMap(), L = new WeakMap(), rt = new WeakMap(), Bt = new WeakMap(), B = new WeakMap(), Pt = new WeakMap(), Z = new WeakMap(), xt = new WeakMap(), Yt = new WeakMap(), Vt = new WeakMap(), lt = new WeakMap(), a(C, "ngData"), // 🎯 행 상태 정의 상수를 클래스 내부로 내재화
 v(C, "ROW_STATE", {
   EMPTY: "EMPTY",
   NORMAL: "NORMAL",