@ninebone/table 0.0.141 → 0.0.143

package/dist/nine-table.js

@@ -1,11 +1,11 @@
-var $e = Object.defineProperty;
-var Me = (w) => {
+var Me = Object.defineProperty;
+var $e = (w) => {
   throw TypeError(w);
 };
-var We = (w, i, t) => i in w ? $e(w, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : w[i] = t;
-var a = (w, i) => $e(w, "name", { value: i, configurable: !0 });
-var v = (w, i, t) => We(w, typeof i != "symbol" ? i + "" : i, t), Ie = (w, i, t) => i.has(w) || Me("Cannot " + t);
-var e = (w, i, t) => (Ie(w, i, "read from private field"), t ? t.call(w) : i.get(w)), u = (w, i, t) => i.has(w) ? Me("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(w) : i.set(w, t), p = (w, i, t, s) => (Ie(w, i, "write to private field"), s ? s.call(w, t) : i.set(w, t), t);
+var ze = (w, i, t) => i in w ? Me(w, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : w[i] = t;
+var a = (w, i) => Me(w, "name", { value: i, configurable: !0 });
+var v = (w, i, t) => ze(w, typeof i != "symbol" ? i + "" : i, t), Ie = (w, i, t) => i.has(w) || $e("Cannot " + t);
+var e = (w, i, t) => (Ie(w, i, "read from private field"), t ? t.call(w) : i.get(w)), u = (w, i, t) => i.has(w) ? $e("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(w) : i.set(w, t), p = (w, i, t, s) => (Ie(w, i, "write to private field"), s ? s.call(w, t) : i.set(w, t), t);
 var He = (w, i, t, s) => ({
   set _(n) {
     p(w, i, n, t);
@@ -14,8 +14,8 @@ var He = (w, i, t, s) => ({
     return e(w, i, s);
   }
 });
-import { trace as ze } from "@ninebone/util";
-const Re = class Re extends ze.constructor {
+import { trace as We } from "@ninebone/util";
+const Re = class Re extends We.constructor {
   constructor() {
     super(), this.init("nine-table", "green");
   }
@@ -206,14 +206,14 @@ const Te = class Te extends HTMLElement {
 _ = new WeakMap(), O = new WeakMap(), y = new WeakMap(), B = new WeakMap(), D = new WeakMap(), N = new WeakMap(), ee = new WeakMap(), P = new WeakMap(), te = new WeakMap(), a(Te, "NineTableHScrollBar");
 let ge = Te;
 customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", ge);
-var X, $, q, I, M, H, ie, se;
+var X, M, q, I, $, H, ie, se;
 const qe = class qe {
   constructor(i) {
     u(this, X);
-    u(this, $, []);
+    u(this, M, []);
     u(this, q, null);
     u(this, I, null);
-    u(this, M, 0);
+    u(this, $, 0);
     u(this, H, 0);
     u(this, ie, /* @__PURE__ */ a(() => {
       e(this, se).call(this);
@@ -234,9 +234,9 @@ const qe = class qe {
             const l = s.querySelector(".ng-container-body") || s, g = l.querySelector("thead"), c = l.querySelector("tfoot");
             g && (r += g.offsetHeight || g.getBoundingClientRect().height), c && (r += c.offsetHeight || c.getBoundingClientRect().height);
             const h = Math.max(o - r, 100);
-            if (e(this, M) !== h && (p(this, M, h), e(this, q) !== null)) {
-              const d = Math.ceil(e(this, M) / e(this, q));
-              p(this, H, d + 20), j.log(`[RowManager] Resized. Height: ${e(this, M)}px | Target Rows: ${e(this, H)}`), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((b) => {
+            if (e(this, $) !== h && (p(this, $, h), e(this, q) !== null)) {
+              const d = Math.ceil(e(this, $) / e(this, q));
+              p(this, H, d + 20), j.log(`[RowManager] Resized. Height: ${e(this, $)}px | Target Rows: ${e(this, H)}`), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((b) => {
                 const f = s.querySelector(b);
                 f && f.querySelector("tbody") && this.renderRows(f);
               });
@@ -249,18 +249,18 @@ const qe = class qe {
       const t = i.querySelector("tbody.bindable") || i.querySelector("tbody");
       if (!t) return;
       const s = Array.from(t.querySelectorAll("tr")).filter((n) => !n.classList.contains("nodata"));
-      p(this, $, s.map((n) => n.cloneNode(!0))), p(this, q, null), console.log(`[RowManager] Template initialized with ${e(this, $).length} row(s).`);
+      p(this, M, s.map((n) => n.cloneNode(!0))), p(this, q, null), console.log(`[RowManager] Template initialized with ${e(this, M).length} row(s).`);
     }, "initTemplate"));
     v(this, "measureAndCacheHeight", /* @__PURE__ */ a((i) => {
       if (e(this, q) !== null)
         return e(this, q);
-      if (e(this, $).length === 0)
+      if (e(this, M).length === 0)
         throw new Error("[RowManager] Template TRs are empty.");
       const t = i.querySelector("tbody.bindable") || i.querySelector("tbody");
       if (!t) return 24;
       t.querySelectorAll("tr:not(.nodata)").forEach((l) => l.remove());
       const s = t.querySelector("tr.nodata"), n = document.createDocumentFragment();
-      e(this, $).forEach((l) => {
+      e(this, M).forEach((l) => {
         n.appendChild(l.cloneNode(!0));
       }), s ? s.before(n) : t.appendChild(n);
       let o = 0;
@@ -269,8 +269,8 @@ const qe = class qe {
         if (c === 0)
           throw new Error(`[RowManager] Rendered TR[${g}] height is 0. Check CSS styles.`);
         o += c;
-      }), p(this, q, o), e(this, M) > 0) {
-        const l = Math.ceil(e(this, M) / e(this, q));
+      }), p(this, q, o), e(this, $) > 0) {
+        const l = Math.ceil(e(this, $) / e(this, q));
         p(this, H, l + 20);
       }
       return console.log(`[RowManager] Template Height Cached: ${e(this, q)}px | RowCount: ${e(this, H)}`), e(this, q);
@@ -292,13 +292,13 @@ const qe = class qe {
      * 🎯 캐시된 행 개수를 곧바로 가져와서 TR 뼈대 주입 (중복 계산 제거)
      */
     v(this, "renderRows", /* @__PURE__ */ a((i) => {
-      if (e(this, $).length === 0) return;
+      if (e(this, M).length === 0) return;
       const t = i.querySelector("tbody.bindable") || i.querySelector("tbody");
       if (!t) return;
       t.querySelectorAll("tr:not(.nodata)").forEach((r) => r.remove());
       const s = t.querySelector("tr.nodata"), n = document.createDocumentFragment(), o = e(this, H);
       for (let r = 0; r < o; r++)
-        e(this, $).forEach((l) => {
+        e(this, M).forEach((l) => {
           n.appendChild(l.cloneNode(!0));
         });
       s ? s.before(n) : t.appendChild(n), console.log(`[RowManager] Rendered ${o} sets into DOM.`);
@@ -309,10 +309,10 @@ const qe = class qe {
     p(this, X, i), e(this, ie).call(this);
   }
   get templateLength() {
-    return e(this, $).length || 1;
+    return e(this, M).length || 1;
   }
 };
-X = new WeakMap(), $ = new WeakMap(), q = new WeakMap(), I = new WeakMap(), M = new WeakMap(), H = new WeakMap(), ie = new WeakMap(), se = new WeakMap(), a(qe, "RowManager");
+X = new WeakMap(), M = new WeakMap(), q = new WeakMap(), I = new WeakMap(), $ = new WeakMap(), H = new WeakMap(), ie = new WeakMap(), se = new WeakMap(), a(qe, "RowManager");
 let pe = qe;
 var A, F, ne;
 const Z = class Z extends HTMLElement {
@@ -656,14 +656,6 @@ const Ce = class Ce {
                 nine-table-sheet.active {
                     display: block !important;
                 }
-                /* 🎯 생성된 .h 스플리터는 복수 시트일 때 기본적으로 가시화 */
-                nine-table-sheets-body nine-splitter.h {
-                    width: 4px;
-                    background: #e5e7eb;
-                    cursor: col-resize;
-                    flex-shrink: 0;
-                    display: ${o > 1 ? "block" : "none"};
-                }
                 nine-table-sheets-footer {
                     display: flex;
                     height: 32px;
@@ -693,17 +685,34 @@ const Ce = class Ce {
                     border-radius: 0 0 3px 3px;
                     user-select: none;
                 }
-                /* 🎯 기본적으로 모든 스플리터는 숨김 */
+                nine-table-sheets .nine-tab-item.active {
+                    background: #ffffff;
+                    color: #111827;
+                    font-weight: 600;
+                    border-bottom: 2px solid #2563eb;
+                }
+                nine-table-sheets .sheets-counter {
+                    font-size: 12px;
+                    color: #6b7280;
+                    padding-left: 12px;
+                    flex-shrink: 0;
+                }
+                
+                /* 🎯 기본적으로 모든 스플리터는 숨김 처리 */
                 nine-table-sheets-body nine-splitter.h {
+                    width: 4px;
+                    background: #e5e7eb;
+                    cursor: col-resize;
+                    flex-shrink: 0;
                     display: none;
                 }
 
-                /* 🎯 양쪽 시트가 모두 active 상태일 때만 그 사이의 스플리터 노출 */
-                nine-table-sheet.active + nine-splitter.h {
-                    display: block;
+                /* 🎯 양쪽 시트가 둘 다 active 상태일 때만 그 사이의 스플리터(.h) 노출 */
+                nine-table-sheet.active ~ nine-table-sheet.active {
+                    /* 다중 활성 영역 판정 */
                 }
-                nine-splitter.h + nine-table-sheet.active {
-                    /* 이 형태가 완성되면 양옆이 모두 켜진 것임 */
+                nine-table-sheet.active + nine-splitter.h + nine-table-sheet.active {
+                    display: block;
                 }
             </style>
             
@@ -733,13 +742,13 @@ const Ce = class Ce {
 };
 L = new WeakMap(), G = new WeakMap(), oe = new WeakMap(), J = new WeakMap(), le = new WeakMap(), a(Ce, "LayoutManager");
 let me = Ce;
-var W, V;
+var z, V;
 const Ae = class Ae {
   constructor(i) {
-    u(this, W);
+    u(this, z);
     u(this, V, -1);
-    v(this, "count", /* @__PURE__ */ a(() => e(this, W).rawRecords.length, "count"));
-    p(this, W, i);
+    v(this, "count", /* @__PURE__ */ a(() => e(this, z).rawRecords.length, "count"));
+    p(this, z, i);
   }
   get at() {
     return e(this, V);
@@ -747,16 +756,16 @@ const Ae = class Ae {
   set at(i) {
     var s, n;
     p(this, V, parseInt(i, 10));
-    const t = ((n = (s = e(this, W).owner).querySelector) == null ? void 0 : n.call(s, ".ng-container-body")) || e(this, W).owner.body;
+    const t = ((n = (s = e(this, z).owner).querySelector) == null ? void 0 : n.call(s, ".ng-container-body")) || e(this, z).owner.body;
     t && !t.querySelector(`tbody.bindable tr[data-row="${e(this, V)}"]`) && setTimeout(() => {
       var o, r;
-      (r = (o = e(this, W).owner).scrollTo_V1) == null || r.call(o, e(this, V));
+      (r = (o = e(this, z).owner).scrollTo_V1) == null || r.call(o, e(this, V));
     });
   }
 };
-W = new WeakMap(), V = new WeakMap(), a(Ae, "ngRow");
+z = new WeakMap(), V = new WeakMap(), a(Ae, "ngRow");
 let ve = Ae;
-var E, m, k, U, ae, z, ce, Q, he, de, K;
+var E, m, k, U, ae, W, ce, Q, he, de, K;
 const T = class T {
   constructor(i, t) {
     u(this, E);
@@ -764,15 +773,15 @@ const T = class T {
     u(this, k, []);
     u(this, U, []);
     u(this, ae, 0);
-    u(this, z, []);
+    u(this, W, []);
     u(this, ce, /* @__PURE__ */ a(() => {
-      p(this, z, []);
+      p(this, W, []);
       const i = e(this, E).template || [];
       Array.from(i).forEach((t) => {
         var s;
-        e(this, z).push(((s = t.getBoundingClientRect) == null ? void 0 : s.call(t).height) || 24);
+        e(this, W).push(((s = t.getBoundingClientRect) == null ? void 0 : s.call(t).height) || 24);
       }), (e(this, m).rawRecords || []).forEach((t) => {
-        t.__ng || (t.__ng = e(this, Q).call(this)), t.__ng.height = e(this, z).slice();
+        t.__ng || (t.__ng = e(this, Q).call(this)), t.__ng.height = e(this, W).slice();
       });
     }, "#initialize"));
     v(this, "set", /* @__PURE__ */ a((i) => {
@@ -782,10 +791,10 @@ const T = class T {
       rowState: T.ROW_STATE.EMPTY,
       deleted: !1,
       filtered: !1,
-      height: e(this, z).slice(),
+      height: e(this, W).slice(),
       o: {},
       c: {},
-      _: [0, 0, 0, 0, T.ROW_STATE.EMPTY, !1, !1, !0, !1, !0, !0, !1, e(this, z).slice(), -1, {}, {}]
+      _: [0, 0, 0, 0, T.ROW_STATE.EMPTY, !1, !1, !0, !1, !0, !0, !1, e(this, W).slice(), -1, {}, {}]
     }), "#getDefaultMeta"));
     v(this, "reset", /* @__PURE__ */ a(() => {
       p(this, k, []), p(this, U, []);
@@ -886,7 +895,7 @@ const T = class T {
     return ++He(this, ae)._;
   }
 };
-E = new WeakMap(), m = new WeakMap(), k = new WeakMap(), U = new WeakMap(), ae = new WeakMap(), z = new WeakMap(), ce = new WeakMap(), Q = new WeakMap(), he = new WeakMap(), de = new WeakMap(), K = new WeakMap(), a(T, "ngData"), // 🎯 행 상태 정의 상수를 클래스 내부로 내재화
+E = new WeakMap(), m = new WeakMap(), k = new WeakMap(), U = new WeakMap(), ae = new WeakMap(), W = new WeakMap(), ce = new WeakMap(), Q = new WeakMap(), he = new WeakMap(), de = new WeakMap(), K = new WeakMap(), a(T, "ngData"), // 🎯 행 상태 정의 상수를 클래스 내부로 내재화
 v(T, "ROW_STATE", {
   EMPTY: "EMPTY",
   NORMAL: "NORMAL",