@ninebone/table 0.0.8 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/nine-table.js +203 -57
  2. package/dist/nine-table.js.map +1 -1
  3. package/dist/nine-table.umd.js +71 -16
  4. package/dist/nine-table.umd.js.map +1 -1
  5. package/package.json +1 -1
package/dist/nine-table.js CHANGED
@@ -1,62 +1,200 @@
1
- var B = Object.defineProperty;
2
- var w = (n) => {
3
- throw TypeError(n);
1
+ var G = Object.defineProperty;
2
+ var R = (s) => {
3
+ throw TypeError(s);
4
4
  };
5
- var r = (n, e) => B(n, "name", { value: e, configurable: !0 });
6
- var f = (n, e, t) => e.has(n) || w("Cannot " + t);
7
- var s = (n, e, t) => (f(n, e, "read from private field"), t ? t.call(n) : e.get(n)), b = (n, e, t) => e.has(n) ? w("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, t), p = (n, e, t, a) => (f(n, e, "write to private field"), a ? a.call(n, t) : e.set(n, t), t), c = (n, e, t) => (f(n, e, "access private method"), t);
8
- import { trace as T } from "@ninebone/util";
9
- const g = class g extends T.constructor {
5
+ var a = (s, e) => G(s, "name", { value: e, configurable: !0 });
6
+ var k = (s, e, t) => e.has(s) || R("Cannot " + t);
7
+ var i = (s, e, t) => (k(s, e, "read from private field"), t ? t.call(s) : e.get(s)), h = (s, e, t) => e.has(s) ? R("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), y = (s, e, t, n) => (k(s, e, "write to private field"), n ? n.call(s, t) : e.set(s, t), t), u = (s, e, t) => (k(s, e, "access private method"), t);
8
+ import { trace as J } from "@ninebone/util";
9
+ const T = class T extends J.constructor {
10
10
  constructor() {
11
11
  super(), this.init("nine-table", "green");
12
12
  }
13
13
  };
14
- r(g, "Trace");
15
- let u = g;
16
- const k = new u();
17
- var o, i, l, E, S, $;
18
- const x = class x {
14
+ a(T, "Trace");
15
+ let E = T;
16
+ const w = new E();
17
+ var v, g, I, j;
18
+ const B = class B {
19
19
  constructor(e) {
20
- b(this, l);
21
- b(this, o);
22
- b(this, i, []);
23
- p(this, o, e);
20
+ h(this, g);
21
+ h(this, v);
22
+ y(this, v, e);
23
+ }
24
+ // [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)
25
+ initializeTable(e) {
26
+ return u(this, g, I).call(this, e), u(this, g, j).call(this, e), e.classList.add("nine-table-element"), e;
27
+ }
28
+ };
29
+ v = new WeakMap(), g = new WeakSet(), // [Private] colgroup 보정
30
+ I = /* @__PURE__ */ a(function(e) {
31
+ var o;
32
+ if (e.querySelector("colgroup")) return;
33
+ const t = ((o = e.querySelector("tbody tr")) == null ? void 0 : o.querySelectorAll("th, td").length) || 1, n = document.createElement("colgroup"), r = Math.max(Math.floor((e.clientWidth || 600) / t), 100);
34
+ for (let l = 0; l < t; l++) {
35
+ const f = document.createElement("col");
36
+ f.setAttribute("width", r), n.appendChild(f);
37
+ }
38
+ e.prepend(n);
39
+ }, "#ensureColgroup"), // [Private] thead 보정
40
+ j = /* @__PURE__ */ a(function(e) {
41
+ if (e.querySelector("thead")) return;
42
+ const t = document.createElement("thead"), n = e.querySelector("colgroup");
43
+ n ? n.after(t) : e.prepend(t);
44
+ }, "#ensureThead"), a(B, "TableInitializer");
45
+ let q = B;
46
+ var p, x, S, K;
47
+ const A = class A extends HTMLElement {
48
+ constructor() {
49
+ super();
50
+ h(this, S);
51
+ h(this, p, null);
52
+ h(this, x);
53
+ y(this, x, new q(this));
54
+ }
55
+ connectedCallback() {
56
+ u(this, S, K).call(this);
57
+ }
58
+ /**
59
+ * 외부(LayoutManager 등)에서 원본 테이블 엘리먼트를 주입받아 초기화 및 보정 수행
60
+ * @param {HTMLTableElement} tableEl
61
+ */
62
+ init(t) {
63
+ if (!t) return;
64
+ const n = t.cloneNode(!0);
65
+ y(this, p, i(this, x).initializeTable(n)), i(this, p).style.display = "table";
66
+ const r = this.querySelector(".sheet-content-container");
67
+ r && (r.innerHTML = "", r.appendChild(i(this, p))), w.log(`NineTableSheet initialized with table rows: ${this.getRowCount()}`);
68
+ }
69
+ getRowCount() {
70
+ return i(this, p) ? i(this, p).querySelectorAll("tbody tr").length : 0;
71
+ }
72
+ disconnectedCallback() {
73
+ this.innerHTML = "", w.log("NineTableSheet destroyed.");
74
+ }
75
+ };
76
+ p = new WeakMap(), x = new WeakMap(), S = new WeakSet(), K = /* @__PURE__ */ a(function() {
77
+ this.innerHTML = `
78
+ <style>
79
+ nine-table-sheet {
80
+ display: block;
81
+ width: 100%;
82
+ height: 100%;
83
+ overflow: auto;
84
+ position: relative;
85
+ box-sizing: border-box;
86
+ background: #ffffff;
87
+ }
88
+
89
+ nine-table-sheet .sheet-content-container {
90
+ width: 100%;
91
+ min-width: fit-content;
92
+ }
93
+
94
+ nine-table-sheet table {
95
+ border-collapse: collapse;
96
+ width: 100%;
97
+ table-layout: fixed;
98
+ }
99
+
100
+ nine-table-sheet th, nine-table-sheet td {
101
+ box-sizing: border-box;
102
+ overflow: hidden;
103
+ white-space: nowrap;
104
+ text-overflow: ellipsis;
105
+ padding: 6px 8px;
106
+ border: 1px solid #e5e7eb;
107
+ font-size: 12px;
108
+ color: #111827;
109
+ }
110
+
111
+ nine-table-sheet th {
112
+ background-color: #f9fafb;
113
+ font-weight: 600;
114
+ text-align: left;
115
+ }
116
+ </style>
117
+
118
+ <div class="sheet-content-container">
119
+ <!-- 테이블이 동적으로 주입되는 영역 -->
120
+ </div>
121
+ `;
122
+ }, "#render"), a(A, "NineTableSheet");
123
+ let L = A;
124
+ customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", L);
125
+ var b, c, d, W, N, D, F;
126
+ const z = class z {
127
+ constructor(e) {
128
+ h(this, d);
129
+ h(this, b);
130
+ h(this, c, []);
131
+ y(this, b, e);
24
132
  }
25
133
  render() {
26
- s(this, o).host.querySelectorAll("table").forEach((t) => {
27
- s(this, i).push(t), t.style.display = "none";
28
- }), c(this, l, E).call(this), c(this, l, S).call(this), c(this, l, $).call(this), s(this, i).length > 0 && this.switchTab(0);
134
+ i(this, b).host.querySelectorAll("table").forEach((t) => {
135
+ i(this, c).push(t), t.style.display = "none";
136
+ }), u(this, d, W).call(this), u(this, d, N).call(this), u(this, d, D).call(this), i(this, c).length > 0 && this.switchTab(0, !1);
29
137
  }
30
- switchTab(e) {
31
- s(this, i)[e] && (this.tabBar.querySelectorAll(".nine-tab-item").forEach((t, a) => {
32
- t.classList.toggle("active", a === e);
33
- }), this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((t, a) => {
34
- t.classList.toggle("active", a === e);
35
- }));
138
+ switchTab(e, t = !1) {
139
+ if (!i(this, c)[e]) return;
140
+ const n = this.tabBar.querySelectorAll(".nine-tab-item"), r = this.sheetsBody.querySelectorAll("nine-table-sheet");
141
+ if (!t)
142
+ n.forEach((l, f) => {
143
+ l.classList.toggle("active", f === e);
144
+ }), r.forEach((l, f) => {
145
+ l.classList.toggle("active", f === e);
146
+ });
147
+ else {
148
+ const l = n[e], f = this.tabBar.querySelectorAll(".nine-tab-item.active");
149
+ if (l.classList.contains("active") && f.length <= 1)
150
+ return;
151
+ l.classList.toggle("active");
152
+ const H = this.sheetsBody.querySelector(`nine-table-sheet[data-index="${e}"]`);
153
+ H && H.classList.toggle("active");
154
+ }
155
+ u(this, d, F).call(this);
156
+ const o = this.sheetsBody.querySelector("nine-table-sheet.active");
157
+ if (o && typeof o.getRowCount == "function") {
158
+ const l = i(this, b).querySelector("#row-count");
159
+ l && (l.textContent = o.getRowCount().toLocaleString());
160
+ }
36
161
  }
37
162
  };
38
- o = new WeakMap(), i = new WeakMap(), l = new WeakSet(), E = /* @__PURE__ */ r(function() {
39
- const e = s(this, i).map((q, h) => `
40
- <nine-table-sheet class="${h === 0 ? "active" : ""}" data-index="${h}"></nine-table-sheet>
41
- `).join(""), t = s(this, i).map((q, h) => `
42
- <div class="nine-tab-item ${h === 0 ? "active" : ""}" data-index="${h}">Sheet ${h + 1}</div>
43
- `).join(""), a = s(this, i)[0] ? s(this, i)[0].querySelectorAll("tbody tr").length : 0;
44
- s(this, o).innerHTML = `
163
+ b = new WeakMap(), c = new WeakMap(), d = new WeakSet(), W = /* @__PURE__ */ a(function() {
164
+ const e = i(this, c).map((r, o) => {
165
+ const l = `<nine-table-sheet class="${o === 0 ? "active" : ""}" data-index="${o}"></nine-table-sheet>`;
166
+ return o === 0 ? l : `<nine-splitter data-split-index="${o}"></nine-splitter>${l}`;
167
+ }).join(""), t = i(this, c).map((r, o) => `
168
+ <div class="nine-tab-item ${o === 0 ? "active" : ""}" data-index="${o}">Sheet ${o + 1}</div>
169
+ `).join(""), n = i(this, c)[0] ? i(this, c)[0].querySelectorAll("tbody tr").length : 0;
170
+ i(this, b).innerHTML = `
45
171
  <style>
46
172
  :host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }
47
173
  nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
48
- nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }
49
- nine-table-summary { display: none; }
174
+
175
+ nine-table-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; position: relative; }
176
+
177
+ nine-table-summary { display: none; width: 250px; flex-shrink: 0; border-right: 1px solid #e5e7eb; }
178
+ nine-splitter:not([data-split-index]) { width: 4px; background: #e5e7eb; cursor: col-resize; flex-shrink: 0; }
179
+
50
180
  nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; }
51
- nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }
181
+ nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: flex; flex-direction: row; }
52
182
 
53
- nine-table-sheet { display: none; width: 100%; height: 100%; }
54
- nine-table-sheet.active { display: block; }
183
+ /* 비활성화된 시트는 완전히 숨김 처리 */
184
+ nine-table-sheet { display: none; width: 0; height: 100%; flex: 0; overflow: auto; }
185
+ /* active 상태일 때만 공간을 나누어 표시 */
186
+ nine-table-sheet.active { display: block; flex: 1; width: auto; }
187
+
188
+ nine-table-sheets-body nine-splitter { width: 4px; background: #e5e7eb; cursor: col-resize; flex-shrink: 0; display: none; }
189
+ /* active 시트 사이에 위치한 스플리터만 화면에 노출 */
190
+ nine-table-sheets-body nine-splitter.active { display: block; }
55
191
 
56
192
  nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }
57
193
  .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }
58
- .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-bottom: none; border-radius: 3px 3px 0 0; }
59
- .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }
194
+
195
+ .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-top: none; border-radius: 0 0 3px 3px; user-select: none; }
196
+ .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-bottom: 2px solid #2563eb; }
197
+
60
198
  .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }
