@ninebone/table 0.0.194 β 0.0.195
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 +149 -160
- package/dist/nine-table.js.map +1 -1
- package/dist/nine-table.umd.js +5 -22
- package/dist/nine-table.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/nine-table.js
CHANGED
|
@@ -5,10 +5,10 @@ var He = (w) => {
|
|
|
5
5
|
var We = (w, i, t) => i in w ? Ie(w, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : w[i] = t;
|
|
6
6
|
var l = (w, i) => Ie(w, "name", { value: i, configurable: !0 });
|
|
7
7
|
var m = (w, i, t) => We(w, typeof i != "symbol" ? i + "" : i, t), $e = (w, i, t) => i.has(w) || He("Cannot " + t);
|
|
8
|
-
var e = (w, i, t) => ($e(w, i, "read from private field"), t ? t.call(w) : i.get(w)), u = (w, i, t) => i.has(w) ? He("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(w) : i.set(w, t),
|
|
8
|
+
var e = (w, i, t) => ($e(w, i, "read from private field"), t ? t.call(w) : i.get(w)), u = (w, i, t) => i.has(w) ? He("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(w) : i.set(w, t), b = (w, i, t, s) => ($e(w, i, "write to private field"), s ? s.call(w, t) : i.set(w, t), t);
|
|
9
9
|
var ze = (w, i, t, s) => ({
|
|
10
10
|
set _(n) {
|
|
11
|
-
|
|
11
|
+
b(w, i, n, t);
|
|
12
12
|
},
|
|
13
13
|
get _() {
|
|
14
14
|
return e(w, i, s);
|
|
@@ -22,7 +22,7 @@ const Te = class Te extends Oe.constructor {
|
|
|
22
22
|
};
|
|
23
23
|
l(Te, "Trace");
|
|
24
24
|
let pe = Te;
|
|
25
|
-
const
|
|
25
|
+
const U = new pe();
|
|
26
26
|
var L, O, y, B, D, N, ie, P, se;
|
|
27
27
|
const Ae = class Ae extends HTMLElement {
|
|
28
28
|
constructor() {
|
|
@@ -36,7 +36,7 @@ const Ae = class Ae extends HTMLElement {
|
|
|
36
36
|
u(this, ie, /* @__PURE__ */ l(() => {
|
|
37
37
|
if (!e(this, L)) return;
|
|
38
38
|
const t = e(this, L).querySelector(".ng-container-body");
|
|
39
|
-
t && (
|
|
39
|
+
t && (b(this, N, new ResizeObserver(() => {
|
|
40
40
|
this.refresh();
|
|
41
41
|
})), e(this, N).observe(t));
|
|
42
42
|
}, "#observeResize"));
|
|
@@ -56,16 +56,16 @@ const Ae = class Ae extends HTMLElement {
|
|
|
56
56
|
const d = Math.max(Math.min(c * (h / p), c), 20);
|
|
57
57
|
r.style.width = `${d}px`;
|
|
58
58
|
let a = 0;
|
|
59
|
-
const
|
|
60
|
-
if (
|
|
61
|
-
const x =
|
|
59
|
+
const g = s.style.transform;
|
|
60
|
+
if (g && g.includes("translateX")) {
|
|
61
|
+
const x = g.match(/translateX\(([-\d.]+)px\)/);
|
|
62
62
|
x && x[1] && (a = parseFloat(x[1]));
|
|
63
63
|
} else
|
|
64
64
|
a = parseInt(s.style.left || 0, 10);
|
|
65
65
|
let f = parseInt(Math.abs(a) * c / p, 10);
|
|
66
66
|
f < 0 && (f = 0);
|
|
67
|
-
const
|
|
68
|
-
f >
|
|
67
|
+
const R = c - d;
|
|
68
|
+
f > R && (f = R), r.style.left = `${f}px`, e(this, y).left.disabled = f === 0, e(this, y).right.disabled = f >= R - 1;
|
|
69
69
|
}, "refresh"));
|
|
70
70
|
u(this, P, /* @__PURE__ */ l((t) => {
|
|
71
71
|
if (!e(this, y)) return !1;
|
|
@@ -84,8 +84,8 @@ const Ae = class Ae extends HTMLElement {
|
|
|
84
84
|
const t = /* @__PURE__ */ l((n) => {
|
|
85
85
|
clearInterval(e(this, B)), clearInterval(e(this, D));
|
|
86
86
|
const r = parseInt(e(this, y).thumb.style.left || 0, 10);
|
|
87
|
-
e(this, P).call(this, r + n),
|
|
88
|
-
clearInterval(e(this, B)),
|
|
87
|
+
e(this, P).call(this, r + n), b(this, B, setInterval(() => {
|
|
88
|
+
clearInterval(e(this, B)), b(this, D, setInterval(() => {
|
|
89
89
|
const o = parseInt(e(this, y).thumb.style.left || 0, 10);
|
|
90
90
|
e(this, P).call(this, o + n) || clearInterval(e(this, D));
|
|
91
91
|
}, 50));
|
|
@@ -106,20 +106,20 @@ const Ae = class Ae extends HTMLElement {
|
|
|
106
106
|
e(this, P).call(this, n.clientX - r.left - o / 2);
|
|
107
107
|
}), e(this, y).thumb.addEventListener("mousedown", (n) => {
|
|
108
108
|
if (n.button !== 0) return;
|
|
109
|
-
n.stopPropagation(), n.preventDefault(),
|
|
109
|
+
n.stopPropagation(), n.preventDefault(), b(this, O, !0), this.shiftX = n.clientX - e(this, y).thumb.getBoundingClientRect().left;
|
|
110
110
|
const r = /* @__PURE__ */ l((h) => {
|
|
111
111
|
if (!e(this, O)) return;
|
|
112
112
|
const p = e(this, y).track.getBoundingClientRect();
|
|
113
113
|
e(this, P).call(this, h.clientX - p.left - this.shiftX);
|
|
114
114
|
}, "onMouseMove"), o = /* @__PURE__ */ l(() => {
|
|
115
|
-
|
|
115
|
+
b(this, O, !1), s(), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", o), this.refresh();
|
|
116
116
|
}, "onMouseUp");
|
|
117
117
|
document.addEventListener("mousemove", r), document.addEventListener("mouseup", o);
|
|
118
118
|
});
|
|
119
119
|
}, "#init"));
|
|
120
120
|
}
|
|
121
121
|
connectedCallback() {
|
|
122
|
-
if (
|
|
122
|
+
if (b(this, L, this.closest("nine-table-sheet") || this.getRootNode().host), !e(this, L)) return;
|
|
123
123
|
this.innerHTML = `
|
|
124
124
|
<style>
|
|
125
125
|
nine-table-hscrollbar {
|
|
@@ -189,7 +189,7 @@ const Ae = class Ae extends HTMLElement {
|
|
|
189
189
|
setTimeout(t, 10);
|
|
190
190
|
return;
|
|
191
191
|
}
|
|
192
|
-
|
|
192
|
+
b(this, y, {
|
|
193
193
|
container: s,
|
|
194
194
|
track: this.querySelector(".ng-scroll-track"),
|
|
195
195
|
thumb: this.querySelector(".ng-scroll-thumb"),
|
|
@@ -206,16 +206,16 @@ const Ae = class Ae extends HTMLElement {
|
|
|
206
206
|
L = new WeakMap(), O = new WeakMap(), y = new WeakMap(), B = new WeakMap(), D = new WeakMap(), N = new WeakMap(), ie = new WeakMap(), P = new WeakMap(), se = new WeakMap(), l(Ae, "NineTableHScrollBar");
|
|
207
207
|
let ye = Ae;
|
|
208
208
|
customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", ye);
|
|
209
|
-
var V, _,
|
|
209
|
+
var V, _, E, $, M, I, ne, re;
|
|
210
210
|
const qe = class qe {
|
|
211
211
|
constructor(i) {
|
|
212
212
|
u(this, V);
|
|
213
213
|
u(this, _, []);
|
|
214
|
-
u(this,
|
|
214
|
+
u(this, E, null);
|
|
215
215
|
u(this, $, null);
|
|
216
216
|
u(this, M, 0);
|
|
217
217
|
u(this, I, 0);
|
|
218
|
-
m(this, "getRowHeight", /* @__PURE__ */ l(() => e(this,
|
|
218
|
+
m(this, "getRowHeight", /* @__PURE__ */ l(() => e(this, E), "getRowHeight"));
|
|
219
219
|
u(this, ne, /* @__PURE__ */ l(() => {
|
|
220
220
|
e(this, re).call(this);
|
|
221
221
|
}, "#init"));
|
|
@@ -223,7 +223,7 @@ const qe = class qe {
|
|
|
223
223
|
* π― λ·°ν¬νΈ ν¬κΈ° λ³ν μμ μ λμ΄ κ³μ° λ° νμν ν κ°μ μ°μ Β·μΊμ±μ μκ²°
|
|
224
224
|
*/
|
|
225
225
|
u(this, re, /* @__PURE__ */ l(() => {
|
|
226
|
-
!e(this, V) || !(e(this, V) instanceof HTMLElement) || (
|
|
226
|
+
!e(this, V) || !(e(this, V) instanceof HTMLElement) || (b(this, $, new ResizeObserver((i) => {
|
|
227
227
|
for (const t of i) {
|
|
228
228
|
const s = t.target;
|
|
229
229
|
if (!s.classList.contains("active"))
|
|
@@ -235,10 +235,10 @@ const qe = class qe {
|
|
|
235
235
|
const h = s.querySelector(".ng-container-body") || s, p = h.querySelector("thead"), c = h.querySelector("tfoot");
|
|
236
236
|
p && (o += p.offsetHeight || p.getBoundingClientRect().height), c && (o += c.offsetHeight || c.getBoundingClientRect().height);
|
|
237
237
|
const d = Math.max(r - o, 100);
|
|
238
|
-
if (e(this, M) !== d && (
|
|
239
|
-
const a = Math.ceil(e(this, M) / e(this,
|
|
240
|
-
|
|
241
|
-
const f = s.querySelector(
|
|
238
|
+
if (e(this, M) !== d && (b(this, M, d), e(this, E) !== null)) {
|
|
239
|
+
const a = Math.ceil(e(this, M) / e(this, E));
|
|
240
|
+
b(this, I, a + 20), U.log(`[RowManager] Resized. Height: ${e(this, M)}px | Target Rows: ${e(this, I)}`), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((g) => {
|
|
241
|
+
const f = s.querySelector(g);
|
|
242
242
|
f && f.querySelector("tbody") && this.renderRows(f);
|
|
243
243
|
});
|
|
244
244
|
}
|
|
@@ -250,11 +250,11 @@ const qe = class qe {
|
|
|
250
250
|
const t = i.querySelector("tbody.bindable") || i.querySelector("tbody");
|
|
251
251
|
if (!t) return;
|
|
252
252
|
const s = Array.from(t.querySelectorAll("tr")).filter((n) => !n.classList.contains("nodata"));
|
|
253
|
-
|
|
253
|
+
b(this, _, s.map((n) => n.cloneNode(!0))), b(this, E, null), console.log(`[RowManager] Template initialized with ${e(this, _).length} row(s).`);
|
|
254
254
|
}, "initTemplate"));
|
|
255
255
|
m(this, "measureAndCacheHeight", /* @__PURE__ */ l((i) => {
|
|
256
|
-
if (e(this,
|
|
257
|
-
return e(this,
|
|
256
|
+
if (e(this, E) !== null && e(this, E) > 0)
|
|
257
|
+
return e(this, E);
|
|
258
258
|
if (e(this, _).length === 0)
|
|
259
259
|
throw new Error("[RowManager] Template TRs are empty.");
|
|
260
260
|
const t = i.querySelector("tbody.bindable") || i.querySelector("tbody");
|
|
@@ -267,15 +267,15 @@ const qe = class qe {
|
|
|
267
267
|
const r = i.closest("nine-table-sheet"), o = r ? r.style.display : "", h = r ? r.style.visibility : "", p = r ? r.style.position : "";
|
|
268
268
|
r && (r.style.display === "none" || window.getComputedStyle(r).display === "none") && (r.style.display = "block", r.style.visibility = "hidden", r.style.position = "absolute");
|
|
269
269
|
let c = 0;
|
|
270
|
-
if (t.querySelectorAll("tr:not(.nodata)").forEach((a,
|
|
270
|
+
if (t.querySelectorAll("tr:not(.nodata)").forEach((a, g) => {
|
|
271
271
|
const f = a.offsetHeight || a.getBoundingClientRect().height;
|
|
272
272
|
f === 0 ? c += 40 : c += f;
|
|
273
|
-
}), r && (r.style.display = o, r.style.visibility = h, r.style.position = p),
|
|
274
|
-
const a = Math.ceil(e(this, M) / e(this,
|
|
275
|
-
|
|
273
|
+
}), r && (r.style.display = o, r.style.visibility = h, r.style.position = p), b(this, E, c), e(this, M) > 0) {
|
|
274
|
+
const a = Math.ceil(e(this, M) / e(this, E));
|
|
275
|
+
b(this, I, a + 20);
|
|
276
276
|
} else
|
|
277
|
-
|
|
278
|
-
return console.log(`[RowManager] Template Height Cached: ${e(this,
|
|
277
|
+
b(this, I, 40);
|
|
278
|
+
return console.log(`[RowManager] Template Height Cached: ${e(this, E)}px | RowCount: ${e(this, I)}`), e(this, E);
|
|
279
279
|
}, "measureAndCacheHeight"));
|
|
280
280
|
/**
|
|
281
281
|
* π― μΊμλ ν κ°μ λ°ν (μμ λλ§ μ΅μνμ λ°©μ΄ μ°μ°)
|
|
@@ -306,72 +306,72 @@ const qe = class qe {
|
|
|
306
306
|
s ? s.before(n) : t.appendChild(n), console.log(`[RowManager] Rendered ${r} sets into DOM.`);
|
|
307
307
|
}, "renderRows"));
|
|
308
308
|
m(this, "destroy", /* @__PURE__ */ l(() => {
|
|
309
|
-
e(this, $) && (e(this, $).disconnect(),
|
|
309
|
+
e(this, $) && (e(this, $).disconnect(), b(this, $, null));
|
|
310
310
|
}, "destroy"));
|
|
311
|
-
|
|
311
|
+
b(this, V, i), e(this, ne).call(this);
|
|
312
312
|
}
|
|
313
313
|
get templateLength() {
|
|
314
314
|
return e(this, _).length || 1;
|
|
315
315
|
}
|
|
316
316
|
};
|
|
317
|
-
V = new WeakMap(), _ = new WeakMap(),
|
|
317
|
+
V = new WeakMap(), _ = new WeakMap(), E = new WeakMap(), $ = new WeakMap(), M = new WeakMap(), I = new WeakMap(), ne = new WeakMap(), re = new WeakMap(), l(qe, "RowManager");
|
|
318
318
|
let we = qe;
|
|
319
|
-
var
|
|
320
|
-
const
|
|
319
|
+
var k, X, oe;
|
|
320
|
+
const G = class G extends HTMLElement {
|
|
321
321
|
constructor() {
|
|
322
322
|
super();
|
|
323
|
-
u(this,
|
|
323
|
+
u(this, k, null);
|
|
324
324
|
u(this, X);
|
|
325
325
|
m(this, "init", /* @__PURE__ */ l((t) => {
|
|
326
326
|
if (!t) return;
|
|
327
327
|
const s = /* @__PURE__ */ l((c) => {
|
|
328
|
-
const d = /* @__PURE__ */ l((
|
|
329
|
-
if (
|
|
330
|
-
const f =
|
|
331
|
-
for (let
|
|
332
|
-
const
|
|
333
|
-
|
|
328
|
+
const d = /* @__PURE__ */ l((g) => {
|
|
329
|
+
if (g.querySelector("colgroup")) return;
|
|
330
|
+
const f = g.querySelector("tbody tr") || g.querySelector("tr"), R = f ? f.querySelectorAll("th, td").length : 1, x = document.createElement("colgroup"), H = Math.max(Math.floor((g.clientWidth || 600) / R), 100);
|
|
331
|
+
for (let q = 0; q < R; q++) {
|
|
332
|
+
const K = document.createElement("col");
|
|
333
|
+
K.setAttribute("width", H), x.appendChild(K);
|
|
334
334
|
}
|
|
335
|
-
|
|
336
|
-
}, "ensureColgroup"), a = /* @__PURE__ */ l((
|
|
337
|
-
if (
|
|
338
|
-
const f = document.createElement("thead"),
|
|
339
|
-
|
|
335
|
+
g.prepend(x);
|
|
336
|
+
}, "ensureColgroup"), a = /* @__PURE__ */ l((g) => {
|
|
337
|
+
if (g.querySelector("thead")) return;
|
|
338
|
+
const f = document.createElement("thead"), R = g.querySelector("colgroup");
|
|
339
|
+
R ? R.after(f) : g.prepend(f);
|
|
340
340
|
}, "ensureThead");
|
|
341
341
|
return d(c), a(c), c.classList.add("nine-table-element"), c;
|
|
342
342
|
}, "initializeTable"), n = t.cloneNode(!0);
|
|
343
|
-
|
|
343
|
+
b(this, k, s(n)), e(this, k).style.display = "table", e(this, X).initTemplate(e(this, k));
|
|
344
344
|
const r = this.querySelector(".ng-container-left"), o = this.querySelector(".ng-container-body"), h = this.querySelector(".ng-container-right"), p = /* @__PURE__ */ l((c, d, a = !1) => {
|
|
345
|
-
const
|
|
345
|
+
const g = c.cloneNode(!0), f = Array.from(g.querySelectorAll("colgroup col")), R = [];
|
|
346
346
|
return f.forEach((x, H) => {
|
|
347
|
-
const
|
|
348
|
-
(a ?
|
|
349
|
-
}),
|
|
350
|
-
f[x] && f[x].remove(),
|
|
351
|
-
const
|
|
352
|
-
|
|
347
|
+
const q = x.getAttribute("fixed");
|
|
348
|
+
(a ? q !== "left" && q !== "right" : q === d) || R.push(H);
|
|
349
|
+
}), R.reverse().forEach((x) => {
|
|
350
|
+
f[x] && f[x].remove(), g.querySelectorAll("tr").forEach((H) => {
|
|
351
|
+
const q = H.querySelectorAll("th, td");
|
|
352
|
+
q[x] && q[x].remove();
|
|
353
353
|
});
|
|
354
|
-
}),
|
|
354
|
+
}), g;
|
|
355
355
|
}, "filterTableByFixed");
|
|
356
356
|
if (o) {
|
|
357
|
-
const c = p(e(this,
|
|
357
|
+
const c = p(e(this, k), null, !0);
|
|
358
358
|
o.innerHTML = "", o.appendChild(c), e(this, X).measureAndCacheHeight(o);
|
|
359
359
|
}
|
|
360
360
|
if (r) {
|
|
361
|
-
const c = p(e(this,
|
|
361
|
+
const c = p(e(this, k), "left", !1);
|
|
362
362
|
let d = 0;
|
|
363
|
-
c.querySelectorAll("col").forEach((
|
|
364
|
-
const f = parseInt(
|
|
363
|
+
c.querySelectorAll("col").forEach((g) => {
|
|
364
|
+
const f = parseInt(g.getAttribute("width"), 10);
|
|
365
365
|
isNaN(f) || (d += f);
|
|
366
366
|
}), r.innerHTML = "", r.appendChild(c);
|
|
367
367
|
const a = d > 0 ? d : 0;
|
|
368
368
|
r.style.flex = `0 0 ${a}px`, r.style.width = `${a}px`;
|
|
369
369
|
}
|
|
370
370
|
if (h) {
|
|
371
|
-
const c = p(e(this,
|
|
371
|
+
const c = p(e(this, k), "right", !1);
|
|
372
372
|
let d = 0;
|
|
373
|
-
c.querySelectorAll("col").forEach((
|
|
374
|
-
const f = parseInt(
|
|
373
|
+
c.querySelectorAll("col").forEach((g) => {
|
|
374
|
+
const f = parseInt(g.getAttribute("width"), 10);
|
|
375
375
|
isNaN(f) || (d += f);
|
|
376
376
|
}), h.innerHTML = "", h.appendChild(c);
|
|
377
377
|
const a = d > 0 ? d : 0;
|
|
@@ -387,10 +387,10 @@ const j = class j extends HTMLElement {
|
|
|
387
387
|
setTimeout(() => {
|
|
388
388
|
const c = this.querySelector("nine-table-hscrollbar");
|
|
389
389
|
c && typeof c.refresh == "function" && c.refresh();
|
|
390
|
-
}, 0),
|
|
390
|
+
}, 0), U.log(`NineTableSheet 3-split initialized with rows: ${this.getRowCount()}`);
|
|
391
391
|
}, "init"));
|
|
392
392
|
m(this, "getRowHeight", /* @__PURE__ */ l(() => e(this, X).getRowHeight(), "getRowHeight"));
|
|
393
|
-
m(this, "getRowCount", /* @__PURE__ */ l(() => e(this,
|
|
393
|
+
m(this, "getRowCount", /* @__PURE__ */ l(() => e(this, k) ? e(this, k).querySelectorAll("tbody tr").length : 0, "getRowCount"));
|
|
394
394
|
m(this, "scrollToX", /* @__PURE__ */ l((t) => {
|
|
395
395
|
const s = this.querySelector(".ng-container-body");
|
|
396
396
|
s && (s.scrollLeft = t);
|
|
@@ -400,7 +400,7 @@ const j = class j extends HTMLElement {
|
|
|
400
400
|
s && (s.scrollTop = t);
|
|
401
401
|
}, "scrollToY"));
|
|
402
402
|
u(this, oe, /* @__PURE__ */ l(() => {
|
|
403
|
-
const t =
|
|
403
|
+
const t = G.SCROLLBAR_SIZE;
|
|
404
404
|
this.innerHTML = `
|
|
405
405
|
<style>
|
|
406
406
|
nine-table-sheet {
|
|
@@ -470,14 +470,6 @@ const j = class j extends HTMLElement {
|
|
|
470
470
|
border-top: 1px solid #e5e7eb;
|
|
471
471
|
}
|
|
472
472
|
|
|
473
|
-
/**
|
|
474
|
-
nine-table-sheet nine-table-hscrollbar {
|
|
475
|
-
flex: 1;
|
|
476
|
-
height: 100%;
|
|
477
|
-
overflow: hidden;
|
|
478
|
-
--display: block;
|
|
479
|
-
} */
|
|
480
|
-
|
|
481
473
|
nine-table-sheet .ng-scroll-edge {
|
|
482
474
|
width: ${t}px;
|
|
483
475
|
min-width: ${t}px;
|
|
@@ -523,20 +515,20 @@ const j = class j extends HTMLElement {
|
|
|
523
515
|
</div>
|
|
524
516
|
`;
|
|
525
517
|
}, "#render"));
|
|
526
|
-
|
|
518
|
+
b(this, X, new we(this));
|
|
527
519
|
}
|
|
528
520
|
connectedCallback() {
|
|
529
521
|
e(this, oe).call(this);
|
|
530
522
|
}
|
|
531
523
|
disconnectedCallback() {
|
|
532
|
-
this.innerHTML = "",
|
|
524
|
+
this.innerHTML = "", U.log("NineTableSheet destroyed.");
|
|
533
525
|
}
|
|
534
526
|
};
|
|
535
|
-
|
|
536
|
-
let te =
|
|
527
|
+
k = new WeakMap(), X = new WeakMap(), oe = new WeakMap(), l(G, "NineTableSheet"), m(G, "SCROLLBAR_SIZE", 16);
|
|
528
|
+
let te = G;
|
|
537
529
|
customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", te);
|
|
538
530
|
var le;
|
|
539
|
-
const
|
|
531
|
+
const Ce = class Ce extends HTMLElement {
|
|
540
532
|
constructor() {
|
|
541
533
|
super();
|
|
542
534
|
u(this, le, /* @__PURE__ */ l(() => {
|
|
@@ -550,26 +542,26 @@ const ke = class ke extends HTMLElement {
|
|
|
550
542
|
}, "#init"));
|
|
551
543
|
m(this, "switchSheet", /* @__PURE__ */ l((t, s = !1) => {
|
|
552
544
|
const n = /* @__PURE__ */ l((a) => {
|
|
553
|
-
const
|
|
545
|
+
const g = Array.from(a.querySelectorAll("nine-table-sheet"));
|
|
554
546
|
Array.from(a.querySelectorAll("nine-splitter")).forEach((x) => x.style.setProperty("display", "none"));
|
|
555
|
-
const
|
|
556
|
-
|
|
557
|
-
const H = parseInt(x.getAttribute("data-index"), 10),
|
|
558
|
-
|
|
547
|
+
const R = g.filter((x) => x.classList.contains("active"));
|
|
548
|
+
R.length < 2 || R.forEach((x) => {
|
|
549
|
+
const H = parseInt(x.getAttribute("data-index"), 10), q = a.querySelector(`nine-splitter[data-split-index="${H}"]`), K = g[H + 1];
|
|
550
|
+
q && K && K.classList.contains("active") && q.style.setProperty("display", "block");
|
|
559
551
|
});
|
|
560
552
|
}, "updateSplitters"), r = this.querySelector(".nine-tab-bar"), o = this.querySelector("nine-table-sheets-body"), h = r.querySelectorAll(".nine-tab-item"), p = o.querySelectorAll("nine-table-sheet");
|
|
561
553
|
if (!h[t]) return;
|
|
562
554
|
if (!s)
|
|
563
|
-
trace.log("================================= 1"), h.forEach((a,
|
|
564
|
-
a.classList.toggle("active",
|
|
565
|
-
}), p.forEach((a,
|
|
566
|
-
const f =
|
|
555
|
+
trace.log("================================= 1"), h.forEach((a, g) => {
|
|
556
|
+
a.classList.toggle("active", g === t);
|
|
557
|
+
}), p.forEach((a, g) => {
|
|
558
|
+
const f = g === t;
|
|
567
559
|
a.classList.toggle("active", f), f ? a.style.flex = "1 1 100%" : a.style.flex = "";
|
|
568
560
|
});
|
|
569
561
|
else {
|
|
570
562
|
trace.log("================================= 2");
|
|
571
|
-
const a = h[t],
|
|
572
|
-
if (trace.log(a,
|
|
563
|
+
const a = h[t], g = r.querySelectorAll(".nine-tab-item.active");
|
|
564
|
+
if (trace.log(a, g.length), a.classList.contains("active") && g.length <= 1)
|
|
573
565
|
return;
|
|
574
566
|
a.classList.toggle("active");
|
|
575
567
|
const f = o.querySelector(`nine-table-sheet[data-index="${t}"]`);
|
|
@@ -592,41 +584,41 @@ const ke = class ke extends HTMLElement {
|
|
|
592
584
|
e(this, le).call(this);
|
|
593
585
|
}
|
|
594
586
|
};
|
|
595
|
-
le = new WeakMap(), l(
|
|
596
|
-
let me =
|
|
587
|
+
le = new WeakMap(), l(Ce, "NineTableSheets");
|
|
588
|
+
let me = Ce;
|
|
597
589
|
customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets", me);
|
|
598
|
-
var
|
|
599
|
-
const
|
|
590
|
+
var S, ae, J, ce, Q, he;
|
|
591
|
+
const ke = class ke {
|
|
600
592
|
constructor(i) {
|
|
601
|
-
u(this,
|
|
593
|
+
u(this, S);
|
|
602
594
|
u(this, ae);
|
|
603
595
|
u(this, J, null);
|
|
604
596
|
u(this, ce, /* @__PURE__ */ l(() => {
|
|
605
|
-
const i = e(this,
|
|
606
|
-
i && (
|
|
597
|
+
const i = e(this, S).shadowRoot.host;
|
|
598
|
+
i && (b(this, J, new ResizeObserver((t) => {
|
|
607
599
|
for (let s of t)
|
|
608
600
|
i.getAttribute("auto-height") === "true" && e(this, Q).call(this, i);
|
|
609
601
|
})), e(this, J).observe(i));
|
|
610
602
|
}, "#observeResize"));
|
|
611
603
|
u(this, Q, /* @__PURE__ */ l((i) => {
|
|
612
|
-
var a,
|
|
613
|
-
const t = Array.from(e(this,
|
|
604
|
+
var a, g;
|
|
605
|
+
const t = Array.from(e(this, S).shadowRoot.querySelectorAll("nine-table-sheet.active"));
|
|
614
606
|
if (t.length === 0) return;
|
|
615
|
-
const s = parseInt(i.getAttribute("max-display-row"), 10) || 10, n = Math.max(...t.map((f) => f.getRowHeight())), r = (a = e(this,
|
|
607
|
+
const s = parseInt(i.getAttribute("max-display-row"), 10) || 10, n = Math.max(...t.map((f) => f.getRowHeight())), r = (a = e(this, S).shadowRoot.querySelector("nine-table-header")) == null ? void 0 : a.getBoundingClientRect().height, o = (g = e(this, S).shadowRoot.querySelector("nine-table-sheets-footer")) == null ? void 0 : g.getBoundingClientRect().height, h = te.SCROLLBAR_SIZE, p = s * n + r + o + h;
|
|
616
608
|
i.style.height = `${p}px`;
|
|
617
|
-
const c = Math.max(...t.map((f) => f.getRowCount())), d = e(this,
|
|
609
|
+
const c = Math.max(...t.map((f) => f.getRowCount())), d = e(this, S).shadowRoot.querySelector("nine-table-sheets-body");
|
|
618
610
|
if (!d)
|
|
619
611
|
throw new Error("[LayoutManager] sheetsBody element is missing from the DOM.");
|
|
620
|
-
d.style.overflowY = c > s ? "auto" : "hidden";
|
|
612
|
+
U.log(e(this, S).data.getRowCount()), U.log(e(this, S).data.length), d.style.overflowY = c > s ? "auto" : "hidden";
|
|
621
613
|
}, "#applyAutoHeight"));
|
|
622
614
|
u(this, he, /* @__PURE__ */ l(() => {
|
|
623
|
-
const i = e(this,
|
|
624
|
-
console.log(i, e(this,
|
|
615
|
+
const i = e(this, S).shadowRoot.host;
|
|
616
|
+
console.log(i, e(this, S));
|
|
625
617
|
const s = Array.from(i.children).filter((c) => c.tagName === "TABLE"), n = i.getAttribute("auto-height") === "true", r = s.length, o = s.map((c, d) => {
|
|
626
|
-
const
|
|
627
|
-
return
|
|
618
|
+
const g = `<nine-table-sheet class="${d === 0 ? "active" : ""}" data-index="${d}"></nine-table-sheet>`, f = d < r - 1 ? `<nine-splitter class="h" data-split-index="${d}"></nine-splitter>` : "";
|
|
619
|
+
return g + f;
|
|
628
620
|
}).join(""), h = s.map((c, d) => `<div class="nine-tab-item ${d === 0 ? "active" : ""}" data-index="${d}">Sheet ${d + 1}</div>`).join("");
|
|
629
|
-
e(this,
|
|
621
|
+
e(this, S).shadowRoot.innerHTML = `
|
|
630
622
|
<style>
|
|
631
623
|
:host {
|
|
632
624
|
display: flex;
|
|
@@ -636,6 +628,7 @@ const Ce = class Ce {
|
|
|
636
628
|
height: ${n ? "auto" : "100%"};
|
|
637
629
|
background: #fff;
|
|
638
630
|
}
|
|
631
|
+
|
|
639
632
|
nine-table-header { height: 40px; display: block; flex-shrink: 0; border-bottom: 1px solid #e5e7eb; background: #fff; }
|
|
640
633
|
nine-table-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; position: relative; }
|
|
641
634
|
nine-table-summary { display: none; width: 250px; flex-shrink: 0; border-right: 1px solid #e5e7eb; }
|
|
@@ -659,16 +652,6 @@ const Ce = class Ce {
|
|
|
659
652
|
flex-direction: row;
|
|
660
653
|
}
|
|
661
654
|
|
|
662
|
-
bbbb-nine-table-sheet {
|
|
663
|
-
display: none;
|
|
664
|
-
height: 100%;
|
|
665
|
-
overflow: auto;
|
|
666
|
-
flex: 1 1 ${r > 1 ? `${100 / r}%` : "100%"};
|
|
667
|
-
}
|
|
668
|
-
bbb-nine-table-sheet.active {
|
|
669
|
-
display: block;
|
|
670
|
-
}
|
|
671
|
-
|
|
672
655
|
nine-table-sheets-body nine-splitter.h {
|
|
673
656
|
width: 4px;
|
|
674
657
|
background: #e5e7eb;
|
|
@@ -734,32 +717,32 @@ const Ce = class Ce {
|
|
|
734
717
|
</nine-table-body>
|
|
735
718
|
<nine-table-footer></nine-table-footer>
|
|
736
719
|
`;
|
|
737
|
-
const p = e(this,
|
|
720
|
+
const p = e(this, S).shadowRoot.querySelectorAll("nine-table-sheet");
|
|
738
721
|
p == null || p.forEach((c, d) => {
|
|
739
722
|
s[d] && setTimeout(() => {
|
|
740
723
|
c.init(s[d]), n && e(this, Q).call(this, i);
|
|
741
724
|
});
|
|
742
725
|
});
|
|
743
726
|
}, "#render"));
|
|
744
|
-
|
|
727
|
+
b(this, S, i), b(this, ae, e(this, S).shadowRoot), e(this, he).call(this), e(this, ce).call(this);
|
|
745
728
|
}
|
|
746
729
|
};
|
|
747
|
-
|
|
748
|
-
let ve =
|
|
730
|
+
S = new WeakMap(), ae = new WeakMap(), J = new WeakMap(), ce = new WeakMap(), Q = new WeakMap(), he = new WeakMap(), l(ke, "LayoutManager");
|
|
731
|
+
let ve = ke;
|
|
749
732
|
var z, Y;
|
|
750
733
|
const Le = class Le {
|
|
751
734
|
constructor(i) {
|
|
752
735
|
u(this, z);
|
|
753
736
|
u(this, Y, -1);
|
|
754
737
|
m(this, "count", /* @__PURE__ */ l(() => e(this, z).rawRecords.length, "count"));
|
|
755
|
-
|
|
738
|
+
b(this, z, i);
|
|
756
739
|
}
|
|
757
740
|
get at() {
|
|
758
741
|
return e(this, Y);
|
|
759
742
|
}
|
|
760
743
|
set at(i) {
|
|
761
744
|
var s, n;
|
|
762
|
-
|
|
745
|
+
b(this, Y, parseInt(i, 10));
|
|
763
746
|
const t = ((n = (s = e(this, z).owner).querySelector) == null ? void 0 : n.call(s, ".ng-container-body")) || e(this, z).owner.body;
|
|
764
747
|
t && !t.querySelector(`tbody.bindable tr[data-row="${e(this, Y)}"]`) && setTimeout(() => {
|
|
765
748
|
var r, o;
|
|
@@ -769,17 +752,17 @@ const Le = class Le {
|
|
|
769
752
|
};
|
|
770
753
|
z = new WeakMap(), Y = new WeakMap(), l(Le, "ngRow");
|
|
771
754
|
let xe = Le;
|
|
772
|
-
var T, v,
|
|
773
|
-
const
|
|
755
|
+
var T, v, A, Z, de, W, fe, ee, ue, ge, j;
|
|
756
|
+
const C = class C {
|
|
774
757
|
constructor(i, t) {
|
|
775
758
|
u(this, T);
|
|
776
759
|
u(this, v);
|
|
777
|
-
u(this,
|
|
778
|
-
u(this,
|
|
760
|
+
u(this, A, []);
|
|
761
|
+
u(this, Z, []);
|
|
779
762
|
u(this, de, 0);
|
|
780
763
|
u(this, W, []);
|
|
781
764
|
u(this, fe, /* @__PURE__ */ l(() => {
|
|
782
|
-
|
|
765
|
+
b(this, W, []);
|
|
783
766
|
const i = e(this, T).template || [];
|
|
784
767
|
Array.from(i).forEach((t) => {
|
|
785
768
|
var s;
|
|
@@ -792,20 +775,20 @@ const q = class q {
|
|
|
792
775
|
this.clear(), this.add(i, !1);
|
|
793
776
|
}, "set"));
|
|
794
777
|
u(this, ee, /* @__PURE__ */ l(() => ({
|
|
795
|
-
rowState:
|
|
778
|
+
rowState: C.ROW_STATE.EMPTY,
|
|
796
779
|
deleted: !1,
|
|
797
780
|
filtered: !1,
|
|
798
781
|
height: e(this, W).slice(),
|
|
799
782
|
o: {},
|
|
800
783
|
c: {},
|
|
801
|
-
_: [0, 0, 0, 0,
|
|
784
|
+
_: [0, 0, 0, 0, C.ROW_STATE.EMPTY, !1, !1, !0, !1, !0, !0, !1, e(this, W).slice(), -1, {}, {}]
|
|
802
785
|
}), "#getDefaultMeta"));
|
|
803
786
|
m(this, "reset", /* @__PURE__ */ l(() => {
|
|
804
|
-
|
|
787
|
+
b(this, A, []), b(this, Z, []);
|
|
805
788
|
}, "reset"));
|
|
806
789
|
m(this, "clear", /* @__PURE__ */ l(() => {
|
|
807
790
|
var i;
|
|
808
|
-
e(this, v).rawRecords = [],
|
|
791
|
+
e(this, v).rawRecords = [], b(this, A, []), b(this, Z, []), (i = e(this, v).viewRecords) != null && i.reset && e(this, v).viewRecords.reset();
|
|
809
792
|
}, "clear"));
|
|
810
793
|
u(this, ue, /* @__PURE__ */ l((i) => {
|
|
811
794
|
var n;
|
|
@@ -818,28 +801,28 @@ const q = class q {
|
|
|
818
801
|
}), s.push(o);
|
|
819
802
|
}), s;
|
|
820
803
|
}, "#json2Array"));
|
|
821
|
-
u(this,
|
|
822
|
-
t.__ng = e(this, ee).call(this), t.__ng.rowid = this.nextId, t.__ng.rowState =
|
|
804
|
+
u(this, ge, /* @__PURE__ */ l((i) => (Array.isArray(i) || (i = [i]), i.forEach((t) => {
|
|
805
|
+
t.__ng = e(this, ee).call(this), t.__ng.rowid = this.nextId, t.__ng.rowState = C.ROW_STATE.INSERT, t.__ng._[0] = t.__ng.rowid;
|
|
823
806
|
}), i), "#defaultInsert"));
|
|
824
807
|
m(this, "add", /* @__PURE__ */ l((i, t = !0) => {
|
|
825
808
|
var r;
|
|
826
809
|
i === void 0 && (i = {});
|
|
827
810
|
const s = e(this, ue).call(this, i);
|
|
828
|
-
e(this, v).rawRecords = e(this, v).rawRecords.concat(e(this,
|
|
811
|
+
e(this, v).rawRecords = e(this, v).rawRecords.concat(e(this, ge).call(this, s)), this.resetRecords();
|
|
829
812
|
const n = this.count() - 1;
|
|
830
813
|
return t || s.forEach((o, h) => {
|
|
831
814
|
const p = e(this, v).rawRecords[n - h];
|
|
832
|
-
p && (p.__ng.rowState =
|
|
815
|
+
p && (p.__ng.rowState = C.ROW_STATE.EMPTY);
|
|
833
816
|
}), (r = e(this, v).viewRecords) != null && r.reset && e(this, v).viewRecords.reset(), n;
|
|
834
817
|
}, "add"));
|
|
835
818
|
m(this, "delete", /* @__PURE__ */ l((i) => {
|
|
836
819
|
var s;
|
|
837
820
|
let t = [];
|
|
838
821
|
Array.isArray(i) ? t = i : typeof i > "u" ? t = [e(this, v).owner.row.at] : t = [parseInt(i, 10)], t.sort((n, r) => r - n).forEach((n) => {
|
|
839
|
-
if (e(this,
|
|
840
|
-
const r = e(this,
|
|
841
|
-
e(this,
|
|
842
|
-
o.__ng.rowid === r && (o.__ng.deleted = !0, o.__ng.rowState =
|
|
822
|
+
if (e(this, A)[n]) {
|
|
823
|
+
const r = e(this, A)[n].__ng.rowid;
|
|
824
|
+
e(this, A)[n].__ng.rowState === C.ROW_STATE.INSERT ? e(this, v).rawRecords = e(this, v).rawRecords.filter((o) => o.__ng.rowid !== r) : e(this, v).rawRecords.forEach((o) => {
|
|
825
|
+
o.__ng.rowid === r && (o.__ng.deleted = !0, o.__ng.rowState = C.ROW_STATE.DELETE);
|
|
843
826
|
});
|
|
844
827
|
}
|
|
845
828
|
}), this.resetRecords(), (s = e(this, v).viewRecords) != null && s.reset && e(this, v).viewRecords.reset();
|
|
@@ -852,17 +835,17 @@ const q = class q {
|
|
|
852
835
|
const o = this.getValidData()[i];
|
|
853
836
|
if (!o) return;
|
|
854
837
|
const h = o.v[r];
|
|
855
|
-
h !== s && o.__ng.rowState !==
|
|
838
|
+
h !== s && o.__ng.rowState !== C.ROW_STATE.INSERT && (o.__ng.o.hasOwnProperty(t) || (o.__ng.o[t] = h), o.__ng.rowState = C.ROW_STATE.UPDATE), o.v[r] = s, e(this, v).owner.refreshData && e(this, v).owner.refreshData(i);
|
|
856
839
|
}, "setValue"));
|
|
857
840
|
m(this, "resetRecords", /* @__PURE__ */ l(() => {
|
|
858
|
-
|
|
841
|
+
b(this, Z, e(this, v).rawRecords.filter((i) => !i.__ng.deleted)), b(this, A, e(this, v).rawRecords.filter((i) => !i.__ng.deleted && !i.__ng.filtered)), e(this, v).rawRecords.forEach((i, t) => {
|
|
859
842
|
i.__ng.rowidx = t;
|
|
860
|
-
}), e(this,
|
|
843
|
+
}), e(this, A).forEach((i, t) => {
|
|
861
844
|
i.__ng.i = t;
|
|
862
845
|
});
|
|
863
846
|
}, "resetRecords"));
|
|
864
|
-
m(this, "getValidData", /* @__PURE__ */ l(() => (e(this,
|
|
865
|
-
u(this,
|
|
847
|
+
m(this, "getValidData", /* @__PURE__ */ l(() => (e(this, A).length === 0 && e(this, v).rawRecords.length > 0 && this.resetRecords(), e(this, A)), "getValidData"));
|
|
848
|
+
u(this, j, /* @__PURE__ */ l((i) => {
|
|
866
849
|
var s;
|
|
867
850
|
if (!i) return i;
|
|
868
851
|
const t = typeof ((s = e(this, T).fields) == null ? void 0 : s.get) == "function" ? e(this, T).fields.get() : [];
|
|
@@ -878,19 +861,19 @@ const q = class q {
|
|
|
878
861
|
var r;
|
|
879
862
|
const s = this.getValidData();
|
|
880
863
|
if (!s || s.length <= 0) return;
|
|
881
|
-
if (i == null) return e(this,
|
|
864
|
+
if (i == null) return e(this, j).call(this, s);
|
|
882
865
|
if (i < 0 || i >= s.length) return null;
|
|
883
866
|
const n = typeof ((r = e(this, T).fields) == null ? void 0 : r.get) == "function" ? e(this, T).fields.get() : [];
|
|
884
867
|
if (t != null) {
|
|
885
868
|
const o = n.indexOf(t);
|
|
886
869
|
return o >= 0 ? s[i].v[o] : null;
|
|
887
870
|
}
|
|
888
|
-
return e(this,
|
|
871
|
+
return e(this, j).call(this, s[i]);
|
|
889
872
|
}, "get"));
|
|
890
|
-
|
|
873
|
+
b(this, T, i), b(this, v, t), e(this, fe).call(this);
|
|
891
874
|
}
|
|
892
875
|
get source() {
|
|
893
|
-
return e(this,
|
|
876
|
+
return e(this, j).call(this, e(this, v).rawRecords);
|
|
894
877
|
}
|
|
895
878
|
set source(i) {
|
|
896
879
|
this.clear(), this.add(i, !1);
|
|
@@ -898,16 +881,22 @@ const q = class q {
|
|
|
898
881
|
get nextId() {
|
|
899
882
|
return ++ze(this, de)._;
|
|
900
883
|
}
|
|
884
|
+
get length() {
|
|
885
|
+
return e(this, A).length;
|
|
886
|
+
}
|
|
887
|
+
getRowCount() {
|
|
888
|
+
return this.length;
|
|
889
|
+
}
|
|
901
890
|
};
|
|
902
|
-
T = new WeakMap(), v = new WeakMap(),
|
|
903
|
-
m(
|
|
891
|
+
T = new WeakMap(), v = new WeakMap(), A = new WeakMap(), Z = new WeakMap(), de = new WeakMap(), W = new WeakMap(), fe = new WeakMap(), ee = new WeakMap(), ue = new WeakMap(), ge = new WeakMap(), j = new WeakMap(), l(C, "ngData"), // π― ν μν μ μ μμλ₯Ό ν΄λμ€ λ΄λΆλ‘ λ΄μ¬ν
|
|
892
|
+
m(C, "ROW_STATE", {
|
|
904
893
|
EMPTY: "EMPTY",
|
|
905
894
|
NORMAL: "NORMAL",
|
|
906
895
|
INSERT: "INSERT",
|
|
907
896
|
UPDATE: "UPDATE",
|
|
908
897
|
DELETE: "DELETE"
|
|
909
898
|
});
|
|
910
|
-
let Se =
|
|
899
|
+
let Se = C;
|
|
911
900
|
const _e = class _e {
|
|
912
901
|
constructor(i) {
|
|
913
902
|
this.owner = i, this.row = new xe(this), this.data = new Se(i, this), this.rawRecords = [], this.viewRecords = [], this.delRecords = [], this.pageCnt = 25, this.viewRecords.reset = () => {
|
|
@@ -929,20 +918,20 @@ const _e = class _e {
|
|
|
929
918
|
};
|
|
930
919
|
l(_e, "ngDataManager");
|
|
931
920
|
let Re = _e;
|
|
932
|
-
var F,
|
|
921
|
+
var F, be;
|
|
933
922
|
const Me = class Me extends HTMLElement {
|
|
934
923
|
constructor() {
|
|
935
924
|
super();
|
|
936
925
|
//#created = false;
|
|
937
926
|
u(this, F);
|
|
938
|
-
u(this,
|
|
939
|
-
this.attachShadow({ mode: "open" }),
|
|
927
|
+
u(this, be);
|
|
928
|
+
this.attachShadow({ mode: "open" }), b(this, F, new Re(this));
|
|
940
929
|
}
|
|
941
930
|
connectedCallback() {
|
|
942
|
-
|
|
931
|
+
b(this, be, new ve(this)), U.log("NineTable connected."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } }));
|
|
943
932
|
}
|
|
944
933
|
disconnectedCallback() {
|
|
945
|
-
|
|
934
|
+
U.log("NineTable disconnected.");
|
|
946
935
|
}
|
|
947
936
|
// π― μΈλΆμμ grid.data.set(...) ννλ‘ μ κ·Όν μ μλλ‘ λ°μ΄ν° λ§€λμ μ€ν
|
|
948
937
|
get data() {
|
|
@@ -957,7 +946,7 @@ const Me = class Me extends HTMLElement {
|
|
|
957
946
|
return e(this, F);
|
|
958
947
|
}
|
|
959
948
|
};
|
|
960
|
-
F = new WeakMap(),
|
|
949
|
+
F = new WeakMap(), be = new WeakMap(), l(Me, "NineTable");
|
|
961
950
|
let Ee = Me;
|
|
962
951
|
customElements.get("nine-table") || customElements.define("nine-table", Ee);
|
|
963
952
|
//# sourceMappingURL=nine-table.js.map
|