@ninebone/table 0.0.204 β 0.0.206
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 +191 -200
- package/dist/nine-table.js.map +1 -1
- package/dist/nine-table.umd.js +5 -17
- package/dist/nine-table.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/nine-table.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
1
|
+
var He = Object.defineProperty;
|
|
2
|
+
var Ie = (m) => {
|
|
3
3
|
throw TypeError(m);
|
|
4
4
|
};
|
|
5
|
-
var
|
|
6
|
-
var a = (m, i) =>
|
|
7
|
-
var v = (m, i, t) =>
|
|
8
|
-
var e = (m, i, t) => (
|
|
9
|
-
var
|
|
5
|
+
var ze = (m, i, t) => i in m ? He(m, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : m[i] = t;
|
|
6
|
+
var a = (m, i) => He(m, "name", { value: i, configurable: !0 });
|
|
7
|
+
var v = (m, i, t) => ze(m, typeof i != "symbol" ? i + "" : i, t), $e = (m, i, t) => i.has(m) || Ie("Cannot " + t);
|
|
8
|
+
var e = (m, i, t) => ($e(m, i, "read from private field"), t ? t.call(m) : i.get(m)), h = (m, i, t) => i.has(m) ? Ie("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(m) : i.set(m, t), p = (m, i, t, s) => ($e(m, i, "write to private field"), s ? s.call(m, t) : i.set(m, t), t);
|
|
9
|
+
var We = (m, i, t, s) => ({
|
|
10
10
|
set _(n) {
|
|
11
11
|
p(m, i, n, t);
|
|
12
12
|
},
|
|
@@ -14,37 +14,37 @@ var $e = (m, i, t, s) => ({
|
|
|
14
14
|
return e(m, i, s);
|
|
15
15
|
}
|
|
16
16
|
});
|
|
17
|
-
import { trace as
|
|
18
|
-
const
|
|
17
|
+
import { trace as Oe } from "@ninebone/util";
|
|
18
|
+
const Te = class Te extends Oe.constructor {
|
|
19
19
|
constructor() {
|
|
20
20
|
super(), this.init("nine-table", "green");
|
|
21
21
|
}
|
|
22
22
|
};
|
|
23
|
-
a(
|
|
24
|
-
let
|
|
25
|
-
const
|
|
26
|
-
var
|
|
27
|
-
const
|
|
23
|
+
a(Te, "Trace");
|
|
24
|
+
let pe = Te;
|
|
25
|
+
const Q = new pe();
|
|
26
|
+
var k, O, y, D, B, N, te, P, ie;
|
|
27
|
+
const Ae = class Ae extends HTMLElement {
|
|
28
28
|
constructor() {
|
|
29
29
|
super();
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
if (!e(this,
|
|
38
|
-
const t = e(this,
|
|
30
|
+
h(this, k);
|
|
31
|
+
h(this, O, !1);
|
|
32
|
+
h(this, y);
|
|
33
|
+
h(this, D);
|
|
34
|
+
h(this, B);
|
|
35
|
+
h(this, N);
|
|
36
|
+
h(this, te, /* @__PURE__ */ a(() => {
|
|
37
|
+
if (!e(this, k)) return;
|
|
38
|
+
const t = e(this, k).querySelector(".ng-container-body");
|
|
39
39
|
t && (p(this, N, new ResizeObserver(() => {
|
|
40
40
|
this.refresh();
|
|
41
41
|
})), e(this, N).observe(t));
|
|
42
42
|
}, "#observeResize"));
|
|
43
43
|
v(this, "refresh", /* @__PURE__ */ a(() => {
|
|
44
|
-
if (!e(this,
|
|
44
|
+
if (!e(this, k) || !e(this, y) || e(this, O)) return;
|
|
45
45
|
const t = e(this, y).container, s = t.querySelector("table");
|
|
46
46
|
if (!s) return;
|
|
47
|
-
const n = e(this, y).track, r = e(this, y).thumb, o = e(this,
|
|
47
|
+
const n = e(this, y).track, r = e(this, y).thumb, o = e(this, k).querySelector(".ng-container-bottom"), c = t.clientWidth, u = s.scrollWidth;
|
|
48
48
|
if (c !== 0 && u > c)
|
|
49
49
|
o && (o.style.display = "flex");
|
|
50
50
|
else {
|
|
@@ -53,8 +53,8 @@ const Te = class Te extends HTMLElement {
|
|
|
53
53
|
}
|
|
54
54
|
const l = n.clientWidth;
|
|
55
55
|
if (l <= 0) return;
|
|
56
|
-
const
|
|
57
|
-
r.style.width = `${
|
|
56
|
+
const d = Math.max(Math.min(l * (c / u), l), 20);
|
|
57
|
+
r.style.width = `${d}px`;
|
|
58
58
|
let f = 0;
|
|
59
59
|
const b = s.style.transform;
|
|
60
60
|
if (b && b.includes("translateX")) {
|
|
@@ -64,10 +64,10 @@ const Te = class Te extends HTMLElement {
|
|
|
64
64
|
f = parseInt(s.style.left || 0, 10);
|
|
65
65
|
let g = parseInt(Math.abs(f) * l / u, 10);
|
|
66
66
|
g < 0 && (g = 0);
|
|
67
|
-
const S = l -
|
|
67
|
+
const S = l - d;
|
|
68
68
|
g > S && (g = S), r.style.left = `${g}px`, e(this, y).left.disabled = g === 0, e(this, y).right.disabled = g >= S - 1;
|
|
69
69
|
}, "refresh"));
|
|
70
|
-
|
|
70
|
+
h(this, P, /* @__PURE__ */ a((t) => {
|
|
71
71
|
if (!e(this, y)) return !1;
|
|
72
72
|
const s = e(this, y).container, n = s.querySelector("table");
|
|
73
73
|
if (!n) return !1;
|
|
@@ -76,11 +76,11 @@ const Te = class Te extends HTMLElement {
|
|
|
76
76
|
c < 0 && (c = 0);
|
|
77
77
|
const u = r.width - o;
|
|
78
78
|
c > u && (c = u), c = parseInt(c, 10), e(this, y).thumb.style.left = `${c}px`, e(this, y).left.disabled = c === 0, e(this, y).right.disabled = c >= u - 1;
|
|
79
|
-
const l = s.clientWidth,
|
|
80
|
-
let f = u > 0 ? -c * (
|
|
81
|
-
return -f >
|
|
79
|
+
const l = s.clientWidth, d = n.scrollWidth;
|
|
80
|
+
let f = u > 0 ? -c * (d - l) / u : 0;
|
|
81
|
+
return -f > d - l && (f = -(d - l)), -f + 5 > d - l && (f = -(d - l)), l >= d && (f = 0), n.style.transform = `translateX(${f}px)`, c > 0 && c < u - 1;
|
|
82
82
|
}, "#thumbMoveTo"));
|
|
83
|
-
|
|
83
|
+
h(this, ie, /* @__PURE__ */ a(() => {
|
|
84
84
|
const t = /* @__PURE__ */ a((n) => {
|
|
85
85
|
clearInterval(e(this, D)), clearInterval(e(this, B));
|
|
86
86
|
const r = parseInt(e(this, y).thumb.style.left || 0, 10);
|
|
@@ -119,7 +119,7 @@ const Te = class Te extends HTMLElement {
|
|
|
119
119
|
}, "#init"));
|
|
120
120
|
}
|
|
121
121
|
connectedCallback() {
|
|
122
|
-
if (p(this,
|
|
122
|
+
if (p(this, k, this.closest("nine-table-sheet") || this.getRootNode().host), !e(this, k)) return;
|
|
123
123
|
this.innerHTML = `
|
|
124
124
|
<style>
|
|
125
125
|
nine-table-hscrollbar {
|
|
@@ -184,7 +184,7 @@ const Te = class Te extends HTMLElement {
|
|
|
184
184
|
<button class='ng-scroll-right' disabled><div class='ng-scroll-icon'></div></button>
|
|
185
185
|
`;
|
|
186
186
|
const t = /* @__PURE__ */ a(() => {
|
|
187
|
-
const s = e(this,
|
|
187
|
+
const s = e(this, k).querySelector(".ng-container-body");
|
|
188
188
|
if (!s) {
|
|
189
189
|
setTimeout(t, 10);
|
|
190
190
|
return;
|
|
@@ -203,26 +203,26 @@ const Te = class Te extends HTMLElement {
|
|
|
203
203
|
e(this, N) && e(this, N).disconnect();
|
|
204
204
|
}
|
|
205
205
|
};
|
|
206
|
-
|
|
207
|
-
let
|
|
208
|
-
customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar",
|
|
209
|
-
var V, L,
|
|
210
|
-
const
|
|
206
|
+
k = new WeakMap(), O = new WeakMap(), y = new WeakMap(), D = new WeakMap(), B = new WeakMap(), N = new WeakMap(), te = new WeakMap(), P = new WeakMap(), ie = new WeakMap(), a(Ae, "NineTableHScrollBar");
|
|
207
|
+
let ye = Ae;
|
|
208
|
+
customElements.get("nine-table-hscrollbar") || customElements.define("nine-table-hscrollbar", ye);
|
|
209
|
+
var V, L, R, $, C, M, se, ne;
|
|
210
|
+
const qe = class qe {
|
|
211
211
|
constructor(i) {
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
v(this, "getRowHeight", /* @__PURE__ */ a(() => e(this,
|
|
219
|
-
|
|
212
|
+
h(this, V);
|
|
213
|
+
h(this, L, []);
|
|
214
|
+
h(this, R, null);
|
|
215
|
+
h(this, $, null);
|
|
216
|
+
h(this, C, 0);
|
|
217
|
+
h(this, M, 0);
|
|
218
|
+
v(this, "getRowHeight", /* @__PURE__ */ a(() => e(this, R), "getRowHeight"));
|
|
219
|
+
h(this, se, /* @__PURE__ */ a(() => {
|
|
220
220
|
e(this, ne).call(this);
|
|
221
221
|
}, "#init"));
|
|
222
222
|
/**
|
|
223
223
|
* π― λ·°ν¬νΈ ν¬κΈ° λ³ν μμ μ λμ΄ κ³μ° λ° νμν ν κ°μ μ°μ Β·μΊμ±μ μκ²°
|
|
224
224
|
*/
|
|
225
|
-
|
|
225
|
+
h(this, ne, /* @__PURE__ */ a(() => {
|
|
226
226
|
!e(this, V) || !(e(this, V) instanceof HTMLElement) || (p(this, $, new ResizeObserver((i) => {
|
|
227
227
|
for (const t of i) {
|
|
228
228
|
const s = t.target;
|
|
@@ -234,10 +234,10 @@ const Ae = class Ae {
|
|
|
234
234
|
let o = 0;
|
|
235
235
|
const c = s.querySelector(".ng-container-body") || s, u = c.querySelector("thead"), l = c.querySelector("tfoot");
|
|
236
236
|
u && (o += u.offsetHeight || u.getBoundingClientRect().height), l && (o += l.offsetHeight || l.getBoundingClientRect().height);
|
|
237
|
-
const
|
|
238
|
-
if (e(this,
|
|
239
|
-
const f = Math.ceil(e(this,
|
|
240
|
-
p(this,
|
|
237
|
+
const d = Math.max(r - o, 100);
|
|
238
|
+
if (e(this, C) !== d && (p(this, C, d), e(this, R) !== null)) {
|
|
239
|
+
const f = Math.ceil(e(this, C) / e(this, R));
|
|
240
|
+
p(this, M, f + 20), Q.log(`[RowManager] Resized. Height: ${e(this, C)}px | Target Rows: ${e(this, M)}`), [".ng-container-body", ".ng-container-left", ".ng-container-right"].forEach((b) => {
|
|
241
241
|
const g = s.querySelector(b);
|
|
242
242
|
g && g.querySelector("tbody") && this.renderRows(g);
|
|
243
243
|
});
|
|
@@ -250,11 +250,11 @@ const Ae = class Ae {
|
|
|
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
|
-
p(this, L, s.map((n) => n.cloneNode(!0))), p(this,
|
|
253
|
+
p(this, L, s.map((n) => n.cloneNode(!0))), p(this, R, null), console.log(`[RowManager] Template initialized with ${e(this, L).length} row(s).`);
|
|
254
254
|
}, "initTemplate"));
|
|
255
255
|
v(this, "measureAndCacheHeight", /* @__PURE__ */ a((i) => {
|
|
256
|
-
if (e(this,
|
|
257
|
-
return e(this,
|
|
256
|
+
if (e(this, R) !== null && e(this, R) > 0)
|
|
257
|
+
return e(this, R);
|
|
258
258
|
if (e(this, L).length === 0)
|
|
259
259
|
throw new Error("[RowManager] Template TRs are empty.");
|
|
260
260
|
const t = i.querySelector("tbody.bindable") || i.querySelector("tbody");
|
|
@@ -270,12 +270,12 @@ const Ae = class Ae {
|
|
|
270
270
|
if (t.querySelectorAll("tr:not(.nodata)").forEach((f, b) => {
|
|
271
271
|
const g = f.offsetHeight || f.getBoundingClientRect().height;
|
|
272
272
|
g === 0 ? l += 40 : l += g;
|
|
273
|
-
}), r && (r.style.display = o, r.style.visibility = c, r.style.position = u), p(this,
|
|
274
|
-
const f = Math.ceil(e(this,
|
|
275
|
-
p(this,
|
|
273
|
+
}), r && (r.style.display = o, r.style.visibility = c, r.style.position = u), p(this, R, l), e(this, C) > 0) {
|
|
274
|
+
const f = Math.ceil(e(this, C) / e(this, R));
|
|
275
|
+
p(this, M, f + 20);
|
|
276
276
|
} else
|
|
277
|
-
p(this,
|
|
278
|
-
return console.log(`[RowManager] Template Height Cached: ${e(this,
|
|
277
|
+
p(this, M, 40);
|
|
278
|
+
return console.log(`[RowManager] Template Height Cached: ${e(this, R)}px | RowCount: ${e(this, M)}`), e(this, R);
|
|
279
279
|
}, "measureAndCacheHeight"));
|
|
280
280
|
/**
|
|
281
281
|
* π― μΊμλ ν κ°μ λ°ν (μμ λλ§ μ΅μνμ λ°©μ΄ μ°μ°)
|
|
@@ -298,7 +298,7 @@ const Ae = class Ae {
|
|
|
298
298
|
const t = i.querySelector("tbody.bindable") || i.querySelector("tbody");
|
|
299
299
|
if (!t) return;
|
|
300
300
|
t.querySelectorAll("tr:not(.nodata)").forEach((o) => o.remove());
|
|
301
|
-
const s = t.querySelector("tr.nodata"), n = document.createDocumentFragment(), r = e(this,
|
|
301
|
+
const s = t.querySelector("tr.nodata"), n = document.createDocumentFragment(), r = e(this, M);
|
|
302
302
|
for (let o = 0; o < r; o++)
|
|
303
303
|
e(this, L).forEach((c) => {
|
|
304
304
|
n.appendChild(c.cloneNode(!0));
|
|
@@ -314,23 +314,23 @@ const Ae = class Ae {
|
|
|
314
314
|
return e(this, L).length || 1;
|
|
315
315
|
}
|
|
316
316
|
};
|
|
317
|
-
V = new WeakMap(), L = new WeakMap(),
|
|
318
|
-
let
|
|
319
|
-
var
|
|
317
|
+
V = new WeakMap(), L = new WeakMap(), R = new WeakMap(), $ = new WeakMap(), C = new WeakMap(), M = new WeakMap(), se = new WeakMap(), ne = new WeakMap(), a(qe, "RowManager");
|
|
318
|
+
let me = qe;
|
|
319
|
+
var H, X, re, oe;
|
|
320
320
|
const Z = class Z extends HTMLElement {
|
|
321
321
|
constructor() {
|
|
322
322
|
super();
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
v(this, "
|
|
323
|
+
h(this, H, null);
|
|
324
|
+
h(this, X);
|
|
325
|
+
v(this, "generate", /* @__PURE__ */ a((t) => {
|
|
326
326
|
if (!t) return;
|
|
327
327
|
const s = /* @__PURE__ */ a((l) => {
|
|
328
|
-
const
|
|
328
|
+
const d = /* @__PURE__ */ a((b) => {
|
|
329
329
|
if (b.querySelector("colgroup")) return;
|
|
330
330
|
const g = b.querySelector("tbody tr") || b.querySelector("tr"), S = g ? g.querySelectorAll("th, td").length : 1, x = document.createElement("colgroup"), I = Math.max(Math.floor((b.clientWidth || 600) / S), 100);
|
|
331
331
|
for (let _ = 0; _ < S; _++) {
|
|
332
|
-
const
|
|
333
|
-
|
|
332
|
+
const ge = document.createElement("col");
|
|
333
|
+
ge.setAttribute("width", I), x.appendChild(ge);
|
|
334
334
|
}
|
|
335
335
|
b.prepend(x);
|
|
336
336
|
}, "ensureColgroup"), f = /* @__PURE__ */ a((b) => {
|
|
@@ -338,14 +338,14 @@ const Z = class Z extends HTMLElement {
|
|
|
338
338
|
const g = document.createElement("thead"), S = b.querySelector("colgroup");
|
|
339
339
|
S ? S.after(g) : b.prepend(g);
|
|
340
340
|
}, "ensureThead");
|
|
341
|
-
return
|
|
341
|
+
return d(l), f(l), l.classList.add("nine-table-element"), l;
|
|
342
342
|
}, "initializeTable"), n = t.cloneNode(!0);
|
|
343
|
-
p(this,
|
|
344
|
-
const r = this.querySelector(".ng-container-left"), o = this.querySelector(".ng-container-body"), c = this.querySelector(".ng-container-right"), u = /* @__PURE__ */ a((l,
|
|
343
|
+
p(this, H, s(n)), e(this, H).style.display = "table", e(this, X).initTemplate(e(this, H));
|
|
344
|
+
const r = this.querySelector(".ng-container-left"), o = this.querySelector(".ng-container-body"), c = this.querySelector(".ng-container-right"), u = /* @__PURE__ */ a((l, d, f = !1) => {
|
|
345
345
|
const b = l.cloneNode(!0), g = Array.from(b.querySelectorAll("colgroup col")), S = [];
|
|
346
346
|
return g.forEach((x, I) => {
|
|
347
347
|
const _ = x.getAttribute("fixed");
|
|
348
|
-
(f ? _ !== "left" && _ !== "right" : _ ===
|
|
348
|
+
(f ? _ !== "left" && _ !== "right" : _ === d) || S.push(I);
|
|
349
349
|
}), S.reverse().forEach((x) => {
|
|
350
350
|
g[x] && g[x].remove(), b.querySelectorAll("tr").forEach((I) => {
|
|
351
351
|
const _ = I.querySelectorAll("th, td");
|
|
@@ -354,43 +354,43 @@ const Z = class Z extends HTMLElement {
|
|
|
354
354
|
}), b;
|
|
355
355
|
}, "filterTableByFixed");
|
|
356
356
|
if (o) {
|
|
357
|
-
const l = u(e(this,
|
|
357
|
+
const l = u(e(this, H), null, !0);
|
|
358
358
|
o.innerHTML = "", o.appendChild(l), e(this, X).measureAndCacheHeight(o);
|
|
359
359
|
}
|
|
360
360
|
if (r) {
|
|
361
|
-
const l = u(e(this,
|
|
362
|
-
let
|
|
361
|
+
const l = u(e(this, H), "left", !1);
|
|
362
|
+
let d = 0;
|
|
363
363
|
l.querySelectorAll("col").forEach((b) => {
|
|
364
364
|
const g = parseInt(b.getAttribute("width"), 10);
|
|
365
|
-
isNaN(g) || (
|
|
365
|
+
isNaN(g) || (d += g);
|
|
366
366
|
}), r.innerHTML = "", r.appendChild(l);
|
|
367
|
-
const f =
|
|
367
|
+
const f = d > 0 ? d : 0;
|
|
368
368
|
r.style.flex = `0 0 ${f}px`, r.style.width = `${f}px`;
|
|
369
369
|
}
|
|
370
370
|
if (c) {
|
|
371
|
-
const l = u(e(this,
|
|
372
|
-
let
|
|
371
|
+
const l = u(e(this, H), "right", !1);
|
|
372
|
+
let d = 0;
|
|
373
373
|
l.querySelectorAll("col").forEach((b) => {
|
|
374
374
|
const g = parseInt(b.getAttribute("width"), 10);
|
|
375
|
-
isNaN(g) || (
|
|
375
|
+
isNaN(g) || (d += g);
|
|
376
376
|
}), c.innerHTML = "", c.appendChild(l);
|
|
377
|
-
const f =
|
|
377
|
+
const f = d > 0 ? d : 0;
|
|
378
378
|
c.style.flex = `0 0 ${f}px`, c.style.width = `${f}px`;
|
|
379
379
|
}
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
h && typeof h.refresh == "function" && h.refresh();
|
|
385
|
-
});
|
|
386
|
-
}
|
|
387
|
-
setTimeout(() => {
|
|
380
|
+
o && o.addEventListener("scroll", () => {
|
|
381
|
+
var l;
|
|
382
|
+
this.querySelector("nine-table-hscrollbar"), (l = this.querySelector("nine-table-hscrollbar")) == null || l.refresh();
|
|
383
|
+
}), setTimeout(() => {
|
|
388
384
|
const l = this.querySelector("nine-table-hscrollbar");
|
|
389
385
|
l && typeof l.refresh == "function" && l.refresh();
|
|
390
|
-
}, 0)
|
|
391
|
-
}, "
|
|
386
|
+
}, 0);
|
|
387
|
+
}, "generate"));
|
|
392
388
|
v(this, "getRowHeight", /* @__PURE__ */ a(() => e(this, X).getRowHeight(), "getRowHeight"));
|
|
393
|
-
|
|
389
|
+
/**
|
|
390
|
+
getRowCount = () => {
|
|
391
|
+
if (!this.#tableElement) return 0;
|
|
392
|
+
return this.#tableElement.querySelectorAll('tbody tr').length;
|
|
393
|
+
}; */
|
|
394
394
|
v(this, "scrollToX", /* @__PURE__ */ a((t) => {
|
|
395
395
|
const s = this.querySelector(".ng-container-body");
|
|
396
396
|
s && (s.scrollLeft = t);
|
|
@@ -399,11 +399,15 @@ const Z = class Z extends HTMLElement {
|
|
|
399
399
|
const s = this.querySelector(".ng-container-body");
|
|
400
400
|
s && (s.scrollTop = t);
|
|
401
401
|
}, "scrollToY"));
|
|
402
|
-
|
|
402
|
+
h(this, re, /* @__PURE__ */ a(() => {
|
|
403
|
+
e(this, oe).call(this);
|
|
404
|
+
}, "#init"));
|
|
405
|
+
h(this, oe, /* @__PURE__ */ a(() => {
|
|
403
406
|
const t = Z.SCROLLBAR_SIZE;
|
|
404
407
|
this.innerHTML = `
|
|
405
408
|
<style>
|
|
406
409
|
nine-table-sheet {
|
|
410
|
+
display: none;
|
|
407
411
|
flex-direction: column;
|
|
408
412
|
width: 100%;
|
|
409
413
|
height: 100%;
|
|
@@ -413,10 +417,6 @@ const Z = class Z extends HTMLElement {
|
|
|
413
417
|
overflow: hidden;
|
|
414
418
|
}
|
|
415
419
|
|
|
416
|
-
nine-table-sheet {
|
|
417
|
-
display: none;
|
|
418
|
-
}
|
|
419
|
-
|
|
420
420
|
nine-table-sheet.active {
|
|
421
421
|
display: flex;
|
|
422
422
|
}
|
|
@@ -505,15 +505,6 @@ const Z = class Z extends HTMLElement {
|
|
|
505
505
|
nine-splitter {
|
|
506
506
|
display: none;
|
|
507
507
|
}
|
|
508
|
-
|
|
509
|
-
/*
|
|
510
|
-
π― [ν΅μ¬ CSS]
|
|
511
|
-
μμ (nine-splitter) λ°λ‘ λ€μμ μ€λ μνΈ(.active)κ° μΌμ Έ μκ³ ,
|
|
512
|
-
κ·Έ μ€νλ¦¬ν° λ°λ‘ μμ μλ μνΈ(.active)λ μΌμ Έ μμ λλ§ display: block
|
|
513
|
-
*/
|
|
514
|
-
nine-table-sheet.active + nine-splitter + nine-table-sheet.active {
|
|
515
|
-
--display: flex;
|
|
516
|
-
}
|
|
517
508
|
</style>
|
|
518
509
|
|
|
519
510
|
<div class='ng-container-top'>
|
|
@@ -528,92 +519,92 @@ const Z = class Z extends HTMLElement {
|
|
|
528
519
|
</div>
|
|
529
520
|
`;
|
|
530
521
|
}, "#render"));
|
|
531
|
-
p(this, X, new
|
|
522
|
+
p(this, X, new me(this));
|
|
532
523
|
}
|
|
533
524
|
connectedCallback() {
|
|
534
525
|
e(this, re).call(this);
|
|
535
526
|
}
|
|
536
527
|
disconnectedCallback() {
|
|
537
|
-
this.innerHTML = "",
|
|
528
|
+
this.innerHTML = "", Q.log("NineTableSheet destroyed.");
|
|
538
529
|
}
|
|
539
530
|
};
|
|
540
|
-
|
|
531
|
+
H = new WeakMap(), X = new WeakMap(), re = new WeakMap(), oe = new WeakMap(), a(Z, "NineTableSheet"), v(Z, "SCROLLBAR_SIZE", 16);
|
|
541
532
|
let ee = Z;
|
|
542
533
|
customElements.get("nine-table-sheet") || customElements.define("nine-table-sheet", ee);
|
|
543
|
-
var
|
|
544
|
-
const
|
|
534
|
+
var le, j;
|
|
535
|
+
const ke = class ke extends HTMLElement {
|
|
545
536
|
constructor() {
|
|
546
537
|
super();
|
|
547
|
-
|
|
538
|
+
h(this, le, /* @__PURE__ */ a(() => {
|
|
548
539
|
var t;
|
|
549
540
|
(t = this.querySelector(".nine-tab-bar")) == null || t.addEventListener("click", (s) => {
|
|
550
541
|
var o;
|
|
551
542
|
const n = s.ctrlKey || s.metaKey || s.shiftKey, r = parseInt((o = s.target.closest(".nine-tab-item")) == null ? void 0 : o.dataset.index, 10);
|
|
552
|
-
e(this,
|
|
553
|
-
}), e(this,
|
|
543
|
+
e(this, j).call(this, r, n);
|
|
544
|
+
}), e(this, j).call(this, 0, !1);
|
|
554
545
|
}, "#init"));
|
|
555
|
-
|
|
546
|
+
h(this, j, /* @__PURE__ */ a((t, s = !1) => {
|
|
556
547
|
const n = /* @__PURE__ */ a(() => {
|
|
557
|
-
const
|
|
548
|
+
const d = Array.from(this.querySelectorAll("nine-table-sheet"));
|
|
558
549
|
Array.from(this.querySelectorAll("nine-splitter")).forEach((g) => g.style.setProperty("display", "none"));
|
|
559
|
-
const b =
|
|
550
|
+
const b = d.filter((g) => g.classList.contains("active"));
|
|
560
551
|
b.length < 2 || b.forEach((g) => {
|
|
561
|
-
const S = parseInt(g.getAttribute("data-index"), 10), x = this.querySelector(`nine-splitter[data-split-index="${S}"]`), I =
|
|
562
|
-
x && I && I.classList.contains("active") && x.style.setProperty("display", "
|
|
552
|
+
const S = parseInt(g.getAttribute("data-index"), 10), x = this.querySelector(`nine-splitter[data-split-index="${S}"]`), I = d[S + 1];
|
|
553
|
+
x && I && I.classList.contains("active") && x.style.setProperty("display", "flex");
|
|
563
554
|
});
|
|
564
555
|
}, "updateSplitters"), r = this.querySelector(".nine-tab-bar"), o = this.querySelector("nine-table-sheets-body"), c = r.querySelectorAll(".nine-tab-item"), u = o.querySelectorAll("nine-table-sheet");
|
|
565
556
|
if (!c[t]) return;
|
|
566
557
|
if (!s)
|
|
567
|
-
c.forEach((
|
|
568
|
-
|
|
569
|
-
}), u.forEach((
|
|
558
|
+
c.forEach((d, f) => {
|
|
559
|
+
d.classList.toggle("active", f === t);
|
|
560
|
+
}), u.forEach((d, f) => {
|
|
570
561
|
const b = f === t;
|
|
571
|
-
|
|
562
|
+
d.classList.toggle("active", b), d.style.flex = b ? "1 1 100%" : "";
|
|
572
563
|
});
|
|
573
564
|
else {
|
|
574
|
-
const
|
|
575
|
-
if (
|
|
565
|
+
const d = c[t], f = r.querySelectorAll(".nine-tab-item.active");
|
|
566
|
+
if (d.classList.contains("active") && f.length <= 1)
|
|
576
567
|
return;
|
|
577
|
-
|
|
568
|
+
d.classList.toggle("active");
|
|
578
569
|
const b = o.querySelector(`nine-table-sheet[data-index="${t}"]`);
|
|
579
570
|
b && (b.classList.toggle("active"), b.classList.contains("active") || (b.style.flex = ""));
|
|
580
571
|
}
|
|
581
572
|
const l = o.querySelectorAll("nine-table-sheet.active");
|
|
582
|
-
l == null || l.forEach((
|
|
583
|
-
|
|
573
|
+
l == null || l.forEach((d) => {
|
|
574
|
+
d.style.flex = l.length > 1 ? "1 1 0%" : "1 1 100%";
|
|
584
575
|
}), n();
|
|
585
576
|
}, "#switchSheet"));
|
|
586
577
|
}
|
|
587
578
|
connectedCallback() {
|
|
588
|
-
e(this,
|
|
579
|
+
e(this, le).call(this);
|
|
589
580
|
}
|
|
590
581
|
};
|
|
591
|
-
|
|
592
|
-
let
|
|
593
|
-
customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets",
|
|
594
|
-
var
|
|
595
|
-
const
|
|
582
|
+
le = new WeakMap(), j = new WeakMap(), a(ke, "NineTableSheets");
|
|
583
|
+
let we = ke;
|
|
584
|
+
customElements.get("nine-table-sheets") || customElements.define("nine-table-sheets", we);
|
|
585
|
+
var E, ae, G, ce;
|
|
586
|
+
const Le = class Le {
|
|
596
587
|
constructor(i) {
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
e(this,
|
|
588
|
+
h(this, E);
|
|
589
|
+
h(this, ae, /* @__PURE__ */ a(() => {
|
|
590
|
+
e(this, ce).call(this), new ResizeObserver((i) => {
|
|
600
591
|
for (let t of i)
|
|
601
|
-
e(this,
|
|
602
|
-
}).observe(e(this,
|
|
592
|
+
e(this, E).getAttribute("auto-height") === "true" && e(this, G).call(this);
|
|
593
|
+
}).observe(e(this, E));
|
|
603
594
|
}, "#init"));
|
|
604
|
-
|
|
595
|
+
h(this, G, /* @__PURE__ */ a(() => {
|
|
605
596
|
var u, l;
|
|
606
|
-
const i = Array.from(e(this,
|
|
597
|
+
const i = Array.from(e(this, E).shadowRoot.querySelectorAll("nine-table-sheet.active"));
|
|
607
598
|
if (i.length === 0) return;
|
|
608
|
-
const t = parseInt(e(this,
|
|
609
|
-
e(this,
|
|
599
|
+
const t = parseInt(e(this, E).getAttribute("max-display-row"), 10) || 10, s = Math.max(...i.map((d) => d.getRowHeight())), n = (u = e(this, E).shadowRoot.querySelector("nine-table-header")) == null ? void 0 : u.getBoundingClientRect().height, r = (l = e(this, E).shadowRoot.querySelector("nine-table-sheets-footer")) == null ? void 0 : l.getBoundingClientRect().height, o = ee.SCROLLBAR_SIZE, c = t * s + n + r + o;
|
|
600
|
+
e(this, E).style.height = `${c}px`;
|
|
610
601
|
}, "#applyAutoHeight"));
|
|
611
|
-
|
|
612
|
-
const t = Array.from(e(this,
|
|
602
|
+
h(this, ce, /* @__PURE__ */ a(() => {
|
|
603
|
+
const t = Array.from(e(this, E).children).filter((u) => u.tagName === "TABLE"), s = e(this, E).getAttribute("auto-height") === "true", n = t.length, r = t.map((u, l) => {
|
|
613
604
|
const f = `<nine-table-sheet class="${l === 0 ? "active" : ""}" data-index="${l}"></nine-table-sheet>`, b = l < n - 1 ? `<nine-splitter class="h" data-split-index="${l}"></nine-splitter>` : "";
|
|
614
605
|
return f + b;
|
|
615
606
|
}).join(""), o = t.map((u, l) => `<div class="nine-tab-item ${l === 0 ? "active" : ""}" data-index="${l}">Sheet ${l + 1}</div>`).join("");
|
|
616
|
-
e(this,
|
|
607
|
+
e(this, E).shadowRoot.innerHTML = `
|
|
617
608
|
<style>
|
|
618
609
|
:host {
|
|
619
610
|
display: flex;
|
|
@@ -712,64 +703,64 @@ const ke = class ke {
|
|
|
712
703
|
</nine-table-body>
|
|
713
704
|
<nine-table-footer></nine-table-footer>
|
|
714
705
|
`;
|
|
715
|
-
const c = e(this,
|
|
706
|
+
const c = e(this, E).shadowRoot.querySelectorAll("nine-table-sheet");
|
|
716
707
|
c == null || c.forEach((u, l) => {
|
|
717
708
|
t[l] && setTimeout(() => {
|
|
718
|
-
u.
|
|
709
|
+
u.generate(t[l]), s && e(this, G).call(this);
|
|
719
710
|
});
|
|
720
711
|
});
|
|
721
712
|
}, "#render"));
|
|
722
|
-
p(this,
|
|
713
|
+
p(this, E, i), e(this, ae).call(this);
|
|
723
714
|
}
|
|
724
715
|
};
|
|
725
|
-
|
|
726
|
-
let
|
|
727
|
-
var W,
|
|
728
|
-
const
|
|
716
|
+
E = new WeakMap(), ae = new WeakMap(), G = new WeakMap(), ce = new WeakMap(), a(Le, "LayoutManager");
|
|
717
|
+
let ve = Le;
|
|
718
|
+
var W, F;
|
|
719
|
+
const _e = class _e {
|
|
729
720
|
constructor(i) {
|
|
730
|
-
|
|
731
|
-
|
|
721
|
+
h(this, W);
|
|
722
|
+
h(this, F, -1);
|
|
732
723
|
v(this, "count", /* @__PURE__ */ a(() => e(this, W).rawRecords.length, "count"));
|
|
733
724
|
p(this, W, i);
|
|
734
725
|
}
|
|
735
726
|
get at() {
|
|
736
|
-
return e(this,
|
|
727
|
+
return e(this, F);
|
|
737
728
|
}
|
|
738
729
|
set at(i) {
|
|
739
730
|
var s, n;
|
|
740
|
-
p(this,
|
|
731
|
+
p(this, F, parseInt(i, 10));
|
|
741
732
|
const t = ((n = (s = e(this, W).owner).querySelector) == null ? void 0 : n.call(s, ".ng-container-body")) || e(this, W).owner.body;
|
|
742
|
-
t && !t.querySelector(`tbody.bindable tr[data-row="${e(this,
|
|
733
|
+
t && !t.querySelector(`tbody.bindable tr[data-row="${e(this, F)}"]`) && setTimeout(() => {
|
|
743
734
|
var r, o;
|
|
744
|
-
(o = (r = e(this, W).owner).scrollTo_V1) == null || o.call(r, e(this,
|
|
735
|
+
(o = (r = e(this, W).owner).scrollTo_V1) == null || o.call(r, e(this, F));
|
|
745
736
|
});
|
|
746
737
|
}
|
|
747
738
|
};
|
|
748
|
-
W = new WeakMap(),
|
|
749
|
-
let
|
|
750
|
-
var T, w, A, U,
|
|
739
|
+
W = new WeakMap(), F = new WeakMap(), a(_e, "ngRow");
|
|
740
|
+
let xe = _e;
|
|
741
|
+
var T, w, A, U, he, z, de, J, fe, ue, K;
|
|
751
742
|
const q = class q {
|
|
752
743
|
constructor(i, t) {
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
744
|
+
h(this, T);
|
|
745
|
+
h(this, w);
|
|
746
|
+
h(this, A, []);
|
|
747
|
+
h(this, U, []);
|
|
748
|
+
h(this, he, 0);
|
|
749
|
+
h(this, z, []);
|
|
750
|
+
h(this, de, /* @__PURE__ */ a(() => {
|
|
760
751
|
p(this, z, []);
|
|
761
752
|
const i = e(this, T).template || [];
|
|
762
753
|
Array.from(i).forEach((t) => {
|
|
763
754
|
var s;
|
|
764
755
|
e(this, z).push(((s = t.getBoundingClientRect) == null ? void 0 : s.call(t).height) || 24);
|
|
765
756
|
}), (e(this, w).rawRecords || []).forEach((t) => {
|
|
766
|
-
t.__ng || (t.__ng = e(this,
|
|
757
|
+
t.__ng || (t.__ng = e(this, J).call(this)), t.__ng.height = e(this, z).slice();
|
|
767
758
|
});
|
|
768
759
|
}, "#initialize"));
|
|
769
760
|
v(this, "set", /* @__PURE__ */ a((i) => {
|
|
770
761
|
this.clear(), this.add(i, !1);
|
|
771
762
|
}, "set"));
|
|
772
|
-
|
|
763
|
+
h(this, J, /* @__PURE__ */ a(() => ({
|
|
773
764
|
rowState: q.ROW_STATE.EMPTY,
|
|
774
765
|
deleted: !1,
|
|
775
766
|
filtered: !1,
|
|
@@ -785,7 +776,7 @@ const q = class q {
|
|
|
785
776
|
var i;
|
|
786
777
|
e(this, w).rawRecords = [], p(this, A, []), p(this, U, []), (i = e(this, w).viewRecords) != null && i.reset && e(this, w).viewRecords.reset();
|
|
787
778
|
}, "clear"));
|
|
788
|
-
|
|
779
|
+
h(this, fe, /* @__PURE__ */ a((i) => {
|
|
789
780
|
var n;
|
|
790
781
|
Array.isArray(i) || (i = [i]);
|
|
791
782
|
const t = typeof ((n = e(this, T).fields) == null ? void 0 : n.get) == "function" ? e(this, T).fields.get() : Object.keys(i[0] || {}), s = [];
|
|
@@ -796,14 +787,14 @@ const q = class q {
|
|
|
796
787
|
}), s.push(o);
|
|
797
788
|
}), s;
|
|
798
789
|
}, "#json2Array"));
|
|
799
|
-
|
|
800
|
-
t.__ng = e(this,
|
|
790
|
+
h(this, ue, /* @__PURE__ */ a((i) => (Array.isArray(i) || (i = [i]), i.forEach((t) => {
|
|
791
|
+
t.__ng = e(this, J).call(this), t.__ng.rowid = this.nextId, t.__ng.rowState = q.ROW_STATE.INSERT, t.__ng._[0] = t.__ng.rowid;
|
|
801
792
|
}), i), "#defaultInsert"));
|
|
802
793
|
v(this, "add", /* @__PURE__ */ a((i, t = !0) => {
|
|
803
794
|
var r;
|
|
804
795
|
i === void 0 && (i = {});
|
|
805
|
-
const s = e(this,
|
|
806
|
-
e(this, w).rawRecords = e(this, w).rawRecords.concat(e(this,
|
|
796
|
+
const s = e(this, fe).call(this, i);
|
|
797
|
+
e(this, w).rawRecords = e(this, w).rawRecords.concat(e(this, ue).call(this, s)), this.resetRecords();
|
|
807
798
|
const n = this.count() - 1;
|
|
808
799
|
return t || s.forEach((o, c) => {
|
|
809
800
|
const u = e(this, w).rawRecords[n - c];
|
|
@@ -840,7 +831,7 @@ const q = class q {
|
|
|
840
831
|
});
|
|
841
832
|
}, "resetRecords"));
|
|
842
833
|
v(this, "getValidData", /* @__PURE__ */ a(() => (e(this, A).length === 0 && e(this, w).rawRecords.length > 0 && this.resetRecords(), e(this, A)), "getValidData"));
|
|
843
|
-
|
|
834
|
+
h(this, K, /* @__PURE__ */ a((i) => {
|
|
844
835
|
var s;
|
|
845
836
|
if (!i) return i;
|
|
846
837
|
const t = typeof ((s = e(this, T).fields) == null ? void 0 : s.get) == "function" ? e(this, T).fields.get() : [];
|
|
@@ -865,7 +856,7 @@ const q = class q {
|
|
|
865
856
|
}
|
|
866
857
|
return e(this, K).call(this, s[i]);
|
|
867
858
|
}, "get"));
|
|
868
|
-
p(this, T, i), p(this, w, t), e(this,
|
|
859
|
+
p(this, T, i), p(this, w, t), e(this, de).call(this);
|
|
869
860
|
}
|
|
870
861
|
get source() {
|
|
871
862
|
return e(this, K).call(this, e(this, w).rawRecords);
|
|
@@ -874,7 +865,7 @@ const q = class q {
|
|
|
874
865
|
this.clear(), this.add(i, !1);
|
|
875
866
|
}
|
|
876
867
|
get nextId() {
|
|
877
|
-
return
|
|
868
|
+
return ++We(this, he)._;
|
|
878
869
|
}
|
|
879
870
|
get length() {
|
|
880
871
|
return e(this, A).length;
|
|
@@ -883,7 +874,7 @@ const q = class q {
|
|
|
883
874
|
return this.length;
|
|
884
875
|
}
|
|
885
876
|
};
|
|
886
|
-
T = new WeakMap(), w = new WeakMap(), A = new WeakMap(), U = new WeakMap(),
|
|
877
|
+
T = new WeakMap(), w = new WeakMap(), A = new WeakMap(), U = new WeakMap(), he = new WeakMap(), z = new WeakMap(), de = new WeakMap(), J = new WeakMap(), fe = new WeakMap(), ue = new WeakMap(), K = new WeakMap(), a(q, "ngData"), // π― ν μν μ μ μμλ₯Ό ν΄λμ€ λ΄λΆλ‘ λ΄μ¬ν
|
|
887
878
|
v(q, "ROW_STATE", {
|
|
888
879
|
EMPTY: "EMPTY",
|
|
889
880
|
NORMAL: "NORMAL",
|
|
@@ -891,10 +882,10 @@ v(q, "ROW_STATE", {
|
|
|
891
882
|
UPDATE: "UPDATE",
|
|
892
883
|
DELETE: "DELETE"
|
|
893
884
|
});
|
|
894
|
-
let
|
|
895
|
-
const
|
|
885
|
+
let Se = q;
|
|
886
|
+
const Ce = class Ce {
|
|
896
887
|
constructor(i) {
|
|
897
|
-
this.owner = i, this.row = new
|
|
888
|
+
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 = () => {
|
|
898
889
|
var t;
|
|
899
890
|
(t = this.owner.view) != null && t.redraw && this.owner.view.redraw();
|
|
900
891
|
}, this.setDataSource = (t) => {
|
|
@@ -911,37 +902,37 @@ const Le = class Le {
|
|
|
911
902
|
}, this.setDataSource([]);
|
|
912
903
|
}
|
|
913
904
|
};
|
|
914
|
-
a(
|
|
915
|
-
let
|
|
916
|
-
var
|
|
917
|
-
const
|
|
905
|
+
a(Ce, "ngDataManager");
|
|
906
|
+
let Ee = Ce;
|
|
907
|
+
var Y, be;
|
|
908
|
+
const Me = class Me extends HTMLElement {
|
|
918
909
|
constructor() {
|
|
919
910
|
super();
|
|
920
911
|
//#created = false;
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
this.attachShadow({ mode: "open" }), p(this,
|
|
912
|
+
h(this, Y);
|
|
913
|
+
h(this, be);
|
|
914
|
+
this.attachShadow({ mode: "open" }), p(this, Y, new Ee(this));
|
|
924
915
|
}
|
|
925
916
|
connectedCallback() {
|
|
926
|
-
p(this,
|
|
917
|
+
p(this, be, new ve(this)), Q.log("NineTable connected."), this.dispatchEvent(new CustomEvent("load", { bubbles: !0, detail: { target: this } }));
|
|
927
918
|
}
|
|
928
919
|
disconnectedCallback() {
|
|
929
|
-
|
|
920
|
+
Q.log("NineTable disconnected.");
|
|
930
921
|
}
|
|
931
922
|
// π― μΈλΆμμ grid.data.set(...) ννλ‘ μ κ·Όν μ μλλ‘ λ°μ΄ν° λ§€λμ μ€ν
|
|
932
923
|
get data() {
|
|
933
|
-
return e(this,
|
|
924
|
+
return e(this, Y).data;
|
|
934
925
|
}
|
|
935
926
|
// π― ν(row) κ΄λ ¨ μ μ΄ μ κ·Όμ μ€ν
|
|
936
927
|
get row() {
|
|
937
|
-
return e(this,
|
|
928
|
+
return e(this, Y).row;
|
|
938
929
|
}
|
|
939
930
|
// π― μ 체 λ°μ΄ν° λ§€λμ μ κ·Ό νμν κ²½μ°
|
|
940
931
|
get dataManager() {
|
|
941
|
-
return e(this,
|
|
932
|
+
return e(this, Y);
|
|
942
933
|
}
|
|
943
934
|
};
|
|
944
|
-
|
|
945
|
-
let Re =
|
|
935
|
+
Y = new WeakMap(), be = new WeakMap(), a(Me, "NineTable");
|
|
936
|
+
let Re = Me;
|
|
946
937
|
customElements.get("nine-table") || customElements.define("nine-table", Re);
|
|
947
938
|
//# sourceMappingURL=nine-table.js.map
|