@ninebone/table 0.0.7 → 0.0.9
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.
- package/dist/nine-table.js +155 -47
- package/dist/nine-table.js.map +1 -1
- package/dist/nine-table.umd.js +53 -9
- package/dist/nine-table.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/nine-table.js
CHANGED
|
@@ -1,47 +1,155 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
throw TypeError(
|
|
1
|
+
var G = Object.defineProperty;
|
|
2
|
+
var B = (i) => {
|
|
3
|
+
throw TypeError(i);
|
|
4
4
|
};
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
import { trace as
|
|
9
|
-
const
|
|
5
|
+
var o = (i, e) => G(i, "name", { value: e, configurable: !0 });
|
|
6
|
+
var v = (i, e, t) => e.has(i) || B("Cannot " + t);
|
|
7
|
+
var n = (i, e, t) => (v(i, e, "read from private field"), t ? t.call(i) : e.get(i)), a = (i, e, t) => e.has(i) ? B("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t), u = (i, e, t, s) => (v(i, e, "write to private field"), s ? s.call(i, t) : e.set(i, t), t), f = (i, e, t) => (v(i, e, "access private method"), t);
|
|
8
|
+
import { trace as I } from "@ninebone/util";
|
|
9
|
+
const T = class T extends I.constructor {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(), this.init("nine-table", "green");
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
|
-
|
|
15
|
-
let
|
|
16
|
-
const
|
|
17
|
-
var
|
|
18
|
-
const
|
|
14
|
+
o(T, "Trace");
|
|
15
|
+
let k = T;
|
|
16
|
+
const m = new k();
|
|
17
|
+
var x, p, R, j;
|
|
18
|
+
const L = class L {
|
|
19
19
|
constructor(e) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
a(this, p);
|
|
21
|
+
a(this, x);
|
|
22
|
+
u(this, x, e);
|
|
23
|
+
}
|
|
24
|
+
// [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)
|
|
25
|
+
initializeTable(e) {
|
|
26
|
+
return f(this, p, R).call(this, e), f(this, p, j).call(this, e), e.classList.add("nine-table-element"), e;
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
x = new WeakMap(), p = new WeakSet(), // [Private] colgroup 보정
|
|
30
|
+
R = /* @__PURE__ */ o(function(e) {
|
|
31
|
+
var r;
|
|
32
|
+
if (e.querySelector("colgroup")) return;
|
|
33
|
+
const t = ((r = e.querySelector("tbody tr")) == null ? void 0 : r.querySelectorAll("th, td").length) || 1, s = document.createElement("colgroup"), b = Math.max(Math.floor((e.clientWidth || 600) / t), 100);
|
|
34
|
+
for (let M = 0; M < t; M++) {
|
|
35
|
+
const z = document.createElement("col");
|
|
36
|
+
z.setAttribute("width", b), s.appendChild(z);
|
|
37
|
+
}
|
|
38
|
+
e.prepend(s);
|
|
39
|
+
}, "#ensureColgroup"), // [Private] thead 보정
|
|
40
|
+
j = /* @__PURE__ */ o(function(e) {
|
|
41
|
+
if (e.querySelector("thead")) return;
|
|
42
|
+
const t = document.createElement("thead"), s = e.querySelector("colgroup");
|
|
43
|
+
s ? s.after(t) : e.prepend(t);
|
|
44
|
+
}, "#ensureThead"), o(L, "TableInitializer");
|
|
45
|
+
let E = L;
|
|
46
|
+
var c, y, w, W;
|
|
47
|
+
const $ = class $ extends HTMLElement {
|
|
48
|
+
constructor() {
|
|
49
|
+
super();
|
|
50
|
+
a(this, w);
|
|
51
|
+
a(this, c, null);
|
|
52
|
+
a(this, y);
|
|
53
|
+
u(this, y, new E(this));
|
|
54
|
+
}
|
|
55
|
+
connectedCallback() {
|
|
56
|
+
f(this, w, W).call(this);
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* 외부(LayoutManager 등)에서 원본 테이블 엘리먼트를 주입받아 초기화 및 보정 수행
|
|
60
|
+
* @param {HTMLTableElement} tableEl
|
|
61
|
+
*/
|
|
62
|
+
init(t) {
|
|
63
|
+
if (!t) return;
|
|
64
|
+
const s = t.cloneNode(!0);
|
|
65
|
+
u(this, c, n(this, y).initializeTable(s)), n(this, c).style.display = "table";
|
|
66
|
+
const b = this.querySelector(".sheet-content-container");
|
|
67
|
+
b && (b.innerHTML = "", b.appendChild(n(this, c))), m.log(`NineTableSheet initialized with table rows: ${this.getRowCount()}`);
|
|
68
|
+
}
|
|
69
|
+
getRowCount() {
|
|
70
|
+
return n(this, c) ? n(this, c).querySelectorAll("tbody tr").length : 0;
|
|
71
|
+
}
|
|
72
|
+
disconnectedCallback() {
|
|
73
|
+
this.innerHTML = "", m.log("NineTableSheet destroyed.");
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
c = new WeakMap(), y = new WeakMap(), w = new WeakSet(), W = /* @__PURE__ */ o(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"), o($, "NineTableSheet");
|
|
123
|
+
let S = $;
|
|
124
|
+
customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", S);
|
|
125
|
+
var h, l, d, N, D, F;
|
|
126
|
+
const A = class A {
|
|
127
|
+
constructor(e) {
|
|
128
|
+
a(this, d);
|
|
129
|
+
a(this, h);
|
|
130
|
+
a(this, l, []);
|
|
131
|
+
u(this, h, e);
|
|
24
132
|
}
|
|
25
133
|
render() {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}),
|
|
134
|
+
n(this, h).host.querySelectorAll("table").forEach((t) => {
|
|
135
|
+
n(this, l).push(t), t.style.display = "none";
|
|
136
|
+
}), f(this, d, N).call(this), f(this, d, D).call(this), f(this, d, F).call(this), n(this, l).length > 0 && this.switchTab(0);
|
|
29
137
|
}
|
|
30
138
|
switchTab(e) {
|
|
31
|
-
|
|
32
|
-
t.classList.toggle("active",
|
|
33
|
-
}), this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((t,
|
|
34
|
-
t.classList.toggle("active",
|
|
139
|
+
n(this, l)[e] && (this.tabBar.querySelectorAll(".nine-tab-item").forEach((t, s) => {
|
|
140
|
+
t.classList.toggle("active", s === e);
|
|
141
|
+
}), this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((t, s) => {
|
|
142
|
+
t.classList.toggle("active", s === e);
|
|
35
143
|
}));
|
|
36
144
|
}
|
|
37
145
|
};
|
|
38
|
-
|
|
39
|
-
const e =
|
|
40
|
-
<nine-table-sheet class="${
|
|
41
|
-
`).join(""), t =
|
|
42
|
-
<div class="nine-tab-item ${
|
|
43
|
-
`).join(""),
|
|
44
|
-
|
|
146
|
+
h = new WeakMap(), l = new WeakMap(), d = new WeakSet(), N = /* @__PURE__ */ o(function() {
|
|
147
|
+
const e = n(this, l).map((b, r) => `
|
|
148
|
+
<nine-table-sheet class="${r === 0 ? "active" : ""}" data-index="${r}"></nine-table-sheet>
|
|
149
|
+
`).join(""), t = n(this, l).map((b, r) => `
|
|
150
|
+
<div class="nine-tab-item ${r === 0 ? "active" : ""}" data-index="${r}">Sheet ${r + 1}</div>
|
|
151
|
+
`).join(""), s = n(this, l)[0] ? n(this, l)[0].querySelectorAll("tbody tr").length : 0;
|
|
152
|
+
n(this, h).innerHTML = `
|
|
45
153
|
<style>
|
|
46
154
|
:host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }
|
|
47
155
|
nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
|
|
@@ -73,39 +181,39 @@ o = new WeakMap(), i = new WeakMap(), l = new WeakSet(), E = /* @__PURE__ */ r(f
|
|
|
73
181
|
<div class="nine-tab-bar">
|
|
74
182
|
${t}
|
|
75
183
|
</div>
|
|
76
|
-
<div class="sheets-counter">Total : <span id="row-count">${
|
|
184
|
+
<div class="sheets-counter">Total : <span id="row-count">${s.toLocaleString()}</span></div>
|
|
77
185
|
</nine-table-sheets-footer>
|
|
78
186
|
</nine-table-sheets>
|
|
79
187
|
<nine-table-analysis></nine-table-analysis>
|
|
80
188
|
</nine-table-body>
|
|
81
189
|
<nine-table-footer></nine-table-footer>
|
|
82
190
|
`;
|
|
83
|
-
}, "#renderLayoutShell"),
|
|
84
|
-
this.sheetsBody =
|
|
191
|
+
}, "#renderLayoutShell"), D = /* @__PURE__ */ o(function() {
|
|
192
|
+
this.sheetsBody = n(this, h).querySelector("nine-table-sheets-body"), this.tabBar = n(this, h).querySelector(".nine-tab-bar"), this.tabBar.addEventListener("click", (e) => {
|
|
85
193
|
const t = e.target.closest(".nine-tab-item");
|
|
86
194
|
t && this.switchTab(parseInt(t.dataset.index, 10));
|
|
87
195
|
});
|
|
88
|
-
}, "#bindElements"),
|
|
89
|
-
this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((t,
|
|
90
|
-
|
|
196
|
+
}, "#bindElements"), F = /* @__PURE__ */ o(function() {
|
|
197
|
+
this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((t, s) => {
|
|
198
|
+
n(this, l)[s] && t.init(n(this, l)[s]);
|
|
91
199
|
});
|
|
92
|
-
}, "#initSheets"),
|
|
93
|
-
let
|
|
94
|
-
var
|
|
95
|
-
const
|
|
200
|
+
}, "#initSheets"), o(A, "LayoutManager");
|
|
201
|
+
let q = A;
|
|
202
|
+
var g;
|
|
203
|
+
const H = class H extends HTMLElement {
|
|
96
204
|
constructor() {
|
|
97
205
|
super();
|
|
98
|
-
|
|
206
|
+
a(this, g, !1);
|
|
99
207
|
this.attachShadow({ mode: "open" });
|
|
100
208
|
}
|
|
101
209
|
connectedCallback() {
|
|
102
|
-
|
|
210
|
+
n(this, g) || (this.layoutManager = new q(this.shadowRoot), this.layoutManager.render(), u(this, g, !0), m.log("NineTable connected."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } })));
|
|
103
211
|
}
|
|
104
212
|
disconnectedCallback() {
|
|
105
|
-
|
|
213
|
+
m.log("NineTable disconnected.");
|
|
106
214
|
}
|
|
107
215
|
};
|
|
108
|
-
|
|
109
|
-
let
|
|
110
|
-
customElements.get("nine-table") || customElements.define("nine-table",
|
|
216
|
+
g = new WeakMap(), o(H, "NineTable");
|
|
217
|
+
let C = H;
|
|
218
|
+
customElements.get("nine-table") || customElements.define("nine-table", C);
|
|
111
219
|
//# 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\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","_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","tab","idx","sheet","sheetsHtml","_","tabsHtml","totalRowCount","tabItem","sheetEl","LayoutManager","_NineTable","_created","NineTable"],"mappings":"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"}
|
package/dist/nine-table.umd.js
CHANGED
|
@@ -1,8 +1,52 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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 B=t=>{throw TypeError(t)};var r=(t,n)=>F(t,"name",{value:n,configurable:!0});var H=(t,n,o)=>n.has(t)||B("Cannot "+o);var s=(t,n,o)=>(H(t,n,"read from private field"),o?o.call(t):n.get(t)),c=(t,n,o)=>n.has(t)?B("Cannot add the same private member more than once"):n instanceof WeakSet?n.add(t):n.set(t,o),m=(t,n,o,y)=>(H(t,n,"write to private field"),y?y.call(t,o):n.set(t,o),o),p=(t,n,o)=>(H(t,n,"access private method"),o);var v,g,R,j,h,x,k,N,b,a,f,W,U,D,w;const T=class T extends t.trace.constructor{constructor(){super(),this.init("nine-table","green")}};r(T,"Trace");let n=T;const o=new n,C=class C{constructor(e){c(this,g);c(this,v);m(this,v,e)}initializeTable(e){return p(this,g,R).call(this,e),p(this,g,j).call(this,e),e.classList.add("nine-table-element"),e}};v=new WeakMap,g=new WeakSet,R=r(function(e){var d;if(e.querySelector("colgroup"))return;const i=((d=e.querySelector("tbody tr"))==null?void 0:d.querySelectorAll("th, td").length)||1,l=document.createElement("colgroup"),u=Math.max(Math.floor((e.clientWidth||600)/i),100);for(let M=0;M<i;M++){const z=document.createElement("col");z.setAttribute("width",u),l.appendChild(z)}e.prepend(l)},"#ensureColgroup"),j=r(function(e){if(e.querySelector("thead"))return;const i=document.createElement("thead"),l=e.querySelector("colgroup");l?l.after(i):e.prepend(i)},"#ensureThead"),r(C,"TableInitializer");let y=C;const L=class L extends HTMLElement{constructor(){super();c(this,k);c(this,h,null);c(this,x);m(this,x,new y(this))}connectedCallback(){p(this,k,N).call(this)}init(i){if(!i)return;const l=i.cloneNode(!0);m(this,h,s(this,x).initializeTable(l)),s(this,h).style.display="table";const u=this.querySelector(".sheet-content-container");u&&(u.innerHTML="",u.appendChild(s(this,h))),o.log(`NineTableSheet initialized with table rows: ${this.getRowCount()}`)}getRowCount(){return s(this,h)?s(this,h).querySelectorAll("tbody tr").length:0}disconnectedCallback(){this.innerHTML="",o.log("NineTableSheet destroyed.")}};h=new WeakMap,x=new WeakMap,k=new WeakSet,N=r(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"),r(L,"NineTableSheet");let E=L;customElements.get("nine-table-sheet")||customElements.define("nine-table-sheet",E);const $=class ${constructor(e){c(this,f);c(this,b);c(this,a,[]);m(this,b,e)}render(){s(this,b).host.querySelectorAll("table").forEach(i=>{s(this,a).push(i),i.style.display="none"}),p(this,f,W).call(this),p(this,f,U).call(this),p(this,f,D).call(this),s(this,a).length>0&&this.switchTab(0)}switchTab(e){s(this,a)[e]&&(this.tabBar.querySelectorAll(".nine-tab-item").forEach((i,l)=>{i.classList.toggle("active",l===e)}),this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((i,l)=>{i.classList.toggle("active",l===e)}))}};b=new WeakMap,a=new WeakMap,f=new WeakSet,W=r(function(){const e=s(this,a).map((u,d)=>`
|
|
46
|
+
<nine-table-sheet class="${d===0?"active":""}" data-index="${d}"></nine-table-sheet>
|
|
47
|
+
`).join(""),i=s(this,a).map((u,d)=>`
|
|
48
|
+
<div class="nine-tab-item ${d===0?"active":""}" data-index="${d}">Sheet ${d+1}</div>
|
|
49
|
+
`).join(""),l=s(this,a)[0]?s(this,a)[0].querySelectorAll("tbody tr").length:0;s(this,b).innerHTML=`
|
|
6
50
|
<style>
|
|
7
51
|
:host { display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100%; background: #fff; }
|
|
8
52
|
nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
|
|
@@ -28,17 +72,17 @@
|
|
|
28
72
|
<nine-table-summary></nine-table-summary>
|
|
29
73
|
<nine-table-sheets>
|
|
30
74
|
<nine-table-sheets-body>
|
|
31
|
-
${
|
|
75
|
+
${e}
|
|
32
76
|
</nine-table-sheets-body>
|
|
33
77
|
<nine-table-sheets-footer>
|
|
34
78
|
<div class="nine-tab-bar">
|
|
35
|
-
${
|
|
79
|
+
${i}
|
|
36
80
|
</div>
|
|
37
|
-
<div class="sheets-counter">Total : <span id="row-count">${
|
|
81
|
+
<div class="sheets-counter">Total : <span id="row-count">${l.toLocaleString()}</span></div>
|
|
38
82
|
</nine-table-sheets-footer>
|
|
39
83
|
</nine-table-sheets>
|
|
40
84
|
<nine-table-analysis></nine-table-analysis>
|
|
41
85
|
</nine-table-body>
|
|
42
86
|
<nine-table-footer></nine-table-footer>
|
|
43
|
-
`},"#renderLayoutShell"),
|
|
87
|
+
`},"#renderLayoutShell"),U=r(function(){this.sheetsBody=s(this,b).querySelector("nine-table-sheets-body"),this.tabBar=s(this,b).querySelector(".nine-tab-bar"),this.tabBar.addEventListener("click",e=>{const i=e.target.closest(".nine-tab-item");i&&this.switchTab(parseInt(i.dataset.index,10))})},"#bindElements"),D=r(function(){this.sheetsBody.querySelectorAll("nine-table-sheet").forEach((i,l)=>{s(this,a)[l]&&i.init(s(this,a)[l])})},"#initSheets"),r($,"LayoutManager");let S=$;const A=class A extends HTMLElement{constructor(){super();c(this,w,!1);this.attachShadow({mode:"open"})}connectedCallback(){s(this,w)||(this.layoutManager=new S(this.shadowRoot),this.layoutManager.render(),m(this,w,!0),o.log("NineTable connected."),this.dispatchEvent(new CustomEvent("load",{bubbles:!0,detail:{target:this}})))}disconnectedCallback(){o.log("NineTable disconnected.")}};w=new WeakMap,r(A,"NineTable");let q=A;customElements.get("nine-table")||customElements.define("nine-table",q)});
|
|
44
88
|
//# sourceMappingURL=nine-table.umd.js.map
|
|
@@ -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\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","_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","tab","idx","sheet","sheetsHtml","_","tabsHtml","totalRowCount","tabItem","sheetEl","LayoutManager","_NineTable","_created","NineTable"],"mappings":"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"}
|