@ninebone/table 0.0.3 → 0.0.4
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 +110 -88
- package/dist/nine-table.js.map +1 -1
- package/dist/nine-table.umd.js +48 -31
- package/dist/nine-table.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/nine-table.js
CHANGED
|
@@ -1,141 +1,163 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
1
|
+
var j = Object.defineProperty;
|
|
2
|
+
var B = (i) => {
|
|
3
3
|
throw TypeError(i);
|
|
4
4
|
};
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
import { trace as
|
|
9
|
-
const
|
|
5
|
+
var l = (i, e) => j(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)), r = (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), h = (i, e, t, o) => (v(i, e, "write to private field"), o ? o.call(i, t) : e.set(i, t), t), p = (i, e, t) => (v(i, e, "access private method"), t);
|
|
8
|
+
import { trace as N } from "@ninebone/util";
|
|
9
|
+
const q = class q extends N.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
|
+
l(q, "Trace");
|
|
15
|
+
let k = q;
|
|
16
|
+
const u = new k();
|
|
17
|
+
var g, d, s, b, H, R;
|
|
18
|
+
const T = class T {
|
|
19
19
|
constructor(e, t) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
r(this, b);
|
|
21
|
+
r(this, g);
|
|
22
|
+
r(this, d);
|
|
23
|
+
r(this, s);
|
|
24
|
+
h(this, g, e), h(this, d, t), h(this, s, e.shadowRoot);
|
|
25
25
|
}
|
|
26
26
|
init() {
|
|
27
|
-
|
|
27
|
+
p(this, b, H).call(this), p(this, b, R).call(this), n(this, d).length > 0 && this.renderTable(0), u.log("TableView initialized with nine-table-analysis component.");
|
|
28
28
|
}
|
|
29
29
|
renderTable(e) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
if (!n(this, d)[e]) return;
|
|
31
|
+
this.tabBar.innerHTML = "", n(this, d).forEach((w, a) => {
|
|
32
|
+
const c = document.createElement("div");
|
|
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
|
+
}), this.sheetsBody.innerHTML = "";
|
|
35
|
+
const t = n(this, d)[e].cloneNode(!0);
|
|
36
|
+
this.sheetsBody.appendChild(t);
|
|
37
|
+
const o = t.querySelectorAll("tbody tr").length;
|
|
38
|
+
this.rowCountEl && (this.rowCountEl.textContent = o.toLocaleString()), u.log(`Rendered sheets tab index: ${e}`);
|
|
34
39
|
}
|
|
35
40
|
destroy() {
|
|
36
|
-
|
|
41
|
+
n(this, s).innerHTML = "", u.log("TableView destroyed.");
|
|
37
42
|
}
|
|
38
43
|
};
|
|
39
|
-
|
|
40
|
-
|
|
44
|
+
g = new WeakMap(), d = new WeakMap(), s = new WeakMap(), b = new WeakSet(), H = /* @__PURE__ */ l(function() {
|
|
45
|
+
n(this, s).innerHTML = `
|
|
41
46
|
<style>
|
|
42
47
|
:host { display: block; position: relative; overflow: hidden; height: 100%; }
|
|
43
|
-
.grid-root { display: flex; flex-direction: column; height: 100%; position: relative; }
|
|
44
48
|
|
|
45
|
-
/*
|
|
46
|
-
.
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
/* 최외곽 루트 구조: 상단 - 바디 - 하단 */
|
|
50
|
+
.nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }
|
|
51
|
+
|
|
52
|
+
nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
|
|
53
|
+
|
|
54
|
+
/* 바디 영역: 좌측(요약) - 중앙(시트 영역) - 우측(분석) */
|
|
55
|
+
nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }
|
|
56
|
+
|
|
57
|
+
nine-table-summary { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; display: block; }
|
|
58
|
+
|
|
59
|
+
/* 중앙 시트 컨테이너 영역 */
|
|
60
|
+
nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }
|
|
51
61
|
|
|
52
|
-
|
|
62
|
+
nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }
|
|
53
63
|
|
|
54
|
-
/* 탭
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
.
|
|
64
|
+
/* 하단 탭 버튼 및 카운터 영역 */
|
|
65
|
+
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; }
|
|
66
|
+
|
|
67
|
+
.nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }
|
|
68
|
+
.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; }
|
|
69
|
+
.nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }
|
|
70
|
+
|
|
71
|
+
.sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }
|
|
72
|
+
|
|
73
|
+
nine-table-analysis { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; display: block; }
|
|
74
|
+
|
|
75
|
+
/* 최하단 전체 상태 바 */
|
|
76
|
+
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; }
|
|
58
77
|
|
|
59
|
-
.grid-table-container { flex: 1; overflow: auto; }
|
|
60
78
|
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
|
|
61
79
|
th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }
|
|
62
80
|
</style>
|
|
63
81
|
|
|
64
|
-
<div class="
|
|
65
|
-
<!--
|
|
66
|
-
<
|
|
82
|
+
<div class="nine-table-root">
|
|
83
|
+
<!-- 1. 상단 컴포넌트 -->
|
|
84
|
+
<nine-table-header></nine-table-header>
|
|
67
85
|
|
|
68
|
-
<!--
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
<div class="grid-sidebar-left"></div>
|
|
86
|
+
<!-- 2. 메인 바디 컴포넌트 -->
|
|
87
|
+
<nine-table-body>
|
|
88
|
+
<nine-table-summary></nine-table-summary>
|
|
72
89
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
<
|
|
76
|
-
|
|
90
|
+
<nine-table-sheets>
|
|
91
|
+
<nine-table-sheets-body></nine-table-sheets-body>
|
|
92
|
+
<nine-table-sheets-footer>
|
|
93
|
+
<div class="nine-tab-bar"></div>
|
|
94
|
+
<div class="sheets-counter">Total : <span id="row-count">0</span></div>
|
|
95
|
+
</nine-table-sheets-footer>
|
|
96
|
+
</nine-table-sheets>
|
|
77
97
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
</div>
|
|
98
|
+
<nine-table-analysis></nine-table-analysis>
|
|
99
|
+
</nine-table-body>
|
|
81
100
|
|
|
82
|
-
<!--
|
|
83
|
-
<
|
|
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>
|
|
84
106
|
</div>
|
|
85
107
|
`;
|
|
86
|
-
}, "#renderShell"),
|
|
87
|
-
this.sidebarLeft =
|
|
88
|
-
}, "#bindElements"),
|
|
89
|
-
let
|
|
90
|
-
var m, f, A,
|
|
91
|
-
const
|
|
108
|
+
}, "#renderShell"), R = /* @__PURE__ */ l(function() {
|
|
109
|
+
this.sidebarLeft = n(this, s).querySelector("nine-table-summary"), this.sheetsBody = n(this, s).querySelector("nine-table-sheets-body"), this.sidebarRight = n(this, s).querySelector("nine-table-analysis"), this.tabBar = n(this, s).querySelector(".nine-tab-bar"), this.rowCountEl = n(this, s).querySelector("#row-count");
|
|
110
|
+
}, "#bindElements"), l(T, "TableView");
|
|
111
|
+
let S = T;
|
|
112
|
+
var m, f, A, $;
|
|
113
|
+
const L = class L {
|
|
92
114
|
constructor(e) {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
115
|
+
r(this, f);
|
|
116
|
+
r(this, m);
|
|
117
|
+
h(this, m, e);
|
|
96
118
|
}
|
|
97
119
|
// [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)
|
|
98
120
|
initializeTable(e) {
|
|
99
|
-
return
|
|
121
|
+
return p(this, f, A).call(this, e), p(this, f, $).call(this, e), e.classList.add("nine-table-element"), e;
|
|
100
122
|
}
|
|
101
123
|
};
|
|
102
124
|
m = new WeakMap(), f = new WeakSet(), // [Private] colgroup 보정
|
|
103
|
-
A = /* @__PURE__ */
|
|
104
|
-
var
|
|
125
|
+
A = /* @__PURE__ */ l(function(e) {
|
|
126
|
+
var a;
|
|
105
127
|
if (e.querySelector("colgroup")) return;
|
|
106
|
-
const t = ((
|
|
107
|
-
for (let
|
|
108
|
-
const
|
|
109
|
-
|
|
128
|
+
const t = ((a = e.querySelector("tbody tr")) == null ? void 0 : a.querySelectorAll("th, td").length) || 1, o = document.createElement("colgroup"), w = Math.max(Math.floor((e.clientWidth || 600) / t), 100);
|
|
129
|
+
for (let c = 0; c < t; c++) {
|
|
130
|
+
const M = document.createElement("col");
|
|
131
|
+
M.setAttribute("width", w), o.appendChild(M);
|
|
110
132
|
}
|
|
111
|
-
e.prepend(
|
|
133
|
+
e.prepend(o);
|
|
112
134
|
}, "#ensureColgroup"), // [Private] thead 보정
|
|
113
|
-
|
|
135
|
+
$ = /* @__PURE__ */ l(function(e) {
|
|
114
136
|
if (e.querySelector("thead")) return;
|
|
115
|
-
const t = document.createElement("thead"),
|
|
116
|
-
|
|
117
|
-
}, "#ensureThead"),
|
|
118
|
-
let E =
|
|
119
|
-
var
|
|
120
|
-
const
|
|
137
|
+
const t = document.createElement("thead"), o = e.querySelector("colgroup");
|
|
138
|
+
o ? o.after(t) : e.prepend(t);
|
|
139
|
+
}, "#ensureThead"), l(L, "TableInitializer");
|
|
140
|
+
let E = L;
|
|
141
|
+
var y, x;
|
|
142
|
+
const z = class z extends HTMLElement {
|
|
121
143
|
constructor() {
|
|
122
144
|
super();
|
|
123
|
-
|
|
124
|
-
|
|
145
|
+
r(this, y, !1);
|
|
146
|
+
r(this, x, []);
|
|
125
147
|
this.attachShadow({ mode: "open" });
|
|
126
148
|
}
|
|
127
149
|
connectedCallback() {
|
|
128
|
-
if (
|
|
129
|
-
this.querySelectorAll("table").forEach((
|
|
130
|
-
const
|
|
131
|
-
|
|
132
|
-
}), this.view = new
|
|
150
|
+
if (n(this, y)) return;
|
|
151
|
+
this.querySelectorAll("table").forEach((o) => {
|
|
152
|
+
const a = new E(this).initializeTable(o);
|
|
153
|
+
n(this, x).push(a), o.style.display = "none";
|
|
154
|
+
}), this.view = new S(this, n(this, x)), this.view.init(), h(this, y, !0), u.log("NineTable connected and layout initialized."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } }));
|
|
133
155
|
}
|
|
134
156
|
disconnectedCallback() {
|
|
135
|
-
this.view && this.view.destroy(),
|
|
157
|
+
this.view && this.view.destroy(), u.log("NineTable disconnected.");
|
|
136
158
|
}
|
|
137
159
|
};
|
|
138
|
-
|
|
139
|
-
let C =
|
|
160
|
+
y = new WeakMap(), x = new WeakMap(), l(z, "NineTable");
|
|
161
|
+
let C = z;
|
|
140
162
|
customElements.get("nine-table") || customElements.define("nine-table", C);
|
|
141
163
|
//# 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 proper flex row layout for 3 columns.');\n }\n\n #renderShell() {\n this.#shadowRoot.innerHTML = `\n <style>\n :host { display: block; position: relative; overflow: hidden; height: 100%; }\n .grid-root { display: flex; flex-direction: column; height: 100%; position: relative; }\n \n /* 탭 바와 푸터 사이에 가로로 3개 영역을 나란히 묶어주는 래퍼 추가 */\n .grid-main-layout { display: flex; flex: 1; overflow: hidden; position: relative; }\n\n .grid-sidebar-left { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; }\n .grid-viewport { flex: 1; overflow: auto; position: relative; background: #ffffff; display: flex; flex-direction: column; }\n .grid-sidebar-right { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; }\n \n .grid-footer-bar { display: flex; height: 16px; flex-shrink: 0; }\n \n /* 탭 내비게이션 및 테이블 뷰포트 */\n .grid-tab-bar { display: flex; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; height: 36px; align-items: center; padding: 0 8px; gap: 4px; flex-shrink: 0; }\n .grid-tab-item { padding: 6px 14px; cursor: pointer; font-size: 13px; color: #4b5563; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; }\n .grid-tab-item.active { background: #ffffff; border-color: #e5e7eb; color: #111827; font-weight: 600; }\n\n .grid-table-container { flex: 1; overflow: auto; }\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=\"grid-root\">\n <!-- 최상단 탭 바 -->\n <div class=\"grid-tab-bar\"></div>\n\n <!-- 가로 배치를 위한 중간 메인 래퍼 -->\n <div class=\"grid-main-layout\">\n <!-- 1. 좌측 통계/사이드 영역 -->\n <div class=\"grid-sidebar-left\"></div>\n \n <!-- 2. 중앙 테이블 뷰포트 -->\n <div class=\"grid-viewport\">\n <div class=\"grid-table-container\"></div>\n </div>\n \n <!-- 3. 우측 통계/사이드 영역 -->\n <div class=\"grid-sidebar-right\"></div>\n </div>\n\n <!-- 최하단 푸터 바 -->\n <div class=\"grid-footer-bar\"></div>\n </div>\n `;\n }\n\n #bindElements() {\n this.sidebarLeft = this.#shadowRoot.querySelector('.grid-sidebar-left');\n this.tableContainer = this.#shadowRoot.querySelector('.grid-table-container');\n this.sidebarRight = this.#shadowRoot.querySelector('.grid-sidebar-right');\n this.tabBar = this.#shadowRoot.querySelector('.grid-tab-bar');\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 = `grid-tab-item ${idx === index ? 'active' : ''}`;\n tab.textContent = `Table ${idx + 1}`;\n tab.addEventListener('click', () => this.renderTable(idx));\n this.tabBar.appendChild(tab);\n });\n\n this.tableContainer.innerHTML = '';\n this.tableContainer.appendChild(this.#layouts[index].cloneNode(true));\n\n trace.log(`Rendered layout 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","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.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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"}
|
package/dist/nine-table.umd.js
CHANGED
|
@@ -1,47 +1,64 @@
|
|
|
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 N=Object.defineProperty;var B=e=>{throw TypeError(e)};var a=(e,t)=>N(e,"name",{value:t,configurable:!0});var z=(e,t,n)=>t.has(e)||B("Cannot "+n);var o=(e,t,n)=>(z(e,t,"read from private field"),n?n.call(e):t.get(e)),d=(e,t,n)=>t.has(e)?B("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,n),y=(e,t,n,f)=>(z(e,t,"write to private field"),f?f.call(e,n):t.set(e,n),n),m=(e,t,n)=>(z(e,t,"access private method"),n);var w,c,s,u,H,R,v,p,A,j,x,g;const E=class E extends e.trace.constructor{constructor(){super(),this.init("nine-table","green")}};a(E,"Trace");let t=E;const n=new t,C=class C{constructor(i,l){d(this,u);d(this,w);d(this,c);d(this,s);y(this,w,i),y(this,c,l),y(this,s,i.shadowRoot)}init(){m(this,u,H).call(this),m(this,u,R).call(this),o(this,c).length>0&&this.renderTable(0),n.log("TableView initialized with nine-table-analysis component.")}renderTable(i){if(!o(this,c)[i])return;this.tabBar.innerHTML="",o(this,c).forEach((L,h)=>{const b=document.createElement("div");b.className=`nine-tab-item ${h===i?"active":""}`,b.textContent=`Sheet ${h+1}`,b.addEventListener("click",()=>this.renderTable(h)),this.tabBar.appendChild(b)}),this.sheetsBody.innerHTML="";const l=o(this,c)[i].cloneNode(!0);this.sheetsBody.appendChild(l);const r=l.querySelectorAll("tbody tr").length;this.rowCountEl&&(this.rowCountEl.textContent=r.toLocaleString()),n.log(`Rendered sheets tab index: ${i}`)}destroy(){o(this,s).innerHTML="",n.log("TableView destroyed.")}};w=new WeakMap,c=new WeakMap,s=new WeakMap,u=new WeakSet,H=a(function(){o(this,s).innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
:host { display: block; position: relative; overflow: hidden; height: 100%; }
|
|
4
|
-
.grid-root { display: flex; flex-direction: column; height: 100%; position: relative; }
|
|
5
4
|
|
|
6
|
-
/*
|
|
7
|
-
.
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
/* 최외곽 루트 구조: 상단 - 바디 - 하단 */
|
|
6
|
+
.nine-table-root { display: flex; flex-direction: column; height: 100%; position: relative; }
|
|
7
|
+
|
|
8
|
+
nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
|
|
9
|
+
|
|
10
|
+
/* 바디 영역: 좌측(요약) - 중앙(시트 영역) - 우측(분석) */
|
|
11
|
+
nine-table-body { display: flex; flex: 1; overflow: hidden; position: relative; }
|
|
12
|
+
|
|
13
|
+
nine-table-summary { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; display: block; }
|
|
14
|
+
|
|
15
|
+
/* 중앙 시트 컨테이너 영역 */
|
|
16
|
+
nine-table-sheets { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; display: block; }
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
nine-table-sheets-body { flex: 1; overflow: auto; position: relative; display: block; }
|
|
19
|
+
|
|
20
|
+
/* 하단 탭 버튼 및 카운터 영역 */
|
|
21
|
+
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; }
|
|
22
|
+
|
|
23
|
+
.nine-tab-bar { display: flex; align-items: center; gap: 2px; overflow-x: auto; flex: 1; height: 100%; }
|
|
24
|
+
.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; }
|
|
25
|
+
.nine-tab-item.active { background: #ffffff; color: #111827; font-weight: 600; border-top: 2px solid #2563eb; }
|
|
26
|
+
|
|
27
|
+
.sheets-counter { font-size: 12px; color: #6b7280; padding-left: 12px; flex-shrink: 0; }
|
|
28
|
+
|
|
29
|
+
nine-table-analysis { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; display: block; }
|
|
14
30
|
|
|
15
|
-
/*
|
|
16
|
-
|
|
17
|
-
.grid-tab-item { padding: 6px 14px; cursor: pointer; font-size: 13px; color: #4b5563; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; }
|
|
18
|
-
.grid-tab-item.active { background: #ffffff; border-color: #e5e7eb; color: #111827; font-weight: 600; }
|
|
31
|
+
/* 최하단 전체 상태 바 */
|
|
32
|
+
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; }
|
|
19
33
|
|
|
20
|
-
.grid-table-container { flex: 1; overflow: auto; }
|
|
21
34
|
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
|
|
22
35
|
th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }
|
|
23
36
|
</style>
|
|
24
37
|
|
|
25
|
-
<div class="
|
|
26
|
-
<!--
|
|
27
|
-
<
|
|
38
|
+
<div class="nine-table-root">
|
|
39
|
+
<!-- 1. 상단 컴포넌트 -->
|
|
40
|
+
<nine-table-header></nine-table-header>
|
|
28
41
|
|
|
29
|
-
<!--
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
<div class="grid-sidebar-left"></div>
|
|
42
|
+
<!-- 2. 메인 바디 컴포넌트 -->
|
|
43
|
+
<nine-table-body>
|
|
44
|
+
<nine-table-summary></nine-table-summary>
|
|
33
45
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<
|
|
37
|
-
|
|
46
|
+
<nine-table-sheets>
|
|
47
|
+
<nine-table-sheets-body></nine-table-sheets-body>
|
|
48
|
+
<nine-table-sheets-footer>
|
|
49
|
+
<div class="nine-tab-bar"></div>
|
|
50
|
+
<div class="sheets-counter">Total : <span id="row-count">0</span></div>
|
|
51
|
+
</nine-table-sheets-footer>
|
|
52
|
+
</nine-table-sheets>
|
|
38
53
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
</div>
|
|
54
|
+
<nine-table-analysis></nine-table-analysis>
|
|
55
|
+
</nine-table-body>
|
|
42
56
|
|
|
43
|
-
<!--
|
|
44
|
-
<
|
|
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>
|
|
45
62
|
</div>
|
|
46
|
-
`},"#renderShell"),
|
|
63
|
+
`},"#renderShell"),R=a(function(){this.sidebarLeft=o(this,s).querySelector("nine-table-summary"),this.sheetsBody=o(this,s).querySelector("nine-table-sheets-body"),this.sidebarRight=o(this,s).querySelector("nine-table-analysis"),this.tabBar=o(this,s).querySelector(".nine-tab-bar"),this.rowCountEl=o(this,s).querySelector("#row-count")},"#bindElements"),a(C,"TableView");let f=C;const q=class q{constructor(i){d(this,p);d(this,v);y(this,v,i)}initializeTable(i){return m(this,p,A).call(this,i),m(this,p,j).call(this,i),i.classList.add("nine-table-element"),i}};v=new WeakMap,p=new WeakSet,A=a(function(i){var h;if(i.querySelector("colgroup"))return;const l=((h=i.querySelector("tbody tr"))==null?void 0:h.querySelectorAll("th, td").length)||1,r=document.createElement("colgroup"),L=Math.max(Math.floor((i.clientWidth||600)/l),100);for(let b=0;b<l;b++){const M=document.createElement("col");M.setAttribute("width",L),r.appendChild(M)}i.prepend(r)},"#ensureColgroup"),j=a(function(i){if(i.querySelector("thead"))return;const l=document.createElement("thead"),r=i.querySelector("colgroup");r?r.after(l):i.prepend(l)},"#ensureThead"),a(q,"TableInitializer");let k=q;const T=class T 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(r=>{const h=new k(this).initializeTable(r);o(this,g).push(h),r.style.display="none"}),this.view=new f(this,o(this,g)),this.view.init(),y(this,x,!0),n.log("NineTable connected and layout initialized."),this.dispatchEvent(new CustomEvent("load",{bubbles:!0,detail:{target:this}}))}disconnectedCallback(){this.view&&this.view.destroy(),n.log("NineTable disconnected.")}};x=new WeakMap,g=new WeakMap,a(T,"NineTable");let S=T;customElements.get("nine-table")||customElements.define("nine-table",S)});
|
|
47
64
|
//# 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 proper flex row layout for 3 columns.');\n }\n\n #renderShell() {\n this.#shadowRoot.innerHTML = `\n <style>\n :host { display: block; position: relative; overflow: hidden; height: 100%; }\n .grid-root { display: flex; flex-direction: column; height: 100%; position: relative; }\n \n /* 탭 바와 푸터 사이에 가로로 3개 영역을 나란히 묶어주는 래퍼 추가 */\n .grid-main-layout { display: flex; flex: 1; overflow: hidden; position: relative; }\n\n .grid-sidebar-left { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; }\n .grid-viewport { flex: 1; overflow: auto; position: relative; background: #ffffff; display: flex; flex-direction: column; }\n .grid-sidebar-right { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; }\n \n .grid-footer-bar { display: flex; height: 16px; flex-shrink: 0; }\n \n /* 탭 내비게이션 및 테이블 뷰포트 */\n .grid-tab-bar { display: flex; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; height: 36px; align-items: center; padding: 0 8px; gap: 4px; flex-shrink: 0; }\n .grid-tab-item { padding: 6px 14px; cursor: pointer; font-size: 13px; color: #4b5563; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; }\n .grid-tab-item.active { background: #ffffff; border-color: #e5e7eb; color: #111827; font-weight: 600; }\n\n .grid-table-container { flex: 1; overflow: auto; }\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=\"grid-root\">\n <!-- 최상단 탭 바 -->\n <div class=\"grid-tab-bar\"></div>\n\n <!-- 가로 배치를 위한 중간 메인 래퍼 -->\n <div class=\"grid-main-layout\">\n <!-- 1. 좌측 통계/사이드 영역 -->\n <div class=\"grid-sidebar-left\"></div>\n \n <!-- 2. 중앙 테이블 뷰포트 -->\n <div class=\"grid-viewport\">\n <div class=\"grid-table-container\"></div>\n </div>\n \n <!-- 3. 우측 통계/사이드 영역 -->\n <div class=\"grid-sidebar-right\"></div>\n </div>\n\n <!-- 최하단 푸터 바 -->\n <div class=\"grid-footer-bar\"></div>\n </div>\n `;\n }\n\n #bindElements() {\n this.sidebarLeft = this.#shadowRoot.querySelector('.grid-sidebar-left');\n this.tableContainer = this.#shadowRoot.querySelector('.grid-table-container');\n this.sidebarRight = this.#shadowRoot.querySelector('.grid-sidebar-right');\n this.tabBar = this.#shadowRoot.querySelector('.grid-tab-bar');\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 = `grid-tab-item ${idx === index ? 'active' : ''}`;\n tab.textContent = `Table ${idx + 1}`;\n tab.addEventListener('click', () => this.renderTable(idx));\n this.tabBar.appendChild(tab);\n });\n\n this.tableContainer.innerHTML = '';\n this.tableContainer.appendChild(this.#layouts[index].cloneNode(true));\n\n trace.log(`Rendered layout 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","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 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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"}
|