@toolbox-web/grid 0.1.1 → 0.2.1
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/all.d.ts +8 -0
- package/all.js +1671 -1140
- package/all.js.map +1 -1
- package/index.d.ts +4 -163
- package/index.js +803 -1338
- 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.map +1 -1
- package/lib/plugins/selection/index.js +48 -50
- 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 +1 -1
- package/umd/grid.all.umd.js +12 -12
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +13 -13
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js +1 -1
- package/umd/plugins/selection.umd.js.map +1 -1
- package/custom-elements.json +0 -1934
package/all.js
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
import { BaseGridPlugin as
|
|
2
|
-
import { DGEvents as
|
|
3
|
-
function
|
|
4
|
-
if (
|
|
5
|
-
return
|
|
6
|
-
if (
|
|
7
|
-
if (
|
|
8
|
-
if (typeof
|
|
9
|
-
const
|
|
1
|
+
import { BaseGridPlugin as x, DEFAULT_GRID_ICONS as Ke, runAggregator as se, getAggregator as He, getValueAggregator as Ge } from "./index.js";
|
|
2
|
+
import { DGEvents as Mn, DataGridElement as Nn, FitModeEnum as Pn, GridCSSVars as qn, GridClasses as Dn, GridDataAttrs as Kn, DataGridElement as Hn, GridSelectors as Gn, PluginEvents as Bn, PluginManager as On, aggregatorRegistry as zn, listAggregators as Vn, registerAggregator as Wn, runValueAggregator as $n, unregisterAggregator as jn } from "./index.js";
|
|
3
|
+
function Be(r, e, t, n) {
|
|
4
|
+
if (n.processCell)
|
|
5
|
+
return n.processCell(r, e, t);
|
|
6
|
+
if (r == null) return "";
|
|
7
|
+
if (r instanceof Date) return r.toISOString();
|
|
8
|
+
if (typeof r == "object") return JSON.stringify(r);
|
|
9
|
+
const o = String(r), i = n.delimiter ?? " ", s = n.newline ?? `
|
|
10
10
|
`;
|
|
11
|
-
return
|
|
11
|
+
return n.quoteStrings || o.includes(i) || o.includes(s) || o.includes('"') ? `"${o.replace(/"/g, '""')}"` : o;
|
|
12
12
|
}
|
|
13
|
-
function H(
|
|
14
|
-
const { rows: e, columns: t, selectedIndices:
|
|
13
|
+
function H(r) {
|
|
14
|
+
const { rows: e, columns: t, selectedIndices: n, config: o } = r, i = o.delimiter ?? " ", s = o.newline ?? `
|
|
15
15
|
`, l = t.filter((u) => !u.hidden && !u.field.startsWith("__")), a = [];
|
|
16
|
-
if (
|
|
16
|
+
if (o.includeHeaders) {
|
|
17
17
|
const u = l.map((h) => {
|
|
18
|
-
const
|
|
19
|
-
return
|
|
18
|
+
const g = h.header || h.field;
|
|
19
|
+
return g.includes(i) || g.includes(s) || g.includes('"') ? `"${g.replace(/"/g, '""')}"` : g;
|
|
20
20
|
});
|
|
21
21
|
a.push(u.join(i));
|
|
22
22
|
}
|
|
23
|
-
const c = [...
|
|
23
|
+
const c = [...n instanceof Set ? [...n] : n].sort((u, h) => u - h);
|
|
24
24
|
for (const u of c) {
|
|
25
25
|
const h = e[u];
|
|
26
26
|
if (!h) continue;
|
|
27
|
-
const
|
|
28
|
-
(
|
|
27
|
+
const g = l.map(
|
|
28
|
+
(p) => Be(h[p.field], p.field, h, o)
|
|
29
29
|
);
|
|
30
|
-
a.push(
|
|
30
|
+
a.push(g.join(i));
|
|
31
31
|
}
|
|
32
|
-
return a.join(
|
|
32
|
+
return a.join(s);
|
|
33
33
|
}
|
|
34
|
-
async function G(
|
|
34
|
+
async function G(r) {
|
|
35
35
|
try {
|
|
36
|
-
return await navigator.clipboard.writeText(
|
|
36
|
+
return await navigator.clipboard.writeText(r), !0;
|
|
37
37
|
} catch {
|
|
38
38
|
const e = document.createElement("textarea");
|
|
39
|
-
e.value =
|
|
39
|
+
e.value = r, e.style.position = "fixed", e.style.opacity = "0", e.style.pointerEvents = "none", document.body.appendChild(e), e.select();
|
|
40
40
|
const t = document.execCommand("copy");
|
|
41
41
|
return document.body.removeChild(e), t;
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
-
function
|
|
45
|
-
const t = e.delimiter ?? " ",
|
|
46
|
-
`,
|
|
44
|
+
function le(r, e) {
|
|
45
|
+
const t = e.delimiter ?? " ", n = e.newline ?? `
|
|
46
|
+
`, o = r.replace(/\r\n/g, `
|
|
47
47
|
`).replace(/\r/g, `
|
|
48
48
|
`), i = [];
|
|
49
|
-
let
|
|
50
|
-
for (let d = 0; d <
|
|
51
|
-
const c =
|
|
52
|
-
c === '"' && !a ? a = !0 : c === '"' && a ?
|
|
49
|
+
let s = [], l = "", a = !1;
|
|
50
|
+
for (let d = 0; d < o.length; d++) {
|
|
51
|
+
const c = o[d];
|
|
52
|
+
c === '"' && !a ? a = !0 : c === '"' && a ? o[d + 1] === '"' ? (l += '"', d++) : a = !1 : c === t && !a ? (s.push(l), l = "") : c === n && !a ? (s.push(l), l = "", (s.length > 1 || s.some((u) => u.trim() !== "")) && i.push(s), s = []) : l += c;
|
|
53
53
|
}
|
|
54
|
-
return
|
|
54
|
+
return s.push(l), (s.length > 1 || s.some((d) => d.trim() !== "")) && i.push(s), i;
|
|
55
55
|
}
|
|
56
|
-
async function
|
|
56
|
+
async function ae() {
|
|
57
57
|
try {
|
|
58
58
|
return await navigator.clipboard.readText();
|
|
59
59
|
} catch {
|
|
60
60
|
return "";
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
|
-
class
|
|
63
|
+
class mn extends x {
|
|
64
64
|
name = "clipboard";
|
|
65
65
|
version = "1.0.0";
|
|
66
66
|
get defaultConfig() {
|
|
@@ -81,24 +81,24 @@ class Yt extends C {
|
|
|
81
81
|
}
|
|
82
82
|
// ===== Event Handlers =====
|
|
83
83
|
onKeyDown(e) {
|
|
84
|
-
const t = (e.ctrlKey || e.metaKey) && e.key === "c",
|
|
85
|
-
return t ? (this.#
|
|
84
|
+
const t = (e.ctrlKey || e.metaKey) && e.key === "c", n = (e.ctrlKey || e.metaKey) && e.key === "v";
|
|
85
|
+
return t ? (this.#t(e.target), !0) : n ? (this.#e(), !0) : !1;
|
|
86
86
|
}
|
|
87
87
|
// ===== Private Methods =====
|
|
88
88
|
/**
|
|
89
89
|
* Handle copy operation
|
|
90
90
|
*/
|
|
91
|
-
#
|
|
92
|
-
const t = this.#
|
|
91
|
+
#t(e) {
|
|
92
|
+
const t = this.#n(), n = t?.getSelectedRows() ?? [], o = n.length > 0, i = t?.getRanges() ?? [], s = i.length > 0, l = t?.getSelectedCell() != null;
|
|
93
93
|
let a, d, c;
|
|
94
|
-
if (
|
|
94
|
+
if (o && t)
|
|
95
95
|
a = H({
|
|
96
96
|
rows: this.rows,
|
|
97
97
|
columns: [...this.columns],
|
|
98
|
-
selectedIndices:
|
|
98
|
+
selectedIndices: n,
|
|
99
99
|
config: this.config
|
|
100
|
-
}), d =
|
|
101
|
-
else if (
|
|
100
|
+
}), d = n.length, c = this.columns.filter((u) => !u.hidden && !u.field.startsWith("__")).length;
|
|
101
|
+
else if (s && t) {
|
|
102
102
|
const u = i[i.length - 1], h = this.#i({
|
|
103
103
|
startRow: u.from.row,
|
|
104
104
|
startCol: u.from.col,
|
|
@@ -107,7 +107,7 @@ class Yt extends C {
|
|
|
107
107
|
});
|
|
108
108
|
a = h.text, d = h.rowCount, c = h.columnCount;
|
|
109
109
|
} else if (l && t) {
|
|
110
|
-
const u = t.getSelectedCell(), h = this.#
|
|
110
|
+
const u = t.getSelectedCell(), h = this.#o(u.row, u.col);
|
|
111
111
|
if (!h) return;
|
|
112
112
|
a = h.text, d = 1, c = 1;
|
|
113
113
|
} else {
|
|
@@ -122,17 +122,17 @@ class Yt extends C {
|
|
|
122
122
|
/**
|
|
123
123
|
* Handle paste operation
|
|
124
124
|
*/
|
|
125
|
-
#
|
|
126
|
-
|
|
125
|
+
#e() {
|
|
126
|
+
ae().then((e) => {
|
|
127
127
|
if (!e) return;
|
|
128
|
-
const t =
|
|
128
|
+
const t = le(e, this.config);
|
|
129
129
|
this.emit("paste", { rows: t, text: e });
|
|
130
130
|
});
|
|
131
131
|
}
|
|
132
132
|
/**
|
|
133
133
|
* Get the selection plugin instance if available.
|
|
134
134
|
*/
|
|
135
|
-
#
|
|
135
|
+
#n() {
|
|
136
136
|
try {
|
|
137
137
|
const e = this.grid;
|
|
138
138
|
if (e?._plugins) {
|
|
@@ -146,16 +146,16 @@ class Yt extends C {
|
|
|
146
146
|
/**
|
|
147
147
|
* Build text for a single cell by row/col index.
|
|
148
148
|
*/
|
|
149
|
-
#
|
|
150
|
-
const
|
|
151
|
-
if (!o) return null;
|
|
152
|
-
const n = this.columns[t];
|
|
149
|
+
#o(e, t) {
|
|
150
|
+
const n = this.rows[e];
|
|
153
151
|
if (!n) return null;
|
|
154
|
-
const
|
|
152
|
+
const o = this.columns[t];
|
|
153
|
+
if (!o) return null;
|
|
154
|
+
const i = n[o.field], s = o.header || o.field;
|
|
155
155
|
let l;
|
|
156
156
|
if (this.config.includeHeaders) {
|
|
157
157
|
const a = i == null ? "" : String(i);
|
|
158
|
-
l = `${
|
|
158
|
+
l = `${s}: ${a}`;
|
|
159
159
|
} else
|
|
160
160
|
l = i == null ? "" : String(i);
|
|
161
161
|
return { text: l };
|
|
@@ -164,24 +164,24 @@ class Yt extends C {
|
|
|
164
164
|
* Build text for a rectangular range of cells.
|
|
165
165
|
*/
|
|
166
166
|
#i(e) {
|
|
167
|
-
const { startRow: t, startCol:
|
|
168
|
-
`, h = [],
|
|
167
|
+
const { startRow: t, startCol: n, endRow: o, endCol: i } = e, s = Math.min(t, o), l = Math.max(t, o), a = Math.min(n, i), d = Math.max(n, i), c = this.config.delimiter ?? " ", u = this.config.newline ?? `
|
|
168
|
+
`, h = [], g = this.columns.slice(a, d + 1);
|
|
169
169
|
if (this.config.includeHeaders) {
|
|
170
|
-
const
|
|
171
|
-
h.push(
|
|
172
|
-
}
|
|
173
|
-
for (let
|
|
174
|
-
const
|
|
175
|
-
if (!
|
|
176
|
-
const
|
|
177
|
-
const k =
|
|
170
|
+
const p = g.map((f) => f.header || f.field);
|
|
171
|
+
h.push(p.join(c));
|
|
172
|
+
}
|
|
173
|
+
for (let p = s; p <= l; p++) {
|
|
174
|
+
const f = this.rows[p];
|
|
175
|
+
if (!f) continue;
|
|
176
|
+
const m = g.map((w) => {
|
|
177
|
+
const k = f[w.field];
|
|
178
178
|
return k == null ? "" : k instanceof Date ? k.toISOString() : String(k);
|
|
179
179
|
});
|
|
180
|
-
h.push(
|
|
180
|
+
h.push(m.join(c));
|
|
181
181
|
}
|
|
182
182
|
return {
|
|
183
183
|
text: h.join(u),
|
|
184
|
-
rowCount: l -
|
|
184
|
+
rowCount: l - s + 1,
|
|
185
185
|
columnCount: d - a + 1
|
|
186
186
|
};
|
|
187
187
|
}
|
|
@@ -192,22 +192,22 @@ class Yt extends C {
|
|
|
192
192
|
#r(e) {
|
|
193
193
|
const t = e.closest("[data-field-cache]");
|
|
194
194
|
if (!t) return null;
|
|
195
|
-
const
|
|
196
|
-
if (!o) return null;
|
|
197
|
-
const n = t.dataset.row;
|
|
195
|
+
const n = t.dataset.fieldCache;
|
|
198
196
|
if (!n) return null;
|
|
199
|
-
const
|
|
197
|
+
const o = t.dataset.row;
|
|
198
|
+
if (!o) return null;
|
|
199
|
+
const i = parseInt(o, 10);
|
|
200
200
|
if (isNaN(i)) return null;
|
|
201
|
-
const
|
|
202
|
-
if (!
|
|
203
|
-
const l =
|
|
201
|
+
const s = this.rows[i];
|
|
202
|
+
if (!s) return null;
|
|
203
|
+
const l = s[n], d = this.columns.find((u) => u.field === n)?.header || n;
|
|
204
204
|
let c;
|
|
205
205
|
if (this.config.includeHeaders) {
|
|
206
206
|
const u = l == null ? "" : String(l);
|
|
207
207
|
c = `${d}: ${u}`;
|
|
208
208
|
} else
|
|
209
209
|
c = l == null ? "" : String(l);
|
|
210
|
-
return { text: c, field:
|
|
210
|
+
return { text: c, field: n, value: l };
|
|
211
211
|
}
|
|
212
212
|
// ===== Public API =====
|
|
213
213
|
/**
|
|
@@ -215,13 +215,13 @@ class Yt extends C {
|
|
|
215
215
|
* @returns The copied text
|
|
216
216
|
*/
|
|
217
217
|
async copy() {
|
|
218
|
-
const t = this.#
|
|
218
|
+
const t = this.#n()?.getSelectedRows() ?? [], n = H({
|
|
219
219
|
rows: this.rows,
|
|
220
220
|
columns: [...this.columns],
|
|
221
221
|
selectedIndices: t,
|
|
222
222
|
config: this.config
|
|
223
223
|
});
|
|
224
|
-
return await G(
|
|
224
|
+
return await G(n), this.lastCopied = { text: n, timestamp: Date.now() }, n;
|
|
225
225
|
}
|
|
226
226
|
/**
|
|
227
227
|
* Copy specific rows by index to clipboard.
|
|
@@ -242,8 +242,8 @@ class Yt extends C {
|
|
|
242
242
|
* @returns Parsed 2D array of cell values, or null if clipboard is empty
|
|
243
243
|
*/
|
|
244
244
|
async paste() {
|
|
245
|
-
const e = await
|
|
246
|
-
return e ?
|
|
245
|
+
const e = await ae();
|
|
246
|
+
return e ? le(e, this.config) : null;
|
|
247
247
|
}
|
|
248
248
|
/**
|
|
249
249
|
* Get the last copied text and timestamp.
|
|
@@ -253,61 +253,61 @@ class Yt extends C {
|
|
|
253
253
|
return this.lastCopied;
|
|
254
254
|
}
|
|
255
255
|
}
|
|
256
|
-
const
|
|
257
|
-
function
|
|
258
|
-
if (
|
|
259
|
-
return
|
|
260
|
-
if (typeof
|
|
261
|
-
return
|
|
262
|
-
const e = parseFloat(
|
|
263
|
-
return isNaN(e) ?
|
|
256
|
+
const de = 100;
|
|
257
|
+
function Q(r) {
|
|
258
|
+
if (r == null)
|
|
259
|
+
return de;
|
|
260
|
+
if (typeof r == "number")
|
|
261
|
+
return r;
|
|
262
|
+
const e = parseFloat(r);
|
|
263
|
+
return isNaN(e) ? de : e;
|
|
264
264
|
}
|
|
265
|
-
function
|
|
266
|
-
return
|
|
265
|
+
function ce(r) {
|
|
266
|
+
return r.map((e) => Q(e.width));
|
|
267
267
|
}
|
|
268
|
-
function
|
|
268
|
+
function ue(r) {
|
|
269
269
|
const e = [];
|
|
270
270
|
let t = 0;
|
|
271
|
-
for (const
|
|
272
|
-
e.push(t), t +=
|
|
271
|
+
for (const n of r)
|
|
272
|
+
e.push(t), t += Q(n.width);
|
|
273
273
|
return e;
|
|
274
274
|
}
|
|
275
|
-
function
|
|
276
|
-
return
|
|
275
|
+
function he(r) {
|
|
276
|
+
return r.reduce((e, t) => e + Q(t.width), 0);
|
|
277
277
|
}
|
|
278
|
-
function
|
|
278
|
+
function Oe(r, e, t, n, o) {
|
|
279
279
|
const i = t.length;
|
|
280
280
|
if (i === 0)
|
|
281
281
|
return { startCol: 0, endCol: 0, visibleColumns: [] };
|
|
282
|
-
let
|
|
283
|
-
|
|
284
|
-
const l =
|
|
285
|
-
let a =
|
|
286
|
-
for (let c =
|
|
282
|
+
let s = ze(r, t, n);
|
|
283
|
+
s = Math.max(0, s - o);
|
|
284
|
+
const l = r + e;
|
|
285
|
+
let a = s;
|
|
286
|
+
for (let c = s; c < i; c++) {
|
|
287
287
|
if (t[c] >= l) {
|
|
288
288
|
a = c - 1;
|
|
289
289
|
break;
|
|
290
290
|
}
|
|
291
291
|
a = c;
|
|
292
292
|
}
|
|
293
|
-
a = Math.min(i - 1, a +
|
|
293
|
+
a = Math.min(i - 1, a + o);
|
|
294
294
|
const d = [];
|
|
295
|
-
for (let c =
|
|
295
|
+
for (let c = s; c <= a; c++)
|
|
296
296
|
d.push(c);
|
|
297
|
-
return { startCol:
|
|
297
|
+
return { startCol: s, endCol: a, visibleColumns: d };
|
|
298
298
|
}
|
|
299
|
-
function
|
|
300
|
-
let
|
|
301
|
-
for (;
|
|
302
|
-
const i = Math.floor((
|
|
303
|
-
e[i] + t[i] <=
|
|
299
|
+
function ze(r, e, t) {
|
|
300
|
+
let n = 0, o = e.length - 1;
|
|
301
|
+
for (; n < o; ) {
|
|
302
|
+
const i = Math.floor((n + o) / 2);
|
|
303
|
+
e[i] + t[i] <= r ? n = i + 1 : o = i;
|
|
304
304
|
}
|
|
305
|
-
return
|
|
305
|
+
return n;
|
|
306
306
|
}
|
|
307
|
-
function
|
|
308
|
-
return t ?
|
|
307
|
+
function Ve(r, e, t) {
|
|
308
|
+
return t ? r > e : !1;
|
|
309
309
|
}
|
|
310
|
-
class
|
|
310
|
+
class wn extends x {
|
|
311
311
|
name = "columnVirtualization";
|
|
312
312
|
version = "1.0.0";
|
|
313
313
|
get defaultConfig() {
|
|
@@ -329,32 +329,32 @@ class Zt extends C {
|
|
|
329
329
|
attach(e) {
|
|
330
330
|
super.attach(e);
|
|
331
331
|
const t = this.columns;
|
|
332
|
-
this.columnWidths =
|
|
332
|
+
this.columnWidths = ce(t), this.columnOffsets = ue(t), this.totalWidth = he(t), this.endCol = t.length - 1;
|
|
333
333
|
}
|
|
334
334
|
detach() {
|
|
335
335
|
this.columnWidths = [], this.columnOffsets = [], this.isVirtualized = !1, this.startCol = 0, this.endCol = 0, this.scrollLeft = 0, this.totalWidth = 0;
|
|
336
336
|
}
|
|
337
337
|
// ===== Hooks =====
|
|
338
338
|
processColumns(e) {
|
|
339
|
-
const t =
|
|
340
|
-
if (this.isVirtualized = t ?? !1, this.columnWidths =
|
|
339
|
+
const t = Ve(e.length, this.config.threshold ?? 30, this.config.autoEnable ?? !0);
|
|
340
|
+
if (this.isVirtualized = t ?? !1, this.columnWidths = ce(e), this.columnOffsets = ue(e), this.totalWidth = he(e), !t)
|
|
341
341
|
return this.startCol = 0, this.endCol = e.length - 1, [...e];
|
|
342
|
-
const
|
|
342
|
+
const n = this.grid.clientWidth || 800, o = Oe(
|
|
343
343
|
this.scrollLeft,
|
|
344
|
-
|
|
344
|
+
n,
|
|
345
345
|
this.columnOffsets,
|
|
346
346
|
this.columnWidths,
|
|
347
347
|
this.config.overscan ?? 3
|
|
348
348
|
);
|
|
349
|
-
return this.startCol =
|
|
349
|
+
return this.startCol = o.startCol, this.endCol = o.endCol, o.visibleColumns.map((i) => e[i]);
|
|
350
350
|
}
|
|
351
351
|
afterRender() {
|
|
352
352
|
if (!this.isVirtualized) return;
|
|
353
353
|
const e = this.shadowRoot;
|
|
354
354
|
if (!e) return;
|
|
355
|
-
const t = this.columnOffsets[this.startCol] ?? 0,
|
|
356
|
-
|
|
357
|
-
|
|
355
|
+
const t = this.columnOffsets[this.startCol] ?? 0, n = e.querySelector(".header-row"), o = e.querySelectorAll(".data-grid-row");
|
|
356
|
+
n && (n.style.paddingLeft = `${t}px`), o.forEach((s) => {
|
|
357
|
+
s.style.paddingLeft = `${t}px`;
|
|
358
358
|
});
|
|
359
359
|
const i = e.querySelector(".rows-viewport .rows");
|
|
360
360
|
i && (i.style.width = `${this.totalWidth}px`);
|
|
@@ -380,8 +380,8 @@ class Zt extends C {
|
|
|
380
380
|
* @param columnIndex - Index of the column to scroll to
|
|
381
381
|
*/
|
|
382
382
|
scrollToColumn(e) {
|
|
383
|
-
const t = this.columnOffsets[e] ?? 0,
|
|
384
|
-
|
|
383
|
+
const t = this.columnOffsets[e] ?? 0, n = this.grid;
|
|
384
|
+
n.scrollLeft = t;
|
|
385
385
|
}
|
|
386
386
|
/**
|
|
387
387
|
* Get the left offset for a specific column.
|
|
@@ -397,82 +397,82 @@ class Zt extends C {
|
|
|
397
397
|
return this.totalWidth;
|
|
398
398
|
}
|
|
399
399
|
}
|
|
400
|
-
const
|
|
401
|
-
function
|
|
402
|
-
return (typeof
|
|
400
|
+
const We = ".tbw-context-menu{position:fixed;background:light-dark(#f5f5f5,#2a2a2a);color:light-dark(#222,#eee);border:1px solid light-dark(#d0d0d4,#454545);border-radius:4px;box-shadow:0 2px 10px #00000026;min-width:160px;padding:4px 0;z-index:10000;font-size:13px;font-family:system-ui,sans-serif}.tbw-context-menu-item{display:flex;align-items:center;padding:6px 12px;cursor:pointer;gap:8px}.tbw-context-menu-item:hover:not(.disabled){background:light-dark(#e8e8e8,#3a3a3a)}.tbw-context-menu-item.disabled{opacity:.5;cursor:default}.tbw-context-menu-item.danger{color:light-dark(#c00,#f66)}.tbw-context-menu-icon{width:16px;text-align:center}.tbw-context-menu-label{flex:1}.tbw-context-menu-shortcut{color:light-dark(#888,#888);font-size:11px}.tbw-context-menu-arrow{font-size:10px;color:light-dark(#888,#888)}.tbw-context-menu-separator{height:1px;background:light-dark(#d0d0d4,#454545);margin:4px 0}";
|
|
401
|
+
function Y(r, e) {
|
|
402
|
+
return (typeof r == "function" ? r(e) : r).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
|
|
403
403
|
}
|
|
404
|
-
function
|
|
405
|
-
return
|
|
404
|
+
function $e(r, e) {
|
|
405
|
+
return r.disabled === !0 ? !0 : typeof r.disabled == "function" ? r.disabled(e) : !1;
|
|
406
406
|
}
|
|
407
|
-
function
|
|
408
|
-
const
|
|
409
|
-
|
|
410
|
-
for (const i of
|
|
407
|
+
function Z(r, e, t, n = Ke.submenuArrow) {
|
|
408
|
+
const o = document.createElement("div");
|
|
409
|
+
o.className = "tbw-context-menu", o.setAttribute("role", "menu");
|
|
410
|
+
for (const i of r) {
|
|
411
411
|
if (i.separator) {
|
|
412
412
|
const d = document.createElement("div");
|
|
413
|
-
d.className = "tbw-context-menu-separator", d.setAttribute("role", "separator"),
|
|
413
|
+
d.className = "tbw-context-menu-separator", d.setAttribute("role", "separator"), o.appendChild(d);
|
|
414
414
|
continue;
|
|
415
415
|
}
|
|
416
|
-
const
|
|
417
|
-
|
|
418
|
-
const l =
|
|
419
|
-
if (l && (
|
|
416
|
+
const s = document.createElement("div");
|
|
417
|
+
s.className = "tbw-context-menu-item", i.cssClass && s.classList.add(i.cssClass), s.setAttribute("role", "menuitem"), s.setAttribute("data-id", i.id);
|
|
418
|
+
const l = $e(i, e);
|
|
419
|
+
if (l && (s.classList.add("disabled"), s.setAttribute("aria-disabled", "true")), i.icon) {
|
|
420
420
|
const d = document.createElement("span");
|
|
421
|
-
d.className = "tbw-context-menu-icon", d.innerHTML = i.icon,
|
|
421
|
+
d.className = "tbw-context-menu-icon", d.innerHTML = i.icon, s.appendChild(d);
|
|
422
422
|
}
|
|
423
423
|
const a = document.createElement("span");
|
|
424
|
-
if (a.className = "tbw-context-menu-label", a.textContent = i.name,
|
|
424
|
+
if (a.className = "tbw-context-menu-label", a.textContent = i.name, s.appendChild(a), i.shortcut) {
|
|
425
425
|
const d = document.createElement("span");
|
|
426
|
-
d.className = "tbw-context-menu-shortcut", d.textContent = i.shortcut,
|
|
426
|
+
d.className = "tbw-context-menu-shortcut", d.textContent = i.shortcut, s.appendChild(d);
|
|
427
427
|
}
|
|
428
428
|
if (i.subMenu?.length) {
|
|
429
429
|
const d = document.createElement("span");
|
|
430
|
-
d.className = "tbw-context-menu-arrow", typeof
|
|
431
|
-
if (
|
|
432
|
-
const u =
|
|
433
|
-
h.classList.add("tbw-context-submenu"), h.style.position = "absolute", h.style.left = "100%", h.style.top = "0",
|
|
434
|
-
}),
|
|
435
|
-
const c =
|
|
430
|
+
d.className = "tbw-context-menu-arrow", typeof n == "string" ? d.innerHTML = n : n instanceof HTMLElement && d.appendChild(n.cloneNode(!0)), s.appendChild(d), s.addEventListener("mouseenter", () => {
|
|
431
|
+
if (s.querySelector(".tbw-context-menu") || !i.subMenu) return;
|
|
432
|
+
const u = Y(i.subMenu, e), h = Z(u, e, t, n);
|
|
433
|
+
h.classList.add("tbw-context-submenu"), h.style.position = "absolute", h.style.left = "100%", h.style.top = "0", s.style.position = "relative", s.appendChild(h);
|
|
434
|
+
}), s.addEventListener("mouseleave", () => {
|
|
435
|
+
const c = s.querySelector(".tbw-context-menu");
|
|
436
436
|
c && c.remove();
|
|
437
437
|
});
|
|
438
438
|
}
|
|
439
|
-
!l && i.action && !i.subMenu &&
|
|
439
|
+
!l && i.action && !i.subMenu && s.addEventListener("click", (d) => {
|
|
440
440
|
d.stopPropagation(), t(i);
|
|
441
|
-
}),
|
|
441
|
+
}), o.appendChild(s);
|
|
442
442
|
}
|
|
443
|
-
return
|
|
443
|
+
return o;
|
|
444
444
|
}
|
|
445
|
-
function
|
|
446
|
-
|
|
447
|
-
const
|
|
448
|
-
let
|
|
449
|
-
e +
|
|
445
|
+
function ge(r, e, t) {
|
|
446
|
+
r.style.position = "fixed", r.style.left = `${e}px`, r.style.top = `${t}px`, r.style.visibility = "hidden", r.style.zIndex = "10000";
|
|
447
|
+
const n = r.getBoundingClientRect(), o = window.innerWidth, i = window.innerHeight;
|
|
448
|
+
let s = e, l = t;
|
|
449
|
+
e + n.width > o && (s = e - n.width), t + n.height > i && (l = t - n.height), s = Math.max(0, s), l = Math.max(0, l), r.style.left = `${s}px`, r.style.top = `${l}px`, r.style.visibility = "visible";
|
|
450
450
|
}
|
|
451
|
-
let _ = null, I = null, E = null,
|
|
452
|
-
const
|
|
451
|
+
let _ = null, I = null, E = null, B = 0;
|
|
452
|
+
const O = [
|
|
453
453
|
{
|
|
454
454
|
id: "copy",
|
|
455
455
|
name: "Copy",
|
|
456
456
|
shortcut: "Ctrl+C",
|
|
457
|
-
action: (
|
|
458
|
-
|
|
457
|
+
action: (r) => {
|
|
458
|
+
r.grid?.plugins?.clipboard?.copy?.();
|
|
459
459
|
}
|
|
460
460
|
},
|
|
461
461
|
{ separator: !0, id: "sep1", name: "" },
|
|
462
462
|
{
|
|
463
463
|
id: "export-csv",
|
|
464
464
|
name: "Export CSV",
|
|
465
|
-
action: (
|
|
466
|
-
|
|
465
|
+
action: (r) => {
|
|
466
|
+
r.grid?.plugins?.export?.exportCsv?.();
|
|
467
467
|
}
|
|
468
468
|
}
|
|
469
469
|
];
|
|
470
|
-
class
|
|
470
|
+
class bn extends x {
|
|
471
471
|
name = "contextMenu";
|
|
472
472
|
version = "1.0.0";
|
|
473
473
|
get defaultConfig() {
|
|
474
474
|
return {
|
|
475
|
-
items:
|
|
475
|
+
items: O
|
|
476
476
|
};
|
|
477
477
|
}
|
|
478
478
|
// ===== Internal State =====
|
|
@@ -482,17 +482,17 @@ class Xt extends C {
|
|
|
482
482
|
menuElement = null;
|
|
483
483
|
// ===== Lifecycle =====
|
|
484
484
|
attach(e) {
|
|
485
|
-
super.attach(e), this.installGlobalHandlers(),
|
|
485
|
+
super.attach(e), this.installGlobalHandlers(), B++;
|
|
486
486
|
}
|
|
487
487
|
detach() {
|
|
488
488
|
this.menuElement && (this.menuElement.remove(), this.menuElement = null), this.isOpen = !1, this.params = null, this.uninstallGlobalHandlers();
|
|
489
489
|
}
|
|
490
490
|
// ===== Private Methods =====
|
|
491
491
|
installGlobalHandlers() {
|
|
492
|
-
!E && typeof document < "u" && (E = document.createElement("style"), E.id = "tbw-context-menu-styles", E.textContent =
|
|
492
|
+
!E && typeof document < "u" && (E = document.createElement("style"), E.id = "tbw-context-menu-styles", E.textContent = We, document.head.appendChild(E)), _ || (_ = () => {
|
|
493
493
|
document.querySelectorAll(".tbw-context-menu").forEach((t) => t.remove());
|
|
494
494
|
}, document.addEventListener("click", _)), I || (I = (e) => {
|
|
495
|
-
e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((
|
|
495
|
+
e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((n) => n.remove());
|
|
496
496
|
}, document.addEventListener("keydown", I));
|
|
497
497
|
}
|
|
498
498
|
/**
|
|
@@ -500,29 +500,29 @@ class Xt extends C {
|
|
|
500
500
|
* Uses reference counting to ensure handlers persist while any grid uses the plugin.
|
|
501
501
|
*/
|
|
502
502
|
uninstallGlobalHandlers() {
|
|
503
|
-
|
|
503
|
+
B--, !(B > 0) && (_ && (document.removeEventListener("click", _), _ = null), I && (document.removeEventListener("keydown", I), I = null), E && (E.remove(), E = null));
|
|
504
504
|
}
|
|
505
505
|
// ===== Hooks =====
|
|
506
506
|
afterRender() {
|
|
507
507
|
const e = this.shadowRoot;
|
|
508
508
|
if (!e) return;
|
|
509
509
|
const t = e.children[0];
|
|
510
|
-
t && t.getAttribute("data-context-menu-bound") !== "true" && (t.setAttribute("data-context-menu-bound", "true"), t.addEventListener("contextmenu", (
|
|
511
|
-
const
|
|
512
|
-
|
|
513
|
-
const i =
|
|
510
|
+
t && t.getAttribute("data-context-menu-bound") !== "true" && (t.setAttribute("data-context-menu-bound", "true"), t.addEventListener("contextmenu", (n) => {
|
|
511
|
+
const o = n;
|
|
512
|
+
o.preventDefault();
|
|
513
|
+
const i = o.target, s = i.closest("[data-row][data-col]"), l = i.closest(".header-cell");
|
|
514
514
|
let a;
|
|
515
|
-
if (
|
|
516
|
-
const c = parseInt(
|
|
515
|
+
if (s) {
|
|
516
|
+
const c = parseInt(s.getAttribute("data-row") ?? "-1", 10), u = parseInt(s.getAttribute("data-col") ?? "-1", 10), h = this.columns[u], g = this.rows[c];
|
|
517
517
|
a = {
|
|
518
|
-
row:
|
|
518
|
+
row: g,
|
|
519
519
|
rowIndex: c,
|
|
520
520
|
column: h,
|
|
521
521
|
columnIndex: u,
|
|
522
522
|
field: h?.field ?? "",
|
|
523
|
-
value:
|
|
523
|
+
value: g?.[h?.field] ?? null,
|
|
524
524
|
isHeader: !1,
|
|
525
|
-
event:
|
|
525
|
+
event: o
|
|
526
526
|
};
|
|
527
527
|
} else if (l) {
|
|
528
528
|
const c = parseInt(l.getAttribute("data-col") ?? "-1", 10), u = this.columns[c];
|
|
@@ -534,20 +534,20 @@ class Xt extends C {
|
|
|
534
534
|
field: u?.field ?? "",
|
|
535
535
|
value: null,
|
|
536
536
|
isHeader: !0,
|
|
537
|
-
event:
|
|
537
|
+
event: o
|
|
538
538
|
};
|
|
539
539
|
} else
|
|
540
540
|
return;
|
|
541
|
-
this.params = a, this.position = { x:
|
|
542
|
-
const d =
|
|
543
|
-
d.length && (this.menuElement && this.menuElement.remove(), this.menuElement =
|
|
541
|
+
this.params = a, this.position = { x: o.clientX, y: o.clientY };
|
|
542
|
+
const d = Y(this.config.items ?? O, a);
|
|
543
|
+
d.length && (this.menuElement && this.menuElement.remove(), this.menuElement = Z(
|
|
544
544
|
d,
|
|
545
545
|
a,
|
|
546
546
|
(c) => {
|
|
547
547
|
c.action && c.action(a), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
|
|
548
548
|
},
|
|
549
549
|
this.gridIcons.submenuArrow
|
|
550
|
-
), document.body.appendChild(this.menuElement),
|
|
550
|
+
), document.body.appendChild(this.menuElement), ge(this.menuElement, o.clientX, o.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: d }));
|
|
551
551
|
}));
|
|
552
552
|
}
|
|
553
553
|
// ===== Public API =====
|
|
@@ -557,25 +557,25 @@ class Xt extends C {
|
|
|
557
557
|
* @param y - Y coordinate
|
|
558
558
|
* @param params - Partial context menu parameters
|
|
559
559
|
*/
|
|
560
|
-
showMenu(e, t,
|
|
561
|
-
const
|
|
562
|
-
row:
|
|
563
|
-
rowIndex:
|
|
564
|
-
column:
|
|
565
|
-
columnIndex:
|
|
566
|
-
field:
|
|
567
|
-
value:
|
|
568
|
-
isHeader:
|
|
569
|
-
event:
|
|
570
|
-
}, i =
|
|
571
|
-
this.menuElement && this.menuElement.remove(), this.menuElement =
|
|
560
|
+
showMenu(e, t, n) {
|
|
561
|
+
const o = {
|
|
562
|
+
row: n.row ?? null,
|
|
563
|
+
rowIndex: n.rowIndex ?? -1,
|
|
564
|
+
column: n.column ?? null,
|
|
565
|
+
columnIndex: n.columnIndex ?? -1,
|
|
566
|
+
field: n.field ?? "",
|
|
567
|
+
value: n.value ?? null,
|
|
568
|
+
isHeader: n.isHeader ?? !1,
|
|
569
|
+
event: n.event ?? new MouseEvent("contextmenu")
|
|
570
|
+
}, i = Y(this.config.items ?? O, o);
|
|
571
|
+
this.menuElement && this.menuElement.remove(), this.menuElement = Z(
|
|
572
572
|
i,
|
|
573
|
-
|
|
574
|
-
(
|
|
575
|
-
|
|
573
|
+
o,
|
|
574
|
+
(s) => {
|
|
575
|
+
s.action && s.action(o), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
|
|
576
576
|
},
|
|
577
577
|
this.gridIcons.submenuArrow
|
|
578
|
-
), document.body.appendChild(this.menuElement),
|
|
578
|
+
), document.body.appendChild(this.menuElement), ge(this.menuElement, e, t), this.isOpen = !0;
|
|
579
579
|
}
|
|
580
580
|
/**
|
|
581
581
|
* Hide the context menu.
|
|
@@ -592,83 +592,83 @@ class Xt extends C {
|
|
|
592
592
|
}
|
|
593
593
|
// Styles are injected globally via installGlobalHandlers() since menu renders in document.body
|
|
594
594
|
}
|
|
595
|
-
function
|
|
596
|
-
if (
|
|
597
|
-
if (
|
|
598
|
-
if (typeof
|
|
599
|
-
const t = String(
|
|
595
|
+
function pe(r, e = !0) {
|
|
596
|
+
if (r == null) return "";
|
|
597
|
+
if (r instanceof Date) return r.toISOString();
|
|
598
|
+
if (typeof r == "object") return JSON.stringify(r);
|
|
599
|
+
const t = String(r);
|
|
600
600
|
return e && (t.includes(",") || t.includes('"') || t.includes(`
|
|
601
601
|
`) || t.includes("\r")) ? `"${t.replace(/"/g, '""')}"` : t;
|
|
602
602
|
}
|
|
603
|
-
function
|
|
604
|
-
const
|
|
605
|
-
`,
|
|
603
|
+
function je(r, e, t, n = {}) {
|
|
604
|
+
const o = n.delimiter ?? ",", i = n.newline ?? `
|
|
605
|
+
`, s = [], l = n.bom ? "\uFEFF" : "";
|
|
606
606
|
if (t.includeHeaders !== !1) {
|
|
607
607
|
const a = e.map((d) => {
|
|
608
608
|
const c = d.header || d.field, u = t.processHeader ? t.processHeader(c, d.field) : c;
|
|
609
|
-
return
|
|
609
|
+
return pe(u);
|
|
610
610
|
});
|
|
611
|
-
|
|
611
|
+
s.push(a.join(o));
|
|
612
612
|
}
|
|
613
|
-
for (const a of
|
|
613
|
+
for (const a of r) {
|
|
614
614
|
const d = e.map((c) => {
|
|
615
615
|
let u = a[c.field];
|
|
616
|
-
return t.processCell && (u = t.processCell(u, c.field, a)),
|
|
616
|
+
return t.processCell && (u = t.processCell(u, c.field, a)), pe(u);
|
|
617
617
|
});
|
|
618
|
-
|
|
618
|
+
s.push(d.join(o));
|
|
619
619
|
}
|
|
620
|
-
return l +
|
|
620
|
+
return l + s.join(i);
|
|
621
621
|
}
|
|
622
|
-
function
|
|
623
|
-
const t = URL.createObjectURL(
|
|
624
|
-
|
|
622
|
+
function ee(r, e) {
|
|
623
|
+
const t = URL.createObjectURL(r), n = document.createElement("a");
|
|
624
|
+
n.href = t, n.download = e, n.style.display = "none", document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(t);
|
|
625
625
|
}
|
|
626
|
-
function
|
|
627
|
-
const t = new Blob([
|
|
628
|
-
|
|
626
|
+
function Ue(r, e) {
|
|
627
|
+
const t = new Blob([r], { type: "text/csv;charset=utf-8;" });
|
|
628
|
+
ee(t, e);
|
|
629
629
|
}
|
|
630
|
-
function
|
|
631
|
-
return
|
|
630
|
+
function fe(r) {
|
|
631
|
+
return r.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
632
632
|
}
|
|
633
|
-
function
|
|
634
|
-
let
|
|
633
|
+
function Ye(r, e, t) {
|
|
634
|
+
let n = `<?xml version="1.0" encoding="UTF-8"?>
|
|
635
635
|
<?mso-application progid="Excel.Sheet"?>
|
|
636
636
|
<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
|
|
637
637
|
xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
|
|
638
638
|
<Worksheet ss:Name="Sheet1">
|
|
639
639
|
<Table>`;
|
|
640
640
|
if (t.includeHeaders !== !1) {
|
|
641
|
-
|
|
641
|
+
n += `
|
|
642
642
|
<Row>`;
|
|
643
|
-
for (const
|
|
644
|
-
const i =
|
|
645
|
-
|
|
643
|
+
for (const o of e) {
|
|
644
|
+
const i = o.header || o.field, s = t.processHeader ? t.processHeader(i, o.field) : i;
|
|
645
|
+
n += `<Cell><Data ss:Type="String">${fe(s)}</Data></Cell>`;
|
|
646
646
|
}
|
|
647
|
-
|
|
647
|
+
n += "</Row>";
|
|
648
648
|
}
|
|
649
|
-
for (const
|
|
650
|
-
|
|
649
|
+
for (const o of r) {
|
|
650
|
+
n += `
|
|
651
651
|
<Row>`;
|
|
652
652
|
for (const i of e) {
|
|
653
|
-
let
|
|
654
|
-
t.processCell && (
|
|
653
|
+
let s = o[i.field];
|
|
654
|
+
t.processCell && (s = t.processCell(s, i.field, o));
|
|
655
655
|
let l = "String", a = "";
|
|
656
|
-
|
|
656
|
+
s == null ? a = "" : typeof s == "number" && !isNaN(s) ? (l = "Number", a = String(s)) : s instanceof Date ? (l = "DateTime", a = s.toISOString()) : a = fe(String(s)), n += `<Cell><Data ss:Type="${l}">${a}</Data></Cell>`;
|
|
657
657
|
}
|
|
658
|
-
|
|
658
|
+
n += "</Row>";
|
|
659
659
|
}
|
|
660
|
-
return
|
|
660
|
+
return n += `
|
|
661
661
|
</Table>
|
|
662
662
|
</Worksheet>
|
|
663
|
-
</Workbook>`,
|
|
663
|
+
</Workbook>`, n;
|
|
664
664
|
}
|
|
665
|
-
function
|
|
666
|
-
const t = e.endsWith(".xls") ? e : `${e}.xls`,
|
|
665
|
+
function Ze(r, e) {
|
|
666
|
+
const t = e.endsWith(".xls") ? e : `${e}.xls`, n = new Blob([r], {
|
|
667
667
|
type: "application/vnd.ms-excel;charset=utf-8;"
|
|
668
668
|
});
|
|
669
|
-
|
|
669
|
+
ee(n, t);
|
|
670
670
|
}
|
|
671
|
-
class
|
|
671
|
+
class vn extends x {
|
|
672
672
|
name = "export";
|
|
673
673
|
version = "1.0.0";
|
|
674
674
|
get defaultConfig() {
|
|
@@ -684,58 +684,58 @@ class Jt extends C {
|
|
|
684
684
|
lastExportInfo = null;
|
|
685
685
|
// ===== Private Methods =====
|
|
686
686
|
performExport(e, t) {
|
|
687
|
-
const
|
|
687
|
+
const n = this.config, o = {
|
|
688
688
|
format: e,
|
|
689
|
-
fileName: t?.fileName ??
|
|
690
|
-
includeHeaders: t?.includeHeaders ??
|
|
689
|
+
fileName: t?.fileName ?? n.fileName ?? "export",
|
|
690
|
+
includeHeaders: t?.includeHeaders ?? n.includeHeaders,
|
|
691
691
|
processCell: t?.processCell,
|
|
692
692
|
processHeader: t?.processHeader,
|
|
693
693
|
columns: t?.columns,
|
|
694
694
|
rowIndices: t?.rowIndices
|
|
695
695
|
};
|
|
696
696
|
let i = [...this.columns];
|
|
697
|
-
if (
|
|
697
|
+
if (n.onlyVisible && (i = i.filter((a) => !a.hidden && !a.field.startsWith("__"))), t?.columns) {
|
|
698
698
|
const a = new Set(t.columns);
|
|
699
699
|
i = i.filter((d) => a.has(d.field));
|
|
700
700
|
}
|
|
701
|
-
let
|
|
702
|
-
if (
|
|
701
|
+
let s = [...this.rows];
|
|
702
|
+
if (n.onlySelected) {
|
|
703
703
|
const a = this.getSelectionState();
|
|
704
|
-
a?.selected?.size && (
|
|
704
|
+
a?.selected?.size && (s = [...a.selected].sort((c, u) => c - u).map((c) => this.rows[c]).filter(Boolean));
|
|
705
705
|
}
|
|
706
|
-
t?.rowIndices && (
|
|
707
|
-
let l =
|
|
706
|
+
t?.rowIndices && (s = t.rowIndices.map((a) => this.rows[a]).filter(Boolean)), this.isExportingFlag = !0;
|
|
707
|
+
let l = o.fileName;
|
|
708
708
|
try {
|
|
709
709
|
switch (e) {
|
|
710
710
|
case "csv": {
|
|
711
|
-
const a =
|
|
712
|
-
l = l.endsWith(".csv") ? l : `${l}.csv`,
|
|
711
|
+
const a = je(s, i, o, { bom: !0 });
|
|
712
|
+
l = l.endsWith(".csv") ? l : `${l}.csv`, Ue(a, l);
|
|
713
713
|
break;
|
|
714
714
|
}
|
|
715
715
|
case "excel": {
|
|
716
|
-
const a =
|
|
717
|
-
l = l.endsWith(".xls") ? l : `${l}.xls`,
|
|
716
|
+
const a = Ye(s, i, o);
|
|
717
|
+
l = l.endsWith(".xls") ? l : `${l}.xls`, Ze(a, l);
|
|
718
718
|
break;
|
|
719
719
|
}
|
|
720
720
|
case "json": {
|
|
721
|
-
const a =
|
|
721
|
+
const a = s.map((u) => {
|
|
722
722
|
const h = {};
|
|
723
|
-
for (const
|
|
724
|
-
let
|
|
725
|
-
|
|
723
|
+
for (const g of i) {
|
|
724
|
+
let p = u[g.field];
|
|
725
|
+
o.processCell && (p = o.processCell(p, g.field, u)), h[g.field] = p;
|
|
726
726
|
}
|
|
727
727
|
return h;
|
|
728
728
|
}), d = JSON.stringify(a, null, 2);
|
|
729
729
|
l = l.endsWith(".json") ? l : `${l}.json`;
|
|
730
730
|
const c = new Blob([d], { type: "application/json" });
|
|
731
|
-
|
|
731
|
+
ee(c, l);
|
|
732
732
|
break;
|
|
733
733
|
}
|
|
734
734
|
}
|
|
735
735
|
this.lastExportInfo = { format: e, timestamp: /* @__PURE__ */ new Date() }, this.emit("export-complete", {
|
|
736
736
|
format: e,
|
|
737
737
|
fileName: l,
|
|
738
|
-
rowCount:
|
|
738
|
+
rowCount: s.length,
|
|
739
739
|
columnCount: i.length
|
|
740
740
|
});
|
|
741
741
|
} finally {
|
|
@@ -786,69 +786,69 @@ class Jt extends C {
|
|
|
786
786
|
return this.lastExportInfo;
|
|
787
787
|
}
|
|
788
788
|
}
|
|
789
|
-
function
|
|
790
|
-
const { totalRows: e, viewportHeight: t, scrollTop:
|
|
791
|
-
let l = Math.floor(
|
|
789
|
+
function Xe(r) {
|
|
790
|
+
const { totalRows: e, viewportHeight: t, scrollTop: n, rowHeight: o, overscan: i } = r, s = Math.ceil(t / o);
|
|
791
|
+
let l = Math.floor(n / o) - i;
|
|
792
792
|
l < 0 && (l = 0);
|
|
793
|
-
let a = l +
|
|
794
|
-
return a > e && (a = e), a === e && l > 0 && (l = Math.max(0, a -
|
|
793
|
+
let a = l + s + i * 2;
|
|
794
|
+
return a > e && (a = e), a === e && l > 0 && (l = Math.max(0, a - s - i * 2)), {
|
|
795
795
|
start: l,
|
|
796
796
|
end: a,
|
|
797
|
-
offsetY: l *
|
|
798
|
-
totalHeight: e *
|
|
797
|
+
offsetY: l * o,
|
|
798
|
+
totalHeight: e * o
|
|
799
799
|
};
|
|
800
800
|
}
|
|
801
|
-
function
|
|
802
|
-
return
|
|
801
|
+
function Je(r, e) {
|
|
802
|
+
return r <= e;
|
|
803
803
|
}
|
|
804
|
-
function
|
|
805
|
-
const
|
|
804
|
+
function Qe(r, e, t = !1) {
|
|
805
|
+
const n = r[e.field];
|
|
806
806
|
if (e.operator === "blank")
|
|
807
|
-
return
|
|
807
|
+
return n == null || n === "";
|
|
808
808
|
if (e.operator === "notBlank")
|
|
809
|
-
return
|
|
810
|
-
if (
|
|
811
|
-
const
|
|
809
|
+
return n != null && n !== "";
|
|
810
|
+
if (n == null) return !1;
|
|
811
|
+
const o = String(n), i = t ? o : o.toLowerCase(), s = t ? String(e.value) : String(e.value).toLowerCase();
|
|
812
812
|
switch (e.operator) {
|
|
813
813
|
// Text operators
|
|
814
814
|
case "contains":
|
|
815
|
-
return i.includes(
|
|
815
|
+
return i.includes(s);
|
|
816
816
|
case "notContains":
|
|
817
|
-
return !i.includes(
|
|
817
|
+
return !i.includes(s);
|
|
818
818
|
case "equals":
|
|
819
|
-
return i ===
|
|
819
|
+
return i === s;
|
|
820
820
|
case "notEquals":
|
|
821
|
-
return i !==
|
|
821
|
+
return i !== s;
|
|
822
822
|
case "startsWith":
|
|
823
|
-
return i.startsWith(
|
|
823
|
+
return i.startsWith(s);
|
|
824
824
|
case "endsWith":
|
|
825
|
-
return i.endsWith(
|
|
825
|
+
return i.endsWith(s);
|
|
826
826
|
// Number/Date operators (use raw numeric values)
|
|
827
827
|
case "lessThan":
|
|
828
|
-
return Number(
|
|
828
|
+
return Number(n) < Number(e.value);
|
|
829
829
|
case "lessThanOrEqual":
|
|
830
|
-
return Number(
|
|
830
|
+
return Number(n) <= Number(e.value);
|
|
831
831
|
case "greaterThan":
|
|
832
|
-
return Number(
|
|
832
|
+
return Number(n) > Number(e.value);
|
|
833
833
|
case "greaterThanOrEqual":
|
|
834
|
-
return Number(
|
|
834
|
+
return Number(n) >= Number(e.value);
|
|
835
835
|
case "between":
|
|
836
|
-
return Number(
|
|
836
|
+
return Number(n) >= Number(e.value) && Number(n) <= Number(e.valueTo);
|
|
837
837
|
// Set operators
|
|
838
838
|
case "in":
|
|
839
|
-
return Array.isArray(e.value) && e.value.includes(
|
|
839
|
+
return Array.isArray(e.value) && e.value.includes(n);
|
|
840
840
|
case "notIn":
|
|
841
|
-
return Array.isArray(e.value) && !e.value.includes(
|
|
841
|
+
return Array.isArray(e.value) && !e.value.includes(n);
|
|
842
842
|
default:
|
|
843
843
|
return !0;
|
|
844
844
|
}
|
|
845
845
|
}
|
|
846
|
-
function
|
|
847
|
-
return e.length ?
|
|
846
|
+
function et(r, e, t = !1) {
|
|
847
|
+
return e.length ? r.filter((n) => e.every((o) => Qe(n, o, t))) : r;
|
|
848
848
|
}
|
|
849
|
-
function
|
|
849
|
+
function tt(r) {
|
|
850
850
|
return JSON.stringify(
|
|
851
|
-
|
|
851
|
+
r.map((e) => ({
|
|
852
852
|
field: e.field,
|
|
853
853
|
operator: e.operator,
|
|
854
854
|
value: e.value,
|
|
@@ -856,15 +856,15 @@ function We(s) {
|
|
|
856
856
|
}))
|
|
857
857
|
);
|
|
858
858
|
}
|
|
859
|
-
function
|
|
859
|
+
function me(r, e) {
|
|
860
860
|
const t = /* @__PURE__ */ new Set();
|
|
861
|
-
for (const
|
|
862
|
-
const
|
|
863
|
-
|
|
861
|
+
for (const n of r) {
|
|
862
|
+
const o = n[e];
|
|
863
|
+
o != null && t.add(o);
|
|
864
864
|
}
|
|
865
|
-
return [...t].sort((
|
|
865
|
+
return [...t].sort((n, o) => typeof n == "number" && typeof o == "number" ? n - o : String(n).localeCompare(String(o)));
|
|
866
866
|
}
|
|
867
|
-
const
|
|
867
|
+
const nt = '.header-cell.filtered:before{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:50%}.tbw-filter-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;margin-left:4px;opacity:.4;transition:opacity .15s;color:inherit;vertical-align:middle}.tbw-filter-btn:hover,.tbw-filter-btn.active{opacity:1}.tbw-filter-btn.active{color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}', ot = `
|
|
868
868
|
.tbw-filter-panel {
|
|
869
869
|
position: fixed;
|
|
870
870
|
background: var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));
|
|
@@ -1006,7 +1006,7 @@ const $e = '.header-cell.filtered:before{content:"";position:absolute;top:4px;ri
|
|
|
1006
1006
|
background: var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)));
|
|
1007
1007
|
}
|
|
1008
1008
|
`;
|
|
1009
|
-
class A extends
|
|
1009
|
+
class A extends x {
|
|
1010
1010
|
name = "filtering";
|
|
1011
1011
|
version = "1.0.0";
|
|
1012
1012
|
get defaultConfig() {
|
|
@@ -1044,26 +1044,26 @@ class A extends C {
|
|
|
1044
1044
|
processRows(e) {
|
|
1045
1045
|
const t = [...this.filters.values()];
|
|
1046
1046
|
if (!t.length) return [...e];
|
|
1047
|
-
const
|
|
1048
|
-
if (this.cacheKey ===
|
|
1047
|
+
const n = tt(t);
|
|
1048
|
+
if (this.cacheKey === n && this.cachedResult)
|
|
1049
1049
|
return this.cachedResult;
|
|
1050
|
-
const
|
|
1051
|
-
return this.cachedResult =
|
|
1050
|
+
const o = et([...e], t, this.config.caseSensitive);
|
|
1051
|
+
return this.cachedResult = o, this.cacheKey = n, o;
|
|
1052
1052
|
}
|
|
1053
1053
|
afterRender() {
|
|
1054
1054
|
const e = this.shadowRoot;
|
|
1055
1055
|
if (!e) return;
|
|
1056
|
-
e.querySelectorAll('[part~="header-cell"]').forEach((
|
|
1057
|
-
const
|
|
1058
|
-
if (
|
|
1059
|
-
const i = this.columns[parseInt(
|
|
1060
|
-
if (!i || i.filterable === !1 ||
|
|
1061
|
-
const
|
|
1062
|
-
if (!
|
|
1056
|
+
e.querySelectorAll('[part~="header-cell"]').forEach((n) => {
|
|
1057
|
+
const o = n.getAttribute("data-col");
|
|
1058
|
+
if (o === null) return;
|
|
1059
|
+
const i = this.columns[parseInt(o, 10)];
|
|
1060
|
+
if (!i || i.filterable === !1 || n.querySelector(".tbw-filter-btn")) return;
|
|
1061
|
+
const s = i.field;
|
|
1062
|
+
if (!s) return;
|
|
1063
1063
|
const l = document.createElement("button");
|
|
1064
|
-
l.className = "tbw-filter-btn", l.setAttribute("aria-label", `Filter ${i.header ??
|
|
1065
|
-
a.stopPropagation(), this.toggleFilterPanel(
|
|
1066
|
-
}),
|
|
1064
|
+
l.className = "tbw-filter-btn", l.setAttribute("aria-label", `Filter ${i.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) => {
|
|
1065
|
+
a.stopPropagation(), this.toggleFilterPanel(s, i, l);
|
|
1066
|
+
}), n.appendChild(l);
|
|
1067
1067
|
});
|
|
1068
1068
|
}
|
|
1069
1069
|
// ===== Public API =====
|
|
@@ -1149,7 +1149,7 @@ class A extends C {
|
|
|
1149
1149
|
* Uses sourceRows to include all values regardless of current filter.
|
|
1150
1150
|
*/
|
|
1151
1151
|
getUniqueValues(e) {
|
|
1152
|
-
return
|
|
1152
|
+
return me(this.sourceRows, e);
|
|
1153
1153
|
}
|
|
1154
1154
|
// ===== Private Methods =====
|
|
1155
1155
|
/**
|
|
@@ -1162,27 +1162,27 @@ class A extends C {
|
|
|
1162
1162
|
return;
|
|
1163
1163
|
}
|
|
1164
1164
|
const e = document.createElement("style");
|
|
1165
|
-
e.id = "tbw-filter-panel-styles", e.textContent =
|
|
1165
|
+
e.id = "tbw-filter-panel-styles", e.textContent = ot, document.head.appendChild(e), this.globalStylesInjected = !0;
|
|
1166
1166
|
}
|
|
1167
1167
|
/**
|
|
1168
1168
|
* Toggle the filter panel for a field
|
|
1169
1169
|
*/
|
|
1170
|
-
toggleFilterPanel(e, t,
|
|
1170
|
+
toggleFilterPanel(e, t, n) {
|
|
1171
1171
|
if (this.openPanelField === e) {
|
|
1172
1172
|
this.closeFilterPanel();
|
|
1173
1173
|
return;
|
|
1174
1174
|
}
|
|
1175
1175
|
this.closeFilterPanel();
|
|
1176
|
-
const
|
|
1177
|
-
|
|
1178
|
-
const i =
|
|
1179
|
-
let
|
|
1180
|
-
|
|
1176
|
+
const o = document.createElement("div");
|
|
1177
|
+
o.className = "tbw-filter-panel", this.panelElement = o, this.openPanelField = e;
|
|
1178
|
+
const i = me(this.sourceRows, e);
|
|
1179
|
+
let s = this.excludedValues.get(e);
|
|
1180
|
+
s || (s = /* @__PURE__ */ new Set(), this.excludedValues.set(e, s));
|
|
1181
1181
|
const l = this.searchText.get(e) ?? "", a = {
|
|
1182
1182
|
field: e,
|
|
1183
1183
|
column: t,
|
|
1184
1184
|
uniqueValues: i,
|
|
1185
|
-
excludedValues:
|
|
1185
|
+
excludedValues: s,
|
|
1186
1186
|
searchText: l,
|
|
1187
1187
|
applySetFilter: (c) => {
|
|
1188
1188
|
this.applySetFilter(e, c), this.closeFilterPanel();
|
|
@@ -1196,11 +1196,11 @@ class A extends C {
|
|
|
1196
1196
|
closePanel: () => this.closeFilterPanel()
|
|
1197
1197
|
};
|
|
1198
1198
|
let d = !1;
|
|
1199
|
-
this.config.filterPanelRenderer && (this.config.filterPanelRenderer(
|
|
1199
|
+
this.config.filterPanelRenderer && (this.config.filterPanelRenderer(o, a), d = o.children.length > 0), d || this.renderDefaultFilterPanel(o, a, i, s), document.body.appendChild(o), this.positionPanel(o, n), this.panelAbortController = new AbortController(), setTimeout(() => {
|
|
1200
1200
|
document.addEventListener(
|
|
1201
1201
|
"click",
|
|
1202
1202
|
(c) => {
|
|
1203
|
-
!
|
|
1203
|
+
!o.contains(c.target) && c.target !== n && this.closeFilterPanel();
|
|
1204
1204
|
},
|
|
1205
1205
|
{ signal: this.panelAbortController?.signal }
|
|
1206
1206
|
);
|
|
@@ -1216,20 +1216,20 @@ class A extends C {
|
|
|
1216
1216
|
* Position the panel below the button
|
|
1217
1217
|
*/
|
|
1218
1218
|
positionPanel(e, t) {
|
|
1219
|
-
const
|
|
1220
|
-
e.style.position = "fixed", e.style.top = `${
|
|
1221
|
-
const
|
|
1222
|
-
|
|
1219
|
+
const n = t.getBoundingClientRect();
|
|
1220
|
+
e.style.position = "fixed", e.style.top = `${n.bottom + 4}px`, e.style.left = `${n.left}px`, requestAnimationFrame(() => {
|
|
1221
|
+
const o = e.getBoundingClientRect();
|
|
1222
|
+
o.right > window.innerWidth - 8 && (e.style.left = `${window.innerWidth - o.width - 8}px`), o.bottom > window.innerHeight - 8 && (e.style.top = `${n.top - o.height - 4}px`);
|
|
1223
1223
|
});
|
|
1224
1224
|
}
|
|
1225
1225
|
/**
|
|
1226
1226
|
* Render the default filter panel content
|
|
1227
1227
|
*/
|
|
1228
|
-
renderDefaultFilterPanel(e, t,
|
|
1229
|
-
const { field: i } = t,
|
|
1230
|
-
|
|
1228
|
+
renderDefaultFilterPanel(e, t, n, o) {
|
|
1229
|
+
const { field: i } = t, s = document.createElement("div");
|
|
1230
|
+
s.className = "tbw-filter-search";
|
|
1231
1231
|
const l = document.createElement("input");
|
|
1232
|
-
l.type = "text", l.placeholder = "Search...", l.className = "tbw-filter-search-input", l.value = this.searchText.get(i) ?? "",
|
|
1232
|
+
l.type = "text", l.placeholder = "Search...", l.className = "tbw-filter-search-input", l.value = this.searchText.get(i) ?? "", s.appendChild(l), e.appendChild(s);
|
|
1233
1233
|
const a = document.createElement("div");
|
|
1234
1234
|
a.className = "tbw-filter-actions";
|
|
1235
1235
|
const d = document.createElement("label");
|
|
@@ -1239,99 +1239,99 @@ class A extends C {
|
|
|
1239
1239
|
const u = document.createElement("span");
|
|
1240
1240
|
u.textContent = "Select All", d.appendChild(c), d.appendChild(u), a.appendChild(d);
|
|
1241
1241
|
const h = () => {
|
|
1242
|
-
const
|
|
1243
|
-
c.checked =
|
|
1242
|
+
const b = [...m.values()], y = b.every((C) => C), R = b.every((C) => !C);
|
|
1243
|
+
c.checked = y, c.indeterminate = !y && !R;
|
|
1244
1244
|
};
|
|
1245
1245
|
c.addEventListener("change", () => {
|
|
1246
|
-
const
|
|
1247
|
-
for (const
|
|
1248
|
-
|
|
1249
|
-
h(),
|
|
1246
|
+
const b = c.checked;
|
|
1247
|
+
for (const y of m.keys())
|
|
1248
|
+
m.set(y, b);
|
|
1249
|
+
h(), K();
|
|
1250
1250
|
}), e.appendChild(a);
|
|
1251
|
-
const p = document.createElement("div");
|
|
1252
|
-
p.className = "tbw-filter-values";
|
|
1253
1251
|
const g = document.createElement("div");
|
|
1254
|
-
g.className = "tbw-filter-values
|
|
1255
|
-
const
|
|
1256
|
-
|
|
1257
|
-
const
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1252
|
+
g.className = "tbw-filter-values";
|
|
1253
|
+
const p = document.createElement("div");
|
|
1254
|
+
p.className = "tbw-filter-values-spacer", g.appendChild(p);
|
|
1255
|
+
const f = document.createElement("div");
|
|
1256
|
+
f.className = "tbw-filter-values-content", g.appendChild(f);
|
|
1257
|
+
const m = /* @__PURE__ */ new Map();
|
|
1258
|
+
n.forEach((b) => {
|
|
1259
|
+
const y = b == null ? "__null__" : String(b);
|
|
1260
|
+
m.set(y, !o.has(b));
|
|
1261
1261
|
}), h();
|
|
1262
|
-
let
|
|
1263
|
-
const k = (
|
|
1264
|
-
const
|
|
1265
|
-
|
|
1262
|
+
let w = [];
|
|
1263
|
+
const k = (b, y) => {
|
|
1264
|
+
const R = b == null ? "(Blank)" : String(b), C = b == null ? "__null__" : String(b), v = document.createElement("label");
|
|
1265
|
+
v.className = "tbw-filter-value-item", v.style.position = "absolute", v.style.top = `${y * A.LIST_ITEM_HEIGHT}px`, v.style.left = "0", v.style.right = "0", v.style.height = `${A.LIST_ITEM_HEIGHT}px`, v.style.boxSizing = "border-box";
|
|
1266
1266
|
const S = document.createElement("input");
|
|
1267
|
-
S.type = "checkbox", S.className = "tbw-filter-checkbox", S.checked =
|
|
1268
|
-
|
|
1267
|
+
S.type = "checkbox", S.className = "tbw-filter-checkbox", S.checked = m.get(C) ?? !0, S.dataset.value = C, S.addEventListener("change", () => {
|
|
1268
|
+
m.set(C, S.checked), h();
|
|
1269
1269
|
});
|
|
1270
|
-
const
|
|
1271
|
-
return
|
|
1272
|
-
},
|
|
1273
|
-
const
|
|
1274
|
-
if (
|
|
1275
|
-
|
|
1276
|
-
|
|
1270
|
+
const re = document.createElement("span");
|
|
1271
|
+
return re.textContent = R, v.appendChild(S), v.appendChild(re), v;
|
|
1272
|
+
}, K = () => {
|
|
1273
|
+
const b = w.length, y = g.clientHeight, R = g.scrollTop;
|
|
1274
|
+
if (p.style.height = `${b * A.LIST_ITEM_HEIGHT}px`, Je(b, A.LIST_BYPASS_THRESHOLD / 3)) {
|
|
1275
|
+
f.innerHTML = "", f.style.transform = "translateY(0px)", w.forEach((v, S) => {
|
|
1276
|
+
f.appendChild(k(v, S));
|
|
1277
1277
|
});
|
|
1278
1278
|
return;
|
|
1279
1279
|
}
|
|
1280
|
-
const
|
|
1281
|
-
totalRows:
|
|
1282
|
-
viewportHeight:
|
|
1283
|
-
scrollTop:
|
|
1280
|
+
const C = Xe({
|
|
1281
|
+
totalRows: b,
|
|
1282
|
+
viewportHeight: y,
|
|
1283
|
+
scrollTop: R,
|
|
1284
1284
|
rowHeight: A.LIST_ITEM_HEIGHT,
|
|
1285
1285
|
overscan: A.LIST_OVERSCAN
|
|
1286
1286
|
});
|
|
1287
|
-
|
|
1288
|
-
for (let
|
|
1289
|
-
|
|
1290
|
-
},
|
|
1291
|
-
const
|
|
1292
|
-
if (
|
|
1293
|
-
const
|
|
1294
|
-
return !
|
|
1295
|
-
}),
|
|
1296
|
-
|
|
1297
|
-
const
|
|
1298
|
-
|
|
1287
|
+
f.style.transform = `translateY(${C.offsetY}px)`, f.innerHTML = "";
|
|
1288
|
+
for (let v = C.start; v < C.end; v++)
|
|
1289
|
+
f.appendChild(k(w[v], v - C.start));
|
|
1290
|
+
}, oe = (b) => {
|
|
1291
|
+
const y = b.toLowerCase();
|
|
1292
|
+
if (w = n.filter((R) => {
|
|
1293
|
+
const C = R == null ? "(Blank)" : String(R);
|
|
1294
|
+
return !b || C.toLowerCase().includes(y);
|
|
1295
|
+
}), w.length === 0) {
|
|
1296
|
+
p.style.height = "0px", f.innerHTML = "";
|
|
1297
|
+
const R = document.createElement("div");
|
|
1298
|
+
R.className = "tbw-filter-no-match", R.textContent = "No matching values", f.appendChild(R);
|
|
1299
1299
|
return;
|
|
1300
1300
|
}
|
|
1301
|
-
|
|
1301
|
+
K();
|
|
1302
1302
|
};
|
|
1303
|
-
|
|
1303
|
+
g.addEventListener(
|
|
1304
1304
|
"scroll",
|
|
1305
1305
|
() => {
|
|
1306
|
-
|
|
1306
|
+
w.length > 0 && K();
|
|
1307
1307
|
},
|
|
1308
1308
|
{ passive: !0 }
|
|
1309
|
-
),
|
|
1310
|
-
let
|
|
1309
|
+
), oe(l.value), e.appendChild(g);
|
|
1310
|
+
let ie;
|
|
1311
1311
|
l.addEventListener("input", () => {
|
|
1312
|
-
clearTimeout(
|
|
1313
|
-
this.searchText.set(i, l.value),
|
|
1312
|
+
clearTimeout(ie), ie = setTimeout(() => {
|
|
1313
|
+
this.searchText.set(i, l.value), oe(l.value);
|
|
1314
1314
|
}, this.config.debounceMs ?? 150);
|
|
1315
1315
|
});
|
|
1316
|
-
const
|
|
1317
|
-
|
|
1318
|
-
const
|
|
1319
|
-
|
|
1320
|
-
const
|
|
1321
|
-
for (const [
|
|
1322
|
-
if (!
|
|
1323
|
-
if (
|
|
1324
|
-
|
|
1316
|
+
const M = document.createElement("div");
|
|
1317
|
+
M.className = "tbw-filter-buttons";
|
|
1318
|
+
const N = document.createElement("button");
|
|
1319
|
+
N.className = "tbw-filter-apply-btn", N.textContent = "Apply", N.addEventListener("click", () => {
|
|
1320
|
+
const b = [];
|
|
1321
|
+
for (const [y, R] of m)
|
|
1322
|
+
if (!R)
|
|
1323
|
+
if (y === "__null__")
|
|
1324
|
+
b.push(null);
|
|
1325
1325
|
else {
|
|
1326
|
-
const
|
|
1327
|
-
|
|
1326
|
+
const C = n.find((v) => String(v) === y);
|
|
1327
|
+
b.push(C !== void 0 ? C : y);
|
|
1328
1328
|
}
|
|
1329
|
-
t.applySetFilter(
|
|
1330
|
-
}),
|
|
1329
|
+
t.applySetFilter(b);
|
|
1330
|
+
}), M.appendChild(N);
|
|
1331
1331
|
const P = document.createElement("button");
|
|
1332
1332
|
P.className = "tbw-filter-clear-btn", P.textContent = "Clear Filter", P.addEventListener("click", () => {
|
|
1333
1333
|
t.clearFilter();
|
|
1334
|
-
}),
|
|
1334
|
+
}), M.appendChild(P), e.appendChild(M);
|
|
1335
1335
|
}
|
|
1336
1336
|
/**
|
|
1337
1337
|
* Apply a set filter (exclude values)
|
|
@@ -1350,13 +1350,13 @@ class A extends C {
|
|
|
1350
1350
|
/**
|
|
1351
1351
|
* Apply a text filter
|
|
1352
1352
|
*/
|
|
1353
|
-
applyTextFilter(e, t,
|
|
1353
|
+
applyTextFilter(e, t, n, o) {
|
|
1354
1354
|
this.filters.set(e, {
|
|
1355
1355
|
field: e,
|
|
1356
1356
|
type: "text",
|
|
1357
1357
|
operator: t,
|
|
1358
|
-
value:
|
|
1359
|
-
valueTo:
|
|
1358
|
+
value: n,
|
|
1359
|
+
valueTo: o
|
|
1360
1360
|
}), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
|
|
1361
1361
|
filters: [...this.filters.values()],
|
|
1362
1362
|
filteredRowCount: 0
|
|
@@ -1386,43 +1386,43 @@ class A extends C {
|
|
|
1386
1386
|
this.filters.delete(e);
|
|
1387
1387
|
return;
|
|
1388
1388
|
}
|
|
1389
|
-
const
|
|
1389
|
+
const n = {
|
|
1390
1390
|
field: e,
|
|
1391
1391
|
type: t.filter.type,
|
|
1392
1392
|
operator: t.filter.operator,
|
|
1393
1393
|
value: t.filter.value,
|
|
1394
1394
|
valueTo: t.filter.valueTo
|
|
1395
1395
|
};
|
|
1396
|
-
this.filters.set(e,
|
|
1396
|
+
this.filters.set(e, n), this.cachedResult = null, this.cacheKey = null;
|
|
1397
1397
|
}
|
|
1398
1398
|
// ===== Styles =====
|
|
1399
|
-
styles =
|
|
1399
|
+
styles = nt;
|
|
1400
1400
|
}
|
|
1401
|
-
function
|
|
1402
|
-
if (!
|
|
1403
|
-
const e = /* @__PURE__ */ new Map(), t = [],
|
|
1401
|
+
function it(r) {
|
|
1402
|
+
if (!r.length) return [];
|
|
1403
|
+
const e = /* @__PURE__ */ new Map(), t = [], n = (s, l) => {
|
|
1404
1404
|
if (!l.length) return;
|
|
1405
1405
|
const a = t[t.length - 1];
|
|
1406
|
-
if (a && a.implicit && a.firstIndex + a.columns.length ===
|
|
1406
|
+
if (a && a.implicit && a.firstIndex + a.columns.length === s) {
|
|
1407
1407
|
a.columns.push(...l);
|
|
1408
1408
|
return;
|
|
1409
1409
|
}
|
|
1410
1410
|
t.push({
|
|
1411
|
-
id: "__implicit__" +
|
|
1411
|
+
id: "__implicit__" + s,
|
|
1412
1412
|
label: void 0,
|
|
1413
1413
|
columns: l,
|
|
1414
|
-
firstIndex:
|
|
1414
|
+
firstIndex: s,
|
|
1415
1415
|
implicit: !0
|
|
1416
1416
|
});
|
|
1417
1417
|
};
|
|
1418
|
-
let
|
|
1419
|
-
return
|
|
1420
|
-
const a =
|
|
1418
|
+
let o = [], i = 0;
|
|
1419
|
+
return r.forEach((s, l) => {
|
|
1420
|
+
const a = s.group;
|
|
1421
1421
|
if (!a) {
|
|
1422
|
-
|
|
1422
|
+
o.length === 0 && (i = l), o.push(s);
|
|
1423
1423
|
return;
|
|
1424
1424
|
}
|
|
1425
|
-
|
|
1425
|
+
o.length && (n(i, o.slice()), o = []);
|
|
1426
1426
|
const d = typeof a == "string" ? a : a.id;
|
|
1427
1427
|
let c = e.get(d);
|
|
1428
1428
|
c || (c = {
|
|
@@ -1430,40 +1430,40 @@ function Ue(s) {
|
|
|
1430
1430
|
label: typeof a == "string" ? void 0 : a.label,
|
|
1431
1431
|
columns: [],
|
|
1432
1432
|
firstIndex: l
|
|
1433
|
-
}, e.set(d, c), t.push(c)), c.columns.push(
|
|
1434
|
-
}),
|
|
1433
|
+
}, e.set(d, c), t.push(c)), c.columns.push(s);
|
|
1434
|
+
}), o.length && n(i, o), t.length === 1 && t[0].implicit && t[0].columns.length === r.length ? [] : t;
|
|
1435
1435
|
}
|
|
1436
|
-
function
|
|
1437
|
-
if (!e.length || !
|
|
1438
|
-
const
|
|
1436
|
+
function rt(r, e, t) {
|
|
1437
|
+
if (!e.length || !r) return;
|
|
1438
|
+
const n = /* @__PURE__ */ new Map();
|
|
1439
1439
|
for (const i of e)
|
|
1440
|
-
for (const
|
|
1441
|
-
|
|
1442
|
-
const
|
|
1443
|
-
|
|
1444
|
-
const
|
|
1440
|
+
for (const s of i.columns)
|
|
1441
|
+
s?.field && n.set(s.field, i.id);
|
|
1442
|
+
const o = Array.from(r.querySelectorAll(".cell[data-field]"));
|
|
1443
|
+
o.forEach((i) => {
|
|
1444
|
+
const s = i.getAttribute("data-field") || "", l = n.get(s);
|
|
1445
1445
|
l && (i.classList.add("grouped"), i.getAttribute("data-group") || i.setAttribute("data-group", l));
|
|
1446
1446
|
});
|
|
1447
1447
|
for (const i of e) {
|
|
1448
|
-
const
|
|
1448
|
+
const s = i.columns[i.columns.length - 1], l = o.find((a) => a.getAttribute("data-field") === s.field);
|
|
1449
1449
|
l && l.classList.add("group-end");
|
|
1450
1450
|
}
|
|
1451
1451
|
}
|
|
1452
|
-
function
|
|
1453
|
-
if (
|
|
1452
|
+
function st(r, e) {
|
|
1453
|
+
if (r.length === 0) return null;
|
|
1454
1454
|
const t = document.createElement("div");
|
|
1455
1455
|
t.className = "header-group-row", t.setAttribute("role", "row");
|
|
1456
|
-
for (const
|
|
1457
|
-
const
|
|
1458
|
-
l.className = "cell header-group-cell", i && l.classList.add("implicit-group"), l.setAttribute("data-group", String(
|
|
1456
|
+
for (const n of r) {
|
|
1457
|
+
const o = n.firstIndex != null ? n.firstIndex : e.findIndex((a) => n.columns.includes(a)), i = String(n.id).startsWith("__implicit__"), s = i ? "" : n.label || n.id, l = document.createElement("div");
|
|
1458
|
+
l.className = "cell header-group-cell", i && l.classList.add("implicit-group"), l.setAttribute("data-group", String(n.id)), l.style.gridColumn = `${o + 1} / span ${n.columns.length}`, l.textContent = s, t.appendChild(l);
|
|
1459
1459
|
}
|
|
1460
1460
|
return t;
|
|
1461
1461
|
}
|
|
1462
|
-
function
|
|
1463
|
-
return
|
|
1462
|
+
function lt(r) {
|
|
1463
|
+
return r.some((e) => e.group != null);
|
|
1464
1464
|
}
|
|
1465
|
-
const
|
|
1466
|
-
class
|
|
1465
|
+
const at = ".header-group-row{display:grid;grid-auto-flow:column;background:var(--tbw-grouping-columns-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell{display:flex;align-items:center;justify-content:center;padding:4px 8px;font-weight:600;font-size:.9em;text-transform:uppercase;letter-spacing:.5px;border-right:1px solid var(--tbw-grouping-columns-border, var(--tbw-color-border))}.header-group-cell:last-child{border-right:none}.header-row .cell.grouped{border-top:none}.header-row .cell.group-end{border-right:2px solid var(--tbw-grouping-columns-separator, var(--tbw-color-border-strong))}";
|
|
1466
|
+
class xn extends x {
|
|
1467
1467
|
name = "groupingColumns";
|
|
1468
1468
|
version = "1.0.0";
|
|
1469
1469
|
get defaultConfig() {
|
|
@@ -1483,31 +1483,31 @@ class Qt extends C {
|
|
|
1483
1483
|
* Auto-detect column groups from column configuration.
|
|
1484
1484
|
*/
|
|
1485
1485
|
static detect(e, t) {
|
|
1486
|
-
const
|
|
1487
|
-
return Array.isArray(
|
|
1486
|
+
const n = t?.columns;
|
|
1487
|
+
return Array.isArray(n) ? lt(n) : !1;
|
|
1488
1488
|
}
|
|
1489
1489
|
// ===== Hooks =====
|
|
1490
1490
|
processColumns(e) {
|
|
1491
|
-
const t =
|
|
1491
|
+
const t = it(e);
|
|
1492
1492
|
return t.length === 0 ? (this.isActive = !1, this.groups = [], [...e]) : (this.isActive = !0, this.groups = t, [...e]);
|
|
1493
1493
|
}
|
|
1494
1494
|
afterRender() {
|
|
1495
1495
|
if (!this.isActive || this.groups.length === 0) {
|
|
1496
|
-
const
|
|
1497
|
-
|
|
1496
|
+
const s = this.shadowRoot?.querySelector(".header")?.querySelector(".header-group-row");
|
|
1497
|
+
s && s.remove();
|
|
1498
1498
|
return;
|
|
1499
1499
|
}
|
|
1500
1500
|
const e = this.shadowRoot?.querySelector(".header");
|
|
1501
1501
|
if (!e) return;
|
|
1502
1502
|
const t = e.querySelector(".header-group-row");
|
|
1503
1503
|
t && t.remove();
|
|
1504
|
-
const
|
|
1505
|
-
if (
|
|
1504
|
+
const n = st(this.groups, this.columns);
|
|
1505
|
+
if (n) {
|
|
1506
1506
|
const i = e.querySelector(".header-row");
|
|
1507
|
-
i ? e.insertBefore(
|
|
1507
|
+
i ? e.insertBefore(n, i) : e.appendChild(n);
|
|
1508
1508
|
}
|
|
1509
|
-
const
|
|
1510
|
-
|
|
1509
|
+
const o = e.querySelector(".header-row");
|
|
1510
|
+
o && rt(o, this.groups, this.columns);
|
|
1511
1511
|
}
|
|
1512
1512
|
// ===== Public API =====
|
|
1513
1513
|
/**
|
|
@@ -1530,7 +1530,7 @@ class Qt extends C {
|
|
|
1530
1530
|
* @returns Array of columns in the group
|
|
1531
1531
|
*/
|
|
1532
1532
|
getGroupColumns(e) {
|
|
1533
|
-
const t = this.groups.find((
|
|
1533
|
+
const t = this.groups.find((n) => n.id === e);
|
|
1534
1534
|
return t ? t.columns : [];
|
|
1535
1535
|
}
|
|
1536
1536
|
/**
|
|
@@ -1540,27 +1540,27 @@ class Qt extends C {
|
|
|
1540
1540
|
this.requestRender();
|
|
1541
1541
|
}
|
|
1542
1542
|
// ===== Styles =====
|
|
1543
|
-
styles =
|
|
1543
|
+
styles = at;
|
|
1544
1544
|
}
|
|
1545
|
-
function
|
|
1546
|
-
const
|
|
1547
|
-
if (typeof
|
|
1545
|
+
function dt({ rows: r, config: e, expanded: t }) {
|
|
1546
|
+
const n = e.groupOn;
|
|
1547
|
+
if (typeof n != "function")
|
|
1548
1548
|
return [];
|
|
1549
|
-
const
|
|
1550
|
-
if (
|
|
1551
|
-
let a =
|
|
1549
|
+
const o = { key: "__root__", value: null, depth: -1, rows: [], children: /* @__PURE__ */ new Map() };
|
|
1550
|
+
if (r.forEach((l) => {
|
|
1551
|
+
let a = n(l);
|
|
1552
1552
|
a == null || a === !1 ? a = ["__ungrouped__"] : Array.isArray(a) || (a = [a]);
|
|
1553
|
-
let d =
|
|
1553
|
+
let d = o;
|
|
1554
1554
|
a.forEach((c, u) => {
|
|
1555
|
-
const h = c == null ? "∅" : String(c),
|
|
1556
|
-
let
|
|
1557
|
-
|
|
1555
|
+
const h = c == null ? "∅" : String(c), g = d.key === "__root__" ? h : d.key + "||" + h;
|
|
1556
|
+
let p = d.children.get(h);
|
|
1557
|
+
p || (p = { key: g, value: c, depth: u, rows: [], children: /* @__PURE__ */ new Map(), parent: d }, d.children.set(h, p)), d = p;
|
|
1558
1558
|
}), d.rows.push(l);
|
|
1559
|
-
}),
|
|
1559
|
+
}), o.children.size === 1 && o.children.has("__ungrouped__") && o.children.get("__ungrouped__").rows.length === r.length)
|
|
1560
1560
|
return [];
|
|
1561
|
-
const i = [],
|
|
1562
|
-
if (l ===
|
|
1563
|
-
l.children.forEach((d) =>
|
|
1561
|
+
const i = [], s = (l) => {
|
|
1562
|
+
if (l === o) {
|
|
1563
|
+
l.children.forEach((d) => s(d));
|
|
1564
1564
|
return;
|
|
1565
1565
|
}
|
|
1566
1566
|
const a = t.has(l.key);
|
|
@@ -1571,28 +1571,28 @@ function Qe({ rows: s, config: e, expanded: t }) {
|
|
|
1571
1571
|
depth: l.depth,
|
|
1572
1572
|
rows: l.rows,
|
|
1573
1573
|
expanded: a
|
|
1574
|
-
}), a && (l.children.size ? l.children.forEach((d) =>
|
|
1574
|
+
}), a && (l.children.size ? l.children.forEach((d) => s(d)) : l.rows.forEach((d) => i.push({ kind: "data", row: d, rowIndex: r.indexOf(d) })));
|
|
1575
1575
|
};
|
|
1576
|
-
return
|
|
1576
|
+
return s(o), i;
|
|
1577
1577
|
}
|
|
1578
|
-
function
|
|
1579
|
-
const t = new Set(
|
|
1578
|
+
function ct(r, e) {
|
|
1579
|
+
const t = new Set(r);
|
|
1580
1580
|
return t.has(e) ? t.delete(e) : t.add(e), t;
|
|
1581
1581
|
}
|
|
1582
|
-
function
|
|
1582
|
+
function ut(r) {
|
|
1583
1583
|
const e = /* @__PURE__ */ new Set();
|
|
1584
|
-
for (const t of
|
|
1584
|
+
for (const t of r)
|
|
1585
1585
|
t.kind === "group" && e.add(t.key);
|
|
1586
1586
|
return e;
|
|
1587
1587
|
}
|
|
1588
|
-
function
|
|
1588
|
+
function ht() {
|
|
1589
1589
|
return /* @__PURE__ */ new Set();
|
|
1590
1590
|
}
|
|
1591
|
-
function
|
|
1592
|
-
return
|
|
1591
|
+
function gt(r) {
|
|
1592
|
+
return r.kind !== "group" ? 0 : r.rows.length;
|
|
1593
1593
|
}
|
|
1594
|
-
const
|
|
1595
|
-
class
|
|
1594
|
+
const pt = '.group-row{background:var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));font-weight:500}.group-row:hover{background:var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover))}.group-toggle{cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:4px;font-size:10px}.group-toggle:hover{background:var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));border-radius:2px}.group-label{display:inline-flex;align-items:center;gap:8px}.group-count{color:var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));font-size:.85em;font-weight:400}[data-group-depth="0"] .group-label{padding-left:0}[data-group-depth="1"] .group-label{padding-left:20px}[data-group-depth="2"] .group-label{padding-left:40px}[data-group-depth="3"] .group-label{padding-left:60px}[data-group-depth="4"] .group-label{padding-left:80px}';
|
|
1595
|
+
class Cn extends x {
|
|
1596
1596
|
name = "groupingRows";
|
|
1597
1597
|
version = "1.0.0";
|
|
1598
1598
|
get defaultConfig() {
|
|
@@ -1623,20 +1623,20 @@ class eo extends C {
|
|
|
1623
1623
|
const t = this.config;
|
|
1624
1624
|
if (typeof t.groupOn != "function")
|
|
1625
1625
|
return this.isActive = !1, this.flattenedRows = [], [...e];
|
|
1626
|
-
const
|
|
1626
|
+
const n = dt({
|
|
1627
1627
|
rows: e,
|
|
1628
1628
|
config: t,
|
|
1629
1629
|
expanded: this.expandedKeys
|
|
1630
1630
|
});
|
|
1631
|
-
return
|
|
1631
|
+
return n.length === 0 ? (this.isActive = !1, this.flattenedRows = [], [...e]) : (this.isActive = !0, this.flattenedRows = n, n.map((o) => o.kind === "group" ? {
|
|
1632
1632
|
__isGroupRow: !0,
|
|
1633
|
-
__groupKey:
|
|
1634
|
-
__groupValue:
|
|
1635
|
-
__groupDepth:
|
|
1636
|
-
__groupRows:
|
|
1637
|
-
__groupExpanded:
|
|
1638
|
-
__groupRowCount:
|
|
1639
|
-
} :
|
|
1633
|
+
__groupKey: o.key,
|
|
1634
|
+
__groupValue: o.value,
|
|
1635
|
+
__groupDepth: o.depth,
|
|
1636
|
+
__groupRows: o.rows,
|
|
1637
|
+
__groupExpanded: o.expanded,
|
|
1638
|
+
__groupRowCount: gt(o)
|
|
1639
|
+
} : o.row));
|
|
1640
1640
|
}
|
|
1641
1641
|
onCellClick(e) {
|
|
1642
1642
|
const t = e.row;
|
|
@@ -1646,14 +1646,14 @@ class eo extends C {
|
|
|
1646
1646
|
/**
|
|
1647
1647
|
* Render a row. Returns true if we handled the row (group row), false otherwise.
|
|
1648
1648
|
*/
|
|
1649
|
-
renderRow(e, t,
|
|
1649
|
+
renderRow(e, t, n) {
|
|
1650
1650
|
if (!e?.__isGroupRow)
|
|
1651
1651
|
return !1;
|
|
1652
|
-
const
|
|
1653
|
-
if (
|
|
1652
|
+
const o = this.config;
|
|
1653
|
+
if (o.groupRowRenderer) {
|
|
1654
1654
|
const l = () => {
|
|
1655
1655
|
this.toggle(e.__groupKey);
|
|
1656
|
-
}, a =
|
|
1656
|
+
}, a = o.groupRowRenderer({
|
|
1657
1657
|
key: e.__groupKey,
|
|
1658
1658
|
value: e.__groupValue,
|
|
1659
1659
|
depth: e.__groupDepth,
|
|
@@ -1667,53 +1667,53 @@ class eo extends C {
|
|
|
1667
1667
|
const i = () => {
|
|
1668
1668
|
this.toggle(e.__groupKey);
|
|
1669
1669
|
};
|
|
1670
|
-
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) * (
|
|
1670
|
+
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) * (o.indentWidth ?? 20)}px`, t.innerHTML = "", o.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, i) : this.renderPerColumnGroupRow(e, t, i), !0;
|
|
1671
1671
|
}
|
|
1672
1672
|
afterRender() {
|
|
1673
1673
|
}
|
|
1674
1674
|
// ===== Private Rendering Helpers =====
|
|
1675
|
-
renderFullWidthGroupRow(e, t,
|
|
1676
|
-
const
|
|
1675
|
+
renderFullWidthGroupRow(e, t, n) {
|
|
1676
|
+
const o = this.config, i = document.createElement("div");
|
|
1677
1677
|
i.className = "cell group-full", i.style.gridColumn = "1 / -1", i.setAttribute("role", "gridcell");
|
|
1678
|
-
const
|
|
1679
|
-
|
|
1680
|
-
d.stopPropagation(),
|
|
1681
|
-
}), i.appendChild(
|
|
1678
|
+
const s = document.createElement("button");
|
|
1679
|
+
s.type = "button", s.className = "group-toggle", s.setAttribute("aria-label", e.__groupExpanded ? "Collapse group" : "Expand group"), this.setIcon(s, this.resolveIcon(e.__groupExpanded ? "collapse" : "expand")), s.addEventListener("click", (d) => {
|
|
1680
|
+
d.stopPropagation(), n();
|
|
1681
|
+
}), i.appendChild(s);
|
|
1682
1682
|
const l = document.createElement("span");
|
|
1683
1683
|
l.className = "group-label";
|
|
1684
|
-
const a =
|
|
1685
|
-
if (l.textContent = a, i.appendChild(l),
|
|
1684
|
+
const a = o.formatLabel ? o.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
|
|
1685
|
+
if (l.textContent = a, i.appendChild(l), o.showRowCount !== !1) {
|
|
1686
1686
|
const d = document.createElement("span");
|
|
1687
1687
|
d.className = "group-count", d.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, i.appendChild(d);
|
|
1688
1688
|
}
|
|
1689
1689
|
t.appendChild(i);
|
|
1690
1690
|
}
|
|
1691
|
-
renderPerColumnGroupRow(e, t,
|
|
1692
|
-
const
|
|
1693
|
-
d && (t.style.display = "grid", t.style.gridTemplateColumns = d),
|
|
1691
|
+
renderPerColumnGroupRow(e, t, n) {
|
|
1692
|
+
const o = this.config, i = o.aggregators ?? {}, s = this.columns, l = e.__groupRows ?? [], d = this.shadowRoot?.querySelector(".body")?.style.gridTemplateColumns || "";
|
|
1693
|
+
d && (t.style.display = "grid", t.style.gridTemplateColumns = d), s.forEach((c, u) => {
|
|
1694
1694
|
const h = document.createElement("div");
|
|
1695
1695
|
if (h.className = "cell group-cell", h.setAttribute("data-col", String(u)), h.setAttribute("role", "gridcell"), u === 0) {
|
|
1696
|
-
const
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
}), h.appendChild(
|
|
1700
|
-
const
|
|
1701
|
-
if (
|
|
1702
|
-
const
|
|
1703
|
-
|
|
1696
|
+
const g = document.createElement("button");
|
|
1697
|
+
g.type = "button", g.className = "group-toggle", g.setAttribute("aria-label", e.__groupExpanded ? "Collapse group" : "Expand group"), this.setIcon(g, this.resolveIcon(e.__groupExpanded ? "collapse" : "expand")), g.addEventListener("click", (m) => {
|
|
1698
|
+
m.stopPropagation(), n();
|
|
1699
|
+
}), h.appendChild(g);
|
|
1700
|
+
const p = document.createElement("span"), f = i[c.field];
|
|
1701
|
+
if (f) {
|
|
1702
|
+
const m = se(f, l, c.field, c);
|
|
1703
|
+
p.textContent = m != null ? String(m) : String(e.__groupValue);
|
|
1704
1704
|
} else {
|
|
1705
|
-
const
|
|
1706
|
-
|
|
1705
|
+
const m = o.formatLabel ? o.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
|
|
1706
|
+
p.textContent = m;
|
|
1707
1707
|
}
|
|
1708
|
-
if (h.appendChild(
|
|
1709
|
-
const
|
|
1710
|
-
|
|
1708
|
+
if (h.appendChild(p), o.showRowCount !== !1) {
|
|
1709
|
+
const m = document.createElement("span");
|
|
1710
|
+
m.className = "group-count", m.textContent = ` (${l.length})`, h.appendChild(m);
|
|
1711
1711
|
}
|
|
1712
1712
|
} else {
|
|
1713
|
-
const
|
|
1714
|
-
if (
|
|
1715
|
-
const
|
|
1716
|
-
h.textContent =
|
|
1713
|
+
const g = i[c.field];
|
|
1714
|
+
if (g) {
|
|
1715
|
+
const p = se(g, l, c.field, c);
|
|
1716
|
+
h.textContent = p != null ? String(p) : "";
|
|
1717
1717
|
} else
|
|
1718
1718
|
h.textContent = "";
|
|
1719
1719
|
}
|
|
@@ -1725,21 +1725,21 @@ class eo extends C {
|
|
|
1725
1725
|
* Expand all groups.
|
|
1726
1726
|
*/
|
|
1727
1727
|
expandAll() {
|
|
1728
|
-
this.expandedKeys =
|
|
1728
|
+
this.expandedKeys = ut(this.flattenedRows), this.requestRender();
|
|
1729
1729
|
}
|
|
1730
1730
|
/**
|
|
1731
1731
|
* Collapse all groups.
|
|
1732
1732
|
*/
|
|
1733
1733
|
collapseAll() {
|
|
1734
|
-
this.expandedKeys =
|
|
1734
|
+
this.expandedKeys = ht(), this.requestRender();
|
|
1735
1735
|
}
|
|
1736
1736
|
/**
|
|
1737
1737
|
* Toggle expansion of a specific group.
|
|
1738
1738
|
* @param key - The group key to toggle
|
|
1739
1739
|
*/
|
|
1740
1740
|
toggle(e) {
|
|
1741
|
-
this.expandedKeys =
|
|
1742
|
-
const t = this.flattenedRows.find((
|
|
1741
|
+
this.expandedKeys = ct(this.expandedKeys, e);
|
|
1742
|
+
const t = this.flattenedRows.find((n) => n.kind === "group" && n.key === e);
|
|
1743
1743
|
this.emit("group-toggle", {
|
|
1744
1744
|
key: e,
|
|
1745
1745
|
expanded: this.expandedKeys.has(e),
|
|
@@ -1828,33 +1828,33 @@ class eo extends C {
|
|
|
1828
1828
|
this.config.groupOn = e, this.requestRender();
|
|
1829
1829
|
}
|
|
1830
1830
|
// ===== Styles =====
|
|
1831
|
-
styles =
|
|
1831
|
+
styles = pt;
|
|
1832
1832
|
}
|
|
1833
|
-
function
|
|
1834
|
-
const t = new Set(
|
|
1833
|
+
function z(r, e) {
|
|
1834
|
+
const t = new Set(r);
|
|
1835
1835
|
return t.has(e) ? t.delete(e) : t.add(e), t;
|
|
1836
1836
|
}
|
|
1837
|
-
function
|
|
1838
|
-
const t = new Set(
|
|
1837
|
+
function ft(r, e) {
|
|
1838
|
+
const t = new Set(r);
|
|
1839
1839
|
return t.add(e), t;
|
|
1840
1840
|
}
|
|
1841
|
-
function
|
|
1842
|
-
const t = new Set(
|
|
1841
|
+
function mt(r, e) {
|
|
1842
|
+
const t = new Set(r);
|
|
1843
1843
|
return t.delete(e), t;
|
|
1844
1844
|
}
|
|
1845
|
-
function
|
|
1846
|
-
return
|
|
1845
|
+
function wt(r, e) {
|
|
1846
|
+
return r.has(e);
|
|
1847
1847
|
}
|
|
1848
|
-
function
|
|
1849
|
-
const
|
|
1850
|
-
|
|
1848
|
+
function bt(r, e, t, n) {
|
|
1849
|
+
const o = document.createElement("div");
|
|
1850
|
+
o.className = "master-detail-row", o.setAttribute("data-detail-for", String(e)), o.setAttribute("role", "row");
|
|
1851
1851
|
const i = document.createElement("div");
|
|
1852
|
-
i.className = "master-detail-cell", i.setAttribute("role", "cell"), i.style.gridColumn = `1 / ${
|
|
1853
|
-
const
|
|
1854
|
-
return typeof
|
|
1852
|
+
i.className = "master-detail-cell", i.setAttribute("role", "cell"), i.style.gridColumn = `1 / ${n + 1}`;
|
|
1853
|
+
const s = t(r, e);
|
|
1854
|
+
return typeof s == "string" ? i.innerHTML = s : s instanceof HTMLElement && i.appendChild(s), o.appendChild(i), o;
|
|
1855
1855
|
}
|
|
1856
|
-
const
|
|
1857
|
-
class
|
|
1856
|
+
const vt = ".master-detail-cell-wrapper{display:flex;align-items:center;gap:4px}.master-detail-toggle{cursor:pointer;font-size:10px;opacity:.7;user-select:none}.master-detail-toggle:hover{opacity:1}.master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border))}.master-detail-cell{padding:16px;overflow:auto}";
|
|
1857
|
+
class yn extends x {
|
|
1858
1858
|
name = "masterDetail";
|
|
1859
1859
|
version = "1.0.0";
|
|
1860
1860
|
get defaultConfig() {
|
|
@@ -1878,82 +1878,82 @@ class to extends C {
|
|
|
1878
1878
|
return [...e];
|
|
1879
1879
|
const t = [...e];
|
|
1880
1880
|
if (t.length > 0) {
|
|
1881
|
-
const
|
|
1882
|
-
if (
|
|
1881
|
+
const n = { ...t[0] }, o = n.viewRenderer;
|
|
1882
|
+
if (o?.__masterDetailWrapped)
|
|
1883
1883
|
return t;
|
|
1884
|
-
const i = (
|
|
1885
|
-
const { value: l, row: a } =
|
|
1884
|
+
const i = (s) => {
|
|
1885
|
+
const { value: l, row: a } = s, d = this.expandedRows.has(a), c = document.createElement("span");
|
|
1886
1886
|
c.className = "master-detail-cell-wrapper";
|
|
1887
1887
|
const u = document.createElement("span");
|
|
1888
|
-
u.className = "master-detail-toggle", this.setIcon(u, this.resolveIcon(d ? "collapse" : "expand")), u.setAttribute("role", "button"), u.setAttribute("tabindex", "0"), u.setAttribute("aria-expanded", String(d)), u.setAttribute("aria-label", d ? "Collapse details" : "Expand details"), u.addEventListener("click", (
|
|
1889
|
-
|
|
1890
|
-
const
|
|
1891
|
-
this.expandedRows =
|
|
1892
|
-
rowIndex:
|
|
1888
|
+
u.className = "master-detail-toggle", this.setIcon(u, this.resolveIcon(d ? "collapse" : "expand")), u.setAttribute("role", "button"), u.setAttribute("tabindex", "0"), u.setAttribute("aria-expanded", String(d)), u.setAttribute("aria-label", d ? "Collapse details" : "Expand details"), u.addEventListener("click", (g) => {
|
|
1889
|
+
g.stopPropagation();
|
|
1890
|
+
const p = this.rows.indexOf(a);
|
|
1891
|
+
this.expandedRows = z(this.expandedRows, a), this.emit("detail-expand", {
|
|
1892
|
+
rowIndex: p,
|
|
1893
1893
|
row: a,
|
|
1894
1894
|
expanded: this.expandedRows.has(a)
|
|
1895
1895
|
}), this.requestRender();
|
|
1896
1896
|
}), c.appendChild(u);
|
|
1897
1897
|
const h = document.createElement("span");
|
|
1898
|
-
if (
|
|
1899
|
-
const
|
|
1900
|
-
|
|
1898
|
+
if (o) {
|
|
1899
|
+
const g = o(s);
|
|
1900
|
+
g instanceof Node ? h.appendChild(g) : h.textContent = String(g ?? l ?? "");
|
|
1901
1901
|
} else
|
|
1902
1902
|
h.textContent = String(l ?? "");
|
|
1903
1903
|
return c.appendChild(h), c;
|
|
1904
1904
|
};
|
|
1905
|
-
i.__masterDetailWrapped = !0,
|
|
1905
|
+
i.__masterDetailWrapped = !0, n.viewRenderer = i, t[0] = n;
|
|
1906
1906
|
}
|
|
1907
1907
|
return t;
|
|
1908
1908
|
}
|
|
1909
1909
|
onRowClick(e) {
|
|
1910
1910
|
if (!(!this.config.expandOnRowClick || !this.config.detailRenderer))
|
|
1911
|
-
return this.expandedRows =
|
|
1911
|
+
return this.expandedRows = z(this.expandedRows, e.row), this.emit("detail-expand", {
|
|
1912
1912
|
rowIndex: e.rowIndex,
|
|
1913
1913
|
row: e.row,
|
|
1914
1914
|
expanded: this.expandedRows.has(e.row)
|
|
1915
1915
|
}), this.requestRender(), !1;
|
|
1916
1916
|
}
|
|
1917
1917
|
onCellClick() {
|
|
1918
|
-
this.expandedRows.size > 0 && queueMicrotask(() => this.#
|
|
1918
|
+
this.expandedRows.size > 0 && queueMicrotask(() => this.#t());
|
|
1919
1919
|
}
|
|
1920
1920
|
afterRender() {
|
|
1921
|
-
this.#
|
|
1921
|
+
this.#t();
|
|
1922
1922
|
}
|
|
1923
1923
|
/**
|
|
1924
1924
|
* Called on scroll to sync detail elements with visible rows.
|
|
1925
1925
|
* Removes details for rows that scrolled out of view and reattaches for visible rows.
|
|
1926
1926
|
*/
|
|
1927
1927
|
onScrollRender() {
|
|
1928
|
-
!this.config.detailRenderer || this.expandedRows.size === 0 || this.#
|
|
1928
|
+
!this.config.detailRenderer || this.expandedRows.size === 0 || this.#t();
|
|
1929
1929
|
}
|
|
1930
1930
|
/**
|
|
1931
1931
|
* Full sync of detail rows - cleans up stale elements and creates new ones.
|
|
1932
1932
|
* Detail rows are inserted as siblings AFTER their master row to survive row rebuilds.
|
|
1933
1933
|
*/
|
|
1934
|
-
#
|
|
1934
|
+
#t() {
|
|
1935
1935
|
if (!this.config.detailRenderer) return;
|
|
1936
1936
|
const e = this.shadowRoot?.querySelector(".rows");
|
|
1937
1937
|
if (!e) return;
|
|
1938
|
-
const t = /* @__PURE__ */ new Map(),
|
|
1939
|
-
for (const
|
|
1940
|
-
const l =
|
|
1941
|
-
a >= 0 && t.set(a,
|
|
1938
|
+
const t = /* @__PURE__ */ new Map(), n = e.querySelectorAll(".data-grid-row"), o = this.columns.length;
|
|
1939
|
+
for (const s of n) {
|
|
1940
|
+
const l = s.querySelector(".cell[data-row]"), a = l ? parseInt(l.getAttribute("data-row") ?? "-1", 10) : -1;
|
|
1941
|
+
a >= 0 && t.set(a, s);
|
|
1942
1942
|
}
|
|
1943
1943
|
const i = e.querySelectorAll(".master-detail-row");
|
|
1944
|
-
for (const
|
|
1945
|
-
const l = parseInt(
|
|
1946
|
-
(!d || !c) && (
|
|
1944
|
+
for (const s of i) {
|
|
1945
|
+
const l = parseInt(s.getAttribute("data-detail-for") ?? "-1", 10), a = l >= 0 ? this.rows[l] : void 0, d = a && this.expandedRows.has(a), c = t.has(l);
|
|
1946
|
+
(!d || !c) && (s.remove(), a && this.detailElements.delete(a));
|
|
1947
1947
|
}
|
|
1948
|
-
for (const [
|
|
1949
|
-
const a = this.rows[
|
|
1948
|
+
for (const [s, l] of t) {
|
|
1949
|
+
const a = this.rows[s];
|
|
1950
1950
|
if (!a || !this.expandedRows.has(a)) continue;
|
|
1951
1951
|
const d = this.detailElements.get(a);
|
|
1952
1952
|
if (d) {
|
|
1953
1953
|
d.previousElementSibling !== l && l.after(d);
|
|
1954
1954
|
continue;
|
|
1955
1955
|
}
|
|
1956
|
-
const c =
|
|
1956
|
+
const c = bt(a, s, this.config.detailRenderer, o);
|
|
1957
1957
|
typeof this.config.detailHeight == "number" && (c.style.height = `${this.config.detailHeight}px`), l.after(c), this.detailElements.set(a, c);
|
|
1958
1958
|
}
|
|
1959
1959
|
}
|
|
@@ -1964,12 +1964,12 @@ class to extends C {
|
|
|
1964
1964
|
getExtraHeight() {
|
|
1965
1965
|
let e = 0;
|
|
1966
1966
|
for (const t of this.expandedRows) {
|
|
1967
|
-
const
|
|
1968
|
-
if (
|
|
1969
|
-
e +=
|
|
1967
|
+
const n = this.detailElements.get(t);
|
|
1968
|
+
if (n)
|
|
1969
|
+
e += n.offsetHeight;
|
|
1970
1970
|
else {
|
|
1971
|
-
const
|
|
1972
|
-
e += typeof
|
|
1971
|
+
const o = this.config?.detailHeight;
|
|
1972
|
+
e += typeof o == "number" ? o : 150;
|
|
1973
1973
|
}
|
|
1974
1974
|
}
|
|
1975
1975
|
return e;
|
|
@@ -1980,15 +1980,15 @@ class to extends C {
|
|
|
1980
1980
|
*/
|
|
1981
1981
|
getExtraHeightBefore(e) {
|
|
1982
1982
|
let t = 0;
|
|
1983
|
-
for (const
|
|
1984
|
-
const
|
|
1985
|
-
if (
|
|
1986
|
-
const i = this.detailElements.get(
|
|
1983
|
+
for (const n of this.expandedRows) {
|
|
1984
|
+
const o = this.rows.indexOf(n);
|
|
1985
|
+
if (o >= 0 && o < e) {
|
|
1986
|
+
const i = this.detailElements.get(n);
|
|
1987
1987
|
if (i)
|
|
1988
1988
|
t += i.offsetHeight;
|
|
1989
1989
|
else {
|
|
1990
|
-
const
|
|
1991
|
-
t += typeof
|
|
1990
|
+
const s = this.config?.detailHeight;
|
|
1991
|
+
t += typeof s == "number" ? s : 150;
|
|
1992
1992
|
}
|
|
1993
1993
|
}
|
|
1994
1994
|
}
|
|
@@ -1998,18 +1998,18 @@ class to extends C {
|
|
|
1998
1998
|
* Adjust the virtualization start index to keep expanded row visible while its detail is visible.
|
|
1999
1999
|
* This ensures the detail scrolls smoothly out of view instead of disappearing abruptly.
|
|
2000
2000
|
*/
|
|
2001
|
-
adjustVirtualStart(e, t,
|
|
2001
|
+
adjustVirtualStart(e, t, n) {
|
|
2002
2002
|
if (this.expandedRows.size === 0) return e;
|
|
2003
|
-
const
|
|
2003
|
+
const o = [];
|
|
2004
2004
|
for (const l of this.expandedRows) {
|
|
2005
2005
|
const a = this.rows.indexOf(l);
|
|
2006
|
-
a >= 0 &&
|
|
2006
|
+
a >= 0 && o.push({ index: a, row: l });
|
|
2007
2007
|
}
|
|
2008
|
-
|
|
2009
|
-
let i = e,
|
|
2010
|
-
for (const { index: l, row: a } of
|
|
2011
|
-
const d = l *
|
|
2012
|
-
|
|
2008
|
+
o.sort((l, a) => l.index - a.index);
|
|
2009
|
+
let i = e, s = 0;
|
|
2010
|
+
for (const { index: l, row: a } of o) {
|
|
2011
|
+
const d = l * n + s, u = this.detailElements.get(a)?.offsetHeight ?? (typeof this.config?.detailHeight == "number" ? this.config.detailHeight : 150), h = d + n + u;
|
|
2012
|
+
s += u, !(l >= e) && h > t && l < i && (i = l);
|
|
2013
2013
|
}
|
|
2014
2014
|
return i;
|
|
2015
2015
|
}
|
|
@@ -2020,7 +2020,7 @@ class to extends C {
|
|
|
2020
2020
|
*/
|
|
2021
2021
|
expand(e) {
|
|
2022
2022
|
const t = this.rows[e];
|
|
2023
|
-
t && (this.expandedRows =
|
|
2023
|
+
t && (this.expandedRows = ft(this.expandedRows, t), this.requestRender());
|
|
2024
2024
|
}
|
|
2025
2025
|
/**
|
|
2026
2026
|
* Collapse the detail row at the given index.
|
|
@@ -2028,7 +2028,7 @@ class to extends C {
|
|
|
2028
2028
|
*/
|
|
2029
2029
|
collapse(e) {
|
|
2030
2030
|
const t = this.rows[e];
|
|
2031
|
-
t && (this.expandedRows =
|
|
2031
|
+
t && (this.expandedRows = mt(this.expandedRows, t), this.requestRender());
|
|
2032
2032
|
}
|
|
2033
2033
|
/**
|
|
2034
2034
|
* Toggle the detail row at the given index.
|
|
@@ -2036,7 +2036,7 @@ class to extends C {
|
|
|
2036
2036
|
*/
|
|
2037
2037
|
toggle(e) {
|
|
2038
2038
|
const t = this.rows[e];
|
|
2039
|
-
t && (this.expandedRows =
|
|
2039
|
+
t && (this.expandedRows = z(this.expandedRows, t), this.requestRender());
|
|
2040
2040
|
}
|
|
2041
2041
|
/**
|
|
2042
2042
|
* Check if the detail row at the given index is expanded.
|
|
@@ -2045,7 +2045,7 @@ class to extends C {
|
|
|
2045
2045
|
*/
|
|
2046
2046
|
isExpanded(e) {
|
|
2047
2047
|
const t = this.rows[e];
|
|
2048
|
-
return t ?
|
|
2048
|
+
return t ? wt(this.expandedRows, t) : !1;
|
|
2049
2049
|
}
|
|
2050
2050
|
/**
|
|
2051
2051
|
* Expand all detail rows.
|
|
@@ -2068,8 +2068,8 @@ class to extends C {
|
|
|
2068
2068
|
getExpandedRows() {
|
|
2069
2069
|
const e = [];
|
|
2070
2070
|
for (const t of this.expandedRows) {
|
|
2071
|
-
const
|
|
2072
|
-
|
|
2071
|
+
const n = this.rows.indexOf(t);
|
|
2072
|
+
n >= 0 && e.push(n);
|
|
2073
2073
|
}
|
|
2074
2074
|
return e;
|
|
2075
2075
|
}
|
|
@@ -2083,34 +2083,34 @@ class to extends C {
|
|
|
2083
2083
|
return t ? this.detailElements.get(t) : void 0;
|
|
2084
2084
|
}
|
|
2085
2085
|
// ===== Styles =====
|
|
2086
|
-
styles =
|
|
2086
|
+
styles = vt;
|
|
2087
2087
|
}
|
|
2088
|
-
function
|
|
2089
|
-
return e.length ? [...
|
|
2088
|
+
function xt(r, e, t) {
|
|
2089
|
+
return e.length ? [...r].sort((n, o) => {
|
|
2090
2090
|
for (const i of e) {
|
|
2091
|
-
const l = t.find((u) => u.field === i.field)?.sortComparator ??
|
|
2091
|
+
const l = t.find((u) => u.field === i.field)?.sortComparator ?? Ct, a = n[i.field], d = o[i.field], c = l(a, d, n, o);
|
|
2092
2092
|
if (c !== 0)
|
|
2093
2093
|
return i.direction === "asc" ? c : -c;
|
|
2094
2094
|
}
|
|
2095
2095
|
return 0;
|
|
2096
|
-
}) : [...
|
|
2096
|
+
}) : [...r];
|
|
2097
2097
|
}
|
|
2098
|
-
function
|
|
2099
|
-
return
|
|
2098
|
+
function Ct(r, e) {
|
|
2099
|
+
return r == null && e == null ? 0 : r == null ? 1 : e == null ? -1 : typeof r == "number" && typeof e == "number" ? r - e : r instanceof Date && e instanceof Date ? r.getTime() - e.getTime() : typeof r == "boolean" && typeof e == "boolean" ? r === e ? 0 : r ? -1 : 1 : String(r).localeCompare(String(e));
|
|
2100
2100
|
}
|
|
2101
|
-
function
|
|
2102
|
-
const
|
|
2103
|
-
return t ?
|
|
2101
|
+
function yt(r, e, t, n) {
|
|
2102
|
+
const o = r.find((i) => i.field === e);
|
|
2103
|
+
return t ? o ? o.direction === "asc" ? r.map((i) => i.field === e ? { ...i, direction: "desc" } : i) : r.filter((i) => i.field !== e) : r.length < n ? [...r, { field: e, direction: "asc" }] : r : o?.direction === "asc" ? [{ field: e, direction: "desc" }] : o?.direction === "desc" ? [] : [{ field: e, direction: "asc" }];
|
|
2104
2104
|
}
|
|
2105
|
-
function
|
|
2106
|
-
const t =
|
|
2105
|
+
function we(r, e) {
|
|
2106
|
+
const t = r.findIndex((n) => n.field === e);
|
|
2107
2107
|
return t >= 0 ? t + 1 : void 0;
|
|
2108
2108
|
}
|
|
2109
|
-
function
|
|
2110
|
-
return
|
|
2109
|
+
function be(r, e) {
|
|
2110
|
+
return r.find((t) => t.field === e)?.direction;
|
|
2111
2111
|
}
|
|
2112
|
-
const
|
|
2113
|
-
class
|
|
2112
|
+
const Rt = '.header-cell[data-sort=asc]:after{content:"↑";margin-left:4px;opacity:.8}.header-cell[data-sort=desc]:after{content:"↓";margin-left:4px;opacity:.8}.sort-index{font-size:10px;background:var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));color:var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;margin-left:2px;font-weight:600}';
|
|
2113
|
+
class Rn extends x {
|
|
2114
2114
|
name = "multiSort";
|
|
2115
2115
|
version = "1.0.0";
|
|
2116
2116
|
get defaultConfig() {
|
|
@@ -2127,30 +2127,30 @@ class oo extends C {
|
|
|
2127
2127
|
}
|
|
2128
2128
|
// ===== Hooks =====
|
|
2129
2129
|
processRows(e) {
|
|
2130
|
-
return this.sortModel.length === 0 ? [...e] :
|
|
2130
|
+
return this.sortModel.length === 0 ? [...e] : xt([...e], this.sortModel, [...this.columns]);
|
|
2131
2131
|
}
|
|
2132
2132
|
onHeaderClick(e) {
|
|
2133
2133
|
if (!this.columns.find((i) => i.field === e.field)?.sortable) return !1;
|
|
2134
|
-
const
|
|
2135
|
-
return this.sortModel =
|
|
2134
|
+
const n = e.originalEvent.shiftKey, o = this.config.maxSortColumns ?? 3;
|
|
2135
|
+
return this.sortModel = yt(this.sortModel, e.field, n, o), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
|
|
2136
2136
|
}
|
|
2137
2137
|
afterRender() {
|
|
2138
2138
|
const e = this.shadowRoot;
|
|
2139
2139
|
if (!e) return;
|
|
2140
2140
|
const t = this.config.showSortIndex !== !1;
|
|
2141
|
-
e.querySelectorAll(".header-row .cell[data-field]").forEach((
|
|
2142
|
-
const i =
|
|
2141
|
+
e.querySelectorAll(".header-row .cell[data-field]").forEach((o) => {
|
|
2142
|
+
const i = o.getAttribute("data-field");
|
|
2143
2143
|
if (!i) return;
|
|
2144
|
-
const
|
|
2145
|
-
if (
|
|
2146
|
-
|
|
2144
|
+
const s = we(this.sortModel, i), l = be(this.sortModel, i);
|
|
2145
|
+
if (o.querySelector(".sort-index")?.remove(), l) {
|
|
2146
|
+
o.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), o.setAttribute("data-sort", l);
|
|
2147
2147
|
const c = document.createElement("span");
|
|
2148
|
-
if (c.className = "sort-indicator", c.style.marginLeft = "4px", c.style.opacity = "0.8", this.setIcon(c, this.resolveIcon(l === "asc" ? "sortAsc" : "sortDesc")),
|
|
2148
|
+
if (c.className = "sort-indicator", c.style.marginLeft = "4px", c.style.opacity = "0.8", this.setIcon(c, this.resolveIcon(l === "asc" ? "sortAsc" : "sortDesc")), o.appendChild(c), t && this.sortModel.length > 1 && s !== void 0) {
|
|
2149
2149
|
const u = document.createElement("span");
|
|
2150
|
-
u.className = "sort-index", u.textContent = String(
|
|
2150
|
+
u.className = "sort-index", u.textContent = String(s), o.appendChild(u);
|
|
2151
2151
|
}
|
|
2152
2152
|
} else
|
|
2153
|
-
|
|
2153
|
+
o.removeAttribute("data-sort");
|
|
2154
2154
|
});
|
|
2155
2155
|
}
|
|
2156
2156
|
// ===== Public API =====
|
|
@@ -2180,7 +2180,7 @@ class oo extends C {
|
|
|
2180
2180
|
* @returns 1-based index or undefined if not sorted
|
|
2181
2181
|
*/
|
|
2182
2182
|
getSortIndex(e) {
|
|
2183
|
-
return
|
|
2183
|
+
return we(this.sortModel, e);
|
|
2184
2184
|
}
|
|
2185
2185
|
/**
|
|
2186
2186
|
* Get the sort direction for a specific field.
|
|
@@ -2188,14 +2188,14 @@ class oo extends C {
|
|
|
2188
2188
|
* @returns Sort direction or undefined if not sorted
|
|
2189
2189
|
*/
|
|
2190
2190
|
getSortDirection(e) {
|
|
2191
|
-
return
|
|
2191
|
+
return be(this.sortModel, e);
|
|
2192
2192
|
}
|
|
2193
2193
|
// ===== Column State Hooks =====
|
|
2194
2194
|
/**
|
|
2195
2195
|
* Return sort state for a column if it's in the sort model.
|
|
2196
2196
|
*/
|
|
2197
2197
|
getColumnState(e) {
|
|
2198
|
-
const t = this.sortModel.findIndex((
|
|
2198
|
+
const t = this.sortModel.findIndex((o) => o.field === e);
|
|
2199
2199
|
return t === -1 ? void 0 : {
|
|
2200
2200
|
sort: {
|
|
2201
2201
|
direction: this.sortModel[t].direction,
|
|
@@ -2212,58 +2212,58 @@ class oo extends C {
|
|
|
2212
2212
|
this.sortModel = this.sortModel.filter((i) => i.field !== e);
|
|
2213
2213
|
return;
|
|
2214
2214
|
}
|
|
2215
|
-
const
|
|
2215
|
+
const n = this.sortModel.findIndex((i) => i.field === e), o = {
|
|
2216
2216
|
field: e,
|
|
2217
2217
|
direction: t.sort.direction
|
|
2218
2218
|
};
|
|
2219
|
-
|
|
2219
|
+
n !== -1 ? this.sortModel[n] = o : this.sortModel.splice(t.sort.priority, 0, o);
|
|
2220
2220
|
}
|
|
2221
2221
|
// ===== Styles =====
|
|
2222
|
-
styles =
|
|
2222
|
+
styles = Rt;
|
|
2223
2223
|
}
|
|
2224
|
-
function
|
|
2225
|
-
return
|
|
2224
|
+
function St(r) {
|
|
2225
|
+
return r.filter((e) => e.sticky === "left");
|
|
2226
2226
|
}
|
|
2227
|
-
function
|
|
2228
|
-
return
|
|
2227
|
+
function Et(r) {
|
|
2228
|
+
return r.filter((e) => e.sticky === "right");
|
|
2229
2229
|
}
|
|
2230
|
-
function
|
|
2231
|
-
return
|
|
2230
|
+
function V(r) {
|
|
2231
|
+
return r.some((e) => e.sticky === "left" || e.sticky === "right");
|
|
2232
2232
|
}
|
|
2233
|
-
function
|
|
2234
|
-
const t =
|
|
2233
|
+
function ve(r, e) {
|
|
2234
|
+
const t = r.shadowRoot;
|
|
2235
2235
|
if (!t) return;
|
|
2236
|
-
const
|
|
2237
|
-
if (!
|
|
2238
|
-
const
|
|
2236
|
+
const n = Array.from(t.querySelectorAll(".header-row .cell"));
|
|
2237
|
+
if (!n.length) return;
|
|
2238
|
+
const o = /* @__PURE__ */ new Map();
|
|
2239
2239
|
e.forEach((l, a) => {
|
|
2240
|
-
l.field &&
|
|
2240
|
+
l.field && o.set(l.field, a);
|
|
2241
2241
|
});
|
|
2242
2242
|
let i = 0;
|
|
2243
2243
|
for (const l of e)
|
|
2244
2244
|
if (l.sticky === "left") {
|
|
2245
|
-
const a =
|
|
2245
|
+
const a = o.get(l.field), d = n.find((c) => c.getAttribute("data-field") === l.field);
|
|
2246
2246
|
d && (d.classList.add("sticky-left"), d.style.left = i + "px", a !== void 0 && t.querySelectorAll(`.data-grid-row .cell[data-col="${a}"]`).forEach((c) => {
|
|
2247
2247
|
c.classList.add("sticky-left"), c.style.left = i + "px";
|
|
2248
2248
|
}), i += d.offsetWidth);
|
|
2249
2249
|
}
|
|
2250
|
-
let
|
|
2250
|
+
let s = 0;
|
|
2251
2251
|
for (const l of [...e].reverse())
|
|
2252
2252
|
if (l.sticky === "right") {
|
|
2253
|
-
const a =
|
|
2254
|
-
d && (d.classList.add("sticky-right"), d.style.right =
|
|
2255
|
-
c.classList.add("sticky-right"), c.style.right =
|
|
2256
|
-
}),
|
|
2253
|
+
const a = o.get(l.field), d = n.find((c) => c.getAttribute("data-field") === l.field);
|
|
2254
|
+
d && (d.classList.add("sticky-right"), d.style.right = s + "px", a !== void 0 && t.querySelectorAll(`.data-grid-row .cell[data-col="${a}"]`).forEach((c) => {
|
|
2255
|
+
c.classList.add("sticky-right"), c.style.right = s + "px";
|
|
2256
|
+
}), s += d.offsetWidth);
|
|
2257
2257
|
}
|
|
2258
2258
|
}
|
|
2259
|
-
function
|
|
2260
|
-
const e =
|
|
2259
|
+
function xe(r) {
|
|
2260
|
+
const e = r.shadowRoot;
|
|
2261
2261
|
if (!e) return;
|
|
2262
|
-
e.querySelectorAll(".sticky-left, .sticky-right").forEach((
|
|
2263
|
-
|
|
2262
|
+
e.querySelectorAll(".sticky-left, .sticky-right").forEach((n) => {
|
|
2263
|
+
n.classList.remove("sticky-left", "sticky-right"), n.style.left = "", n.style.right = "";
|
|
2264
2264
|
});
|
|
2265
2265
|
}
|
|
2266
|
-
class
|
|
2266
|
+
class Sn extends x {
|
|
2267
2267
|
name = "pinnedColumns";
|
|
2268
2268
|
version = "1.0.0";
|
|
2269
2269
|
get defaultConfig() {
|
|
@@ -2282,23 +2282,23 @@ class no extends C {
|
|
|
2282
2282
|
* Auto-detect sticky columns from column configuration.
|
|
2283
2283
|
*/
|
|
2284
2284
|
static detect(e, t) {
|
|
2285
|
-
const
|
|
2286
|
-
return Array.isArray(
|
|
2285
|
+
const n = t?.columns;
|
|
2286
|
+
return Array.isArray(n) ? V(n) : !1;
|
|
2287
2287
|
}
|
|
2288
2288
|
// ===== Hooks =====
|
|
2289
2289
|
processColumns(e) {
|
|
2290
|
-
return this.isApplied =
|
|
2290
|
+
return this.isApplied = V([...e]), [...e];
|
|
2291
2291
|
}
|
|
2292
2292
|
afterRender() {
|
|
2293
2293
|
if (!this.isApplied)
|
|
2294
2294
|
return;
|
|
2295
2295
|
const e = this.grid, t = [...this.columns];
|
|
2296
|
-
if (!
|
|
2297
|
-
|
|
2296
|
+
if (!V(t)) {
|
|
2297
|
+
xe(e), this.isApplied = !1;
|
|
2298
2298
|
return;
|
|
2299
2299
|
}
|
|
2300
2300
|
queueMicrotask(() => {
|
|
2301
|
-
|
|
2301
|
+
ve(e, t);
|
|
2302
2302
|
});
|
|
2303
2303
|
}
|
|
2304
2304
|
// ===== Public API =====
|
|
@@ -2307,113 +2307,113 @@ class no extends C {
|
|
|
2307
2307
|
*/
|
|
2308
2308
|
refreshStickyOffsets() {
|
|
2309
2309
|
const e = [...this.columns];
|
|
2310
|
-
|
|
2310
|
+
ve(this.grid, e);
|
|
2311
2311
|
}
|
|
2312
2312
|
/**
|
|
2313
2313
|
* Get columns pinned to the left.
|
|
2314
2314
|
*/
|
|
2315
2315
|
getLeftPinnedColumns() {
|
|
2316
2316
|
const e = [...this.columns];
|
|
2317
|
-
return
|
|
2317
|
+
return St(e);
|
|
2318
2318
|
}
|
|
2319
2319
|
/**
|
|
2320
2320
|
* Get columns pinned to the right.
|
|
2321
2321
|
*/
|
|
2322
2322
|
getRightPinnedColumns() {
|
|
2323
2323
|
const e = [...this.columns];
|
|
2324
|
-
return
|
|
2324
|
+
return Et(e);
|
|
2325
2325
|
}
|
|
2326
2326
|
/**
|
|
2327
2327
|
* Clear all sticky positioning.
|
|
2328
2328
|
*/
|
|
2329
2329
|
clearStickyPositions() {
|
|
2330
|
-
|
|
2330
|
+
xe(this.grid);
|
|
2331
2331
|
}
|
|
2332
2332
|
}
|
|
2333
|
-
function
|
|
2333
|
+
function W(r, e) {
|
|
2334
2334
|
const t = document.createElement("div");
|
|
2335
2335
|
t.className = "tbw-pinned-rows", t.setAttribute("role", "presentation"), t.setAttribute("aria-live", "polite");
|
|
2336
|
-
const o = document.createElement("div");
|
|
2337
|
-
o.className = "tbw-pinned-rows-left";
|
|
2338
2336
|
const n = document.createElement("div");
|
|
2339
|
-
n.className = "tbw-pinned-rows-
|
|
2337
|
+
n.className = "tbw-pinned-rows-left";
|
|
2338
|
+
const o = document.createElement("div");
|
|
2339
|
+
o.className = "tbw-pinned-rows-center";
|
|
2340
2340
|
const i = document.createElement("div");
|
|
2341
|
-
if (i.className = "tbw-pinned-rows-right",
|
|
2342
|
-
const
|
|
2343
|
-
|
|
2344
|
-
}
|
|
2345
|
-
if (
|
|
2346
|
-
const
|
|
2347
|
-
|
|
2348
|
-
}
|
|
2349
|
-
if (
|
|
2350
|
-
const
|
|
2351
|
-
|
|
2352
|
-
}
|
|
2353
|
-
if (
|
|
2354
|
-
for (const
|
|
2355
|
-
const l =
|
|
2356
|
-
switch (
|
|
2341
|
+
if (i.className = "tbw-pinned-rows-right", r.showRowCount !== !1) {
|
|
2342
|
+
const s = document.createElement("span");
|
|
2343
|
+
s.className = "tbw-status-panel tbw-status-panel-row-count", s.textContent = `Total: ${e.totalRows} rows`, n.appendChild(s);
|
|
2344
|
+
}
|
|
2345
|
+
if (r.showFilteredCount && e.filteredRows !== e.totalRows) {
|
|
2346
|
+
const s = document.createElement("span");
|
|
2347
|
+
s.className = "tbw-status-panel tbw-status-panel-filtered-count", s.textContent = `Filtered: ${e.filteredRows}`, n.appendChild(s);
|
|
2348
|
+
}
|
|
2349
|
+
if (r.showSelectedCount && e.selectedRows > 0) {
|
|
2350
|
+
const s = document.createElement("span");
|
|
2351
|
+
s.className = "tbw-status-panel tbw-status-panel-selected-count", s.textContent = `Selected: ${e.selectedRows}`, i.appendChild(s);
|
|
2352
|
+
}
|
|
2353
|
+
if (r.customPanels)
|
|
2354
|
+
for (const s of r.customPanels) {
|
|
2355
|
+
const l = kt(s, e);
|
|
2356
|
+
switch (s.position) {
|
|
2357
2357
|
case "left":
|
|
2358
|
-
|
|
2358
|
+
n.appendChild(l);
|
|
2359
2359
|
break;
|
|
2360
2360
|
case "center":
|
|
2361
|
-
|
|
2361
|
+
o.appendChild(l);
|
|
2362
2362
|
break;
|
|
2363
2363
|
case "right":
|
|
2364
2364
|
i.appendChild(l);
|
|
2365
2365
|
break;
|
|
2366
2366
|
}
|
|
2367
2367
|
}
|
|
2368
|
-
return t.appendChild(
|
|
2368
|
+
return t.appendChild(n), t.appendChild(o), t.appendChild(i), t;
|
|
2369
2369
|
}
|
|
2370
|
-
function
|
|
2370
|
+
function Ce(r) {
|
|
2371
2371
|
const e = document.createElement("div");
|
|
2372
|
-
return e.className = `tbw-aggregation-rows tbw-aggregation-rows-${
|
|
2372
|
+
return e.className = `tbw-aggregation-rows tbw-aggregation-rows-${r}`, e.setAttribute("role", "presentation"), e;
|
|
2373
2373
|
}
|
|
2374
|
-
function
|
|
2375
|
-
|
|
2376
|
-
for (const
|
|
2374
|
+
function ye(r, e, t, n) {
|
|
2375
|
+
r.innerHTML = "";
|
|
2376
|
+
for (const o of e) {
|
|
2377
2377
|
const i = document.createElement("div");
|
|
2378
|
-
if (i.className = "tbw-aggregation-row", i.setAttribute("role", "presentation"),
|
|
2379
|
-
const
|
|
2380
|
-
|
|
2378
|
+
if (i.className = "tbw-aggregation-row", i.setAttribute("role", "presentation"), o.id && i.setAttribute("data-aggregation-id", o.id), o.fullWidth) {
|
|
2379
|
+
const s = document.createElement("div");
|
|
2380
|
+
s.className = "tbw-aggregation-cell tbw-aggregation-cell-full", s.style.gridColumn = "1 / -1", s.textContent = o.label || "", i.appendChild(s);
|
|
2381
2381
|
} else
|
|
2382
|
-
for (const
|
|
2382
|
+
for (const s of t) {
|
|
2383
2383
|
const l = document.createElement("div");
|
|
2384
|
-
l.className = "tbw-aggregation-cell", l.setAttribute("data-field",
|
|
2384
|
+
l.className = "tbw-aggregation-cell", l.setAttribute("data-field", s.field);
|
|
2385
2385
|
let a;
|
|
2386
|
-
const d =
|
|
2386
|
+
const d = o.aggregators?.[s.field];
|
|
2387
2387
|
if (d) {
|
|
2388
|
-
const c =
|
|
2389
|
-
c && (a = c(
|
|
2390
|
-
} else if (
|
|
2391
|
-
const c =
|
|
2392
|
-
typeof c == "function" ? a = c(
|
|
2388
|
+
const c = He(d);
|
|
2389
|
+
c && (a = c(n, s.field, s));
|
|
2390
|
+
} else if (o.cells && Object.prototype.hasOwnProperty.call(o.cells, s.field)) {
|
|
2391
|
+
const c = o.cells[s.field];
|
|
2392
|
+
typeof c == "function" ? a = c(n, s.field, s) : a = c;
|
|
2393
2393
|
}
|
|
2394
2394
|
l.textContent = a != null ? String(a) : "", i.appendChild(l);
|
|
2395
2395
|
}
|
|
2396
|
-
|
|
2396
|
+
r.appendChild(i);
|
|
2397
2397
|
}
|
|
2398
2398
|
}
|
|
2399
|
-
function
|
|
2399
|
+
function kt(r, e) {
|
|
2400
2400
|
const t = document.createElement("div");
|
|
2401
|
-
t.className = "tbw-status-panel tbw-status-panel-custom", t.id = `status-panel-${
|
|
2402
|
-
const
|
|
2403
|
-
return typeof
|
|
2401
|
+
t.className = "tbw-status-panel tbw-status-panel-custom", t.id = `status-panel-${r.id}`;
|
|
2402
|
+
const n = r.render(e);
|
|
2403
|
+
return typeof n == "string" ? t.innerHTML = n : t.appendChild(n), t;
|
|
2404
2404
|
}
|
|
2405
|
-
function
|
|
2405
|
+
function Re(r, e, t, n, o) {
|
|
2406
2406
|
return {
|
|
2407
|
-
totalRows:
|
|
2408
|
-
filteredRows:
|
|
2409
|
-
selectedRows:
|
|
2407
|
+
totalRows: r.length,
|
|
2408
|
+
filteredRows: o?.cachedResult?.length ?? r.length,
|
|
2409
|
+
selectedRows: n?.selected?.size ?? 0,
|
|
2410
2410
|
columns: e,
|
|
2411
|
-
rows:
|
|
2411
|
+
rows: r,
|
|
2412
2412
|
grid: t
|
|
2413
2413
|
};
|
|
2414
2414
|
}
|
|
2415
|
-
const
|
|
2416
|
-
class
|
|
2415
|
+
const At = ".tbw-footer{position:sticky;bottom:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-color-panel-bg)}.tbw-pinned-rows{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--tbw-pinned-rows-bg, var(--tbw-color-panel-bg));border-top:1px solid var(--tbw-pinned-rows-border, var(--tbw-color-border));font-size:12px;color:var(--tbw-pinned-rows-color, var(--tbw-color-fg-muted));min-height:32px;box-sizing:border-box;min-width:fit-content}.tbw-pinned-rows-left,.tbw-pinned-rows-center,.tbw-pinned-rows-right{display:flex;align-items:center;gap:16px}.tbw-pinned-rows-left{justify-content:flex-start}.tbw-pinned-rows-center{justify-content:center;flex:1}.tbw-pinned-rows-right{justify-content:flex-end}.tbw-status-panel{white-space:nowrap}.tbw-aggregation-rows{min-width:fit-content;background:var(--tbw-aggregation-bg, var(--tbw-color-header-bg))}.tbw-aggregation-rows-top{border-bottom:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-rows-bottom{border-top:1px solid var(--tbw-aggregation-border, var(--tbw-color-border))}.tbw-aggregation-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:var(--tbw-aggregation-font-weight, 600)}.tbw-aggregation-cell{padding:var(--tbw-cell-padding, 2px 8px);min-height:var(--tbw-row-height, 28px);display:flex;align-items:center;border-right:1px solid var(--tbw-color-border-cell)}.tbw-aggregation-cell:last-child{border-right:0}.tbw-aggregation-cell-full{grid-column:1 / -1;border-right:0}";
|
|
2416
|
+
class En extends x {
|
|
2417
2417
|
name = "pinnedRows";
|
|
2418
2418
|
version = "1.0.0";
|
|
2419
2419
|
get defaultConfig() {
|
|
@@ -2439,20 +2439,20 @@ class io extends C {
|
|
|
2439
2439
|
if (!e) return;
|
|
2440
2440
|
const t = e.querySelector(".tbw-scroll-area") ?? e.querySelector(".tbw-grid-content") ?? e.children[0];
|
|
2441
2441
|
if (!t) return;
|
|
2442
|
-
const
|
|
2442
|
+
const n = this.getSelectionState(), o = this.getFilterState(), i = Re(
|
|
2443
2443
|
this.rows,
|
|
2444
2444
|
this.columns,
|
|
2445
2445
|
this.grid,
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
),
|
|
2446
|
+
n,
|
|
2447
|
+
o
|
|
2448
|
+
), s = this.config.aggregationRows || [], l = s.filter((h) => h.position === "top"), a = s.filter((h) => h.position !== "top");
|
|
2449
2449
|
if (l.length > 0) {
|
|
2450
2450
|
if (!this.topAggregationContainer) {
|
|
2451
|
-
this.topAggregationContainer =
|
|
2451
|
+
this.topAggregationContainer = Ce("top");
|
|
2452
2452
|
const h = e.querySelector(".header");
|
|
2453
2453
|
h && h.nextSibling ? t.insertBefore(this.topAggregationContainer, h.nextSibling) : t.appendChild(this.topAggregationContainer);
|
|
2454
2454
|
}
|
|
2455
|
-
|
|
2455
|
+
ye(
|
|
2456
2456
|
this.topAggregationContainer,
|
|
2457
2457
|
l,
|
|
2458
2458
|
this.visibleColumns,
|
|
@@ -2462,18 +2462,18 @@ class io extends C {
|
|
|
2462
2462
|
const d = this.config.showRowCount !== !1 || this.config.showSelectedCount && i.selectedRows > 0 || this.config.showFilteredCount && i.filteredRows !== i.totalRows || this.config.customPanels && this.config.customPanels.length > 0, c = d && this.config.position !== "top", u = a.length > 0 || c;
|
|
2463
2463
|
if (d && this.config.position === "top")
|
|
2464
2464
|
if (!this.infoBarElement)
|
|
2465
|
-
this.infoBarElement =
|
|
2465
|
+
this.infoBarElement = W(this.config, i), t.insertBefore(this.infoBarElement, t.firstChild);
|
|
2466
2466
|
else {
|
|
2467
|
-
const h =
|
|
2467
|
+
const h = W(this.config, i);
|
|
2468
2468
|
this.infoBarElement.replaceWith(h), this.infoBarElement = h;
|
|
2469
2469
|
}
|
|
2470
2470
|
else this.config.position === "top" && this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null);
|
|
2471
|
-
u ? (this.footerWrapper || (this.footerWrapper = document.createElement("div"), this.footerWrapper.className = "tbw-footer", t.appendChild(this.footerWrapper)), this.footerWrapper.innerHTML = "", a.length > 0 && (this.bottomAggregationContainer || (this.bottomAggregationContainer =
|
|
2471
|
+
u ? (this.footerWrapper || (this.footerWrapper = document.createElement("div"), this.footerWrapper.className = "tbw-footer", t.appendChild(this.footerWrapper)), this.footerWrapper.innerHTML = "", a.length > 0 && (this.bottomAggregationContainer || (this.bottomAggregationContainer = Ce("bottom")), this.footerWrapper.appendChild(this.bottomAggregationContainer), ye(
|
|
2472
2472
|
this.bottomAggregationContainer,
|
|
2473
2473
|
a,
|
|
2474
2474
|
this.visibleColumns,
|
|
2475
2475
|
this.rows
|
|
2476
|
-
)), c && (this.infoBarElement =
|
|
2476
|
+
)), c && (this.infoBarElement = W(this.config, i), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
|
|
2477
2477
|
}
|
|
2478
2478
|
// ===== Private Methods =====
|
|
2479
2479
|
cleanup() {
|
|
@@ -2509,7 +2509,7 @@ class io extends C {
|
|
|
2509
2509
|
*/
|
|
2510
2510
|
getContext() {
|
|
2511
2511
|
const e = this.getSelectionState(), t = this.getFilterState();
|
|
2512
|
-
return
|
|
2512
|
+
return Re(
|
|
2513
2513
|
this.rows,
|
|
2514
2514
|
this.columns,
|
|
2515
2515
|
this.grid,
|
|
@@ -2546,289 +2546,289 @@ class io extends C {
|
|
|
2546
2546
|
this.config.aggregationRows && (this.config.aggregationRows = this.config.aggregationRows.filter((t) => t.id !== e), this.requestRender());
|
|
2547
2547
|
}
|
|
2548
2548
|
// ===== Styles =====
|
|
2549
|
-
styles =
|
|
2549
|
+
styles = At;
|
|
2550
2550
|
}
|
|
2551
|
-
const
|
|
2552
|
-
function
|
|
2551
|
+
const _t = Ge;
|
|
2552
|
+
function It(r) {
|
|
2553
2553
|
const e = [];
|
|
2554
|
-
return !
|
|
2554
|
+
return !r.rowGroupFields?.length && !r.columnGroupFields?.length && e.push("At least one row or column group field is required"), r.valueFields?.length || e.push("At least one value field is required"), e;
|
|
2555
2555
|
}
|
|
2556
|
-
function
|
|
2557
|
-
return [...
|
|
2556
|
+
function te(r, e) {
|
|
2557
|
+
return [...r, e].join("|");
|
|
2558
2558
|
}
|
|
2559
|
-
function
|
|
2560
|
-
const t = e.rowGroupFields ?? [],
|
|
2561
|
-
|
|
2559
|
+
function Ft(r, e) {
|
|
2560
|
+
const t = e.rowGroupFields ?? [], n = e.columnGroupFields ?? [], o = e.valueFields ?? [], i = Lt(r, n), s = Pe(
|
|
2561
|
+
r,
|
|
2562
2562
|
t,
|
|
2563
|
-
o,
|
|
2564
|
-
i,
|
|
2565
2563
|
n,
|
|
2564
|
+
i,
|
|
2565
|
+
o,
|
|
2566
2566
|
0,
|
|
2567
2567
|
// starting depth
|
|
2568
2568
|
""
|
|
2569
2569
|
// parent key prefix
|
|
2570
|
-
), l =
|
|
2570
|
+
), l = Mt(s, i, o), a = Object.values(l).reduce((d, c) => d + c, 0);
|
|
2571
2571
|
return {
|
|
2572
|
-
rows:
|
|
2572
|
+
rows: s,
|
|
2573
2573
|
columnKeys: i,
|
|
2574
2574
|
totals: l,
|
|
2575
2575
|
grandTotal: a
|
|
2576
2576
|
};
|
|
2577
2577
|
}
|
|
2578
|
-
function
|
|
2578
|
+
function Lt(r, e) {
|
|
2579
2579
|
if (e.length === 0) return ["value"];
|
|
2580
2580
|
const t = /* @__PURE__ */ new Set();
|
|
2581
|
-
for (const
|
|
2582
|
-
const
|
|
2583
|
-
t.add(
|
|
2581
|
+
for (const n of r) {
|
|
2582
|
+
const o = e.map((i) => String(n[i] ?? "")).join("|");
|
|
2583
|
+
t.add(o);
|
|
2584
2584
|
}
|
|
2585
2585
|
return [...t].sort();
|
|
2586
2586
|
}
|
|
2587
|
-
function
|
|
2587
|
+
function Tt(r, e) {
|
|
2588
2588
|
const t = /* @__PURE__ */ new Map();
|
|
2589
|
-
for (const
|
|
2590
|
-
const
|
|
2591
|
-
i ? i.push(
|
|
2589
|
+
for (const n of r) {
|
|
2590
|
+
const o = String(n[e] ?? ""), i = t.get(o);
|
|
2591
|
+
i ? i.push(n) : t.set(o, [n]);
|
|
2592
2592
|
}
|
|
2593
2593
|
return t;
|
|
2594
2594
|
}
|
|
2595
|
-
function
|
|
2595
|
+
function Pe(r, e, t, n, o, i, s) {
|
|
2596
2596
|
const l = [];
|
|
2597
2597
|
if (e.length === 0) {
|
|
2598
|
-
const h =
|
|
2598
|
+
const h = Se(r, t, n, o), g = Ee(h);
|
|
2599
2599
|
return l.push({
|
|
2600
|
-
rowKey:
|
|
2601
|
-
rowLabel:
|
|
2600
|
+
rowKey: s || "all",
|
|
2601
|
+
rowLabel: s || "All",
|
|
2602
2602
|
depth: i,
|
|
2603
2603
|
values: h,
|
|
2604
|
-
total:
|
|
2604
|
+
total: g,
|
|
2605
2605
|
isGroup: !1,
|
|
2606
|
-
rowCount:
|
|
2606
|
+
rowCount: r.length
|
|
2607
2607
|
}), l;
|
|
2608
2608
|
}
|
|
2609
|
-
const a = e[0], d = e.slice(1), c = d.length > 0, u =
|
|
2610
|
-
for (const [h,
|
|
2611
|
-
const
|
|
2612
|
-
let
|
|
2613
|
-
c && (
|
|
2614
|
-
|
|
2609
|
+
const a = e[0], d = e.slice(1), c = d.length > 0, u = Tt(r, a);
|
|
2610
|
+
for (const [h, g] of u) {
|
|
2611
|
+
const p = s ? `${s}|${h}` : h, f = Se(g, t, n, o), m = Ee(f);
|
|
2612
|
+
let w;
|
|
2613
|
+
c && (w = Pe(
|
|
2614
|
+
g,
|
|
2615
2615
|
d,
|
|
2616
2616
|
t,
|
|
2617
|
-
o,
|
|
2618
2617
|
n,
|
|
2618
|
+
o,
|
|
2619
2619
|
i + 1,
|
|
2620
|
-
|
|
2620
|
+
p
|
|
2621
2621
|
)), l.push({
|
|
2622
|
-
rowKey:
|
|
2622
|
+
rowKey: p,
|
|
2623
2623
|
rowLabel: h || "(blank)",
|
|
2624
2624
|
depth: i,
|
|
2625
|
-
values:
|
|
2626
|
-
total:
|
|
2625
|
+
values: f,
|
|
2626
|
+
total: m,
|
|
2627
2627
|
isGroup: c,
|
|
2628
|
-
children:
|
|
2629
|
-
rowCount:
|
|
2628
|
+
children: w,
|
|
2629
|
+
rowCount: g.length
|
|
2630
2630
|
});
|
|
2631
2631
|
}
|
|
2632
2632
|
return l;
|
|
2633
2633
|
}
|
|
2634
|
-
function
|
|
2635
|
-
const
|
|
2634
|
+
function Se(r, e, t, n) {
|
|
2635
|
+
const o = {};
|
|
2636
2636
|
for (const i of t)
|
|
2637
|
-
for (const
|
|
2638
|
-
const a = (e.length > 0 ?
|
|
2639
|
-
|
|
2637
|
+
for (const s of n) {
|
|
2638
|
+
const a = (e.length > 0 ? r.filter((h) => e.map((g) => String(h[g] ?? "")).join("|") === i) : r).map((h) => Number(h[s.field]) || 0), d = _t(s.aggFunc), c = a.length > 0 ? d(a) : null, u = te([i], s.field);
|
|
2639
|
+
o[u] = c;
|
|
2640
2640
|
}
|
|
2641
|
-
return
|
|
2641
|
+
return o;
|
|
2642
2642
|
}
|
|
2643
|
-
function
|
|
2643
|
+
function Ee(r) {
|
|
2644
2644
|
let e = 0;
|
|
2645
|
-
for (const t of Object.values(
|
|
2645
|
+
for (const t of Object.values(r))
|
|
2646
2646
|
e += t ?? 0;
|
|
2647
2647
|
return e;
|
|
2648
2648
|
}
|
|
2649
|
-
function
|
|
2650
|
-
const
|
|
2651
|
-
function
|
|
2652
|
-
for (const
|
|
2653
|
-
if (!
|
|
2649
|
+
function Mt(r, e, t) {
|
|
2650
|
+
const n = {};
|
|
2651
|
+
function o(i) {
|
|
2652
|
+
for (const s of i)
|
|
2653
|
+
if (!s.isGroup || !s.children?.length)
|
|
2654
2654
|
for (const l of e)
|
|
2655
2655
|
for (const a of t) {
|
|
2656
|
-
const d =
|
|
2657
|
-
|
|
2656
|
+
const d = te([l], a.field);
|
|
2657
|
+
n[d] = (n[d] ?? 0) + (s.values[d] ?? 0);
|
|
2658
2658
|
}
|
|
2659
|
-
else
|
|
2659
|
+
else s.children && o(s.children);
|
|
2660
2660
|
}
|
|
2661
|
-
return
|
|
2661
|
+
return o(r), n;
|
|
2662
2662
|
}
|
|
2663
|
-
function
|
|
2664
|
-
const
|
|
2665
|
-
function
|
|
2666
|
-
|
|
2667
|
-
const
|
|
2668
|
-
if (i.children &&
|
|
2663
|
+
function Nt(r, e, t = !0) {
|
|
2664
|
+
const n = [];
|
|
2665
|
+
function o(i) {
|
|
2666
|
+
n.push(i);
|
|
2667
|
+
const s = e ? e.has(i.rowKey) : t;
|
|
2668
|
+
if (i.children && s)
|
|
2669
2669
|
for (const l of i.children)
|
|
2670
|
-
|
|
2670
|
+
o(l);
|
|
2671
2671
|
}
|
|
2672
|
-
for (const i of
|
|
2673
|
-
|
|
2674
|
-
return
|
|
2672
|
+
for (const i of r)
|
|
2673
|
+
o(i);
|
|
2674
|
+
return n;
|
|
2675
2675
|
}
|
|
2676
|
-
function
|
|
2676
|
+
function $(r) {
|
|
2677
2677
|
const e = [];
|
|
2678
|
-
function t(
|
|
2679
|
-
if (
|
|
2680
|
-
for (const
|
|
2681
|
-
t(
|
|
2678
|
+
function t(n) {
|
|
2679
|
+
if (n.isGroup && e.push(n.rowKey), n.children)
|
|
2680
|
+
for (const o of n.children)
|
|
2681
|
+
t(o);
|
|
2682
2682
|
}
|
|
2683
|
-
for (const
|
|
2684
|
-
t(
|
|
2683
|
+
for (const n of r)
|
|
2684
|
+
t(n);
|
|
2685
2685
|
return e;
|
|
2686
2686
|
}
|
|
2687
|
-
const
|
|
2688
|
-
function
|
|
2689
|
-
const
|
|
2690
|
-
return
|
|
2691
|
-
|
|
2687
|
+
const Pt = ["sum", "avg", "count", "min", "max", "first", "last"];
|
|
2688
|
+
function qt(r, e, t, n) {
|
|
2689
|
+
const o = new AbortController(), i = { config: e, callbacks: n, signal: o.signal }, s = document.createElement("div");
|
|
2690
|
+
return s.className = "tbw-pivot-panel", s.appendChild(F("Options", () => Bt(t, i))), s.appendChild(F("Row Groups", () => ke("rowGroups", i))), s.appendChild(F("Column Groups", () => ke("columnGroups", i))), s.appendChild(F("Values", () => Kt(i))), s.appendChild(F("Available Fields", () => Gt(i))), r.appendChild(s), () => {
|
|
2691
|
+
o.abort(), s.remove();
|
|
2692
2692
|
};
|
|
2693
2693
|
}
|
|
2694
|
-
function
|
|
2694
|
+
function F(r, e) {
|
|
2695
2695
|
const t = document.createElement("div");
|
|
2696
2696
|
t.className = "tbw-pivot-section";
|
|
2697
|
-
const o = document.createElement("div");
|
|
2698
|
-
o.className = "tbw-pivot-section-header", o.textContent = s;
|
|
2699
2697
|
const n = document.createElement("div");
|
|
2700
|
-
|
|
2698
|
+
n.className = "tbw-pivot-section-header", n.textContent = r;
|
|
2699
|
+
const o = document.createElement("div");
|
|
2700
|
+
return o.className = "tbw-pivot-section-content", o.appendChild(e()), t.appendChild(n), t.appendChild(o), t;
|
|
2701
2701
|
}
|
|
2702
|
-
function
|
|
2703
|
-
const { config: t, callbacks:
|
|
2704
|
-
i.className = "tbw-pivot-drop-zone", i.setAttribute("data-zone",
|
|
2705
|
-
const
|
|
2706
|
-
if (
|
|
2702
|
+
function ke(r, e) {
|
|
2703
|
+
const { config: t, callbacks: n, signal: o } = e, i = document.createElement("div");
|
|
2704
|
+
i.className = "tbw-pivot-drop-zone", i.setAttribute("data-zone", r);
|
|
2705
|
+
const s = r === "rowGroups" ? t.rowGroupFields ?? [] : t.columnGroupFields ?? [];
|
|
2706
|
+
if (s.length === 0) {
|
|
2707
2707
|
const l = document.createElement("div");
|
|
2708
2708
|
l.className = "tbw-pivot-placeholder", l.textContent = "Drag fields here or click to add", i.appendChild(l);
|
|
2709
2709
|
} else
|
|
2710
|
-
for (const l of
|
|
2711
|
-
i.appendChild(
|
|
2710
|
+
for (const l of s)
|
|
2711
|
+
i.appendChild(Dt(l, r, e));
|
|
2712
2712
|
return i.addEventListener(
|
|
2713
2713
|
"dragover",
|
|
2714
2714
|
(l) => {
|
|
2715
2715
|
l.preventDefault(), i.classList.add("drag-over");
|
|
2716
2716
|
},
|
|
2717
|
-
{ signal:
|
|
2717
|
+
{ signal: o }
|
|
2718
2718
|
), i.addEventListener(
|
|
2719
2719
|
"dragleave",
|
|
2720
2720
|
() => {
|
|
2721
2721
|
i.classList.remove("drag-over");
|
|
2722
2722
|
},
|
|
2723
|
-
{ signal:
|
|
2723
|
+
{ signal: o }
|
|
2724
2724
|
), i.addEventListener(
|
|
2725
2725
|
"drop",
|
|
2726
2726
|
(l) => {
|
|
2727
2727
|
l.preventDefault(), i.classList.remove("drag-over");
|
|
2728
2728
|
const a = l.dataTransfer?.getData("text/plain");
|
|
2729
|
-
a &&
|
|
2729
|
+
a && n.onAddFieldToZone(a, r);
|
|
2730
2730
|
},
|
|
2731
|
-
{ signal:
|
|
2731
|
+
{ signal: o }
|
|
2732
2732
|
), i;
|
|
2733
2733
|
}
|
|
2734
|
-
function
|
|
2735
|
-
const { callbacks:
|
|
2734
|
+
function Dt(r, e, t) {
|
|
2735
|
+
const { callbacks: n, signal: o } = t, i = document.createElement("div");
|
|
2736
2736
|
i.className = "tbw-pivot-field-chip", i.draggable = !0;
|
|
2737
|
-
const
|
|
2738
|
-
l.className = "tbw-pivot-chip-label", l.textContent =
|
|
2737
|
+
const s = n.getAvailableFields().find((d) => d.field === r), l = document.createElement("span");
|
|
2738
|
+
l.className = "tbw-pivot-chip-label", l.textContent = s?.header ?? r;
|
|
2739
2739
|
const a = document.createElement("button");
|
|
2740
2740
|
return a.className = "tbw-pivot-chip-remove", a.innerHTML = "×", a.title = "Remove field", a.addEventListener(
|
|
2741
2741
|
"click",
|
|
2742
2742
|
(d) => {
|
|
2743
|
-
d.stopPropagation(),
|
|
2743
|
+
d.stopPropagation(), n.onRemoveFieldFromZone(r, e);
|
|
2744
2744
|
},
|
|
2745
|
-
{ signal:
|
|
2745
|
+
{ signal: o }
|
|
2746
2746
|
), i.appendChild(l), i.appendChild(a), i.addEventListener(
|
|
2747
2747
|
"dragstart",
|
|
2748
2748
|
(d) => {
|
|
2749
|
-
d.dataTransfer?.setData("text/plain",
|
|
2749
|
+
d.dataTransfer?.setData("text/plain", r), d.dataTransfer?.setData("source-zone", e), i.classList.add("dragging");
|
|
2750
2750
|
},
|
|
2751
|
-
{ signal:
|
|
2751
|
+
{ signal: o }
|
|
2752
2752
|
), i.addEventListener(
|
|
2753
2753
|
"dragend",
|
|
2754
2754
|
() => {
|
|
2755
2755
|
i.classList.remove("dragging");
|
|
2756
2756
|
},
|
|
2757
|
-
{ signal:
|
|
2757
|
+
{ signal: o }
|
|
2758
2758
|
), i;
|
|
2759
2759
|
}
|
|
2760
|
-
function
|
|
2761
|
-
const { config: e, callbacks: t, signal:
|
|
2762
|
-
|
|
2760
|
+
function Kt(r) {
|
|
2761
|
+
const { config: e, callbacks: t, signal: n } = r, o = document.createElement("div");
|
|
2762
|
+
o.className = "tbw-pivot-drop-zone tbw-pivot-values-zone", o.setAttribute("data-zone", "values");
|
|
2763
2763
|
const i = e.valueFields ?? [];
|
|
2764
2764
|
if (i.length === 0) {
|
|
2765
|
-
const
|
|
2766
|
-
|
|
2765
|
+
const s = document.createElement("div");
|
|
2766
|
+
s.className = "tbw-pivot-placeholder", s.textContent = "Drag numeric fields here for aggregation", o.appendChild(s);
|
|
2767
2767
|
} else
|
|
2768
|
-
for (const
|
|
2769
|
-
|
|
2770
|
-
return
|
|
2768
|
+
for (const s of i)
|
|
2769
|
+
o.appendChild(Ht(s, r));
|
|
2770
|
+
return o.addEventListener(
|
|
2771
2771
|
"dragover",
|
|
2772
|
-
(
|
|
2773
|
-
|
|
2772
|
+
(s) => {
|
|
2773
|
+
s.preventDefault(), o.classList.add("drag-over");
|
|
2774
2774
|
},
|
|
2775
|
-
{ signal:
|
|
2776
|
-
),
|
|
2775
|
+
{ signal: n }
|
|
2776
|
+
), o.addEventListener(
|
|
2777
2777
|
"dragleave",
|
|
2778
2778
|
() => {
|
|
2779
|
-
|
|
2779
|
+
o.classList.remove("drag-over");
|
|
2780
2780
|
},
|
|
2781
|
-
{ signal:
|
|
2782
|
-
),
|
|
2781
|
+
{ signal: n }
|
|
2782
|
+
), o.addEventListener(
|
|
2783
2783
|
"drop",
|
|
2784
|
-
(
|
|
2785
|
-
|
|
2786
|
-
const l =
|
|
2784
|
+
(s) => {
|
|
2785
|
+
s.preventDefault(), o.classList.remove("drag-over");
|
|
2786
|
+
const l = s.dataTransfer?.getData("text/plain");
|
|
2787
2787
|
l && t.onAddValueField(l, "sum");
|
|
2788
2788
|
},
|
|
2789
|
-
{ signal:
|
|
2790
|
-
),
|
|
2789
|
+
{ signal: n }
|
|
2790
|
+
), o;
|
|
2791
2791
|
}
|
|
2792
|
-
function
|
|
2793
|
-
const { callbacks: t, signal:
|
|
2794
|
-
|
|
2795
|
-
const i = t.getAvailableFields().find((c) => c.field ===
|
|
2796
|
-
|
|
2792
|
+
function Ht(r, e) {
|
|
2793
|
+
const { callbacks: t, signal: n } = e, o = document.createElement("div");
|
|
2794
|
+
o.className = "tbw-pivot-field-chip tbw-pivot-value-chip";
|
|
2795
|
+
const i = t.getAvailableFields().find((c) => c.field === r.field), s = document.createElement("div");
|
|
2796
|
+
s.className = "tbw-pivot-value-label-wrapper";
|
|
2797
2797
|
const l = document.createElement("span");
|
|
2798
|
-
l.className = "tbw-pivot-chip-label", l.textContent = i?.header ??
|
|
2798
|
+
l.className = "tbw-pivot-chip-label", l.textContent = i?.header ?? r.field;
|
|
2799
2799
|
const a = document.createElement("select");
|
|
2800
2800
|
a.className = "tbw-pivot-agg-select", a.title = "Aggregation function";
|
|
2801
|
-
for (const c of
|
|
2801
|
+
for (const c of Pt) {
|
|
2802
2802
|
const u = document.createElement("option");
|
|
2803
|
-
u.value = c, u.textContent = c.toUpperCase(), u.selected = c ===
|
|
2803
|
+
u.value = c, u.textContent = c.toUpperCase(), u.selected = c === r.aggFunc, a.appendChild(u);
|
|
2804
2804
|
}
|
|
2805
2805
|
a.addEventListener(
|
|
2806
2806
|
"change",
|
|
2807
2807
|
() => {
|
|
2808
|
-
t.onUpdateValueAggFunc(
|
|
2808
|
+
t.onUpdateValueAggFunc(r.field, a.value);
|
|
2809
2809
|
},
|
|
2810
|
-
{ signal:
|
|
2810
|
+
{ signal: n }
|
|
2811
2811
|
);
|
|
2812
2812
|
const d = document.createElement("button");
|
|
2813
2813
|
return d.className = "tbw-pivot-chip-remove", d.innerHTML = "×", d.title = "Remove value field", d.addEventListener(
|
|
2814
2814
|
"click",
|
|
2815
2815
|
(c) => {
|
|
2816
|
-
c.stopPropagation(), t.onRemoveValueField(
|
|
2816
|
+
c.stopPropagation(), t.onRemoveValueField(r.field);
|
|
2817
2817
|
},
|
|
2818
|
-
{ signal:
|
|
2819
|
-
),
|
|
2818
|
+
{ signal: n }
|
|
2819
|
+
), s.appendChild(l), s.appendChild(a), o.appendChild(s), o.appendChild(d), o;
|
|
2820
2820
|
}
|
|
2821
|
-
function
|
|
2822
|
-
const { config: e, callbacks: t, signal:
|
|
2823
|
-
|
|
2824
|
-
const i = t.getAvailableFields(),
|
|
2821
|
+
function Gt(r) {
|
|
2822
|
+
const { config: e, callbacks: t, signal: n } = r, o = document.createElement("div");
|
|
2823
|
+
o.className = "tbw-pivot-available-fields";
|
|
2824
|
+
const i = t.getAvailableFields(), s = /* @__PURE__ */ new Set([
|
|
2825
2825
|
...e.rowGroupFields ?? [],
|
|
2826
2826
|
...e.columnGroupFields ?? [],
|
|
2827
2827
|
...e.valueFields?.map((a) => a.field) ?? []
|
|
2828
|
-
]), l = i.filter((a) => !
|
|
2828
|
+
]), l = i.filter((a) => !s.has(a.field));
|
|
2829
2829
|
if (l.length === 0) {
|
|
2830
2830
|
const a = document.createElement("div");
|
|
2831
|
-
a.className = "tbw-pivot-placeholder", a.textContent = "All fields are in use",
|
|
2831
|
+
a.className = "tbw-pivot-placeholder", a.textContent = "All fields are in use", o.appendChild(a);
|
|
2832
2832
|
} else
|
|
2833
2833
|
for (const a of l) {
|
|
2834
2834
|
const d = document.createElement("div");
|
|
@@ -2837,107 +2837,107 @@ function Tt(s) {
|
|
|
2837
2837
|
(c) => {
|
|
2838
2838
|
c.dataTransfer?.setData("text/plain", a.field), d.classList.add("dragging");
|
|
2839
2839
|
},
|
|
2840
|
-
{ signal:
|
|
2840
|
+
{ signal: n }
|
|
2841
2841
|
), d.addEventListener(
|
|
2842
2842
|
"dragend",
|
|
2843
2843
|
() => {
|
|
2844
2844
|
d.classList.remove("dragging");
|
|
2845
2845
|
},
|
|
2846
|
-
{ signal:
|
|
2847
|
-
),
|
|
2846
|
+
{ signal: n }
|
|
2847
|
+
), o.appendChild(d);
|
|
2848
2848
|
}
|
|
2849
|
-
return
|
|
2849
|
+
return o;
|
|
2850
2850
|
}
|
|
2851
|
-
function
|
|
2852
|
-
const { config: t, callbacks:
|
|
2851
|
+
function Bt(r, e) {
|
|
2852
|
+
const { config: t, callbacks: n, signal: o } = e, i = document.createElement("div");
|
|
2853
2853
|
return i.className = "tbw-pivot-options", i.appendChild(
|
|
2854
|
-
|
|
2854
|
+
j(
|
|
2855
2855
|
"Enable Pivot View",
|
|
2856
|
-
|
|
2857
|
-
(
|
|
2858
|
-
|
|
2856
|
+
r,
|
|
2857
|
+
(s) => {
|
|
2858
|
+
n.onTogglePivot(s);
|
|
2859
2859
|
},
|
|
2860
|
-
|
|
2860
|
+
o
|
|
2861
2861
|
)
|
|
2862
2862
|
), i.appendChild(
|
|
2863
|
-
|
|
2863
|
+
j(
|
|
2864
2864
|
"Show Row Totals",
|
|
2865
2865
|
t.showTotals ?? !0,
|
|
2866
|
-
(
|
|
2867
|
-
|
|
2866
|
+
(s) => {
|
|
2867
|
+
n.onOptionChange("showTotals", s);
|
|
2868
2868
|
},
|
|
2869
|
-
|
|
2869
|
+
o
|
|
2870
2870
|
)
|
|
2871
2871
|
), i.appendChild(
|
|
2872
|
-
|
|
2872
|
+
j(
|
|
2873
2873
|
"Show Grand Total",
|
|
2874
2874
|
t.showGrandTotal ?? !0,
|
|
2875
|
-
(
|
|
2876
|
-
|
|
2875
|
+
(s) => {
|
|
2876
|
+
n.onOptionChange("showGrandTotal", s);
|
|
2877
2877
|
},
|
|
2878
|
-
|
|
2878
|
+
o
|
|
2879
2879
|
)
|
|
2880
2880
|
), i;
|
|
2881
2881
|
}
|
|
2882
|
-
function
|
|
2883
|
-
const
|
|
2884
|
-
|
|
2882
|
+
function j(r, e, t, n) {
|
|
2883
|
+
const o = document.createElement("label");
|
|
2884
|
+
o.className = "tbw-pivot-checkbox";
|
|
2885
2885
|
const i = document.createElement("input");
|
|
2886
|
-
i.type = "checkbox", i.checked = e, i.addEventListener("change", () => t(i.checked), { signal:
|
|
2887
|
-
const
|
|
2888
|
-
return
|
|
2886
|
+
i.type = "checkbox", i.checked = e, i.addEventListener("change", () => t(i.checked), { signal: n });
|
|
2887
|
+
const s = document.createElement("span");
|
|
2888
|
+
return s.textContent = r, o.appendChild(i), o.appendChild(s), o;
|
|
2889
2889
|
}
|
|
2890
|
-
function
|
|
2891
|
-
return e.className = "pivot-group-row", e.setAttribute("data-pivot-depth", String(
|
|
2890
|
+
function Ot(r, e, t) {
|
|
2891
|
+
return e.className = "pivot-group-row", e.setAttribute("data-pivot-depth", String(r.__pivotDepth ?? 0)), e.setAttribute("role", "row"), e.innerHTML = "", t.columns.forEach((n, o) => {
|
|
2892
2892
|
const i = document.createElement("div");
|
|
2893
|
-
if (i.className = "cell", i.setAttribute("data-col", String(
|
|
2894
|
-
const
|
|
2895
|
-
i.style.paddingLeft = `${
|
|
2896
|
-
const l = String(
|
|
2897
|
-
a.type = "button", a.className = "pivot-toggle", a.setAttribute("aria-label",
|
|
2893
|
+
if (i.className = "cell", i.setAttribute("data-col", String(o)), i.setAttribute("role", "gridcell"), o === 0) {
|
|
2894
|
+
const s = Number(r.__pivotIndent) || 0;
|
|
2895
|
+
i.style.paddingLeft = `${s}px`;
|
|
2896
|
+
const l = String(r.__pivotRowKey), a = document.createElement("button");
|
|
2897
|
+
a.type = "button", a.className = "pivot-toggle", a.setAttribute("aria-label", r.__pivotExpanded ? "Collapse group" : "Expand group"), t.setIcon(a, t.resolveIcon(r.__pivotExpanded ? "collapse" : "expand")), a.addEventListener("click", (u) => {
|
|
2898
2898
|
u.stopPropagation(), t.onToggle(l);
|
|
2899
2899
|
}), i.appendChild(a);
|
|
2900
2900
|
const d = document.createElement("span");
|
|
2901
|
-
d.className = "pivot-label", d.textContent = String(
|
|
2901
|
+
d.className = "pivot-label", d.textContent = String(r.__pivotLabel ?? ""), i.appendChild(d);
|
|
2902
2902
|
const c = document.createElement("span");
|
|
2903
|
-
c.className = "pivot-count", c.textContent = ` (${Number(
|
|
2903
|
+
c.className = "pivot-count", c.textContent = ` (${Number(r.__pivotRowCount) || 0})`, i.appendChild(c);
|
|
2904
2904
|
} else {
|
|
2905
|
-
const
|
|
2906
|
-
i.textContent =
|
|
2905
|
+
const s = r[n.field];
|
|
2906
|
+
i.textContent = s != null ? String(s) : "";
|
|
2907
2907
|
}
|
|
2908
2908
|
e.appendChild(i);
|
|
2909
2909
|
}), !0;
|
|
2910
2910
|
}
|
|
2911
|
-
function
|
|
2912
|
-
return e.className = "pivot-leaf-row", e.setAttribute("data-pivot-depth", String(
|
|
2911
|
+
function zt(r, e, t) {
|
|
2912
|
+
return e.className = "pivot-leaf-row", e.setAttribute("data-pivot-depth", String(r.__pivotDepth ?? 0)), e.innerHTML = "", t.forEach((n, o) => {
|
|
2913
2913
|
const i = document.createElement("div");
|
|
2914
|
-
if (i.className = "cell", i.setAttribute("data-col", String(
|
|
2915
|
-
const
|
|
2916
|
-
i.style.paddingLeft = `${
|
|
2914
|
+
if (i.className = "cell", i.setAttribute("data-col", String(o)), i.setAttribute("role", "gridcell"), o === 0) {
|
|
2915
|
+
const s = Number(r.__pivotIndent) || 0;
|
|
2916
|
+
i.style.paddingLeft = `${s + 20}px`;
|
|
2917
2917
|
const l = document.createElement("span");
|
|
2918
|
-
l.className = "pivot-label", l.textContent = String(
|
|
2918
|
+
l.className = "pivot-label", l.textContent = String(r.__pivotLabel ?? ""), i.appendChild(l);
|
|
2919
2919
|
} else {
|
|
2920
|
-
const
|
|
2921
|
-
i.textContent =
|
|
2920
|
+
const s = r[n.field];
|
|
2921
|
+
i.textContent = s != null ? String(s) : "";
|
|
2922
2922
|
}
|
|
2923
2923
|
e.appendChild(i);
|
|
2924
2924
|
}), !0;
|
|
2925
2925
|
}
|
|
2926
|
-
function
|
|
2927
|
-
return e.className = "pivot-grand-total-row", e.setAttribute("role", "presentation"), e.innerHTML = "", t.forEach((
|
|
2926
|
+
function Vt(r, e, t) {
|
|
2927
|
+
return e.className = "pivot-grand-total-row", e.setAttribute("role", "presentation"), e.innerHTML = "", t.forEach((n, o) => {
|
|
2928
2928
|
const i = document.createElement("div");
|
|
2929
|
-
if (i.className = "cell", i.setAttribute("data-col", String(
|
|
2930
|
-
const
|
|
2931
|
-
|
|
2929
|
+
if (i.className = "cell", i.setAttribute("data-col", String(o)), o === 0) {
|
|
2930
|
+
const s = document.createElement("span");
|
|
2931
|
+
s.className = "pivot-label", s.textContent = "Grand Total", i.appendChild(s);
|
|
2932
2932
|
} else {
|
|
2933
|
-
const
|
|
2934
|
-
i.textContent =
|
|
2933
|
+
const s = r[n.field];
|
|
2934
|
+
i.textContent = s != null ? String(s) : "";
|
|
2935
2935
|
}
|
|
2936
2936
|
e.appendChild(i);
|
|
2937
2937
|
}), !0;
|
|
2938
2938
|
}
|
|
2939
|
-
const
|
|
2940
|
-
class
|
|
2939
|
+
const Wt = '.pivot-group-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:600;background:var(--tbw-pivot-group-bg, var(--tbw-color-row-alt));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-group-row:hover{background:var(--tbw-pivot-group-hover, var(--tbw-color-row-hover))}.pivot-leaf-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-pivot-leaf-bg, var(--tbw-color-bg));min-height:var(--tbw-row-height);border-bottom:var(--tbw-row-divider)}.pivot-grand-total-row{display:grid;grid-template-columns:var(--tbw-column-template);font-weight:700;background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-height:var(--tbw-row-height);border-top:2px solid var(--tbw-color-border-strong)}.pivot-grand-total-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-grand-total-row>.cell:last-child{border-right:0}.pivot-grand-total-footer{position:sticky;bottom:0;z-index:var(--tbw-z-layer-pinned-rows, 20);background:var(--tbw-pivot-grand-total-bg, var(--tbw-color-header-bg));min-width:fit-content}.pivot-group-row>.cell,.pivot-leaf-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}.pivot-group-row>.cell:last-child,.pivot-leaf-row>.cell:last-child{border-right:0}.pivot-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;border:none;background:transparent;cursor:pointer;font-size:10px;color:var(--tbw-pivot-toggle-color, var(--tbw-color-fg-muted));border-radius:var(--tbw-border-radius);transition:background .15s,color .15s}.pivot-toggle:hover{background:var(--tbw-pivot-toggle-hover-bg, var(--tbw-color-row-hover));color:var(--tbw-pivot-toggle-hover-color, var(--tbw-color-fg))}.pivot-toggle:focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}.pivot-label{font-weight:inherit}.pivot-count{color:var(--tbw-pivot-count-color, var(--tbw-color-fg-muted));font-size:.9em;font-weight:400}.pivot-total-row{font-weight:700;border-top:2px solid var(--tbw-pivot-border, var(--tbw-color-border-strong))}[data-pivot-depth="1"]{--tbw-pivot-depth: 1}[data-pivot-depth="2"]{--tbw-pivot-depth: 2}[data-pivot-depth="3"]{--tbw-pivot-depth: 3}[data-pivot-depth="4"]{--tbw-pivot-depth: 4}.tbw-pivot-panel{display:flex;flex-direction:column;gap:12px;padding:12px;height:100%;overflow-y:auto;font-size:13px}.tbw-pivot-section{border:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-section-bg, var(--tbw-color-bg))}.tbw-pivot-section-header{padding:8px 12px;font-weight:600;background:var(--tbw-pivot-header-bg, var(--tbw-color-header-bg));border-bottom:1px solid var(--tbw-pivot-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius) var(--tbw-border-radius) 0 0}.tbw-pivot-section-content{padding:8px}.tbw-pivot-toggle-wrapper{display:flex;align-items:center}.tbw-pivot-toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer}.tbw-pivot-toggle-label input{width:16px;height:16px;cursor:pointer}.tbw-pivot-drop-zone{min-height:60px;padding:8px;border:2px dashed var(--tbw-pivot-drop-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);background:var(--tbw-pivot-drop-bg, var(--tbw-color-row-alt));display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;transition:all .15s ease}.tbw-pivot-drop-zone.drag-over{border-color:var(--tbw-color-accent);background:var(--tbw-pivot-drop-active, var(--tbw-focus-background))}.tbw-pivot-placeholder{color:var(--tbw-color-fg-muted);font-style:italic;padding:8px;text-align:center;width:100%}.tbw-pivot-field-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--tbw-pivot-chip-bg, var(--tbw-color-header-bg));border:1px solid var(--tbw-pivot-chip-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius);cursor:grab;font-size:12px;transition:all .15s ease}.tbw-pivot-field-chip:hover{background:var(--tbw-pivot-chip-hover, var(--tbw-color-row-hover));border-color:var(--tbw-color-accent)}.tbw-pivot-field-chip.available{background:var(--tbw-color-bg)}.tbw-pivot-field-chip.dragging{opacity:.5;cursor:grabbing}.tbw-pivot-chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.tbw-pivot-chip-remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:none;background:transparent;color:var(--tbw-color-fg-muted);font-size:14px;font-weight:700;cursor:pointer;border-radius:50%;transition:all .15s ease}.tbw-pivot-chip-remove:hover{background:var(--tbw-pivot-chip-remove-hover-bg, var(--tbw-color-accent));color:var(--tbw-pivot-chip-remove-hover-fg, var(--tbw-color-accent-fg))}.tbw-pivot-value-chip{padding:4px 8px}.tbw-pivot-value-label-wrapper{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.tbw-pivot-agg-select{padding:2px 4px;font-size:11px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);cursor:pointer}.tbw-pivot-available-fields{display:flex;flex-wrap:wrap;gap:6px;min-height:40px}.tbw-pivot-options{display:flex;flex-direction:column;gap:8px}.tbw-pivot-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer}.tbw-pivot-checkbox input{width:14px;height:14px;cursor:pointer}';
|
|
2940
|
+
class L extends x {
|
|
2941
2941
|
name = "pivot";
|
|
2942
2942
|
version = "1.0.0";
|
|
2943
2943
|
/** Tool panel ID for shell integration */
|
|
@@ -2972,7 +2972,7 @@ class F extends C {
|
|
|
2972
2972
|
// ===== Shell Integration =====
|
|
2973
2973
|
getToolPanel() {
|
|
2974
2974
|
return {
|
|
2975
|
-
id:
|
|
2975
|
+
id: L.PANEL_ID,
|
|
2976
2976
|
title: "Pivot",
|
|
2977
2977
|
icon: "⊞",
|
|
2978
2978
|
tooltip: "Configure pivot table",
|
|
@@ -2984,21 +2984,21 @@ class F extends C {
|
|
|
2984
2984
|
processRows(e) {
|
|
2985
2985
|
if (!this.hasInitialized && this.config.active !== !1 && this.hasValidPivotConfig() && (this.hasInitialized = !0, this.isActive = !0), !this.isActive)
|
|
2986
2986
|
return [...e];
|
|
2987
|
-
const t =
|
|
2987
|
+
const t = It(this.config);
|
|
2988
2988
|
if (t.length > 0)
|
|
2989
2989
|
return this.warn(`Config errors: ${t.join(", ")}`), [...e];
|
|
2990
2990
|
if (this.buildFieldHeaderMap(), this.defaultExpanded = this.config.defaultExpanded ?? !0, this.expandedKeys.size === 0 && this.defaultExpanded && this.pivotResult) {
|
|
2991
|
-
const i =
|
|
2992
|
-
for (const
|
|
2993
|
-
this.expandedKeys.add(
|
|
2991
|
+
const i = $(this.pivotResult.rows);
|
|
2992
|
+
for (const s of i)
|
|
2993
|
+
this.expandedKeys.add(s);
|
|
2994
2994
|
}
|
|
2995
|
-
if (this.pivotResult =
|
|
2996
|
-
const i =
|
|
2997
|
-
for (const
|
|
2998
|
-
this.expandedKeys.add(
|
|
2995
|
+
if (this.pivotResult = Ft(e, this.config), this.expandedKeys.size === 0 && this.defaultExpanded) {
|
|
2996
|
+
const i = $(this.pivotResult.rows);
|
|
2997
|
+
for (const s of i)
|
|
2998
|
+
this.expandedKeys.add(s);
|
|
2999
2999
|
}
|
|
3000
|
-
const
|
|
3001
|
-
return
|
|
3000
|
+
const n = this.config.indentWidth ?? 20;
|
|
3001
|
+
return Nt(
|
|
3002
3002
|
this.pivotResult.rows,
|
|
3003
3003
|
this.expandedKeys,
|
|
3004
3004
|
this.defaultExpanded
|
|
@@ -3010,7 +3010,7 @@ class F extends C {
|
|
|
3010
3010
|
__pivotHasChildren: !!i.children?.length,
|
|
3011
3011
|
__pivotExpanded: this.expandedKeys.has(i.rowKey),
|
|
3012
3012
|
__pivotRowCount: i.rowCount ?? 0,
|
|
3013
|
-
__pivotIndent: i.depth *
|
|
3013
|
+
__pivotIndent: i.depth * n,
|
|
3014
3014
|
__pivotTotal: i.total,
|
|
3015
3015
|
...i.values
|
|
3016
3016
|
}));
|
|
@@ -3018,18 +3018,18 @@ class F extends C {
|
|
|
3018
3018
|
processColumns(e) {
|
|
3019
3019
|
if (!this.isActive || !this.pivotResult)
|
|
3020
3020
|
return [...e];
|
|
3021
|
-
const t = [],
|
|
3021
|
+
const t = [], n = (this.config.rowGroupFields ?? []).map((o) => this.fieldHeaderMap.get(o) ?? o).join(" / ");
|
|
3022
3022
|
t.push({
|
|
3023
3023
|
field: "__pivotLabel",
|
|
3024
|
-
header:
|
|
3024
|
+
header: n || "Group",
|
|
3025
3025
|
width: 200
|
|
3026
3026
|
});
|
|
3027
|
-
for (const
|
|
3027
|
+
for (const o of this.pivotResult.columnKeys)
|
|
3028
3028
|
for (const i of this.config.valueFields ?? []) {
|
|
3029
|
-
const
|
|
3029
|
+
const s = te([o], i.field), l = i.header || this.fieldHeaderMap.get(i.field) || i.field;
|
|
3030
3030
|
t.push({
|
|
3031
|
-
field:
|
|
3032
|
-
header: `${
|
|
3031
|
+
field: s,
|
|
3032
|
+
header: `${o} - ${l} (${i.aggFunc})`,
|
|
3033
3033
|
width: 120,
|
|
3034
3034
|
type: "number"
|
|
3035
3035
|
});
|
|
@@ -3042,13 +3042,13 @@ class F extends C {
|
|
|
3042
3042
|
}), t;
|
|
3043
3043
|
}
|
|
3044
3044
|
renderRow(e, t) {
|
|
3045
|
-
const
|
|
3046
|
-
return
|
|
3045
|
+
const n = e;
|
|
3046
|
+
return n.__pivotRowKey && n.__pivotHasChildren ? Ot(n, t, {
|
|
3047
3047
|
columns: this.gridColumns,
|
|
3048
|
-
onToggle: (
|
|
3049
|
-
resolveIcon: (
|
|
3050
|
-
setIcon: (
|
|
3051
|
-
}) :
|
|
3048
|
+
onToggle: (o) => this.toggle(o),
|
|
3049
|
+
resolveIcon: (o) => this.resolveIcon(o),
|
|
3050
|
+
setIcon: (o, i) => this.setIcon(o, i)
|
|
3051
|
+
}) : n.__pivotRowKey !== void 0 && this.isActive ? zt(n, t, this.gridColumns) : (this.cleanupPivotStyling(t), !1);
|
|
3052
3052
|
}
|
|
3053
3053
|
/**
|
|
3054
3054
|
* Remove pivot-specific classes, attributes, and inline styles from a row element.
|
|
@@ -3071,14 +3071,14 @@ class F extends C {
|
|
|
3071
3071
|
const t = e.querySelector(".tbw-scroll-area") ?? e.querySelector(".tbw-grid-content") ?? e.children[0];
|
|
3072
3072
|
if (!t) return;
|
|
3073
3073
|
this.grandTotalFooter || (this.grandTotalFooter = document.createElement("div"), this.grandTotalFooter.className = "pivot-grand-total-footer", t.appendChild(this.grandTotalFooter));
|
|
3074
|
-
const
|
|
3074
|
+
const n = {
|
|
3075
3075
|
__pivotRowKey: "__grandTotal",
|
|
3076
3076
|
__pivotLabel: "Grand Total",
|
|
3077
3077
|
__pivotIsGrandTotal: !0,
|
|
3078
3078
|
__pivotTotal: this.pivotResult.grandTotal,
|
|
3079
3079
|
...this.pivotResult.totals
|
|
3080
3080
|
};
|
|
3081
|
-
|
|
3081
|
+
Vt(n, this.grandTotalFooter, this.gridColumns);
|
|
3082
3082
|
}
|
|
3083
3083
|
/**
|
|
3084
3084
|
* Remove the grand total footer element.
|
|
@@ -3098,7 +3098,7 @@ class F extends C {
|
|
|
3098
3098
|
}
|
|
3099
3099
|
expandAll() {
|
|
3100
3100
|
if (this.pivotResult) {
|
|
3101
|
-
const e =
|
|
3101
|
+
const e = $(this.pivotResult.rows);
|
|
3102
3102
|
for (const t of e)
|
|
3103
3103
|
this.expandedKeys.add(t);
|
|
3104
3104
|
this.requestRender();
|
|
@@ -3137,16 +3137,16 @@ class F extends C {
|
|
|
3137
3137
|
}
|
|
3138
3138
|
// ===== Tool Panel API =====
|
|
3139
3139
|
showPanel() {
|
|
3140
|
-
this.grid.openToolPanel(
|
|
3140
|
+
this.grid.openToolPanel(L.PANEL_ID);
|
|
3141
3141
|
}
|
|
3142
3142
|
hidePanel() {
|
|
3143
3143
|
this.grid.closeToolPanel();
|
|
3144
3144
|
}
|
|
3145
3145
|
togglePanel() {
|
|
3146
|
-
this.grid.toggleToolPanel(
|
|
3146
|
+
this.grid.toggleToolPanel(L.PANEL_ID);
|
|
3147
3147
|
}
|
|
3148
3148
|
isPanelVisible() {
|
|
3149
|
-
return this.grid.activeToolPanel ===
|
|
3149
|
+
return this.grid.activeToolPanel === L.PANEL_ID;
|
|
3150
3150
|
}
|
|
3151
3151
|
// ===== Private Helpers =====
|
|
3152
3152
|
get gridColumns() {
|
|
@@ -3165,9 +3165,9 @@ class F extends C {
|
|
|
3165
3165
|
const e = this.grid;
|
|
3166
3166
|
try {
|
|
3167
3167
|
const t = e.getAllColumns?.() ?? e.columns ?? [];
|
|
3168
|
-
return this.originalColumns = t.filter((
|
|
3169
|
-
field:
|
|
3170
|
-
header:
|
|
3168
|
+
return this.originalColumns = t.filter((n) => !n.field.startsWith("__pivot")).map((n) => ({
|
|
3169
|
+
field: n.field,
|
|
3170
|
+
header: n.header ?? n.field
|
|
3171
3171
|
})), this.originalColumns;
|
|
3172
3172
|
} catch {
|
|
3173
3173
|
return [];
|
|
@@ -3176,68 +3176,68 @@ class F extends C {
|
|
|
3176
3176
|
renderPanel(e) {
|
|
3177
3177
|
this.panelContainer = e, this.originalColumns.length === 0 && this.captureOriginalColumns();
|
|
3178
3178
|
const t = {
|
|
3179
|
-
onTogglePivot: (
|
|
3180
|
-
|
|
3179
|
+
onTogglePivot: (n) => {
|
|
3180
|
+
n ? this.enablePivot() : this.disablePivot(), this.refreshPanel();
|
|
3181
3181
|
},
|
|
3182
|
-
onAddFieldToZone: (
|
|
3183
|
-
onRemoveFieldFromZone: (
|
|
3184
|
-
onAddValueField: (
|
|
3185
|
-
onRemoveValueField: (
|
|
3186
|
-
onUpdateValueAggFunc: (
|
|
3187
|
-
onOptionChange: (
|
|
3188
|
-
this.config[
|
|
3182
|
+
onAddFieldToZone: (n, o) => this.addFieldToZone(n, o),
|
|
3183
|
+
onRemoveFieldFromZone: (n, o) => this.removeFieldFromZone(n, o),
|
|
3184
|
+
onAddValueField: (n, o) => this.addValueField(n, o),
|
|
3185
|
+
onRemoveValueField: (n) => this.removeValueField(n),
|
|
3186
|
+
onUpdateValueAggFunc: (n, o) => this.updateValueAggFunc(n, o),
|
|
3187
|
+
onOptionChange: (n, o) => {
|
|
3188
|
+
this.config[n] = o, this.isActive && this.refresh();
|
|
3189
3189
|
},
|
|
3190
3190
|
getAvailableFields: () => this.getAvailableFields()
|
|
3191
3191
|
};
|
|
3192
|
-
return
|
|
3192
|
+
return qt(e, this.config, this.isActive, t);
|
|
3193
3193
|
}
|
|
3194
3194
|
refreshPanel() {
|
|
3195
3195
|
this.panelContainer && (this.panelContainer.innerHTML = "", this.renderPanel(this.panelContainer));
|
|
3196
3196
|
}
|
|
3197
3197
|
addFieldToZone(e, t) {
|
|
3198
3198
|
if (t === "rowGroups") {
|
|
3199
|
-
const
|
|
3200
|
-
|
|
3199
|
+
const n = this.config.rowGroupFields ?? [];
|
|
3200
|
+
n.includes(e) || (this.config.rowGroupFields = [...n, e]);
|
|
3201
3201
|
} else {
|
|
3202
|
-
const
|
|
3203
|
-
|
|
3202
|
+
const n = this.config.columnGroupFields ?? [];
|
|
3203
|
+
n.includes(e) || (this.config.columnGroupFields = [...n, e]);
|
|
3204
3204
|
}
|
|
3205
3205
|
this.removeFromOtherZones(e, t), this.isActive && this.refresh(), this.refreshPanel();
|
|
3206
3206
|
}
|
|
3207
3207
|
removeFieldFromZone(e, t) {
|
|
3208
|
-
t === "rowGroups" ? this.config.rowGroupFields = (this.config.rowGroupFields ?? []).filter((
|
|
3208
|
+
t === "rowGroups" ? this.config.rowGroupFields = (this.config.rowGroupFields ?? []).filter((n) => n !== e) : this.config.columnGroupFields = (this.config.columnGroupFields ?? []).filter((n) => n !== e), this.isActive && this.refresh(), this.refreshPanel();
|
|
3209
3209
|
}
|
|
3210
3210
|
removeFromOtherZones(e, t) {
|
|
3211
|
-
t !== "rowGroups" && (this.config.rowGroupFields = (this.config.rowGroupFields ?? []).filter((
|
|
3211
|
+
t !== "rowGroups" && (this.config.rowGroupFields = (this.config.rowGroupFields ?? []).filter((n) => n !== e)), t !== "columnGroups" && (this.config.columnGroupFields = (this.config.columnGroupFields ?? []).filter((n) => n !== e)), t !== "values" && (this.config.valueFields = (this.config.valueFields ?? []).filter((n) => n.field !== e));
|
|
3212
3212
|
}
|
|
3213
3213
|
addValueField(e, t) {
|
|
3214
|
-
const
|
|
3215
|
-
|
|
3214
|
+
const n = this.config.valueFields ?? [];
|
|
3215
|
+
n.some((o) => o.field === e) || (this.config.valueFields = [...n, { field: e, aggFunc: t }]), this.removeFromOtherZones(e, "values"), this.isActive && this.refresh(), this.refreshPanel();
|
|
3216
3216
|
}
|
|
3217
3217
|
removeValueField(e) {
|
|
3218
3218
|
this.config.valueFields = (this.config.valueFields ?? []).filter((t) => t.field !== e), this.isActive && this.refresh(), this.refreshPanel();
|
|
3219
3219
|
}
|
|
3220
3220
|
updateValueAggFunc(e, t) {
|
|
3221
|
-
const
|
|
3222
|
-
|
|
3221
|
+
const n = this.config.valueFields ?? [], o = n.findIndex((i) => i.field === e);
|
|
3222
|
+
o >= 0 && (n[o] = { ...n[o], aggFunc: t }, this.config.valueFields = [...n]), this.isActive && this.refresh();
|
|
3223
3223
|
}
|
|
3224
3224
|
// ===== Styles =====
|
|
3225
|
-
styles =
|
|
3225
|
+
styles = Wt;
|
|
3226
3226
|
}
|
|
3227
|
-
function
|
|
3228
|
-
const e =
|
|
3227
|
+
function $t(r) {
|
|
3228
|
+
const e = r.sticky;
|
|
3229
3229
|
if (e === "left" || e === "right")
|
|
3230
3230
|
return !1;
|
|
3231
|
-
const t =
|
|
3232
|
-
return
|
|
3231
|
+
const t = r.meta ?? {}, n = t.sticky;
|
|
3232
|
+
return n === "left" || n === "right" ? !1 : t.lockPosition !== !0 && t.suppressMovable !== !0;
|
|
3233
3233
|
}
|
|
3234
|
-
function
|
|
3235
|
-
if (e === t || e < 0 || e >=
|
|
3236
|
-
const
|
|
3237
|
-
return
|
|
3234
|
+
function Ae(r, e, t) {
|
|
3235
|
+
if (e === t || e < 0 || e >= r.length || t < 0 || t > r.length) return r;
|
|
3236
|
+
const n = [...r], [o] = n.splice(e, 1);
|
|
3237
|
+
return n.splice(t, 0, o), n;
|
|
3238
3238
|
}
|
|
3239
|
-
const
|
|
3240
|
-
class
|
|
3239
|
+
const jt = '.header-row>.cell[draggable=true]{cursor:grab;position:relative}.header-row>.cell.dragging{opacity:.5;cursor:grabbing}.header-row>.cell.drop-before:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}.header-row>.cell.drop-after:after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent));z-index:1}';
|
|
3240
|
+
class kn extends x {
|
|
3241
3241
|
name = "reorder";
|
|
3242
3242
|
version = "1.0.0";
|
|
3243
3243
|
get defaultConfig() {
|
|
@@ -3256,8 +3256,8 @@ class ro extends C {
|
|
|
3256
3256
|
super.attach(e), e.addEventListener(
|
|
3257
3257
|
"column-reorder-request",
|
|
3258
3258
|
(t) => {
|
|
3259
|
-
const
|
|
3260
|
-
|
|
3259
|
+
const n = t.detail;
|
|
3260
|
+
n?.field && typeof n.toIndex == "number" && this.moveColumn(n.field, n.toIndex);
|
|
3261
3261
|
},
|
|
3262
3262
|
{ signal: this.disconnectSignal }
|
|
3263
3263
|
);
|
|
@@ -3270,39 +3270,39 @@ class ro extends C {
|
|
|
3270
3270
|
afterRender() {
|
|
3271
3271
|
const e = this.shadowRoot;
|
|
3272
3272
|
if (!e) return;
|
|
3273
|
-
e.querySelectorAll(".header-row > .cell").forEach((
|
|
3274
|
-
const
|
|
3273
|
+
e.querySelectorAll(".header-row > .cell").forEach((n) => {
|
|
3274
|
+
const o = n, i = o.getAttribute("data-field");
|
|
3275
3275
|
if (!i) return;
|
|
3276
|
-
const
|
|
3277
|
-
if (!
|
|
3278
|
-
|
|
3276
|
+
const s = this.columns.find((l) => l.field === i);
|
|
3277
|
+
if (!s || !$t(s)) {
|
|
3278
|
+
o.draggable = !1;
|
|
3279
3279
|
return;
|
|
3280
3280
|
}
|
|
3281
|
-
|
|
3281
|
+
o.draggable = !0, !o.getAttribute("data-dragstart-bound") && (o.setAttribute("data-dragstart-bound", "true"), o.addEventListener("dragstart", (l) => {
|
|
3282
3282
|
const d = this.getColumnOrder().indexOf(i);
|
|
3283
|
-
this.isDragging = !0, this.draggedField = i, this.draggedIndex = d, l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", i)),
|
|
3284
|
-
}),
|
|
3283
|
+
this.isDragging = !0, this.draggedField = i, this.draggedIndex = d, l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", i)), o.classList.add("dragging");
|
|
3284
|
+
}), o.addEventListener("dragend", () => {
|
|
3285
3285
|
this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, e.querySelectorAll(".header-row > .cell").forEach((l) => {
|
|
3286
3286
|
l.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
|
|
3287
3287
|
});
|
|
3288
|
-
}),
|
|
3288
|
+
}), o.addEventListener("dragover", (l) => {
|
|
3289
3289
|
if (l.preventDefault(), !this.isDragging || this.draggedField === i) return;
|
|
3290
|
-
const a =
|
|
3291
|
-
this.dropIndex = l.clientX < d ? u : u + 1,
|
|
3292
|
-
}),
|
|
3293
|
-
|
|
3294
|
-
}),
|
|
3290
|
+
const a = o.getBoundingClientRect(), d = a.left + a.width / 2, u = this.getColumnOrder().indexOf(i);
|
|
3291
|
+
this.dropIndex = l.clientX < d ? u : u + 1, o.classList.add("drop-target"), o.classList.toggle("drop-before", l.clientX < d), o.classList.toggle("drop-after", l.clientX >= d);
|
|
3292
|
+
}), o.addEventListener("dragleave", () => {
|
|
3293
|
+
o.classList.remove("drop-target", "drop-before", "drop-after");
|
|
3294
|
+
}), o.addEventListener("drop", (l) => {
|
|
3295
3295
|
l.preventDefault();
|
|
3296
3296
|
const a = this.draggedField, d = this.draggedIndex, c = this.dropIndex;
|
|
3297
3297
|
if (!this.isDragging || a === null || d === null || c === null)
|
|
3298
3298
|
return;
|
|
3299
|
-
const u = c > d ? c - 1 : c, h = this.getColumnOrder(),
|
|
3299
|
+
const u = c > d ? c - 1 : c, h = this.getColumnOrder(), g = Ae(h, d, u), p = {
|
|
3300
3300
|
field: a,
|
|
3301
3301
|
fromIndex: d,
|
|
3302
3302
|
toIndex: u,
|
|
3303
|
-
columnOrder:
|
|
3303
|
+
columnOrder: g
|
|
3304
3304
|
};
|
|
3305
|
-
this.grid.setColumnOrder(
|
|
3305
|
+
this.grid.setColumnOrder(g), this.emit("column-move", p), this.grid.requestStateChange?.();
|
|
3306
3306
|
}));
|
|
3307
3307
|
});
|
|
3308
3308
|
}
|
|
@@ -3320,12 +3320,12 @@ class ro extends C {
|
|
|
3320
3320
|
* @param toIndex - The target index
|
|
3321
3321
|
*/
|
|
3322
3322
|
moveColumn(e, t) {
|
|
3323
|
-
const
|
|
3324
|
-
if (
|
|
3325
|
-
const i =
|
|
3323
|
+
const n = this.getColumnOrder(), o = n.indexOf(e);
|
|
3324
|
+
if (o === -1) return;
|
|
3325
|
+
const i = Ae(n, o, t);
|
|
3326
3326
|
this.grid.setColumnOrder(i), this.emit("column-move", {
|
|
3327
3327
|
field: e,
|
|
3328
|
-
fromIndex:
|
|
3328
|
+
fromIndex: o,
|
|
3329
3329
|
toIndex: t,
|
|
3330
3330
|
columnOrder: i
|
|
3331
3331
|
}), this.grid.requestStateChange?.();
|
|
@@ -3345,40 +3345,332 @@ class ro extends C {
|
|
|
3345
3345
|
this.grid.setColumnOrder(e), this.grid.requestStateChange?.();
|
|
3346
3346
|
}
|
|
3347
3347
|
// ===== Styles =====
|
|
3348
|
-
styles =
|
|
3348
|
+
styles = jt;
|
|
3349
|
+
}
|
|
3350
|
+
function D(r) {
|
|
3351
|
+
return {
|
|
3352
|
+
startRow: Math.min(r.startRow, r.endRow),
|
|
3353
|
+
startCol: Math.min(r.startCol, r.endCol),
|
|
3354
|
+
endRow: Math.max(r.startRow, r.endRow),
|
|
3355
|
+
endCol: Math.max(r.startCol, r.endCol)
|
|
3356
|
+
};
|
|
3357
|
+
}
|
|
3358
|
+
function Ut(r) {
|
|
3359
|
+
const e = D(r);
|
|
3360
|
+
return {
|
|
3361
|
+
from: { row: e.startRow, col: e.startCol },
|
|
3362
|
+
to: { row: e.endRow, col: e.endCol }
|
|
3363
|
+
};
|
|
3364
|
+
}
|
|
3365
|
+
function X(r) {
|
|
3366
|
+
return r.map(Ut);
|
|
3367
|
+
}
|
|
3368
|
+
function Yt(r, e, t) {
|
|
3369
|
+
const n = D(t);
|
|
3370
|
+
return r >= n.startRow && r <= n.endRow && e >= n.startCol && e <= n.endCol;
|
|
3371
|
+
}
|
|
3372
|
+
function _e(r, e, t) {
|
|
3373
|
+
return t.some((n) => Yt(r, e, n));
|
|
3374
|
+
}
|
|
3375
|
+
function Zt(r) {
|
|
3376
|
+
const e = [], t = D(r);
|
|
3377
|
+
for (let n = t.startRow; n <= t.endRow; n++)
|
|
3378
|
+
for (let o = t.startCol; o <= t.endCol; o++)
|
|
3379
|
+
e.push({ row: n, col: o });
|
|
3380
|
+
return e;
|
|
3381
|
+
}
|
|
3382
|
+
function Xt(r) {
|
|
3383
|
+
const e = /* @__PURE__ */ new Map();
|
|
3384
|
+
for (const t of r)
|
|
3385
|
+
for (const n of Zt(t))
|
|
3386
|
+
e.set(`${n.row},${n.col}`, n);
|
|
3387
|
+
return [...e.values()];
|
|
3388
|
+
}
|
|
3389
|
+
function U(r, e) {
|
|
3390
|
+
return {
|
|
3391
|
+
startRow: r.row,
|
|
3392
|
+
startCol: r.col,
|
|
3393
|
+
endRow: e.row,
|
|
3394
|
+
endCol: e.col
|
|
3395
|
+
};
|
|
3396
|
+
}
|
|
3397
|
+
const Jt = ':host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}:host([data-selection-mode="row"]) .cell-focus{outline:none}:host .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}:host .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}';
|
|
3398
|
+
function Qt(r, e, t) {
|
|
3399
|
+
if (r === "cell" && e.selectedCell)
|
|
3400
|
+
return {
|
|
3401
|
+
mode: r,
|
|
3402
|
+
ranges: [
|
|
3403
|
+
{
|
|
3404
|
+
from: { row: e.selectedCell.row, col: e.selectedCell.col },
|
|
3405
|
+
to: { row: e.selectedCell.row, col: e.selectedCell.col }
|
|
3406
|
+
}
|
|
3407
|
+
]
|
|
3408
|
+
};
|
|
3409
|
+
if (r === "row" && e.selected.size > 0) {
|
|
3410
|
+
const n = [...e.selected].map((o) => ({
|
|
3411
|
+
from: { row: o, col: 0 },
|
|
3412
|
+
to: { row: o, col: t - 1 }
|
|
3413
|
+
}));
|
|
3414
|
+
return { mode: r, ranges: n };
|
|
3415
|
+
}
|
|
3416
|
+
return r === "range" && e.ranges.length > 0 ? { mode: r, ranges: X(e.ranges) } : { mode: r, ranges: [] };
|
|
3417
|
+
}
|
|
3418
|
+
class An extends x {
|
|
3419
|
+
name = "selection";
|
|
3420
|
+
version = "1.0.0";
|
|
3421
|
+
get defaultConfig() {
|
|
3422
|
+
return {
|
|
3423
|
+
mode: "cell"
|
|
3424
|
+
};
|
|
3425
|
+
}
|
|
3426
|
+
// ===== Internal State =====
|
|
3427
|
+
/** Row selection state (row mode) */
|
|
3428
|
+
selected = /* @__PURE__ */ new Set();
|
|
3429
|
+
lastSelected = null;
|
|
3430
|
+
anchor = null;
|
|
3431
|
+
/** Range selection state (range mode) */
|
|
3432
|
+
ranges = [];
|
|
3433
|
+
activeRange = null;
|
|
3434
|
+
cellAnchor = null;
|
|
3435
|
+
isDragging = !1;
|
|
3436
|
+
/** Cell selection state (cell mode) */
|
|
3437
|
+
selectedCell = null;
|
|
3438
|
+
// ===== Lifecycle =====
|
|
3439
|
+
detach() {
|
|
3440
|
+
this.selected.clear(), this.ranges = [], this.activeRange = null, this.cellAnchor = null, this.isDragging = !1, this.selectedCell = null;
|
|
3441
|
+
}
|
|
3442
|
+
// ===== Event Handlers =====
|
|
3443
|
+
onCellClick(e) {
|
|
3444
|
+
const { rowIndex: t, colIndex: n, originalEvent: o } = e, { mode: i } = this.config;
|
|
3445
|
+
if (i === "cell")
|
|
3446
|
+
return this.selectedCell = { row: t, col: n }, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
|
|
3447
|
+
if (i === "row")
|
|
3448
|
+
return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
|
|
3449
|
+
if (i === "range") {
|
|
3450
|
+
const s = o.shiftKey, l = o.ctrlKey || o.metaKey;
|
|
3451
|
+
if (s && this.cellAnchor) {
|
|
3452
|
+
const a = U(this.cellAnchor, { row: t, col: n });
|
|
3453
|
+
l ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = a : this.ranges.push(a) : this.ranges = [a], this.activeRange = a;
|
|
3454
|
+
} else if (l) {
|
|
3455
|
+
const a = {
|
|
3456
|
+
startRow: t,
|
|
3457
|
+
startCol: n,
|
|
3458
|
+
endRow: t,
|
|
3459
|
+
endCol: n
|
|
3460
|
+
};
|
|
3461
|
+
this.ranges.push(a), this.activeRange = a, this.cellAnchor = { row: t, col: n };
|
|
3462
|
+
} else {
|
|
3463
|
+
const a = {
|
|
3464
|
+
startRow: t,
|
|
3465
|
+
startCol: n,
|
|
3466
|
+
endRow: t,
|
|
3467
|
+
endCol: n
|
|
3468
|
+
};
|
|
3469
|
+
this.ranges = [a], this.activeRange = a, this.cellAnchor = { row: t, col: n };
|
|
3470
|
+
}
|
|
3471
|
+
return this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
|
|
3472
|
+
}
|
|
3473
|
+
return !1;
|
|
3474
|
+
}
|
|
3475
|
+
onKeyDown(e) {
|
|
3476
|
+
const { mode: t } = this.config, o = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
|
|
3477
|
+
if (e.key === "Escape")
|
|
3478
|
+
return t === "cell" ? this.selectedCell = null : t === "row" ? (this.selected.clear(), this.anchor = null) : t === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
|
|
3479
|
+
if (t === "cell" && o)
|
|
3480
|
+
return queueMicrotask(() => {
|
|
3481
|
+
this.selectedCell = { row: this.grid.focusRow, col: this.grid.focusCol }, this.emit("selection-change", this.#e()), this.requestAfterRender();
|
|
3482
|
+
}), !1;
|
|
3483
|
+
if (t === "row" && (e.key === "ArrowUp" || e.key === "ArrowDown"))
|
|
3484
|
+
return queueMicrotask(() => {
|
|
3485
|
+
this.selected.clear(), this.selected.add(this.grid.focusRow), this.lastSelected = this.grid.focusRow, this.emit("selection-change", this.#e()), this.requestAfterRender();
|
|
3486
|
+
}), !1;
|
|
3487
|
+
if (t === "range" && o) {
|
|
3488
|
+
const i = e.shiftKey;
|
|
3489
|
+
return queueMicrotask(() => {
|
|
3490
|
+
const s = this.grid.focusRow, l = this.grid.focusCol;
|
|
3491
|
+
if (i) {
|
|
3492
|
+
this.cellAnchor || (this.cellAnchor = { row: s, col: l });
|
|
3493
|
+
const a = U(this.cellAnchor, { row: s, col: l });
|
|
3494
|
+
this.ranges = [a], this.activeRange = a;
|
|
3495
|
+
} else
|
|
3496
|
+
this.ranges = [], this.activeRange = null, this.cellAnchor = { row: s, col: l };
|
|
3497
|
+
this.emit("selection-change", this.#e()), this.requestAfterRender();
|
|
3498
|
+
}), !1;
|
|
3499
|
+
}
|
|
3500
|
+
if (t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
|
|
3501
|
+
const i = this.rows.length, s = this.columns.length;
|
|
3502
|
+
if (i > 0 && s > 0) {
|
|
3503
|
+
const l = {
|
|
3504
|
+
startRow: 0,
|
|
3505
|
+
startCol: 0,
|
|
3506
|
+
endRow: i - 1,
|
|
3507
|
+
endCol: s - 1
|
|
3508
|
+
};
|
|
3509
|
+
return this.ranges = [l], this.activeRange = l, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
|
|
3510
|
+
}
|
|
3511
|
+
}
|
|
3512
|
+
return !1;
|
|
3513
|
+
}
|
|
3514
|
+
onCellMouseDown(e) {
|
|
3515
|
+
if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0 || e.originalEvent.shiftKey && this.cellAnchor)
|
|
3516
|
+
return;
|
|
3517
|
+
this.isDragging = !0;
|
|
3518
|
+
const t = e.rowIndex, n = e.colIndex;
|
|
3519
|
+
this.cellAnchor = { row: t, col: n }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
|
|
3520
|
+
const i = {
|
|
3521
|
+
startRow: t,
|
|
3522
|
+
startCol: n,
|
|
3523
|
+
endRow: t,
|
|
3524
|
+
endCol: n
|
|
3525
|
+
};
|
|
3526
|
+
return this.ranges.push(i), this.activeRange = i, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
|
|
3527
|
+
}
|
|
3528
|
+
onCellMouseMove(e) {
|
|
3529
|
+
if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
|
|
3530
|
+
const t = U(this.cellAnchor, { row: e.rowIndex, col: e.colIndex });
|
|
3531
|
+
return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = t : this.ranges.push(t), this.activeRange = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
|
|
3532
|
+
}
|
|
3533
|
+
onCellMouseUp(e) {
|
|
3534
|
+
if (this.config.mode === "range" && this.isDragging)
|
|
3535
|
+
return this.isDragging = !1, !0;
|
|
3536
|
+
}
|
|
3537
|
+
/**
|
|
3538
|
+
* Apply selection classes to visible cells/rows.
|
|
3539
|
+
* Shared by afterRender and onScrollRender.
|
|
3540
|
+
*/
|
|
3541
|
+
#t() {
|
|
3542
|
+
const e = this.shadowRoot;
|
|
3543
|
+
if (!e) return;
|
|
3544
|
+
const { mode: t } = this.config;
|
|
3545
|
+
e.querySelectorAll(".cell").forEach((i) => {
|
|
3546
|
+
i.classList.remove("selected", "top", "bottom", "first", "last");
|
|
3547
|
+
});
|
|
3548
|
+
const o = e.querySelectorAll(".data-grid-row");
|
|
3549
|
+
if (o.forEach((i) => {
|
|
3550
|
+
i.classList.remove("selected", "row-focus");
|
|
3551
|
+
}), t === "row" && (e.querySelectorAll(".cell-focus").forEach((i) => i.classList.remove("cell-focus")), o.forEach((i) => {
|
|
3552
|
+
const s = i.querySelector(".cell[data-row]"), l = parseInt(s?.getAttribute("data-row") ?? "-1", 10);
|
|
3553
|
+
l >= 0 && this.selected.has(l) && i.classList.add("selected", "row-focus");
|
|
3554
|
+
})), t === "range" && this.ranges.length > 0) {
|
|
3555
|
+
const i = this.activeRange ? D(this.activeRange) : null;
|
|
3556
|
+
e.querySelectorAll(".cell[data-row][data-col]").forEach((l) => {
|
|
3557
|
+
const a = parseInt(l.getAttribute("data-row") ?? "-1", 10), d = parseInt(l.getAttribute("data-col") ?? "-1", 10);
|
|
3558
|
+
a >= 0 && d >= 0 && _e(a, d, this.ranges) && (l.classList.add("selected"), l.classList.remove("cell-focus"), i && (a === i.startRow && l.classList.add("top"), a === i.endRow && l.classList.add("bottom"), d === i.startCol && l.classList.add("first"), d === i.endCol && l.classList.add("last")));
|
|
3559
|
+
});
|
|
3560
|
+
}
|
|
3561
|
+
t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((i) => i.classList.remove("cell-focus"));
|
|
3562
|
+
}
|
|
3563
|
+
afterRender() {
|
|
3564
|
+
const e = this.shadowRoot;
|
|
3565
|
+
if (!e) return;
|
|
3566
|
+
const t = e.children[0], { mode: n } = this.config;
|
|
3567
|
+
this.grid.setAttribute("data-selection-mode", n), t && t.classList.toggle("selecting", this.isDragging), this.#t();
|
|
3568
|
+
}
|
|
3569
|
+
/**
|
|
3570
|
+
* Called after scroll-triggered row rendering.
|
|
3571
|
+
* Reapplies selection classes to recycled DOM elements.
|
|
3572
|
+
*/
|
|
3573
|
+
onScrollRender() {
|
|
3574
|
+
this.#t();
|
|
3575
|
+
}
|
|
3576
|
+
// ===== Public API =====
|
|
3577
|
+
/**
|
|
3578
|
+
* Get the selected cell (cell mode only).
|
|
3579
|
+
*/
|
|
3580
|
+
getSelectedCell() {
|
|
3581
|
+
return this.selectedCell;
|
|
3582
|
+
}
|
|
3583
|
+
/**
|
|
3584
|
+
* Get all selected row indices (row mode).
|
|
3585
|
+
*/
|
|
3586
|
+
getSelectedRows() {
|
|
3587
|
+
return [...this.selected];
|
|
3588
|
+
}
|
|
3589
|
+
/**
|
|
3590
|
+
* Get all selected cell ranges in public format.
|
|
3591
|
+
*/
|
|
3592
|
+
getRanges() {
|
|
3593
|
+
return X(this.ranges);
|
|
3594
|
+
}
|
|
3595
|
+
/**
|
|
3596
|
+
* Get all selected cells across all ranges.
|
|
3597
|
+
*/
|
|
3598
|
+
getSelectedCells() {
|
|
3599
|
+
return Xt(this.ranges);
|
|
3600
|
+
}
|
|
3601
|
+
/**
|
|
3602
|
+
* Check if a specific cell is in range selection.
|
|
3603
|
+
*/
|
|
3604
|
+
isCellSelected(e, t) {
|
|
3605
|
+
return _e(e, t, this.ranges);
|
|
3606
|
+
}
|
|
3607
|
+
/**
|
|
3608
|
+
* Clear all selection.
|
|
3609
|
+
*/
|
|
3610
|
+
clearSelection() {
|
|
3611
|
+
this.selectedCell = null, this.selected.clear(), this.anchor = null, this.ranges = [], this.activeRange = null, this.cellAnchor = null, this.emit("selection-change", { mode: this.config.mode, ranges: [] }), this.requestAfterRender();
|
|
3612
|
+
}
|
|
3613
|
+
/**
|
|
3614
|
+
* Set selected ranges programmatically.
|
|
3615
|
+
*/
|
|
3616
|
+
setRanges(e) {
|
|
3617
|
+
this.ranges = e.map((t) => ({
|
|
3618
|
+
startRow: t.from.row,
|
|
3619
|
+
startCol: t.from.col,
|
|
3620
|
+
endRow: t.to.row,
|
|
3621
|
+
endCol: t.to.col
|
|
3622
|
+
})), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
|
|
3623
|
+
mode: this.config.mode,
|
|
3624
|
+
ranges: X(this.ranges)
|
|
3625
|
+
}), this.requestAfterRender();
|
|
3626
|
+
}
|
|
3627
|
+
// ===== Private Helpers =====
|
|
3628
|
+
#e() {
|
|
3629
|
+
return Qt(
|
|
3630
|
+
this.config.mode,
|
|
3631
|
+
{
|
|
3632
|
+
selectedCell: this.selectedCell,
|
|
3633
|
+
selected: this.selected,
|
|
3634
|
+
ranges: this.ranges
|
|
3635
|
+
},
|
|
3636
|
+
this.columns.length
|
|
3637
|
+
);
|
|
3638
|
+
}
|
|
3639
|
+
// ===== Styles =====
|
|
3640
|
+
styles = Jt;
|
|
3349
3641
|
}
|
|
3350
|
-
function
|
|
3351
|
-
return Math.floor(
|
|
3642
|
+
function q(r, e) {
|
|
3643
|
+
return Math.floor(r / e);
|
|
3352
3644
|
}
|
|
3353
|
-
function
|
|
3645
|
+
function en(r, e) {
|
|
3354
3646
|
return {
|
|
3355
|
-
start:
|
|
3356
|
-
end: (
|
|
3647
|
+
start: r * e,
|
|
3648
|
+
end: (r + 1) * e
|
|
3357
3649
|
};
|
|
3358
3650
|
}
|
|
3359
|
-
function
|
|
3360
|
-
const
|
|
3361
|
-
for (let
|
|
3362
|
-
i.push(
|
|
3651
|
+
function tn(r, e, t) {
|
|
3652
|
+
const n = q(r, t), o = q(e - 1, t), i = [];
|
|
3653
|
+
for (let s = n; s <= o; s++)
|
|
3654
|
+
i.push(s);
|
|
3363
3655
|
return i;
|
|
3364
3656
|
}
|
|
3365
|
-
async function
|
|
3366
|
-
const
|
|
3367
|
-
return
|
|
3368
|
-
startRow:
|
|
3369
|
-
endRow:
|
|
3370
|
-
sortModel:
|
|
3371
|
-
filterModel:
|
|
3657
|
+
async function Ie(r, e, t, n) {
|
|
3658
|
+
const o = en(e, t);
|
|
3659
|
+
return r.getRows({
|
|
3660
|
+
startRow: o.start,
|
|
3661
|
+
endRow: o.end,
|
|
3662
|
+
sortModel: n.sortModel,
|
|
3663
|
+
filterModel: n.filterModel
|
|
3372
3664
|
});
|
|
3373
3665
|
}
|
|
3374
|
-
function
|
|
3375
|
-
const
|
|
3376
|
-
if (!
|
|
3377
|
-
const i =
|
|
3378
|
-
return
|
|
3666
|
+
function nn(r, e, t) {
|
|
3667
|
+
const n = q(r, e), o = t.get(n);
|
|
3668
|
+
if (!o) return;
|
|
3669
|
+
const i = r % e;
|
|
3670
|
+
return o[i];
|
|
3379
3671
|
}
|
|
3380
|
-
const
|
|
3381
|
-
class
|
|
3672
|
+
const on = 100;
|
|
3673
|
+
class _n extends x {
|
|
3382
3674
|
name = "serverSide";
|
|
3383
3675
|
version = "1.0.0";
|
|
3384
3676
|
get defaultConfig() {
|
|
@@ -3405,13 +3697,13 @@ class so extends C {
|
|
|
3405
3697
|
*/
|
|
3406
3698
|
loadRequiredBlocks() {
|
|
3407
3699
|
if (!this.dataSource) return;
|
|
3408
|
-
const e = this.grid, t = this.config.cacheBlockSize ?? 100,
|
|
3409
|
-
for (const i of
|
|
3700
|
+
const e = this.grid, t = this.config.cacheBlockSize ?? 100, n = { startRow: e.virtualization.start, endRow: e.virtualization.end }, o = tn(n.startRow, n.endRow, t);
|
|
3701
|
+
for (const i of o)
|
|
3410
3702
|
if (!(this.loadedBlocks.has(i) || this.loadingBlocks.has(i))) {
|
|
3411
3703
|
if (this.loadingBlocks.size >= (this.config.maxConcurrentRequests ?? 2))
|
|
3412
3704
|
break;
|
|
3413
|
-
this.loadingBlocks.add(i),
|
|
3414
|
-
this.loadedBlocks.set(i,
|
|
3705
|
+
this.loadingBlocks.add(i), Ie(this.dataSource, i, t, {}).then((s) => {
|
|
3706
|
+
this.loadedBlocks.set(i, s.rows), this.totalRowCount = s.totalRowCount, this.loadingBlocks.delete(i), this.requestRender(), this.loadRequiredBlocks();
|
|
3415
3707
|
}).catch(() => {
|
|
3416
3708
|
this.loadingBlocks.delete(i);
|
|
3417
3709
|
});
|
|
@@ -3421,16 +3713,16 @@ class so extends C {
|
|
|
3421
3713
|
processRows(e) {
|
|
3422
3714
|
if (!this.dataSource) return [...e];
|
|
3423
3715
|
const t = [];
|
|
3424
|
-
for (let
|
|
3425
|
-
const
|
|
3426
|
-
t.push(
|
|
3716
|
+
for (let n = 0; n < this.totalRowCount; n++) {
|
|
3717
|
+
const o = nn(n, this.config.cacheBlockSize ?? 100, this.loadedBlocks);
|
|
3718
|
+
t.push(o ?? { __loading: !0, __index: n });
|
|
3427
3719
|
}
|
|
3428
3720
|
return t;
|
|
3429
3721
|
}
|
|
3430
3722
|
onScroll(e) {
|
|
3431
3723
|
this.dataSource && (this.loadRequiredBlocks(), this.scrollDebounceTimer && clearTimeout(this.scrollDebounceTimer), this.scrollDebounceTimer = setTimeout(() => {
|
|
3432
3724
|
this.loadRequiredBlocks();
|
|
3433
|
-
},
|
|
3725
|
+
}, on));
|
|
3434
3726
|
}
|
|
3435
3727
|
// ===== Public API =====
|
|
3436
3728
|
/**
|
|
@@ -3440,8 +3732,8 @@ class so extends C {
|
|
|
3440
3732
|
setDataSource(e) {
|
|
3441
3733
|
this.dataSource = e, this.loadedBlocks.clear(), this.loadingBlocks.clear();
|
|
3442
3734
|
const t = this.config.cacheBlockSize ?? 100;
|
|
3443
|
-
|
|
3444
|
-
this.loadedBlocks.set(0,
|
|
3735
|
+
Ie(e, 0, t, {}).then((n) => {
|
|
3736
|
+
this.loadedBlocks.set(0, n.rows), this.totalRowCount = n.totalRowCount, this.requestRender();
|
|
3445
3737
|
});
|
|
3446
3738
|
}
|
|
3447
3739
|
/**
|
|
@@ -3467,8 +3759,8 @@ class so extends C {
|
|
|
3467
3759
|
* @param rowIndex - Row index to check
|
|
3468
3760
|
*/
|
|
3469
3761
|
isRowLoaded(e) {
|
|
3470
|
-
const t = this.config.cacheBlockSize ?? 100,
|
|
3471
|
-
return this.loadedBlocks.has(
|
|
3762
|
+
const t = this.config.cacheBlockSize ?? 100, n = q(e, t);
|
|
3763
|
+
return this.loadedBlocks.has(n);
|
|
3472
3764
|
}
|
|
3473
3765
|
/**
|
|
3474
3766
|
* Get the number of loaded cache blocks.
|
|
@@ -3477,60 +3769,299 @@ class so extends C {
|
|
|
3477
3769
|
return this.loadedBlocks.size;
|
|
3478
3770
|
}
|
|
3479
3771
|
}
|
|
3480
|
-
function
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3772
|
+
function ne(r, e, t) {
|
|
3773
|
+
return r.id !== void 0 ? String(r.id) : t ? `${t}-${e}` : String(e);
|
|
3774
|
+
}
|
|
3775
|
+
function qe(r, e, t, n = null, o = 0) {
|
|
3776
|
+
const i = e.childrenField ?? "children", s = [];
|
|
3777
|
+
for (let l = 0; l < r.length; l++) {
|
|
3778
|
+
const a = r[l], d = ne(a, l, n), c = a[i], u = Array.isArray(c) && c.length > 0, h = t.has(d);
|
|
3779
|
+
if (s.push({
|
|
3780
|
+
key: d,
|
|
3781
|
+
data: a,
|
|
3782
|
+
depth: o,
|
|
3783
|
+
hasChildren: u,
|
|
3784
|
+
isExpanded: h,
|
|
3785
|
+
parentKey: n
|
|
3786
|
+
}), u && h) {
|
|
3787
|
+
const g = qe(c, e, t, d, o + 1);
|
|
3788
|
+
s.push(...g);
|
|
3789
|
+
}
|
|
3790
|
+
}
|
|
3791
|
+
return s;
|
|
3792
|
+
}
|
|
3793
|
+
function Fe(r, e) {
|
|
3794
|
+
const t = new Set(r);
|
|
3795
|
+
return t.has(e) ? t.delete(e) : t.add(e), t;
|
|
3796
|
+
}
|
|
3797
|
+
function J(r, e, t = null, n = 0) {
|
|
3798
|
+
const o = e.childrenField ?? "children", i = /* @__PURE__ */ new Set();
|
|
3799
|
+
for (let s = 0; s < r.length; s++) {
|
|
3800
|
+
const l = r[s], a = ne(l, s, t), d = l[o];
|
|
3801
|
+
if (Array.isArray(d) && d.length > 0) {
|
|
3802
|
+
i.add(a);
|
|
3803
|
+
const c = J(d, e, a, n + 1);
|
|
3804
|
+
for (const u of c) i.add(u);
|
|
3805
|
+
}
|
|
3806
|
+
}
|
|
3807
|
+
return i;
|
|
3808
|
+
}
|
|
3809
|
+
function rn() {
|
|
3810
|
+
return /* @__PURE__ */ new Set();
|
|
3811
|
+
}
|
|
3812
|
+
function De(r, e, t, n = null, o = 0) {
|
|
3813
|
+
const i = t.childrenField ?? "children";
|
|
3814
|
+
for (let s = 0; s < r.length; s++) {
|
|
3815
|
+
const l = r[s], a = ne(l, s, n);
|
|
3816
|
+
if (a === e)
|
|
3817
|
+
return [a];
|
|
3818
|
+
const d = l[i];
|
|
3819
|
+
if (Array.isArray(d) && d.length > 0) {
|
|
3820
|
+
const c = De(d, e, t, a, o + 1);
|
|
3821
|
+
if (c)
|
|
3822
|
+
return [a, ...c];
|
|
3823
|
+
}
|
|
3824
|
+
}
|
|
3825
|
+
return null;
|
|
3826
|
+
}
|
|
3827
|
+
function sn(r, e, t, n) {
|
|
3828
|
+
const o = De(r, e, t);
|
|
3829
|
+
if (!o) return n;
|
|
3830
|
+
const i = new Set(n);
|
|
3831
|
+
for (let s = 0; s < o.length - 1; s++)
|
|
3832
|
+
i.add(o[s]);
|
|
3833
|
+
return i;
|
|
3834
|
+
}
|
|
3835
|
+
function Le(r, e = "children") {
|
|
3836
|
+
if (!Array.isArray(r) || r.length === 0) return !1;
|
|
3837
|
+
for (const t of r)
|
|
3838
|
+
if (t && Array.isArray(t[e]) && t[e].length > 0)
|
|
3839
|
+
return !0;
|
|
3840
|
+
return !1;
|
|
3841
|
+
}
|
|
3842
|
+
function ln(r) {
|
|
3843
|
+
if (!Array.isArray(r) || r.length === 0) return null;
|
|
3844
|
+
const e = ["children", "items", "nodes", "subRows", "nested"];
|
|
3845
|
+
for (const t of r)
|
|
3846
|
+
if (!(!t || typeof t != "object")) {
|
|
3847
|
+
for (const n of e)
|
|
3848
|
+
if (Array.isArray(t[n]) && t[n].length > 0)
|
|
3849
|
+
return n;
|
|
3850
|
+
}
|
|
3851
|
+
return null;
|
|
3852
|
+
}
|
|
3853
|
+
const an = ".tree-toggle{cursor:pointer;user-select:none;transition:transform .2s}.tree-toggle:hover{color:var(--tbw-tree-accent, var(--tbw-color-accent))}";
|
|
3854
|
+
class In extends x {
|
|
3855
|
+
name = "tree";
|
|
3856
|
+
version = "1.0.0";
|
|
3857
|
+
get defaultConfig() {
|
|
3858
|
+
return {
|
|
3859
|
+
childrenField: "children",
|
|
3860
|
+
autoDetect: !0,
|
|
3861
|
+
defaultExpanded: !1,
|
|
3862
|
+
indentWidth: 20,
|
|
3863
|
+
showExpandIcons: !0
|
|
3864
|
+
};
|
|
3865
|
+
}
|
|
3866
|
+
// ===== Internal State =====
|
|
3867
|
+
/** Set of expanded row keys */
|
|
3868
|
+
expandedKeys = /* @__PURE__ */ new Set();
|
|
3869
|
+
/** Whether initial expansion (based on defaultExpanded config) has been applied */
|
|
3870
|
+
initialExpansionDone = !1;
|
|
3871
|
+
/** Flattened tree rows for rendering */
|
|
3872
|
+
flattenedRows = [];
|
|
3873
|
+
/** Map from key to flattened row for quick lookup */
|
|
3874
|
+
rowKeyMap = /* @__PURE__ */ new Map();
|
|
3875
|
+
// ===== Lifecycle =====
|
|
3876
|
+
detach() {
|
|
3877
|
+
this.expandedKeys.clear(), this.initialExpansionDone = !1, this.flattenedRows = [], this.rowKeyMap.clear();
|
|
3878
|
+
}
|
|
3879
|
+
// ===== Auto-Detection =====
|
|
3880
|
+
/**
|
|
3881
|
+
* Detects if tree functionality should be enabled based on data structure.
|
|
3882
|
+
* Called by the grid during plugin initialization.
|
|
3883
|
+
*/
|
|
3884
|
+
detect(e) {
|
|
3885
|
+
if (!this.config.autoDetect) return !1;
|
|
3886
|
+
const t = this.config.childrenField ?? ln(e) ?? "children";
|
|
3887
|
+
return Le(e, t);
|
|
3888
|
+
}
|
|
3889
|
+
// ===== Data Processing =====
|
|
3890
|
+
processRows(e) {
|
|
3891
|
+
const t = this.config.childrenField ?? "children";
|
|
3892
|
+
if (!Le(e, t))
|
|
3893
|
+
return this.flattenedRows = [], this.rowKeyMap.clear(), [...e];
|
|
3894
|
+
this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = J(e, this.config), this.initialExpansionDone = !0), this.flattenedRows = qe(e, this.config, this.expandedKeys), this.rowKeyMap.clear();
|
|
3895
|
+
for (const n of this.flattenedRows)
|
|
3896
|
+
this.rowKeyMap.set(n.key, n);
|
|
3897
|
+
return this.flattenedRows.map((n) => ({
|
|
3898
|
+
...n.data,
|
|
3899
|
+
__treeKey: n.key,
|
|
3900
|
+
__treeDepth: n.depth,
|
|
3901
|
+
__treeHasChildren: n.hasChildren,
|
|
3902
|
+
__treeExpanded: n.isExpanded
|
|
3903
|
+
}));
|
|
3904
|
+
}
|
|
3905
|
+
processColumns(e) {
|
|
3906
|
+
if (this.flattenedRows.length === 0) return [...e];
|
|
3907
|
+
const t = this.config.indentWidth ?? 20, n = this.config.showExpandIcons ?? !0, o = [...e];
|
|
3908
|
+
if (o.length > 0) {
|
|
3909
|
+
const i = { ...o[0] }, s = i.viewRenderer;
|
|
3910
|
+
if (s?.__treeWrapped)
|
|
3911
|
+
return o;
|
|
3912
|
+
const l = (a) => {
|
|
3913
|
+
const { value: d, row: c, column: u } = a, h = c.__treeDepth ?? 0, g = c.__treeHasChildren ?? !1, p = c.__treeExpanded ?? !1, f = document.createElement("span");
|
|
3914
|
+
if (f.style.display = "flex", f.style.alignItems = "center", f.style.paddingLeft = `${h * t}px`, g && n) {
|
|
3915
|
+
const w = document.createElement("span");
|
|
3916
|
+
w.className = "tree-toggle", this.setIcon(w, this.resolveIcon(p ? "collapse" : "expand")), w.style.cursor = "pointer", w.style.marginRight = "4px", w.style.fontSize = "10px", w.setAttribute("data-tree-key", c.__treeKey), f.appendChild(w);
|
|
3917
|
+
} else if (n) {
|
|
3918
|
+
const w = document.createElement("span");
|
|
3919
|
+
w.style.width = "14px", w.style.display = "inline-block", f.appendChild(w);
|
|
3920
|
+
}
|
|
3921
|
+
const m = document.createElement("span");
|
|
3922
|
+
if (s) {
|
|
3923
|
+
const w = s(a);
|
|
3924
|
+
w instanceof Node ? m.appendChild(w) : m.textContent = String(w ?? d ?? "");
|
|
3925
|
+
} else
|
|
3926
|
+
m.textContent = String(d ?? "");
|
|
3927
|
+
return f.appendChild(m), f;
|
|
3928
|
+
};
|
|
3929
|
+
l.__treeWrapped = !0, i.viewRenderer = l, o[0] = i;
|
|
3930
|
+
}
|
|
3931
|
+
return o;
|
|
3932
|
+
}
|
|
3933
|
+
// ===== Event Handlers =====
|
|
3934
|
+
onCellClick(e) {
|
|
3935
|
+
const t = e.originalEvent?.target;
|
|
3936
|
+
if (!t?.classList.contains("tree-toggle")) return !1;
|
|
3937
|
+
const n = t.getAttribute("data-tree-key");
|
|
3938
|
+
if (!n) return !1;
|
|
3939
|
+
const o = this.rowKeyMap.get(n);
|
|
3940
|
+
return o ? (this.expandedKeys = Fe(this.expandedKeys, n), this.emit("tree-expand", {
|
|
3941
|
+
key: n,
|
|
3942
|
+
row: o.data,
|
|
3943
|
+
expanded: this.expandedKeys.has(n),
|
|
3944
|
+
depth: o.depth
|
|
3945
|
+
}), this.requestRender(), !0) : !1;
|
|
3946
|
+
}
|
|
3947
|
+
// ===== Public API =====
|
|
3948
|
+
/**
|
|
3949
|
+
* Expand a specific node by key.
|
|
3950
|
+
*/
|
|
3951
|
+
expand(e) {
|
|
3952
|
+
this.expandedKeys.add(e), this.requestRender();
|
|
3953
|
+
}
|
|
3954
|
+
/**
|
|
3955
|
+
* Collapse a specific node by key.
|
|
3956
|
+
*/
|
|
3957
|
+
collapse(e) {
|
|
3958
|
+
this.expandedKeys.delete(e), this.requestRender();
|
|
3959
|
+
}
|
|
3960
|
+
/**
|
|
3961
|
+
* Toggle the expansion state of a node.
|
|
3962
|
+
*/
|
|
3963
|
+
toggle(e) {
|
|
3964
|
+
this.expandedKeys = Fe(this.expandedKeys, e), this.requestRender();
|
|
3965
|
+
}
|
|
3966
|
+
/**
|
|
3967
|
+
* Expand all nodes in the tree.
|
|
3968
|
+
*/
|
|
3969
|
+
expandAll() {
|
|
3970
|
+
this.expandedKeys = J(this.rows, this.config), this.requestRender();
|
|
3971
|
+
}
|
|
3972
|
+
/**
|
|
3973
|
+
* Collapse all nodes in the tree.
|
|
3974
|
+
*/
|
|
3975
|
+
collapseAll() {
|
|
3976
|
+
this.expandedKeys = rn(), this.requestRender();
|
|
3977
|
+
}
|
|
3978
|
+
/**
|
|
3979
|
+
* Check if a node is currently expanded.
|
|
3980
|
+
*/
|
|
3981
|
+
isExpanded(e) {
|
|
3982
|
+
return this.expandedKeys.has(e);
|
|
3983
|
+
}
|
|
3984
|
+
/**
|
|
3985
|
+
* Get all currently expanded keys.
|
|
3986
|
+
*/
|
|
3987
|
+
getExpandedKeys() {
|
|
3988
|
+
return [...this.expandedKeys];
|
|
3989
|
+
}
|
|
3990
|
+
/**
|
|
3991
|
+
* Get the flattened tree rows with metadata.
|
|
3992
|
+
*/
|
|
3993
|
+
getFlattenedRows() {
|
|
3994
|
+
return [...this.flattenedRows];
|
|
3995
|
+
}
|
|
3996
|
+
/**
|
|
3997
|
+
* Get a row's original data by its key.
|
|
3998
|
+
*/
|
|
3999
|
+
getRowByKey(e) {
|
|
4000
|
+
return this.rowKeyMap.get(e)?.data;
|
|
4001
|
+
}
|
|
4002
|
+
/**
|
|
4003
|
+
* Expand all ancestors of a node to make it visible.
|
|
4004
|
+
*/
|
|
4005
|
+
expandToKey(e) {
|
|
4006
|
+
this.expandedKeys = sn(this.rows, e, this.config, this.expandedKeys), this.requestRender();
|
|
4007
|
+
}
|
|
4008
|
+
// ===== Styles =====
|
|
4009
|
+
styles = an;
|
|
4010
|
+
}
|
|
4011
|
+
function dn(r, e, t) {
|
|
4012
|
+
const n = [...r.undoStack, e];
|
|
4013
|
+
for (; n.length > t; )
|
|
4014
|
+
n.shift();
|
|
3484
4015
|
return {
|
|
3485
|
-
undoStack:
|
|
4016
|
+
undoStack: n,
|
|
3486
4017
|
redoStack: []
|
|
3487
4018
|
// Clear redo on new action
|
|
3488
4019
|
};
|
|
3489
4020
|
}
|
|
3490
|
-
function
|
|
3491
|
-
if (
|
|
3492
|
-
return { newState:
|
|
3493
|
-
const e = [...
|
|
4021
|
+
function Te(r) {
|
|
4022
|
+
if (r.undoStack.length === 0)
|
|
4023
|
+
return { newState: r, action: null };
|
|
4024
|
+
const e = [...r.undoStack], t = e.pop();
|
|
3494
4025
|
return t ? {
|
|
3495
4026
|
newState: {
|
|
3496
4027
|
undoStack: e,
|
|
3497
|
-
redoStack: [...
|
|
4028
|
+
redoStack: [...r.redoStack, t]
|
|
3498
4029
|
},
|
|
3499
4030
|
action: t
|
|
3500
|
-
} : { newState:
|
|
4031
|
+
} : { newState: r, action: null };
|
|
3501
4032
|
}
|
|
3502
|
-
function
|
|
3503
|
-
if (
|
|
3504
|
-
return { newState:
|
|
3505
|
-
const e = [...
|
|
4033
|
+
function Me(r) {
|
|
4034
|
+
if (r.redoStack.length === 0)
|
|
4035
|
+
return { newState: r, action: null };
|
|
4036
|
+
const e = [...r.redoStack], t = e.pop();
|
|
3506
4037
|
return t ? {
|
|
3507
4038
|
newState: {
|
|
3508
|
-
undoStack: [...
|
|
4039
|
+
undoStack: [...r.undoStack, t],
|
|
3509
4040
|
redoStack: e
|
|
3510
4041
|
},
|
|
3511
4042
|
action: t
|
|
3512
|
-
} : { newState:
|
|
4043
|
+
} : { newState: r, action: null };
|
|
3513
4044
|
}
|
|
3514
|
-
function
|
|
3515
|
-
return
|
|
4045
|
+
function cn(r) {
|
|
4046
|
+
return r.undoStack.length > 0;
|
|
3516
4047
|
}
|
|
3517
|
-
function
|
|
3518
|
-
return
|
|
4048
|
+
function un(r) {
|
|
4049
|
+
return r.redoStack.length > 0;
|
|
3519
4050
|
}
|
|
3520
|
-
function
|
|
4051
|
+
function hn() {
|
|
3521
4052
|
return { undoStack: [], redoStack: [] };
|
|
3522
4053
|
}
|
|
3523
|
-
function
|
|
4054
|
+
function gn(r, e, t, n) {
|
|
3524
4055
|
return {
|
|
3525
4056
|
type: "cell-edit",
|
|
3526
|
-
rowIndex:
|
|
4057
|
+
rowIndex: r,
|
|
3527
4058
|
field: e,
|
|
3528
4059
|
oldValue: t,
|
|
3529
|
-
newValue:
|
|
4060
|
+
newValue: n,
|
|
3530
4061
|
timestamp: Date.now()
|
|
3531
4062
|
};
|
|
3532
4063
|
}
|
|
3533
|
-
class
|
|
4064
|
+
class Fn extends x {
|
|
3534
4065
|
name = "undoRedo";
|
|
3535
4066
|
version = "1.0.0";
|
|
3536
4067
|
get defaultConfig() {
|
|
@@ -3553,24 +4084,24 @@ class lo extends C {
|
|
|
3553
4084
|
* - Ctrl+Y / Cmd+Y / Ctrl+Shift+Z / Cmd+Shift+Z: Redo
|
|
3554
4085
|
*/
|
|
3555
4086
|
onKeyDown(e) {
|
|
3556
|
-
const t = (e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey,
|
|
4087
|
+
const t = (e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey, n = (e.ctrlKey || e.metaKey) && (e.key === "y" || e.key === "z" && e.shiftKey);
|
|
3557
4088
|
if (t) {
|
|
3558
|
-
const
|
|
3559
|
-
if (
|
|
4089
|
+
const o = Te({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
4090
|
+
if (o.action) {
|
|
3560
4091
|
const i = this.rows;
|
|
3561
|
-
i[
|
|
3562
|
-
action:
|
|
4092
|
+
i[o.action.rowIndex] && (i[o.action.rowIndex][o.action.field] = o.action.oldValue), this.undoStack = o.newState.undoStack, this.redoStack = o.newState.redoStack, this.emit("undo", {
|
|
4093
|
+
action: o.action,
|
|
3563
4094
|
type: "undo"
|
|
3564
4095
|
}), this.requestRender();
|
|
3565
4096
|
}
|
|
3566
4097
|
return !0;
|
|
3567
4098
|
}
|
|
3568
|
-
if (
|
|
3569
|
-
const
|
|
3570
|
-
if (
|
|
4099
|
+
if (n) {
|
|
4100
|
+
const o = Me({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
4101
|
+
if (o.action) {
|
|
3571
4102
|
const i = this.rows;
|
|
3572
|
-
i[
|
|
3573
|
-
action:
|
|
4103
|
+
i[o.action.rowIndex] && (i[o.action.rowIndex][o.action.field] = o.action.newValue), this.undoStack = o.newState.undoStack, this.redoStack = o.newState.redoStack, this.emit("redo", {
|
|
4104
|
+
action: o.action,
|
|
3574
4105
|
type: "redo"
|
|
3575
4106
|
}), this.requestRender();
|
|
3576
4107
|
}
|
|
@@ -3588,13 +4119,13 @@ class lo extends C {
|
|
|
3588
4119
|
* @param oldValue - The value before the edit
|
|
3589
4120
|
* @param newValue - The value after the edit
|
|
3590
4121
|
*/
|
|
3591
|
-
recordEdit(e, t,
|
|
3592
|
-
const i =
|
|
4122
|
+
recordEdit(e, t, n, o) {
|
|
4123
|
+
const i = gn(e, t, n, o), s = dn(
|
|
3593
4124
|
{ undoStack: this.undoStack, redoStack: this.redoStack },
|
|
3594
4125
|
i,
|
|
3595
4126
|
this.config.maxHistorySize ?? 100
|
|
3596
4127
|
);
|
|
3597
|
-
this.undoStack =
|
|
4128
|
+
this.undoStack = s.undoStack, this.redoStack = s.redoStack;
|
|
3598
4129
|
}
|
|
3599
4130
|
/**
|
|
3600
4131
|
* Programmatically undo the last action.
|
|
@@ -3602,7 +4133,7 @@ class lo extends C {
|
|
|
3602
4133
|
* @returns The undone action, or null if nothing to undo
|
|
3603
4134
|
*/
|
|
3604
4135
|
undo() {
|
|
3605
|
-
const e =
|
|
4136
|
+
const e = Te({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
3606
4137
|
if (e.action) {
|
|
3607
4138
|
const t = this.rows;
|
|
3608
4139
|
t[e.action.rowIndex] && (t[e.action.rowIndex][e.action.field] = e.action.oldValue), this.undoStack = e.newState.undoStack, this.redoStack = e.newState.redoStack, this.requestRender();
|
|
@@ -3615,7 +4146,7 @@ class lo extends C {
|
|
|
3615
4146
|
* @returns The redone action, or null if nothing to redo
|
|
3616
4147
|
*/
|
|
3617
4148
|
redo() {
|
|
3618
|
-
const e =
|
|
4149
|
+
const e = Me({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
3619
4150
|
if (e.action) {
|
|
3620
4151
|
const t = this.rows;
|
|
3621
4152
|
t[e.action.rowIndex] && (t[e.action.rowIndex][e.action.field] = e.action.newValue), this.undoStack = e.newState.undoStack, this.redoStack = e.newState.redoStack, this.requestRender();
|
|
@@ -3626,19 +4157,19 @@ class lo extends C {
|
|
|
3626
4157
|
* Check if there are any actions that can be undone.
|
|
3627
4158
|
*/
|
|
3628
4159
|
canUndo() {
|
|
3629
|
-
return
|
|
4160
|
+
return cn({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
3630
4161
|
}
|
|
3631
4162
|
/**
|
|
3632
4163
|
* Check if there are any actions that can be redone.
|
|
3633
4164
|
*/
|
|
3634
4165
|
canRedo() {
|
|
3635
|
-
return
|
|
4166
|
+
return un({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
3636
4167
|
}
|
|
3637
4168
|
/**
|
|
3638
4169
|
* Clear all undo/redo history.
|
|
3639
4170
|
*/
|
|
3640
4171
|
clearHistory() {
|
|
3641
|
-
const e =
|
|
4172
|
+
const e = hn();
|
|
3642
4173
|
this.undoStack = e.undoStack, this.redoStack = e.redoStack;
|
|
3643
4174
|
}
|
|
3644
4175
|
/**
|
|
@@ -3654,12 +4185,12 @@ class lo extends C {
|
|
|
3654
4185
|
return [...this.redoStack];
|
|
3655
4186
|
}
|
|
3656
4187
|
}
|
|
3657
|
-
const
|
|
3658
|
-
function
|
|
3659
|
-
const e =
|
|
4188
|
+
const pn = '.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:8px}.tbw-visibility-row{display:flex;align-items:center;gap:8px;padding:6px 4px;cursor:pointer;font-size:13px;border-radius:var(--tbw-border-radius, 4px);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted, #888)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted, #888);font-size:10px;letter-spacing:-2px;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg, #1f2937)}.tbw-visibility-label{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6))}.tbw-visibility-show-all{margin:8px;padding:8px 12px;border:1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));border-radius:var(--tbw-border-radius, 4px);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));color:var(--tbw-color-fg, #1f2937);cursor:pointer;font-size:13px}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6))}';
|
|
4189
|
+
function Ne(r) {
|
|
4190
|
+
const e = r.meta ?? {};
|
|
3660
4191
|
return e.lockPosition !== !0 && e.suppressMovable !== !0;
|
|
3661
4192
|
}
|
|
3662
|
-
class
|
|
4193
|
+
class T extends x {
|
|
3663
4194
|
name = "visibility";
|
|
3664
4195
|
version = "1.0.0";
|
|
3665
4196
|
/** Tool panel ID for shell integration */
|
|
@@ -3686,7 +4217,7 @@ class L extends C {
|
|
|
3686
4217
|
*/
|
|
3687
4218
|
getToolPanel() {
|
|
3688
4219
|
return {
|
|
3689
|
-
id:
|
|
4220
|
+
id: T.PANEL_ID,
|
|
3690
4221
|
title: "Columns",
|
|
3691
4222
|
icon: "☰",
|
|
3692
4223
|
tooltip: "Column visibility",
|
|
@@ -3700,7 +4231,7 @@ class L extends C {
|
|
|
3700
4231
|
* Show the visibility sidebar panel.
|
|
3701
4232
|
*/
|
|
3702
4233
|
show() {
|
|
3703
|
-
this.grid.openToolPanel(
|
|
4234
|
+
this.grid.openToolPanel(T.PANEL_ID);
|
|
3704
4235
|
}
|
|
3705
4236
|
/**
|
|
3706
4237
|
* Hide the visibility sidebar panel.
|
|
@@ -3712,7 +4243,7 @@ class L extends C {
|
|
|
3712
4243
|
* Toggle the visibility sidebar panel.
|
|
3713
4244
|
*/
|
|
3714
4245
|
toggle() {
|
|
3715
|
-
this.grid.toggleToolPanel(
|
|
4246
|
+
this.grid.toggleToolPanel(T.PANEL_ID);
|
|
3716
4247
|
}
|
|
3717
4248
|
/**
|
|
3718
4249
|
* Check if a specific column is visible.
|
|
@@ -3790,7 +4321,7 @@ class L extends C {
|
|
|
3790
4321
|
* @returns True if the panel is open
|
|
3791
4322
|
*/
|
|
3792
4323
|
isPanelVisible() {
|
|
3793
|
-
return this.grid.activeToolPanel ===
|
|
4324
|
+
return this.grid.activeToolPanel === T.PANEL_ID;
|
|
3794
4325
|
}
|
|
3795
4326
|
// ===== Private Methods =====
|
|
3796
4327
|
/**
|
|
@@ -3798,15 +4329,15 @@ class L extends C {
|
|
|
3798
4329
|
* Returns a cleanup function.
|
|
3799
4330
|
*/
|
|
3800
4331
|
renderPanelContent(e) {
|
|
3801
|
-
const t = this.grid,
|
|
3802
|
-
|
|
3803
|
-
const
|
|
3804
|
-
|
|
4332
|
+
const t = this.grid, n = document.createElement("div");
|
|
4333
|
+
n.className = "tbw-visibility-content";
|
|
4334
|
+
const o = document.createElement("div");
|
|
4335
|
+
o.className = "tbw-visibility-list", n.appendChild(o);
|
|
3805
4336
|
const i = document.createElement("button");
|
|
3806
4337
|
return i.className = "tbw-visibility-show-all", i.textContent = "Show All", i.addEventListener("click", () => {
|
|
3807
|
-
t.showAllColumns(), this.rebuildToggles(
|
|
3808
|
-
}),
|
|
3809
|
-
this.columnListElement = null,
|
|
4338
|
+
t.showAllColumns(), this.rebuildToggles(o);
|
|
4339
|
+
}), n.appendChild(i), this.columnListElement = o, this.rebuildToggles(o), e.appendChild(n), () => {
|
|
4340
|
+
this.columnListElement = null, n.remove();
|
|
3810
4341
|
};
|
|
3811
4342
|
}
|
|
3812
4343
|
/**
|
|
@@ -3821,20 +4352,20 @@ class L extends C {
|
|
|
3821
4352
|
* When a reorder plugin is present, adds drag handles for reordering.
|
|
3822
4353
|
*/
|
|
3823
4354
|
rebuildToggles(e) {
|
|
3824
|
-
const t = this.grid,
|
|
4355
|
+
const t = this.grid, n = this.hasReorderPlugin();
|
|
3825
4356
|
e.innerHTML = "";
|
|
3826
|
-
const
|
|
3827
|
-
for (let i = 0; i <
|
|
3828
|
-
const
|
|
3829
|
-
a.className =
|
|
4357
|
+
const o = t.getAllColumns();
|
|
4358
|
+
for (let i = 0; i < o.length; i++) {
|
|
4359
|
+
const s = o[i], l = s.header || s.field, a = document.createElement("div");
|
|
4360
|
+
a.className = s.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", a.setAttribute("data-field", s.field), a.setAttribute("data-index", String(i)), n && Ne(s) && (a.draggable = !0, a.classList.add("reorderable"), this.setupDragListeners(a, s.field, i, e));
|
|
3830
4361
|
const d = document.createElement("label");
|
|
3831
4362
|
d.className = "tbw-visibility-label";
|
|
3832
4363
|
const c = document.createElement("input");
|
|
3833
|
-
c.type = "checkbox", c.checked =
|
|
3834
|
-
t.toggleColumnVisibility(
|
|
4364
|
+
c.type = "checkbox", c.checked = s.visible, c.disabled = s.lockVisible ?? !1, c.addEventListener("change", () => {
|
|
4365
|
+
t.toggleColumnVisibility(s.field), setTimeout(() => this.rebuildToggles(e), 0);
|
|
3835
4366
|
});
|
|
3836
4367
|
const u = document.createElement("span");
|
|
3837
|
-
if (u.textContent = l, d.appendChild(c), d.appendChild(u),
|
|
4368
|
+
if (u.textContent = l, d.appendChild(c), d.appendChild(u), n && Ne(s)) {
|
|
3838
4369
|
const h = document.createElement("span");
|
|
3839
4370
|
h.className = "tbw-visibility-handle", this.setIcon(h, this.resolveIcon("dragHandle")), h.title = "Drag to reorder", a.appendChild(h);
|
|
3840
4371
|
}
|
|
@@ -3845,80 +4376,80 @@ class L extends C {
|
|
|
3845
4376
|
* Set up drag-and-drop event listeners for a row.
|
|
3846
4377
|
* On drop, emits a 'column-reorder-request' event for other plugins to handle.
|
|
3847
4378
|
*/
|
|
3848
|
-
setupDragListeners(e, t,
|
|
4379
|
+
setupDragListeners(e, t, n, o) {
|
|
3849
4380
|
e.addEventListener("dragstart", (i) => {
|
|
3850
|
-
this.isDragging = !0, this.draggedField = t, this.draggedIndex =
|
|
4381
|
+
this.isDragging = !0, this.draggedField = t, this.draggedIndex = n, i.dataTransfer && (i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
|
|
3851
4382
|
}), e.addEventListener("dragend", () => {
|
|
3852
|
-
this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null,
|
|
4383
|
+
this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, o.querySelectorAll(".tbw-visibility-row").forEach((i) => {
|
|
3853
4384
|
i.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
|
|
3854
4385
|
});
|
|
3855
4386
|
}), e.addEventListener("dragover", (i) => {
|
|
3856
4387
|
if (i.preventDefault(), !this.isDragging || this.draggedField === t) return;
|
|
3857
|
-
const
|
|
3858
|
-
this.dropIndex = i.clientY < l ?
|
|
4388
|
+
const s = e.getBoundingClientRect(), l = s.top + s.height / 2;
|
|
4389
|
+
this.dropIndex = i.clientY < l ? n : n + 1, o.querySelectorAll(".tbw-visibility-row").forEach((a) => {
|
|
3859
4390
|
a !== e && a.classList.remove("drop-target", "drop-before", "drop-after");
|
|
3860
4391
|
}), e.classList.add("drop-target"), e.classList.toggle("drop-before", i.clientY < l), e.classList.toggle("drop-after", i.clientY >= l);
|
|
3861
4392
|
}), e.addEventListener("dragleave", () => {
|
|
3862
4393
|
e.classList.remove("drop-target", "drop-before", "drop-after");
|
|
3863
4394
|
}), e.addEventListener("drop", (i) => {
|
|
3864
4395
|
i.preventDefault();
|
|
3865
|
-
const
|
|
3866
|
-
if (!this.isDragging ||
|
|
4396
|
+
const s = this.draggedField, l = this.draggedIndex, a = this.dropIndex;
|
|
4397
|
+
if (!this.isDragging || s === null || l === null || a === null)
|
|
3867
4398
|
return;
|
|
3868
4399
|
const d = a > l ? a - 1 : a;
|
|
3869
4400
|
if (d !== l) {
|
|
3870
4401
|
const c = {
|
|
3871
|
-
field:
|
|
4402
|
+
field: s,
|
|
3872
4403
|
fromIndex: l,
|
|
3873
4404
|
toIndex: d
|
|
3874
4405
|
};
|
|
3875
4406
|
this.emit("column-reorder-request", c), setTimeout(() => {
|
|
3876
|
-
this.rebuildToggles(
|
|
4407
|
+
this.rebuildToggles(o);
|
|
3877
4408
|
}, 0);
|
|
3878
4409
|
}
|
|
3879
4410
|
});
|
|
3880
4411
|
}
|
|
3881
4412
|
// ===== Styles =====
|
|
3882
|
-
styles =
|
|
4413
|
+
styles = pn;
|
|
3883
4414
|
}
|
|
3884
4415
|
export {
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
-
|
|
3889
|
-
|
|
3890
|
-
|
|
3891
|
-
|
|
3892
|
-
|
|
4416
|
+
x as BaseGridPlugin,
|
|
4417
|
+
mn as ClipboardPlugin,
|
|
4418
|
+
wn as ColumnVirtualizationPlugin,
|
|
4419
|
+
bn as ContextMenuPlugin,
|
|
4420
|
+
Ke as DEFAULT_GRID_ICONS,
|
|
4421
|
+
Mn as DGEvents,
|
|
4422
|
+
Nn as DataGridElement,
|
|
4423
|
+
vn as ExportPlugin,
|
|
3893
4424
|
A as FilteringPlugin,
|
|
3894
|
-
|
|
3895
|
-
|
|
3896
|
-
|
|
3897
|
-
|
|
3898
|
-
|
|
3899
|
-
|
|
3900
|
-
|
|
3901
|
-
|
|
3902
|
-
|
|
3903
|
-
|
|
3904
|
-
|
|
3905
|
-
|
|
3906
|
-
|
|
3907
|
-
|
|
3908
|
-
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
|
|
3912
|
-
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
|
|
3921
|
-
|
|
3922
|
-
|
|
4425
|
+
Pn as FitModeEnum,
|
|
4426
|
+
qn as GridCSSVars,
|
|
4427
|
+
Dn as GridClasses,
|
|
4428
|
+
Kn as GridDataAttrs,
|
|
4429
|
+
Hn as GridElement,
|
|
4430
|
+
Gn as GridSelectors,
|
|
4431
|
+
xn as GroupingColumnsPlugin,
|
|
4432
|
+
Cn as GroupingRowsPlugin,
|
|
4433
|
+
yn as MasterDetailPlugin,
|
|
4434
|
+
Rn as MultiSortPlugin,
|
|
4435
|
+
Sn as PinnedColumnsPlugin,
|
|
4436
|
+
En as PinnedRowsPlugin,
|
|
4437
|
+
L as PivotPlugin,
|
|
4438
|
+
Bn as PluginEvents,
|
|
4439
|
+
On as PluginManager,
|
|
4440
|
+
kn as ReorderPlugin,
|
|
4441
|
+
An as SelectionPlugin,
|
|
4442
|
+
_n as ServerSidePlugin,
|
|
4443
|
+
In as TreePlugin,
|
|
4444
|
+
Fn as UndoRedoPlugin,
|
|
4445
|
+
T as VisibilityPlugin,
|
|
4446
|
+
zn as aggregatorRegistry,
|
|
4447
|
+
He as getAggregator,
|
|
4448
|
+
Ge as getValueAggregator,
|
|
4449
|
+
Vn as listAggregators,
|
|
4450
|
+
Wn as registerAggregator,
|
|
4451
|
+
se as runAggregator,
|
|
4452
|
+
$n as runValueAggregator,
|
|
4453
|
+
jn as unregisterAggregator
|
|
3923
4454
|
};
|
|
3924
4455
|
//# sourceMappingURL=all.js.map
|