61
199
  nine-table-analysis { display: none; }
62
200
  nine-table-footer { display: none; }
@@ -65,6 +203,7 @@ o = new WeakMap(), i = new WeakMap(), l = new WeakSet(), E = /* @__PURE__ */ r(f
65
203
  <nine-table-header></nine-table-header>
66
204
  <nine-table-body>
67
205
  <nine-table-summary></nine-table-summary>
206
+ <nine-splitter></nine-splitter>
68
207
  <nine-table-sheets>
69
208
  <nine-table-sheets-body>
70
209
  ${e}
@@ -73,39 +212,46 @@ o = new WeakMap(), i = new WeakMap(), l = new WeakSet(), E = /* @__PURE__ */ r(f
73
212
  <div class="nine-tab-bar">
74
213
  ${t}
75
214
  </div>
76
- <div class="sheets-counter">Total : <span id="row-count">${a.toLocaleString()}</span></div>
215
+ <div class="sheets-counter">Total : <span id="row-count">${n.toLocaleString()}</span></div>
77
216
  </nine-table-sheets-footer>
78
217
  </nine-table-sheets>
79
218
  <nine-table-analysis></nine-table-analysis>
80
219
  </nine-table-body>
81
220
  <nine-table-footer></nine-table-footer>
82
221
  `;
83
- }, "#renderLayoutShell"), S = /* @__PURE__ */ r(function() {
84
- this.sheetsBody = s(this, o).querySelector("nine-table-sheets-body"), this.tabBar = s(this, o).querySelector(".nine-tab-bar"), this.tabBar.addEventListener("click", (e) => {
222
+ }, "#renderLayoutShell"), N = /* @__PURE__ */ a(function() {
223
+ this.sheetsBody = i(this, b).querySelector("nine-table-sheets-body"), this.tabBar = i(this, b).querySelector(".nine-tab-bar"), this.tabBar.addEventListener("click", (e) => {
85
224
  const t = e.target.closest(".nine-tab-item");
86
- t && this.switchTab(parseInt(t.dataset.index, 10));
225
+ if (!t) return;
226
+ const n = e.ctrlKey || e.metaKey;
227
+ this.switchTab(parseInt(t.dataset.index, 10), n);
228
+ });
229
+ }, "#bindElements"), D = /* @__PURE__ */ a(function() {
230
+ this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((t, n) => {
231
+ i(this, c)[n] && t.init(i(this, c)[n]);
87
232
  });
88
- }, "#bindElements"), $ = /* @__PURE__ */ r(function() {
89
- this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((t, a) => {
90
- s(this, i)[a] && t.init(s(this, i)[a]);
233
+ }, "#initSheets"), F = /* @__PURE__ */ a(function() {
234
+ this.sheetsBody.querySelectorAll("nine-splitter").forEach((t) => {
235
+ const n = parseInt(t.dataset.splitIndex, 10), r = this.sheetsBody.querySelector(`nine-table-sheet[data-index="${n - 1}"]`), o = this.sheetsBody.querySelector(`nine-table-sheet[data-index="${n}"]`);
236
+ r && o && r.classList.contains("active") && o.classList.contains("active") ? t.classList.add("active") : t.classList.remove("active");
91
237
  });
92
- }, "#initSheets"), r(x, "LayoutManager");
93
- let y = x;
94
- var d;
95
- const v = class v extends HTMLElement {
238
+ }, "#updateSplitters"), a(z, "LayoutManager");
239
+ let C = z;
240
+ var m;
241
+ const M = class M extends HTMLElement {
96
242
  constructor() {
97
243
  super();
98
- b(this, d, !1);
244
+ h(this, m, !1);
99
245
  this.attachShadow({ mode: "open" });
100
246
  }
101
247
  connectedCallback() {
102
- s(this, d) || (this.layoutManager = new y(this.shadowRoot), this.layoutManager.render(), p(this, d, !0), k.log("NineTable connected."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } })));
248
+ i(this, m) || (this.layoutManager = new C(this.shadowRoot), this.layoutManager.render(), y(this, m, !0), w.log("NineTable connected."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } })));
103
249
  }
104
250
  disconnectedCallback() {
105
- k.log("NineTable disconnected.");
251
+ w.log("NineTable disconnected.");
106
252
  }
107
253
  };
108
- d = new WeakMap(), r(v, "NineTable");
109
- let m = v;
110
- customElements.get("nine-table") || customElements.define("nine-table", m);
254
+ m = new WeakMap(), a(M, "NineTable");
255
+ let $ = M;
256
+ customElements.get("nine-table") || customElements.define("nine-table", $);
111
257
  //# sourceMappingURL=nine-table.js.map
package/dist/nine-table.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nine-table.js","sources":["../src/external/NoPeer.js","../src/ui/LayoutManager.js","../src/core/nine-table.js"],"sourcesContent":["import { trace as traceOrigin } from '@ninebone/util';\n\nexport class Trace extends traceOrigin.constructor {\n constructor() {\n super();\n this.init(\"nine-table\", \"green\");\n }\n}\n\nexport const trace = new Trace();","//import './nine-table-sheet.js';\n\nexport class LayoutManager {\n #shadowRoot;\n #tables = [];\n\n constructor(shadowRoot) {\n this.#shadowRoot = shadowRoot;\n }\n\n render() {\n // shadowRoot 내부(또는 호스트 범위)에서 table 태그들을 수집 후 숨김 처리\n const rawTables = this.#shadowRoot.host.querySelectorAll('table');\n rawTables.forEach(tbl => {\n this.#tables.push(tbl);\n tbl.style.display = 'none';\n });\n\n this.#renderLayoutShell();\n this.#bindElements();\n this.#initSheets();\n\n if (this.#tables.length > 0) {\n this.switchTab(0);\n }\n }\n\n #renderLayoutShell() {\n const sheetsHtml = this.#tables.map((_, idx) => `\n <nine-table-sheet class=\"${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\"></nine-table-sheet>\n `).join('');\n\n const tabsHtml = this.#tables.map((_, idx) => `\n <div class=\"nine-tab-item ${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\">Sheet ${idx + 1}</div>\n `).join('');\n\n const totalRowCount = this.#tables[0] ? this.#tables[0].querySelectorAll('tbody tr').length : 0;\n\n this.#shadowRoot.innerHTML = `\n <style>\n :host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }\n nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }\n nine-table-summary { display: none; }\n nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; }\n nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }\n \n nine-table-sheet { display: none; width: 100%; height: 100%; }\n nine-table-sheet.active { display: block; }\n\n nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }\n .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }\n .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-bottom: none; border-radius: 3px 3px 0 0; }\n .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }\n .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n nine-table-analysis { display: none; }\n nine-table-footer { display: none; }\n </style>\n \n <nine-table-header></nine-table-header>\n <nine-table-body>\n <nine-table-summary></nine-table-summary>\n <nine-table-sheets>\n <nine-table-sheets-body>\n ${sheetsHtml}\n </nine-table-sheets-body>\n <nine-table-sheets-footer>\n <div class=\"nine-tab-bar\">\n ${tabsHtml}\n </div>\n <div class=\"sheets-counter\">Total : <span id=\"row-count\">${totalRowCount.toLocaleString()}</span></div>\n </nine-table-sheets-footer>\n </nine-table-sheets>\n <nine-table-analysis></nine-table-analysis>\n </nine-table-body>\n <nine-table-footer></nine-table-footer>\n `;\n }\n\n #bindElements() {\n this.sheetsBody = this.#shadowRoot.querySelector('nine-table-sheets-body');\n this.tabBar = this.#shadowRoot.querySelector('.nine-tab-bar');\n\n this.tabBar.addEventListener('click', (e) => {\n const tabItem = e.target.closest('.nine-tab-item');\n if (!tabItem) return;\n this.switchTab(parseInt(tabItem.dataset.index, 10));\n });\n }\n\n #initSheets() {\n const sheetElements = this.sheetsBody.querySelectorAll('nine-table-sheet');\n sheetElements.forEach((sheetEl, idx) => {\n if (this.#tables[idx]) {\n sheetEl.init(this.#tables[idx]);\n }\n });\n }\n\n switchTab(index) {\n if (!this.#tables[index]) return;\n\n this.tabBar.querySelectorAll('.nine-tab-item').forEach((tab, idx) => {\n tab.classList.toggle('active', idx === index);\n });\n\n this.sheetsBody.querySelectorAll('nine-table-sheet').forEach((sheet, idx) => {\n sheet.classList.toggle('active', idx === index);\n });\n }\n}","import {trace} from \"@nopeer\";\nimport { LayoutManager } from '../ui/LayoutManager.js';\n\nexport default class NineTable extends HTMLElement {\n #created = false;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n if (this.#created) return;\n\n // shadowRoot 하나만 넘겨서 내부에서 레이아웃 및 테이블 수집 처리\n this.layoutManager = new LayoutManager(this.shadowRoot);\n this.layoutManager.render();\n\n this.#created = true;\n trace.log('NineTable connected.');\n\n this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n }\n\n disconnectedCallback() {\n trace.log('NineTable disconnected.');\n }\n}\n\nif (!customElements.get('nine-table')) {\n customElements.define('nine-table', NineTable);\n}"],"names":["_Trace","traceOrigin","__name","Trace","trace","_LayoutManager","shadowRoot","__privateAdd","_LayoutManager_instances","_shadowRoot","_tables","__privateSet","__privateGet","tbl","__privateMethod","renderLayoutShell_fn","bindElements_fn","initSheets_fn","index","tab","idx","sheet","sheetsHtml","_","tabsHtml","totalRowCount","tabItem","sheetEl","LayoutManager","_NineTable","_created","NineTable"],"mappings":"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"}
1
+ {"version":3,"file":"nine-table.js","sources":["../src/external/NoPeer.js","../src/ui/TableInitializer.js","../src/ui/nine-table-sheet.js","../src/ui/LayoutManager.js","../src/core/nine-table.js"],"sourcesContent":["import { trace as traceOrigin } from '@ninebone/util';\n\nexport class Trace extends traceOrigin.constructor {\n constructor() {\n super();\n this.init(\"nine-table\", \"green\");\n }\n}\n\nexport const trace = new Trace();","export class TableInitializer {\n #container;\n\n constructor(container) {\n this.#container = container;\n }\n\n // [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)\n initializeTable(tbl) {\n this.#ensureColgroup(tbl);\n this.#ensureThead(tbl);\n\n tbl.classList.add('nine-table-element');\n return tbl;\n }\n\n // [Private] colgroup 보정\n #ensureColgroup(tbl) {\n if (tbl.querySelector('colgroup')) return;\n\n const colCount = tbl.querySelector('tbody tr')?.querySelectorAll('th, td').length || 1;\n const colgroup = document.createElement('colgroup');\n const defaultWidth = Math.max(Math.floor((tbl.clientWidth || 600) / colCount), 100);\n\n for (let i = 0; i < colCount; i++) {\n const col = document.createElement('col');\n col.setAttribute('width', defaultWidth);\n colgroup.appendChild(col);\n }\n tbl.prepend(colgroup);\n }\n\n // [Private] thead 보정\n #ensureThead(tbl) {\n if (tbl.querySelector('thead')) return;\n\n const thead = document.createElement('thead');\n const colgroup = tbl.querySelector('colgroup');\n if (colgroup) {\n colgroup.after(thead);\n } else {\n tbl.prepend(thead);\n }\n }\n}","import { trace } from \"@nopeer\";\nimport { TableInitializer } from \"./TableInitializer.js\"; // 경로에 맞게 조정 필요\n\nexport class NineTableSheet extends HTMLElement {\n #tableElement = null;\n #initializer;\n\n constructor() {\n super();\n this.#initializer = new TableInitializer(this);\n }\n\n connectedCallback() {\n this.#render();\n }\n\n /**\n * 외부(LayoutManager 등)에서 원본 테이블 엘리먼트를 주입받아 초기화 및 보정 수행\n * @param {HTMLTableElement} tableEl\n */\n init(tableEl) {\n if (!tableEl) return;\n\n // 원본 테이블 복제 후 TableInitializer를 통한 구조 보정\n const clonedTable = tableEl.cloneNode(true);\n this.#tableElement = this.#initializer.initializeTable(clonedTable);\n this.#tableElement.style.display = 'table';\n\n const container = this.querySelector('.sheet-content-container');\n if (container) {\n container.innerHTML = '';\n container.appendChild(this.#tableElement);\n }\n\n trace.log(`NineTableSheet initialized with table rows: ${this.getRowCount()}`);\n }\n\n getRowCount() {\n if (!this.#tableElement) return 0;\n return this.#tableElement.querySelectorAll('tbody tr').length;\n }\n\n #render() {\n this.innerHTML = `\n <style>\n nine-table-sheet {\n display: block;\n width: 100%;\n height: 100%;\n overflow: auto;\n position: relative;\n box-sizing: border-box;\n background: #ffffff;\n }\n\n nine-table-sheet .sheet-content-container {\n width: 100%;\n min-width: fit-content;\n }\n\n nine-table-sheet table {\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n }\n\n nine-table-sheet th, nine-table-sheet td {\n box-sizing: border-box;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding: 6px 8px;\n border: 1px solid #e5e7eb;\n font-size: 12px;\n color: #111827;\n }\n\n nine-table-sheet th {\n background-color: #f9fafb;\n font-weight: 600;\n text-align: left;\n }\n </style>\n \n <div class=\"sheet-content-container\">\n <!-- 테이블이 동적으로 주입되는 영역 -->\n </div>\n `;\n }\n\n disconnectedCallback() {\n this.innerHTML = '';\n trace.log('NineTableSheet destroyed.');\n }\n}\n\nif (!customElements.get('nine-table-sheet')) {\n customElements.define('nine-table-sheet', NineTableSheet);\n}\n","import './nine-table-sheet.js';\n// import './nine-splitter.js';\n\nexport class LayoutManager {\n #shadowRoot;\n #tables = [];\n\n constructor(shadowRoot) {\n this.#shadowRoot = shadowRoot;\n }\n\n render() {\n const rawTables = this.#shadowRoot.host.querySelectorAll('table');\n rawTables.forEach(tbl => {\n this.#tables.push(tbl);\n tbl.style.display = 'none';\n });\n\n this.#renderLayoutShell();\n this.#bindElements();\n this.#initSheets();\n\n if (this.#tables.length > 0) {\n this.switchTab(0, false);\n }\n }\n\n #renderLayoutShell() {\n const sheetsHtml = this.#tables.map((_, idx) => {\n const sheet = `<nine-table-sheet class=\"${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\"></nine-table-sheet>`;\n if (idx === 0) return sheet;\n return `<nine-splitter data-split-index=\"${idx}\"></nine-splitter>${sheet}`;\n }).join('');\n\n const tabsHtml = this.#tables.map((_, idx) => `\n <div class=\"nine-tab-item ${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\">Sheet ${idx + 1}</div>\n `).join('');\n\n const totalRowCount = this.#tables[0] ? this.#tables[0].querySelectorAll('tbody tr').length : 0;\n\n this.#shadowRoot.innerHTML = `\n <style>\n :host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }\n nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n \n nine-table-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; position: relative; }\n \n nine-table-summary { display: none; width: 250px; flex-shrink: 0; border-right: 1px solid #e5e7eb; }\n nine-splitter:not([data-split-index]) { width: 4px; background: #e5e7eb; cursor: col-resize; flex-shrink: 0; }\n \n nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; }\n nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: flex; flex-direction: row; }\n \n /* 비활성화된 시트는 완전히 숨김 처리 */\n nine-table-sheet { display: none; width: 0; height: 100%; flex: 0; overflow: auto; }\n /* active 상태일 때만 공간을 나누어 표시 */\n nine-table-sheet.active { display: block; flex: 1; width: auto; }\n\n nine-table-sheets-body nine-splitter { width: 4px; background: #e5e7eb; cursor: col-resize; flex-shrink: 0; display: none; }\n /* active 시트 사이에 위치한 스플리터만 화면에 노출 */\n nine-table-sheets-body nine-splitter.active { display: block; }\n\n nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }\n .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }\n \n .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-top: none; border-radius: 0 0 3px 3px; user-select: none; }\n .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-bottom: 2px solid #2563eb; }\n \n .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n nine-table-analysis { display: none; }\n nine-table-footer { display: none; }\n </style>\n \n <nine-table-header></nine-table-header>\n <nine-table-body>\n <nine-table-summary></nine-table-summary>\n <nine-splitter></nine-splitter>\n <nine-table-sheets>\n <nine-table-sheets-body>\n ${sheetsHtml}\n </nine-table-sheets-body>\n <nine-table-sheets-footer>\n <div class=\"nine-tab-bar\">\n ${tabsHtml}\n </div>\n <div class=\"sheets-counter\">Total : <span id=\"row-count\">${totalRowCount.toLocaleString()}</span></div>\n </nine-table-sheets-footer>\n </nine-table-sheets>\n <nine-table-analysis></nine-table-analysis>\n </nine-table-body>\n <nine-table-footer></nine-table-footer>\n `;\n }\n\n #bindElements() {\n this.sheetsBody = this.#shadowRoot.querySelector('nine-table-sheets-body');\n this.tabBar = this.#shadowRoot.querySelector('.nine-tab-bar');\n\n this.tabBar.addEventListener('click', (e) => {\n const tabItem = e.target.closest('.nine-tab-item');\n if (!tabItem) return;\n\n // Ctrl 키나 Cmd 키를 누른 상태인지 확인\n const isMultiSelect = e.ctrlKey || e.metaKey;\n this.switchTab(parseInt(tabItem.dataset.index, 10), isMultiSelect);\n });\n }\n\n #initSheets() {\n const sheetElements = this.sheetsBody.querySelectorAll('nine-table-sheet');\n sheetElements.forEach((sheetEl, idx) => {\n if (this.#tables[idx]) {\n sheetEl.init(this.#tables[idx]);\n }\n });\n }\n\n switchTab(index, isMultiSelect = false) {\n if (!this.#tables[index]) return;\n\n const tabItems = this.tabBar.querySelectorAll('.nine-tab-item');\n const sheetElements = this.sheetsBody.querySelectorAll('nine-table-sheet');\n\n if (!isMultiSelect) {\n // 단일 선택 시 기존 active 초기화 후 선택한 탭만 활성화\n tabItems.forEach((tab, idx) => {\n tab.classList.toggle('active', idx === index);\n });\n sheetElements.forEach((sheet, idx) => {\n sheet.classList.toggle('active', idx === index);\n });\n } else {\n // Ctrl + 클릭 시 다중 선택 (이미 active 상태면 토글해서 해제 가능하되 최소 1개는 유지)\n const clickedTab = tabItems[index];\n const activeTabs = this.tabBar.querySelectorAll('.nine-tab-item.active');\n\n if (clickedTab.classList.contains('active') && activeTabs.length <= 1) {\n return; // 최소 1개는 항상 active 유지\n }\n\n clickedTab.classList.toggle('active');\n const targetSheet = this.sheetsBody.querySelector(`nine-table-sheet[data-index=\"${index}\"]`);\n if (targetSheet) {\n targetSheet.classList.toggle('active');\n }\n }\n\n // 활성화된 시트들 사이에 있는 스플리터 가시성 동적 제어\n this.#updateSplitters();\n\n // 카운터 갱신 (마지막으로 활성화된 시트 기준)\n const activeSheet = this.sheetsBody.querySelector(`nine-table-sheet.active`);\n if (activeSheet && typeof activeSheet.getRowCount === 'function') {\n const rowCountEl = this.#shadowRoot.querySelector('#row-count');\n if (rowCountEl) {\n rowCountEl.textContent = activeSheet.getRowCount().toLocaleString();\n }\n }\n }\n\n #updateSplitters() {\n const splitters = this.sheetsBody.querySelectorAll('nine-splitter');\n splitters.forEach(splitter => {\n const splitIndex = parseInt(splitter.dataset.splitIndex, 10);\n const leftSheet = this.sheetsBody.querySelector(`nine-table-sheet[data-index=\"${splitIndex - 1}\"]`);\n const rightSheet = this.sheetsBody.querySelector(`nine-table-sheet[data-index=\"${splitIndex}\"]`);\n\n // 왼쪽과 오른쪽 시트가 모두 active 상태일 때만 스플리터를 노출\n if (leftSheet && rightSheet && leftSheet.classList.contains('active') && rightSheet.classList.contains('active')) {\n splitter.classList.add('active');\n } else {\n splitter.classList.remove('active');\n }\n });\n }\n}","import {trace} from \"@nopeer\";\nimport { LayoutManager } from '../ui/LayoutManager.js';\n\nexport default class NineTable extends HTMLElement {\n #created = false;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n if (this.#created) return;\n\n // shadowRoot 하나만 넘겨서 내부에서 레이아웃 및 테이블 수집 처리\n this.layoutManager = new LayoutManager(this.shadowRoot);\n this.layoutManager.render();\n\n this.#created = true;\n trace.log('NineTable connected.');\n\n this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n }\n\n disconnectedCallback() {\n trace.log('NineTable disconnected.');\n }\n}\n\nif (!customElements.get('nine-table')) {\n customElements.define('nine-table', NineTable);\n}"],"names":["_Trace","traceOrigin","__name","Trace","trace","_TableInitializer","container","__privateAdd","_TableInitializer_instances","_container","__privateSet","tbl","__privateMethod","ensureColgroup_fn","ensureThead_fn","colCount","_a","colgroup","defaultWidth","i","col","thead","TableInitializer","_NineTableSheet","_NineTableSheet_instances","_tableElement","_initializer","render_fn","tableEl","clonedTable","__privateGet","NineTableSheet","_LayoutManager","shadowRoot","_LayoutManager_instances","_shadowRoot","_tables","renderLayoutShell_fn","bindElements_fn","initSheets_fn","index","isMultiSelect","tabItems","sheetElements","tab","idx","sheet","clickedTab","activeTabs","targetSheet","updateSplitters_fn","activeSheet","rowCountEl","sheetsHtml","_","tabsHtml","totalRowCount","tabItem","sheetEl","splitter","splitIndex","leftSheet","rightSheet","LayoutManager","_NineTable","_created","NineTable"],"mappings":"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"}
package/dist/nine-table.umd.js CHANGED
@@ -1,23 +1,77 @@
1
- (function(e,t){typeof exports=="object"&&typeof module<"u"?t(require("@ninebone/util")):typeof define=="function"&&define.amd?define(["@ninebone/util"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.NineboneUtil))})(this,function(e){"use strict";var $=Object.defineProperty;var k=e=>{throw TypeError(e)};var d=(e,t)=>$(e,"name",{value:t,configurable:!0});var v=(e,t,n)=>t.has(e)||k("Cannot "+n);var i=(e,t,n)=>(v(e,t,"read from private field"),n?n.call(e):t.get(e)),p=(e,t,n)=>t.has(e)?k("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,n),w=(e,t,n,b)=>(v(e,t,"write to private field"),b?b.call(e,n):t.set(e,n),n),u=(e,t,n)=>(v(e,t,"access private method"),n);var l,o,r,E,S,q,f;const m=class m extends e.trace.constructor{constructor(){super(),this.init("nine-table","green")}};d(m,"Trace");let t=m;const n=new t,g=class g{constructor(a){p(this,r);p(this,l);p(this,o,[]);w(this,l,a)}render(){i(this,l).host.querySelectorAll("table").forEach(s=>{i(this,o).push(s),s.style.display="none"}),u(this,r,E).call(this),u(this,r,S).call(this),u(this,r,q).call(this),i(this,o).length>0&&this.switchTab(0)}switchTab(a){i(this,o)[a]&&(this.tabBar.querySelectorAll(".nine-tab-item").forEach((s,h)=>{s.classList.toggle("active",h===a)}),this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((s,h)=>{s.classList.toggle("active",h===a)}))}};l=new WeakMap,o=new WeakMap,r=new WeakSet,E=d(function(){const a=i(this,o).map((T,c)=>`
2
- <nine-table-sheet class="${c===0?"active":""}" data-index="${c}"></nine-table-sheet>
3
- `).join(""),s=i(this,o).map((T,c)=>`
4
- <div class="nine-tab-item ${c===0?"active":""}" data-index="${c}">Sheet ${c+1}</div>
5
- `).join(""),h=i(this,o)[0]?i(this,o)[0].querySelectorAll("tbody tr").length:0;i(this,l).innerHTML=`
1
+ (function(t,n){typeof exports=="object"&&typeof module<"u"?n(require("@ninebone/util")):typeof define=="function"&&define.amd?define(["@ninebone/util"],n):(t=typeof globalThis<"u"?globalThis:t||self,n(t.NineboneUtil))})(this,function(t){"use strict";var F=Object.defineProperty;var R=t=>{throw TypeError(t)};var c=(t,n)=>F(t,"name",{value:n,configurable:!0});var M=(t,n,a)=>n.has(t)||R("Cannot "+a);var s=(t,n,a)=>(M(t,n,"read from private field"),a?a.call(t):n.get(t)),f=(t,n,a)=>n.has(t)?R("Cannot add the same private member more than once"):n instanceof WeakSet?n.add(t):n.set(t,a),w=(t,n,a,x)=>(M(t,n,"write to private field"),x?x.call(t,a):n.set(t,a),a),g=(t,n,a)=>(M(t,n,"access private method"),a);var k,m,j,I,p,v,q,K,u,h,b,N,W,U,D,S;const T=class T extends t.trace.constructor{constructor(){super(),this.init("nine-table","green")}};c(T,"Trace");let n=T;const a=new n,$=class ${constructor(e){f(this,m);f(this,k);w(this,k,e)}initializeTable(e){return g(this,m,j).call(this,e),g(this,m,I).call(this,e),e.classList.add("nine-table-element"),e}};k=new WeakMap,m=new WeakSet,j=c(function(e){var l;if(e.querySelector("colgroup"))return;const i=((l=e.querySelector("tbody tr"))==null?void 0:l.querySelectorAll("th, td").length)||1,o=document.createElement("colgroup"),d=Math.max(Math.floor((e.clientWidth||600)/i),100);for(let r=0;r<i;r++){const y=document.createElement("col");y.setAttribute("width",d),o.appendChild(y)}e.prepend(o)},"#ensureColgroup"),I=c(function(e){if(e.querySelector("thead"))return;const i=document.createElement("thead"),o=e.querySelector("colgroup");o?o.after(i):e.prepend(i)},"#ensureThead"),c($,"TableInitializer");let x=$;const B=class B extends HTMLElement{constructor(){super();f(this,q);f(this,p,null);f(this,v);w(this,v,new x(this))}connectedCallback(){g(this,q,K).call(this)}init(i){if(!i)return;const o=i.cloneNode(!0);w(this,p,s(this,v).initializeTable(o)),s(this,p).style.display="table";const d=this.querySelector(".sheet-content-container");d&&(d.innerHTML="",d.appendChild(s(this,p))),a.log(`NineTableSheet initialized with table rows: ${this.getRowCount()}`)}getRowCount(){return s(this,p)?s(this,p).querySelectorAll("tbody tr").length:0}disconnectedCallback(){this.innerHTML="",a.log("NineTableSheet destroyed.")}};p=new WeakMap,v=new WeakMap,q=new WeakSet,K=c(function(){this.innerHTML=`
2
+ <style>
3
+ nine-table-sheet {
4
+ display: block;
5
+ width: 100%;
6
+ height: 100%;
7
+ overflow: auto;
8
+ position: relative;
9
+ box-sizing: border-box;
10
+ background: #ffffff;
11
+ }
12
+
13
+ nine-table-sheet .sheet-content-container {
14
+ width: 100%;
15
+ min-width: fit-content;
16
+ }
17
+
18
+ nine-table-sheet table {
19
+ border-collapse: collapse;
20
+ width: 100%;
21
+ table-layout: fixed;
22
+ }
23
+
24
+ nine-table-sheet th, nine-table-sheet td {
25
+ box-sizing: border-box;
26
+ overflow: hidden;
27
+ white-space: nowrap;
28
+ text-overflow: ellipsis;
29
+ padding: 6px 8px;
30
+ border: 1px solid #e5e7eb;
31
+ font-size: 12px;
32
+ color: #111827;
33
+ }
34
+
35
+ nine-table-sheet th {
36
+ background-color: #f9fafb;
37
+ font-weight: 600;
38
+ text-align: left;
39
+ }
40
+ </style>
41
+
42
+ <div class="sheet-content-container">
43
+ <!-- 테이블이 동적으로 주입되는 영역 -->
44
+ </div>
45
+ `},"#render"),c(B,"NineTableSheet");let E=B;customElements.get("nine-table-sheet")||customElements.define("nine-table-sheet",E);const A=class A{constructor(e){f(this,b);f(this,u);f(this,h,[]);w(this,u,e)}render(){s(this,u).host.querySelectorAll("table").forEach(i=>{s(this,h).push(i),i.style.display="none"}),g(this,b,N).call(this),g(this,b,W).call(this),g(this,b,U).call(this),s(this,h).length>0&&this.switchTab(0,!1)}switchTab(e,i=!1){if(!s(this,h)[e])return;const o=this.tabBar.querySelectorAll(".nine-tab-item"),d=this.sheetsBody.querySelectorAll("nine-table-sheet");if(!i)o.forEach((r,y)=>{r.classList.toggle("active",y===e)}),d.forEach((r,y)=>{r.classList.toggle("active",y===e)});else{const r=o[e],y=this.tabBar.querySelectorAll(".nine-tab-item.active");if(r.classList.contains("active")&&y.length<=1)return;r.classList.toggle("active");const H=this.sheetsBody.querySelector(`nine-table-sheet[data-index="${e}"]`);H&&H.classList.toggle("active")}g(this,b,D).call(this);const l=this.sheetsBody.querySelector("nine-table-sheet.active");if(l&&typeof l.getRowCount=="function"){const r=s(this,u).querySelector("#row-count");r&&(r.textContent=l.getRowCount().toLocaleString())}}};u=new WeakMap,h=new WeakMap,b=new WeakSet,N=c(function(){const e=s(this,h).map((d,l)=>{const r=`<nine-table-sheet class="${l===0?"active":""}" data-index="${l}"></nine-table-sheet>`;return l===0?r:`<nine-splitter data-split-index="${l}"></nine-splitter>${r}`}).join(""),i=s(this,h).map((d,l)=>`
46
+ <div class="nine-tab-item ${l===0?"active":""}" data-index="${l}">Sheet ${l+1}</div>
47
+ `).join(""),o=s(this,h)[0]?s(this,h)[0].querySelectorAll("tbody tr").length:0;s(this,u).innerHTML=`
6
48
  <style>
7
49
  :host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }
8
50
  nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
9
- nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }
10
- nine-table-summary { display: none; }
51
+
52
+ nine-table-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; position: relative; }
53
+
54
+ nine-table-summary { display: none; width: 250px; flex-shrink: 0; border-right: 1px solid #e5e7eb; }
55
+ nine-splitter:not([data-split-index]) { width: 4px; background: #e5e7eb; cursor: col-resize; flex-shrink: 0; }
56
+
11
57
  nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; }
12
- nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }
58
+ nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: flex; flex-direction: row; }
13
59
 
14
- nine-table-sheet { display: none; width: 100%; height: 100%; }
15
- nine-table-sheet.active { display: block; }
60
+ /* 비활성화된 시트는 완전히 숨김 처리 */
61
+ nine-table-sheet { display: none; width: 0; height: 100%; flex: 0; overflow: auto; }
62
+ /* active 상태일 때만 공간을 나누어 표시 */
63
+ nine-table-sheet.active { display: block; flex: 1; width: auto; }
64
+
65
+ nine-table-sheets-body nine-splitter { width: 4px; background: #e5e7eb; cursor: col-resize; flex-shrink: 0; display: none; }
66
+ /* active 시트 사이에 위치한 스플리터만 화면에 노출 */
67
+ nine-table-sheets-body nine-splitter.active { display: block; }
16
68
 
17
69
  nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }
18
70
  .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }
19
- .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-bottom: none; border-radius: 3px 3px 0 0; }
20
- .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }
71
+
72
+ .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-top: none; border-radius: 0 0 3px 3px; user-select: none; }
73
+ .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-bottom: 2px solid #2563eb; }
74
+
21
75
  .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }
22
76
  nine-table-analysis { display: none; }
23
77
  nine-table-footer { display: none; }
@@ -26,19 +80,20 @@
26
80
  <nine-table-header></nine-table-header>
27
81
  <nine-table-body>
28
82
  <nine-table-summary></nine-table-summary>
83
+ <nine-splitter></nine-splitter>
29
84
  <nine-table-sheets>
30
85
  <nine-table-sheets-body>
31
- ${a}
86
+ ${e}
32
87
  </nine-table-sheets-body>
33
88
  <nine-table-sheets-footer>
34
89
  <div class="nine-tab-bar">
35
- ${s}
90
+ ${i}
36
91
  </div>
37
- <div class="sheets-counter">Total : <span id="row-count">${h.toLocaleString()}</span></div>
92
+ <div class="sheets-counter">Total : <span id="row-count">${o.toLocaleString()}</span></div>
38
93
  </nine-table-sheets-footer>
39
94
  </nine-table-sheets>
40
95
  <nine-table-analysis></nine-table-analysis>
41
96
  </nine-table-body>
42
97
  <nine-table-footer></nine-table-footer>
43
- `},"#renderLayoutShell"),S=d(function(){this.sheetsBody=i(this,l).querySelector("nine-table-sheets-body"),this.tabBar=i(this,l).querySelector(".nine-tab-bar"),this.tabBar.addEventListener("click",a=>{const s=a.target.closest(".nine-tab-item");s&&this.switchTab(parseInt(s.dataset.index,10))})},"#bindElements"),q=d(function(){this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((s,h)=>{i(this,o)[h]&&s.init(i(this,o)[h])})},"#initSheets"),d(g,"LayoutManager");let b=g;const x=class x extends HTMLElement{constructor(){super();p(this,f,!1);this.attachShadow({mode:"open"})}connectedCallback(){i(this,f)||(this.layoutManager=new b(this.shadowRoot),this.layoutManager.render(),w(this,f,!0),n.log("NineTable connected."),this.dispatchEvent(new CustomEvent("load",{bubbles:!0,detail:{target:this}})))}disconnectedCallback(){n.log("NineTable disconnected.")}};f=new WeakMap,d(x,"NineTable");let y=x;customElements.get("nine-table")||customElements.define("nine-table",y)});
98
+ `},"#renderLayoutShell"),W=c(function(){this.sheetsBody=s(this,u).querySelector("nine-table-sheets-body"),this.tabBar=s(this,u).querySelector(".nine-tab-bar"),this.tabBar.addEventListener("click",e=>{const i=e.target.closest(".nine-tab-item");if(!i)return;const o=e.ctrlKey||e.metaKey;this.switchTab(parseInt(i.dataset.index,10),o)})},"#bindElements"),U=c(function(){this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((i,o)=>{s(this,h)[o]&&i.init(s(this,h)[o])})},"#initSheets"),D=c(function(){this.sheetsBody.querySelectorAll("nine-splitter").forEach(i=>{const o=parseInt(i.dataset.splitIndex,10),d=this.sheetsBody.querySelector(`nine-table-sheet[data-index="${o-1}"]`),l=this.sheetsBody.querySelector(`nine-table-sheet[data-index="${o}"]`);d&&l&&d.classList.contains("active")&&l.classList.contains("active")?i.classList.add("active"):i.classList.remove("active")})},"#updateSplitters"),c(A,"LayoutManager");let L=A;const z=class z extends HTMLElement{constructor(){super();f(this,S,!1);this.attachShadow({mode:"open"})}connectedCallback(){s(this,S)||(this.layoutManager=new L(this.shadowRoot),this.layoutManager.render(),w(this,S,!0),a.log("NineTable connected."),this.dispatchEvent(new CustomEvent("load",{bubbles:!0,detail:{target:this}})))}disconnectedCallback(){a.log("NineTable disconnected.")}};S=new WeakMap,c(z,"NineTable");let C=z;customElements.get("nine-table")||customElements.define("nine-table",C)});
44
99
  //# sourceMappingURL=nine-table.umd.js.map
package/dist/nine-table.umd.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nine-table.umd.js","sources":["../src/external/NoPeer.js","../src/ui/LayoutManager.js","../src/core/nine-table.js"],"sourcesContent":["import { trace as traceOrigin } from '@ninebone/util';\n\nexport class Trace extends traceOrigin.constructor {\n constructor() {\n super();\n this.init(\"nine-table\", \"green\");\n }\n}\n\nexport const trace = new Trace();","//import './nine-table-sheet.js';\n\nexport class LayoutManager {\n #shadowRoot;\n #tables = [];\n\n constructor(shadowRoot) {\n this.#shadowRoot = shadowRoot;\n }\n\n render() {\n // shadowRoot 내부(또는 호스트 범위)에서 table 태그들을 수집 후 숨김 처리\n const rawTables = this.#shadowRoot.host.querySelectorAll('table');\n rawTables.forEach(tbl => {\n this.#tables.push(tbl);\n tbl.style.display = 'none';\n });\n\n this.#renderLayoutShell();\n this.#bindElements();\n this.#initSheets();\n\n if (this.#tables.length > 0) {\n this.switchTab(0);\n }\n }\n\n #renderLayoutShell() {\n const sheetsHtml = this.#tables.map((_, idx) => `\n <nine-table-sheet class=\"${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\"></nine-table-sheet>\n `).join('');\n\n const tabsHtml = this.#tables.map((_, idx) => `\n <div class=\"nine-tab-item ${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\">Sheet ${idx + 1}</div>\n `).join('');\n\n const totalRowCount = this.#tables[0] ? this.#tables[0].querySelectorAll('tbody tr').length : 0;\n\n this.#shadowRoot.innerHTML = `\n <style>\n :host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }\n nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }\n nine-table-summary { display: none; }\n nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; }\n nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }\n \n nine-table-sheet { display: none; width: 100%; height: 100%; }\n nine-table-sheet.active { display: block; }\n\n nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }\n .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }\n .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-bottom: none; border-radius: 3px 3px 0 0; }\n .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }\n .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n nine-table-analysis { display: none; }\n nine-table-footer { display: none; }\n </style>\n \n <nine-table-header></nine-table-header>\n <nine-table-body>\n <nine-table-summary></nine-table-summary>\n <nine-table-sheets>\n <nine-table-sheets-body>\n ${sheetsHtml}\n </nine-table-sheets-body>\n <nine-table-sheets-footer>\n <div class=\"nine-tab-bar\">\n ${tabsHtml}\n </div>\n <div class=\"sheets-counter\">Total : <span id=\"row-count\">${totalRowCount.toLocaleString()}</span></div>\n </nine-table-sheets-footer>\n </nine-table-sheets>\n <nine-table-analysis></nine-table-analysis>\n </nine-table-body>\n <nine-table-footer></nine-table-footer>\n `;\n }\n\n #bindElements() {\n this.sheetsBody = this.#shadowRoot.querySelector('nine-table-sheets-body');\n this.tabBar = this.#shadowRoot.querySelector('.nine-tab-bar');\n\n this.tabBar.addEventListener('click', (e) => {\n const tabItem = e.target.closest('.nine-tab-item');\n if (!tabItem) return;\n this.switchTab(parseInt(tabItem.dataset.index, 10));\n });\n }\n\n #initSheets() {\n const sheetElements = this.sheetsBody.querySelectorAll('nine-table-sheet');\n sheetElements.forEach((sheetEl, idx) => {\n if (this.#tables[idx]) {\n sheetEl.init(this.#tables[idx]);\n }\n });\n }\n\n switchTab(index) {\n if (!this.#tables[index]) return;\n\n this.tabBar.querySelectorAll('.nine-tab-item').forEach((tab, idx) => {\n tab.classList.toggle('active', idx === index);\n });\n\n this.sheetsBody.querySelectorAll('nine-table-sheet').forEach((sheet, idx) => {\n sheet.classList.toggle('active', idx === index);\n });\n }\n}","import {trace} from \"@nopeer\";\nimport { LayoutManager } from '../ui/LayoutManager.js';\n\nexport default class NineTable extends HTMLElement {\n #created = false;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n if (this.#created) return;\n\n // shadowRoot 하나만 넘겨서 내부에서 레이아웃 및 테이블 수집 처리\n this.layoutManager = new LayoutManager(this.shadowRoot);\n this.layoutManager.render();\n\n this.#created = true;\n trace.log('NineTable connected.');\n\n this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n }\n\n disconnectedCallback() {\n trace.log('NineTable disconnected.');\n }\n}\n\nif (!customElements.get('nine-table')) {\n customElements.define('nine-table', NineTable);\n}"],"names":["_Trace","traceOrigin","__name","Trace","trace","_LayoutManager","shadowRoot","__privateAdd","_LayoutManager_instances","_shadowRoot","_tables","__privateSet","__privateGet","tbl","__privateMethod","renderLayoutShell_fn","bindElements_fn","initSheets_fn","index","tab","idx","sheet","sheetsHtml","_","tabsHtml","totalRowCount","e","tabItem","sheetEl","LayoutManager","_NineTable","_created","NineTable"],"mappings":"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"}
1
+ {"version":3,"file":"nine-table.umd.js","sources":["../src/external/NoPeer.js","../src/ui/TableInitializer.js","../src/ui/nine-table-sheet.js","../src/ui/LayoutManager.js","../src/core/nine-table.js"],"sourcesContent":["import { trace as traceOrigin } from '@ninebone/util';\n\nexport class Trace extends traceOrigin.constructor {\n constructor() {\n super();\n this.init(\"nine-table\", \"green\");\n }\n}\n\nexport const trace = new Trace();","export class TableInitializer {\n #container;\n\n constructor(container) {\n this.#container = container;\n }\n\n // [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)\n initializeTable(tbl) {\n this.#ensureColgroup(tbl);\n this.#ensureThead(tbl);\n\n tbl.classList.add('nine-table-element');\n return tbl;\n }\n\n // [Private] colgroup 보정\n #ensureColgroup(tbl) {\n if (tbl.querySelector('colgroup')) return;\n\n const colCount = tbl.querySelector('tbody tr')?.querySelectorAll('th, td').length || 1;\n const colgroup = document.createElement('colgroup');\n const defaultWidth = Math.max(Math.floor((tbl.clientWidth || 600) / colCount), 100);\n\n for (let i = 0; i < colCount; i++) {\n const col = document.createElement('col');\n col.setAttribute('width', defaultWidth);\n colgroup.appendChild(col);\n }\n tbl.prepend(colgroup);\n }\n\n // [Private] thead 보정\n #ensureThead(tbl) {\n if (tbl.querySelector('thead')) return;\n\n const thead = document.createElement('thead');\n const colgroup = tbl.querySelector('colgroup');\n if (colgroup) {\n colgroup.after(thead);\n } else {\n tbl.prepend(thead);\n }\n }\n}","import { trace } from \"@nopeer\";\nimport { TableInitializer } from \"./TableInitializer.js\"; // 경로에 맞게 조정 필요\n\nexport class NineTableSheet extends HTMLElement {\n #tableElement = null;\n #initializer;\n\n constructor() {\n super();\n this.#initializer = new TableInitializer(this);\n }\n\n connectedCallback() {\n this.#render();\n }\n\n /**\n * 외부(LayoutManager 등)에서 원본 테이블 엘리먼트를 주입받아 초기화 및 보정 수행\n * @param {HTMLTableElement} tableEl\n */\n init(tableEl) {\n if (!tableEl) return;\n\n // 원본 테이블 복제 후 TableInitializer를 통한 구조 보정\n const clonedTable = tableEl.cloneNode(true);\n this.#tableElement = this.#initializer.initializeTable(clonedTable);\n this.#tableElement.style.display = 'table';\n\n const container = this.querySelector('.sheet-content-container');\n if (container) {\n container.innerHTML = '';\n container.appendChild(this.#tableElement);\n }\n\n trace.log(`NineTableSheet initialized with table rows: ${this.getRowCount()}`);\n }\n\n getRowCount() {\n if (!this.#tableElement) return 0;\n return this.#tableElement.querySelectorAll('tbody tr').length;\n }\n\n #render() {\n this.innerHTML = `\n <style>\n nine-table-sheet {\n display: block;\n width: 100%;\n height: 100%;\n overflow: auto;\n position: relative;\n box-sizing: border-box;\n background: #ffffff;\n }\n\n nine-table-sheet .sheet-content-container {\n width: 100%;\n min-width: fit-content;\n }\n\n nine-table-sheet table {\n border-collapse: collapse;\n width: 100%;\n table-layout: fixed;\n }\n\n nine-table-sheet th, nine-table-sheet td {\n box-sizing: border-box;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n padding: 6px 8px;\n border: 1px solid #e5e7eb;\n font-size: 12px;\n color: #111827;\n }\n\n nine-table-sheet th {\n background-color: #f9fafb;\n font-weight: 600;\n text-align: left;\n }\n </style>\n \n <div class=\"sheet-content-container\">\n <!-- 테이블이 동적으로 주입되는 영역 -->\n </div>\n `;\n }\n\n disconnectedCallback() {\n this.innerHTML = '';\n trace.log('NineTableSheet destroyed.');\n }\n}\n\nif (!customElements.get('nine-table-sheet')) {\n customElements.define('nine-table-sheet', NineTableSheet);\n}\n","import './nine-table-sheet.js';\n// import './nine-splitter.js';\n\nexport class LayoutManager {\n #shadowRoot;\n #tables = [];\n\n constructor(shadowRoot) {\n this.#shadowRoot = shadowRoot;\n }\n\n render() {\n const rawTables = this.#shadowRoot.host.querySelectorAll('table');\n rawTables.forEach(tbl => {\n this.#tables.push(tbl);\n tbl.style.display = 'none';\n });\n\n this.#renderLayoutShell();\n this.#bindElements();\n this.#initSheets();\n\n if (this.#tables.length > 0) {\n this.switchTab(0, false);\n }\n }\n\n #renderLayoutShell() {\n const sheetsHtml = this.#tables.map((_, idx) => {\n const sheet = `<nine-table-sheet class=\"${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\"></nine-table-sheet>`;\n if (idx === 0) return sheet;\n return `<nine-splitter data-split-index=\"${idx}\"></nine-splitter>${sheet}`;\n }).join('');\n\n const tabsHtml = this.#tables.map((_, idx) => `\n <div class=\"nine-tab-item ${idx === 0 ? 'active' : ''}\" data-index=\"${idx}\">Sheet ${idx + 1}</div>\n `).join('');\n\n const totalRowCount = this.#tables[0] ? this.#tables[0].querySelectorAll('tbody tr').length : 0;\n\n this.#shadowRoot.innerHTML = `\n <style>\n :host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }\n nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n \n nine-table-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; position: relative; }\n \n nine-table-summary { display: none; width: 250px; flex-shrink: 0; border-right: 1px solid #e5e7eb; }\n nine-splitter:not([data-split-index]) { width: 4px; background: #e5e7eb; cursor: col-resize; flex-shrink: 0; }\n \n nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; }\n nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: flex; flex-direction: row; }\n \n /* 비활성화된 시트는 완전히 숨김 처리 */\n nine-table-sheet { display: none; width: 0; height: 100%; flex: 0; overflow: auto; }\n /* active 상태일 때만 공간을 나누어 표시 */\n nine-table-sheet.active { display: block; flex: 1; width: auto; }\n\n nine-table-sheets-body nine-splitter { width: 4px; background: #e5e7eb; cursor: col-resize; flex-shrink: 0; display: none; }\n /* active 시트 사이에 위치한 스플리터만 화면에 노출 */\n nine-table-sheets-body nine-splitter.active { display: block; }\n\n nine-table-sheets-footer { display: flex; height: 32px; background: #f3f4f6; border-top: 1px solid #e5e7eb; align-items: center; justify-content: space-between; padding: 0 8px; flex-shrink: 0; }\n .nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }\n \n .nine-tab-item { padding: 4px 12px; cursor: pointer; font-size: 12px; color: #4b5563; background: #e5e7eb; border: 1px solid #d1d5db; border-top: none; border-radius: 0 0 3px 3px; user-select: none; }\n .nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-bottom: 2px solid #2563eb; }\n \n .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n nine-table-analysis { display: none; }\n nine-table-footer { display: none; }\n </style>\n \n <nine-table-header></nine-table-header>\n <nine-table-body>\n <nine-table-summary></nine-table-summary>\n <nine-splitter></nine-splitter>\n <nine-table-sheets>\n <nine-table-sheets-body>\n ${sheetsHtml}\n </nine-table-sheets-body>\n <nine-table-sheets-footer>\n <div class=\"nine-tab-bar\">\n ${tabsHtml}\n </div>\n <div class=\"sheets-counter\">Total : <span id=\"row-count\">${totalRowCount.toLocaleString()}</span></div>\n </nine-table-sheets-footer>\n </nine-table-sheets>\n <nine-table-analysis></nine-table-analysis>\n </nine-table-body>\n <nine-table-footer></nine-table-footer>\n `;\n }\n\n #bindElements() {\n this.sheetsBody = this.#shadowRoot.querySelector('nine-table-sheets-body');\n this.tabBar = this.#shadowRoot.querySelector('.nine-tab-bar');\n\n this.tabBar.addEventListener('click', (e) => {\n const tabItem = e.target.closest('.nine-tab-item');\n if (!tabItem) return;\n\n // Ctrl 키나 Cmd 키를 누른 상태인지 확인\n const isMultiSelect = e.ctrlKey || e.metaKey;\n this.switchTab(parseInt(tabItem.dataset.index, 10), isMultiSelect);\n });\n }\n\n #initSheets() {\n const sheetElements = this.sheetsBody.querySelectorAll('nine-table-sheet');\n sheetElements.forEach((sheetEl, idx) => {\n if (this.#tables[idx]) {\n sheetEl.init(this.#tables[idx]);\n }\n });\n }\n\n switchTab(index, isMultiSelect = false) {\n if (!this.#tables[index]) return;\n\n const tabItems = this.tabBar.querySelectorAll('.nine-tab-item');\n const sheetElements = this.sheetsBody.querySelectorAll('nine-table-sheet');\n\n if (!isMultiSelect) {\n // 단일 선택 시 기존 active 초기화 후 선택한 탭만 활성화\n tabItems.forEach((tab, idx) => {\n tab.classList.toggle('active', idx === index);\n });\n sheetElements.forEach((sheet, idx) => {\n sheet.classList.toggle('active', idx === index);\n });\n } else {\n // Ctrl + 클릭 시 다중 선택 (이미 active 상태면 토글해서 해제 가능하되 최소 1개는 유지)\n const clickedTab = tabItems[index];\n const activeTabs = this.tabBar.querySelectorAll('.nine-tab-item.active');\n\n if (clickedTab.classList.contains('active') && activeTabs.length <= 1) {\n return; // 최소 1개는 항상 active 유지\n }\n\n clickedTab.classList.toggle('active');\n const targetSheet = this.sheetsBody.querySelector(`nine-table-sheet[data-index=\"${index}\"]`);\n if (targetSheet) {\n targetSheet.classList.toggle('active');\n }\n }\n\n // 활성화된 시트들 사이에 있는 스플리터 가시성 동적 제어\n this.#updateSplitters();\n\n // 카운터 갱신 (마지막으로 활성화된 시트 기준)\n const activeSheet = this.sheetsBody.querySelector(`nine-table-sheet.active`);\n if (activeSheet && typeof activeSheet.getRowCount === 'function') {\n const rowCountEl = this.#shadowRoot.querySelector('#row-count');\n if (rowCountEl) {\n rowCountEl.textContent = activeSheet.getRowCount().toLocaleString();\n }\n }\n }\n\n #updateSplitters() {\n const splitters = this.sheetsBody.querySelectorAll('nine-splitter');\n splitters.forEach(splitter => {\n const splitIndex = parseInt(splitter.dataset.splitIndex, 10);\n const leftSheet = this.sheetsBody.querySelector(`nine-table-sheet[data-index=\"${splitIndex - 1}\"]`);\n const rightSheet = this.sheetsBody.querySelector(`nine-table-sheet[data-index=\"${splitIndex}\"]`);\n\n // 왼쪽과 오른쪽 시트가 모두 active 상태일 때만 스플리터를 노출\n if (leftSheet && rightSheet && leftSheet.classList.contains('active') && rightSheet.classList.contains('active')) {\n splitter.classList.add('active');\n } else {\n splitter.classList.remove('active');\n }\n });\n }\n}","import {trace} from \"@nopeer\";\nimport { LayoutManager } from '../ui/LayoutManager.js';\n\nexport default class NineTable extends HTMLElement {\n #created = false;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n if (this.#created) return;\n\n // shadowRoot 하나만 넘겨서 내부에서 레이아웃 및 테이블 수집 처리\n this.layoutManager = new LayoutManager(this.shadowRoot);\n this.layoutManager.render();\n\n this.#created = true;\n trace.log('NineTable connected.');\n\n this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n }\n\n disconnectedCallback() {\n trace.log('NineTable disconnected.');\n }\n}\n\nif (!customElements.get('nine-table')) {\n customElements.define('nine-table', NineTable);\n}"],"names":["_Trace","traceOrigin","__name","Trace","trace","_TableInitializer","container","__privateAdd","_TableInitializer_instances","_container","__privateSet","tbl","__privateMethod","ensureColgroup_fn","ensureThead_fn","colCount","_a","colgroup","defaultWidth","i","col","thead","TableInitializer","_NineTableSheet","_NineTableSheet_instances","_tableElement","_initializer","render_fn","tableEl","clonedTable","__privateGet","NineTableSheet","_LayoutManager","shadowRoot","_LayoutManager_instances","_shadowRoot","_tables","renderLayoutShell_fn","bindElements_fn","initSheets_fn","index","isMultiSelect","tabItems","sheetElements","tab","idx","sheet","clickedTab","activeTabs","targetSheet","updateSplitters_fn","activeSheet","rowCountEl","sheetsHtml","_","tabsHtml","totalRowCount","tabItem","sheetEl","splitter","splitIndex","leftSheet","rightSheet","LayoutManager","_NineTable","_created","NineTable"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ninebone/table",
3
- "version": "0.0.8",
3
+ "version": "0.0.10",
4
4
  "description": "Grid component for real-time collaboration (Vanilla JS based)",
5
5
  "type": "module",
6
6
  "main": "./dist/nine-table.umd.js",