@toolbox-web/grid 0.0.2 → 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/README.md +1 -1
- package/all.d.ts +21 -0
- package/all.js +405 -402
- package/all.js.map +1 -1
- package/index.d.ts +26 -0
- package/index.js +924 -871
- package/index.js.map +1 -1
- package/lib/plugins/clipboard/index.js.map +1 -1
- package/lib/plugins/column-virtualization/index.js.map +1 -1
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/index.js.map +1 -1
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/reorder/index.js +23 -20
- package/lib/plugins/reorder/index.js.map +1 -1
- package/lib/plugins/selection/index.js +110 -92
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +4 -1
- package/themes/dg-theme-contrast.css +43 -43
- package/themes/dg-theme-large.css +54 -54
- package/themes/dg-theme-standard.css +19 -19
- package/themes/dg-theme-vibrant.css +16 -16
- package/umd/grid.all.umd.js +24 -24
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +15 -15
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/multi-sort.umd.js.map +1 -1
- package/umd/plugins/reorder.umd.js +1 -1
- package/umd/plugins/reorder.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js +2 -2
- package/umd/plugins/selection.umd.js.map +1 -1
- package/umd/plugins/visibility.umd.js.map +1 -1
package/all.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseGridPlugin as
|
|
1
|
+
import { BaseGridPlugin as y, runAggregator as X, getAggregator as xe } from "./index.js";
|
|
2
2
|
import { DGEvents as Pt, DataGridElement as Dt, FitModeEnum as Bt, GridCSSVars as Ht, GridClasses as Ot, GridDataAttrs as Wt, DataGridElement as Kt, GridSelectors as Vt, PluginEvents as Gt, SelectionPlugin as zt, TreePlugin as $t } from "./index.js";
|
|
3
3
|
function ve(i, e, t, n) {
|
|
4
4
|
if (n.processCell)
|
|
@@ -6,28 +6,28 @@ function ve(i, e, t, n) {
|
|
|
6
6
|
if (i == null) return "";
|
|
7
7
|
if (i instanceof Date) return i.toISOString();
|
|
8
8
|
if (typeof i == "object") return JSON.stringify(i);
|
|
9
|
-
const
|
|
9
|
+
const r = String(i), o = n.delimiter ?? " ", s = n.newline ?? `
|
|
10
10
|
`;
|
|
11
|
-
return n.quoteStrings ||
|
|
11
|
+
return n.quoteStrings || r.includes(o) || r.includes(s) || r.includes('"') ? `"${r.replace(/"/g, '""')}"` : r;
|
|
12
12
|
}
|
|
13
13
|
function F(i) {
|
|
14
|
-
const { rows: e, columns: t, selectedIndices: n, config:
|
|
14
|
+
const { rows: e, columns: t, selectedIndices: n, config: r } = i, o = r.delimiter ?? " ", s = r.newline ?? `
|
|
15
15
|
`, l = t.filter((u) => !u.hidden && !u.field.startsWith("__")), a = [];
|
|
16
|
-
if (
|
|
16
|
+
if (r.includeHeaders) {
|
|
17
17
|
const u = l.map((h) => {
|
|
18
18
|
const f = h.header || h.field;
|
|
19
|
-
return f.includes(
|
|
19
|
+
return f.includes(o) || f.includes(s) || f.includes('"') ? `"${f.replace(/"/g, '""')}"` : f;
|
|
20
20
|
});
|
|
21
|
-
a.push(u.join(
|
|
21
|
+
a.push(u.join(o));
|
|
22
22
|
}
|
|
23
23
|
const d = [...n instanceof Set ? [...n] : n].sort((u, h) => u - h);
|
|
24
24
|
for (const u of d) {
|
|
25
25
|
const h = e[u];
|
|
26
26
|
if (!h) continue;
|
|
27
27
|
const f = l.map(
|
|
28
|
-
(g) => ve(h[g.field], g.field, h,
|
|
28
|
+
(g) => ve(h[g.field], g.field, h, r)
|
|
29
29
|
);
|
|
30
|
-
a.push(f.join(
|
|
30
|
+
a.push(f.join(o));
|
|
31
31
|
}
|
|
32
32
|
return a.join(s);
|
|
33
33
|
}
|
|
@@ -43,15 +43,15 @@ async function N(i) {
|
|
|
43
43
|
}
|
|
44
44
|
function J(i, e) {
|
|
45
45
|
const t = e.delimiter ?? " ", n = e.newline ?? `
|
|
46
|
-
`,
|
|
46
|
+
`, r = i.replace(/\r\n/g, `
|
|
47
47
|
`).replace(/\r/g, `
|
|
48
|
-
`),
|
|
48
|
+
`), o = [];
|
|
49
49
|
let s = [], l = "", a = !1;
|
|
50
|
-
for (let c = 0; c <
|
|
51
|
-
const d =
|
|
52
|
-
d === '"' && !a ? a = !0 : d === '"' && a ?
|
|
50
|
+
for (let c = 0; c < r.length; c++) {
|
|
51
|
+
const d = r[c];
|
|
52
|
+
d === '"' && !a ? a = !0 : d === '"' && a ? r[c + 1] === '"' ? (l += '"', c++) : a = !1 : d === t && !a ? (s.push(l), l = "") : d === n && !a ? (s.push(l), l = "", (s.length > 1 || s.some((u) => u.trim() !== "")) && o.push(s), s = []) : l += d;
|
|
53
53
|
}
|
|
54
|
-
return s.push(l), (s.length > 1 || s.some((c) => c.trim() !== "")) &&
|
|
54
|
+
return s.push(l), (s.length > 1 || s.some((c) => c.trim() !== "")) && o.push(s), o;
|
|
55
55
|
}
|
|
56
56
|
async function Q() {
|
|
57
57
|
try {
|
|
@@ -60,7 +60,7 @@ async function Q() {
|
|
|
60
60
|
return "";
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
|
-
class vt extends
|
|
63
|
+
class vt extends y {
|
|
64
64
|
name = "clipboard";
|
|
65
65
|
version = "1.0.0";
|
|
66
66
|
get defaultConfig() {
|
|
@@ -91,9 +91,9 @@ class vt extends C {
|
|
|
91
91
|
* Handle copy operation
|
|
92
92
|
*/
|
|
93
93
|
#t(e) {
|
|
94
|
-
const t = this.#e(), n = t?.getSelectedRows() ?? [],
|
|
94
|
+
const t = this.#e(), n = t?.getSelectedRows() ?? [], r = n.length > 0, o = t?.getRanges() ?? [], s = o.length > 0, l = t?.getSelectedCell() != null;
|
|
95
95
|
let a, c, d;
|
|
96
|
-
if (
|
|
96
|
+
if (r && t)
|
|
97
97
|
a = F({
|
|
98
98
|
rows: this.rows,
|
|
99
99
|
columns: [...this.columns],
|
|
@@ -101,7 +101,7 @@ class vt extends C {
|
|
|
101
101
|
config: this.config
|
|
102
102
|
}), c = n.length, d = this.columns.filter((u) => !u.hidden && !u.field.startsWith("__")).length;
|
|
103
103
|
else if (s && t) {
|
|
104
|
-
const u =
|
|
104
|
+
const u = o[o.length - 1], h = this.#o({
|
|
105
105
|
startRow: u.from.row,
|
|
106
106
|
startCol: u.from.col,
|
|
107
107
|
endRow: u.to.row,
|
|
@@ -109,7 +109,7 @@ class vt extends C {
|
|
|
109
109
|
});
|
|
110
110
|
a = h.text, c = h.rowCount, d = h.columnCount;
|
|
111
111
|
} else if (l && t) {
|
|
112
|
-
const u = t.getSelectedCell(), h = this.#
|
|
112
|
+
const u = t.getSelectedCell(), h = this.#r(u.row, u.col);
|
|
113
113
|
if (!h) return;
|
|
114
114
|
a = h.text, c = 1, d = 1;
|
|
115
115
|
} else {
|
|
@@ -148,25 +148,25 @@ class vt extends C {
|
|
|
148
148
|
/**
|
|
149
149
|
* Build text for a single cell by row/col index.
|
|
150
150
|
*/
|
|
151
|
-
#
|
|
151
|
+
#r(e, t) {
|
|
152
152
|
const n = this.rows[e];
|
|
153
153
|
if (!n) return null;
|
|
154
|
-
const
|
|
155
|
-
if (!
|
|
156
|
-
const
|
|
154
|
+
const r = this.columns[t];
|
|
155
|
+
if (!r) return null;
|
|
156
|
+
const o = n[r.field], s = r.header || r.field;
|
|
157
157
|
let l;
|
|
158
158
|
if (this.config.includeHeaders) {
|
|
159
|
-
const a =
|
|
159
|
+
const a = o == null ? "" : String(o);
|
|
160
160
|
l = `${s}: ${a}`;
|
|
161
161
|
} else
|
|
162
|
-
l =
|
|
162
|
+
l = o == null ? "" : String(o);
|
|
163
163
|
return { text: l };
|
|
164
164
|
}
|
|
165
165
|
/**
|
|
166
166
|
* Build text for a rectangular range of cells.
|
|
167
167
|
*/
|
|
168
|
-
#
|
|
169
|
-
const { startRow: t, startCol: n, endRow:
|
|
168
|
+
#o(e) {
|
|
169
|
+
const { startRow: t, startCol: n, endRow: r, endCol: o } = e, s = Math.min(t, r), l = Math.max(t, r), a = Math.min(n, o), c = Math.max(n, o), d = this.config.delimiter ?? " ", u = this.config.newline ?? `
|
|
170
170
|
`, h = [], f = this.columns.slice(a, c + 1);
|
|
171
171
|
if (this.config.includeHeaders) {
|
|
172
172
|
const g = f.map((m) => m.header || m.field);
|
|
@@ -196,11 +196,11 @@ class vt extends C {
|
|
|
196
196
|
if (!t) return null;
|
|
197
197
|
const n = t.dataset.fieldCache;
|
|
198
198
|
if (!n) return null;
|
|
199
|
-
const
|
|
200
|
-
if (!
|
|
201
|
-
const
|
|
202
|
-
if (isNaN(
|
|
203
|
-
const s = this.rows[
|
|
199
|
+
const r = t.dataset.row;
|
|
200
|
+
if (!r) return null;
|
|
201
|
+
const o = parseInt(r, 10);
|
|
202
|
+
if (isNaN(o)) return null;
|
|
203
|
+
const s = this.rows[o];
|
|
204
204
|
if (!s) return null;
|
|
205
205
|
const l = s[n], c = this.columns.find((u) => u.field === n)?.header || n;
|
|
206
206
|
let d;
|
|
@@ -277,39 +277,39 @@ function te(i) {
|
|
|
277
277
|
function ne(i) {
|
|
278
278
|
return i.reduce((e, t) => e + G(t.width), 0);
|
|
279
279
|
}
|
|
280
|
-
function
|
|
281
|
-
const
|
|
282
|
-
if (
|
|
280
|
+
function ye(i, e, t, n, r) {
|
|
281
|
+
const o = t.length;
|
|
282
|
+
if (o === 0)
|
|
283
283
|
return { startCol: 0, endCol: 0, visibleColumns: [] };
|
|
284
|
-
let s =
|
|
285
|
-
s = Math.max(0, s -
|
|
284
|
+
let s = Ce(i, t, n);
|
|
285
|
+
s = Math.max(0, s - r);
|
|
286
286
|
const l = i + e;
|
|
287
287
|
let a = s;
|
|
288
|
-
for (let d = s; d <
|
|
288
|
+
for (let d = s; d < o; d++) {
|
|
289
289
|
if (t[d] >= l) {
|
|
290
290
|
a = d - 1;
|
|
291
291
|
break;
|
|
292
292
|
}
|
|
293
293
|
a = d;
|
|
294
294
|
}
|
|
295
|
-
a = Math.min(
|
|
295
|
+
a = Math.min(o - 1, a + r);
|
|
296
296
|
const c = [];
|
|
297
297
|
for (let d = s; d <= a; d++)
|
|
298
298
|
c.push(d);
|
|
299
299
|
return { startCol: s, endCol: a, visibleColumns: c };
|
|
300
300
|
}
|
|
301
|
-
function
|
|
302
|
-
let n = 0,
|
|
303
|
-
for (; n <
|
|
304
|
-
const
|
|
305
|
-
e[
|
|
301
|
+
function Ce(i, e, t) {
|
|
302
|
+
let n = 0, r = e.length - 1;
|
|
303
|
+
for (; n < r; ) {
|
|
304
|
+
const o = Math.floor((n + r) / 2);
|
|
305
|
+
e[o] + t[o] <= i ? n = o + 1 : r = o;
|
|
306
306
|
}
|
|
307
307
|
return n;
|
|
308
308
|
}
|
|
309
309
|
function Se(i, e, t) {
|
|
310
310
|
return t ? i > e : !1;
|
|
311
311
|
}
|
|
312
|
-
class
|
|
312
|
+
class yt extends y {
|
|
313
313
|
name = "columnVirtualization";
|
|
314
314
|
version = "1.0.0";
|
|
315
315
|
get defaultConfig() {
|
|
@@ -342,25 +342,25 @@ class Ct extends C {
|
|
|
342
342
|
const t = this.config.enabled && Se(e.length, this.config.threshold ?? 30, this.config.autoEnable ?? !0);
|
|
343
343
|
if (this.isVirtualized = t ?? !1, this.columnWidths = ee(e), this.columnOffsets = te(e), this.totalWidth = ne(e), !t)
|
|
344
344
|
return this.startCol = 0, this.endCol = e.length - 1, [...e];
|
|
345
|
-
const n = this.grid.clientWidth || 800,
|
|
345
|
+
const n = this.grid.clientWidth || 800, r = ye(
|
|
346
346
|
this.scrollLeft,
|
|
347
347
|
n,
|
|
348
348
|
this.columnOffsets,
|
|
349
349
|
this.columnWidths,
|
|
350
350
|
this.config.overscan ?? 3
|
|
351
351
|
);
|
|
352
|
-
return this.startCol =
|
|
352
|
+
return this.startCol = r.startCol, this.endCol = r.endCol, r.visibleColumns.map((o) => e[o]);
|
|
353
353
|
}
|
|
354
354
|
afterRender() {
|
|
355
355
|
if (!this.isVirtualized) return;
|
|
356
356
|
const e = this.shadowRoot;
|
|
357
357
|
if (!e) return;
|
|
358
|
-
const t = this.columnOffsets[this.startCol] ?? 0, n = e.querySelector(".header-row"),
|
|
359
|
-
n && (n.style.paddingLeft = `${t}px`),
|
|
358
|
+
const t = this.columnOffsets[this.startCol] ?? 0, n = e.querySelector(".header-row"), r = e.querySelectorAll(".data-grid-row");
|
|
359
|
+
n && (n.style.paddingLeft = `${t}px`), r.forEach((s) => {
|
|
360
360
|
s.style.paddingLeft = `${t}px`;
|
|
361
361
|
});
|
|
362
|
-
const
|
|
363
|
-
|
|
362
|
+
const o = e.querySelector(".rows-viewport .rows");
|
|
363
|
+
o && (o.style.width = `${this.totalWidth}px`);
|
|
364
364
|
}
|
|
365
365
|
onScroll(e) {
|
|
366
366
|
!this.isVirtualized || Math.abs(e.scrollLeft - this.scrollLeft) < 1 || (this.scrollLeft = e.scrollLeft, this.requestRender());
|
|
@@ -409,46 +409,46 @@ function Re(i, e) {
|
|
|
409
409
|
function V(i, e, t) {
|
|
410
410
|
const n = document.createElement("div");
|
|
411
411
|
n.className = "tbw-context-menu", n.setAttribute("role", "menu");
|
|
412
|
-
for (const
|
|
413
|
-
if (
|
|
412
|
+
for (const r of i) {
|
|
413
|
+
if (r.separator) {
|
|
414
414
|
const a = document.createElement("div");
|
|
415
415
|
a.className = "tbw-context-menu-separator", a.setAttribute("role", "separator"), n.appendChild(a);
|
|
416
416
|
continue;
|
|
417
417
|
}
|
|
418
|
-
const
|
|
419
|
-
|
|
420
|
-
const s = Re(
|
|
421
|
-
if (s && (
|
|
418
|
+
const o = document.createElement("div");
|
|
419
|
+
o.className = "tbw-context-menu-item", r.cssClass && o.classList.add(r.cssClass), o.setAttribute("role", "menuitem"), o.setAttribute("data-id", r.id);
|
|
420
|
+
const s = Re(r, e);
|
|
421
|
+
if (s && (o.classList.add("disabled"), o.setAttribute("aria-disabled", "true")), r.icon) {
|
|
422
422
|
const a = document.createElement("span");
|
|
423
|
-
a.className = "tbw-context-menu-icon", a.innerHTML =
|
|
423
|
+
a.className = "tbw-context-menu-icon", a.innerHTML = r.icon, o.appendChild(a);
|
|
424
424
|
}
|
|
425
425
|
const l = document.createElement("span");
|
|
426
|
-
if (l.className = "tbw-context-menu-label", l.textContent =
|
|
426
|
+
if (l.className = "tbw-context-menu-label", l.textContent = r.name, o.appendChild(l), r.shortcut) {
|
|
427
427
|
const a = document.createElement("span");
|
|
428
|
-
a.className = "tbw-context-menu-shortcut", a.textContent =
|
|
428
|
+
a.className = "tbw-context-menu-shortcut", a.textContent = r.shortcut, o.appendChild(a);
|
|
429
429
|
}
|
|
430
|
-
if (
|
|
430
|
+
if (r.subMenu?.length) {
|
|
431
431
|
const a = document.createElement("span");
|
|
432
|
-
a.className = "tbw-context-menu-arrow", a.textContent = "▶",
|
|
433
|
-
if (
|
|
434
|
-
const d = K(
|
|
435
|
-
u.classList.add("tbw-context-submenu"), u.style.position = "absolute", u.style.left = "100%", u.style.top = "0",
|
|
436
|
-
}),
|
|
437
|
-
const c =
|
|
432
|
+
a.className = "tbw-context-menu-arrow", a.textContent = "▶", o.appendChild(a), o.addEventListener("mouseenter", () => {
|
|
433
|
+
if (o.querySelector(".tbw-context-menu") || !r.subMenu) return;
|
|
434
|
+
const d = K(r.subMenu, e), u = V(d, e, t);
|
|
435
|
+
u.classList.add("tbw-context-submenu"), u.style.position = "absolute", u.style.left = "100%", u.style.top = "0", o.style.position = "relative", o.appendChild(u);
|
|
436
|
+
}), o.addEventListener("mouseleave", () => {
|
|
437
|
+
const c = o.querySelector(".tbw-context-menu");
|
|
438
438
|
c && c.remove();
|
|
439
439
|
});
|
|
440
440
|
}
|
|
441
|
-
!s &&
|
|
442
|
-
a.stopPropagation(), t(
|
|
443
|
-
}), n.appendChild(
|
|
441
|
+
!s && r.action && !r.subMenu && o.addEventListener("click", (a) => {
|
|
442
|
+
a.stopPropagation(), t(r);
|
|
443
|
+
}), n.appendChild(o);
|
|
444
444
|
}
|
|
445
445
|
return n;
|
|
446
446
|
}
|
|
447
|
-
function
|
|
447
|
+
function re(i, e, t) {
|
|
448
448
|
i.style.position = "fixed", i.style.left = `${e}px`, i.style.top = `${t}px`, i.style.visibility = "hidden", i.style.zIndex = "10000";
|
|
449
|
-
const n = i.getBoundingClientRect(),
|
|
449
|
+
const n = i.getBoundingClientRect(), r = window.innerWidth, o = window.innerHeight;
|
|
450
450
|
let s = e, l = t;
|
|
451
|
-
e + n.width >
|
|
451
|
+
e + n.width > r && (s = e - n.width), t + n.height > o && (l = t - n.height), s = Math.max(0, s), l = Math.max(0, l), i.style.left = `${s}px`, i.style.top = `${l}px`, i.style.visibility = "visible";
|
|
452
452
|
}
|
|
453
453
|
let P = null, D = null, A = null;
|
|
454
454
|
const ke = `
|
|
@@ -520,7 +520,7 @@ const ke = `
|
|
|
520
520
|
}
|
|
521
521
|
}
|
|
522
522
|
];
|
|
523
|
-
class
|
|
523
|
+
class Ct extends y {
|
|
524
524
|
name = "contextMenu";
|
|
525
525
|
version = "1.0.0";
|
|
526
526
|
get defaultConfig() {
|
|
@@ -557,9 +557,9 @@ class yt extends C {
|
|
|
557
557
|
const t = e.children[0];
|
|
558
558
|
t && t.getAttribute("data-context-menu-bound") !== "true" && (t.setAttribute("data-context-menu-bound", "true"), t.addEventListener("contextmenu", (n) => {
|
|
559
559
|
if (!this.config.enabled) return;
|
|
560
|
-
const
|
|
561
|
-
|
|
562
|
-
const
|
|
560
|
+
const r = n;
|
|
561
|
+
r.preventDefault();
|
|
562
|
+
const o = r.target, s = o.closest("[data-row][data-col]"), l = o.closest(".header-cell");
|
|
563
563
|
let a;
|
|
564
564
|
if (s) {
|
|
565
565
|
const d = parseInt(s.getAttribute("data-row") ?? "-1", 10), u = parseInt(s.getAttribute("data-col") ?? "-1", 10), h = this.columns[u], f = this.rows[d];
|
|
@@ -571,7 +571,7 @@ class yt extends C {
|
|
|
571
571
|
field: h?.field ?? "",
|
|
572
572
|
value: f?.[h?.field] ?? null,
|
|
573
573
|
isHeader: !1,
|
|
574
|
-
event:
|
|
574
|
+
event: r
|
|
575
575
|
};
|
|
576
576
|
} else if (l) {
|
|
577
577
|
const d = parseInt(l.getAttribute("data-col") ?? "-1", 10), u = this.columns[d];
|
|
@@ -583,15 +583,15 @@ class yt extends C {
|
|
|
583
583
|
field: u?.field ?? "",
|
|
584
584
|
value: null,
|
|
585
585
|
isHeader: !0,
|
|
586
|
-
event:
|
|
586
|
+
event: r
|
|
587
587
|
};
|
|
588
588
|
} else
|
|
589
589
|
return;
|
|
590
|
-
this.params = a, this.position = { x:
|
|
590
|
+
this.params = a, this.position = { x: r.clientX, y: r.clientY };
|
|
591
591
|
const c = K(this.config.items ?? B, a);
|
|
592
592
|
c.length && (this.menuElement && this.menuElement.remove(), this.menuElement = V(c, a, (d) => {
|
|
593
593
|
d.action && d.action(a), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
|
|
594
|
-
}), document.body.appendChild(this.menuElement),
|
|
594
|
+
}), document.body.appendChild(this.menuElement), re(this.menuElement, r.clientX, r.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: c }));
|
|
595
595
|
}));
|
|
596
596
|
}
|
|
597
597
|
// ===== Public API =====
|
|
@@ -602,7 +602,7 @@ class yt extends C {
|
|
|
602
602
|
* @param params - Partial context menu parameters
|
|
603
603
|
*/
|
|
604
604
|
showMenu(e, t, n) {
|
|
605
|
-
const
|
|
605
|
+
const r = {
|
|
606
606
|
row: n.row ?? null,
|
|
607
607
|
rowIndex: n.rowIndex ?? -1,
|
|
608
608
|
column: n.column ?? null,
|
|
@@ -611,10 +611,10 @@ class yt extends C {
|
|
|
611
611
|
value: n.value ?? null,
|
|
612
612
|
isHeader: n.isHeader ?? !1,
|
|
613
613
|
event: n.event ?? new MouseEvent("contextmenu")
|
|
614
|
-
},
|
|
615
|
-
this.menuElement && this.menuElement.remove(), this.menuElement = V(
|
|
616
|
-
s.action && s.action(
|
|
617
|
-
}), document.body.appendChild(this.menuElement),
|
|
614
|
+
}, o = K(this.config.items ?? B, r);
|
|
615
|
+
this.menuElement && this.menuElement.remove(), this.menuElement = V(o, r, (s) => {
|
|
616
|
+
s.action && s.action(r), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
|
|
617
|
+
}), document.body.appendChild(this.menuElement), re(this.menuElement, e, t), this.isOpen = !0;
|
|
618
618
|
}
|
|
619
619
|
/**
|
|
620
620
|
* Hide the context menu.
|
|
@@ -631,7 +631,7 @@ class yt extends C {
|
|
|
631
631
|
}
|
|
632
632
|
// Styles are injected globally via installGlobalHandlers() since menu renders in document.body
|
|
633
633
|
}
|
|
634
|
-
function
|
|
634
|
+
function oe(i, e = !0) {
|
|
635
635
|
if (i == null) return "";
|
|
636
636
|
if (i instanceof Date) return i.toISOString();
|
|
637
637
|
if (typeof i == "object") return JSON.stringify(i);
|
|
@@ -640,23 +640,23 @@ function re(i, e = !0) {
|
|
|
640
640
|
`) || t.includes("\r")) ? `"${t.replace(/"/g, '""')}"` : t;
|
|
641
641
|
}
|
|
642
642
|
function Ee(i, e, t, n = {}) {
|
|
643
|
-
const
|
|
643
|
+
const r = n.delimiter ?? ",", o = n.newline ?? `
|
|
644
644
|
`, s = [], l = n.bom ? "\uFEFF" : "";
|
|
645
645
|
if (t.includeHeaders !== !1) {
|
|
646
646
|
const a = e.map((c) => {
|
|
647
647
|
const d = c.header || c.field, u = t.processHeader ? t.processHeader(d, c.field) : d;
|
|
648
|
-
return
|
|
648
|
+
return oe(u);
|
|
649
649
|
});
|
|
650
|
-
s.push(a.join(
|
|
650
|
+
s.push(a.join(r));
|
|
651
651
|
}
|
|
652
652
|
for (const a of i) {
|
|
653
653
|
const c = e.map((d) => {
|
|
654
654
|
let u = a[d.field];
|
|
655
|
-
return t.processCell && (u = t.processCell(u, d.field, a)),
|
|
655
|
+
return t.processCell && (u = t.processCell(u, d.field, a)), oe(u);
|
|
656
656
|
});
|
|
657
|
-
s.push(c.join(
|
|
657
|
+
s.push(c.join(r));
|
|
658
658
|
}
|
|
659
|
-
return l + s.join(
|
|
659
|
+
return l + s.join(o);
|
|
660
660
|
}
|
|
661
661
|
function z(i, e) {
|
|
662
662
|
const t = URL.createObjectURL(i), n = document.createElement("a");
|
|
@@ -679,18 +679,18 @@ function _e(i, e, t) {
|
|
|
679
679
|
if (t.includeHeaders !== !1) {
|
|
680
680
|
n += `
|
|
681
681
|
<Row>`;
|
|
682
|
-
for (const
|
|
683
|
-
const
|
|
682
|
+
for (const r of e) {
|
|
683
|
+
const o = r.header || r.field, s = t.processHeader ? t.processHeader(o, r.field) : o;
|
|
684
684
|
n += `<Cell><Data ss:Type="String">${ie(s)}</Data></Cell>`;
|
|
685
685
|
}
|
|
686
686
|
n += "</Row>";
|
|
687
687
|
}
|
|
688
|
-
for (const
|
|
688
|
+
for (const r of i) {
|
|
689
689
|
n += `
|
|
690
690
|
<Row>`;
|
|
691
|
-
for (const
|
|
692
|
-
let s = o
|
|
693
|
-
t.processCell && (s = t.processCell(s,
|
|
691
|
+
for (const o of e) {
|
|
692
|
+
let s = r[o.field];
|
|
693
|
+
t.processCell && (s = t.processCell(s, o.field, r));
|
|
694
694
|
let l = "String", a = "";
|
|
695
695
|
s == null ? a = "" : typeof s == "number" && !isNaN(s) ? (l = "Number", a = String(s)) : s instanceof Date ? (l = "DateTime", a = s.toISOString()) : a = ie(String(s)), n += `<Cell><Data ss:Type="${l}">${a}</Data></Cell>`;
|
|
696
696
|
}
|
|
@@ -707,7 +707,7 @@ function Ie(i, e) {
|
|
|
707
707
|
});
|
|
708
708
|
z(n, t);
|
|
709
709
|
}
|
|
710
|
-
class St extends
|
|
710
|
+
class St extends y {
|
|
711
711
|
name = "export";
|
|
712
712
|
version = "1.0.0";
|
|
713
713
|
get defaultConfig() {
|
|
@@ -724,7 +724,7 @@ class St extends C {
|
|
|
724
724
|
lastExportInfo = null;
|
|
725
725
|
// ===== Private Methods =====
|
|
726
726
|
performExport(e, t) {
|
|
727
|
-
const n = this.config,
|
|
727
|
+
const n = this.config, r = {
|
|
728
728
|
format: e,
|
|
729
729
|
fileName: t?.fileName ?? n.fileName ?? "export",
|
|
730
730
|
includeHeaders: t?.includeHeaders ?? n.includeHeaders,
|
|
@@ -733,10 +733,10 @@ class St extends C {
|
|
|
733
733
|
columns: t?.columns,
|
|
734
734
|
rowIndices: t?.rowIndices
|
|
735
735
|
};
|
|
736
|
-
let
|
|
737
|
-
if (n.onlyVisible && (
|
|
736
|
+
let o = [...this.columns];
|
|
737
|
+
if (n.onlyVisible && (o = o.filter((a) => !a.hidden && !a.field.startsWith("__"))), t?.columns) {
|
|
738
738
|
const a = new Set(t.columns);
|
|
739
|
-
|
|
739
|
+
o = o.filter((c) => a.has(c.field));
|
|
740
740
|
}
|
|
741
741
|
let s = [...this.rows];
|
|
742
742
|
if (n.onlySelected) {
|
|
@@ -744,25 +744,25 @@ class St extends C {
|
|
|
744
744
|
a?.selected?.size && (s = [...a.selected].sort((d, u) => d - u).map((d) => this.rows[d]).filter(Boolean));
|
|
745
745
|
}
|
|
746
746
|
t?.rowIndices && (s = t.rowIndices.map((a) => this.rows[a]).filter(Boolean)), this.isExportingFlag = !0;
|
|
747
|
-
let l =
|
|
747
|
+
let l = r.fileName;
|
|
748
748
|
try {
|
|
749
749
|
switch (e) {
|
|
750
750
|
case "csv": {
|
|
751
|
-
const a = Ee(s,
|
|
751
|
+
const a = Ee(s, o, r, { bom: !0 });
|
|
752
752
|
l = l.endsWith(".csv") ? l : `${l}.csv`, Ae(a, l);
|
|
753
753
|
break;
|
|
754
754
|
}
|
|
755
755
|
case "excel": {
|
|
756
|
-
const a = _e(s,
|
|
756
|
+
const a = _e(s, o, r);
|
|
757
757
|
l = l.endsWith(".xls") ? l : `${l}.xls`, Ie(a, l);
|
|
758
758
|
break;
|
|
759
759
|
}
|
|
760
760
|
case "json": {
|
|
761
761
|
const a = s.map((u) => {
|
|
762
762
|
const h = {};
|
|
763
|
-
for (const f of
|
|
763
|
+
for (const f of o) {
|
|
764
764
|
let g = u[f.field];
|
|
765
|
-
|
|
765
|
+
r.processCell && (g = r.processCell(g, f.field, u)), h[f.field] = g;
|
|
766
766
|
}
|
|
767
767
|
return h;
|
|
768
768
|
}), c = JSON.stringify(a, null, 2);
|
|
@@ -776,7 +776,7 @@ class St extends C {
|
|
|
776
776
|
format: e,
|
|
777
777
|
fileName: l,
|
|
778
778
|
rowCount: s.length,
|
|
779
|
-
columnCount:
|
|
779
|
+
columnCount: o.length
|
|
780
780
|
});
|
|
781
781
|
} finally {
|
|
782
782
|
this.isExportingFlag = !1;
|
|
@@ -827,15 +827,15 @@ class St extends C {
|
|
|
827
827
|
}
|
|
828
828
|
}
|
|
829
829
|
function Te(i) {
|
|
830
|
-
const { totalRows: e, viewportHeight: t, scrollTop: n, rowHeight:
|
|
831
|
-
let l = Math.floor(n /
|
|
830
|
+
const { totalRows: e, viewportHeight: t, scrollTop: n, rowHeight: r, overscan: o } = i, s = Math.ceil(t / r);
|
|
831
|
+
let l = Math.floor(n / r) - o;
|
|
832
832
|
l < 0 && (l = 0);
|
|
833
|
-
let a = l + s +
|
|
834
|
-
return a > e && (a = e), a === e && l > 0 && (l = Math.max(0, a - s -
|
|
833
|
+
let a = l + s + o * 2;
|
|
834
|
+
return a > e && (a = e), a === e && l > 0 && (l = Math.max(0, a - s - o * 2)), {
|
|
835
835
|
start: l,
|
|
836
836
|
end: a,
|
|
837
|
-
offsetY: l *
|
|
838
|
-
totalHeight: e *
|
|
837
|
+
offsetY: l * r,
|
|
838
|
+
totalHeight: e * r
|
|
839
839
|
};
|
|
840
840
|
}
|
|
841
841
|
function Le(i, e) {
|
|
@@ -848,21 +848,21 @@ function Me(i, e, t = !1) {
|
|
|
848
848
|
if (e.operator === "notBlank")
|
|
849
849
|
return n != null && n !== "";
|
|
850
850
|
if (n == null) return !1;
|
|
851
|
-
const
|
|
851
|
+
const r = String(n), o = t ? r : r.toLowerCase(), s = t ? String(e.value) : String(e.value).toLowerCase();
|
|
852
852
|
switch (e.operator) {
|
|
853
853
|
// Text operators
|
|
854
854
|
case "contains":
|
|
855
|
-
return
|
|
855
|
+
return o.includes(s);
|
|
856
856
|
case "notContains":
|
|
857
|
-
return !
|
|
857
|
+
return !o.includes(s);
|
|
858
858
|
case "equals":
|
|
859
|
-
return
|
|
859
|
+
return o === s;
|
|
860
860
|
case "notEquals":
|
|
861
|
-
return
|
|
861
|
+
return o !== s;
|
|
862
862
|
case "startsWith":
|
|
863
|
-
return
|
|
863
|
+
return o.startsWith(s);
|
|
864
864
|
case "endsWith":
|
|
865
|
-
return
|
|
865
|
+
return o.endsWith(s);
|
|
866
866
|
// Number/Date operators (use raw numeric values)
|
|
867
867
|
case "lessThan":
|
|
868
868
|
return Number(n) < Number(e.value);
|
|
@@ -884,7 +884,7 @@ function Me(i, e, t = !1) {
|
|
|
884
884
|
}
|
|
885
885
|
}
|
|
886
886
|
function qe(i, e, t = !1) {
|
|
887
|
-
return e.length ? i.filter((n) => e.every((
|
|
887
|
+
return e.length ? i.filter((n) => e.every((r) => Me(n, r, t))) : i;
|
|
888
888
|
}
|
|
889
889
|
function Fe(i) {
|
|
890
890
|
return JSON.stringify(
|
|
@@ -899,10 +899,10 @@ function Fe(i) {
|
|
|
899
899
|
function se(i, e) {
|
|
900
900
|
const t = /* @__PURE__ */ new Set();
|
|
901
901
|
for (const n of i) {
|
|
902
|
-
const
|
|
903
|
-
|
|
902
|
+
const r = n[e];
|
|
903
|
+
r != null && t.add(r);
|
|
904
904
|
}
|
|
905
|
-
return [...t].sort((n,
|
|
905
|
+
return [...t].sort((n, r) => typeof n == "number" && typeof r == "number" ? n - r : String(n).localeCompare(String(r)));
|
|
906
906
|
}
|
|
907
907
|
const Ne = `
|
|
908
908
|
.tbw-filter-panel {
|
|
@@ -1046,7 +1046,7 @@ const Ne = `
|
|
|
1046
1046
|
background: var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)));
|
|
1047
1047
|
}
|
|
1048
1048
|
`;
|
|
1049
|
-
class E extends
|
|
1049
|
+
class E extends y {
|
|
1050
1050
|
name = "filtering";
|
|
1051
1051
|
version = "1.0.0";
|
|
1052
1052
|
get defaultConfig() {
|
|
@@ -1087,23 +1087,23 @@ class E extends C {
|
|
|
1087
1087
|
const n = Fe(t);
|
|
1088
1088
|
if (this.cacheKey === n && this.cachedResult)
|
|
1089
1089
|
return this.cachedResult;
|
|
1090
|
-
const
|
|
1091
|
-
return this.cachedResult =
|
|
1090
|
+
const r = qe([...e], t, this.config.caseSensitive);
|
|
1091
|
+
return this.cachedResult = r, this.cacheKey = n, r;
|
|
1092
1092
|
}
|
|
1093
1093
|
afterRender() {
|
|
1094
1094
|
if (!this.config.enabled) return;
|
|
1095
1095
|
const e = this.shadowRoot;
|
|
1096
1096
|
if (!e) return;
|
|
1097
1097
|
e.querySelectorAll('[part~="header-cell"]').forEach((n) => {
|
|
1098
|
-
const
|
|
1099
|
-
if (
|
|
1100
|
-
const
|
|
1101
|
-
if (!
|
|
1102
|
-
const s =
|
|
1098
|
+
const r = n.getAttribute("data-col");
|
|
1099
|
+
if (r === null) return;
|
|
1100
|
+
const o = this.columns[parseInt(r, 10)];
|
|
1101
|
+
if (!o || o.filterable === !1 || n.querySelector(".tbw-filter-btn")) return;
|
|
1102
|
+
const s = o.field;
|
|
1103
1103
|
if (!s) return;
|
|
1104
1104
|
const l = document.createElement("button");
|
|
1105
|
-
l.className = "tbw-filter-btn", l.setAttribute("aria-label", `Filter ${
|
|
1106
|
-
a.stopPropagation(), this.toggleFilterPanel(s,
|
|
1105
|
+
l.className = "tbw-filter-btn", l.setAttribute("aria-label", `Filter ${o.header ?? s}`), l.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', this.filters.has(s) && (l.classList.add("active"), n.classList.add("filtered")), l.addEventListener("click", (a) => {
|
|
1106
|
+
a.stopPropagation(), this.toggleFilterPanel(s, o, l);
|
|
1107
1107
|
}), n.appendChild(l);
|
|
1108
1108
|
});
|
|
1109
1109
|
}
|
|
@@ -1214,15 +1214,15 @@ class E extends C {
|
|
|
1214
1214
|
return;
|
|
1215
1215
|
}
|
|
1216
1216
|
this.closeFilterPanel();
|
|
1217
|
-
const
|
|
1218
|
-
|
|
1219
|
-
const
|
|
1217
|
+
const r = document.createElement("div");
|
|
1218
|
+
r.className = "tbw-filter-panel", this.panelElement = r, this.openPanelField = e;
|
|
1219
|
+
const o = se(this.sourceRows, e);
|
|
1220
1220
|
let s = this.excludedValues.get(e);
|
|
1221
1221
|
s || (s = /* @__PURE__ */ new Set(), this.excludedValues.set(e, s));
|
|
1222
1222
|
const l = this.searchText.get(e) ?? "", a = {
|
|
1223
1223
|
field: e,
|
|
1224
1224
|
column: t,
|
|
1225
|
-
uniqueValues:
|
|
1225
|
+
uniqueValues: o,
|
|
1226
1226
|
excludedValues: s,
|
|
1227
1227
|
searchText: l,
|
|
1228
1228
|
applySetFilter: (u) => {
|
|
@@ -1237,9 +1237,9 @@ class E extends C {
|
|
|
1237
1237
|
closePanel: () => this.closeFilterPanel()
|
|
1238
1238
|
};
|
|
1239
1239
|
let c = !1;
|
|
1240
|
-
this.config.filterPanelRenderer && (this.config.filterPanelRenderer(
|
|
1240
|
+
this.config.filterPanelRenderer && (this.config.filterPanelRenderer(r, a), c = r.children.length > 0), c || this.renderDefaultFilterPanel(r, a, o, s), document.body.appendChild(r), this.positionPanel(r, n);
|
|
1241
1241
|
const d = (u) => {
|
|
1242
|
-
!
|
|
1242
|
+
!r.contains(u.target) && u.target !== n && this.closeFilterPanel();
|
|
1243
1243
|
};
|
|
1244
1244
|
this.documentClickHandler = d, setTimeout(() => {
|
|
1245
1245
|
document.addEventListener("click", d);
|
|
@@ -1263,18 +1263,18 @@ class E extends C {
|
|
|
1263
1263
|
positionPanel(e, t) {
|
|
1264
1264
|
const n = t.getBoundingClientRect();
|
|
1265
1265
|
e.style.position = "fixed", e.style.top = `${n.bottom + 4}px`, e.style.left = `${n.left}px`, requestAnimationFrame(() => {
|
|
1266
|
-
const
|
|
1267
|
-
|
|
1266
|
+
const r = e.getBoundingClientRect();
|
|
1267
|
+
r.right > window.innerWidth - 8 && (e.style.left = `${window.innerWidth - r.width - 8}px`), r.bottom > window.innerHeight - 8 && (e.style.top = `${n.top - r.height - 4}px`);
|
|
1268
1268
|
});
|
|
1269
1269
|
}
|
|
1270
1270
|
/**
|
|
1271
1271
|
* Render the default filter panel content
|
|
1272
1272
|
*/
|
|
1273
|
-
renderDefaultFilterPanel(e, t, n,
|
|
1274
|
-
const { field:
|
|
1273
|
+
renderDefaultFilterPanel(e, t, n, r) {
|
|
1274
|
+
const { field: o } = t, s = document.createElement("div");
|
|
1275
1275
|
s.className = "tbw-filter-search";
|
|
1276
1276
|
const l = document.createElement("input");
|
|
1277
|
-
l.type = "text", l.placeholder = "Search...", l.className = "tbw-filter-search-input", l.value = this.searchText.get(
|
|
1277
|
+
l.type = "text", l.placeholder = "Search...", l.className = "tbw-filter-search-input", l.value = this.searchText.get(o) ?? "", s.appendChild(l), e.appendChild(s);
|
|
1278
1278
|
const a = document.createElement("div");
|
|
1279
1279
|
a.className = "tbw-filter-actions";
|
|
1280
1280
|
const c = document.createElement("label");
|
|
@@ -1284,8 +1284,8 @@ class E extends C {
|
|
|
1284
1284
|
const u = document.createElement("span");
|
|
1285
1285
|
u.textContent = "Select All", c.appendChild(d), c.appendChild(u), a.appendChild(c);
|
|
1286
1286
|
const h = () => {
|
|
1287
|
-
const p = [...b.values()], v = p.every((x) => x),
|
|
1288
|
-
d.checked = v, d.indeterminate = !v && !
|
|
1287
|
+
const p = [...b.values()], v = p.every((x) => x), C = p.every((x) => !x);
|
|
1288
|
+
d.checked = v, d.indeterminate = !v && !C;
|
|
1289
1289
|
};
|
|
1290
1290
|
d.addEventListener("change", () => {
|
|
1291
1291
|
const p = d.checked;
|
|
@@ -1302,20 +1302,20 @@ class E extends C {
|
|
|
1302
1302
|
const b = /* @__PURE__ */ new Map();
|
|
1303
1303
|
n.forEach((p) => {
|
|
1304
1304
|
const v = p == null ? "__null__" : String(p);
|
|
1305
|
-
b.set(v, !
|
|
1305
|
+
b.set(v, !r.has(p));
|
|
1306
1306
|
}), h();
|
|
1307
1307
|
let S = [];
|
|
1308
1308
|
const R = (p, v) => {
|
|
1309
|
-
const
|
|
1309
|
+
const C = p == null ? "(Blank)" : String(p), x = p == null ? "__null__" : String(p), w = document.createElement("label");
|
|
1310
1310
|
w.className = "tbw-filter-value-item", w.style.position = "absolute", w.style.top = `${v * E.LIST_ITEM_HEIGHT}px`, w.style.left = "0", w.style.right = "0", w.style.height = `${E.LIST_ITEM_HEIGHT}px`, w.style.boxSizing = "border-box";
|
|
1311
1311
|
const k = document.createElement("input");
|
|
1312
1312
|
k.type = "checkbox", k.className = "tbw-filter-checkbox", k.checked = b.get(x) ?? !0, k.dataset.value = x, k.addEventListener("change", () => {
|
|
1313
1313
|
b.set(x, k.checked), h();
|
|
1314
1314
|
});
|
|
1315
1315
|
const Y = document.createElement("span");
|
|
1316
|
-
return Y.textContent =
|
|
1316
|
+
return Y.textContent = C, w.appendChild(k), w.appendChild(Y), w;
|
|
1317
1317
|
}, q = () => {
|
|
1318
|
-
const p = S.length, v = f.clientHeight,
|
|
1318
|
+
const p = S.length, v = f.clientHeight, C = f.scrollTop;
|
|
1319
1319
|
if (g.style.height = `${p * E.LIST_ITEM_HEIGHT}px`, Le(p, E.LIST_BYPASS_THRESHOLD / 3)) {
|
|
1320
1320
|
m.innerHTML = "", m.style.transform = "translateY(0px)", S.forEach((w, k) => {
|
|
1321
1321
|
m.appendChild(R(w, k));
|
|
@@ -1325,7 +1325,7 @@ class E extends C {
|
|
|
1325
1325
|
const x = Te({
|
|
1326
1326
|
totalRows: p,
|
|
1327
1327
|
viewportHeight: v,
|
|
1328
|
-
scrollTop:
|
|
1328
|
+
scrollTop: C,
|
|
1329
1329
|
rowHeight: E.LIST_ITEM_HEIGHT,
|
|
1330
1330
|
overscan: E.LIST_OVERSCAN
|
|
1331
1331
|
});
|
|
@@ -1334,13 +1334,13 @@ class E extends C {
|
|
|
1334
1334
|
m.appendChild(R(S[w], w - x.start));
|
|
1335
1335
|
}, j = (p) => {
|
|
1336
1336
|
const v = p.toLowerCase();
|
|
1337
|
-
if (S = n.filter((
|
|
1338
|
-
const x =
|
|
1337
|
+
if (S = n.filter((C) => {
|
|
1338
|
+
const x = C == null ? "(Blank)" : String(C);
|
|
1339
1339
|
return !p || x.toLowerCase().includes(v);
|
|
1340
1340
|
}), S.length === 0) {
|
|
1341
1341
|
g.style.height = "0px", m.innerHTML = "";
|
|
1342
|
-
const
|
|
1343
|
-
|
|
1342
|
+
const C = document.createElement("div");
|
|
1343
|
+
C.className = "tbw-filter-no-match", C.textContent = "No matching values", m.appendChild(C);
|
|
1344
1344
|
return;
|
|
1345
1345
|
}
|
|
1346
1346
|
q();
|
|
@@ -1355,7 +1355,7 @@ class E extends C {
|
|
|
1355
1355
|
let U;
|
|
1356
1356
|
l.addEventListener("input", () => {
|
|
1357
1357
|
clearTimeout(U), U = setTimeout(() => {
|
|
1358
|
-
this.searchText.set(
|
|
1358
|
+
this.searchText.set(o, l.value), j(l.value);
|
|
1359
1359
|
}, this.config.debounceMs ?? 150);
|
|
1360
1360
|
});
|
|
1361
1361
|
const I = document.createElement("div");
|
|
@@ -1363,8 +1363,8 @@ class E extends C {
|
|
|
1363
1363
|
const T = document.createElement("button");
|
|
1364
1364
|
T.className = "tbw-filter-apply-btn", T.textContent = "Apply", T.addEventListener("click", () => {
|
|
1365
1365
|
const p = [];
|
|
1366
|
-
for (const [v,
|
|
1367
|
-
if (!
|
|
1366
|
+
for (const [v, C] of b)
|
|
1367
|
+
if (!C)
|
|
1368
1368
|
if (v === "__null__")
|
|
1369
1369
|
p.push(null);
|
|
1370
1370
|
else {
|
|
@@ -1395,13 +1395,13 @@ class E extends C {
|
|
|
1395
1395
|
/**
|
|
1396
1396
|
* Apply a text filter
|
|
1397
1397
|
*/
|
|
1398
|
-
applyTextFilter(e, t, n,
|
|
1398
|
+
applyTextFilter(e, t, n, r) {
|
|
1399
1399
|
this.filters.set(e, {
|
|
1400
1400
|
field: e,
|
|
1401
1401
|
type: "text",
|
|
1402
1402
|
operator: t,
|
|
1403
1403
|
value: n,
|
|
1404
|
-
valueTo:
|
|
1404
|
+
valueTo: r
|
|
1405
1405
|
}), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
|
|
1406
1406
|
filters: [...this.filters.values()],
|
|
1407
1407
|
filteredRowCount: 0
|
|
@@ -1492,14 +1492,14 @@ function Pe(i) {
|
|
|
1492
1492
|
implicit: !0
|
|
1493
1493
|
});
|
|
1494
1494
|
};
|
|
1495
|
-
let
|
|
1495
|
+
let r = [], o = 0;
|
|
1496
1496
|
return i.forEach((s, l) => {
|
|
1497
1497
|
const a = s.group;
|
|
1498
1498
|
if (!a) {
|
|
1499
|
-
|
|
1499
|
+
r.length === 0 && (o = l), r.push(s);
|
|
1500
1500
|
return;
|
|
1501
1501
|
}
|
|
1502
|
-
|
|
1502
|
+
r.length && (n(o, r.slice()), r = []);
|
|
1503
1503
|
const c = typeof a == "string" ? a : a.id;
|
|
1504
1504
|
let d = e.get(c);
|
|
1505
1505
|
d || (d = {
|
|
@@ -1508,21 +1508,21 @@ function Pe(i) {
|
|
|
1508
1508
|
columns: [],
|
|
1509
1509
|
firstIndex: l
|
|
1510
1510
|
}, e.set(c, d), t.push(d)), d.columns.push(s);
|
|
1511
|
-
}),
|
|
1511
|
+
}), r.length && n(o, r), t.length === 1 && t[0].implicit && t[0].columns.length === i.length ? [] : t;
|
|
1512
1512
|
}
|
|
1513
1513
|
function De(i, e, t) {
|
|
1514
1514
|
if (!e.length || !i) return;
|
|
1515
1515
|
const n = /* @__PURE__ */ new Map();
|
|
1516
|
-
for (const
|
|
1517
|
-
for (const s of
|
|
1518
|
-
s?.field && n.set(s.field,
|
|
1519
|
-
const
|
|
1520
|
-
|
|
1521
|
-
const s =
|
|
1522
|
-
l && (
|
|
1516
|
+
for (const o of e)
|
|
1517
|
+
for (const s of o.columns)
|
|
1518
|
+
s?.field && n.set(s.field, o.id);
|
|
1519
|
+
const r = Array.from(i.querySelectorAll(".cell[data-field]"));
|
|
1520
|
+
r.forEach((o) => {
|
|
1521
|
+
const s = o.getAttribute("data-field") || "", l = n.get(s);
|
|
1522
|
+
l && (o.classList.add("grouped"), o.getAttribute("data-group") || o.setAttribute("data-group", l));
|
|
1523
1523
|
});
|
|
1524
|
-
for (const
|
|
1525
|
-
const s =
|
|
1524
|
+
for (const o of e) {
|
|
1525
|
+
const s = o.columns[o.columns.length - 1], l = r.find((a) => a.getAttribute("data-field") === s.field);
|
|
1526
1526
|
l && l.classList.add("group-end");
|
|
1527
1527
|
}
|
|
1528
1528
|
}
|
|
@@ -1531,15 +1531,15 @@ function Be(i, e) {
|
|
|
1531
1531
|
const t = document.createElement("div");
|
|
1532
1532
|
t.className = "header-group-row", t.setAttribute("role", "row");
|
|
1533
1533
|
for (const n of i) {
|
|
1534
|
-
const
|
|
1535
|
-
l.className = "cell header-group-cell",
|
|
1534
|
+
const r = n.firstIndex != null ? n.firstIndex : e.findIndex((a) => n.columns.includes(a)), o = String(n.id).startsWith("__implicit__"), s = o ? "" : n.label || n.id, l = document.createElement("div");
|
|
1535
|
+
l.className = "cell header-group-cell", o && l.classList.add("implicit-group"), l.setAttribute("data-group", String(n.id)), l.style.gridColumn = `${r + 1} / span ${n.columns.length}`, l.textContent = s, t.appendChild(l);
|
|
1536
1536
|
}
|
|
1537
1537
|
return t;
|
|
1538
1538
|
}
|
|
1539
1539
|
function He(i) {
|
|
1540
1540
|
return i.some((e) => e.group != null);
|
|
1541
1541
|
}
|
|
1542
|
-
class Rt extends
|
|
1542
|
+
class Rt extends y {
|
|
1543
1543
|
name = "groupingColumns";
|
|
1544
1544
|
version = "1.0.0";
|
|
1545
1545
|
get defaultConfig() {
|
|
@@ -1582,11 +1582,11 @@ class Rt extends C {
|
|
|
1582
1582
|
t && t.remove();
|
|
1583
1583
|
const n = Be(this.groups, this.columns);
|
|
1584
1584
|
if (n) {
|
|
1585
|
-
const
|
|
1586
|
-
|
|
1585
|
+
const o = e.querySelector(".header-row");
|
|
1586
|
+
o ? e.insertBefore(n, o) : e.appendChild(n);
|
|
1587
1587
|
}
|
|
1588
|
-
const
|
|
1589
|
-
|
|
1588
|
+
const r = e.querySelector(".header-row");
|
|
1589
|
+
r && De(r, this.groups, this.columns);
|
|
1590
1590
|
}
|
|
1591
1591
|
// ===== Public API =====
|
|
1592
1592
|
/**
|
|
@@ -1652,34 +1652,34 @@ function Oe({ rows: i, config: e, expanded: t }) {
|
|
|
1652
1652
|
const n = e.groupOn;
|
|
1653
1653
|
if (!e.enabled || typeof n != "function")
|
|
1654
1654
|
return [];
|
|
1655
|
-
const
|
|
1655
|
+
const r = { key: "__root__", value: null, depth: -1, rows: [], children: /* @__PURE__ */ new Map() };
|
|
1656
1656
|
if (i.forEach((l) => {
|
|
1657
1657
|
let a = n(l);
|
|
1658
1658
|
a == null || a === !1 ? a = ["__ungrouped__"] : Array.isArray(a) || (a = [a]);
|
|
1659
|
-
let c =
|
|
1659
|
+
let c = r;
|
|
1660
1660
|
a.forEach((d, u) => {
|
|
1661
1661
|
const h = d == null ? "∅" : String(d), f = c.key === "__root__" ? h : c.key + "||" + h;
|
|
1662
1662
|
let g = c.children.get(h);
|
|
1663
1663
|
g || (g = { key: f, value: d, depth: u, rows: [], children: /* @__PURE__ */ new Map(), parent: c }, c.children.set(h, g)), c = g;
|
|
1664
1664
|
}), c.rows.push(l);
|
|
1665
|
-
}),
|
|
1665
|
+
}), r.children.size === 1 && r.children.has("__ungrouped__") && r.children.get("__ungrouped__").rows.length === i.length)
|
|
1666
1666
|
return [];
|
|
1667
|
-
const
|
|
1668
|
-
if (l ===
|
|
1667
|
+
const o = [], s = (l) => {
|
|
1668
|
+
if (l === r) {
|
|
1669
1669
|
l.children.forEach((c) => s(c));
|
|
1670
1670
|
return;
|
|
1671
1671
|
}
|
|
1672
1672
|
const a = t.has(l.key);
|
|
1673
|
-
|
|
1673
|
+
o.push({
|
|
1674
1674
|
kind: "group",
|
|
1675
1675
|
key: l.key,
|
|
1676
1676
|
value: l.value,
|
|
1677
1677
|
depth: l.depth,
|
|
1678
1678
|
rows: l.rows,
|
|
1679
1679
|
expanded: a
|
|
1680
|
-
}), a && (l.children.size ? l.children.forEach((c) => s(c)) : l.rows.forEach((c) =>
|
|
1680
|
+
}), a && (l.children.size ? l.children.forEach((c) => s(c)) : l.rows.forEach((c) => o.push({ kind: "data", row: c, rowIndex: i.indexOf(c) })));
|
|
1681
1681
|
};
|
|
1682
|
-
return s(
|
|
1682
|
+
return s(r), o;
|
|
1683
1683
|
}
|
|
1684
1684
|
function We(i, e) {
|
|
1685
1685
|
const t = new Set(i);
|
|
@@ -1697,7 +1697,7 @@ function Ve() {
|
|
|
1697
1697
|
function Ge(i) {
|
|
1698
1698
|
return i.kind !== "group" ? 0 : i.rows.length;
|
|
1699
1699
|
}
|
|
1700
|
-
class kt extends
|
|
1700
|
+
class kt extends y {
|
|
1701
1701
|
name = "groupingRows";
|
|
1702
1702
|
version = "1.0.0";
|
|
1703
1703
|
get defaultConfig() {
|
|
@@ -1734,15 +1734,15 @@ class kt extends C {
|
|
|
1734
1734
|
config: t,
|
|
1735
1735
|
expanded: this.expandedKeys
|
|
1736
1736
|
});
|
|
1737
|
-
return n.length === 0 ? (this.isActive = !1, this.flattenedRows = [], [...e]) : (this.isActive = !0, this.flattenedRows = n, n.map((
|
|
1737
|
+
return n.length === 0 ? (this.isActive = !1, this.flattenedRows = [], [...e]) : (this.isActive = !0, this.flattenedRows = n, n.map((r) => r.kind === "group" ? {
|
|
1738
1738
|
__isGroupRow: !0,
|
|
1739
|
-
__groupKey:
|
|
1740
|
-
__groupValue:
|
|
1741
|
-
__groupDepth:
|
|
1742
|
-
__groupRows:
|
|
1743
|
-
__groupExpanded:
|
|
1744
|
-
__groupRowCount: Ge(
|
|
1745
|
-
} :
|
|
1739
|
+
__groupKey: r.key,
|
|
1740
|
+
__groupValue: r.value,
|
|
1741
|
+
__groupDepth: r.depth,
|
|
1742
|
+
__groupRows: r.rows,
|
|
1743
|
+
__groupExpanded: r.expanded,
|
|
1744
|
+
__groupRowCount: Ge(r)
|
|
1745
|
+
} : r.row));
|
|
1746
1746
|
}
|
|
1747
1747
|
onCellClick(e) {
|
|
1748
1748
|
const t = e.row;
|
|
@@ -1755,11 +1755,11 @@ class kt extends C {
|
|
|
1755
1755
|
renderRow(e, t, n) {
|
|
1756
1756
|
if (!e?.__isGroupRow)
|
|
1757
1757
|
return !1;
|
|
1758
|
-
const
|
|
1759
|
-
if (
|
|
1758
|
+
const r = this.config;
|
|
1759
|
+
if (r.groupRowRenderer) {
|
|
1760
1760
|
const l = () => {
|
|
1761
1761
|
this.toggle(e.__groupKey);
|
|
1762
|
-
}, a =
|
|
1762
|
+
}, a = r.groupRowRenderer({
|
|
1763
1763
|
key: e.__groupKey,
|
|
1764
1764
|
value: e.__groupValue,
|
|
1765
1765
|
depth: e.__groupDepth,
|
|
@@ -1770,32 +1770,32 @@ class kt extends C {
|
|
|
1770
1770
|
if (a)
|
|
1771
1771
|
return t.className = "group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), typeof a == "string" ? t.innerHTML = a : (t.innerHTML = "", t.appendChild(a)), !0;
|
|
1772
1772
|
}
|
|
1773
|
-
const
|
|
1773
|
+
const o = () => {
|
|
1774
1774
|
this.toggle(e.__groupKey);
|
|
1775
1775
|
};
|
|
1776
|
-
return t.className = "group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), t.setAttribute("role", "row"), t.setAttribute("aria-expanded", String(e.__groupExpanded)), t.style.paddingLeft = `${(e.__groupDepth || 0) * (
|
|
1776
|
+
return t.className = "group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), t.setAttribute("role", "row"), t.setAttribute("aria-expanded", String(e.__groupExpanded)), t.style.paddingLeft = `${(e.__groupDepth || 0) * (r.indentWidth ?? 20)}px`, t.innerHTML = "", r.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, o) : this.renderPerColumnGroupRow(e, t, o), !0;
|
|
1777
1777
|
}
|
|
1778
1778
|
afterRender() {
|
|
1779
1779
|
}
|
|
1780
1780
|
// ===== Private Rendering Helpers =====
|
|
1781
1781
|
renderFullWidthGroupRow(e, t, n) {
|
|
1782
|
-
const
|
|
1783
|
-
|
|
1782
|
+
const r = this.config, o = document.createElement("div");
|
|
1783
|
+
o.className = "cell group-full", o.style.gridColumn = "1 / -1", o.setAttribute("role", "gridcell");
|
|
1784
1784
|
const s = document.createElement("button");
|
|
1785
1785
|
s.type = "button", s.className = "group-toggle", s.setAttribute("aria-label", e.__groupExpanded ? "Collapse group" : "Expand group"), s.textContent = e.__groupExpanded ? "▾" : "▸", s.addEventListener("click", (c) => {
|
|
1786
1786
|
c.stopPropagation(), n();
|
|
1787
|
-
}),
|
|
1787
|
+
}), o.appendChild(s);
|
|
1788
1788
|
const l = document.createElement("span");
|
|
1789
1789
|
l.className = "group-label";
|
|
1790
|
-
const a =
|
|
1791
|
-
if (l.textContent = a,
|
|
1790
|
+
const a = r.formatLabel ? r.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
|
|
1791
|
+
if (l.textContent = a, o.appendChild(l), r.showRowCount !== !1) {
|
|
1792
1792
|
const c = document.createElement("span");
|
|
1793
|
-
c.className = "group-count", c.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`,
|
|
1793
|
+
c.className = "group-count", c.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, o.appendChild(c);
|
|
1794
1794
|
}
|
|
1795
|
-
t.appendChild(
|
|
1795
|
+
t.appendChild(o);
|
|
1796
1796
|
}
|
|
1797
1797
|
renderPerColumnGroupRow(e, t, n) {
|
|
1798
|
-
const
|
|
1798
|
+
const r = this.config, o = r.aggregators ?? {}, s = this.columns, l = e.__groupRows ?? [];
|
|
1799
1799
|
this.grid;
|
|
1800
1800
|
const c = this.shadowRoot?.querySelector(".body")?.style.gridTemplateColumns || "";
|
|
1801
1801
|
c && (t.style.display = "grid", t.style.gridTemplateColumns = c), s.forEach((d, u) => {
|
|
@@ -1805,20 +1805,20 @@ class kt extends C {
|
|
|
1805
1805
|
f.type = "button", f.className = "group-toggle", f.textContent = e.__groupExpanded ? "▾" : "▸", f.addEventListener("click", (b) => {
|
|
1806
1806
|
b.stopPropagation(), n();
|
|
1807
1807
|
}), h.appendChild(f);
|
|
1808
|
-
const g = document.createElement("span"), m =
|
|
1808
|
+
const g = document.createElement("span"), m = o[d.field];
|
|
1809
1809
|
if (m) {
|
|
1810
1810
|
const b = X(m, l, d.field, d);
|
|
1811
1811
|
g.textContent = b != null ? String(b) : String(e.__groupValue);
|
|
1812
1812
|
} else {
|
|
1813
|
-
const b =
|
|
1813
|
+
const b = r.formatLabel ? r.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
|
|
1814
1814
|
g.textContent = b;
|
|
1815
1815
|
}
|
|
1816
|
-
if (h.appendChild(g),
|
|
1816
|
+
if (h.appendChild(g), r.showRowCount !== !1) {
|
|
1817
1817
|
const b = document.createElement("span");
|
|
1818
1818
|
b.className = "group-count", b.textContent = ` (${l.length})`, h.appendChild(b);
|
|
1819
1819
|
}
|
|
1820
1820
|
} else {
|
|
1821
|
-
const f =
|
|
1821
|
+
const f = o[d.field];
|
|
1822
1822
|
if (f) {
|
|
1823
1823
|
const g = X(f, l, d.field, d);
|
|
1824
1824
|
h.textContent = g != null ? String(g) : "";
|
|
@@ -1992,14 +1992,14 @@ function je(i, e) {
|
|
|
1992
1992
|
return i.has(e);
|
|
1993
1993
|
}
|
|
1994
1994
|
function Ue(i, e, t, n) {
|
|
1995
|
-
const o = document.createElement("div");
|
|
1996
|
-
o.className = "master-detail-row", o.setAttribute("data-detail-for", String(e)), o.setAttribute("role", "row");
|
|
1997
1995
|
const r = document.createElement("div");
|
|
1998
|
-
r.className = "master-detail-
|
|
1996
|
+
r.className = "master-detail-row", r.setAttribute("data-detail-for", String(e)), r.setAttribute("role", "row");
|
|
1997
|
+
const o = document.createElement("div");
|
|
1998
|
+
o.className = "master-detail-cell", o.setAttribute("role", "cell"), o.style.gridColumn = `1 / ${n + 1}`;
|
|
1999
1999
|
const s = t(i, e);
|
|
2000
|
-
return typeof s == "string" ?
|
|
2000
|
+
return typeof s == "string" ? o.innerHTML = s : s instanceof HTMLElement && o.appendChild(s), r.appendChild(o), r;
|
|
2001
2001
|
}
|
|
2002
|
-
class Et extends
|
|
2002
|
+
class Et extends y {
|
|
2003
2003
|
name = "masterDetail";
|
|
2004
2004
|
version = "1.0.0";
|
|
2005
2005
|
get defaultConfig() {
|
|
@@ -2024,9 +2024,9 @@ class Et extends C {
|
|
|
2024
2024
|
return [...e];
|
|
2025
2025
|
const t = [...e];
|
|
2026
2026
|
if (t.length > 0) {
|
|
2027
|
-
const n = { ...t[0] },
|
|
2028
|
-
n.viewRenderer = (
|
|
2029
|
-
const { value: s, row: l } =
|
|
2027
|
+
const n = { ...t[0] }, r = n.viewRenderer;
|
|
2028
|
+
n.viewRenderer = (o) => {
|
|
2029
|
+
const { value: s, row: l } = o, a = this.expandedRows.has(l), c = document.createElement("span");
|
|
2030
2030
|
c.className = "master-detail-cell-wrapper";
|
|
2031
2031
|
const d = document.createElement("span");
|
|
2032
2032
|
d.className = "master-detail-toggle", d.textContent = a ? "▼" : "▶", d.setAttribute("aria-expanded", String(a)), d.setAttribute("aria-label", a ? "Collapse details" : "Expand details"), d.addEventListener("click", (h) => {
|
|
@@ -2039,8 +2039,8 @@ class Et extends C {
|
|
|
2039
2039
|
}), this.requestRender();
|
|
2040
2040
|
}), c.appendChild(d);
|
|
2041
2041
|
const u = document.createElement("span");
|
|
2042
|
-
if (
|
|
2043
|
-
const h = o
|
|
2042
|
+
if (r) {
|
|
2043
|
+
const h = r(o);
|
|
2044
2044
|
h instanceof Node ? u.appendChild(h) : u.textContent = String(h ?? s ?? "");
|
|
2045
2045
|
} else
|
|
2046
2046
|
u.textContent = String(s ?? "");
|
|
@@ -2061,15 +2061,15 @@ class Et extends C {
|
|
|
2061
2061
|
if (!this.config.detailRenderer) return;
|
|
2062
2062
|
const e = this.shadowRoot?.querySelector(".rows");
|
|
2063
2063
|
if (!e) return;
|
|
2064
|
-
e.querySelectorAll(".master-detail-row").forEach((
|
|
2064
|
+
e.querySelectorAll(".master-detail-row").forEach((r) => r.remove()), this.detailElements.clear();
|
|
2065
2065
|
const t = e.querySelectorAll(".data-grid-row"), n = this.columns.length;
|
|
2066
|
-
for (const
|
|
2067
|
-
const
|
|
2066
|
+
for (const r of t) {
|
|
2067
|
+
const o = r.querySelector(".cell[data-row]"), s = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1;
|
|
2068
2068
|
if (s < 0) continue;
|
|
2069
2069
|
const l = this.rows[s];
|
|
2070
2070
|
if (!l || !this.expandedRows.has(l)) continue;
|
|
2071
2071
|
const a = Ue(l, s, this.config.detailRenderer, n);
|
|
2072
|
-
typeof this.config.detailHeight == "number" && (a.style.height = `${this.config.detailHeight}px`),
|
|
2072
|
+
typeof this.config.detailHeight == "number" && (a.style.height = `${this.config.detailHeight}px`), r.appendChild(a), this.detailElements.set(l, a);
|
|
2073
2073
|
}
|
|
2074
2074
|
}
|
|
2075
2075
|
// ===== Public API =====
|
|
@@ -2170,11 +2170,11 @@ class Et extends C {
|
|
|
2170
2170
|
`;
|
|
2171
2171
|
}
|
|
2172
2172
|
function Ye(i, e, t) {
|
|
2173
|
-
return e.length ? [...i].sort((n,
|
|
2174
|
-
for (const
|
|
2175
|
-
const l = t.find((u) => u.field ===
|
|
2173
|
+
return e.length ? [...i].sort((n, r) => {
|
|
2174
|
+
for (const o of e) {
|
|
2175
|
+
const l = t.find((u) => u.field === o.field)?.sortComparator ?? Xe, a = n[o.field], c = r[o.field], d = l(a, c, n, r);
|
|
2176
2176
|
if (d !== 0)
|
|
2177
|
-
return
|
|
2177
|
+
return o.direction === "asc" ? d : -d;
|
|
2178
2178
|
}
|
|
2179
2179
|
return 0;
|
|
2180
2180
|
}) : [...i];
|
|
@@ -2183,8 +2183,8 @@ function Xe(i, e) {
|
|
|
2183
2183
|
return i == null && e == null ? 0 : i == null ? 1 : e == null ? -1 : typeof i == "number" && typeof e == "number" ? i - e : i instanceof Date && e instanceof Date ? i.getTime() - e.getTime() : typeof i == "boolean" && typeof e == "boolean" ? i === e ? 0 : i ? -1 : 1 : String(i).localeCompare(String(e));
|
|
2184
2184
|
}
|
|
2185
2185
|
function Je(i, e, t, n) {
|
|
2186
|
-
const
|
|
2187
|
-
return t ?
|
|
2186
|
+
const r = i.find((o) => o.field === e);
|
|
2187
|
+
return t ? r ? r.direction === "asc" ? i.map((o) => o.field === e ? { ...o, direction: "desc" } : o) : i.filter((o) => o.field !== e) : i.length < n ? [...i, { field: e, direction: "asc" }] : i : r?.direction === "asc" ? [{ field: e, direction: "desc" }] : r?.direction === "desc" ? [] : [{ field: e, direction: "asc" }];
|
|
2188
2188
|
}
|
|
2189
2189
|
function le(i, e) {
|
|
2190
2190
|
const t = i.findIndex((n) => n.field === e);
|
|
@@ -2193,7 +2193,7 @@ function le(i, e) {
|
|
|
2193
2193
|
function ae(i, e) {
|
|
2194
2194
|
return i.find((t) => t.field === e)?.direction;
|
|
2195
2195
|
}
|
|
2196
|
-
class At extends
|
|
2196
|
+
class At extends y {
|
|
2197
2197
|
name = "multiSort";
|
|
2198
2198
|
version = "1.0.0";
|
|
2199
2199
|
get defaultConfig() {
|
|
@@ -2214,27 +2214,27 @@ class At extends C {
|
|
|
2214
2214
|
return this.sortModel.length === 0 ? [...e] : Ye([...e], this.sortModel, [...this.columns]);
|
|
2215
2215
|
}
|
|
2216
2216
|
onHeaderClick(e) {
|
|
2217
|
-
if (!this.columns.find((
|
|
2218
|
-
const n = e.originalEvent.shiftKey,
|
|
2219
|
-
return this.sortModel = Je(this.sortModel, e.field, n,
|
|
2217
|
+
if (!this.columns.find((o) => o.field === e.field)?.sortable) return !1;
|
|
2218
|
+
const n = e.originalEvent.shiftKey, r = this.config.maxSortColumns ?? 3;
|
|
2219
|
+
return this.sortModel = Je(this.sortModel, e.field, n, r), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
|
|
2220
2220
|
}
|
|
2221
2221
|
afterRender() {
|
|
2222
2222
|
const e = this.shadowRoot;
|
|
2223
2223
|
if (!e) return;
|
|
2224
2224
|
const t = this.config.showSortIndex !== !1;
|
|
2225
|
-
e.querySelectorAll(".header-row .cell[data-field]").forEach((
|
|
2226
|
-
const
|
|
2227
|
-
if (!
|
|
2228
|
-
const s = le(this.sortModel,
|
|
2229
|
-
if (
|
|
2230
|
-
|
|
2225
|
+
e.querySelectorAll(".header-row .cell[data-field]").forEach((r) => {
|
|
2226
|
+
const o = r.getAttribute("data-field");
|
|
2227
|
+
if (!o) return;
|
|
2228
|
+
const s = le(this.sortModel, o), l = ae(this.sortModel, o);
|
|
2229
|
+
if (r.querySelector(".sort-index")?.remove(), l) {
|
|
2230
|
+
r.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), r.setAttribute("data-sort", l);
|
|
2231
2231
|
const d = document.createElement("span");
|
|
2232
|
-
if (d.className = "sort-indicator", d.style.marginLeft = "4px", d.style.opacity = "0.8", d.textContent = l === "asc" ? "▲" : "▼",
|
|
2232
|
+
if (d.className = "sort-indicator", d.style.marginLeft = "4px", d.style.opacity = "0.8", d.textContent = l === "asc" ? "▲" : "▼", r.appendChild(d), t && this.sortModel.length > 1 && s !== void 0) {
|
|
2233
2233
|
const u = document.createElement("span");
|
|
2234
|
-
u.className = "sort-index", u.textContent = String(s),
|
|
2234
|
+
u.className = "sort-index", u.textContent = String(s), r.appendChild(u);
|
|
2235
2235
|
}
|
|
2236
2236
|
} else
|
|
2237
|
-
|
|
2237
|
+
r.removeAttribute("data-sort");
|
|
2238
2238
|
});
|
|
2239
2239
|
}
|
|
2240
2240
|
// ===== Public API =====
|
|
@@ -2279,7 +2279,7 @@ class At extends C {
|
|
|
2279
2279
|
* Return sort state for a column if it's in the sort model.
|
|
2280
2280
|
*/
|
|
2281
2281
|
getColumnState(e) {
|
|
2282
|
-
const t = this.sortModel.findIndex((
|
|
2282
|
+
const t = this.sortModel.findIndex((r) => r.field === e);
|
|
2283
2283
|
return t === -1 ? void 0 : {
|
|
2284
2284
|
sort: {
|
|
2285
2285
|
direction: this.sortModel[t].direction,
|
|
@@ -2293,14 +2293,14 @@ class At extends C {
|
|
|
2293
2293
|
*/
|
|
2294
2294
|
applyColumnState(e, t) {
|
|
2295
2295
|
if (!t.sort) {
|
|
2296
|
-
this.sortModel = this.sortModel.filter((
|
|
2296
|
+
this.sortModel = this.sortModel.filter((o) => o.field !== e);
|
|
2297
2297
|
return;
|
|
2298
2298
|
}
|
|
2299
|
-
const n = this.sortModel.findIndex((
|
|
2299
|
+
const n = this.sortModel.findIndex((o) => o.field === e), r = {
|
|
2300
2300
|
field: e,
|
|
2301
2301
|
direction: t.sort.direction
|
|
2302
2302
|
};
|
|
2303
|
-
n !== -1 ? this.sortModel[n] =
|
|
2303
|
+
n !== -1 ? this.sortModel[n] = r : this.sortModel.splice(t.sort.priority, 0, r);
|
|
2304
2304
|
}
|
|
2305
2305
|
// ===== Styles =====
|
|
2306
2306
|
styles = `
|
|
@@ -2343,22 +2343,22 @@ function de(i, e) {
|
|
|
2343
2343
|
if (!t) return;
|
|
2344
2344
|
const n = Array.from(t.querySelectorAll(".header-row .cell"));
|
|
2345
2345
|
if (!n.length) return;
|
|
2346
|
-
const
|
|
2346
|
+
const r = /* @__PURE__ */ new Map();
|
|
2347
2347
|
e.forEach((l, a) => {
|
|
2348
|
-
l.field &&
|
|
2348
|
+
l.field && r.set(l.field, a);
|
|
2349
2349
|
});
|
|
2350
|
-
let
|
|
2350
|
+
let o = 0;
|
|
2351
2351
|
for (const l of e)
|
|
2352
2352
|
if (l.sticky === "left") {
|
|
2353
|
-
const a =
|
|
2354
|
-
c && (c.classList.add("sticky-left"), c.style.left =
|
|
2355
|
-
d.classList.add("sticky-left"), d.style.left =
|
|
2356
|
-
}),
|
|
2353
|
+
const a = r.get(l.field), c = n.find((d) => d.getAttribute("data-field") === l.field);
|
|
2354
|
+
c && (c.classList.add("sticky-left"), c.style.left = o + "px", a !== void 0 && t.querySelectorAll(`.data-grid-row .cell[data-col="${a}"]`).forEach((d) => {
|
|
2355
|
+
d.classList.add("sticky-left"), d.style.left = o + "px";
|
|
2356
|
+
}), o += c.offsetWidth);
|
|
2357
2357
|
}
|
|
2358
2358
|
let s = 0;
|
|
2359
2359
|
for (const l of [...e].reverse())
|
|
2360
2360
|
if (l.sticky === "right") {
|
|
2361
|
-
const a =
|
|
2361
|
+
const a = r.get(l.field), c = n.find((d) => d.getAttribute("data-field") === l.field);
|
|
2362
2362
|
c && (c.classList.add("sticky-right"), c.style.right = s + "px", a !== void 0 && t.querySelectorAll(`.data-grid-row .cell[data-col="${a}"]`).forEach((d) => {
|
|
2363
2363
|
d.classList.add("sticky-right"), d.style.right = s + "px";
|
|
2364
2364
|
}), s += c.offsetWidth);
|
|
@@ -2371,7 +2371,7 @@ function ce(i) {
|
|
|
2371
2371
|
n.classList.remove("sticky-left", "sticky-right"), n.style.left = "", n.style.right = "";
|
|
2372
2372
|
});
|
|
2373
2373
|
}
|
|
2374
|
-
class _t extends
|
|
2374
|
+
class _t extends y {
|
|
2375
2375
|
name = "pinnedColumns";
|
|
2376
2376
|
version = "1.0.0";
|
|
2377
2377
|
get defaultConfig() {
|
|
@@ -2445,10 +2445,10 @@ function W(i, e) {
|
|
|
2445
2445
|
t.className = "tbw-pinned-rows", t.setAttribute("role", "status"), t.setAttribute("aria-live", "polite");
|
|
2446
2446
|
const n = document.createElement("div");
|
|
2447
2447
|
n.className = "tbw-pinned-rows-left";
|
|
2448
|
-
const o = document.createElement("div");
|
|
2449
|
-
o.className = "tbw-pinned-rows-center";
|
|
2450
2448
|
const r = document.createElement("div");
|
|
2451
|
-
|
|
2449
|
+
r.className = "tbw-pinned-rows-center";
|
|
2450
|
+
const o = document.createElement("div");
|
|
2451
|
+
if (o.className = "tbw-pinned-rows-right", i.showRowCount !== !1) {
|
|
2452
2452
|
const s = document.createElement("span");
|
|
2453
2453
|
s.className = "tbw-status-panel tbw-status-panel-row-count", s.textContent = `Total: ${e.totalRows} rows`, n.appendChild(s);
|
|
2454
2454
|
}
|
|
@@ -2458,7 +2458,7 @@ function W(i, e) {
|
|
|
2458
2458
|
}
|
|
2459
2459
|
if (i.showSelectedCount && e.selectedRows > 0) {
|
|
2460
2460
|
const s = document.createElement("span");
|
|
2461
|
-
s.className = "tbw-status-panel tbw-status-panel-selected-count", s.textContent = `Selected: ${e.selectedRows}`,
|
|
2461
|
+
s.className = "tbw-status-panel tbw-status-panel-selected-count", s.textContent = `Selected: ${e.selectedRows}`, o.appendChild(s);
|
|
2462
2462
|
}
|
|
2463
2463
|
if (i.customPanels)
|
|
2464
2464
|
for (const s of i.customPanels) {
|
|
@@ -2468,14 +2468,14 @@ function W(i, e) {
|
|
|
2468
2468
|
n.appendChild(l);
|
|
2469
2469
|
break;
|
|
2470
2470
|
case "center":
|
|
2471
|
-
|
|
2471
|
+
r.appendChild(l);
|
|
2472
2472
|
break;
|
|
2473
2473
|
case "right":
|
|
2474
|
-
|
|
2474
|
+
o.appendChild(l);
|
|
2475
2475
|
break;
|
|
2476
2476
|
}
|
|
2477
2477
|
}
|
|
2478
|
-
return t.appendChild(n), t.appendChild(
|
|
2478
|
+
return t.appendChild(n), t.appendChild(r), t.appendChild(o), t;
|
|
2479
2479
|
}
|
|
2480
2480
|
function ue(i) {
|
|
2481
2481
|
const e = document.createElement("div");
|
|
@@ -2483,27 +2483,27 @@ function ue(i) {
|
|
|
2483
2483
|
}
|
|
2484
2484
|
function he(i, e, t, n) {
|
|
2485
2485
|
i.innerHTML = "";
|
|
2486
|
-
for (const
|
|
2487
|
-
const
|
|
2488
|
-
if (
|
|
2486
|
+
for (const r of e) {
|
|
2487
|
+
const o = document.createElement("div");
|
|
2488
|
+
if (o.className = "tbw-aggregation-row", o.setAttribute("role", "row"), r.id && o.setAttribute("data-aggregation-id", r.id), r.fullWidth) {
|
|
2489
2489
|
const s = document.createElement("div");
|
|
2490
|
-
s.className = "tbw-aggregation-cell tbw-aggregation-cell-full", s.style.gridColumn = "1 / -1", s.textContent =
|
|
2490
|
+
s.className = "tbw-aggregation-cell tbw-aggregation-cell-full", s.style.gridColumn = "1 / -1", s.textContent = r.label || "", o.appendChild(s);
|
|
2491
2491
|
} else
|
|
2492
2492
|
for (const s of t) {
|
|
2493
2493
|
const l = document.createElement("div");
|
|
2494
2494
|
l.className = "tbw-aggregation-cell", l.setAttribute("data-field", s.field);
|
|
2495
2495
|
let a;
|
|
2496
|
-
const c =
|
|
2496
|
+
const c = r.aggregators?.[s.field];
|
|
2497
2497
|
if (c) {
|
|
2498
2498
|
const d = xe(c);
|
|
2499
2499
|
d && (a = d(n, s.field, s));
|
|
2500
|
-
} else if (
|
|
2501
|
-
const d =
|
|
2500
|
+
} else if (r.cells && Object.prototype.hasOwnProperty.call(r.cells, s.field)) {
|
|
2501
|
+
const d = r.cells[s.field];
|
|
2502
2502
|
typeof d == "function" ? a = d(n, s.field, s) : a = d;
|
|
2503
2503
|
}
|
|
2504
|
-
l.textContent = a != null ? String(a) : "",
|
|
2504
|
+
l.textContent = a != null ? String(a) : "", o.appendChild(l);
|
|
2505
2505
|
}
|
|
2506
|
-
i.appendChild(
|
|
2506
|
+
i.appendChild(o);
|
|
2507
2507
|
}
|
|
2508
2508
|
}
|
|
2509
2509
|
function et(i, e) {
|
|
@@ -2512,17 +2512,17 @@ function et(i, e) {
|
|
|
2512
2512
|
const n = i.render(e);
|
|
2513
2513
|
return typeof n == "string" ? t.innerHTML = n : t.appendChild(n), t;
|
|
2514
2514
|
}
|
|
2515
|
-
function fe(i, e, t, n,
|
|
2515
|
+
function fe(i, e, t, n, r) {
|
|
2516
2516
|
return {
|
|
2517
2517
|
totalRows: i.length,
|
|
2518
|
-
filteredRows:
|
|
2518
|
+
filteredRows: r?.cachedResult?.length ?? i.length,
|
|
2519
2519
|
selectedRows: n?.selected?.size ?? 0,
|
|
2520
2520
|
columns: e,
|
|
2521
2521
|
rows: i,
|
|
2522
2522
|
grid: t
|
|
2523
2523
|
};
|
|
2524
2524
|
}
|
|
2525
|
-
class It extends
|
|
2525
|
+
class It extends y {
|
|
2526
2526
|
name = "pinnedRows";
|
|
2527
2527
|
version = "1.0.0";
|
|
2528
2528
|
get defaultConfig() {
|
|
@@ -2553,12 +2553,12 @@ class It extends C {
|
|
|
2553
2553
|
if (!e) return;
|
|
2554
2554
|
const t = e.querySelector(".tbw-scroll-area") ?? e.querySelector(".tbw-grid-content") ?? e.children[0];
|
|
2555
2555
|
if (!t) return;
|
|
2556
|
-
const n = this.getSelectionState(),
|
|
2556
|
+
const n = this.getSelectionState(), r = this.getFilterState(), o = fe(
|
|
2557
2557
|
this.rows,
|
|
2558
2558
|
this.columns,
|
|
2559
2559
|
this.grid,
|
|
2560
2560
|
n,
|
|
2561
|
-
|
|
2561
|
+
r
|
|
2562
2562
|
), s = this.config.aggregationRows || [], l = s.filter((h) => h.position === "top"), a = s.filter((h) => h.position !== "top");
|
|
2563
2563
|
if (l.length > 0) {
|
|
2564
2564
|
if (!this.topAggregationContainer) {
|
|
@@ -2573,12 +2573,12 @@ class It extends C {
|
|
|
2573
2573
|
this.rows
|
|
2574
2574
|
);
|
|
2575
2575
|
} else this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null);
|
|
2576
|
-
const c = this.config.showRowCount !== !1 || this.config.showSelectedCount &&
|
|
2576
|
+
const c = this.config.showRowCount !== !1 || this.config.showSelectedCount && o.selectedRows > 0 || this.config.showFilteredCount && o.filteredRows !== o.totalRows || this.config.customPanels && this.config.customPanels.length > 0, d = c && this.config.position !== "top", u = a.length > 0 || d;
|
|
2577
2577
|
if (c && this.config.position === "top")
|
|
2578
2578
|
if (!this.infoBarElement)
|
|
2579
|
-
this.infoBarElement = W(this.config,
|
|
2579
|
+
this.infoBarElement = W(this.config, o), t.insertBefore(this.infoBarElement, t.firstChild);
|
|
2580
2580
|
else {
|
|
2581
|
-
const h = W(this.config,
|
|
2581
|
+
const h = W(this.config, o);
|
|
2582
2582
|
this.infoBarElement.replaceWith(h), this.infoBarElement = h;
|
|
2583
2583
|
}
|
|
2584
2584
|
else this.config.position === "top" && this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null);
|
|
@@ -2587,7 +2587,7 @@ class It extends C {
|
|
|
2587
2587
|
a,
|
|
2588
2588
|
this.visibleColumns,
|
|
2589
2589
|
this.rows
|
|
2590
|
-
)), d && (this.infoBarElement = W(this.config,
|
|
2590
|
+
)), d && (this.infoBarElement = W(this.config, o), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
|
|
2591
2591
|
}
|
|
2592
2592
|
// ===== Private Methods =====
|
|
2593
2593
|
cleanup() {
|
|
@@ -2760,36 +2760,36 @@ function nt(i) {
|
|
|
2760
2760
|
function $(i, e) {
|
|
2761
2761
|
return [...i, e].join("|");
|
|
2762
2762
|
}
|
|
2763
|
-
function
|
|
2764
|
-
const t = e.rowGroupFields ?? [], n = e.columnGroupFields ?? [],
|
|
2763
|
+
function rt(i, e) {
|
|
2764
|
+
const t = e.rowGroupFields ?? [], n = e.columnGroupFields ?? [], r = e.valueFields ?? [], o = ot(i, n), s = it(i, t), l = st(s, n, o, r, 0), a = lt(l, o, r), c = Object.values(a).reduce((d, u) => d + u, 0);
|
|
2765
2765
|
return {
|
|
2766
2766
|
rows: l,
|
|
2767
|
-
columnKeys:
|
|
2767
|
+
columnKeys: o,
|
|
2768
2768
|
totals: a,
|
|
2769
2769
|
grandTotal: c
|
|
2770
2770
|
};
|
|
2771
2771
|
}
|
|
2772
|
-
function
|
|
2772
|
+
function ot(i, e) {
|
|
2773
2773
|
if (e.length === 0) return ["value"];
|
|
2774
2774
|
const t = /* @__PURE__ */ new Set();
|
|
2775
2775
|
for (const n of i) {
|
|
2776
|
-
const
|
|
2777
|
-
t.add(
|
|
2776
|
+
const r = e.map((o) => String(n[o] ?? "")).join("|");
|
|
2777
|
+
t.add(r);
|
|
2778
2778
|
}
|
|
2779
2779
|
return [...t].sort();
|
|
2780
2780
|
}
|
|
2781
2781
|
function it(i, e) {
|
|
2782
2782
|
const t = /* @__PURE__ */ new Map();
|
|
2783
2783
|
for (const n of i) {
|
|
2784
|
-
const
|
|
2785
|
-
t.has(
|
|
2786
|
-
const
|
|
2787
|
-
|
|
2784
|
+
const r = e.map((s) => String(n[s] ?? "")).join("|");
|
|
2785
|
+
t.has(r) || t.set(r, []);
|
|
2786
|
+
const o = t.get(r);
|
|
2787
|
+
o && o.push(n);
|
|
2788
2788
|
}
|
|
2789
2789
|
return t;
|
|
2790
2790
|
}
|
|
2791
|
-
function st(i, e, t, n,
|
|
2792
|
-
const
|
|
2791
|
+
function st(i, e, t, n, r) {
|
|
2792
|
+
const o = [];
|
|
2793
2793
|
for (const [s, l] of i) {
|
|
2794
2794
|
const a = {};
|
|
2795
2795
|
let c = 0;
|
|
@@ -2798,22 +2798,22 @@ function st(i, e, t, n, o) {
|
|
|
2798
2798
|
const f = (e.length > 0 ? l.filter((S) => e.map((R) => String(S[R] ?? "")).join("|") === d) : l).map((S) => Number(S[u.field]) || 0), g = nt(u.aggFunc), m = f.length > 0 ? g(f) : null, b = $([d], u.field);
|
|
2799
2799
|
a[b] = m, m !== null && (c += m);
|
|
2800
2800
|
}
|
|
2801
|
-
|
|
2801
|
+
o.push({
|
|
2802
2802
|
rowKey: s,
|
|
2803
2803
|
rowLabel: s || "(blank)",
|
|
2804
|
-
depth:
|
|
2804
|
+
depth: r,
|
|
2805
2805
|
values: a,
|
|
2806
2806
|
total: c,
|
|
2807
2807
|
isGroup: !1
|
|
2808
2808
|
});
|
|
2809
2809
|
}
|
|
2810
|
-
return
|
|
2810
|
+
return o;
|
|
2811
2811
|
}
|
|
2812
2812
|
function lt(i, e, t) {
|
|
2813
2813
|
const n = {};
|
|
2814
|
-
for (const
|
|
2815
|
-
for (const
|
|
2816
|
-
const s = $([
|
|
2814
|
+
for (const r of e)
|
|
2815
|
+
for (const o of t) {
|
|
2816
|
+
const s = $([r], o.field);
|
|
2817
2817
|
n[s] = i.reduce((l, a) => l + (a.values[s] ?? 0), 0);
|
|
2818
2818
|
}
|
|
2819
2819
|
return n;
|
|
@@ -2822,14 +2822,14 @@ function at(i) {
|
|
|
2822
2822
|
const e = [];
|
|
2823
2823
|
function t(n) {
|
|
2824
2824
|
if (e.push(n), n.children)
|
|
2825
|
-
for (const
|
|
2826
|
-
t(
|
|
2825
|
+
for (const r of n.children)
|
|
2826
|
+
t(r);
|
|
2827
2827
|
}
|
|
2828
2828
|
for (const n of i)
|
|
2829
2829
|
t(n);
|
|
2830
2830
|
return e;
|
|
2831
2831
|
}
|
|
2832
|
-
class Tt extends
|
|
2832
|
+
class Tt extends y {
|
|
2833
2833
|
name = "pivot";
|
|
2834
2834
|
version = "1.0.0";
|
|
2835
2835
|
get defaultConfig() {
|
|
@@ -2853,7 +2853,7 @@ class Tt extends C {
|
|
|
2853
2853
|
if (!this.config.enabled || !this.isActive)
|
|
2854
2854
|
return [...e];
|
|
2855
2855
|
const t = tt(this.config);
|
|
2856
|
-
return t.length > 0 ? (this.warn(`Config errors: ${t.join(", ")}`), [...e]) : (this.pivotResult =
|
|
2856
|
+
return t.length > 0 ? (this.warn(`Config errors: ${t.join(", ")}`), [...e]) : (this.pivotResult = rt(e, this.config), at(this.pivotResult.rows).map((n) => ({
|
|
2857
2857
|
__pivotRowKey: n.rowKey,
|
|
2858
2858
|
__pivotLabel: n.rowLabel,
|
|
2859
2859
|
__pivotDepth: n.depth,
|
|
@@ -2872,11 +2872,11 @@ class Tt extends C {
|
|
|
2872
2872
|
width: 200
|
|
2873
2873
|
});
|
|
2874
2874
|
for (const n of this.pivotResult.columnKeys)
|
|
2875
|
-
for (const
|
|
2876
|
-
const
|
|
2875
|
+
for (const r of this.config.valueFields ?? []) {
|
|
2876
|
+
const o = $([n], r.field);
|
|
2877
2877
|
t.push({
|
|
2878
|
-
field:
|
|
2879
|
-
header: `${n} - ${
|
|
2878
|
+
field: o,
|
|
2879
|
+
header: `${n} - ${r.header || r.field} (${r.aggFunc})`,
|
|
2880
2880
|
width: 120,
|
|
2881
2881
|
type: "number"
|
|
2882
2882
|
});
|
|
@@ -2950,15 +2950,18 @@ class Tt extends C {
|
|
|
2950
2950
|
`;
|
|
2951
2951
|
}
|
|
2952
2952
|
function dt(i) {
|
|
2953
|
-
const e = i.
|
|
2954
|
-
|
|
2953
|
+
const e = i.sticky;
|
|
2954
|
+
if (e === "left" || e === "right")
|
|
2955
|
+
return !1;
|
|
2956
|
+
const t = i.meta ?? {}, n = t.sticky;
|
|
2957
|
+
return n === "left" || n === "right" ? !1 : t.lockPosition !== !0 && t.suppressMovable !== !0;
|
|
2955
2958
|
}
|
|
2956
2959
|
function ge(i, e, t) {
|
|
2957
2960
|
if (e === t || e < 0 || e >= i.length || t < 0 || t > i.length) return i;
|
|
2958
|
-
const n = [...i], [
|
|
2959
|
-
return n.splice(t, 0,
|
|
2961
|
+
const n = [...i], [r] = n.splice(e, 1);
|
|
2962
|
+
return n.splice(t, 0, r), n;
|
|
2960
2963
|
}
|
|
2961
|
-
class Lt extends
|
|
2964
|
+
class Lt extends y {
|
|
2962
2965
|
name = "reorder";
|
|
2963
2966
|
version = "1.0.0";
|
|
2964
2967
|
get defaultConfig() {
|
|
@@ -2994,27 +2997,27 @@ class Lt extends C {
|
|
|
2994
2997
|
const e = this.shadowRoot;
|
|
2995
2998
|
if (!e) return;
|
|
2996
2999
|
e.querySelectorAll(".header-row > .cell").forEach((n) => {
|
|
2997
|
-
const
|
|
2998
|
-
if (!
|
|
2999
|
-
const s = this.columns.find((l) => l.field ===
|
|
3000
|
+
const r = n, o = r.getAttribute("data-field");
|
|
3001
|
+
if (!o) return;
|
|
3002
|
+
const s = this.columns.find((l) => l.field === o);
|
|
3000
3003
|
if (!s || !dt(s)) {
|
|
3001
|
-
|
|
3004
|
+
r.draggable = !1;
|
|
3002
3005
|
return;
|
|
3003
3006
|
}
|
|
3004
|
-
|
|
3005
|
-
const c = this.getColumnOrder().indexOf(
|
|
3006
|
-
this.isDragging = !0, this.draggedField =
|
|
3007
|
-
}),
|
|
3007
|
+
r.draggable = !0, !r.getAttribute("data-dragstart-bound") && (r.setAttribute("data-dragstart-bound", "true"), r.addEventListener("dragstart", (l) => {
|
|
3008
|
+
const c = this.getColumnOrder().indexOf(o);
|
|
3009
|
+
this.isDragging = !0, this.draggedField = o, this.draggedIndex = c, l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", o)), r.classList.add("dragging");
|
|
3010
|
+
}), r.addEventListener("dragend", () => {
|
|
3008
3011
|
this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, e.querySelectorAll(".header-row > .cell").forEach((l) => {
|
|
3009
3012
|
l.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
|
|
3010
3013
|
});
|
|
3011
|
-
}),
|
|
3012
|
-
if (l.preventDefault(), !this.isDragging || this.draggedField ===
|
|
3013
|
-
const a =
|
|
3014
|
-
this.dropIndex = l.clientX < c ? u : u + 1,
|
|
3015
|
-
}),
|
|
3016
|
-
|
|
3017
|
-
}),
|
|
3014
|
+
}), r.addEventListener("dragover", (l) => {
|
|
3015
|
+
if (l.preventDefault(), !this.isDragging || this.draggedField === o) return;
|
|
3016
|
+
const a = r.getBoundingClientRect(), c = a.left + a.width / 2, u = this.getColumnOrder().indexOf(o);
|
|
3017
|
+
this.dropIndex = l.clientX < c ? u : u + 1, r.classList.add("drop-target"), r.classList.toggle("drop-before", l.clientX < c), r.classList.toggle("drop-after", l.clientX >= c);
|
|
3018
|
+
}), r.addEventListener("dragleave", () => {
|
|
3019
|
+
r.classList.remove("drop-target", "drop-before", "drop-after");
|
|
3020
|
+
}), r.addEventListener("drop", (l) => {
|
|
3018
3021
|
l.preventDefault();
|
|
3019
3022
|
const a = this.draggedField, c = this.draggedIndex, d = this.dropIndex;
|
|
3020
3023
|
if (!this.isDragging || a === null || c === null || d === null)
|
|
@@ -3043,14 +3046,14 @@ class Lt extends C {
|
|
|
3043
3046
|
* @param toIndex - The target index
|
|
3044
3047
|
*/
|
|
3045
3048
|
moveColumn(e, t) {
|
|
3046
|
-
const n = this.getColumnOrder(),
|
|
3047
|
-
if (
|
|
3048
|
-
const
|
|
3049
|
-
this.grid.setColumnOrder(
|
|
3049
|
+
const n = this.getColumnOrder(), r = n.indexOf(e);
|
|
3050
|
+
if (r === -1) return;
|
|
3051
|
+
const o = ge(n, r, t);
|
|
3052
|
+
this.grid.setColumnOrder(o), this.emit("column-move", {
|
|
3050
3053
|
field: e,
|
|
3051
|
-
fromIndex:
|
|
3054
|
+
fromIndex: r,
|
|
3052
3055
|
toIndex: t,
|
|
3053
|
-
columnOrder:
|
|
3056
|
+
columnOrder: o
|
|
3054
3057
|
}), this.grid.requestStateChange?.();
|
|
3055
3058
|
}
|
|
3056
3059
|
/**
|
|
@@ -3109,28 +3112,28 @@ function ct(i, e) {
|
|
|
3109
3112
|
};
|
|
3110
3113
|
}
|
|
3111
3114
|
function ut(i, e, t) {
|
|
3112
|
-
const n = M(i, t),
|
|
3113
|
-
for (let s = n; s <=
|
|
3114
|
-
|
|
3115
|
-
return
|
|
3115
|
+
const n = M(i, t), r = M(e - 1, t), o = [];
|
|
3116
|
+
for (let s = n; s <= r; s++)
|
|
3117
|
+
o.push(s);
|
|
3118
|
+
return o;
|
|
3116
3119
|
}
|
|
3117
3120
|
async function pe(i, e, t, n) {
|
|
3118
|
-
const
|
|
3121
|
+
const r = ct(e, t);
|
|
3119
3122
|
return i.getRows({
|
|
3120
|
-
startRow:
|
|
3121
|
-
endRow:
|
|
3123
|
+
startRow: r.start,
|
|
3124
|
+
endRow: r.end,
|
|
3122
3125
|
sortModel: n.sortModel,
|
|
3123
3126
|
filterModel: n.filterModel
|
|
3124
3127
|
});
|
|
3125
3128
|
}
|
|
3126
3129
|
function ht(i, e, t) {
|
|
3127
|
-
const n = M(i, e),
|
|
3128
|
-
if (!
|
|
3129
|
-
const
|
|
3130
|
-
return o
|
|
3130
|
+
const n = M(i, e), r = t.get(n);
|
|
3131
|
+
if (!r) return;
|
|
3132
|
+
const o = i % e;
|
|
3133
|
+
return r[o];
|
|
3131
3134
|
}
|
|
3132
3135
|
const ft = 100;
|
|
3133
|
-
class Mt extends
|
|
3136
|
+
class Mt extends y {
|
|
3134
3137
|
name = "serverSide";
|
|
3135
3138
|
version = "1.0.0";
|
|
3136
3139
|
get defaultConfig() {
|
|
@@ -3158,15 +3161,15 @@ class Mt extends C {
|
|
|
3158
3161
|
*/
|
|
3159
3162
|
loadRequiredBlocks() {
|
|
3160
3163
|
if (!this.dataSource) return;
|
|
3161
|
-
const e = this.grid, t = this.config.cacheBlockSize ?? 100, n = { startRow: e.virtualization.start, endRow: e.virtualization.end },
|
|
3162
|
-
for (const
|
|
3163
|
-
if (!(this.loadedBlocks.has(
|
|
3164
|
+
const e = this.grid, t = this.config.cacheBlockSize ?? 100, n = { startRow: e.virtualization.start, endRow: e.virtualization.end }, r = ut(n.startRow, n.endRow, t);
|
|
3165
|
+
for (const o of r)
|
|
3166
|
+
if (!(this.loadedBlocks.has(o) || this.loadingBlocks.has(o))) {
|
|
3164
3167
|
if (this.loadingBlocks.size >= (this.config.maxConcurrentRequests ?? 2))
|
|
3165
3168
|
break;
|
|
3166
|
-
this.loadingBlocks.add(
|
|
3167
|
-
this.loadedBlocks.set(
|
|
3169
|
+
this.loadingBlocks.add(o), pe(this.dataSource, o, t, {}).then((s) => {
|
|
3170
|
+
this.loadedBlocks.set(o, s.rows), this.totalRowCount = s.totalRowCount, this.loadingBlocks.delete(o), this.requestRender(), this.loadRequiredBlocks();
|
|
3168
3171
|
}).catch(() => {
|
|
3169
|
-
this.loadingBlocks.delete(
|
|
3172
|
+
this.loadingBlocks.delete(o);
|
|
3170
3173
|
});
|
|
3171
3174
|
}
|
|
3172
3175
|
}
|
|
@@ -3175,8 +3178,8 @@ class Mt extends C {
|
|
|
3175
3178
|
if (!this.dataSource) return [...e];
|
|
3176
3179
|
const t = [];
|
|
3177
3180
|
for (let n = 0; n < this.totalRowCount; n++) {
|
|
3178
|
-
const
|
|
3179
|
-
t.push(
|
|
3181
|
+
const r = ht(n, this.config.cacheBlockSize ?? 100, this.loadedBlocks);
|
|
3182
|
+
t.push(r ?? { __loading: !0, __index: n });
|
|
3180
3183
|
}
|
|
3181
3184
|
return t;
|
|
3182
3185
|
}
|
|
@@ -3283,7 +3286,7 @@ function wt(i, e, t, n) {
|
|
|
3283
3286
|
timestamp: Date.now()
|
|
3284
3287
|
};
|
|
3285
3288
|
}
|
|
3286
|
-
class qt extends
|
|
3289
|
+
class qt extends y {
|
|
3287
3290
|
name = "undoRedo";
|
|
3288
3291
|
version = "1.0.0";
|
|
3289
3292
|
get defaultConfig() {
|
|
@@ -3310,22 +3313,22 @@ class qt extends C {
|
|
|
3310
3313
|
if (!this.config.enabled) return !1;
|
|
3311
3314
|
const t = (e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey, n = (e.ctrlKey || e.metaKey) && (e.key === "y" || e.key === "z" && e.shiftKey);
|
|
3312
3315
|
if (t) {
|
|
3313
|
-
const
|
|
3314
|
-
if (
|
|
3315
|
-
const
|
|
3316
|
-
r
|
|
3317
|
-
action:
|
|
3316
|
+
const r = me({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
3317
|
+
if (r.action) {
|
|
3318
|
+
const o = this.rows;
|
|
3319
|
+
o[r.action.rowIndex] && (o[r.action.rowIndex][r.action.field] = r.action.oldValue), this.undoStack = r.newState.undoStack, this.redoStack = r.newState.redoStack, this.emit("undo", {
|
|
3320
|
+
action: r.action,
|
|
3318
3321
|
type: "undo"
|
|
3319
3322
|
}), this.requestRender();
|
|
3320
3323
|
}
|
|
3321
3324
|
return !0;
|
|
3322
3325
|
}
|
|
3323
3326
|
if (n) {
|
|
3324
|
-
const
|
|
3325
|
-
if (
|
|
3326
|
-
const
|
|
3327
|
-
r
|
|
3328
|
-
action:
|
|
3327
|
+
const r = be({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
3328
|
+
if (r.action) {
|
|
3329
|
+
const o = this.rows;
|
|
3330
|
+
o[r.action.rowIndex] && (o[r.action.rowIndex][r.action.field] = r.action.newValue), this.undoStack = r.newState.undoStack, this.redoStack = r.newState.redoStack, this.emit("redo", {
|
|
3331
|
+
action: r.action,
|
|
3329
3332
|
type: "redo"
|
|
3330
3333
|
}), this.requestRender();
|
|
3331
3334
|
}
|
|
@@ -3343,10 +3346,10 @@ class qt extends C {
|
|
|
3343
3346
|
* @param oldValue - The value before the edit
|
|
3344
3347
|
* @param newValue - The value after the edit
|
|
3345
3348
|
*/
|
|
3346
|
-
recordEdit(e, t, n,
|
|
3347
|
-
const
|
|
3349
|
+
recordEdit(e, t, n, r) {
|
|
3350
|
+
const o = wt(e, t, n, r), s = gt(
|
|
3348
3351
|
{ undoStack: this.undoStack, redoStack: this.redoStack },
|
|
3349
|
-
|
|
3352
|
+
o,
|
|
3350
3353
|
this.config.maxHistorySize ?? 100
|
|
3351
3354
|
);
|
|
3352
3355
|
this.undoStack = s.undoStack, this.redoStack = s.redoStack;
|
|
@@ -3413,7 +3416,7 @@ function we(i) {
|
|
|
3413
3416
|
const e = i.meta ?? {};
|
|
3414
3417
|
return e.lockPosition !== !0 && e.suppressMovable !== !0;
|
|
3415
3418
|
}
|
|
3416
|
-
class _ extends
|
|
3419
|
+
class _ extends y {
|
|
3417
3420
|
name = "visibility";
|
|
3418
3421
|
version = "1.0.0";
|
|
3419
3422
|
/** Tool panel ID for shell integration */
|
|
@@ -3556,12 +3559,12 @@ class _ extends C {
|
|
|
3556
3559
|
renderPanelContent(e) {
|
|
3557
3560
|
const t = this.grid, n = document.createElement("div");
|
|
3558
3561
|
n.className = "tbw-visibility-content";
|
|
3559
|
-
const
|
|
3560
|
-
|
|
3561
|
-
const
|
|
3562
|
-
return
|
|
3563
|
-
t.showAllColumns(), this.rebuildToggles(
|
|
3564
|
-
}), n.appendChild(
|
|
3562
|
+
const r = document.createElement("div");
|
|
3563
|
+
r.className = "tbw-visibility-list", n.appendChild(r);
|
|
3564
|
+
const o = document.createElement("button");
|
|
3565
|
+
return o.className = "tbw-visibility-show-all", o.textContent = "Show All", o.addEventListener("click", () => {
|
|
3566
|
+
t.showAllColumns(), this.rebuildToggles(r);
|
|
3567
|
+
}), n.appendChild(o), this.columnListElement = r, this.rebuildToggles(r), e.appendChild(n), () => {
|
|
3565
3568
|
this.columnListElement = null, n.remove();
|
|
3566
3569
|
};
|
|
3567
3570
|
}
|
|
@@ -3579,10 +3582,10 @@ class _ extends C {
|
|
|
3579
3582
|
rebuildToggles(e) {
|
|
3580
3583
|
const t = this.grid, n = this.hasReorderPlugin();
|
|
3581
3584
|
e.innerHTML = "";
|
|
3582
|
-
const
|
|
3583
|
-
for (let
|
|
3584
|
-
const s = o
|
|
3585
|
-
a.className = s.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", a.setAttribute("data-field", s.field), a.setAttribute("data-index", String(
|
|
3585
|
+
const r = t.getAllColumns();
|
|
3586
|
+
for (let o = 0; o < r.length; o++) {
|
|
3587
|
+
const s = r[o], l = s.header || s.field, a = document.createElement("div");
|
|
3588
|
+
a.className = s.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", a.setAttribute("data-field", s.field), a.setAttribute("data-index", String(o)), n && we(s) && (a.draggable = !0, a.classList.add("reorderable"), this.setupDragListeners(a, s.field, o, e));
|
|
3586
3589
|
const c = document.createElement("label");
|
|
3587
3590
|
c.className = "tbw-visibility-label";
|
|
3588
3591
|
const d = document.createElement("input");
|
|
@@ -3601,23 +3604,23 @@ class _ extends C {
|
|
|
3601
3604
|
* Set up drag-and-drop event listeners for a row.
|
|
3602
3605
|
* On drop, emits a 'column-reorder-request' event for other plugins to handle.
|
|
3603
3606
|
*/
|
|
3604
|
-
setupDragListeners(e, t, n,
|
|
3605
|
-
e.addEventListener("dragstart", (
|
|
3606
|
-
this.isDragging = !0, this.draggedField = t, this.draggedIndex = n,
|
|
3607
|
+
setupDragListeners(e, t, n, r) {
|
|
3608
|
+
e.addEventListener("dragstart", (o) => {
|
|
3609
|
+
this.isDragging = !0, this.draggedField = t, this.draggedIndex = n, o.dataTransfer && (o.dataTransfer.effectAllowed = "move", o.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
|
|
3607
3610
|
}), e.addEventListener("dragend", () => {
|
|
3608
|
-
this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null,
|
|
3609
|
-
|
|
3611
|
+
this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, r.querySelectorAll(".tbw-visibility-row").forEach((o) => {
|
|
3612
|
+
o.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
|
|
3610
3613
|
});
|
|
3611
|
-
}), e.addEventListener("dragover", (
|
|
3612
|
-
if (
|
|
3614
|
+
}), e.addEventListener("dragover", (o) => {
|
|
3615
|
+
if (o.preventDefault(), !this.isDragging || this.draggedField === t) return;
|
|
3613
3616
|
const s = e.getBoundingClientRect(), l = s.top + s.height / 2;
|
|
3614
|
-
this.dropIndex =
|
|
3617
|
+
this.dropIndex = o.clientY < l ? n : n + 1, r.querySelectorAll(".tbw-visibility-row").forEach((a) => {
|
|
3615
3618
|
a !== e && a.classList.remove("drop-target", "drop-before", "drop-after");
|
|
3616
|
-
}), e.classList.add("drop-target"), e.classList.toggle("drop-before",
|
|
3619
|
+
}), e.classList.add("drop-target"), e.classList.toggle("drop-before", o.clientY < l), e.classList.toggle("drop-after", o.clientY >= l);
|
|
3617
3620
|
}), e.addEventListener("dragleave", () => {
|
|
3618
3621
|
e.classList.remove("drop-target", "drop-before", "drop-after");
|
|
3619
|
-
}), e.addEventListener("drop", (
|
|
3620
|
-
|
|
3622
|
+
}), e.addEventListener("drop", (o) => {
|
|
3623
|
+
o.preventDefault();
|
|
3621
3624
|
const s = this.draggedField, l = this.draggedIndex, a = this.dropIndex;
|
|
3622
3625
|
if (!this.isDragging || s === null || l === null || a === null)
|
|
3623
3626
|
return;
|
|
@@ -3629,7 +3632,7 @@ class _ extends C {
|
|
|
3629
3632
|
toIndex: c
|
|
3630
3633
|
};
|
|
3631
3634
|
this.emit("column-reorder-request", d), setTimeout(() => {
|
|
3632
|
-
this.rebuildToggles(
|
|
3635
|
+
this.rebuildToggles(r);
|
|
3633
3636
|
}, 0);
|
|
3634
3637
|
}
|
|
3635
3638
|
});
|
|
@@ -3730,10 +3733,10 @@ class _ extends C {
|
|
|
3730
3733
|
`;
|
|
3731
3734
|
}
|
|
3732
3735
|
export {
|
|
3733
|
-
|
|
3736
|
+
y as BaseGridPlugin,
|
|
3734
3737
|
vt as ClipboardPlugin,
|
|
3735
|
-
|
|
3736
|
-
|
|
3738
|
+
yt as ColumnVirtualizationPlugin,
|
|
3739
|
+
Ct as ContextMenuPlugin,
|
|
3737
3740
|
Pt as DGEvents,
|
|
3738
3741
|
Dt as DataGridElement,
|
|
3739
3742
|
St as ExportPlugin,
|