@ninebone/table 0.0.5 → 0.0.6
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 +65 -68
- package/dist/nine-table.js.map +1 -1
- package/dist/nine-table.umd.js +12 -15
- package/dist/nine-table.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/nine-table.js
CHANGED
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
var
|
|
2
|
-
var B = (
|
|
3
|
-
throw TypeError(
|
|
1
|
+
var N = Object.defineProperty;
|
|
2
|
+
var B = (n) => {
|
|
3
|
+
throw TypeError(n);
|
|
4
4
|
};
|
|
5
|
-
var
|
|
6
|
-
var v = (
|
|
7
|
-
var
|
|
8
|
-
import { trace as
|
|
9
|
-
const q = class q extends
|
|
5
|
+
var s = (n, e) => N(n, "name", { value: e, configurable: !0 });
|
|
6
|
+
var v = (n, e, t) => e.has(n) || B("Cannot " + t);
|
|
7
|
+
var o = (n, e, t) => (v(n, e, "read from private field"), t ? t.call(n) : e.get(n)), l = (n, e, t) => e.has(n) ? B("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, t), h = (n, e, t, i) => (v(n, e, "write to private field"), i ? i.call(n, t) : e.set(n, t), t), u = (n, e, t) => (v(n, e, "access private method"), t);
|
|
8
|
+
import { trace as W } from "@ninebone/util";
|
|
9
|
+
const q = class q extends W.constructor {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(), this.init("nine-table", "green");
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
|
-
|
|
15
|
-
let
|
|
16
|
-
const
|
|
17
|
-
var g, d,
|
|
14
|
+
s(q, "Trace");
|
|
15
|
+
let E = q;
|
|
16
|
+
const f = new E();
|
|
17
|
+
var g, d, r, b, H, A;
|
|
18
18
|
const T = class T {
|
|
19
19
|
constructor(e, t) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
h(this, g, e), h(this, d, t), h(this,
|
|
20
|
+
l(this, b);
|
|
21
|
+
l(this, g);
|
|
22
|
+
l(this, d);
|
|
23
|
+
l(this, r);
|
|
24
|
+
h(this, g, e), h(this, d, t), h(this, r, e.shadowRoot);
|
|
25
25
|
}
|
|
26
26
|
init() {
|
|
27
|
-
|
|
27
|
+
u(this, b, H).call(this), u(this, b, A).call(this), o(this, d).length > 0 && this.renderTable(0), f.log("TableView initialized with sidebar and footer hidden.");
|
|
28
28
|
}
|
|
29
29
|
renderTable(e) {
|
|
30
|
-
if (!
|
|
31
|
-
this.tabBar.innerHTML = "",
|
|
30
|
+
if (!o(this, d)[e]) return;
|
|
31
|
+
this.tabBar.innerHTML = "", o(this, d).forEach((w, a) => {
|
|
32
32
|
const c = document.createElement("div");
|
|
33
33
|
c.className = `nine-tab-item ${a === e ? "active" : ""}`, c.textContent = `Sheet ${a + 1}`, c.addEventListener("click", () => this.renderTable(a)), this.tabBar.appendChild(c);
|
|
34
34
|
}), this.sheetsBody.innerHTML = "";
|
|
35
|
-
const t =
|
|
35
|
+
const t = o(this, d)[e].cloneNode(!0);
|
|
36
36
|
this.sheetsBody.appendChild(t);
|
|
37
|
-
const
|
|
38
|
-
this.rowCountEl && (this.rowCountEl.textContent =
|
|
37
|
+
const i = t.querySelectorAll("tbody tr").length;
|
|
38
|
+
this.rowCountEl && (this.rowCountEl.textContent = i.toLocaleString()), f.log(`Rendered sheets tab index: ${e}`);
|
|
39
39
|
}
|
|
40
40
|
destroy() {
|
|
41
|
-
|
|
41
|
+
o(this, r).innerHTML = "", f.log("TableView destroyed.");
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
|
-
g = new WeakMap(), d = new WeakMap(),
|
|
45
|
-
|
|
44
|
+
g = new WeakMap(), d = new WeakMap(), r = new WeakMap(), b = new WeakSet(), H = /* @__PURE__ */ s(function() {
|
|
45
|
+
o(this, r).innerHTML = `
|
|
46
46
|
<style>
|
|
47
47
|
:host { display: block; position: relative; overflow: hidden; height: 100%; }
|
|
48
48
|
|
|
49
|
-
/* 최외곽 루트 구조: 상단 - 바디
|
|
49
|
+
/* 최외곽 루트 구조: 상단 - 바디 */
|
|
50
50
|
.nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }
|
|
51
51
|
|
|
52
52
|
nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
|
|
53
53
|
|
|
54
|
-
/* 바디 영역:
|
|
54
|
+
/* 바디 영역: 좌우 영역 숨김 처리 및 중앙 시트만 확장 */
|
|
55
55
|
nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }
|
|
56
56
|
|
|
57
|
-
nine-table-summary {
|
|
57
|
+
nine-table-summary { display: none; }
|
|
58
58
|
|
|
59
|
-
/* 중앙 시트 컨테이너 영역 */
|
|
59
|
+
/* 중앙 시트 컨테이너 영역 (전체 너비 확장) */
|
|
60
60
|
nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }
|
|
61
61
|
|
|
62
62
|
nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }
|
|
@@ -70,10 +70,10 @@ g = new WeakMap(), d = new WeakMap(), s = new WeakMap(), b = new WeakSet(), H =
|
|
|
70
70
|
|
|
71
71
|
.sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }
|
|
72
72
|
|
|
73
|
-
nine-table-analysis {
|
|
73
|
+
nine-table-analysis { display: none; }
|
|
74
74
|
|
|
75
|
-
/* 최하단 전체 상태 바 */
|
|
76
|
-
nine-table-footer {
|
|
75
|
+
/* 최하단 전체 상태 바 숨김 */
|
|
76
|
+
nine-table-footer { display: none; }
|
|
77
77
|
|
|
78
78
|
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
|
|
79
79
|
th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }
|
|
@@ -83,7 +83,7 @@ g = new WeakMap(), d = new WeakMap(), s = new WeakMap(), b = new WeakSet(), H =
|
|
|
83
83
|
<!-- 1. 상단 컴포넌트 -->
|
|
84
84
|
<nine-table-header></nine-table-header>
|
|
85
85
|
|
|
86
|
-
<!-- 2. 메인 바디 컴포넌트 -->
|
|
86
|
+
<!-- 2. 메인 바디 컴포넌트 (좌우 숨김, 중앙 단독 확장) -->
|
|
87
87
|
<nine-table-body>
|
|
88
88
|
<nine-table-summary></nine-table-summary>
|
|
89
89
|
|
|
@@ -98,66 +98,63 @@ g = new WeakMap(), d = new WeakMap(), s = new WeakMap(), b = new WeakSet(), H =
|
|
|
98
98
|
<nine-table-analysis></nine-table-analysis>
|
|
99
99
|
</nine-table-body>
|
|
100
100
|
|
|
101
|
-
<!-- 3.
|
|
102
|
-
<nine-table-footer>
|
|
103
|
-
<div class="footer-left">Ready</div>
|
|
104
|
-
<div class="footer-right">Status: OK</div>
|
|
105
|
-
</nine-table-footer>
|
|
101
|
+
<!-- 3. 최하단 컴포넌트 숨김 -->
|
|
102
|
+
<nine-table-footer></nine-table-footer>
|
|
106
103
|
</div>
|
|
107
104
|
`;
|
|
108
|
-
}, "#renderShell"),
|
|
109
|
-
this.
|
|
110
|
-
}, "#bindElements"),
|
|
111
|
-
let
|
|
112
|
-
var m,
|
|
105
|
+
}, "#renderShell"), A = /* @__PURE__ */ s(function() {
|
|
106
|
+
this.sheetsBody = o(this, r).querySelector("nine-table-sheets-body"), this.tabBar = o(this, r).querySelector(".nine-tab-bar"), this.rowCountEl = o(this, r).querySelector("#row-count");
|
|
107
|
+
}, "#bindElements"), s(T, "TableView");
|
|
108
|
+
let k = T;
|
|
109
|
+
var m, p, $, R;
|
|
113
110
|
const L = class L {
|
|
114
111
|
constructor(e) {
|
|
115
|
-
|
|
116
|
-
|
|
112
|
+
l(this, p);
|
|
113
|
+
l(this, m);
|
|
117
114
|
h(this, m, e);
|
|
118
115
|
}
|
|
119
116
|
// [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)
|
|
120
117
|
initializeTable(e) {
|
|
121
|
-
return
|
|
118
|
+
return u(this, p, $).call(this, e), u(this, p, R).call(this, e), e.classList.add("nine-table-element"), e;
|
|
122
119
|
}
|
|
123
120
|
};
|
|
124
|
-
m = new WeakMap(),
|
|
125
|
-
|
|
121
|
+
m = new WeakMap(), p = new WeakSet(), // [Private] colgroup 보정
|
|
122
|
+
$ = /* @__PURE__ */ s(function(e) {
|
|
126
123
|
var a;
|
|
127
124
|
if (e.querySelector("colgroup")) return;
|
|
128
|
-
const t = ((a = e.querySelector("tbody tr")) == null ? void 0 : a.querySelectorAll("th, td").length) || 1,
|
|
125
|
+
const t = ((a = e.querySelector("tbody tr")) == null ? void 0 : a.querySelectorAll("th, td").length) || 1, i = document.createElement("colgroup"), w = Math.max(Math.floor((e.clientWidth || 600) / t), 100);
|
|
129
126
|
for (let c = 0; c < t; c++) {
|
|
130
127
|
const M = document.createElement("col");
|
|
131
|
-
M.setAttribute("width", w),
|
|
128
|
+
M.setAttribute("width", w), i.appendChild(M);
|
|
132
129
|
}
|
|
133
|
-
e.prepend(
|
|
130
|
+
e.prepend(i);
|
|
134
131
|
}, "#ensureColgroup"), // [Private] thead 보정
|
|
135
|
-
|
|
132
|
+
R = /* @__PURE__ */ s(function(e) {
|
|
136
133
|
if (e.querySelector("thead")) return;
|
|
137
|
-
const t = document.createElement("thead"),
|
|
138
|
-
|
|
139
|
-
}, "#ensureThead"),
|
|
140
|
-
let
|
|
134
|
+
const t = document.createElement("thead"), i = e.querySelector("colgroup");
|
|
135
|
+
i ? i.after(t) : e.prepend(t);
|
|
136
|
+
}, "#ensureThead"), s(L, "TableInitializer");
|
|
137
|
+
let C = L;
|
|
141
138
|
var y, x;
|
|
142
139
|
const z = class z extends HTMLElement {
|
|
143
140
|
constructor() {
|
|
144
141
|
super();
|
|
145
|
-
|
|
146
|
-
|
|
142
|
+
l(this, y, !1);
|
|
143
|
+
l(this, x, []);
|
|
147
144
|
this.attachShadow({ mode: "open" });
|
|
148
145
|
}
|
|
149
146
|
connectedCallback() {
|
|
150
|
-
if (
|
|
151
|
-
this.querySelectorAll("table").forEach((
|
|
152
|
-
const a = new
|
|
153
|
-
|
|
154
|
-
}), this.view = new
|
|
147
|
+
if (o(this, y)) return;
|
|
148
|
+
this.querySelectorAll("table").forEach((i) => {
|
|
149
|
+
const a = new C(this).initializeTable(i);
|
|
150
|
+
o(this, x).push(a), i.style.display = "none";
|
|
151
|
+
}), this.view = new k(this, o(this, x)), this.view.init(), h(this, y, !0), f.log("NineTable connected and layout initialized."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } }));
|
|
155
152
|
}
|
|
156
153
|
disconnectedCallback() {
|
|
157
|
-
this.view && this.view.destroy(),
|
|
154
|
+
this.view && this.view.destroy(), f.log("NineTable disconnected.");
|
|
158
155
|
}
|
|
159
156
|
};
|
|
160
|
-
y = new WeakMap(), x = new WeakMap(),
|
|
161
|
-
let
|
|
162
|
-
customElements.get("nine-table") || customElements.define("nine-table",
|
|
157
|
+
y = new WeakMap(), x = new WeakMap(), s(z, "NineTable");
|
|
158
|
+
let S = z;
|
|
159
|
+
customElements.get("nine-table") || customElements.define("nine-table", S);
|
|
163
160
|
//# 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/TableView.js","../src/ui/TableInitializer.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 {trace} from \"@nopeer\";\n\nexport class TableView {\n #container;\n #layouts;\n #shadowRoot;\n\n constructor(container, layouts) {\n this.#container = container;\n this.#layouts = layouts;\n this.#shadowRoot = container.shadowRoot;\n }\n\n init() {\n this.#renderShell();\n this.#bindElements();\n\n if (this.#layouts.length > 0) {\n this.renderTable(0);\n }\n trace.log('TableView initialized with nine-table-analysis component.');\n }\n\n #renderShell() {\n this.#shadowRoot.innerHTML = `\n <style>\n :host { display: block; position: relative; overflow: hidden; height: 100%; }\n \n /* 최외곽 루트 구조: 상단 - 바디 - 하단 */\n .nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }\n \n nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n \n /* 바디 영역: 좌측(요약) - 중앙(시트 영역) - 우측(분석) */\n nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }\n \n nine-table-summary { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; display: block; }\n \n /* 중앙 시트 컨테이너 영역 */\n nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }\n \n nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }\n \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 \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\n .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n\n nine-table-analysis { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; display: block; }\n \n /* 최하단 전체 상태 바 */\n nine-table-footer { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0; font-size: 12px; color: #6b7280; }\n\n table { border-collapse: collapse; width: 100%; table-layout: fixed; }\n th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }\n </style>\n \n <div class=\"nine-table-root\">\n <!-- 1. 상단 컴포넌트 -->\n <nine-table-header></nine-table-header>\n\n <!-- 2. 메인 바디 컴포넌트 -->\n <nine-table-body>\n <nine-table-summary></nine-table-summary>\n \n <nine-table-sheets>\n <nine-table-sheets-body></nine-table-sheets-body>\n <nine-table-sheets-footer>\n <div class=\"nine-tab-bar\"></div>\n <div class=\"sheets-counter\">Total : <span id=\"row-count\">0</span></div>\n </nine-table-sheets-footer>\n </nine-table-sheets>\n \n <nine-table-analysis></nine-table-analysis>\n </nine-table-body>\n\n <!-- 3. 하단 컴포넌트 -->\n <nine-table-footer>\n <div class=\"footer-left\">Ready</div>\n <div class=\"footer-right\">Status: OK</div>\n </nine-table-footer>\n </div>\n `;\n }\n\n #bindElements() {\n this.sidebarLeft = this.#shadowRoot.querySelector('nine-table-summary');\n this.sheetsBody = this.#shadowRoot.querySelector('nine-table-sheets-body');\n this.sidebarRight = this.#shadowRoot.querySelector('nine-table-analysis');\n this.tabBar = this.#shadowRoot.querySelector('.nine-tab-bar');\n this.rowCountEl = this.#shadowRoot.querySelector('#row-count');\n }\n\n renderTable(index) {\n if (!this.#layouts[index]) return;\n\n this.tabBar.innerHTML = '';\n this.#layouts.forEach((_, idx) => {\n const tab = document.createElement('div');\n tab.className = `nine-tab-item ${idx === index ? 'active' : ''}`;\n tab.textContent = `Sheet ${idx + 1}`;\n tab.addEventListener('click', () => this.renderTable(idx));\n this.tabBar.appendChild(tab);\n });\n\n this.sheetsBody.innerHTML = '';\n const currentTable = this.#layouts[index].cloneNode(true);\n this.sheetsBody.appendChild(currentTable);\n\n const rowCount = currentTable.querySelectorAll('tbody tr').length;\n if (this.rowCountEl) {\n this.rowCountEl.textContent = rowCount.toLocaleString();\n }\n\n trace.log(`Rendered sheets tab index: ${index}`);\n }\n\n destroy() {\n this.#shadowRoot.innerHTML = '';\n trace.log('TableView destroyed.');\n }\n}","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 { TableView } from '../ui/TableView.js';\nimport { TableInitializer } from '../ui/TableInitializer.js';\n\nexport default class NineTable extends HTMLElement {\n #created = false;\n #layouts = [];\n\n constructor() {\n super();\n // 최외곽 컴포넌트에만 Shadow DOM 적용\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n if (this.#created) return;\n\n // 1. 컴포넌트 내부의 원본 table 태그들 수집\n const tables = this.querySelectorAll('table');\n tables.forEach(tbl => {\n const initializer = new TableInitializer(this);\n const processedTbl = initializer.initializeTable(tbl);\n this.#layouts.push(processedTbl);\n tbl.style.display = 'none'; // 원본 숨김\n });\n\n // 2. 뷰 초기화 (Shadow DOM 내부에 일반 DOM 엘리먼트들 생성)\n this.view = new TableView(this, this.#layouts);\n this.view.init();\n\n this.#created = true;\n trace.log('NineTable connected and layout initialized.');\n\n this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n }\n\n disconnectedCallback() {\n if (this.view) {\n this.view.destroy();\n }\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","_TableView","container","layouts","__privateAdd","_TableView_instances","_container","_layouts","_shadowRoot","__privateSet","__privateMethod","renderShell_fn","bindElements_fn","__privateGet","index","_","idx","tab","currentTable","rowCount","TableView","_TableInitializer","_TableInitializer_instances","tbl","ensureColgroup_fn","ensureThead_fn","colCount","_a","colgroup","defaultWidth","i","col","thead","TableInitializer","_NineTable","_created","processedTbl","NineTable"],"mappings":";;;;;;;;AAEO,MAAMA,IAAN,MAAMA,UAAcC,EAAY,YAAY;AAAA,EAC/C,cAAc;AACV,UAAK,GACL,KAAK,KAAK,cAAc,OAAO;AAAA,EACnC;AACJ;AALmDC,EAAAF,GAAA;AAA5C,IAAMG,IAANH;AAOA,MAAMI,IAAQ,IAAID,EAAK;;ACPvB,MAAME,IAAN,MAAMA,EAAU;AAAA,EAKnB,YAAYC,GAAWC,GAAS;AAL7B,IAAAC,EAAA,MAAAC;AACH,IAAAD,EAAA,MAAAE;AACA,IAAAF,EAAA,MAAAG;AACA,IAAAH,EAAA,MAAAI;AAGI,IAAAC,EAAA,MAAKH,GAAaJ,IAClBO,EAAA,MAAKF,GAAWJ,IAChBM,EAAA,MAAKD,GAAcN,EAAU;AAAA,EACjC;AAAA,EAEA,OAAO;AACH,IAAAQ,EAAA,MAAKL,GAAAM,GAAL,YACAD,EAAA,MAAKL,GAAAO,GAAL,YAEIC,EAAA,MAAKN,GAAS,SAAS,KACvB,KAAK,YAAY,CAAC,GAEtBP,EAAM,IAAI,2DAA2D;AAAA,EACzE;AAAA,EA4EA,YAAYc,GAAO;AACf,QAAI,CAACD,EAAA,MAAKN,GAASO,CAAK,EAAG;AAE3B,SAAK,OAAO,YAAY,IACxBD,EAAA,MAAKN,GAAS,QAAQ,CAACQ,GAAGC,MAAQ;AAC9B,YAAMC,IAAM,SAAS,cAAc,KAAK;AACxC,MAAAA,EAAI,YAAY,iBAAiBD,MAAQF,IAAQ,WAAW,EAAE,IAC9DG,EAAI,cAAc,SAASD,IAAM,CAAC,IAClCC,EAAI,iBAAiB,SAAS,MAAM,KAAK,YAAYD,CAAG,CAAC,GACzD,KAAK,OAAO,YAAYC,CAAG;AAAA,IAC/B,CAAC,GAED,KAAK,WAAW,YAAY;AAC5B,UAAMC,IAAeL,EAAA,MAAKN,GAASO,CAAK,EAAE,UAAU,EAAI;AACxD,SAAK,WAAW,YAAYI,CAAY;AAExC,UAAMC,IAAWD,EAAa,iBAAiB,UAAU,EAAE;AAC3D,IAAI,KAAK,eACL,KAAK,WAAW,cAAcC,EAAS,eAAc,IAGzDnB,EAAM,IAAI,8BAA8Bc,CAAK,EAAE;AAAA,EACnD;AAAA,EAEA,UAAU;AACN,IAAAD,EAAA,MAAKL,GAAY,YAAY,IAC7BR,EAAM,IAAI,sBAAsB;AAAA,EACpC;AACJ;AA1HIM,IAAA,eACAC,IAAA,eACAC,IAAA,eAHGH,IAAA,eAqBHM,IAAY,gBAAAb,EAAA,WAAG;AACX,EAAAe,EAAA,MAAKL,GAAY,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+DjC,GAhEY,iBAkEZI,IAAa,gBAAAd,EAAA,WAAG;AACZ,OAAK,cAAce,EAAA,MAAKL,GAAY,cAAc,oBAAoB,GACtE,KAAK,aAAaK,EAAA,MAAKL,GAAY,cAAc,wBAAwB,GACzE,KAAK,eAAeK,EAAA,MAAKL,GAAY,cAAc,qBAAqB,GACxE,KAAK,SAASK,EAAA,MAAKL,GAAY,cAAc,eAAe,GAC5D,KAAK,aAAaK,EAAA,MAAKL,GAAY,cAAc,YAAY;AACjE,GANa,kBAvFMV,EAAAG,GAAA;AAAhB,IAAMmB,IAANnB;;ACFA,MAAMoB,IAAN,MAAMA,EAAiB;AAAA,EAG1B,YAAYnB,GAAW;AAHpB,IAAAE,EAAA,MAAAkB;AACH,IAAAlB,EAAA,MAAAE;AAGI,IAAAG,EAAA,MAAKH,GAAaJ;AAAA,EACtB;AAAA;AAAA,EAGA,gBAAgBqB,GAAK;AACjB,WAAAb,EAAA,MAAKY,GAAAE,GAAL,WAAqBD,IACrBb,EAAA,MAAKY,GAAAG,GAAL,WAAkBF,IAElBA,EAAI,UAAU,IAAI,oBAAoB,GAC/BA;AAAA,EACX;AA8BJ;AA3CIjB,IAAA,eADGgB,IAAA;AAiBHE,IAAe,gBAAA1B,EAAA,SAACyB,GAAK;;AACjB,MAAIA,EAAI,cAAc,UAAU,EAAG;AAEnC,QAAMG,MAAWC,IAAAJ,EAAI,cAAc,UAAU,MAA5B,gBAAAI,EAA+B,iBAAiB,UAAU,WAAU,GAC/EC,IAAW,SAAS,cAAc,UAAU,GAC5CC,IAAe,KAAK,IAAI,KAAK,OAAON,EAAI,eAAe,OAAOG,CAAQ,GAAG,GAAG;AAElF,WAASI,IAAI,GAAGA,IAAIJ,GAAUI,KAAK;AAC/B,UAAMC,IAAM,SAAS,cAAc,KAAK;AACxC,IAAAA,EAAI,aAAa,SAASF,CAAY,GACtCD,EAAS,YAAYG,CAAG;AAAA,EAC5B;AACA,EAAAR,EAAI,QAAQK,CAAQ;AACxB,GAbe;AAgBfH,IAAY,gBAAA3B,EAAA,SAACyB,GAAK;AACd,MAAIA,EAAI,cAAc,OAAO,EAAG;AAEhC,QAAMS,IAAQ,SAAS,cAAc,OAAO,GACtCJ,IAAWL,EAAI,cAAc,UAAU;AAC7C,EAAIK,IACAA,EAAS,MAAMI,CAAK,IAEpBT,EAAI,QAAQS,CAAK;AAEzB,GAVY,iBAjCclC,EAAAuB,GAAA;AAAvB,IAAMY,IAANZ;;ACIQ,MAAMa,IAAN,MAAMA,UAAkB,YAAY;AAAA,EAI/C,cAAc;AACV,UAAK;AAJT,IAAA9B,EAAA,MAAA+B,GAAW;AACX,IAAA/B,EAAA,MAAAG,GAAW,CAAA;AAKP,SAAK,aAAa,EAAE,MAAM,OAAM,CAAE;AAAA,EACtC;AAAA,EAEA,oBAAoB;AAChB,QAAIM,EAAA,MAAKsB,GAAU;AAInB,IADe,KAAK,iBAAiB,OAAO,EACrC,QAAQ,CAAAZ,MAAO;AAElB,YAAMa,IADc,IAAIH,EAAiB,IAAI,EACZ,gBAAgBV,CAAG;AACpD,MAAAV,EAAA,MAAKN,GAAS,KAAK6B,CAAY,GAC/Bb,EAAI,MAAM,UAAU;AAAA,IACxB,CAAC,GAGD,KAAK,OAAO,IAAIH,EAAU,MAAMP,EAAA,MAAKN,EAAQ,GAC7C,KAAK,KAAK,KAAI,GAEdE,EAAA,MAAK0B,GAAW,KAChBnC,EAAM,IAAI,6CAA6C,GAEvD,KAAK,cAAc,IAAI,YAAY,QAAQ,EAAE,SAAS,IAAM,QAAQ,EAAE,QAAQ,KAAI,EAAE,CAAE,CAAC;AAAA,EAC3F;AAAA,EAEA,uBAAuB;AACnB,IAAI,KAAK,QACL,KAAK,KAAK,QAAO,GAErBA,EAAM,IAAI,yBAAyB;AAAA,EACvC;AACJ;AArCImC,IAAA,eACA5B,IAAA,eAF+CT,EAAAoC,GAAA;AAApC,IAAMG,IAANH;AAwCV,eAAe,IAAI,YAAY,KAChC,eAAe,OAAO,cAAcG,CAAS;"}
|
|
1
|
+
{"version":3,"file":"nine-table.js","sources":["../src/external/NoPeer.js","../src/ui/TableView.js","../src/ui/TableInitializer.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 {trace} from \"@nopeer\";\n\nexport class TableView {\n #container;\n #layouts;\n #shadowRoot;\n\n constructor(container, layouts) {\n this.#container = container;\n this.#layouts = layouts;\n this.#shadowRoot = container.shadowRoot;\n }\n\n init() {\n this.#renderShell();\n this.#bindElements();\n\n if (this.#layouts.length > 0) {\n this.renderTable(0);\n }\n trace.log('TableView initialized with sidebar and footer hidden.');\n }\n\n #renderShell() {\n this.#shadowRoot.innerHTML = `\n <style>\n :host { display: block; position: relative; overflow: hidden; height: 100%; }\n \n /* 최외곽 루트 구조: 상단 - 바디 */\n .nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }\n \n nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n \n /* 바디 영역: 좌우 영역 숨김 처리 및 중앙 시트만 확장 */\n nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }\n \n nine-table-summary { display: none; }\n \n /* 중앙 시트 컨테이너 영역 (전체 너비 확장) */\n nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }\n \n nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }\n \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 \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\n .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n\n nine-table-analysis { display: none; }\n \n /* 최하단 전체 상태 바 숨김 */\n nine-table-footer { display: none; }\n\n table { border-collapse: collapse; width: 100%; table-layout: fixed; }\n th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }\n </style>\n \n <div class=\"nine-table-root\">\n <!-- 1. 상단 컴포넌트 -->\n <nine-table-header></nine-table-header>\n\n <!-- 2. 메인 바디 컴포넌트 (좌우 숨김, 중앙 단독 확장) -->\n <nine-table-body>\n <nine-table-summary></nine-table-summary>\n \n <nine-table-sheets>\n <nine-table-sheets-body></nine-table-sheets-body>\n <nine-table-sheets-footer>\n <div class=\"nine-tab-bar\"></div>\n <div class=\"sheets-counter\">Total : <span id=\"row-count\">0</span></div>\n </nine-table-sheets-footer>\n </nine-table-sheets>\n \n <nine-table-analysis></nine-table-analysis>\n </nine-table-body>\n\n <!-- 3. 최하단 컴포넌트 숨김 -->\n <nine-table-footer></nine-table-footer>\n </div>\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 this.rowCountEl = this.#shadowRoot.querySelector('#row-count');\n }\n\n renderTable(index) {\n if (!this.#layouts[index]) return;\n\n this.tabBar.innerHTML = '';\n this.#layouts.forEach((_, idx) => {\n const tab = document.createElement('div');\n tab.className = `nine-tab-item ${idx === index ? 'active' : ''}`;\n tab.textContent = `Sheet ${idx + 1}`;\n tab.addEventListener('click', () => this.renderTable(idx));\n this.tabBar.appendChild(tab);\n });\n\n this.sheetsBody.innerHTML = '';\n const currentTable = this.#layouts[index].cloneNode(true);\n this.sheetsBody.appendChild(currentTable);\n\n const rowCount = currentTable.querySelectorAll('tbody tr').length;\n if (this.rowCountEl) {\n this.rowCountEl.textContent = rowCount.toLocaleString();\n }\n\n trace.log(`Rendered sheets tab index: ${index}`);\n }\n\n destroy() {\n this.#shadowRoot.innerHTML = '';\n trace.log('TableView destroyed.');\n }\n}","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 { TableView } from '../ui/TableView.js';\nimport { TableInitializer } from '../ui/TableInitializer.js';\n\nexport default class NineTable extends HTMLElement {\n #created = false;\n #layouts = [];\n\n constructor() {\n super();\n // 최외곽 컴포넌트에만 Shadow DOM 적용\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n if (this.#created) return;\n\n // 1. 컴포넌트 내부의 원본 table 태그들 수집\n const tables = this.querySelectorAll('table');\n tables.forEach(tbl => {\n const initializer = new TableInitializer(this);\n const processedTbl = initializer.initializeTable(tbl);\n this.#layouts.push(processedTbl);\n tbl.style.display = 'none'; // 원본 숨김\n });\n\n // 2. 뷰 초기화 (Shadow DOM 내부에 일반 DOM 엘리먼트들 생성)\n this.view = new TableView(this, this.#layouts);\n this.view.init();\n\n this.#created = true;\n trace.log('NineTable connected and layout initialized.');\n\n this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n }\n\n disconnectedCallback() {\n if (this.view) {\n this.view.destroy();\n }\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","_TableView","container","layouts","__privateAdd","_TableView_instances","_container","_layouts","_shadowRoot","__privateSet","__privateMethod","renderShell_fn","bindElements_fn","__privateGet","index","_","idx","tab","currentTable","rowCount","TableView","_TableInitializer","_TableInitializer_instances","tbl","ensureColgroup_fn","ensureThead_fn","colCount","_a","colgroup","defaultWidth","i","col","thead","TableInitializer","_NineTable","_created","processedTbl","NineTable"],"mappings":"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"}
|
package/dist/nine-table.umd.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
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
|
|
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 B=e=>{throw TypeError(e)};var a=(e,t)=>$(e,"name",{value:t,configurable:!0});var z=(e,t,i)=>t.has(e)||B("Cannot "+i);var o=(e,t,i)=>(z(e,t,"read from private field"),i?i.call(e):t.get(e)),d=(e,t,i)=>t.has(e)?B("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),y=(e,t,i,u)=>(z(e,t,"write to private field"),u?u.call(e,i):t.set(e,i),i),m=(e,t,i)=>(z(e,t,"access private method"),i);var w,c,r,p,H,A,v,f,N,R,x,g;const C=class C extends e.trace.constructor{constructor(){super(),this.init("nine-table","green")}};a(C,"Trace");let t=C;const i=new t,S=class S{constructor(n,s){d(this,p);d(this,w);d(this,c);d(this,r);y(this,w,n),y(this,c,s),y(this,r,n.shadowRoot)}init(){m(this,p,H).call(this),m(this,p,A).call(this),o(this,c).length>0&&this.renderTable(0),i.log("TableView initialized with sidebar and footer hidden.")}renderTable(n){if(!o(this,c)[n])return;this.tabBar.innerHTML="",o(this,c).forEach((L,h)=>{const b=document.createElement("div");b.className=`nine-tab-item ${h===n?"active":""}`,b.textContent=`Sheet ${h+1}`,b.addEventListener("click",()=>this.renderTable(h)),this.tabBar.appendChild(b)}),this.sheetsBody.innerHTML="";const s=o(this,c)[n].cloneNode(!0);this.sheetsBody.appendChild(s);const l=s.querySelectorAll("tbody tr").length;this.rowCountEl&&(this.rowCountEl.textContent=l.toLocaleString()),i.log(`Rendered sheets tab index: ${n}`)}destroy(){o(this,r).innerHTML="",i.log("TableView destroyed.")}};w=new WeakMap,c=new WeakMap,r=new WeakMap,p=new WeakSet,H=a(function(){o(this,r).innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
:host { display: block; position: relative; overflow: hidden; height: 100%; }
|
|
4
4
|
|
|
5
|
-
/* 최외곽 루트 구조: 상단 - 바디
|
|
5
|
+
/* 최외곽 루트 구조: 상단 - 바디 */
|
|
6
6
|
.nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }
|
|
7
7
|
|
|
8
8
|
nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
|
|
9
9
|
|
|
10
|
-
/* 바디 영역:
|
|
10
|
+
/* 바디 영역: 좌우 영역 숨김 처리 및 중앙 시트만 확장 */
|
|
11
11
|
nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }
|
|
12
12
|
|
|
13
|
-
nine-table-summary {
|
|
13
|
+
nine-table-summary { display: none; }
|
|
14
14
|
|
|
15
|
-
/* 중앙 시트 컨테이너 영역 */
|
|
15
|
+
/* 중앙 시트 컨테이너 영역 (전체 너비 확장) */
|
|
16
16
|
nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }
|
|
17
17
|
|
|
18
18
|
nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
|
|
27
27
|
.sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }
|
|
28
28
|
|
|
29
|
-
nine-table-analysis {
|
|
29
|
+
nine-table-analysis { display: none; }
|
|
30
30
|
|
|
31
|
-
/* 최하단 전체 상태 바 */
|
|
32
|
-
nine-table-footer {
|
|
31
|
+
/* 최하단 전체 상태 바 숨김 */
|
|
32
|
+
nine-table-footer { display: none; }
|
|
33
33
|
|
|
34
34
|
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
|
|
35
35
|
th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
<!-- 1. 상단 컴포넌트 -->
|
|
40
40
|
<nine-table-header></nine-table-header>
|
|
41
41
|
|
|
42
|
-
<!-- 2. 메인 바디 컴포넌트 -->
|
|
42
|
+
<!-- 2. 메인 바디 컴포넌트 (좌우 숨김, 중앙 단독 확장) -->
|
|
43
43
|
<nine-table-body>
|
|
44
44
|
<nine-table-summary></nine-table-summary>
|
|
45
45
|
|
|
@@ -54,11 +54,8 @@
|
|
|
54
54
|
<nine-table-analysis></nine-table-analysis>
|
|
55
55
|
</nine-table-body>
|
|
56
56
|
|
|
57
|
-
<!-- 3.
|
|
58
|
-
<nine-table-footer>
|
|
59
|
-
<div class="footer-left">Ready</div>
|
|
60
|
-
<div class="footer-right">Status: OK</div>
|
|
61
|
-
</nine-table-footer>
|
|
57
|
+
<!-- 3. 최하단 컴포넌트 숨김 -->
|
|
58
|
+
<nine-table-footer></nine-table-footer>
|
|
62
59
|
</div>
|
|
63
|
-
`},"#renderShell"),
|
|
60
|
+
`},"#renderShell"),A=a(function(){this.sheetsBody=o(this,r).querySelector("nine-table-sheets-body"),this.tabBar=o(this,r).querySelector(".nine-tab-bar"),this.rowCountEl=o(this,r).querySelector("#row-count")},"#bindElements"),a(S,"TableView");let u=S;const T=class T{constructor(n){d(this,f);d(this,v);y(this,v,n)}initializeTable(n){return m(this,f,N).call(this,n),m(this,f,R).call(this,n),n.classList.add("nine-table-element"),n}};v=new WeakMap,f=new WeakSet,N=a(function(n){var h;if(n.querySelector("colgroup"))return;const s=((h=n.querySelector("tbody tr"))==null?void 0:h.querySelectorAll("th, td").length)||1,l=document.createElement("colgroup"),L=Math.max(Math.floor((n.clientWidth||600)/s),100);for(let b=0;b<s;b++){const M=document.createElement("col");M.setAttribute("width",L),l.appendChild(M)}n.prepend(l)},"#ensureColgroup"),R=a(function(n){if(n.querySelector("thead"))return;const s=document.createElement("thead"),l=n.querySelector("colgroup");l?l.after(s):n.prepend(s)},"#ensureThead"),a(T,"TableInitializer");let E=T;const q=class q extends HTMLElement{constructor(){super();d(this,x,!1);d(this,g,[]);this.attachShadow({mode:"open"})}connectedCallback(){if(o(this,x))return;this.querySelectorAll("table").forEach(l=>{const h=new E(this).initializeTable(l);o(this,g).push(h),l.style.display="none"}),this.view=new u(this,o(this,g)),this.view.init(),y(this,x,!0),i.log("NineTable connected and layout initialized."),this.dispatchEvent(new CustomEvent("load",{bubbles:!0,detail:{target:this}}))}disconnectedCallback(){this.view&&this.view.destroy(),i.log("NineTable disconnected.")}};x=new WeakMap,g=new WeakMap,a(q,"NineTable");let k=q;customElements.get("nine-table")||customElements.define("nine-table",k)});
|
|
64
61
|
//# sourceMappingURL=nine-table.umd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nine-table.umd.js","sources":["../src/external/NoPeer.js","../src/ui/TableView.js","../src/ui/TableInitializer.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 {trace} from \"@nopeer\";\n\nexport class TableView {\n #container;\n #layouts;\n #shadowRoot;\n\n constructor(container, layouts) {\n this.#container = container;\n this.#layouts = layouts;\n this.#shadowRoot = container.shadowRoot;\n }\n\n init() {\n this.#renderShell();\n this.#bindElements();\n\n if (this.#layouts.length > 0) {\n this.renderTable(0);\n }\n trace.log('TableView initialized with nine-table-analysis component.');\n }\n\n #renderShell() {\n this.#shadowRoot.innerHTML = `\n <style>\n :host { display: block; position: relative; overflow: hidden; height: 100%; }\n \n /* 최외곽 루트 구조: 상단 - 바디 - 하단 */\n .nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }\n \n nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n \n /* 바디 영역: 좌측(요약) - 중앙(시트 영역) - 우측(분석) */\n nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }\n \n nine-table-summary { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; display: block; }\n \n /* 중앙 시트 컨테이너 영역 */\n nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }\n \n nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }\n \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 \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\n .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n\n nine-table-analysis { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; display: block; }\n \n /* 최하단 전체 상태 바 */\n nine-table-footer { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 1px solid #e5e7eb; background: #f9fafb; flex-shrink: 0; font-size: 12px; color: #6b7280; }\n\n table { border-collapse: collapse; width: 100%; table-layout: fixed; }\n th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }\n </style>\n \n <div class=\"nine-table-root\">\n <!-- 1. 상단 컴포넌트 -->\n <nine-table-header></nine-table-header>\n\n <!-- 2. 메인 바디 컴포넌트 -->\n <nine-table-body>\n <nine-table-summary></nine-table-summary>\n \n <nine-table-sheets>\n <nine-table-sheets-body></nine-table-sheets-body>\n <nine-table-sheets-footer>\n <div class=\"nine-tab-bar\"></div>\n <div class=\"sheets-counter\">Total : <span id=\"row-count\">0</span></div>\n </nine-table-sheets-footer>\n </nine-table-sheets>\n \n <nine-table-analysis></nine-table-analysis>\n </nine-table-body>\n\n <!-- 3. 하단 컴포넌트 -->\n <nine-table-footer>\n <div class=\"footer-left\">Ready</div>\n <div class=\"footer-right\">Status: OK</div>\n </nine-table-footer>\n </div>\n `;\n }\n\n #bindElements() {\n this.sidebarLeft = this.#shadowRoot.querySelector('nine-table-summary');\n this.sheetsBody = this.#shadowRoot.querySelector('nine-table-sheets-body');\n this.sidebarRight = this.#shadowRoot.querySelector('nine-table-analysis');\n this.tabBar = this.#shadowRoot.querySelector('.nine-tab-bar');\n this.rowCountEl = this.#shadowRoot.querySelector('#row-count');\n }\n\n renderTable(index) {\n if (!this.#layouts[index]) return;\n\n this.tabBar.innerHTML = '';\n this.#layouts.forEach((_, idx) => {\n const tab = document.createElement('div');\n tab.className = `nine-tab-item ${idx === index ? 'active' : ''}`;\n tab.textContent = `Sheet ${idx + 1}`;\n tab.addEventListener('click', () => this.renderTable(idx));\n this.tabBar.appendChild(tab);\n });\n\n this.sheetsBody.innerHTML = '';\n const currentTable = this.#layouts[index].cloneNode(true);\n this.sheetsBody.appendChild(currentTable);\n\n const rowCount = currentTable.querySelectorAll('tbody tr').length;\n if (this.rowCountEl) {\n this.rowCountEl.textContent = rowCount.toLocaleString();\n }\n\n trace.log(`Rendered sheets tab index: ${index}`);\n }\n\n destroy() {\n this.#shadowRoot.innerHTML = '';\n trace.log('TableView destroyed.');\n }\n}","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 { TableView } from '../ui/TableView.js';\nimport { TableInitializer } from '../ui/TableInitializer.js';\n\nexport default class NineTable extends HTMLElement {\n #created = false;\n #layouts = [];\n\n constructor() {\n super();\n // 최외곽 컴포넌트에만 Shadow DOM 적용\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n if (this.#created) return;\n\n // 1. 컴포넌트 내부의 원본 table 태그들 수집\n const tables = this.querySelectorAll('table');\n tables.forEach(tbl => {\n const initializer = new TableInitializer(this);\n const processedTbl = initializer.initializeTable(tbl);\n this.#layouts.push(processedTbl);\n tbl.style.display = 'none'; // 원본 숨김\n });\n\n // 2. 뷰 초기화 (Shadow DOM 내부에 일반 DOM 엘리먼트들 생성)\n this.view = new TableView(this, this.#layouts);\n this.view.init();\n\n this.#created = true;\n trace.log('NineTable connected and layout initialized.');\n\n this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n }\n\n disconnectedCallback() {\n if (this.view) {\n this.view.destroy();\n }\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","_TableView","container","layouts","__privateAdd","_TableView_instances","_container","_layouts","_shadowRoot","__privateSet","__privateMethod","renderShell_fn","bindElements_fn","__privateGet","index","_","idx","tab","currentTable","rowCount","TableView","_TableInitializer","_TableInitializer_instances","tbl","ensureColgroup_fn","ensureThead_fn","colCount","_a","colgroup","defaultWidth","i","col","thead","TableInitializer","_NineTable","_created","processedTbl","NineTable"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nine-table.umd.js","sources":["../src/external/NoPeer.js","../src/ui/TableView.js","../src/ui/TableInitializer.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 {trace} from \"@nopeer\";\n\nexport class TableView {\n #container;\n #layouts;\n #shadowRoot;\n\n constructor(container, layouts) {\n this.#container = container;\n this.#layouts = layouts;\n this.#shadowRoot = container.shadowRoot;\n }\n\n init() {\n this.#renderShell();\n this.#bindElements();\n\n if (this.#layouts.length > 0) {\n this.renderTable(0);\n }\n trace.log('TableView initialized with sidebar and footer hidden.');\n }\n\n #renderShell() {\n this.#shadowRoot.innerHTML = `\n <style>\n :host { display: block; position: relative; overflow: hidden; height: 100%; }\n \n /* 최외곽 루트 구조: 상단 - 바디 */\n .nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }\n \n nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }\n \n /* 바디 영역: 좌우 영역 숨김 처리 및 중앙 시트만 확장 */\n nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }\n \n nine-table-summary { display: none; }\n \n /* 중앙 시트 컨테이너 영역 (전체 너비 확장) */\n nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }\n \n nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }\n \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 \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\n .sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }\n\n nine-table-analysis { display: none; }\n \n /* 최하단 전체 상태 바 숨김 */\n nine-table-footer { display: none; }\n\n table { border-collapse: collapse; width: 100%; table-layout: fixed; }\n th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }\n </style>\n \n <div class=\"nine-table-root\">\n <!-- 1. 상단 컴포넌트 -->\n <nine-table-header></nine-table-header>\n\n <!-- 2. 메인 바디 컴포넌트 (좌우 숨김, 중앙 단독 확장) -->\n <nine-table-body>\n <nine-table-summary></nine-table-summary>\n \n <nine-table-sheets>\n <nine-table-sheets-body></nine-table-sheets-body>\n <nine-table-sheets-footer>\n <div class=\"nine-tab-bar\"></div>\n <div class=\"sheets-counter\">Total : <span id=\"row-count\">0</span></div>\n </nine-table-sheets-footer>\n </nine-table-sheets>\n \n <nine-table-analysis></nine-table-analysis>\n </nine-table-body>\n\n <!-- 3. 최하단 컴포넌트 숨김 -->\n <nine-table-footer></nine-table-footer>\n </div>\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 this.rowCountEl = this.#shadowRoot.querySelector('#row-count');\n }\n\n renderTable(index) {\n if (!this.#layouts[index]) return;\n\n this.tabBar.innerHTML = '';\n this.#layouts.forEach((_, idx) => {\n const tab = document.createElement('div');\n tab.className = `nine-tab-item ${idx === index ? 'active' : ''}`;\n tab.textContent = `Sheet ${idx + 1}`;\n tab.addEventListener('click', () => this.renderTable(idx));\n this.tabBar.appendChild(tab);\n });\n\n this.sheetsBody.innerHTML = '';\n const currentTable = this.#layouts[index].cloneNode(true);\n this.sheetsBody.appendChild(currentTable);\n\n const rowCount = currentTable.querySelectorAll('tbody tr').length;\n if (this.rowCountEl) {\n this.rowCountEl.textContent = rowCount.toLocaleString();\n }\n\n trace.log(`Rendered sheets tab index: ${index}`);\n }\n\n destroy() {\n this.#shadowRoot.innerHTML = '';\n trace.log('TableView destroyed.');\n }\n}","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 { TableView } from '../ui/TableView.js';\nimport { TableInitializer } from '../ui/TableInitializer.js';\n\nexport default class NineTable extends HTMLElement {\n #created = false;\n #layouts = [];\n\n constructor() {\n super();\n // 최외곽 컴포넌트에만 Shadow DOM 적용\n this.attachShadow({ mode: 'open' });\n }\n\n connectedCallback() {\n if (this.#created) return;\n\n // 1. 컴포넌트 내부의 원본 table 태그들 수집\n const tables = this.querySelectorAll('table');\n tables.forEach(tbl => {\n const initializer = new TableInitializer(this);\n const processedTbl = initializer.initializeTable(tbl);\n this.#layouts.push(processedTbl);\n tbl.style.display = 'none'; // 원본 숨김\n });\n\n // 2. 뷰 초기화 (Shadow DOM 내부에 일반 DOM 엘리먼트들 생성)\n this.view = new TableView(this, this.#layouts);\n this.view.init();\n\n this.#created = true;\n trace.log('NineTable connected and layout initialized.');\n\n this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n }\n\n disconnectedCallback() {\n if (this.view) {\n this.view.destroy();\n }\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","_TableView","container","layouts","__privateAdd","_TableView_instances","_container","_layouts","_shadowRoot","__privateSet","__privateMethod","renderShell_fn","bindElements_fn","__privateGet","index","_","idx","tab","currentTable","rowCount","TableView","_TableInitializer","_TableInitializer_instances","tbl","ensureColgroup_fn","ensureThead_fn","colCount","_a","colgroup","defaultWidth","i","col","thead","TableInitializer","_NineTable","_created","processedTbl","NineTable"],"mappings":"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"}
|