@ninebone/table 0.0.311 → 0.0.312

package/dist/nine-table.js

@@ -22,29 +22,29 @@ const Yt = class Yt extends oe.constructor {
 };
 a(Yt, "Trace");
 let _t = Yt;
-const H = new _t();
-var M, $, p, P, B, N, dt, V, ft;
+const M = new _t();
+var C, $, p, P, B, N, dt, V, ft;
 const Xt = class Xt extends HTMLElement {
   constructor() {
     super();
-    h(this, M);
+    h(this, C);
     h(this, $, !1);
     h(this, p);
     h(this, P);
     h(this, B);
     h(this, N);
     h(this, dt, /* @__PURE__ */ a(() => {
-      if (!t(this, M)) return;
-      const e = t(this, M).querySelector(".ng-container-body");
+      if (!t(this, C)) return;
+      const e = t(this, C).querySelector(".ng-container-body");
       e && (b(this, N, new ResizeObserver(() => {
         this.refresh();
       })), t(this, N).observe(e));
     }, "#observeResize"));
     w(this, "refresh", /* @__PURE__ */ a(() => {
-      if (!t(this, M) || !t(this, p) || t(this, $)) return;
+      if (!t(this, C) || !t(this, p) || t(this, $)) return;
       const e = t(this, p).container, s = e.querySelector("table");
       if (!s) return;
-      const n = t(this, p).track, o = t(this, p).thumb, r = t(this, M).querySelector(".ng-container-bottom"), l = e.clientWidth, c = s.scrollWidth;
+      const n = t(this, p).track, o = t(this, p).thumb, r = t(this, C).querySelector(".ng-container-bottom"), l = e.clientWidth, c = s.scrollWidth;
       if (l !== 0 && c > l)
         r && (r.style.display = "flex");
       else {
@@ -59,7 +59,7 @@ const Xt = class Xt extends HTMLElement {
       let y = 0;
       g > 0 && (y = parseInt(f / g * (d - u), 10)), y < 0 && (y = 0);
       const E = d - u;
-      y > E && (y = E), o.style.left = `${y}px`, H.log(y), t(this, p).left.disabled = y === 0, t(this, p).right.disabled = y >= E - 1;
+      y > E && (y = E), o.style.left = `${y}px`, M.log(y), t(this, p).left.disabled = y === 0, t(this, p).right.disabled = y >= E - 1;
     }, "refresh"));
     h(this, V, /* @__PURE__ */ a((e) => {
       if (!t(this, p)) return !1;
@@ -112,7 +112,7 @@ const Xt = class Xt extends HTMLElement {
     }, "#init"));
   }
   connectedCallback() {
-    if (b(this, M, this.closest("nine-table-sheet") || this.getRootNode().host), !t(this, M)) return;
+    if (b(this, C, this.closest("nine-table-sheet") || this.getRootNode().host), !t(this, C)) return;
     this.innerHTML = `
             <style>
                 nine-table-hscrollbar {
@@ -177,7 +177,7 @@ const Xt = class Xt extends HTMLElement {
             <button class='ng-scroll-right' disabled><div class='ng-scroll-icon'></div></button>
         `;
     const e = /* @__PURE__ */ a(() => {
-      const s = t(this, M).querySelector(".ng-container-body");
+      const s = t(this, C).querySelector(".ng-container-body");
       if (!s) {
         setTimeout(e, 10);
         return;
@@ -198,7 +198,7 @@ const Xt = class Xt extends HTMLElement {
     t(this, N) && t(this, N).disconnect();
   }
 };
-M = new WeakMap(), $ = new WeakMap(), p = new WeakMap(), P = new WeakMap(), B = new WeakMap(), N = new WeakMap(), dt = new WeakMap(), V = new WeakMap(), ft = new WeakMap(), a(Xt, "NineTableHScrollBar");
+C = new WeakMap(), $ = new WeakMap(), p = new WeakMap(), P = new WeakMap(), B = new WeakMap(), N = new WeakMap(), dt = new WeakMap(), V = new WeakMap(), ft = new WeakMap(), a(Xt, "NineTableHScrollBar");
 let $t = Xt;
 customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", $t);
 var Y, I, S, it, st, ut;
@@ -243,7 +243,7 @@ const Ut = class Ut extends HTMLElement {
         const n = /* @__PURE__ */ a((r) => {
           if (!t(this, I)) return;
           const l = t(this, S).track.getBoundingClientRect(), c = t(this, S).thumb.clientHeight, u = l.height - c, f = r.clientY - t(this, it), g = e.clientHeight, y = e.querySelector("table");
-          H.log(y), H.log(y.scrollHeight);
+          M.log(y), M.log(y.scrollHeight);
           const k = y.scrollHeight - g;
           if (u > 0 && k > 0) {
             const D = f / u * k;
@@ -355,12 +355,12 @@ Y = new WeakMap(), I = new WeakMap(), S = new WeakMap(), it = new WeakMap(), st
 let It = Ut;
 customElements.get("nine-table-vscrollbar") || customElements.define("nine-table-vscrollbar", It);
 var gt, F;
-const C = class C {
+const H = class H {
   /**
    * 🎯 레이아웃 내의 여러 rawTables 배열을 일괄로 받아 단일 마스터 템플릿으로 사전 컴파일합니다.
    */
   static compileAll(i) {
-    return Array.isArray(i) ? i.map((e) => C.compile(e)) : [];
+    return Array.isArray(i) ? i.map((e) => H.compile(e)) : [];
   }
   /**
    * 🎯 단일 원본 테이블을 받아 기본 구조 보정 및 2차원 격자 인덱스 사전 부여 완료된 마스터 테이블 반환
@@ -369,7 +369,7 @@ const C = class C {
     var n, o, r, l;
     if (!i) return null;
     const e = i.cloneNode(!0);
-    return t(n = C, gt).call(n, e), t(o = C, F).call(o, e, "thead"), t(r = C, F).call(r, e, "tbody"), t(l = C, F).call(l, e, "tfoot"), Array.from(e.querySelectorAll("colgroup col")).forEach((c, d) => {
+    return t(n = H, gt).call(n, e), t(o = H, F).call(o, e, "thead"), t(r = H, F).call(r, e, "tbody"), t(l = H, F).call(l, e, "tfoot"), Array.from(e.querySelectorAll("colgroup col")).forEach((c, d) => {
       const u = c.getAttribute("fixed");
       u && e.querySelectorAll(`thead [data-col="${d}"], tbody [data-col="${d}"], tfoot [data-col="${d}"]`).forEach((f) => {
         f.setAttribute("fixed", u);
@@ -377,7 +377,7 @@ const C = class C {
     }), e;
   }
 };
-gt = new WeakMap(), F = new WeakMap(), a(C, "TableCompiler"), h(C, gt, /* @__PURE__ */ a((i) => {
+gt = new WeakMap(), F = new WeakMap(), a(H, "TableCompiler"), h(H, gt, /* @__PURE__ */ a((i) => {
   if (!i.querySelector("colgroup")) {
     const e = i.querySelector("tbody tr") || i.querySelector("tr"), s = e ? e.querySelectorAll("th, td").length : 1, n = document.createElement("colgroup"), o = Math.max(Math.floor(i.clientWidth / s), 100);
     for (let r = 0; r < s; r++) {
@@ -391,7 +391,7 @@ gt = new WeakMap(), F = new WeakMap(), a(C, "TableCompiler"), h(C, gt, /* @__PUR
     s ? s.after(e) : i.prepend(e);
   }
   i.classList.add("nine-table-element"), i.style.display = "table";
-}, "#ensureTableStructure")), h(C, F, /* @__PURE__ */ a((i, e) => {
+}, "#ensureTableStructure")), h(H, F, /* @__PURE__ */ a((i, e) => {
   const s = Array.from(i.querySelectorAll(e + " tr")), n = Array.from(i.querySelectorAll(e + " th," + e + " td")), o = s.length;
   if (o === 0 || n.length === 0) return;
   let r = 0;
@@ -424,7 +424,7 @@ gt = new WeakMap(), F = new WeakMap(), a(C, "TableCompiler"), h(C, gt, /* @__PUR
     });
   });
 }, "#resetColIndex"));
-let Wt = C;
+let Wt = H;
 var m, _, R, W, X, U, bt, pt, nt, ot, yt, mt, rt, Z, xt;
 const Kt = class Kt {
   constructor(i) {
@@ -462,10 +462,18 @@ const Kt = class Kt {
       if (i) {
         t(this, pt).call(this, i), t(this, rt).call(this), t(this, nt).call(this), t(this, Z).call(this, i.scrollTop);
         let e = i.scrollTop;
+        const s = /* @__PURE__ */ a((n) => {
+          var o;
+          leftContainer && leftContainer.scrollTop !== n && (leftContainer.scrollTop = n), rightContainer && rightContainer.scrollTop !== n && (rightContainer.scrollTop = n), t(this, Z).call(this, n), (o = t(this, m).querySelector("nine-table-vscrollbar")) == null || o.refresh();
+        }, "syncScroll");
         i.addEventListener("scroll", () => {
-          var n;
-          const s = i.scrollTop;
-          H.log(e, s), e !== s && (e = s, t(this, Z).call(this, s)), (n = t(this, m).querySelector("nine-table-vscrollbar")) == null || n.refresh();
+          const n = i.scrollTop;
+          e !== n && (e = n, s(n));
+        }), [leftContainer, rightContainer].forEach((n) => {
+          n && n.addEventListener("scroll", () => {
+            const o = n.scrollTop;
+            i.scrollTop !== o && (i.scrollTop = o, e = o, s(o));
+          });
         });
       }
     }, "initialize"));
@@ -503,7 +511,7 @@ const Kt = class Kt {
       const f = s.querySelectorAll("tr:not(.nodata)");
       return f.forEach((g) => {
         u += g.offsetHeight || g.getBoundingClientRect().height;
-      }), f.forEach((g) => g.remove()), r.style.display = l, r.style.visibility = c, r.style.position = d, b(this, R, u > 0 ? u : 24), t(this, ot).call(this), H.log(`[RowManager] Height Cached: ${t(this, R)}px | RowCount: ${t(this, U)}`), t(this, R);
+      }), f.forEach((g) => g.remove()), r.style.display = l, r.style.visibility = c, r.style.position = d, b(this, R, u > 0 ? u : 24), t(this, ot).call(this), M.log(`[RowManager] Height Cached: ${t(this, R)}px | RowCount: ${t(this, U)}`), t(this, R);
     }, "#measureAndCacheHeight"));
     /**
      * 🎯 전체 데이터 개수 기반으로 가상 스크롤 높이 설정
@@ -515,9 +523,9 @@ const Kt = class Kt {
       var o, r, l, c;
       if (!t(this, m).querySelector(".ng-container-body")) return;
       const e = (typeof ((o = t(this, m).data) == null ? void 0 : o.count) == "function" ? t(this, m).data.count() : null) ?? ((l = (r = t(this, m).dataManager) == null ? void 0 : r.rawRecords) == null ? void 0 : l.length) ?? ((c = t(this, m).data) == null ? void 0 : c.length) ?? 0, s = t(this, R) || 24, n = e * s;
-      H.log(`[RowManager] TotalCount: ${e} | RowHeight: ${s}px | TotalVirtualHeight: ${n}px`), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((d) => {
+      M.log(`[RowManager] TotalCount: ${e} | RowHeight: ${s}px | TotalVirtualHeight: ${n}px`), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((d) => {
         const u = t(this, m).querySelector(d), f = u == null ? void 0 : u.querySelector("table");
-        f ? (f.style.height = `${n}px`, H.log(`[RowManager] Applied height to ${d} table:`, f.style.height)) : H.log(`[RowManager] Table not found for selector: ${d}`);
+        f ? (f.style.height = `${n}px`, M.log(`[RowManager] Applied height to ${d} table:`, f.style.height)) : M.log(`[RowManager] Table not found for selector: ${d}`);
       });
     }, "#updateVirtualScrollHeight"));
     h(this, ot, /* @__PURE__ */ a(() => {
@@ -813,7 +821,7 @@ const et = class et extends HTMLElement {
     t(this, Et).call(this);
   }
   disconnectedCallback() {
-    this.innerHTML = "", H.log("NineTableSheet destroyed.");
+    this.innerHTML = "", M.log("NineTableSheet destroyed.");
   }
 };
 G = new WeakMap(), J = new WeakMap(), vt = new WeakMap(), wt = new WeakMap(), St = new WeakMap(), Et = new WeakMap(), Rt = new WeakMap(), a(et, "NineTableSheet"), w(et, "SCROLLBAR_SIZE", 16);
@@ -1202,10 +1210,10 @@ const Jt = class Jt extends HTMLElement {
     this.attachShadow({ mode: "open" }), b(this, j, new Nt(this));
   }
   connectedCallback() {
-    b(this, Mt, new Dt(this)), H.log("NineTable connected."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } }));
+    b(this, Mt, new Dt(this)), M.log("NineTable connected."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } }));
   }
   disconnectedCallback() {
-    H.log("NineTable disconnected.");
+    M.log("NineTable disconnected.");
   }
   // 🎯 외부에서 grid.data.set(...) 형태로 접근할 수 있도록 데이터 매니저 오픈
   get data() {