@toolbox-web/grid 0.1.0 → 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/README.md +1 -1
- package/all.d.ts +13 -0
- package/all.js +1684 -1196
- package/all.js.map +1 -1
- package/index.d.ts +4 -163
- package/index.js +1278 -1702
- 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 +35 -78
- 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 +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 +8 -8
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js +160 -160
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/reorder/index.js.map +1 -1
- package/lib/plugins/selection/index.js +93 -72
- 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 +27 -78
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +28 -28
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/context-menu.umd.js +1 -52
- package/umd/plugins/context-menu.umd.js.map +1 -1
- package/umd/plugins/master-detail.umd.js +1 -1
- package/umd/plugins/master-detail.umd.js.map +1 -1
- package/umd/plugins/pinned-rows.umd.js +1 -1
- package/umd/plugins/pinned-rows.umd.js.map +1 -1
- package/umd/plugins/pivot.umd.js +1 -1
- package/umd/plugins/pivot.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
|
|
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
|
|
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 Ut 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 (
|
|
95
|
-
a =
|
|
94
|
+
if (o && t)
|
|
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 Ut 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 {
|
|
@@ -115,24 +115,24 @@ class Ut extends C {
|
|
|
115
115
|
if (!u) return;
|
|
116
116
|
a = u.text, d = 1, c = 1;
|
|
117
117
|
}
|
|
118
|
-
|
|
118
|
+
G(a).then(() => {
|
|
119
119
|
this.lastCopied = { text: a, timestamp: Date.now() }, this.emit("copy", { text: a, rowCount: d, columnCount: c });
|
|
120
120
|
});
|
|
121
121
|
}
|
|
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 Ut 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 Ut 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
|
|
178
|
-
return
|
|
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
|
+
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 Ut 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 Ut 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
|
|
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.
|
|
@@ -229,21 +229,21 @@ class Ut extends C {
|
|
|
229
229
|
* @returns The copied text
|
|
230
230
|
*/
|
|
231
231
|
async copyRows(e) {
|
|
232
|
-
const t =
|
|
232
|
+
const t = H({
|
|
233
233
|
rows: this.rows,
|
|
234
234
|
columns: [...this.columns],
|
|
235
235
|
selectedIndices: e,
|
|
236
236
|
config: this.config
|
|
237
237
|
});
|
|
238
|
-
return await
|
|
238
|
+
return await G(t), this.lastCopied = { text: t, timestamp: Date.now() }, t;
|
|
239
239
|
}
|
|
240
240
|
/**
|
|
241
241
|
* Read and parse clipboard content.
|
|
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 Ut 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 Yt 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 Yt 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,127 +397,77 @@ class Yt extends C {
|
|
|
397
397
|
return this.totalWidth;
|
|
398
398
|
}
|
|
399
399
|
}
|
|
400
|
-
|
|
401
|
-
|
|
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)));
|
|
402
403
|
}
|
|
403
|
-
function
|
|
404
|
-
return
|
|
404
|
+
function $e(r, e) {
|
|
405
|
+
return r.disabled === !0 ? !0 : typeof r.disabled == "function" ? r.disabled(e) : !1;
|
|
405
406
|
}
|
|
406
|
-
function
|
|
407
|
-
const
|
|
408
|
-
|
|
409
|
-
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) {
|
|
410
411
|
if (i.separator) {
|
|
411
412
|
const d = document.createElement("div");
|
|
412
|
-
d.className = "tbw-context-menu-separator", d.setAttribute("role", "separator"),
|
|
413
|
+
d.className = "tbw-context-menu-separator", d.setAttribute("role", "separator"), o.appendChild(d);
|
|
413
414
|
continue;
|
|
414
415
|
}
|
|
415
|
-
const
|
|
416
|
-
|
|
417
|
-
const l =
|
|
418
|
-
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) {
|
|
419
420
|
const d = document.createElement("span");
|
|
420
|
-
d.className = "tbw-context-menu-icon", d.innerHTML = i.icon,
|
|
421
|
+
d.className = "tbw-context-menu-icon", d.innerHTML = i.icon, s.appendChild(d);
|
|
421
422
|
}
|
|
422
423
|
const a = document.createElement("span");
|
|
423
|
-
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) {
|
|
424
425
|
const d = document.createElement("span");
|
|
425
|
-
d.className = "tbw-context-menu-shortcut", d.textContent = i.shortcut,
|
|
426
|
+
d.className = "tbw-context-menu-shortcut", d.textContent = i.shortcut, s.appendChild(d);
|
|
426
427
|
}
|
|
427
428
|
if (i.subMenu?.length) {
|
|
428
429
|
const d = document.createElement("span");
|
|
429
|
-
d.className = "tbw-context-menu-arrow", typeof
|
|
430
|
-
if (
|
|
431
|
-
const u =
|
|
432
|
-
h.classList.add("tbw-context-submenu"), h.style.position = "absolute", h.style.left = "100%", h.style.top = "0",
|
|
433
|
-
}),
|
|
434
|
-
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");
|
|
435
436
|
c && c.remove();
|
|
436
437
|
});
|
|
437
438
|
}
|
|
438
|
-
!l && i.action && !i.subMenu &&
|
|
439
|
+
!l && i.action && !i.subMenu && s.addEventListener("click", (d) => {
|
|
439
440
|
d.stopPropagation(), t(i);
|
|
440
|
-
}),
|
|
441
|
+
}), o.appendChild(s);
|
|
441
442
|
}
|
|
442
|
-
return
|
|
443
|
+
return o;
|
|
444
|
+
}
|
|
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";
|
|
443
450
|
}
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
const o = s.getBoundingClientRect(), n = window.innerWidth, i = window.innerHeight;
|
|
447
|
-
let r = e, l = t;
|
|
448
|
-
e + o.width > n && (r = e - o.width), t + o.height > i && (l = t - o.height), r = Math.max(0, r), l = Math.max(0, l), s.style.left = `${r}px`, s.style.top = `${l}px`, s.style.visibility = "visible";
|
|
449
|
-
}
|
|
450
|
-
let H = null, G = null, A = null;
|
|
451
|
-
const Pe = `
|
|
452
|
-
.tbw-context-menu {
|
|
453
|
-
position: fixed;
|
|
454
|
-
background: light-dark(#f5f5f5, #2a2a2a);
|
|
455
|
-
color: light-dark(#222, #eee);
|
|
456
|
-
border: 1px solid light-dark(#d0d0d4, #454545);
|
|
457
|
-
border-radius: 4px;
|
|
458
|
-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
|
|
459
|
-
min-width: 160px;
|
|
460
|
-
padding: 4px 0;
|
|
461
|
-
z-index: 10000;
|
|
462
|
-
font-size: 13px;
|
|
463
|
-
font-family: system-ui, sans-serif;
|
|
464
|
-
}
|
|
465
|
-
.tbw-context-menu-item {
|
|
466
|
-
display: flex;
|
|
467
|
-
align-items: center;
|
|
468
|
-
padding: 6px 12px;
|
|
469
|
-
cursor: pointer;
|
|
470
|
-
gap: 8px;
|
|
471
|
-
}
|
|
472
|
-
.tbw-context-menu-item:hover:not(.disabled) {
|
|
473
|
-
background: light-dark(#e8e8e8, #3a3a3a);
|
|
474
|
-
}
|
|
475
|
-
.tbw-context-menu-item.disabled {
|
|
476
|
-
opacity: 0.5;
|
|
477
|
-
cursor: default;
|
|
478
|
-
}
|
|
479
|
-
.tbw-context-menu-item.danger {
|
|
480
|
-
color: light-dark(#c00, #f66);
|
|
481
|
-
}
|
|
482
|
-
.tbw-context-menu-icon {
|
|
483
|
-
width: 16px;
|
|
484
|
-
text-align: center;
|
|
485
|
-
}
|
|
486
|
-
.tbw-context-menu-label {
|
|
487
|
-
flex: 1;
|
|
488
|
-
}
|
|
489
|
-
.tbw-context-menu-shortcut {
|
|
490
|
-
color: light-dark(#888, #888);
|
|
491
|
-
font-size: 11px;
|
|
492
|
-
}
|
|
493
|
-
.tbw-context-menu-arrow {
|
|
494
|
-
font-size: 10px;
|
|
495
|
-
color: light-dark(#888, #888);
|
|
496
|
-
}
|
|
497
|
-
.tbw-context-menu-separator {
|
|
498
|
-
height: 1px;
|
|
499
|
-
background: light-dark(#d0d0d4, #454545);
|
|
500
|
-
margin: 4px 0;
|
|
501
|
-
}
|
|
502
|
-
`, O = [
|
|
451
|
+
let _ = null, I = null, E = null, B = 0;
|
|
452
|
+
const O = [
|
|
503
453
|
{
|
|
504
454
|
id: "copy",
|
|
505
455
|
name: "Copy",
|
|
506
456
|
shortcut: "Ctrl+C",
|
|
507
|
-
action: (
|
|
508
|
-
|
|
457
|
+
action: (r) => {
|
|
458
|
+
r.grid?.plugins?.clipboard?.copy?.();
|
|
509
459
|
}
|
|
510
460
|
},
|
|
511
461
|
{ separator: !0, id: "sep1", name: "" },
|
|
512
462
|
{
|
|
513
463
|
id: "export-csv",
|
|
514
464
|
name: "Export CSV",
|
|
515
|
-
action: (
|
|
516
|
-
|
|
465
|
+
action: (r) => {
|
|
466
|
+
r.grid?.plugins?.export?.exportCsv?.();
|
|
517
467
|
}
|
|
518
468
|
}
|
|
519
469
|
];
|
|
520
|
-
class
|
|
470
|
+
class bn extends x {
|
|
521
471
|
name = "contextMenu";
|
|
522
472
|
version = "1.0.0";
|
|
523
473
|
get defaultConfig() {
|
|
@@ -532,40 +482,47 @@ class Zt extends C {
|
|
|
532
482
|
menuElement = null;
|
|
533
483
|
// ===== Lifecycle =====
|
|
534
484
|
attach(e) {
|
|
535
|
-
super.attach(e), this.installGlobalHandlers()
|
|
485
|
+
super.attach(e), this.installGlobalHandlers(), B++;
|
|
536
486
|
}
|
|
537
487
|
detach() {
|
|
538
|
-
this.menuElement && (this.menuElement.remove(), this.menuElement = null), this.isOpen = !1, this.params = null;
|
|
488
|
+
this.menuElement && (this.menuElement.remove(), this.menuElement = null), this.isOpen = !1, this.params = null, this.uninstallGlobalHandlers();
|
|
539
489
|
}
|
|
540
490
|
// ===== Private Methods =====
|
|
541
491
|
installGlobalHandlers() {
|
|
542
|
-
!
|
|
492
|
+
!E && typeof document < "u" && (E = document.createElement("style"), E.id = "tbw-context-menu-styles", E.textContent = We, document.head.appendChild(E)), _ || (_ = () => {
|
|
543
493
|
document.querySelectorAll(".tbw-context-menu").forEach((t) => t.remove());
|
|
544
|
-
}, document.addEventListener("click",
|
|
545
|
-
e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((
|
|
546
|
-
}, document.addEventListener("keydown",
|
|
494
|
+
}, document.addEventListener("click", _)), I || (I = (e) => {
|
|
495
|
+
e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((n) => n.remove());
|
|
496
|
+
}, document.addEventListener("keydown", I));
|
|
497
|
+
}
|
|
498
|
+
/**
|
|
499
|
+
* Clean up global handlers when the last instance detaches.
|
|
500
|
+
* Uses reference counting to ensure handlers persist while any grid uses the plugin.
|
|
501
|
+
*/
|
|
502
|
+
uninstallGlobalHandlers() {
|
|
503
|
+
B--, !(B > 0) && (_ && (document.removeEventListener("click", _), _ = null), I && (document.removeEventListener("keydown", I), I = null), E && (E.remove(), E = null));
|
|
547
504
|
}
|
|
548
505
|
// ===== Hooks =====
|
|
549
506
|
afterRender() {
|
|
550
507
|
const e = this.shadowRoot;
|
|
551
508
|
if (!e) return;
|
|
552
509
|
const t = e.children[0];
|
|
553
|
-
t && t.getAttribute("data-context-menu-bound") !== "true" && (t.setAttribute("data-context-menu-bound", "true"), t.addEventListener("contextmenu", (
|
|
554
|
-
const
|
|
555
|
-
|
|
556
|
-
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");
|
|
557
514
|
let a;
|
|
558
|
-
if (
|
|
559
|
-
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];
|
|
560
517
|
a = {
|
|
561
|
-
row:
|
|
518
|
+
row: g,
|
|
562
519
|
rowIndex: c,
|
|
563
520
|
column: h,
|
|
564
521
|
columnIndex: u,
|
|
565
522
|
field: h?.field ?? "",
|
|
566
|
-
value:
|
|
523
|
+
value: g?.[h?.field] ?? null,
|
|
567
524
|
isHeader: !1,
|
|
568
|
-
event:
|
|
525
|
+
event: o
|
|
569
526
|
};
|
|
570
527
|
} else if (l) {
|
|
571
528
|
const c = parseInt(l.getAttribute("data-col") ?? "-1", 10), u = this.columns[c];
|
|
@@ -577,20 +534,20 @@ class Zt extends C {
|
|
|
577
534
|
field: u?.field ?? "",
|
|
578
535
|
value: null,
|
|
579
536
|
isHeader: !0,
|
|
580
|
-
event:
|
|
537
|
+
event: o
|
|
581
538
|
};
|
|
582
539
|
} else
|
|
583
540
|
return;
|
|
584
|
-
this.params = a, this.position = { x:
|
|
585
|
-
const d =
|
|
586
|
-
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(
|
|
587
544
|
d,
|
|
588
545
|
a,
|
|
589
546
|
(c) => {
|
|
590
547
|
c.action && c.action(a), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
|
|
591
548
|
},
|
|
592
549
|
this.gridIcons.submenuArrow
|
|
593
|
-
), 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 }));
|
|
594
551
|
}));
|
|
595
552
|
}
|
|
596
553
|
// ===== Public API =====
|
|
@@ -600,25 +557,25 @@ class Zt extends C {
|
|
|
600
557
|
* @param y - Y coordinate
|
|
601
558
|
* @param params - Partial context menu parameters
|
|
602
559
|
*/
|
|
603
|
-
showMenu(e, t,
|
|
604
|
-
const
|
|
605
|
-
row:
|
|
606
|
-
rowIndex:
|
|
607
|
-
column:
|
|
608
|
-
columnIndex:
|
|
609
|
-
field:
|
|
610
|
-
value:
|
|
611
|
-
isHeader:
|
|
612
|
-
event:
|
|
613
|
-
}, i =
|
|
614
|
-
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(
|
|
615
572
|
i,
|
|
616
|
-
|
|
617
|
-
(
|
|
618
|
-
|
|
573
|
+
o,
|
|
574
|
+
(s) => {
|
|
575
|
+
s.action && s.action(o), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
|
|
619
576
|
},
|
|
620
577
|
this.gridIcons.submenuArrow
|
|
621
|
-
), document.body.appendChild(this.menuElement),
|
|
578
|
+
), document.body.appendChild(this.menuElement), ge(this.menuElement, e, t), this.isOpen = !0;
|
|
622
579
|
}
|
|
623
580
|
/**
|
|
624
581
|
* Hide the context menu.
|
|
@@ -635,83 +592,83 @@ class Zt extends C {
|
|
|
635
592
|
}
|
|
636
593
|
// Styles are injected globally via installGlobalHandlers() since menu renders in document.body
|
|
637
594
|
}
|
|
638
|
-
function
|
|
639
|
-
if (
|
|
640
|
-
if (
|
|
641
|
-
if (typeof
|
|
642
|
-
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);
|
|
643
600
|
return e && (t.includes(",") || t.includes('"') || t.includes(`
|
|
644
601
|
`) || t.includes("\r")) ? `"${t.replace(/"/g, '""')}"` : t;
|
|
645
602
|
}
|
|
646
|
-
function
|
|
647
|
-
const
|
|
648
|
-
`,
|
|
603
|
+
function je(r, e, t, n = {}) {
|
|
604
|
+
const o = n.delimiter ?? ",", i = n.newline ?? `
|
|
605
|
+
`, s = [], l = n.bom ? "\uFEFF" : "";
|
|
649
606
|
if (t.includeHeaders !== !1) {
|
|
650
607
|
const a = e.map((d) => {
|
|
651
608
|
const c = d.header || d.field, u = t.processHeader ? t.processHeader(c, d.field) : c;
|
|
652
|
-
return
|
|
609
|
+
return pe(u);
|
|
653
610
|
});
|
|
654
|
-
|
|
611
|
+
s.push(a.join(o));
|
|
655
612
|
}
|
|
656
|
-
for (const a of
|
|
613
|
+
for (const a of r) {
|
|
657
614
|
const d = e.map((c) => {
|
|
658
615
|
let u = a[c.field];
|
|
659
|
-
return t.processCell && (u = t.processCell(u, c.field, a)),
|
|
616
|
+
return t.processCell && (u = t.processCell(u, c.field, a)), pe(u);
|
|
660
617
|
});
|
|
661
|
-
|
|
618
|
+
s.push(d.join(o));
|
|
662
619
|
}
|
|
663
|
-
return l +
|
|
620
|
+
return l + s.join(i);
|
|
664
621
|
}
|
|
665
|
-
function
|
|
666
|
-
const t = URL.createObjectURL(
|
|
667
|
-
|
|
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);
|
|
668
625
|
}
|
|
669
|
-
function
|
|
670
|
-
const t = new Blob([
|
|
671
|
-
|
|
626
|
+
function Ue(r, e) {
|
|
627
|
+
const t = new Blob([r], { type: "text/csv;charset=utf-8;" });
|
|
628
|
+
ee(t, e);
|
|
672
629
|
}
|
|
673
|
-
function
|
|
674
|
-
return
|
|
630
|
+
function fe(r) {
|
|
631
|
+
return r.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
|
|
675
632
|
}
|
|
676
|
-
function
|
|
677
|
-
let
|
|
633
|
+
function Ye(r, e, t) {
|
|
634
|
+
let n = `<?xml version="1.0" encoding="UTF-8"?>
|
|
678
635
|
<?mso-application progid="Excel.Sheet"?>
|
|
679
636
|
<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
|
|
680
637
|
xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
|
|
681
638
|
<Worksheet ss:Name="Sheet1">
|
|
682
639
|
<Table>`;
|
|
683
640
|
if (t.includeHeaders !== !1) {
|
|
684
|
-
|
|
641
|
+
n += `
|
|
685
642
|
<Row>`;
|
|
686
|
-
for (const
|
|
687
|
-
const i =
|
|
688
|
-
|
|
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>`;
|
|
689
646
|
}
|
|
690
|
-
|
|
647
|
+
n += "</Row>";
|
|
691
648
|
}
|
|
692
|
-
for (const
|
|
693
|
-
|
|
649
|
+
for (const o of r) {
|
|
650
|
+
n += `
|
|
694
651
|
<Row>`;
|
|
695
652
|
for (const i of e) {
|
|
696
|
-
let
|
|
697
|
-
t.processCell && (
|
|
653
|
+
let s = o[i.field];
|
|
654
|
+
t.processCell && (s = t.processCell(s, i.field, o));
|
|
698
655
|
let l = "String", a = "";
|
|
699
|
-
|
|
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>`;
|
|
700
657
|
}
|
|
701
|
-
|
|
658
|
+
n += "</Row>";
|
|
702
659
|
}
|
|
703
|
-
return
|
|
660
|
+
return n += `
|
|
704
661
|
</Table>
|
|
705
662
|
</Worksheet>
|
|
706
|
-
</Workbook>`,
|
|
663
|
+
</Workbook>`, n;
|
|
707
664
|
}
|
|
708
|
-
function
|
|
709
|
-
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], {
|
|
710
667
|
type: "application/vnd.ms-excel;charset=utf-8;"
|
|
711
668
|
});
|
|
712
|
-
|
|
669
|
+
ee(n, t);
|
|
713
670
|
}
|
|
714
|
-
class
|
|
671
|
+
class vn extends x {
|
|
715
672
|
name = "export";
|
|
716
673
|
version = "1.0.0";
|
|
717
674
|
get defaultConfig() {
|
|
@@ -727,58 +684,58 @@ class Xt extends C {
|
|
|
727
684
|
lastExportInfo = null;
|
|
728
685
|
// ===== Private Methods =====
|
|
729
686
|
performExport(e, t) {
|
|
730
|
-
const
|
|
687
|
+
const n = this.config, o = {
|
|
731
688
|
format: e,
|
|
732
|
-
fileName: t?.fileName ??
|
|
733
|
-
includeHeaders: t?.includeHeaders ??
|
|
689
|
+
fileName: t?.fileName ?? n.fileName ?? "export",
|
|
690
|
+
includeHeaders: t?.includeHeaders ?? n.includeHeaders,
|
|
734
691
|
processCell: t?.processCell,
|
|
735
692
|
processHeader: t?.processHeader,
|
|
736
693
|
columns: t?.columns,
|
|
737
694
|
rowIndices: t?.rowIndices
|
|
738
695
|
};
|
|
739
696
|
let i = [...this.columns];
|
|
740
|
-
if (
|
|
697
|
+
if (n.onlyVisible && (i = i.filter((a) => !a.hidden && !a.field.startsWith("__"))), t?.columns) {
|
|
741
698
|
const a = new Set(t.columns);
|
|
742
699
|
i = i.filter((d) => a.has(d.field));
|
|
743
700
|
}
|
|
744
|
-
let
|
|
745
|
-
if (
|
|
701
|
+
let s = [...this.rows];
|
|
702
|
+
if (n.onlySelected) {
|
|
746
703
|
const a = this.getSelectionState();
|
|
747
|
-
a?.selected?.size && (
|
|
704
|
+
a?.selected?.size && (s = [...a.selected].sort((c, u) => c - u).map((c) => this.rows[c]).filter(Boolean));
|
|
748
705
|
}
|
|
749
|
-
t?.rowIndices && (
|
|
750
|
-
let l =
|
|
706
|
+
t?.rowIndices && (s = t.rowIndices.map((a) => this.rows[a]).filter(Boolean)), this.isExportingFlag = !0;
|
|
707
|
+
let l = o.fileName;
|
|
751
708
|
try {
|
|
752
709
|
switch (e) {
|
|
753
710
|
case "csv": {
|
|
754
|
-
const a =
|
|
755
|
-
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);
|
|
756
713
|
break;
|
|
757
714
|
}
|
|
758
715
|
case "excel": {
|
|
759
|
-
const a =
|
|
760
|
-
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);
|
|
761
718
|
break;
|
|
762
719
|
}
|
|
763
720
|
case "json": {
|
|
764
|
-
const a =
|
|
721
|
+
const a = s.map((u) => {
|
|
765
722
|
const h = {};
|
|
766
|
-
for (const
|
|
767
|
-
let
|
|
768
|
-
|
|
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;
|
|
769
726
|
}
|
|
770
727
|
return h;
|
|
771
728
|
}), d = JSON.stringify(a, null, 2);
|
|
772
729
|
l = l.endsWith(".json") ? l : `${l}.json`;
|
|
773
730
|
const c = new Blob([d], { type: "application/json" });
|
|
774
|
-
|
|
731
|
+
ee(c, l);
|
|
775
732
|
break;
|
|
776
733
|
}
|
|
777
734
|
}
|
|
778
735
|
this.lastExportInfo = { format: e, timestamp: /* @__PURE__ */ new Date() }, this.emit("export-complete", {
|
|
779
736
|
format: e,
|
|
780
737
|
fileName: l,
|
|
781
|
-
rowCount:
|
|
738
|
+
rowCount: s.length,
|
|
782
739
|
columnCount: i.length
|
|
783
740
|
});
|
|
784
741
|
} finally {
|
|
@@ -829,69 +786,69 @@ class Xt extends C {
|
|
|
829
786
|
return this.lastExportInfo;
|
|
830
787
|
}
|
|
831
788
|
}
|
|
832
|
-
function
|
|
833
|
-
const { totalRows: e, viewportHeight: t, scrollTop:
|
|
834
|
-
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;
|
|
835
792
|
l < 0 && (l = 0);
|
|
836
|
-
let a = l +
|
|
837
|
-
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)), {
|
|
838
795
|
start: l,
|
|
839
796
|
end: a,
|
|
840
|
-
offsetY: l *
|
|
841
|
-
totalHeight: e *
|
|
797
|
+
offsetY: l * o,
|
|
798
|
+
totalHeight: e * o
|
|
842
799
|
};
|
|
843
800
|
}
|
|
844
|
-
function
|
|
845
|
-
return
|
|
801
|
+
function Je(r, e) {
|
|
802
|
+
return r <= e;
|
|
846
803
|
}
|
|
847
|
-
function
|
|
848
|
-
const
|
|
804
|
+
function Qe(r, e, t = !1) {
|
|
805
|
+
const n = r[e.field];
|
|
849
806
|
if (e.operator === "blank")
|
|
850
|
-
return
|
|
807
|
+
return n == null || n === "";
|
|
851
808
|
if (e.operator === "notBlank")
|
|
852
|
-
return
|
|
853
|
-
if (
|
|
854
|
-
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();
|
|
855
812
|
switch (e.operator) {
|
|
856
813
|
// Text operators
|
|
857
814
|
case "contains":
|
|
858
|
-
return i.includes(
|
|
815
|
+
return i.includes(s);
|
|
859
816
|
case "notContains":
|
|
860
|
-
return !i.includes(
|
|
817
|
+
return !i.includes(s);
|
|
861
818
|
case "equals":
|
|
862
|
-
return i ===
|
|
819
|
+
return i === s;
|
|
863
820
|
case "notEquals":
|
|
864
|
-
return i !==
|
|
821
|
+
return i !== s;
|
|
865
822
|
case "startsWith":
|
|
866
|
-
return i.startsWith(
|
|
823
|
+
return i.startsWith(s);
|
|
867
824
|
case "endsWith":
|
|
868
|
-
return i.endsWith(
|
|
825
|
+
return i.endsWith(s);
|
|
869
826
|
// Number/Date operators (use raw numeric values)
|
|
870
827
|
case "lessThan":
|
|
871
|
-
return Number(
|
|
828
|
+
return Number(n) < Number(e.value);
|
|
872
829
|
case "lessThanOrEqual":
|
|
873
|
-
return Number(
|
|
830
|
+
return Number(n) <= Number(e.value);
|
|
874
831
|
case "greaterThan":
|
|
875
|
-
return Number(
|
|
832
|
+
return Number(n) > Number(e.value);
|
|
876
833
|
case "greaterThanOrEqual":
|
|
877
|
-
return Number(
|
|
834
|
+
return Number(n) >= Number(e.value);
|
|
878
835
|
case "between":
|
|
879
|
-
return Number(
|
|
836
|
+
return Number(n) >= Number(e.value) && Number(n) <= Number(e.valueTo);
|
|
880
837
|
// Set operators
|
|
881
838
|
case "in":
|
|
882
|
-
return Array.isArray(e.value) && e.value.includes(
|
|
839
|
+
return Array.isArray(e.value) && e.value.includes(n);
|
|
883
840
|
case "notIn":
|
|
884
|
-
return Array.isArray(e.value) && !e.value.includes(
|
|
841
|
+
return Array.isArray(e.value) && !e.value.includes(n);
|
|
885
842
|
default:
|
|
886
843
|
return !0;
|
|
887
844
|
}
|
|
888
845
|
}
|
|
889
|
-
function
|
|
890
|
-
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;
|
|
891
848
|
}
|
|
892
|
-
function
|
|
849
|
+
function tt(r) {
|
|
893
850
|
return JSON.stringify(
|
|
894
|
-
|
|
851
|
+
r.map((e) => ({
|
|
895
852
|
field: e.field,
|
|
896
853
|
operator: e.operator,
|
|
897
854
|
value: e.value,
|
|
@@ -899,15 +856,15 @@ function ze(s) {
|
|
|
899
856
|
}))
|
|
900
857
|
);
|
|
901
858
|
}
|
|
902
|
-
function
|
|
859
|
+
function me(r, e) {
|
|
903
860
|
const t = /* @__PURE__ */ new Set();
|
|
904
|
-
for (const
|
|
905
|
-
const
|
|
906
|
-
|
|
861
|
+
for (const n of r) {
|
|
862
|
+
const o = n[e];
|
|
863
|
+
o != null && t.add(o);
|
|
907
864
|
}
|
|
908
|
-
return [...t].sort((
|
|
865
|
+
return [...t].sort((n, o) => typeof n == "number" && typeof o == "number" ? n - o : String(n).localeCompare(String(o)));
|
|
909
866
|
}
|
|
910
|
-
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 = `
|
|
911
868
|
.tbw-filter-panel {
|
|
912
869
|
position: fixed;
|
|
913
870
|
background: var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));
|
|
@@ -1049,7 +1006,7 @@ const We = '.header-cell.filtered:before{content:"";position:absolute;top:4px;ri
|
|
|
1049
1006
|
background: var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)));
|
|
1050
1007
|
}
|
|
1051
1008
|
`;
|
|
1052
|
-
class
|
|
1009
|
+
class A extends x {
|
|
1053
1010
|
name = "filtering";
|
|
1054
1011
|
version = "1.0.0";
|
|
1055
1012
|
get defaultConfig() {
|
|
@@ -1087,26 +1044,26 @@ class k extends C {
|
|
|
1087
1044
|
processRows(e) {
|
|
1088
1045
|
const t = [...this.filters.values()];
|
|
1089
1046
|
if (!t.length) return [...e];
|
|
1090
|
-
const
|
|
1091
|
-
if (this.cacheKey ===
|
|
1047
|
+
const n = tt(t);
|
|
1048
|
+
if (this.cacheKey === n && this.cachedResult)
|
|
1092
1049
|
return this.cachedResult;
|
|
1093
|
-
const
|
|
1094
|
-
return this.cachedResult =
|
|
1050
|
+
const o = et([...e], t, this.config.caseSensitive);
|
|
1051
|
+
return this.cachedResult = o, this.cacheKey = n, o;
|
|
1095
1052
|
}
|
|
1096
1053
|
afterRender() {
|
|
1097
1054
|
const e = this.shadowRoot;
|
|
1098
1055
|
if (!e) return;
|
|
1099
|
-
e.querySelectorAll('[part~="header-cell"]').forEach((
|
|
1100
|
-
const
|
|
1101
|
-
if (
|
|
1102
|
-
const i = this.columns[parseInt(
|
|
1103
|
-
if (!i || i.filterable === !1 ||
|
|
1104
|
-
const
|
|
1105
|
-
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;
|
|
1106
1063
|
const l = document.createElement("button");
|
|
1107
|
-
l.className = "tbw-filter-btn", l.setAttribute("aria-label", `Filter ${i.header ??
|
|
1108
|
-
a.stopPropagation(), this.toggleFilterPanel(
|
|
1109
|
-
}),
|
|
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);
|
|
1110
1067
|
});
|
|
1111
1068
|
}
|
|
1112
1069
|
// ===== Public API =====
|
|
@@ -1192,7 +1149,7 @@ class k extends C {
|
|
|
1192
1149
|
* Uses sourceRows to include all values regardless of current filter.
|
|
1193
1150
|
*/
|
|
1194
1151
|
getUniqueValues(e) {
|
|
1195
|
-
return
|
|
1152
|
+
return me(this.sourceRows, e);
|
|
1196
1153
|
}
|
|
1197
1154
|
// ===== Private Methods =====
|
|
1198
1155
|
/**
|
|
@@ -1205,27 +1162,27 @@ class k extends C {
|
|
|
1205
1162
|
return;
|
|
1206
1163
|
}
|
|
1207
1164
|
const e = document.createElement("style");
|
|
1208
|
-
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;
|
|
1209
1166
|
}
|
|
1210
1167
|
/**
|
|
1211
1168
|
* Toggle the filter panel for a field
|
|
1212
1169
|
*/
|
|
1213
|
-
toggleFilterPanel(e, t,
|
|
1170
|
+
toggleFilterPanel(e, t, n) {
|
|
1214
1171
|
if (this.openPanelField === e) {
|
|
1215
1172
|
this.closeFilterPanel();
|
|
1216
1173
|
return;
|
|
1217
1174
|
}
|
|
1218
1175
|
this.closeFilterPanel();
|
|
1219
|
-
const
|
|
1220
|
-
|
|
1221
|
-
const i =
|
|
1222
|
-
let
|
|
1223
|
-
|
|
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));
|
|
1224
1181
|
const l = this.searchText.get(e) ?? "", a = {
|
|
1225
1182
|
field: e,
|
|
1226
1183
|
column: t,
|
|
1227
1184
|
uniqueValues: i,
|
|
1228
|
-
excludedValues:
|
|
1185
|
+
excludedValues: s,
|
|
1229
1186
|
searchText: l,
|
|
1230
1187
|
applySetFilter: (c) => {
|
|
1231
1188
|
this.applySetFilter(e, c), this.closeFilterPanel();
|
|
@@ -1239,11 +1196,11 @@ class k extends C {
|
|
|
1239
1196
|
closePanel: () => this.closeFilterPanel()
|
|
1240
1197
|
};
|
|
1241
1198
|
let d = !1;
|
|
1242
|
-
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(() => {
|
|
1243
1200
|
document.addEventListener(
|
|
1244
1201
|
"click",
|
|
1245
1202
|
(c) => {
|
|
1246
|
-
!
|
|
1203
|
+
!o.contains(c.target) && c.target !== n && this.closeFilterPanel();
|
|
1247
1204
|
},
|
|
1248
1205
|
{ signal: this.panelAbortController?.signal }
|
|
1249
1206
|
);
|
|
@@ -1259,20 +1216,20 @@ class k extends C {
|
|
|
1259
1216
|
* Position the panel below the button
|
|
1260
1217
|
*/
|
|
1261
1218
|
positionPanel(e, t) {
|
|
1262
|
-
const
|
|
1263
|
-
e.style.position = "fixed", e.style.top = `${
|
|
1264
|
-
const
|
|
1265
|
-
|
|
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`);
|
|
1266
1223
|
});
|
|
1267
1224
|
}
|
|
1268
1225
|
/**
|
|
1269
1226
|
* Render the default filter panel content
|
|
1270
1227
|
*/
|
|
1271
|
-
renderDefaultFilterPanel(e, t,
|
|
1272
|
-
const { field: i } = t,
|
|
1273
|
-
|
|
1228
|
+
renderDefaultFilterPanel(e, t, n, o) {
|
|
1229
|
+
const { field: i } = t, s = document.createElement("div");
|
|
1230
|
+
s.className = "tbw-filter-search";
|
|
1274
1231
|
const l = document.createElement("input");
|
|
1275
|
-
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);
|
|
1276
1233
|
const a = document.createElement("div");
|
|
1277
1234
|
a.className = "tbw-filter-actions";
|
|
1278
1235
|
const d = document.createElement("label");
|
|
@@ -1282,99 +1239,99 @@ class k extends C {
|
|
|
1282
1239
|
const u = document.createElement("span");
|
|
1283
1240
|
u.textContent = "Select All", d.appendChild(c), d.appendChild(u), a.appendChild(d);
|
|
1284
1241
|
const h = () => {
|
|
1285
|
-
const
|
|
1286
|
-
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;
|
|
1287
1244
|
};
|
|
1288
1245
|
c.addEventListener("change", () => {
|
|
1289
|
-
const
|
|
1290
|
-
for (const
|
|
1291
|
-
|
|
1292
|
-
h(),
|
|
1246
|
+
const b = c.checked;
|
|
1247
|
+
for (const y of m.keys())
|
|
1248
|
+
m.set(y, b);
|
|
1249
|
+
h(), K();
|
|
1293
1250
|
}), e.appendChild(a);
|
|
1294
|
-
const p = document.createElement("div");
|
|
1295
|
-
p.className = "tbw-filter-values";
|
|
1296
1251
|
const g = document.createElement("div");
|
|
1297
|
-
g.className = "tbw-filter-values
|
|
1298
|
-
const
|
|
1299
|
-
|
|
1300
|
-
const
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
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));
|
|
1304
1261
|
}), h();
|
|
1305
|
-
let
|
|
1306
|
-
const
|
|
1307
|
-
const
|
|
1308
|
-
|
|
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";
|
|
1309
1266
|
const S = document.createElement("input");
|
|
1310
|
-
S.type = "checkbox", S.className = "tbw-filter-checkbox", S.checked =
|
|
1311
|
-
|
|
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();
|
|
1312
1269
|
});
|
|
1313
|
-
const
|
|
1314
|
-
return
|
|
1315
|
-
},
|
|
1316
|
-
const
|
|
1317
|
-
if (
|
|
1318
|
-
|
|
1319
|
-
|
|
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));
|
|
1320
1277
|
});
|
|
1321
1278
|
return;
|
|
1322
1279
|
}
|
|
1323
|
-
const
|
|
1324
|
-
totalRows:
|
|
1325
|
-
viewportHeight:
|
|
1326
|
-
scrollTop:
|
|
1327
|
-
rowHeight:
|
|
1328
|
-
overscan:
|
|
1280
|
+
const C = Xe({
|
|
1281
|
+
totalRows: b,
|
|
1282
|
+
viewportHeight: y,
|
|
1283
|
+
scrollTop: R,
|
|
1284
|
+
rowHeight: A.LIST_ITEM_HEIGHT,
|
|
1285
|
+
overscan: A.LIST_OVERSCAN
|
|
1329
1286
|
});
|
|
1330
|
-
|
|
1331
|
-
for (let
|
|
1332
|
-
|
|
1333
|
-
},
|
|
1334
|
-
const
|
|
1335
|
-
if (
|
|
1336
|
-
const
|
|
1337
|
-
return !
|
|
1338
|
-
}),
|
|
1339
|
-
|
|
1340
|
-
const
|
|
1341
|
-
|
|
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);
|
|
1342
1299
|
return;
|
|
1343
1300
|
}
|
|
1344
|
-
|
|
1301
|
+
K();
|
|
1345
1302
|
};
|
|
1346
|
-
|
|
1303
|
+
g.addEventListener(
|
|
1347
1304
|
"scroll",
|
|
1348
1305
|
() => {
|
|
1349
|
-
|
|
1306
|
+
w.length > 0 && K();
|
|
1350
1307
|
},
|
|
1351
1308
|
{ passive: !0 }
|
|
1352
|
-
),
|
|
1353
|
-
let
|
|
1309
|
+
), oe(l.value), e.appendChild(g);
|
|
1310
|
+
let ie;
|
|
1354
1311
|
l.addEventListener("input", () => {
|
|
1355
|
-
clearTimeout(
|
|
1356
|
-
this.searchText.set(i, l.value),
|
|
1312
|
+
clearTimeout(ie), ie = setTimeout(() => {
|
|
1313
|
+
this.searchText.set(i, l.value), oe(l.value);
|
|
1357
1314
|
}, this.config.debounceMs ?? 150);
|
|
1358
1315
|
});
|
|
1359
|
-
const
|
|
1360
|
-
|
|
1361
|
-
const
|
|
1362
|
-
|
|
1363
|
-
const
|
|
1364
|
-
for (const [
|
|
1365
|
-
if (!
|
|
1366
|
-
if (
|
|
1367
|
-
|
|
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);
|
|
1368
1325
|
else {
|
|
1369
|
-
const
|
|
1370
|
-
|
|
1326
|
+
const C = n.find((v) => String(v) === y);
|
|
1327
|
+
b.push(C !== void 0 ? C : y);
|
|
1371
1328
|
}
|
|
1372
|
-
t.applySetFilter(
|
|
1373
|
-
}),
|
|
1374
|
-
const
|
|
1375
|
-
|
|
1329
|
+
t.applySetFilter(b);
|
|
1330
|
+
}), M.appendChild(N);
|
|
1331
|
+
const P = document.createElement("button");
|
|
1332
|
+
P.className = "tbw-filter-clear-btn", P.textContent = "Clear Filter", P.addEventListener("click", () => {
|
|
1376
1333
|
t.clearFilter();
|
|
1377
|
-
}),
|
|
1334
|
+
}), M.appendChild(P), e.appendChild(M);
|
|
1378
1335
|
}
|
|
1379
1336
|
/**
|
|
1380
1337
|
* Apply a set filter (exclude values)
|
|
@@ -1393,13 +1350,13 @@ class k extends C {
|
|
|
1393
1350
|
/**
|
|
1394
1351
|
* Apply a text filter
|
|
1395
1352
|
*/
|
|
1396
|
-
applyTextFilter(e, t,
|
|
1353
|
+
applyTextFilter(e, t, n, o) {
|
|
1397
1354
|
this.filters.set(e, {
|
|
1398
1355
|
field: e,
|
|
1399
1356
|
type: "text",
|
|
1400
1357
|
operator: t,
|
|
1401
|
-
value:
|
|
1402
|
-
valueTo:
|
|
1358
|
+
value: n,
|
|
1359
|
+
valueTo: o
|
|
1403
1360
|
}), this.cachedResult = null, this.cacheKey = null, this.emit("filter-change", {
|
|
1404
1361
|
filters: [...this.filters.values()],
|
|
1405
1362
|
filteredRowCount: 0
|
|
@@ -1429,43 +1386,43 @@ class k extends C {
|
|
|
1429
1386
|
this.filters.delete(e);
|
|
1430
1387
|
return;
|
|
1431
1388
|
}
|
|
1432
|
-
const
|
|
1389
|
+
const n = {
|
|
1433
1390
|
field: e,
|
|
1434
1391
|
type: t.filter.type,
|
|
1435
1392
|
operator: t.filter.operator,
|
|
1436
1393
|
value: t.filter.value,
|
|
1437
1394
|
valueTo: t.filter.valueTo
|
|
1438
1395
|
};
|
|
1439
|
-
this.filters.set(e,
|
|
1396
|
+
this.filters.set(e, n), this.cachedResult = null, this.cacheKey = null;
|
|
1440
1397
|
}
|
|
1441
1398
|
// ===== Styles =====
|
|
1442
|
-
styles =
|
|
1399
|
+
styles = nt;
|
|
1443
1400
|
}
|
|
1444
|
-
function
|
|
1445
|
-
if (!
|
|
1446
|
-
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) => {
|
|
1447
1404
|
if (!l.length) return;
|
|
1448
1405
|
const a = t[t.length - 1];
|
|
1449
|
-
if (a && a.implicit && a.firstIndex + a.columns.length ===
|
|
1406
|
+
if (a && a.implicit && a.firstIndex + a.columns.length === s) {
|
|
1450
1407
|
a.columns.push(...l);
|
|
1451
1408
|
return;
|
|
1452
1409
|
}
|
|
1453
1410
|
t.push({
|
|
1454
|
-
id: "__implicit__" +
|
|
1411
|
+
id: "__implicit__" + s,
|
|
1455
1412
|
label: void 0,
|
|
1456
1413
|
columns: l,
|
|
1457
|
-
firstIndex:
|
|
1414
|
+
firstIndex: s,
|
|
1458
1415
|
implicit: !0
|
|
1459
1416
|
});
|
|
1460
1417
|
};
|
|
1461
|
-
let
|
|
1462
|
-
return
|
|
1463
|
-
const a =
|
|
1418
|
+
let o = [], i = 0;
|
|
1419
|
+
return r.forEach((s, l) => {
|
|
1420
|
+
const a = s.group;
|
|
1464
1421
|
if (!a) {
|
|
1465
|
-
|
|
1422
|
+
o.length === 0 && (i = l), o.push(s);
|
|
1466
1423
|
return;
|
|
1467
1424
|
}
|
|
1468
|
-
|
|
1425
|
+
o.length && (n(i, o.slice()), o = []);
|
|
1469
1426
|
const d = typeof a == "string" ? a : a.id;
|
|
1470
1427
|
let c = e.get(d);
|
|
1471
1428
|
c || (c = {
|
|
@@ -1473,40 +1430,40 @@ function je(s) {
|
|
|
1473
1430
|
label: typeof a == "string" ? void 0 : a.label,
|
|
1474
1431
|
columns: [],
|
|
1475
1432
|
firstIndex: l
|
|
1476
|
-
}, e.set(d, c), t.push(c)), c.columns.push(
|
|
1477
|
-
}),
|
|
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;
|
|
1478
1435
|
}
|
|
1479
|
-
function
|
|
1480
|
-
if (!e.length || !
|
|
1481
|
-
const
|
|
1436
|
+
function rt(r, e, t) {
|
|
1437
|
+
if (!e.length || !r) return;
|
|
1438
|
+
const n = /* @__PURE__ */ new Map();
|
|
1482
1439
|
for (const i of e)
|
|
1483
|
-
for (const
|
|
1484
|
-
|
|
1485
|
-
const
|
|
1486
|
-
|
|
1487
|
-
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);
|
|
1488
1445
|
l && (i.classList.add("grouped"), i.getAttribute("data-group") || i.setAttribute("data-group", l));
|
|
1489
1446
|
});
|
|
1490
1447
|
for (const i of e) {
|
|
1491
|
-
const
|
|
1448
|
+
const s = i.columns[i.columns.length - 1], l = o.find((a) => a.getAttribute("data-field") === s.field);
|
|
1492
1449
|
l && l.classList.add("group-end");
|
|
1493
1450
|
}
|
|
1494
1451
|
}
|
|
1495
|
-
function
|
|
1496
|
-
if (
|
|
1452
|
+
function st(r, e) {
|
|
1453
|
+
if (r.length === 0) return null;
|
|
1497
1454
|
const t = document.createElement("div");
|
|
1498
1455
|
t.className = "header-group-row", t.setAttribute("role", "row");
|
|
1499
|
-
for (const
|
|
1500
|
-
const
|
|
1501
|
-
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);
|
|
1502
1459
|
}
|
|
1503
1460
|
return t;
|
|
1504
1461
|
}
|
|
1505
|
-
function
|
|
1506
|
-
return
|
|
1462
|
+
function lt(r) {
|
|
1463
|
+
return r.some((e) => e.group != null);
|
|
1507
1464
|
}
|
|
1508
|
-
const
|
|
1509
|
-
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 {
|
|
1510
1467
|
name = "groupingColumns";
|
|
1511
1468
|
version = "1.0.0";
|
|
1512
1469
|
get defaultConfig() {
|
|
@@ -1526,31 +1483,31 @@ class Jt extends C {
|
|
|
1526
1483
|
* Auto-detect column groups from column configuration.
|
|
1527
1484
|
*/
|
|
1528
1485
|
static detect(e, t) {
|
|
1529
|
-
const
|
|
1530
|
-
return Array.isArray(
|
|
1486
|
+
const n = t?.columns;
|
|
1487
|
+
return Array.isArray(n) ? lt(n) : !1;
|
|
1531
1488
|
}
|
|
1532
1489
|
// ===== Hooks =====
|
|
1533
1490
|
processColumns(e) {
|
|
1534
|
-
const t =
|
|
1491
|
+
const t = it(e);
|
|
1535
1492
|
return t.length === 0 ? (this.isActive = !1, this.groups = [], [...e]) : (this.isActive = !0, this.groups = t, [...e]);
|
|
1536
1493
|
}
|
|
1537
1494
|
afterRender() {
|
|
1538
1495
|
if (!this.isActive || this.groups.length === 0) {
|
|
1539
|
-
const
|
|
1540
|
-
|
|
1496
|
+
const s = this.shadowRoot?.querySelector(".header")?.querySelector(".header-group-row");
|
|
1497
|
+
s && s.remove();
|
|
1541
1498
|
return;
|
|
1542
1499
|
}
|
|
1543
1500
|
const e = this.shadowRoot?.querySelector(".header");
|
|
1544
1501
|
if (!e) return;
|
|
1545
1502
|
const t = e.querySelector(".header-group-row");
|
|
1546
1503
|
t && t.remove();
|
|
1547
|
-
const
|
|
1548
|
-
if (
|
|
1504
|
+
const n = st(this.groups, this.columns);
|
|
1505
|
+
if (n) {
|
|
1549
1506
|
const i = e.querySelector(".header-row");
|
|
1550
|
-
i ? e.insertBefore(
|
|
1507
|
+
i ? e.insertBefore(n, i) : e.appendChild(n);
|
|
1551
1508
|
}
|
|
1552
|
-
const
|
|
1553
|
-
|
|
1509
|
+
const o = e.querySelector(".header-row");
|
|
1510
|
+
o && rt(o, this.groups, this.columns);
|
|
1554
1511
|
}
|
|
1555
1512
|
// ===== Public API =====
|
|
1556
1513
|
/**
|
|
@@ -1573,7 +1530,7 @@ class Jt extends C {
|
|
|
1573
1530
|
* @returns Array of columns in the group
|
|
1574
1531
|
*/
|
|
1575
1532
|
getGroupColumns(e) {
|
|
1576
|
-
const t = this.groups.find((
|
|
1533
|
+
const t = this.groups.find((n) => n.id === e);
|
|
1577
1534
|
return t ? t.columns : [];
|
|
1578
1535
|
}
|
|
1579
1536
|
/**
|
|
@@ -1583,27 +1540,27 @@ class Jt extends C {
|
|
|
1583
1540
|
this.requestRender();
|
|
1584
1541
|
}
|
|
1585
1542
|
// ===== Styles =====
|
|
1586
|
-
styles =
|
|
1543
|
+
styles = at;
|
|
1587
1544
|
}
|
|
1588
|
-
function
|
|
1589
|
-
const
|
|
1590
|
-
if (typeof
|
|
1545
|
+
function dt({ rows: r, config: e, expanded: t }) {
|
|
1546
|
+
const n = e.groupOn;
|
|
1547
|
+
if (typeof n != "function")
|
|
1591
1548
|
return [];
|
|
1592
|
-
const
|
|
1593
|
-
if (
|
|
1594
|
-
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);
|
|
1595
1552
|
a == null || a === !1 ? a = ["__ungrouped__"] : Array.isArray(a) || (a = [a]);
|
|
1596
|
-
let d =
|
|
1553
|
+
let d = o;
|
|
1597
1554
|
a.forEach((c, u) => {
|
|
1598
|
-
const h = c == null ? "∅" : String(c),
|
|
1599
|
-
let
|
|
1600
|
-
|
|
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;
|
|
1601
1558
|
}), d.rows.push(l);
|
|
1602
|
-
}),
|
|
1559
|
+
}), o.children.size === 1 && o.children.has("__ungrouped__") && o.children.get("__ungrouped__").rows.length === r.length)
|
|
1603
1560
|
return [];
|
|
1604
|
-
const i = [],
|
|
1605
|
-
if (l ===
|
|
1606
|
-
l.children.forEach((d) =>
|
|
1561
|
+
const i = [], s = (l) => {
|
|
1562
|
+
if (l === o) {
|
|
1563
|
+
l.children.forEach((d) => s(d));
|
|
1607
1564
|
return;
|
|
1608
1565
|
}
|
|
1609
1566
|
const a = t.has(l.key);
|
|
@@ -1614,28 +1571,28 @@ function Je({ rows: s, config: e, expanded: t }) {
|
|
|
1614
1571
|
depth: l.depth,
|
|
1615
1572
|
rows: l.rows,
|
|
1616
1573
|
expanded: a
|
|
1617
|
-
}), 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) })));
|
|
1618
1575
|
};
|
|
1619
|
-
return
|
|
1576
|
+
return s(o), i;
|
|
1620
1577
|
}
|
|
1621
|
-
function
|
|
1622
|
-
const t = new Set(
|
|
1578
|
+
function ct(r, e) {
|
|
1579
|
+
const t = new Set(r);
|
|
1623
1580
|
return t.has(e) ? t.delete(e) : t.add(e), t;
|
|
1624
1581
|
}
|
|
1625
|
-
function
|
|
1582
|
+
function ut(r) {
|
|
1626
1583
|
const e = /* @__PURE__ */ new Set();
|
|
1627
|
-
for (const t of
|
|
1584
|
+
for (const t of r)
|
|
1628
1585
|
t.kind === "group" && e.add(t.key);
|
|
1629
1586
|
return e;
|
|
1630
1587
|
}
|
|
1631
|
-
function
|
|
1588
|
+
function ht() {
|
|
1632
1589
|
return /* @__PURE__ */ new Set();
|
|
1633
1590
|
}
|
|
1634
|
-
function
|
|
1635
|
-
return
|
|
1591
|
+
function gt(r) {
|
|
1592
|
+
return r.kind !== "group" ? 0 : r.rows.length;
|
|
1636
1593
|
}
|
|
1637
|
-
const
|
|
1638
|
-
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 {
|
|
1639
1596
|
name = "groupingRows";
|
|
1640
1597
|
version = "1.0.0";
|
|
1641
1598
|
get defaultConfig() {
|
|
@@ -1666,20 +1623,20 @@ class Qt extends C {
|
|
|
1666
1623
|
const t = this.config;
|
|
1667
1624
|
if (typeof t.groupOn != "function")
|
|
1668
1625
|
return this.isActive = !1, this.flattenedRows = [], [...e];
|
|
1669
|
-
const
|
|
1626
|
+
const n = dt({
|
|
1670
1627
|
rows: e,
|
|
1671
1628
|
config: t,
|
|
1672
1629
|
expanded: this.expandedKeys
|
|
1673
1630
|
});
|
|
1674
|
-
return
|
|
1631
|
+
return n.length === 0 ? (this.isActive = !1, this.flattenedRows = [], [...e]) : (this.isActive = !0, this.flattenedRows = n, n.map((o) => o.kind === "group" ? {
|
|
1675
1632
|
__isGroupRow: !0,
|
|
1676
|
-
__groupKey:
|
|
1677
|
-
__groupValue:
|
|
1678
|
-
__groupDepth:
|
|
1679
|
-
__groupRows:
|
|
1680
|
-
__groupExpanded:
|
|
1681
|
-
__groupRowCount:
|
|
1682
|
-
} :
|
|
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));
|
|
1683
1640
|
}
|
|
1684
1641
|
onCellClick(e) {
|
|
1685
1642
|
const t = e.row;
|
|
@@ -1689,14 +1646,14 @@ class Qt extends C {
|
|
|
1689
1646
|
/**
|
|
1690
1647
|
* Render a row. Returns true if we handled the row (group row), false otherwise.
|
|
1691
1648
|
*/
|
|
1692
|
-
renderRow(e, t,
|
|
1649
|
+
renderRow(e, t, n) {
|
|
1693
1650
|
if (!e?.__isGroupRow)
|
|
1694
1651
|
return !1;
|
|
1695
|
-
const
|
|
1696
|
-
if (
|
|
1652
|
+
const o = this.config;
|
|
1653
|
+
if (o.groupRowRenderer) {
|
|
1697
1654
|
const l = () => {
|
|
1698
1655
|
this.toggle(e.__groupKey);
|
|
1699
|
-
}, a =
|
|
1656
|
+
}, a = o.groupRowRenderer({
|
|
1700
1657
|
key: e.__groupKey,
|
|
1701
1658
|
value: e.__groupValue,
|
|
1702
1659
|
depth: e.__groupDepth,
|
|
@@ -1710,53 +1667,53 @@ class Qt extends C {
|
|
|
1710
1667
|
const i = () => {
|
|
1711
1668
|
this.toggle(e.__groupKey);
|
|
1712
1669
|
};
|
|
1713
|
-
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;
|
|
1714
1671
|
}
|
|
1715
1672
|
afterRender() {
|
|
1716
1673
|
}
|
|
1717
1674
|
// ===== Private Rendering Helpers =====
|
|
1718
|
-
renderFullWidthGroupRow(e, t,
|
|
1719
|
-
const
|
|
1675
|
+
renderFullWidthGroupRow(e, t, n) {
|
|
1676
|
+
const o = this.config, i = document.createElement("div");
|
|
1720
1677
|
i.className = "cell group-full", i.style.gridColumn = "1 / -1", i.setAttribute("role", "gridcell");
|
|
1721
|
-
const
|
|
1722
|
-
|
|
1723
|
-
d.stopPropagation(),
|
|
1724
|
-
}), 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);
|
|
1725
1682
|
const l = document.createElement("span");
|
|
1726
1683
|
l.className = "group-label";
|
|
1727
|
-
const a =
|
|
1728
|
-
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) {
|
|
1729
1686
|
const d = document.createElement("span");
|
|
1730
1687
|
d.className = "group-count", d.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, i.appendChild(d);
|
|
1731
1688
|
}
|
|
1732
1689
|
t.appendChild(i);
|
|
1733
1690
|
}
|
|
1734
|
-
renderPerColumnGroupRow(e, t,
|
|
1735
|
-
const
|
|
1736
|
-
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) => {
|
|
1737
1694
|
const h = document.createElement("div");
|
|
1738
1695
|
if (h.className = "cell group-cell", h.setAttribute("data-col", String(u)), h.setAttribute("role", "gridcell"), u === 0) {
|
|
1739
|
-
const
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
}), h.appendChild(
|
|
1743
|
-
const
|
|
1744
|
-
if (
|
|
1745
|
-
const
|
|
1746
|
-
|
|
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);
|
|
1747
1704
|
} else {
|
|
1748
|
-
const
|
|
1749
|
-
|
|
1705
|
+
const m = o.formatLabel ? o.formatLabel(e.__groupValue, e.__groupDepth || 0, e.__groupKey) : String(e.__groupValue);
|
|
1706
|
+
p.textContent = m;
|
|
1750
1707
|
}
|
|
1751
|
-
if (h.appendChild(
|
|
1752
|
-
const
|
|
1753
|
-
|
|
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);
|
|
1754
1711
|
}
|
|
1755
1712
|
} else {
|
|
1756
|
-
const
|
|
1757
|
-
if (
|
|
1758
|
-
const
|
|
1759
|
-
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) : "";
|
|
1760
1717
|
} else
|
|
1761
1718
|
h.textContent = "";
|
|
1762
1719
|
}
|
|
@@ -1768,21 +1725,21 @@ class Qt extends C {
|
|
|
1768
1725
|
* Expand all groups.
|
|
1769
1726
|
*/
|
|
1770
1727
|
expandAll() {
|
|
1771
|
-
this.expandedKeys =
|
|
1728
|
+
this.expandedKeys = ut(this.flattenedRows), this.requestRender();
|
|
1772
1729
|
}
|
|
1773
1730
|
/**
|
|
1774
1731
|
* Collapse all groups.
|
|
1775
1732
|
*/
|
|
1776
1733
|
collapseAll() {
|
|
1777
|
-
this.expandedKeys =
|
|
1734
|
+
this.expandedKeys = ht(), this.requestRender();
|
|
1778
1735
|
}
|
|
1779
1736
|
/**
|
|
1780
1737
|
* Toggle expansion of a specific group.
|
|
1781
1738
|
* @param key - The group key to toggle
|
|
1782
1739
|
*/
|
|
1783
1740
|
toggle(e) {
|
|
1784
|
-
this.expandedKeys =
|
|
1785
|
-
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);
|
|
1786
1743
|
this.emit("group-toggle", {
|
|
1787
1744
|
key: e,
|
|
1788
1745
|
expanded: this.expandedKeys.has(e),
|
|
@@ -1871,33 +1828,33 @@ class Qt extends C {
|
|
|
1871
1828
|
this.config.groupOn = e, this.requestRender();
|
|
1872
1829
|
}
|
|
1873
1830
|
// ===== Styles =====
|
|
1874
|
-
styles =
|
|
1831
|
+
styles = pt;
|
|
1875
1832
|
}
|
|
1876
|
-
function
|
|
1877
|
-
const t = new Set(
|
|
1833
|
+
function z(r, e) {
|
|
1834
|
+
const t = new Set(r);
|
|
1878
1835
|
return t.has(e) ? t.delete(e) : t.add(e), t;
|
|
1879
1836
|
}
|
|
1880
|
-
function
|
|
1881
|
-
const t = new Set(
|
|
1837
|
+
function ft(r, e) {
|
|
1838
|
+
const t = new Set(r);
|
|
1882
1839
|
return t.add(e), t;
|
|
1883
1840
|
}
|
|
1884
|
-
function
|
|
1885
|
-
const t = new Set(
|
|
1841
|
+
function mt(r, e) {
|
|
1842
|
+
const t = new Set(r);
|
|
1886
1843
|
return t.delete(e), t;
|
|
1887
1844
|
}
|
|
1888
|
-
function
|
|
1889
|
-
return
|
|
1845
|
+
function wt(r, e) {
|
|
1846
|
+
return r.has(e);
|
|
1890
1847
|
}
|
|
1891
|
-
function
|
|
1892
|
-
const
|
|
1893
|
-
|
|
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");
|
|
1894
1851
|
const i = document.createElement("div");
|
|
1895
|
-
i.className = "master-detail-cell", i.setAttribute("role", "cell"), i.style.gridColumn = `1 / ${
|
|
1896
|
-
const
|
|
1897
|
-
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;
|
|
1898
1855
|
}
|
|
1899
|
-
const
|
|
1900
|
-
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 {
|
|
1901
1858
|
name = "masterDetail";
|
|
1902
1859
|
version = "1.0.0";
|
|
1903
1860
|
get defaultConfig() {
|
|
@@ -1921,82 +1878,82 @@ class eo extends C {
|
|
|
1921
1878
|
return [...e];
|
|
1922
1879
|
const t = [...e];
|
|
1923
1880
|
if (t.length > 0) {
|
|
1924
|
-
const
|
|
1925
|
-
if (
|
|
1881
|
+
const n = { ...t[0] }, o = n.viewRenderer;
|
|
1882
|
+
if (o?.__masterDetailWrapped)
|
|
1926
1883
|
return t;
|
|
1927
|
-
const i = (
|
|
1928
|
-
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");
|
|
1929
1886
|
c.className = "master-detail-cell-wrapper";
|
|
1930
1887
|
const u = document.createElement("span");
|
|
1931
|
-
u.className = "master-detail-toggle", this.setIcon(u, this.resolveIcon(d ? "collapse" : "expand")), u.setAttribute("aria-expanded", String(d)), u.setAttribute("aria-label", d ? "Collapse details" : "Expand details"), u.addEventListener("click", (
|
|
1932
|
-
|
|
1933
|
-
const
|
|
1934
|
-
this.expandedRows =
|
|
1935
|
-
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,
|
|
1936
1893
|
row: a,
|
|
1937
1894
|
expanded: this.expandedRows.has(a)
|
|
1938
1895
|
}), this.requestRender();
|
|
1939
1896
|
}), c.appendChild(u);
|
|
1940
1897
|
const h = document.createElement("span");
|
|
1941
|
-
if (
|
|
1942
|
-
const
|
|
1943
|
-
|
|
1898
|
+
if (o) {
|
|
1899
|
+
const g = o(s);
|
|
1900
|
+
g instanceof Node ? h.appendChild(g) : h.textContent = String(g ?? l ?? "");
|
|
1944
1901
|
} else
|
|
1945
1902
|
h.textContent = String(l ?? "");
|
|
1946
1903
|
return c.appendChild(h), c;
|
|
1947
1904
|
};
|
|
1948
|
-
i.__masterDetailWrapped = !0,
|
|
1905
|
+
i.__masterDetailWrapped = !0, n.viewRenderer = i, t[0] = n;
|
|
1949
1906
|
}
|
|
1950
1907
|
return t;
|
|
1951
1908
|
}
|
|
1952
1909
|
onRowClick(e) {
|
|
1953
1910
|
if (!(!this.config.expandOnRowClick || !this.config.detailRenderer))
|
|
1954
|
-
return this.expandedRows =
|
|
1911
|
+
return this.expandedRows = z(this.expandedRows, e.row), this.emit("detail-expand", {
|
|
1955
1912
|
rowIndex: e.rowIndex,
|
|
1956
1913
|
row: e.row,
|
|
1957
1914
|
expanded: this.expandedRows.has(e.row)
|
|
1958
1915
|
}), this.requestRender(), !1;
|
|
1959
1916
|
}
|
|
1960
1917
|
onCellClick() {
|
|
1961
|
-
this.expandedRows.size > 0 && queueMicrotask(() => this.#
|
|
1918
|
+
this.expandedRows.size > 0 && queueMicrotask(() => this.#t());
|
|
1962
1919
|
}
|
|
1963
1920
|
afterRender() {
|
|
1964
|
-
this.#
|
|
1921
|
+
this.#t();
|
|
1965
1922
|
}
|
|
1966
1923
|
/**
|
|
1967
1924
|
* Called on scroll to sync detail elements with visible rows.
|
|
1968
1925
|
* Removes details for rows that scrolled out of view and reattaches for visible rows.
|
|
1969
1926
|
*/
|
|
1970
1927
|
onScrollRender() {
|
|
1971
|
-
!this.config.detailRenderer || this.expandedRows.size === 0 || this.#
|
|
1928
|
+
!this.config.detailRenderer || this.expandedRows.size === 0 || this.#t();
|
|
1972
1929
|
}
|
|
1973
1930
|
/**
|
|
1974
1931
|
* Full sync of detail rows - cleans up stale elements and creates new ones.
|
|
1975
1932
|
* Detail rows are inserted as siblings AFTER their master row to survive row rebuilds.
|
|
1976
1933
|
*/
|
|
1977
|
-
#
|
|
1934
|
+
#t() {
|
|
1978
1935
|
if (!this.config.detailRenderer) return;
|
|
1979
1936
|
const e = this.shadowRoot?.querySelector(".rows");
|
|
1980
1937
|
if (!e) return;
|
|
1981
|
-
const t = /* @__PURE__ */ new Map(),
|
|
1982
|
-
for (const
|
|
1983
|
-
const l =
|
|
1984
|
-
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);
|
|
1985
1942
|
}
|
|
1986
1943
|
const i = e.querySelectorAll(".master-detail-row");
|
|
1987
|
-
for (const
|
|
1988
|
-
const l = parseInt(
|
|
1989
|
-
(!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));
|
|
1990
1947
|
}
|
|
1991
|
-
for (const [
|
|
1992
|
-
const a = this.rows[
|
|
1948
|
+
for (const [s, l] of t) {
|
|
1949
|
+
const a = this.rows[s];
|
|
1993
1950
|
if (!a || !this.expandedRows.has(a)) continue;
|
|
1994
1951
|
const d = this.detailElements.get(a);
|
|
1995
1952
|
if (d) {
|
|
1996
1953
|
d.previousElementSibling !== l && l.after(d);
|
|
1997
1954
|
continue;
|
|
1998
1955
|
}
|
|
1999
|
-
const c =
|
|
1956
|
+
const c = bt(a, s, this.config.detailRenderer, o);
|
|
2000
1957
|
typeof this.config.detailHeight == "number" && (c.style.height = `${this.config.detailHeight}px`), l.after(c), this.detailElements.set(a, c);
|
|
2001
1958
|
}
|
|
2002
1959
|
}
|
|
@@ -2007,12 +1964,12 @@ class eo extends C {
|
|
|
2007
1964
|
getExtraHeight() {
|
|
2008
1965
|
let e = 0;
|
|
2009
1966
|
for (const t of this.expandedRows) {
|
|
2010
|
-
const
|
|
2011
|
-
if (
|
|
2012
|
-
e +=
|
|
1967
|
+
const n = this.detailElements.get(t);
|
|
1968
|
+
if (n)
|
|
1969
|
+
e += n.offsetHeight;
|
|
2013
1970
|
else {
|
|
2014
|
-
const
|
|
2015
|
-
e += typeof
|
|
1971
|
+
const o = this.config?.detailHeight;
|
|
1972
|
+
e += typeof o == "number" ? o : 150;
|
|
2016
1973
|
}
|
|
2017
1974
|
}
|
|
2018
1975
|
return e;
|
|
@@ -2023,15 +1980,15 @@ class eo extends C {
|
|
|
2023
1980
|
*/
|
|
2024
1981
|
getExtraHeightBefore(e) {
|
|
2025
1982
|
let t = 0;
|
|
2026
|
-
for (const
|
|
2027
|
-
const
|
|
2028
|
-
if (
|
|
2029
|
-
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);
|
|
2030
1987
|
if (i)
|
|
2031
1988
|
t += i.offsetHeight;
|
|
2032
1989
|
else {
|
|
2033
|
-
const
|
|
2034
|
-
t += typeof
|
|
1990
|
+
const s = this.config?.detailHeight;
|
|
1991
|
+
t += typeof s == "number" ? s : 150;
|
|
2035
1992
|
}
|
|
2036
1993
|
}
|
|
2037
1994
|
}
|
|
@@ -2041,18 +1998,18 @@ class eo extends C {
|
|
|
2041
1998
|
* Adjust the virtualization start index to keep expanded row visible while its detail is visible.
|
|
2042
1999
|
* This ensures the detail scrolls smoothly out of view instead of disappearing abruptly.
|
|
2043
2000
|
*/
|
|
2044
|
-
adjustVirtualStart(e, t,
|
|
2001
|
+
adjustVirtualStart(e, t, n) {
|
|
2045
2002
|
if (this.expandedRows.size === 0) return e;
|
|
2046
|
-
const
|
|
2003
|
+
const o = [];
|
|
2047
2004
|
for (const l of this.expandedRows) {
|
|
2048
2005
|
const a = this.rows.indexOf(l);
|
|
2049
|
-
a >= 0 &&
|
|
2006
|
+
a >= 0 && o.push({ index: a, row: l });
|
|
2050
2007
|
}
|
|
2051
|
-
|
|
2052
|
-
let i = e,
|
|
2053
|
-
for (const { index: l, row: a } of
|
|
2054
|
-
const d = l *
|
|
2055
|
-
|
|
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);
|
|
2056
2013
|
}
|
|
2057
2014
|
return i;
|
|
2058
2015
|
}
|
|
@@ -2063,7 +2020,7 @@ class eo extends C {
|
|
|
2063
2020
|
*/
|
|
2064
2021
|
expand(e) {
|
|
2065
2022
|
const t = this.rows[e];
|
|
2066
|
-
t && (this.expandedRows =
|
|
2023
|
+
t && (this.expandedRows = ft(this.expandedRows, t), this.requestRender());
|
|
2067
2024
|
}
|
|
2068
2025
|
/**
|
|
2069
2026
|
* Collapse the detail row at the given index.
|
|
@@ -2071,7 +2028,7 @@ class eo extends C {
|
|
|
2071
2028
|
*/
|
|
2072
2029
|
collapse(e) {
|
|
2073
2030
|
const t = this.rows[e];
|
|
2074
|
-
t && (this.expandedRows =
|
|
2031
|
+
t && (this.expandedRows = mt(this.expandedRows, t), this.requestRender());
|
|
2075
2032
|
}
|
|
2076
2033
|
/**
|
|
2077
2034
|
* Toggle the detail row at the given index.
|
|
@@ -2079,7 +2036,7 @@ class eo extends C {
|
|
|
2079
2036
|
*/
|
|
2080
2037
|
toggle(e) {
|
|
2081
2038
|
const t = this.rows[e];
|
|
2082
|
-
t && (this.expandedRows =
|
|
2039
|
+
t && (this.expandedRows = z(this.expandedRows, t), this.requestRender());
|
|
2083
2040
|
}
|
|
2084
2041
|
/**
|
|
2085
2042
|
* Check if the detail row at the given index is expanded.
|
|
@@ -2088,7 +2045,7 @@ class eo extends C {
|
|
|
2088
2045
|
*/
|
|
2089
2046
|
isExpanded(e) {
|
|
2090
2047
|
const t = this.rows[e];
|
|
2091
|
-
return t ?
|
|
2048
|
+
return t ? wt(this.expandedRows, t) : !1;
|
|
2092
2049
|
}
|
|
2093
2050
|
/**
|
|
2094
2051
|
* Expand all detail rows.
|
|
@@ -2111,8 +2068,8 @@ class eo extends C {
|
|
|
2111
2068
|
getExpandedRows() {
|
|
2112
2069
|
const e = [];
|
|
2113
2070
|
for (const t of this.expandedRows) {
|
|
2114
|
-
const
|
|
2115
|
-
|
|
2071
|
+
const n = this.rows.indexOf(t);
|
|
2072
|
+
n >= 0 && e.push(n);
|
|
2116
2073
|
}
|
|
2117
2074
|
return e;
|
|
2118
2075
|
}
|
|
@@ -2126,34 +2083,34 @@ class eo extends C {
|
|
|
2126
2083
|
return t ? this.detailElements.get(t) : void 0;
|
|
2127
2084
|
}
|
|
2128
2085
|
// ===== Styles =====
|
|
2129
|
-
styles =
|
|
2086
|
+
styles = vt;
|
|
2130
2087
|
}
|
|
2131
|
-
function
|
|
2132
|
-
return e.length ? [...
|
|
2088
|
+
function xt(r, e, t) {
|
|
2089
|
+
return e.length ? [...r].sort((n, o) => {
|
|
2133
2090
|
for (const i of e) {
|
|
2134
|
-
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);
|
|
2135
2092
|
if (c !== 0)
|
|
2136
2093
|
return i.direction === "asc" ? c : -c;
|
|
2137
2094
|
}
|
|
2138
2095
|
return 0;
|
|
2139
|
-
}) : [...
|
|
2096
|
+
}) : [...r];
|
|
2140
2097
|
}
|
|
2141
|
-
function
|
|
2142
|
-
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));
|
|
2143
2100
|
}
|
|
2144
|
-
function
|
|
2145
|
-
const
|
|
2146
|
-
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" }];
|
|
2147
2104
|
}
|
|
2148
|
-
function
|
|
2149
|
-
const t =
|
|
2105
|
+
function we(r, e) {
|
|
2106
|
+
const t = r.findIndex((n) => n.field === e);
|
|
2150
2107
|
return t >= 0 ? t + 1 : void 0;
|
|
2151
2108
|
}
|
|
2152
|
-
function
|
|
2153
|
-
return
|
|
2109
|
+
function be(r, e) {
|
|
2110
|
+
return r.find((t) => t.field === e)?.direction;
|
|
2154
2111
|
}
|
|
2155
|
-
const
|
|
2156
|
-
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 {
|
|
2157
2114
|
name = "multiSort";
|
|
2158
2115
|
version = "1.0.0";
|
|
2159
2116
|
get defaultConfig() {
|
|
@@ -2170,30 +2127,30 @@ class to extends C {
|
|
|
2170
2127
|
}
|
|
2171
2128
|
// ===== Hooks =====
|
|
2172
2129
|
processRows(e) {
|
|
2173
|
-
return this.sortModel.length === 0 ? [...e] :
|
|
2130
|
+
return this.sortModel.length === 0 ? [...e] : xt([...e], this.sortModel, [...this.columns]);
|
|
2174
2131
|
}
|
|
2175
2132
|
onHeaderClick(e) {
|
|
2176
2133
|
if (!this.columns.find((i) => i.field === e.field)?.sortable) return !1;
|
|
2177
|
-
const
|
|
2178
|
-
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;
|
|
2179
2136
|
}
|
|
2180
2137
|
afterRender() {
|
|
2181
2138
|
const e = this.shadowRoot;
|
|
2182
2139
|
if (!e) return;
|
|
2183
2140
|
const t = this.config.showSortIndex !== !1;
|
|
2184
|
-
e.querySelectorAll(".header-row .cell[data-field]").forEach((
|
|
2185
|
-
const i =
|
|
2141
|
+
e.querySelectorAll(".header-row .cell[data-field]").forEach((o) => {
|
|
2142
|
+
const i = o.getAttribute("data-field");
|
|
2186
2143
|
if (!i) return;
|
|
2187
|
-
const
|
|
2188
|
-
if (
|
|
2189
|
-
|
|
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);
|
|
2190
2147
|
const c = document.createElement("span");
|
|
2191
|
-
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) {
|
|
2192
2149
|
const u = document.createElement("span");
|
|
2193
|
-
u.className = "sort-index", u.textContent = String(
|
|
2150
|
+
u.className = "sort-index", u.textContent = String(s), o.appendChild(u);
|
|
2194
2151
|
}
|
|
2195
2152
|
} else
|
|
2196
|
-
|
|
2153
|
+
o.removeAttribute("data-sort");
|
|
2197
2154
|
});
|
|
2198
2155
|
}
|
|
2199
2156
|
// ===== Public API =====
|
|
@@ -2223,7 +2180,7 @@ class to extends C {
|
|
|
2223
2180
|
* @returns 1-based index or undefined if not sorted
|
|
2224
2181
|
*/
|
|
2225
2182
|
getSortIndex(e) {
|
|
2226
|
-
return
|
|
2183
|
+
return we(this.sortModel, e);
|
|
2227
2184
|
}
|
|
2228
2185
|
/**
|
|
2229
2186
|
* Get the sort direction for a specific field.
|
|
@@ -2231,14 +2188,14 @@ class to extends C {
|
|
|
2231
2188
|
* @returns Sort direction or undefined if not sorted
|
|
2232
2189
|
*/
|
|
2233
2190
|
getSortDirection(e) {
|
|
2234
|
-
return
|
|
2191
|
+
return be(this.sortModel, e);
|
|
2235
2192
|
}
|
|
2236
2193
|
// ===== Column State Hooks =====
|
|
2237
2194
|
/**
|
|
2238
2195
|
* Return sort state for a column if it's in the sort model.
|
|
2239
2196
|
*/
|
|
2240
2197
|
getColumnState(e) {
|
|
2241
|
-
const t = this.sortModel.findIndex((
|
|
2198
|
+
const t = this.sortModel.findIndex((o) => o.field === e);
|
|
2242
2199
|
return t === -1 ? void 0 : {
|
|
2243
2200
|
sort: {
|
|
2244
2201
|
direction: this.sortModel[t].direction,
|
|
@@ -2255,58 +2212,58 @@ class to extends C {
|
|
|
2255
2212
|
this.sortModel = this.sortModel.filter((i) => i.field !== e);
|
|
2256
2213
|
return;
|
|
2257
2214
|
}
|
|
2258
|
-
const
|
|
2215
|
+
const n = this.sortModel.findIndex((i) => i.field === e), o = {
|
|
2259
2216
|
field: e,
|
|
2260
2217
|
direction: t.sort.direction
|
|
2261
2218
|
};
|
|
2262
|
-
|
|
2219
|
+
n !== -1 ? this.sortModel[n] = o : this.sortModel.splice(t.sort.priority, 0, o);
|
|
2263
2220
|
}
|
|
2264
2221
|
// ===== Styles =====
|
|
2265
|
-
styles =
|
|
2222
|
+
styles = Rt;
|
|
2266
2223
|
}
|
|
2267
|
-
function
|
|
2268
|
-
return
|
|
2224
|
+
function St(r) {
|
|
2225
|
+
return r.filter((e) => e.sticky === "left");
|
|
2269
2226
|
}
|
|
2270
|
-
function
|
|
2271
|
-
return
|
|
2227
|
+
function Et(r) {
|
|
2228
|
+
return r.filter((e) => e.sticky === "right");
|
|
2272
2229
|
}
|
|
2273
|
-
function V(
|
|
2274
|
-
return
|
|
2230
|
+
function V(r) {
|
|
2231
|
+
return r.some((e) => e.sticky === "left" || e.sticky === "right");
|
|
2275
2232
|
}
|
|
2276
|
-
function
|
|
2277
|
-
const t =
|
|
2233
|
+
function ve(r, e) {
|
|
2234
|
+
const t = r.shadowRoot;
|
|
2278
2235
|
if (!t) return;
|
|
2279
|
-
const
|
|
2280
|
-
if (!
|
|
2281
|
-
const
|
|
2236
|
+
const n = Array.from(t.querySelectorAll(".header-row .cell"));
|
|
2237
|
+
if (!n.length) return;
|
|
2238
|
+
const o = /* @__PURE__ */ new Map();
|
|
2282
2239
|
e.forEach((l, a) => {
|
|
2283
|
-
l.field &&
|
|
2240
|
+
l.field && o.set(l.field, a);
|
|
2284
2241
|
});
|
|
2285
2242
|
let i = 0;
|
|
2286
2243
|
for (const l of e)
|
|
2287
2244
|
if (l.sticky === "left") {
|
|
2288
|
-
const a =
|
|
2245
|
+
const a = o.get(l.field), d = n.find((c) => c.getAttribute("data-field") === l.field);
|
|
2289
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) => {
|
|
2290
2247
|
c.classList.add("sticky-left"), c.style.left = i + "px";
|
|
2291
2248
|
}), i += d.offsetWidth);
|
|
2292
2249
|
}
|
|
2293
|
-
let
|
|
2250
|
+
let s = 0;
|
|
2294
2251
|
for (const l of [...e].reverse())
|
|
2295
2252
|
if (l.sticky === "right") {
|
|
2296
|
-
const a =
|
|
2297
|
-
d && (d.classList.add("sticky-right"), d.style.right =
|
|
2298
|
-
c.classList.add("sticky-right"), c.style.right =
|
|
2299
|
-
}),
|
|
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);
|
|
2300
2257
|
}
|
|
2301
2258
|
}
|
|
2302
|
-
function
|
|
2303
|
-
const e =
|
|
2259
|
+
function xe(r) {
|
|
2260
|
+
const e = r.shadowRoot;
|
|
2304
2261
|
if (!e) return;
|
|
2305
|
-
e.querySelectorAll(".sticky-left, .sticky-right").forEach((
|
|
2306
|
-
|
|
2262
|
+
e.querySelectorAll(".sticky-left, .sticky-right").forEach((n) => {
|
|
2263
|
+
n.classList.remove("sticky-left", "sticky-right"), n.style.left = "", n.style.right = "";
|
|
2307
2264
|
});
|
|
2308
2265
|
}
|
|
2309
|
-
class
|
|
2266
|
+
class Sn extends x {
|
|
2310
2267
|
name = "pinnedColumns";
|
|
2311
2268
|
version = "1.0.0";
|
|
2312
2269
|
get defaultConfig() {
|
|
@@ -2325,8 +2282,8 @@ class oo extends C {
|
|
|
2325
2282
|
* Auto-detect sticky columns from column configuration.
|
|
2326
2283
|
*/
|
|
2327
2284
|
static detect(e, t) {
|
|
2328
|
-
const
|
|
2329
|
-
return Array.isArray(
|
|
2285
|
+
const n = t?.columns;
|
|
2286
|
+
return Array.isArray(n) ? V(n) : !1;
|
|
2330
2287
|
}
|
|
2331
2288
|
// ===== Hooks =====
|
|
2332
2289
|
processColumns(e) {
|
|
@@ -2337,11 +2294,11 @@ class oo extends C {
|
|
|
2337
2294
|
return;
|
|
2338
2295
|
const e = this.grid, t = [...this.columns];
|
|
2339
2296
|
if (!V(t)) {
|
|
2340
|
-
|
|
2297
|
+
xe(e), this.isApplied = !1;
|
|
2341
2298
|
return;
|
|
2342
2299
|
}
|
|
2343
2300
|
queueMicrotask(() => {
|
|
2344
|
-
|
|
2301
|
+
ve(e, t);
|
|
2345
2302
|
});
|
|
2346
2303
|
}
|
|
2347
2304
|
// ===== Public API =====
|
|
@@ -2350,113 +2307,113 @@ class oo extends C {
|
|
|
2350
2307
|
*/
|
|
2351
2308
|
refreshStickyOffsets() {
|
|
2352
2309
|
const e = [...this.columns];
|
|
2353
|
-
|
|
2310
|
+
ve(this.grid, e);
|
|
2354
2311
|
}
|
|
2355
2312
|
/**
|
|
2356
2313
|
* Get columns pinned to the left.
|
|
2357
2314
|
*/
|
|
2358
2315
|
getLeftPinnedColumns() {
|
|
2359
2316
|
const e = [...this.columns];
|
|
2360
|
-
return
|
|
2317
|
+
return St(e);
|
|
2361
2318
|
}
|
|
2362
2319
|
/**
|
|
2363
2320
|
* Get columns pinned to the right.
|
|
2364
2321
|
*/
|
|
2365
2322
|
getRightPinnedColumns() {
|
|
2366
2323
|
const e = [...this.columns];
|
|
2367
|
-
return
|
|
2324
|
+
return Et(e);
|
|
2368
2325
|
}
|
|
2369
2326
|
/**
|
|
2370
2327
|
* Clear all sticky positioning.
|
|
2371
2328
|
*/
|
|
2372
2329
|
clearStickyPositions() {
|
|
2373
|
-
|
|
2330
|
+
xe(this.grid);
|
|
2374
2331
|
}
|
|
2375
2332
|
}
|
|
2376
|
-
function
|
|
2333
|
+
function W(r, e) {
|
|
2377
2334
|
const t = document.createElement("div");
|
|
2378
|
-
t.className = "tbw-pinned-rows", t.setAttribute("role", "
|
|
2379
|
-
const o = document.createElement("div");
|
|
2380
|
-
o.className = "tbw-pinned-rows-left";
|
|
2335
|
+
t.className = "tbw-pinned-rows", t.setAttribute("role", "presentation"), t.setAttribute("aria-live", "polite");
|
|
2381
2336
|
const n = document.createElement("div");
|
|
2382
|
-
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";
|
|
2383
2340
|
const i = document.createElement("div");
|
|
2384
|
-
if (i.className = "tbw-pinned-rows-right",
|
|
2385
|
-
const
|
|
2386
|
-
|
|
2387
|
-
}
|
|
2388
|
-
if (
|
|
2389
|
-
const
|
|
2390
|
-
|
|
2391
|
-
}
|
|
2392
|
-
if (
|
|
2393
|
-
const
|
|
2394
|
-
|
|
2395
|
-
}
|
|
2396
|
-
if (
|
|
2397
|
-
for (const
|
|
2398
|
-
const l =
|
|
2399
|
-
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) {
|
|
2400
2357
|
case "left":
|
|
2401
|
-
|
|
2358
|
+
n.appendChild(l);
|
|
2402
2359
|
break;
|
|
2403
2360
|
case "center":
|
|
2404
|
-
|
|
2361
|
+
o.appendChild(l);
|
|
2405
2362
|
break;
|
|
2406
2363
|
case "right":
|
|
2407
2364
|
i.appendChild(l);
|
|
2408
2365
|
break;
|
|
2409
2366
|
}
|
|
2410
2367
|
}
|
|
2411
|
-
return t.appendChild(
|
|
2368
|
+
return t.appendChild(n), t.appendChild(o), t.appendChild(i), t;
|
|
2412
2369
|
}
|
|
2413
|
-
function
|
|
2370
|
+
function Ce(r) {
|
|
2414
2371
|
const e = document.createElement("div");
|
|
2415
|
-
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;
|
|
2416
2373
|
}
|
|
2417
|
-
function
|
|
2418
|
-
|
|
2419
|
-
for (const
|
|
2374
|
+
function ye(r, e, t, n) {
|
|
2375
|
+
r.innerHTML = "";
|
|
2376
|
+
for (const o of e) {
|
|
2420
2377
|
const i = document.createElement("div");
|
|
2421
|
-
if (i.className = "tbw-aggregation-row", i.setAttribute("role", "
|
|
2422
|
-
const
|
|
2423
|
-
|
|
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);
|
|
2424
2381
|
} else
|
|
2425
|
-
for (const
|
|
2382
|
+
for (const s of t) {
|
|
2426
2383
|
const l = document.createElement("div");
|
|
2427
|
-
l.className = "tbw-aggregation-cell", l.setAttribute("data-field",
|
|
2384
|
+
l.className = "tbw-aggregation-cell", l.setAttribute("data-field", s.field);
|
|
2428
2385
|
let a;
|
|
2429
|
-
const d =
|
|
2386
|
+
const d = o.aggregators?.[s.field];
|
|
2430
2387
|
if (d) {
|
|
2431
|
-
const c =
|
|
2432
|
-
c && (a = c(
|
|
2433
|
-
} else if (
|
|
2434
|
-
const c =
|
|
2435
|
-
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;
|
|
2436
2393
|
}
|
|
2437
2394
|
l.textContent = a != null ? String(a) : "", i.appendChild(l);
|
|
2438
2395
|
}
|
|
2439
|
-
|
|
2396
|
+
r.appendChild(i);
|
|
2440
2397
|
}
|
|
2441
2398
|
}
|
|
2442
|
-
function
|
|
2399
|
+
function kt(r, e) {
|
|
2443
2400
|
const t = document.createElement("div");
|
|
2444
|
-
t.className = "tbw-status-panel tbw-status-panel-custom", t.id = `status-panel-${
|
|
2445
|
-
const
|
|
2446
|
-
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;
|
|
2447
2404
|
}
|
|
2448
|
-
function
|
|
2405
|
+
function Re(r, e, t, n, o) {
|
|
2449
2406
|
return {
|
|
2450
|
-
totalRows:
|
|
2451
|
-
filteredRows:
|
|
2452
|
-
selectedRows:
|
|
2407
|
+
totalRows: r.length,
|
|
2408
|
+
filteredRows: o?.cachedResult?.length ?? r.length,
|
|
2409
|
+
selectedRows: n?.selected?.size ?? 0,
|
|
2453
2410
|
columns: e,
|
|
2454
|
-
rows:
|
|
2411
|
+
rows: r,
|
|
2455
2412
|
grid: t
|
|
2456
2413
|
};
|
|
2457
2414
|
}
|
|
2458
|
-
const
|
|
2459
|
-
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 {
|
|
2460
2417
|
name = "pinnedRows";
|
|
2461
2418
|
version = "1.0.0";
|
|
2462
2419
|
get defaultConfig() {
|
|
@@ -2482,20 +2439,20 @@ class no extends C {
|
|
|
2482
2439
|
if (!e) return;
|
|
2483
2440
|
const t = e.querySelector(".tbw-scroll-area") ?? e.querySelector(".tbw-grid-content") ?? e.children[0];
|
|
2484
2441
|
if (!t) return;
|
|
2485
|
-
const
|
|
2442
|
+
const n = this.getSelectionState(), o = this.getFilterState(), i = Re(
|
|
2486
2443
|
this.rows,
|
|
2487
2444
|
this.columns,
|
|
2488
2445
|
this.grid,
|
|
2489
|
-
|
|
2490
|
-
|
|
2491
|
-
),
|
|
2446
|
+
n,
|
|
2447
|
+
o
|
|
2448
|
+
), s = this.config.aggregationRows || [], l = s.filter((h) => h.position === "top"), a = s.filter((h) => h.position !== "top");
|
|
2492
2449
|
if (l.length > 0) {
|
|
2493
2450
|
if (!this.topAggregationContainer) {
|
|
2494
|
-
this.topAggregationContainer =
|
|
2451
|
+
this.topAggregationContainer = Ce("top");
|
|
2495
2452
|
const h = e.querySelector(".header");
|
|
2496
2453
|
h && h.nextSibling ? t.insertBefore(this.topAggregationContainer, h.nextSibling) : t.appendChild(this.topAggregationContainer);
|
|
2497
2454
|
}
|
|
2498
|
-
|
|
2455
|
+
ye(
|
|
2499
2456
|
this.topAggregationContainer,
|
|
2500
2457
|
l,
|
|
2501
2458
|
this.visibleColumns,
|
|
@@ -2505,18 +2462,18 @@ class no extends C {
|
|
|
2505
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;
|
|
2506
2463
|
if (d && this.config.position === "top")
|
|
2507
2464
|
if (!this.infoBarElement)
|
|
2508
|
-
this.infoBarElement =
|
|
2465
|
+
this.infoBarElement = W(this.config, i), t.insertBefore(this.infoBarElement, t.firstChild);
|
|
2509
2466
|
else {
|
|
2510
|
-
const h =
|
|
2467
|
+
const h = W(this.config, i);
|
|
2511
2468
|
this.infoBarElement.replaceWith(h), this.infoBarElement = h;
|
|
2512
2469
|
}
|
|
2513
2470
|
else this.config.position === "top" && this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null);
|
|
2514
|
-
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(
|
|
2515
2472
|
this.bottomAggregationContainer,
|
|
2516
2473
|
a,
|
|
2517
2474
|
this.visibleColumns,
|
|
2518
2475
|
this.rows
|
|
2519
|
-
)), c && (this.infoBarElement =
|
|
2476
|
+
)), c && (this.infoBarElement = W(this.config, i), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
|
|
2520
2477
|
}
|
|
2521
2478
|
// ===== Private Methods =====
|
|
2522
2479
|
cleanup() {
|
|
@@ -2552,7 +2509,7 @@ class no extends C {
|
|
|
2552
2509
|
*/
|
|
2553
2510
|
getContext() {
|
|
2554
2511
|
const e = this.getSelectionState(), t = this.getFilterState();
|
|
2555
|
-
return
|
|
2512
|
+
return Re(
|
|
2556
2513
|
this.rows,
|
|
2557
2514
|
this.columns,
|
|
2558
2515
|
this.grid,
|
|
@@ -2589,289 +2546,289 @@ class no extends C {
|
|
|
2589
2546
|
this.config.aggregationRows && (this.config.aggregationRows = this.config.aggregationRows.filter((t) => t.id !== e), this.requestRender());
|
|
2590
2547
|
}
|
|
2591
2548
|
// ===== Styles =====
|
|
2592
|
-
styles =
|
|
2549
|
+
styles = At;
|
|
2593
2550
|
}
|
|
2594
|
-
const
|
|
2595
|
-
function
|
|
2551
|
+
const _t = Ge;
|
|
2552
|
+
function It(r) {
|
|
2596
2553
|
const e = [];
|
|
2597
|
-
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;
|
|
2598
2555
|
}
|
|
2599
|
-
function
|
|
2600
|
-
return [...
|
|
2556
|
+
function te(r, e) {
|
|
2557
|
+
return [...r, e].join("|");
|
|
2601
2558
|
}
|
|
2602
|
-
function
|
|
2603
|
-
const t = e.rowGroupFields ?? [],
|
|
2604
|
-
|
|
2559
|
+
function Ft(r, e) {
|
|
2560
|
+
const t = e.rowGroupFields ?? [], n = e.columnGroupFields ?? [], o = e.valueFields ?? [], i = Lt(r, n), s = Pe(
|
|
2561
|
+
r,
|
|
2605
2562
|
t,
|
|
2606
|
-
o,
|
|
2607
|
-
i,
|
|
2608
2563
|
n,
|
|
2564
|
+
i,
|
|
2565
|
+
o,
|
|
2609
2566
|
0,
|
|
2610
2567
|
// starting depth
|
|
2611
2568
|
""
|
|
2612
2569
|
// parent key prefix
|
|
2613
|
-
), l =
|
|
2570
|
+
), l = Mt(s, i, o), a = Object.values(l).reduce((d, c) => d + c, 0);
|
|
2614
2571
|
return {
|
|
2615
|
-
rows:
|
|
2572
|
+
rows: s,
|
|
2616
2573
|
columnKeys: i,
|
|
2617
2574
|
totals: l,
|
|
2618
2575
|
grandTotal: a
|
|
2619
2576
|
};
|
|
2620
2577
|
}
|
|
2621
|
-
function
|
|
2578
|
+
function Lt(r, e) {
|
|
2622
2579
|
if (e.length === 0) return ["value"];
|
|
2623
2580
|
const t = /* @__PURE__ */ new Set();
|
|
2624
|
-
for (const
|
|
2625
|
-
const
|
|
2626
|
-
t.add(
|
|
2581
|
+
for (const n of r) {
|
|
2582
|
+
const o = e.map((i) => String(n[i] ?? "")).join("|");
|
|
2583
|
+
t.add(o);
|
|
2627
2584
|
}
|
|
2628
2585
|
return [...t].sort();
|
|
2629
2586
|
}
|
|
2630
|
-
function
|
|
2587
|
+
function Tt(r, e) {
|
|
2631
2588
|
const t = /* @__PURE__ */ new Map();
|
|
2632
|
-
for (const
|
|
2633
|
-
const
|
|
2634
|
-
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]);
|
|
2635
2592
|
}
|
|
2636
2593
|
return t;
|
|
2637
2594
|
}
|
|
2638
|
-
function
|
|
2595
|
+
function Pe(r, e, t, n, o, i, s) {
|
|
2639
2596
|
const l = [];
|
|
2640
2597
|
if (e.length === 0) {
|
|
2641
|
-
const h =
|
|
2598
|
+
const h = Se(r, t, n, o), g = Ee(h);
|
|
2642
2599
|
return l.push({
|
|
2643
|
-
rowKey:
|
|
2644
|
-
rowLabel:
|
|
2600
|
+
rowKey: s || "all",
|
|
2601
|
+
rowLabel: s || "All",
|
|
2645
2602
|
depth: i,
|
|
2646
2603
|
values: h,
|
|
2647
|
-
total:
|
|
2604
|
+
total: g,
|
|
2648
2605
|
isGroup: !1,
|
|
2649
|
-
rowCount:
|
|
2606
|
+
rowCount: r.length
|
|
2650
2607
|
}), l;
|
|
2651
2608
|
}
|
|
2652
|
-
const a = e[0], d = e.slice(1), c = d.length > 0, u =
|
|
2653
|
-
for (const [h,
|
|
2654
|
-
const
|
|
2655
|
-
let
|
|
2656
|
-
c && (
|
|
2657
|
-
|
|
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,
|
|
2658
2615
|
d,
|
|
2659
2616
|
t,
|
|
2660
|
-
o,
|
|
2661
2617
|
n,
|
|
2618
|
+
o,
|
|
2662
2619
|
i + 1,
|
|
2663
|
-
|
|
2620
|
+
p
|
|
2664
2621
|
)), l.push({
|
|
2665
|
-
rowKey:
|
|
2622
|
+
rowKey: p,
|
|
2666
2623
|
rowLabel: h || "(blank)",
|
|
2667
2624
|
depth: i,
|
|
2668
|
-
values:
|
|
2669
|
-
total:
|
|
2625
|
+
values: f,
|
|
2626
|
+
total: m,
|
|
2670
2627
|
isGroup: c,
|
|
2671
|
-
children:
|
|
2672
|
-
rowCount:
|
|
2628
|
+
children: w,
|
|
2629
|
+
rowCount: g.length
|
|
2673
2630
|
});
|
|
2674
2631
|
}
|
|
2675
2632
|
return l;
|
|
2676
2633
|
}
|
|
2677
|
-
function
|
|
2678
|
-
const
|
|
2634
|
+
function Se(r, e, t, n) {
|
|
2635
|
+
const o = {};
|
|
2679
2636
|
for (const i of t)
|
|
2680
|
-
for (const
|
|
2681
|
-
const a = (e.length > 0 ?
|
|
2682
|
-
|
|
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;
|
|
2683
2640
|
}
|
|
2684
|
-
return
|
|
2641
|
+
return o;
|
|
2685
2642
|
}
|
|
2686
|
-
function
|
|
2643
|
+
function Ee(r) {
|
|
2687
2644
|
let e = 0;
|
|
2688
|
-
for (const t of Object.values(
|
|
2645
|
+
for (const t of Object.values(r))
|
|
2689
2646
|
e += t ?? 0;
|
|
2690
2647
|
return e;
|
|
2691
2648
|
}
|
|
2692
|
-
function
|
|
2693
|
-
const
|
|
2694
|
-
function
|
|
2695
|
-
for (const
|
|
2696
|
-
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)
|
|
2697
2654
|
for (const l of e)
|
|
2698
2655
|
for (const a of t) {
|
|
2699
|
-
const d =
|
|
2700
|
-
|
|
2656
|
+
const d = te([l], a.field);
|
|
2657
|
+
n[d] = (n[d] ?? 0) + (s.values[d] ?? 0);
|
|
2701
2658
|
}
|
|
2702
|
-
else
|
|
2659
|
+
else s.children && o(s.children);
|
|
2703
2660
|
}
|
|
2704
|
-
return
|
|
2661
|
+
return o(r), n;
|
|
2705
2662
|
}
|
|
2706
|
-
function
|
|
2707
|
-
const
|
|
2708
|
-
function
|
|
2709
|
-
|
|
2710
|
-
const
|
|
2711
|
-
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)
|
|
2712
2669
|
for (const l of i.children)
|
|
2713
|
-
|
|
2670
|
+
o(l);
|
|
2714
2671
|
}
|
|
2715
|
-
for (const i of
|
|
2716
|
-
|
|
2717
|
-
return
|
|
2672
|
+
for (const i of r)
|
|
2673
|
+
o(i);
|
|
2674
|
+
return n;
|
|
2718
2675
|
}
|
|
2719
|
-
function
|
|
2676
|
+
function $(r) {
|
|
2720
2677
|
const e = [];
|
|
2721
|
-
function t(
|
|
2722
|
-
if (
|
|
2723
|
-
for (const
|
|
2724
|
-
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);
|
|
2725
2682
|
}
|
|
2726
|
-
for (const
|
|
2727
|
-
t(
|
|
2683
|
+
for (const n of r)
|
|
2684
|
+
t(n);
|
|
2728
2685
|
return e;
|
|
2729
2686
|
}
|
|
2730
|
-
const
|
|
2731
|
-
function
|
|
2732
|
-
const
|
|
2733
|
-
return
|
|
2734
|
-
|
|
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();
|
|
2735
2692
|
};
|
|
2736
2693
|
}
|
|
2737
|
-
function
|
|
2694
|
+
function F(r, e) {
|
|
2738
2695
|
const t = document.createElement("div");
|
|
2739
2696
|
t.className = "tbw-pivot-section";
|
|
2740
|
-
const o = document.createElement("div");
|
|
2741
|
-
o.className = "tbw-pivot-section-header", o.textContent = s;
|
|
2742
2697
|
const n = document.createElement("div");
|
|
2743
|
-
|
|
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;
|
|
2744
2701
|
}
|
|
2745
|
-
function
|
|
2746
|
-
const { config: t, callbacks:
|
|
2747
|
-
i.className = "tbw-pivot-drop-zone", i.setAttribute("data-zone",
|
|
2748
|
-
const
|
|
2749
|
-
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) {
|
|
2750
2707
|
const l = document.createElement("div");
|
|
2751
2708
|
l.className = "tbw-pivot-placeholder", l.textContent = "Drag fields here or click to add", i.appendChild(l);
|
|
2752
2709
|
} else
|
|
2753
|
-
for (const l of
|
|
2754
|
-
i.appendChild(
|
|
2710
|
+
for (const l of s)
|
|
2711
|
+
i.appendChild(Dt(l, r, e));
|
|
2755
2712
|
return i.addEventListener(
|
|
2756
2713
|
"dragover",
|
|
2757
2714
|
(l) => {
|
|
2758
2715
|
l.preventDefault(), i.classList.add("drag-over");
|
|
2759
2716
|
},
|
|
2760
|
-
{ signal:
|
|
2717
|
+
{ signal: o }
|
|
2761
2718
|
), i.addEventListener(
|
|
2762
2719
|
"dragleave",
|
|
2763
2720
|
() => {
|
|
2764
2721
|
i.classList.remove("drag-over");
|
|
2765
2722
|
},
|
|
2766
|
-
{ signal:
|
|
2723
|
+
{ signal: o }
|
|
2767
2724
|
), i.addEventListener(
|
|
2768
2725
|
"drop",
|
|
2769
2726
|
(l) => {
|
|
2770
2727
|
l.preventDefault(), i.classList.remove("drag-over");
|
|
2771
2728
|
const a = l.dataTransfer?.getData("text/plain");
|
|
2772
|
-
a &&
|
|
2729
|
+
a && n.onAddFieldToZone(a, r);
|
|
2773
2730
|
},
|
|
2774
|
-
{ signal:
|
|
2731
|
+
{ signal: o }
|
|
2775
2732
|
), i;
|
|
2776
2733
|
}
|
|
2777
|
-
function
|
|
2778
|
-
const { callbacks:
|
|
2734
|
+
function Dt(r, e, t) {
|
|
2735
|
+
const { callbacks: n, signal: o } = t, i = document.createElement("div");
|
|
2779
2736
|
i.className = "tbw-pivot-field-chip", i.draggable = !0;
|
|
2780
|
-
const
|
|
2781
|
-
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;
|
|
2782
2739
|
const a = document.createElement("button");
|
|
2783
2740
|
return a.className = "tbw-pivot-chip-remove", a.innerHTML = "×", a.title = "Remove field", a.addEventListener(
|
|
2784
2741
|
"click",
|
|
2785
2742
|
(d) => {
|
|
2786
|
-
d.stopPropagation(),
|
|
2743
|
+
d.stopPropagation(), n.onRemoveFieldFromZone(r, e);
|
|
2787
2744
|
},
|
|
2788
|
-
{ signal:
|
|
2745
|
+
{ signal: o }
|
|
2789
2746
|
), i.appendChild(l), i.appendChild(a), i.addEventListener(
|
|
2790
2747
|
"dragstart",
|
|
2791
2748
|
(d) => {
|
|
2792
|
-
d.dataTransfer?.setData("text/plain",
|
|
2749
|
+
d.dataTransfer?.setData("text/plain", r), d.dataTransfer?.setData("source-zone", e), i.classList.add("dragging");
|
|
2793
2750
|
},
|
|
2794
|
-
{ signal:
|
|
2751
|
+
{ signal: o }
|
|
2795
2752
|
), i.addEventListener(
|
|
2796
2753
|
"dragend",
|
|
2797
2754
|
() => {
|
|
2798
2755
|
i.classList.remove("dragging");
|
|
2799
2756
|
},
|
|
2800
|
-
{ signal:
|
|
2757
|
+
{ signal: o }
|
|
2801
2758
|
), i;
|
|
2802
2759
|
}
|
|
2803
|
-
function
|
|
2804
|
-
const { config: e, callbacks: t, signal:
|
|
2805
|
-
|
|
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");
|
|
2806
2763
|
const i = e.valueFields ?? [];
|
|
2807
2764
|
if (i.length === 0) {
|
|
2808
|
-
const
|
|
2809
|
-
|
|
2765
|
+
const s = document.createElement("div");
|
|
2766
|
+
s.className = "tbw-pivot-placeholder", s.textContent = "Drag numeric fields here for aggregation", o.appendChild(s);
|
|
2810
2767
|
} else
|
|
2811
|
-
for (const
|
|
2812
|
-
|
|
2813
|
-
return
|
|
2768
|
+
for (const s of i)
|
|
2769
|
+
o.appendChild(Ht(s, r));
|
|
2770
|
+
return o.addEventListener(
|
|
2814
2771
|
"dragover",
|
|
2815
|
-
(
|
|
2816
|
-
|
|
2772
|
+
(s) => {
|
|
2773
|
+
s.preventDefault(), o.classList.add("drag-over");
|
|
2817
2774
|
},
|
|
2818
|
-
{ signal:
|
|
2819
|
-
),
|
|
2775
|
+
{ signal: n }
|
|
2776
|
+
), o.addEventListener(
|
|
2820
2777
|
"dragleave",
|
|
2821
2778
|
() => {
|
|
2822
|
-
|
|
2779
|
+
o.classList.remove("drag-over");
|
|
2823
2780
|
},
|
|
2824
|
-
{ signal:
|
|
2825
|
-
),
|
|
2781
|
+
{ signal: n }
|
|
2782
|
+
), o.addEventListener(
|
|
2826
2783
|
"drop",
|
|
2827
|
-
(
|
|
2828
|
-
|
|
2829
|
-
const l =
|
|
2784
|
+
(s) => {
|
|
2785
|
+
s.preventDefault(), o.classList.remove("drag-over");
|
|
2786
|
+
const l = s.dataTransfer?.getData("text/plain");
|
|
2830
2787
|
l && t.onAddValueField(l, "sum");
|
|
2831
2788
|
},
|
|
2832
|
-
{ signal:
|
|
2833
|
-
),
|
|
2789
|
+
{ signal: n }
|
|
2790
|
+
), o;
|
|
2834
2791
|
}
|
|
2835
|
-
function
|
|
2836
|
-
const { callbacks: t, signal:
|
|
2837
|
-
|
|
2838
|
-
const i = t.getAvailableFields().find((c) => c.field ===
|
|
2839
|
-
|
|
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";
|
|
2840
2797
|
const l = document.createElement("span");
|
|
2841
|
-
l.className = "tbw-pivot-chip-label", l.textContent = i?.header ??
|
|
2798
|
+
l.className = "tbw-pivot-chip-label", l.textContent = i?.header ?? r.field;
|
|
2842
2799
|
const a = document.createElement("select");
|
|
2843
2800
|
a.className = "tbw-pivot-agg-select", a.title = "Aggregation function";
|
|
2844
|
-
for (const c of
|
|
2801
|
+
for (const c of Pt) {
|
|
2845
2802
|
const u = document.createElement("option");
|
|
2846
|
-
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);
|
|
2847
2804
|
}
|
|
2848
2805
|
a.addEventListener(
|
|
2849
2806
|
"change",
|
|
2850
2807
|
() => {
|
|
2851
|
-
t.onUpdateValueAggFunc(
|
|
2808
|
+
t.onUpdateValueAggFunc(r.field, a.value);
|
|
2852
2809
|
},
|
|
2853
|
-
{ signal:
|
|
2810
|
+
{ signal: n }
|
|
2854
2811
|
);
|
|
2855
2812
|
const d = document.createElement("button");
|
|
2856
2813
|
return d.className = "tbw-pivot-chip-remove", d.innerHTML = "×", d.title = "Remove value field", d.addEventListener(
|
|
2857
2814
|
"click",
|
|
2858
2815
|
(c) => {
|
|
2859
|
-
c.stopPropagation(), t.onRemoveValueField(
|
|
2816
|
+
c.stopPropagation(), t.onRemoveValueField(r.field);
|
|
2860
2817
|
},
|
|
2861
|
-
{ signal:
|
|
2862
|
-
),
|
|
2818
|
+
{ signal: n }
|
|
2819
|
+
), s.appendChild(l), s.appendChild(a), o.appendChild(s), o.appendChild(d), o;
|
|
2863
2820
|
}
|
|
2864
|
-
function
|
|
2865
|
-
const { config: e, callbacks: t, signal:
|
|
2866
|
-
|
|
2867
|
-
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([
|
|
2868
2825
|
...e.rowGroupFields ?? [],
|
|
2869
2826
|
...e.columnGroupFields ?? [],
|
|
2870
2827
|
...e.valueFields?.map((a) => a.field) ?? []
|
|
2871
|
-
]), l = i.filter((a) => !
|
|
2828
|
+
]), l = i.filter((a) => !s.has(a.field));
|
|
2872
2829
|
if (l.length === 0) {
|
|
2873
2830
|
const a = document.createElement("div");
|
|
2874
|
-
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);
|
|
2875
2832
|
} else
|
|
2876
2833
|
for (const a of l) {
|
|
2877
2834
|
const d = document.createElement("div");
|
|
@@ -2880,107 +2837,107 @@ function It(s) {
|
|
|
2880
2837
|
(c) => {
|
|
2881
2838
|
c.dataTransfer?.setData("text/plain", a.field), d.classList.add("dragging");
|
|
2882
2839
|
},
|
|
2883
|
-
{ signal:
|
|
2840
|
+
{ signal: n }
|
|
2884
2841
|
), d.addEventListener(
|
|
2885
2842
|
"dragend",
|
|
2886
2843
|
() => {
|
|
2887
2844
|
d.classList.remove("dragging");
|
|
2888
2845
|
},
|
|
2889
|
-
{ signal:
|
|
2890
|
-
),
|
|
2846
|
+
{ signal: n }
|
|
2847
|
+
), o.appendChild(d);
|
|
2891
2848
|
}
|
|
2892
|
-
return
|
|
2849
|
+
return o;
|
|
2893
2850
|
}
|
|
2894
|
-
function
|
|
2895
|
-
const { config: t, callbacks:
|
|
2851
|
+
function Bt(r, e) {
|
|
2852
|
+
const { config: t, callbacks: n, signal: o } = e, i = document.createElement("div");
|
|
2896
2853
|
return i.className = "tbw-pivot-options", i.appendChild(
|
|
2897
|
-
|
|
2854
|
+
j(
|
|
2898
2855
|
"Enable Pivot View",
|
|
2899
|
-
|
|
2900
|
-
(
|
|
2901
|
-
|
|
2856
|
+
r,
|
|
2857
|
+
(s) => {
|
|
2858
|
+
n.onTogglePivot(s);
|
|
2902
2859
|
},
|
|
2903
|
-
|
|
2860
|
+
o
|
|
2904
2861
|
)
|
|
2905
2862
|
), i.appendChild(
|
|
2906
|
-
|
|
2863
|
+
j(
|
|
2907
2864
|
"Show Row Totals",
|
|
2908
2865
|
t.showTotals ?? !0,
|
|
2909
|
-
(
|
|
2910
|
-
|
|
2866
|
+
(s) => {
|
|
2867
|
+
n.onOptionChange("showTotals", s);
|
|
2911
2868
|
},
|
|
2912
|
-
|
|
2869
|
+
o
|
|
2913
2870
|
)
|
|
2914
2871
|
), i.appendChild(
|
|
2915
|
-
|
|
2872
|
+
j(
|
|
2916
2873
|
"Show Grand Total",
|
|
2917
2874
|
t.showGrandTotal ?? !0,
|
|
2918
|
-
(
|
|
2919
|
-
|
|
2875
|
+
(s) => {
|
|
2876
|
+
n.onOptionChange("showGrandTotal", s);
|
|
2920
2877
|
},
|
|
2921
|
-
|
|
2878
|
+
o
|
|
2922
2879
|
)
|
|
2923
2880
|
), i;
|
|
2924
2881
|
}
|
|
2925
|
-
function
|
|
2926
|
-
const
|
|
2927
|
-
|
|
2882
|
+
function j(r, e, t, n) {
|
|
2883
|
+
const o = document.createElement("label");
|
|
2884
|
+
o.className = "tbw-pivot-checkbox";
|
|
2928
2885
|
const i = document.createElement("input");
|
|
2929
|
-
i.type = "checkbox", i.checked = e, i.addEventListener("change", () => t(i.checked), { signal:
|
|
2930
|
-
const
|
|
2931
|
-
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;
|
|
2932
2889
|
}
|
|
2933
|
-
function
|
|
2934
|
-
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) => {
|
|
2935
2892
|
const i = document.createElement("div");
|
|
2936
|
-
if (i.className = "cell", i.setAttribute("data-col", String(
|
|
2937
|
-
const
|
|
2938
|
-
i.style.paddingLeft = `${
|
|
2939
|
-
const l = String(
|
|
2940
|
-
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) => {
|
|
2941
2898
|
u.stopPropagation(), t.onToggle(l);
|
|
2942
2899
|
}), i.appendChild(a);
|
|
2943
2900
|
const d = document.createElement("span");
|
|
2944
|
-
d.className = "pivot-label", d.textContent = String(
|
|
2901
|
+
d.className = "pivot-label", d.textContent = String(r.__pivotLabel ?? ""), i.appendChild(d);
|
|
2945
2902
|
const c = document.createElement("span");
|
|
2946
|
-
c.className = "pivot-count", c.textContent = ` (${Number(
|
|
2903
|
+
c.className = "pivot-count", c.textContent = ` (${Number(r.__pivotRowCount) || 0})`, i.appendChild(c);
|
|
2947
2904
|
} else {
|
|
2948
|
-
const
|
|
2949
|
-
i.textContent =
|
|
2905
|
+
const s = r[n.field];
|
|
2906
|
+
i.textContent = s != null ? String(s) : "";
|
|
2950
2907
|
}
|
|
2951
2908
|
e.appendChild(i);
|
|
2952
2909
|
}), !0;
|
|
2953
2910
|
}
|
|
2954
|
-
function
|
|
2955
|
-
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) => {
|
|
2956
2913
|
const i = document.createElement("div");
|
|
2957
|
-
if (i.className = "cell", i.setAttribute("data-col", String(
|
|
2958
|
-
const
|
|
2959
|
-
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`;
|
|
2960
2917
|
const l = document.createElement("span");
|
|
2961
|
-
l.className = "pivot-label", l.textContent = String(
|
|
2918
|
+
l.className = "pivot-label", l.textContent = String(r.__pivotLabel ?? ""), i.appendChild(l);
|
|
2962
2919
|
} else {
|
|
2963
|
-
const
|
|
2964
|
-
i.textContent =
|
|
2920
|
+
const s = r[n.field];
|
|
2921
|
+
i.textContent = s != null ? String(s) : "";
|
|
2965
2922
|
}
|
|
2966
2923
|
e.appendChild(i);
|
|
2967
2924
|
}), !0;
|
|
2968
2925
|
}
|
|
2969
|
-
function
|
|
2970
|
-
return e.className = "pivot-grand-total-row", e.setAttribute("role", "
|
|
2926
|
+
function Vt(r, e, t) {
|
|
2927
|
+
return e.className = "pivot-grand-total-row", e.setAttribute("role", "presentation"), e.innerHTML = "", t.forEach((n, o) => {
|
|
2971
2928
|
const i = document.createElement("div");
|
|
2972
|
-
if (i.className = "cell", i.setAttribute("data-col", String(
|
|
2973
|
-
const
|
|
2974
|
-
|
|
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);
|
|
2975
2932
|
} else {
|
|
2976
|
-
const
|
|
2977
|
-
i.textContent =
|
|
2933
|
+
const s = r[n.field];
|
|
2934
|
+
i.textContent = s != null ? String(s) : "";
|
|
2978
2935
|
}
|
|
2979
2936
|
e.appendChild(i);
|
|
2980
2937
|
}), !0;
|
|
2981
2938
|
}
|
|
2982
|
-
const
|
|
2983
|
-
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 {
|
|
2984
2941
|
name = "pivot";
|
|
2985
2942
|
version = "1.0.0";
|
|
2986
2943
|
/** Tool panel ID for shell integration */
|
|
@@ -3015,7 +2972,7 @@ class I extends C {
|
|
|
3015
2972
|
// ===== Shell Integration =====
|
|
3016
2973
|
getToolPanel() {
|
|
3017
2974
|
return {
|
|
3018
|
-
id:
|
|
2975
|
+
id: L.PANEL_ID,
|
|
3019
2976
|
title: "Pivot",
|
|
3020
2977
|
icon: "⊞",
|
|
3021
2978
|
tooltip: "Configure pivot table",
|
|
@@ -3027,21 +2984,21 @@ class I extends C {
|
|
|
3027
2984
|
processRows(e) {
|
|
3028
2985
|
if (!this.hasInitialized && this.config.active !== !1 && this.hasValidPivotConfig() && (this.hasInitialized = !0, this.isActive = !0), !this.isActive)
|
|
3029
2986
|
return [...e];
|
|
3030
|
-
const t =
|
|
2987
|
+
const t = It(this.config);
|
|
3031
2988
|
if (t.length > 0)
|
|
3032
2989
|
return this.warn(`Config errors: ${t.join(", ")}`), [...e];
|
|
3033
2990
|
if (this.buildFieldHeaderMap(), this.defaultExpanded = this.config.defaultExpanded ?? !0, this.expandedKeys.size === 0 && this.defaultExpanded && this.pivotResult) {
|
|
3034
|
-
const i =
|
|
3035
|
-
for (const
|
|
3036
|
-
this.expandedKeys.add(
|
|
2991
|
+
const i = $(this.pivotResult.rows);
|
|
2992
|
+
for (const s of i)
|
|
2993
|
+
this.expandedKeys.add(s);
|
|
3037
2994
|
}
|
|
3038
|
-
if (this.pivotResult =
|
|
3039
|
-
const i =
|
|
3040
|
-
for (const
|
|
3041
|
-
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);
|
|
3042
2999
|
}
|
|
3043
|
-
const
|
|
3044
|
-
return
|
|
3000
|
+
const n = this.config.indentWidth ?? 20;
|
|
3001
|
+
return Nt(
|
|
3045
3002
|
this.pivotResult.rows,
|
|
3046
3003
|
this.expandedKeys,
|
|
3047
3004
|
this.defaultExpanded
|
|
@@ -3053,7 +3010,7 @@ class I extends C {
|
|
|
3053
3010
|
__pivotHasChildren: !!i.children?.length,
|
|
3054
3011
|
__pivotExpanded: this.expandedKeys.has(i.rowKey),
|
|
3055
3012
|
__pivotRowCount: i.rowCount ?? 0,
|
|
3056
|
-
__pivotIndent: i.depth *
|
|
3013
|
+
__pivotIndent: i.depth * n,
|
|
3057
3014
|
__pivotTotal: i.total,
|
|
3058
3015
|
...i.values
|
|
3059
3016
|
}));
|
|
@@ -3061,18 +3018,18 @@ class I extends C {
|
|
|
3061
3018
|
processColumns(e) {
|
|
3062
3019
|
if (!this.isActive || !this.pivotResult)
|
|
3063
3020
|
return [...e];
|
|
3064
|
-
const t = [],
|
|
3021
|
+
const t = [], n = (this.config.rowGroupFields ?? []).map((o) => this.fieldHeaderMap.get(o) ?? o).join(" / ");
|
|
3065
3022
|
t.push({
|
|
3066
3023
|
field: "__pivotLabel",
|
|
3067
|
-
header:
|
|
3024
|
+
header: n || "Group",
|
|
3068
3025
|
width: 200
|
|
3069
3026
|
});
|
|
3070
|
-
for (const
|
|
3027
|
+
for (const o of this.pivotResult.columnKeys)
|
|
3071
3028
|
for (const i of this.config.valueFields ?? []) {
|
|
3072
|
-
const
|
|
3029
|
+
const s = te([o], i.field), l = i.header || this.fieldHeaderMap.get(i.field) || i.field;
|
|
3073
3030
|
t.push({
|
|
3074
|
-
field:
|
|
3075
|
-
header: `${
|
|
3031
|
+
field: s,
|
|
3032
|
+
header: `${o} - ${l} (${i.aggFunc})`,
|
|
3076
3033
|
width: 120,
|
|
3077
3034
|
type: "number"
|
|
3078
3035
|
});
|
|
@@ -3085,13 +3042,13 @@ class I extends C {
|
|
|
3085
3042
|
}), t;
|
|
3086
3043
|
}
|
|
3087
3044
|
renderRow(e, t) {
|
|
3088
|
-
const
|
|
3089
|
-
return
|
|
3045
|
+
const n = e;
|
|
3046
|
+
return n.__pivotRowKey && n.__pivotHasChildren ? Ot(n, t, {
|
|
3090
3047
|
columns: this.gridColumns,
|
|
3091
|
-
onToggle: (
|
|
3092
|
-
resolveIcon: (
|
|
3093
|
-
setIcon: (
|
|
3094
|
-
}) :
|
|
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);
|
|
3095
3052
|
}
|
|
3096
3053
|
/**
|
|
3097
3054
|
* Remove pivot-specific classes, attributes, and inline styles from a row element.
|
|
@@ -3114,14 +3071,14 @@ class I extends C {
|
|
|
3114
3071
|
const t = e.querySelector(".tbw-scroll-area") ?? e.querySelector(".tbw-grid-content") ?? e.children[0];
|
|
3115
3072
|
if (!t) return;
|
|
3116
3073
|
this.grandTotalFooter || (this.grandTotalFooter = document.createElement("div"), this.grandTotalFooter.className = "pivot-grand-total-footer", t.appendChild(this.grandTotalFooter));
|
|
3117
|
-
const
|
|
3074
|
+
const n = {
|
|
3118
3075
|
__pivotRowKey: "__grandTotal",
|
|
3119
3076
|
__pivotLabel: "Grand Total",
|
|
3120
3077
|
__pivotIsGrandTotal: !0,
|
|
3121
3078
|
__pivotTotal: this.pivotResult.grandTotal,
|
|
3122
3079
|
...this.pivotResult.totals
|
|
3123
3080
|
};
|
|
3124
|
-
|
|
3081
|
+
Vt(n, this.grandTotalFooter, this.gridColumns);
|
|
3125
3082
|
}
|
|
3126
3083
|
/**
|
|
3127
3084
|
* Remove the grand total footer element.
|
|
@@ -3141,7 +3098,7 @@ class I extends C {
|
|
|
3141
3098
|
}
|
|
3142
3099
|
expandAll() {
|
|
3143
3100
|
if (this.pivotResult) {
|
|
3144
|
-
const e =
|
|
3101
|
+
const e = $(this.pivotResult.rows);
|
|
3145
3102
|
for (const t of e)
|
|
3146
3103
|
this.expandedKeys.add(t);
|
|
3147
3104
|
this.requestRender();
|
|
@@ -3180,16 +3137,16 @@ class I extends C {
|
|
|
3180
3137
|
}
|
|
3181
3138
|
// ===== Tool Panel API =====
|
|
3182
3139
|
showPanel() {
|
|
3183
|
-
this.grid.openToolPanel(
|
|
3140
|
+
this.grid.openToolPanel(L.PANEL_ID);
|
|
3184
3141
|
}
|
|
3185
3142
|
hidePanel() {
|
|
3186
3143
|
this.grid.closeToolPanel();
|
|
3187
3144
|
}
|
|
3188
3145
|
togglePanel() {
|
|
3189
|
-
this.grid.toggleToolPanel(
|
|
3146
|
+
this.grid.toggleToolPanel(L.PANEL_ID);
|
|
3190
3147
|
}
|
|
3191
3148
|
isPanelVisible() {
|
|
3192
|
-
return this.grid.activeToolPanel ===
|
|
3149
|
+
return this.grid.activeToolPanel === L.PANEL_ID;
|
|
3193
3150
|
}
|
|
3194
3151
|
// ===== Private Helpers =====
|
|
3195
3152
|
get gridColumns() {
|
|
@@ -3208,9 +3165,9 @@ class I extends C {
|
|
|
3208
3165
|
const e = this.grid;
|
|
3209
3166
|
try {
|
|
3210
3167
|
const t = e.getAllColumns?.() ?? e.columns ?? [];
|
|
3211
|
-
return this.originalColumns = t.filter((
|
|
3212
|
-
field:
|
|
3213
|
-
header:
|
|
3168
|
+
return this.originalColumns = t.filter((n) => !n.field.startsWith("__pivot")).map((n) => ({
|
|
3169
|
+
field: n.field,
|
|
3170
|
+
header: n.header ?? n.field
|
|
3214
3171
|
})), this.originalColumns;
|
|
3215
3172
|
} catch {
|
|
3216
3173
|
return [];
|
|
@@ -3219,68 +3176,68 @@ class I extends C {
|
|
|
3219
3176
|
renderPanel(e) {
|
|
3220
3177
|
this.panelContainer = e, this.originalColumns.length === 0 && this.captureOriginalColumns();
|
|
3221
3178
|
const t = {
|
|
3222
|
-
onTogglePivot: (
|
|
3223
|
-
|
|
3179
|
+
onTogglePivot: (n) => {
|
|
3180
|
+
n ? this.enablePivot() : this.disablePivot(), this.refreshPanel();
|
|
3224
3181
|
},
|
|
3225
|
-
onAddFieldToZone: (
|
|
3226
|
-
onRemoveFieldFromZone: (
|
|
3227
|
-
onAddValueField: (
|
|
3228
|
-
onRemoveValueField: (
|
|
3229
|
-
onUpdateValueAggFunc: (
|
|
3230
|
-
onOptionChange: (
|
|
3231
|
-
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();
|
|
3232
3189
|
},
|
|
3233
3190
|
getAvailableFields: () => this.getAvailableFields()
|
|
3234
3191
|
};
|
|
3235
|
-
return
|
|
3192
|
+
return qt(e, this.config, this.isActive, t);
|
|
3236
3193
|
}
|
|
3237
3194
|
refreshPanel() {
|
|
3238
3195
|
this.panelContainer && (this.panelContainer.innerHTML = "", this.renderPanel(this.panelContainer));
|
|
3239
3196
|
}
|
|
3240
3197
|
addFieldToZone(e, t) {
|
|
3241
3198
|
if (t === "rowGroups") {
|
|
3242
|
-
const
|
|
3243
|
-
|
|
3199
|
+
const n = this.config.rowGroupFields ?? [];
|
|
3200
|
+
n.includes(e) || (this.config.rowGroupFields = [...n, e]);
|
|
3244
3201
|
} else {
|
|
3245
|
-
const
|
|
3246
|
-
|
|
3202
|
+
const n = this.config.columnGroupFields ?? [];
|
|
3203
|
+
n.includes(e) || (this.config.columnGroupFields = [...n, e]);
|
|
3247
3204
|
}
|
|
3248
3205
|
this.removeFromOtherZones(e, t), this.isActive && this.refresh(), this.refreshPanel();
|
|
3249
3206
|
}
|
|
3250
3207
|
removeFieldFromZone(e, t) {
|
|
3251
|
-
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();
|
|
3252
3209
|
}
|
|
3253
3210
|
removeFromOtherZones(e, t) {
|
|
3254
|
-
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));
|
|
3255
3212
|
}
|
|
3256
3213
|
addValueField(e, t) {
|
|
3257
|
-
const
|
|
3258
|
-
|
|
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();
|
|
3259
3216
|
}
|
|
3260
3217
|
removeValueField(e) {
|
|
3261
3218
|
this.config.valueFields = (this.config.valueFields ?? []).filter((t) => t.field !== e), this.isActive && this.refresh(), this.refreshPanel();
|
|
3262
3219
|
}
|
|
3263
3220
|
updateValueAggFunc(e, t) {
|
|
3264
|
-
const
|
|
3265
|
-
|
|
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();
|
|
3266
3223
|
}
|
|
3267
3224
|
// ===== Styles =====
|
|
3268
|
-
styles =
|
|
3225
|
+
styles = Wt;
|
|
3269
3226
|
}
|
|
3270
|
-
function
|
|
3271
|
-
const e =
|
|
3227
|
+
function $t(r) {
|
|
3228
|
+
const e = r.sticky;
|
|
3272
3229
|
if (e === "left" || e === "right")
|
|
3273
3230
|
return !1;
|
|
3274
|
-
const t =
|
|
3275
|
-
return
|
|
3231
|
+
const t = r.meta ?? {}, n = t.sticky;
|
|
3232
|
+
return n === "left" || n === "right" ? !1 : t.lockPosition !== !0 && t.suppressMovable !== !0;
|
|
3276
3233
|
}
|
|
3277
|
-
function
|
|
3278
|
-
if (e === t || e < 0 || e >=
|
|
3279
|
-
const
|
|
3280
|
-
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;
|
|
3281
3238
|
}
|
|
3282
|
-
const
|
|
3283
|
-
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 {
|
|
3284
3241
|
name = "reorder";
|
|
3285
3242
|
version = "1.0.0";
|
|
3286
3243
|
get defaultConfig() {
|
|
@@ -3299,8 +3256,8 @@ class io extends C {
|
|
|
3299
3256
|
super.attach(e), e.addEventListener(
|
|
3300
3257
|
"column-reorder-request",
|
|
3301
3258
|
(t) => {
|
|
3302
|
-
const
|
|
3303
|
-
|
|
3259
|
+
const n = t.detail;
|
|
3260
|
+
n?.field && typeof n.toIndex == "number" && this.moveColumn(n.field, n.toIndex);
|
|
3304
3261
|
},
|
|
3305
3262
|
{ signal: this.disconnectSignal }
|
|
3306
3263
|
);
|
|
@@ -3313,39 +3270,39 @@ class io extends C {
|
|
|
3313
3270
|
afterRender() {
|
|
3314
3271
|
const e = this.shadowRoot;
|
|
3315
3272
|
if (!e) return;
|
|
3316
|
-
e.querySelectorAll(".header-row > .cell").forEach((
|
|
3317
|
-
const
|
|
3273
|
+
e.querySelectorAll(".header-row > .cell").forEach((n) => {
|
|
3274
|
+
const o = n, i = o.getAttribute("data-field");
|
|
3318
3275
|
if (!i) return;
|
|
3319
|
-
const
|
|
3320
|
-
if (!
|
|
3321
|
-
|
|
3276
|
+
const s = this.columns.find((l) => l.field === i);
|
|
3277
|
+
if (!s || !$t(s)) {
|
|
3278
|
+
o.draggable = !1;
|
|
3322
3279
|
return;
|
|
3323
3280
|
}
|
|
3324
|
-
|
|
3281
|
+
o.draggable = !0, !o.getAttribute("data-dragstart-bound") && (o.setAttribute("data-dragstart-bound", "true"), o.addEventListener("dragstart", (l) => {
|
|
3325
3282
|
const d = this.getColumnOrder().indexOf(i);
|
|
3326
|
-
this.isDragging = !0, this.draggedField = i, this.draggedIndex = d, l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", i)),
|
|
3327
|
-
}),
|
|
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", () => {
|
|
3328
3285
|
this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, e.querySelectorAll(".header-row > .cell").forEach((l) => {
|
|
3329
3286
|
l.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
|
|
3330
3287
|
});
|
|
3331
|
-
}),
|
|
3288
|
+
}), o.addEventListener("dragover", (l) => {
|
|
3332
3289
|
if (l.preventDefault(), !this.isDragging || this.draggedField === i) return;
|
|
3333
|
-
const a =
|
|
3334
|
-
this.dropIndex = l.clientX < d ? u : u + 1,
|
|
3335
|
-
}),
|
|
3336
|
-
|
|
3337
|
-
}),
|
|
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) => {
|
|
3338
3295
|
l.preventDefault();
|
|
3339
3296
|
const a = this.draggedField, d = this.draggedIndex, c = this.dropIndex;
|
|
3340
3297
|
if (!this.isDragging || a === null || d === null || c === null)
|
|
3341
3298
|
return;
|
|
3342
|
-
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 = {
|
|
3343
3300
|
field: a,
|
|
3344
3301
|
fromIndex: d,
|
|
3345
3302
|
toIndex: u,
|
|
3346
|
-
columnOrder:
|
|
3303
|
+
columnOrder: g
|
|
3347
3304
|
};
|
|
3348
|
-
this.grid.setColumnOrder(
|
|
3305
|
+
this.grid.setColumnOrder(g), this.emit("column-move", p), this.grid.requestStateChange?.();
|
|
3349
3306
|
}));
|
|
3350
3307
|
});
|
|
3351
3308
|
}
|
|
@@ -3363,12 +3320,12 @@ class io extends C {
|
|
|
3363
3320
|
* @param toIndex - The target index
|
|
3364
3321
|
*/
|
|
3365
3322
|
moveColumn(e, t) {
|
|
3366
|
-
const
|
|
3367
|
-
if (
|
|
3368
|
-
const i =
|
|
3323
|
+
const n = this.getColumnOrder(), o = n.indexOf(e);
|
|
3324
|
+
if (o === -1) return;
|
|
3325
|
+
const i = Ae(n, o, t);
|
|
3369
3326
|
this.grid.setColumnOrder(i), this.emit("column-move", {
|
|
3370
3327
|
field: e,
|
|
3371
|
-
fromIndex:
|
|
3328
|
+
fromIndex: o,
|
|
3372
3329
|
toIndex: t,
|
|
3373
3330
|
columnOrder: i
|
|
3374
3331
|
}), this.grid.requestStateChange?.();
|
|
@@ -3388,40 +3345,332 @@ class io extends C {
|
|
|
3388
3345
|
this.grid.setColumnOrder(e), this.grid.requestStateChange?.();
|
|
3389
3346
|
}
|
|
3390
3347
|
// ===== Styles =====
|
|
3391
|
-
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;
|
|
3392
3641
|
}
|
|
3393
|
-
function
|
|
3394
|
-
return Math.floor(
|
|
3642
|
+
function q(r, e) {
|
|
3643
|
+
return Math.floor(r / e);
|
|
3395
3644
|
}
|
|
3396
|
-
function
|
|
3645
|
+
function en(r, e) {
|
|
3397
3646
|
return {
|
|
3398
|
-
start:
|
|
3399
|
-
end: (
|
|
3647
|
+
start: r * e,
|
|
3648
|
+
end: (r + 1) * e
|
|
3400
3649
|
};
|
|
3401
3650
|
}
|
|
3402
|
-
function
|
|
3403
|
-
const
|
|
3404
|
-
for (let
|
|
3405
|
-
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);
|
|
3406
3655
|
return i;
|
|
3407
3656
|
}
|
|
3408
|
-
async function
|
|
3409
|
-
const
|
|
3410
|
-
return
|
|
3411
|
-
startRow:
|
|
3412
|
-
endRow:
|
|
3413
|
-
sortModel:
|
|
3414
|
-
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
|
|
3415
3664
|
});
|
|
3416
3665
|
}
|
|
3417
|
-
function
|
|
3418
|
-
const
|
|
3419
|
-
if (!
|
|
3420
|
-
const i =
|
|
3421
|
-
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];
|
|
3422
3671
|
}
|
|
3423
|
-
const
|
|
3424
|
-
class
|
|
3672
|
+
const on = 100;
|
|
3673
|
+
class _n extends x {
|
|
3425
3674
|
name = "serverSide";
|
|
3426
3675
|
version = "1.0.0";
|
|
3427
3676
|
get defaultConfig() {
|
|
@@ -3448,13 +3697,13 @@ class ro extends C {
|
|
|
3448
3697
|
*/
|
|
3449
3698
|
loadRequiredBlocks() {
|
|
3450
3699
|
if (!this.dataSource) return;
|
|
3451
|
-
const e = this.grid, t = this.config.cacheBlockSize ?? 100,
|
|
3452
|
-
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)
|
|
3453
3702
|
if (!(this.loadedBlocks.has(i) || this.loadingBlocks.has(i))) {
|
|
3454
3703
|
if (this.loadingBlocks.size >= (this.config.maxConcurrentRequests ?? 2))
|
|
3455
3704
|
break;
|
|
3456
|
-
this.loadingBlocks.add(i),
|
|
3457
|
-
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();
|
|
3458
3707
|
}).catch(() => {
|
|
3459
3708
|
this.loadingBlocks.delete(i);
|
|
3460
3709
|
});
|
|
@@ -3464,16 +3713,16 @@ class ro extends C {
|
|
|
3464
3713
|
processRows(e) {
|
|
3465
3714
|
if (!this.dataSource) return [...e];
|
|
3466
3715
|
const t = [];
|
|
3467
|
-
for (let
|
|
3468
|
-
const
|
|
3469
|
-
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 });
|
|
3470
3719
|
}
|
|
3471
3720
|
return t;
|
|
3472
3721
|
}
|
|
3473
3722
|
onScroll(e) {
|
|
3474
3723
|
this.dataSource && (this.loadRequiredBlocks(), this.scrollDebounceTimer && clearTimeout(this.scrollDebounceTimer), this.scrollDebounceTimer = setTimeout(() => {
|
|
3475
3724
|
this.loadRequiredBlocks();
|
|
3476
|
-
},
|
|
3725
|
+
}, on));
|
|
3477
3726
|
}
|
|
3478
3727
|
// ===== Public API =====
|
|
3479
3728
|
/**
|
|
@@ -3483,8 +3732,8 @@ class ro extends C {
|
|
|
3483
3732
|
setDataSource(e) {
|
|
3484
3733
|
this.dataSource = e, this.loadedBlocks.clear(), this.loadingBlocks.clear();
|
|
3485
3734
|
const t = this.config.cacheBlockSize ?? 100;
|
|
3486
|
-
|
|
3487
|
-
this.loadedBlocks.set(0,
|
|
3735
|
+
Ie(e, 0, t, {}).then((n) => {
|
|
3736
|
+
this.loadedBlocks.set(0, n.rows), this.totalRowCount = n.totalRowCount, this.requestRender();
|
|
3488
3737
|
});
|
|
3489
3738
|
}
|
|
3490
3739
|
/**
|
|
@@ -3510,8 +3759,8 @@ class ro extends C {
|
|
|
3510
3759
|
* @param rowIndex - Row index to check
|
|
3511
3760
|
*/
|
|
3512
3761
|
isRowLoaded(e) {
|
|
3513
|
-
const t = this.config.cacheBlockSize ?? 100,
|
|
3514
|
-
return this.loadedBlocks.has(
|
|
3762
|
+
const t = this.config.cacheBlockSize ?? 100, n = q(e, t);
|
|
3763
|
+
return this.loadedBlocks.has(n);
|
|
3515
3764
|
}
|
|
3516
3765
|
/**
|
|
3517
3766
|
* Get the number of loaded cache blocks.
|
|
@@ -3520,60 +3769,299 @@ class ro extends C {
|
|
|
3520
3769
|
return this.loadedBlocks.size;
|
|
3521
3770
|
}
|
|
3522
3771
|
}
|
|
3523
|
-
function
|
|
3524
|
-
|
|
3525
|
-
|
|
3526
|
-
|
|
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();
|
|
3527
4015
|
return {
|
|
3528
|
-
undoStack:
|
|
4016
|
+
undoStack: n,
|
|
3529
4017
|
redoStack: []
|
|
3530
4018
|
// Clear redo on new action
|
|
3531
4019
|
};
|
|
3532
4020
|
}
|
|
3533
|
-
function
|
|
3534
|
-
if (
|
|
3535
|
-
return { newState:
|
|
3536
|
-
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();
|
|
3537
4025
|
return t ? {
|
|
3538
4026
|
newState: {
|
|
3539
4027
|
undoStack: e,
|
|
3540
|
-
redoStack: [...
|
|
4028
|
+
redoStack: [...r.redoStack, t]
|
|
3541
4029
|
},
|
|
3542
4030
|
action: t
|
|
3543
|
-
} : { newState:
|
|
4031
|
+
} : { newState: r, action: null };
|
|
3544
4032
|
}
|
|
3545
|
-
function
|
|
3546
|
-
if (
|
|
3547
|
-
return { newState:
|
|
3548
|
-
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();
|
|
3549
4037
|
return t ? {
|
|
3550
4038
|
newState: {
|
|
3551
|
-
undoStack: [...
|
|
4039
|
+
undoStack: [...r.undoStack, t],
|
|
3552
4040
|
redoStack: e
|
|
3553
4041
|
},
|
|
3554
4042
|
action: t
|
|
3555
|
-
} : { newState:
|
|
4043
|
+
} : { newState: r, action: null };
|
|
3556
4044
|
}
|
|
3557
|
-
function
|
|
3558
|
-
return
|
|
4045
|
+
function cn(r) {
|
|
4046
|
+
return r.undoStack.length > 0;
|
|
3559
4047
|
}
|
|
3560
|
-
function
|
|
3561
|
-
return
|
|
4048
|
+
function un(r) {
|
|
4049
|
+
return r.redoStack.length > 0;
|
|
3562
4050
|
}
|
|
3563
|
-
function
|
|
4051
|
+
function hn() {
|
|
3564
4052
|
return { undoStack: [], redoStack: [] };
|
|
3565
4053
|
}
|
|
3566
|
-
function
|
|
4054
|
+
function gn(r, e, t, n) {
|
|
3567
4055
|
return {
|
|
3568
4056
|
type: "cell-edit",
|
|
3569
|
-
rowIndex:
|
|
4057
|
+
rowIndex: r,
|
|
3570
4058
|
field: e,
|
|
3571
4059
|
oldValue: t,
|
|
3572
|
-
newValue:
|
|
4060
|
+
newValue: n,
|
|
3573
4061
|
timestamp: Date.now()
|
|
3574
4062
|
};
|
|
3575
4063
|
}
|
|
3576
|
-
class
|
|
4064
|
+
class Fn extends x {
|
|
3577
4065
|
name = "undoRedo";
|
|
3578
4066
|
version = "1.0.0";
|
|
3579
4067
|
get defaultConfig() {
|
|
@@ -3596,24 +4084,24 @@ class so extends C {
|
|
|
3596
4084
|
* - Ctrl+Y / Cmd+Y / Ctrl+Shift+Z / Cmd+Shift+Z: Redo
|
|
3597
4085
|
*/
|
|
3598
4086
|
onKeyDown(e) {
|
|
3599
|
-
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);
|
|
3600
4088
|
if (t) {
|
|
3601
|
-
const
|
|
3602
|
-
if (
|
|
4089
|
+
const o = Te({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
4090
|
+
if (o.action) {
|
|
3603
4091
|
const i = this.rows;
|
|
3604
|
-
i[
|
|
3605
|
-
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,
|
|
3606
4094
|
type: "undo"
|
|
3607
4095
|
}), this.requestRender();
|
|
3608
4096
|
}
|
|
3609
4097
|
return !0;
|
|
3610
4098
|
}
|
|
3611
|
-
if (
|
|
3612
|
-
const
|
|
3613
|
-
if (
|
|
4099
|
+
if (n) {
|
|
4100
|
+
const o = Me({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
4101
|
+
if (o.action) {
|
|
3614
4102
|
const i = this.rows;
|
|
3615
|
-
i[
|
|
3616
|
-
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,
|
|
3617
4105
|
type: "redo"
|
|
3618
4106
|
}), this.requestRender();
|
|
3619
4107
|
}
|
|
@@ -3631,13 +4119,13 @@ class so extends C {
|
|
|
3631
4119
|
* @param oldValue - The value before the edit
|
|
3632
4120
|
* @param newValue - The value after the edit
|
|
3633
4121
|
*/
|
|
3634
|
-
recordEdit(e, t,
|
|
3635
|
-
const i =
|
|
4122
|
+
recordEdit(e, t, n, o) {
|
|
4123
|
+
const i = gn(e, t, n, o), s = dn(
|
|
3636
4124
|
{ undoStack: this.undoStack, redoStack: this.redoStack },
|
|
3637
4125
|
i,
|
|
3638
4126
|
this.config.maxHistorySize ?? 100
|
|
3639
4127
|
);
|
|
3640
|
-
this.undoStack =
|
|
4128
|
+
this.undoStack = s.undoStack, this.redoStack = s.redoStack;
|
|
3641
4129
|
}
|
|
3642
4130
|
/**
|
|
3643
4131
|
* Programmatically undo the last action.
|
|
@@ -3645,7 +4133,7 @@ class so extends C {
|
|
|
3645
4133
|
* @returns The undone action, or null if nothing to undo
|
|
3646
4134
|
*/
|
|
3647
4135
|
undo() {
|
|
3648
|
-
const e =
|
|
4136
|
+
const e = Te({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
3649
4137
|
if (e.action) {
|
|
3650
4138
|
const t = this.rows;
|
|
3651
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();
|
|
@@ -3658,7 +4146,7 @@ class so extends C {
|
|
|
3658
4146
|
* @returns The redone action, or null if nothing to redo
|
|
3659
4147
|
*/
|
|
3660
4148
|
redo() {
|
|
3661
|
-
const e =
|
|
4149
|
+
const e = Me({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
3662
4150
|
if (e.action) {
|
|
3663
4151
|
const t = this.rows;
|
|
3664
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();
|
|
@@ -3669,19 +4157,19 @@ class so extends C {
|
|
|
3669
4157
|
* Check if there are any actions that can be undone.
|
|
3670
4158
|
*/
|
|
3671
4159
|
canUndo() {
|
|
3672
|
-
return
|
|
4160
|
+
return cn({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
3673
4161
|
}
|
|
3674
4162
|
/**
|
|
3675
4163
|
* Check if there are any actions that can be redone.
|
|
3676
4164
|
*/
|
|
3677
4165
|
canRedo() {
|
|
3678
|
-
return
|
|
4166
|
+
return un({ undoStack: this.undoStack, redoStack: this.redoStack });
|
|
3679
4167
|
}
|
|
3680
4168
|
/**
|
|
3681
4169
|
* Clear all undo/redo history.
|
|
3682
4170
|
*/
|
|
3683
4171
|
clearHistory() {
|
|
3684
|
-
const e =
|
|
4172
|
+
const e = hn();
|
|
3685
4173
|
this.undoStack = e.undoStack, this.redoStack = e.redoStack;
|
|
3686
4174
|
}
|
|
3687
4175
|
/**
|
|
@@ -3697,12 +4185,12 @@ class so extends C {
|
|
|
3697
4185
|
return [...this.redoStack];
|
|
3698
4186
|
}
|
|
3699
4187
|
}
|
|
3700
|
-
const
|
|
3701
|
-
function
|
|
3702
|
-
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 ?? {};
|
|
3703
4191
|
return e.lockPosition !== !0 && e.suppressMovable !== !0;
|
|
3704
4192
|
}
|
|
3705
|
-
class T extends
|
|
4193
|
+
class T extends x {
|
|
3706
4194
|
name = "visibility";
|
|
3707
4195
|
version = "1.0.0";
|
|
3708
4196
|
/** Tool panel ID for shell integration */
|
|
@@ -3841,15 +4329,15 @@ class T extends C {
|
|
|
3841
4329
|
* Returns a cleanup function.
|
|
3842
4330
|
*/
|
|
3843
4331
|
renderPanelContent(e) {
|
|
3844
|
-
const t = this.grid,
|
|
3845
|
-
|
|
3846
|
-
const
|
|
3847
|
-
|
|
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);
|
|
3848
4336
|
const i = document.createElement("button");
|
|
3849
4337
|
return i.className = "tbw-visibility-show-all", i.textContent = "Show All", i.addEventListener("click", () => {
|
|
3850
|
-
t.showAllColumns(), this.rebuildToggles(
|
|
3851
|
-
}),
|
|
3852
|
-
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();
|
|
3853
4341
|
};
|
|
3854
4342
|
}
|
|
3855
4343
|
/**
|
|
@@ -3864,20 +4352,20 @@ class T extends C {
|
|
|
3864
4352
|
* When a reorder plugin is present, adds drag handles for reordering.
|
|
3865
4353
|
*/
|
|
3866
4354
|
rebuildToggles(e) {
|
|
3867
|
-
const t = this.grid,
|
|
4355
|
+
const t = this.grid, n = this.hasReorderPlugin();
|
|
3868
4356
|
e.innerHTML = "";
|
|
3869
|
-
const
|
|
3870
|
-
for (let i = 0; i <
|
|
3871
|
-
const
|
|
3872
|
-
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));
|
|
3873
4361
|
const d = document.createElement("label");
|
|
3874
4362
|
d.className = "tbw-visibility-label";
|
|
3875
4363
|
const c = document.createElement("input");
|
|
3876
|
-
c.type = "checkbox", c.checked =
|
|
3877
|
-
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);
|
|
3878
4366
|
});
|
|
3879
4367
|
const u = document.createElement("span");
|
|
3880
|
-
if (u.textContent = l, d.appendChild(c), d.appendChild(u),
|
|
4368
|
+
if (u.textContent = l, d.appendChild(c), d.appendChild(u), n && Ne(s)) {
|
|
3881
4369
|
const h = document.createElement("span");
|
|
3882
4370
|
h.className = "tbw-visibility-handle", this.setIcon(h, this.resolveIcon("dragHandle")), h.title = "Drag to reorder", a.appendChild(h);
|
|
3883
4371
|
}
|
|
@@ -3888,80 +4376,80 @@ class T extends C {
|
|
|
3888
4376
|
* Set up drag-and-drop event listeners for a row.
|
|
3889
4377
|
* On drop, emits a 'column-reorder-request' event for other plugins to handle.
|
|
3890
4378
|
*/
|
|
3891
|
-
setupDragListeners(e, t,
|
|
4379
|
+
setupDragListeners(e, t, n, o) {
|
|
3892
4380
|
e.addEventListener("dragstart", (i) => {
|
|
3893
|
-
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");
|
|
3894
4382
|
}), e.addEventListener("dragend", () => {
|
|
3895
|
-
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) => {
|
|
3896
4384
|
i.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
|
|
3897
4385
|
});
|
|
3898
4386
|
}), e.addEventListener("dragover", (i) => {
|
|
3899
4387
|
if (i.preventDefault(), !this.isDragging || this.draggedField === t) return;
|
|
3900
|
-
const
|
|
3901
|
-
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) => {
|
|
3902
4390
|
a !== e && a.classList.remove("drop-target", "drop-before", "drop-after");
|
|
3903
4391
|
}), e.classList.add("drop-target"), e.classList.toggle("drop-before", i.clientY < l), e.classList.toggle("drop-after", i.clientY >= l);
|
|
3904
4392
|
}), e.addEventListener("dragleave", () => {
|
|
3905
4393
|
e.classList.remove("drop-target", "drop-before", "drop-after");
|
|
3906
4394
|
}), e.addEventListener("drop", (i) => {
|
|
3907
4395
|
i.preventDefault();
|
|
3908
|
-
const
|
|
3909
|
-
if (!this.isDragging ||
|
|
4396
|
+
const s = this.draggedField, l = this.draggedIndex, a = this.dropIndex;
|
|
4397
|
+
if (!this.isDragging || s === null || l === null || a === null)
|
|
3910
4398
|
return;
|
|
3911
4399
|
const d = a > l ? a - 1 : a;
|
|
3912
4400
|
if (d !== l) {
|
|
3913
4401
|
const c = {
|
|
3914
|
-
field:
|
|
4402
|
+
field: s,
|
|
3915
4403
|
fromIndex: l,
|
|
3916
4404
|
toIndex: d
|
|
3917
4405
|
};
|
|
3918
4406
|
this.emit("column-reorder-request", c), setTimeout(() => {
|
|
3919
|
-
this.rebuildToggles(
|
|
4407
|
+
this.rebuildToggles(o);
|
|
3920
4408
|
}, 0);
|
|
3921
4409
|
}
|
|
3922
4410
|
});
|
|
3923
4411
|
}
|
|
3924
4412
|
// ===== Styles =====
|
|
3925
|
-
styles =
|
|
4413
|
+
styles = pn;
|
|
3926
4414
|
}
|
|
3927
4415
|
export {
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
|
|
3933
|
-
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
|
|
3941
|
-
|
|
3942
|
-
|
|
3943
|
-
|
|
3944
|
-
|
|
3945
|
-
|
|
3946
|
-
|
|
3947
|
-
|
|
3948
|
-
|
|
3949
|
-
|
|
3950
|
-
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
|
|
3956
|
-
|
|
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,
|
|
4424
|
+
A as FilteringPlugin,
|
|
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,
|
|
3957
4445
|
T as VisibilityPlugin,
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
|
|
3962
|
-
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
|
|
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
|
|
3966
4454
|
};
|
|
3967
4455
|
//# sourceMappingURL=all.js.map
|