@toolbox-web/grid 1.7.0 → 1.9.0
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 +51 -15
- package/all.js +717 -574
- package/all.js.map +1 -1
- package/index.js +586 -505
- package/index.js.map +1 -1
- package/lib/core/grid.d.ts +22 -1
- package/lib/core/grid.d.ts.map +1 -1
- package/lib/core/internal/header.d.ts.map +1 -1
- package/lib/core/internal/keyboard.d.ts.map +1 -1
- package/lib/core/internal/rows.d.ts.map +1 -1
- package/lib/core/internal/utils.d.ts +46 -0
- package/lib/core/internal/utils.d.ts.map +1 -1
- package/lib/core/plugin/base-plugin.d.ts +182 -1
- package/lib/core/plugin/base-plugin.d.ts.map +1 -1
- package/lib/core/plugin/index.d.ts +1 -1
- package/lib/core/plugin/index.d.ts.map +1 -1
- package/lib/core/plugin/plugin-manager.d.ts +56 -1
- package/lib/core/plugin/plugin-manager.d.ts.map +1 -1
- package/lib/core/plugin/types.d.ts +36 -0
- package/lib/core/plugin/types.d.ts.map +1 -1
- package/lib/core/types.d.ts +1232 -28
- package/lib/core/types.d.ts.map +1 -1
- package/lib/plugins/clipboard/ClipboardPlugin.d.ts.map +1 -1
- package/lib/plugins/clipboard/index.js +140 -87
- package/lib/plugins/clipboard/index.js.map +1 -1
- package/lib/plugins/column-virtualization/index.js +64 -7
- package/lib/plugins/column-virtualization/index.js.map +1 -1
- package/lib/plugins/context-menu/index.js +101 -44
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/editing/EditingPlugin.d.ts +6 -1
- package/lib/plugins/editing/EditingPlugin.d.ts.map +1 -1
- package/lib/plugins/editing/index.js +95 -13
- package/lib/plugins/editing/index.js.map +1 -1
- package/lib/plugins/export/index.js +91 -34
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/FilteringPlugin.d.ts +6 -1
- package/lib/plugins/filtering/FilteringPlugin.d.ts.map +1 -1
- package/lib/plugins/filtering/index.js +192 -123
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/index.js +57 -0
- package/lib/plugins/grouping-columns/index.js.map +1 -1
- package/lib/plugins/grouping-rows/GroupingRowsPlugin.d.ts +7 -2
- package/lib/plugins/grouping-rows/GroupingRowsPlugin.d.ts.map +1 -1
- package/lib/plugins/grouping-rows/index.js +139 -60
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/master-detail/index.js +69 -12
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js +70 -13
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/PinnedColumnsPlugin.d.ts +16 -9
- package/lib/plugins/pinned-columns/PinnedColumnsPlugin.d.ts.map +1 -1
- package/lib/plugins/pinned-columns/index.js +158 -61
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-columns/pinned-columns.d.ts +24 -7
- package/lib/plugins/pinned-columns/pinned-columns.d.ts.map +1 -1
- package/lib/plugins/pinned-columns/types.d.ts +51 -2
- package/lib/plugins/pinned-columns/types.d.ts.map +1 -1
- package/lib/plugins/pinned-rows/index.js +57 -0
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js +57 -0
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/print/index.js +58 -1
- package/lib/plugins/print/index.js.map +1 -1
- package/lib/plugins/reorder/ReorderPlugin.d.ts.map +1 -1
- package/lib/plugins/reorder/column-drag.d.ts +2 -2
- package/lib/plugins/reorder/index.js +68 -17
- package/lib/plugins/reorder/index.js.map +1 -1
- package/lib/plugins/responsive/ResponsivePlugin.d.ts +6 -1
- package/lib/plugins/responsive/ResponsivePlugin.d.ts.map +1 -1
- package/lib/plugins/responsive/index.js +299 -85
- package/lib/plugins/responsive/index.js.map +1 -1
- package/lib/plugins/row-reorder/index.js +169 -112
- package/lib/plugins/row-reorder/index.js.map +1 -1
- package/lib/plugins/selection/SelectionPlugin.d.ts +14 -2
- package/lib/plugins/selection/SelectionPlugin.d.ts.map +1 -1
- package/lib/plugins/selection/index.js +84 -7
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/server-side/index.js +79 -22
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/tree/TreePlugin.d.ts +7 -1
- package/lib/plugins/tree/TreePlugin.d.ts.map +1 -1
- package/lib/plugins/tree/index.js +143 -61
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/undo-redo/UndoRedoPlugin.d.ts +6 -1
- package/lib/plugins/undo-redo/UndoRedoPlugin.d.ts.map +1 -1
- package/lib/plugins/undo-redo/index.js +79 -10
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/index.js +57 -0
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +1 -1
- package/public.d.ts +79 -1
- package/public.d.ts.map +1 -1
- package/umd/grid.all.umd.js +25 -25
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +11 -11
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/clipboard.umd.js +5 -5
- package/umd/plugins/clipboard.umd.js.map +1 -1
- package/umd/plugins/editing.umd.js +1 -1
- package/umd/plugins/editing.umd.js.map +1 -1
- package/umd/plugins/filtering.umd.js +1 -1
- package/umd/plugins/filtering.umd.js.map +1 -1
- package/umd/plugins/grouping-rows.umd.js +2 -2
- package/umd/plugins/grouping-rows.umd.js.map +1 -1
- package/umd/plugins/pinned-columns.umd.js +1 -1
- package/umd/plugins/pinned-columns.umd.js.map +1 -1
- package/umd/plugins/print.umd.js +1 -1
- package/umd/plugins/print.umd.js.map +1 -1
- package/umd/plugins/reorder.umd.js +1 -1
- package/umd/plugins/reorder.umd.js.map +1 -1
- package/umd/plugins/responsive.umd.js +1 -1
- package/umd/plugins/responsive.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js +2 -2
- package/umd/plugins/selection.umd.js.map +1 -1
- package/umd/plugins/tree.umd.js +1 -1
- package/umd/plugins/tree.umd.js.map +1 -1
- package/umd/plugins/undo-redo.umd.js +1 -1
- package/umd/plugins/undo-redo.umd.js.map +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseGridPlugin, CellClickEvent, PluginManifest } from '../../core/plugin/base-plugin';
|
|
1
|
+
import { BaseGridPlugin, CellClickEvent, PluginManifest, PluginQuery } from '../../core/plugin/base-plugin';
|
|
2
2
|
import { GroupingRowsConfig, RenderRow } from './types';
|
|
3
3
|
/**
|
|
4
4
|
* Group state information returned by getGroupState()
|
|
@@ -96,7 +96,7 @@ export interface GroupState {
|
|
|
96
96
|
*/
|
|
97
97
|
export declare class GroupingRowsPlugin extends BaseGridPlugin<GroupingRowsConfig> {
|
|
98
98
|
/**
|
|
99
|
-
* Plugin manifest - declares configuration validation rules.
|
|
99
|
+
* Plugin manifest - declares configuration validation rules and events.
|
|
100
100
|
* @internal
|
|
101
101
|
*/
|
|
102
102
|
static readonly manifest: PluginManifest<GroupingRowsConfig>;
|
|
@@ -120,6 +120,11 @@ export declare class GroupingRowsPlugin extends BaseGridPlugin<GroupingRowsConfi
|
|
|
120
120
|
private get animationStyle();
|
|
121
121
|
/** @internal */
|
|
122
122
|
detach(): void;
|
|
123
|
+
/**
|
|
124
|
+
* Handle plugin queries.
|
|
125
|
+
* @internal
|
|
126
|
+
*/
|
|
127
|
+
handleQuery(query: PluginQuery): unknown;
|
|
123
128
|
/**
|
|
124
129
|
* Auto-detect grouping configuration from grid config.
|
|
125
130
|
* Called by plugin system to determine if plugin should activate.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupingRowsPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/grouping-rows/GroupingRowsPlugin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"GroupingRowsPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/grouping-rows/GroupingRowsPlugin.ts"],"names":[],"mappings":"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"}
|
|
@@ -149,6 +149,63 @@ class C {
|
|
|
149
149
|
const r = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
|
|
150
150
|
return this.grid?.dispatchEvent?.(r), r.defaultPrevented;
|
|
151
151
|
}
|
|
152
|
+
// =========================================================================
|
|
153
|
+
// Event Bus - Plugin-to-Plugin Communication
|
|
154
|
+
// =========================================================================
|
|
155
|
+
/**
|
|
156
|
+
* Subscribe to an event from another plugin.
|
|
157
|
+
* The subscription is automatically cleaned up when this plugin is detached.
|
|
158
|
+
*
|
|
159
|
+
* @category Plugin Development
|
|
160
|
+
* @param eventType - The event type to listen for (e.g., 'filter-change')
|
|
161
|
+
* @param callback - The callback to invoke when the event is emitted
|
|
162
|
+
*
|
|
163
|
+
* @example
|
|
164
|
+
* ```typescript
|
|
165
|
+
* // In attach() or other initialization
|
|
166
|
+
* this.on('filter-change', (detail) => {
|
|
167
|
+
* console.log('Filter changed:', detail);
|
|
168
|
+
* });
|
|
169
|
+
* ```
|
|
170
|
+
*/
|
|
171
|
+
on(e, t) {
|
|
172
|
+
this.grid?._pluginManager?.subscribe(this, e, t);
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* Unsubscribe from a plugin event.
|
|
176
|
+
*
|
|
177
|
+
* @category Plugin Development
|
|
178
|
+
* @param eventType - The event type to stop listening for
|
|
179
|
+
*
|
|
180
|
+
* @example
|
|
181
|
+
* ```typescript
|
|
182
|
+
* this.off('filter-change');
|
|
183
|
+
* ```
|
|
184
|
+
*/
|
|
185
|
+
off(e) {
|
|
186
|
+
this.grid?._pluginManager?.unsubscribe(this, e);
|
|
187
|
+
}
|
|
188
|
+
/**
|
|
189
|
+
* Emit an event to other plugins via the Event Bus.
|
|
190
|
+
* This is for inter-plugin communication only; it does NOT dispatch DOM events.
|
|
191
|
+
* Use `emit()` to dispatch DOM events that external consumers can listen to.
|
|
192
|
+
*
|
|
193
|
+
* @category Plugin Development
|
|
194
|
+
* @param eventType - The event type to emit (should be declared in manifest.events)
|
|
195
|
+
* @param detail - The event payload
|
|
196
|
+
*
|
|
197
|
+
* @example
|
|
198
|
+
* ```typescript
|
|
199
|
+
* // Emit to other plugins (not DOM)
|
|
200
|
+
* this.emitPluginEvent('filter-change', { field: 'name', value: 'Alice' });
|
|
201
|
+
*
|
|
202
|
+
* // For DOM events that consumers can addEventListener to:
|
|
203
|
+
* this.emit('filter-change', { field: 'name', value: 'Alice' });
|
|
204
|
+
* ```
|
|
205
|
+
*/
|
|
206
|
+
emitPluginEvent(e, t) {
|
|
207
|
+
this.grid?._pluginManager?.emitPluginEvent(e, t);
|
|
208
|
+
}
|
|
152
209
|
/**
|
|
153
210
|
* Request a re-render of the grid.
|
|
154
211
|
*/
|
|
@@ -318,7 +375,7 @@ function A(n) {
|
|
|
318
375
|
const y = {
|
|
319
376
|
sum: (n, e) => n.reduce((t, r) => t + (Number(r[e]) || 0), 0),
|
|
320
377
|
avg: (n, e) => {
|
|
321
|
-
const t = n.reduce((r,
|
|
378
|
+
const t = n.reduce((r, i) => r + (Number(i[e]) || 0), 0);
|
|
322
379
|
return n.length ? t / n.length : 0;
|
|
323
380
|
},
|
|
324
381
|
count: (n) => n.length,
|
|
@@ -350,8 +407,8 @@ const y = {
|
|
|
350
407
|
* Run an aggregator on a set of rows.
|
|
351
408
|
*/
|
|
352
409
|
run(n, e, t, r) {
|
|
353
|
-
const
|
|
354
|
-
return
|
|
410
|
+
const i = this.get(n);
|
|
411
|
+
return i ? i(e, t, r) : void 0;
|
|
355
412
|
},
|
|
356
413
|
/**
|
|
357
414
|
* Check if an aggregator exists.
|
|
@@ -372,12 +429,12 @@ m.get.bind(m);
|
|
|
372
429
|
const _ = m.run.bind(m);
|
|
373
430
|
m.list.bind(m);
|
|
374
431
|
function v({ rows: n, config: e, expanded: t, initialExpanded: r }) {
|
|
375
|
-
const
|
|
376
|
-
if (typeof
|
|
432
|
+
const i = e.groupOn;
|
|
433
|
+
if (typeof i != "function")
|
|
377
434
|
return [];
|
|
378
435
|
const o = { key: "__root__", value: null, depth: -1, rows: [], children: /* @__PURE__ */ new Map() };
|
|
379
436
|
if (n.forEach((d) => {
|
|
380
|
-
let u =
|
|
437
|
+
let u = i(d);
|
|
381
438
|
u == null || u === !1 ? u = ["__ungrouped__"] : Array.isArray(u) || (u = [u]);
|
|
382
439
|
let a = o;
|
|
383
440
|
u.forEach((w, p) => {
|
|
@@ -387,28 +444,28 @@ function v({ rows: n, config: e, expanded: t, initialExpanded: r }) {
|
|
|
387
444
|
}), a.rows.push(d);
|
|
388
445
|
}), o.children.size === 1 && o.children.has("__ungrouped__") && o.children.get("__ungrouped__").rows.length === n.length)
|
|
389
446
|
return [];
|
|
390
|
-
const g = /* @__PURE__ */ new Set([...t, ...r ?? []]),
|
|
447
|
+
const g = /* @__PURE__ */ new Set([...t, ...r ?? []]), s = [], l = (d) => {
|
|
391
448
|
if (d === o) {
|
|
392
449
|
d.children.forEach((a) => l(a));
|
|
393
450
|
return;
|
|
394
451
|
}
|
|
395
452
|
const u = g.has(d.key);
|
|
396
|
-
|
|
453
|
+
s.push({
|
|
397
454
|
kind: "group",
|
|
398
455
|
key: d.key,
|
|
399
456
|
value: d.value,
|
|
400
457
|
depth: d.depth,
|
|
401
458
|
rows: d.rows,
|
|
402
459
|
expanded: u
|
|
403
|
-
}), u && (d.children.size ? d.children.forEach((a) => l(a)) : d.rows.forEach((a) =>
|
|
460
|
+
}), u && (d.children.size ? d.children.forEach((a) => l(a)) : d.rows.forEach((a) => s.push({ kind: "data", row: a, rowIndex: n.indexOf(a) })));
|
|
404
461
|
};
|
|
405
|
-
return l(o),
|
|
462
|
+
return l(o), s;
|
|
406
463
|
}
|
|
407
|
-
function
|
|
464
|
+
function K(n, e) {
|
|
408
465
|
const t = new Set(n);
|
|
409
466
|
return t.has(e) ? t.delete(e) : t.add(e), t;
|
|
410
467
|
}
|
|
411
|
-
function
|
|
468
|
+
function S(n) {
|
|
412
469
|
const e = /* @__PURE__ */ new Set();
|
|
413
470
|
for (const t of n)
|
|
414
471
|
t.kind === "group" && e.add(t.key);
|
|
@@ -437,10 +494,22 @@ function I(n) {
|
|
|
437
494
|
const N = "@layer tbw-plugins{.group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-grouping-rows-bg, var(--tbw-color-panel-bg));font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}.group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, .125rem .5rem)}.group-row:hover{background:var(--tbw-grouping-rows-bg-hover, var(--tbw-color-row-hover))}.group-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toggle-size, 1.25rem);height:var(--tbw-toggle-size, 1.25rem);margin-right:.25rem;background:none;border:0;font:inherit}.group-toggle:hover{background:var(--tbw-grouping-rows-toggle-hover, var(--tbw-color-row-hover));border-radius:var(--tbw-border-radius, .125rem)}.group-label{display:inline-flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.group-count{color:var(--tbw-grouping-rows-count-color, var(--tbw-color-fg-muted));font-size:var(--tbw-font-size-xs, .85em);font-weight:400}.group-aggregates{display:inline-flex;align-items:center;gap:var(--tbw-spacing-lg, 1rem);margin-left:var(--tbw-spacing-lg, 1rem);font-weight:400;font-size:var(--tbw-font-size-sm, .875em);color:var(--tbw-grouping-rows-aggregate-color, var(--tbw-color-fg-muted))}.group-aggregate{white-space:nowrap}.group-row{padding-left:calc(var(--tbw-group-depth, 0) * var(--tbw-group-indent-width, 1.25em))}.data-grid-row.tbw-group-slide-in{animation:tbw-group-slide-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.data-grid-row.tbw-group-fade-in{animation:tbw-group-fade-in var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-group-fade-in{0%{opacity:0}to{opacity:1}}}";
|
|
438
495
|
class D extends C {
|
|
439
496
|
/**
|
|
440
|
-
* Plugin manifest - declares configuration validation rules.
|
|
497
|
+
* Plugin manifest - declares configuration validation rules and events.
|
|
441
498
|
* @internal
|
|
442
499
|
*/
|
|
443
500
|
static manifest = {
|
|
501
|
+
events: [
|
|
502
|
+
{
|
|
503
|
+
type: "grouping-state-change",
|
|
504
|
+
description: "Emitted when groups are expanded/collapsed. Subscribers can react to row visibility changes."
|
|
505
|
+
}
|
|
506
|
+
],
|
|
507
|
+
queries: [
|
|
508
|
+
{
|
|
509
|
+
type: "canMoveRow",
|
|
510
|
+
description: "Returns false for group header rows (cannot be reordered)"
|
|
511
|
+
}
|
|
512
|
+
],
|
|
444
513
|
configRules: [
|
|
445
514
|
{
|
|
446
515
|
id: "groupingRows/accordion-defaultExpanded",
|
|
@@ -492,6 +561,14 @@ class D extends C {
|
|
|
492
561
|
detach() {
|
|
493
562
|
this.expandedKeys.clear(), this.flattenedRows = [], this.isActive = !1, this.previousVisibleKeys.clear(), this.keysToAnimate.clear(), this.hasAppliedDefaultExpanded = !1;
|
|
494
563
|
}
|
|
564
|
+
/**
|
|
565
|
+
* Handle plugin queries.
|
|
566
|
+
* @internal
|
|
567
|
+
*/
|
|
568
|
+
handleQuery(e) {
|
|
569
|
+
if (e.type === "canMoveRow" && e.context?.__isGroupRow === !0)
|
|
570
|
+
return !1;
|
|
571
|
+
}
|
|
495
572
|
// #endregion
|
|
496
573
|
// #region Hooks
|
|
497
574
|
/**
|
|
@@ -514,33 +591,33 @@ class D extends C {
|
|
|
514
591
|
});
|
|
515
592
|
if (r.length === 0)
|
|
516
593
|
return this.isActive = !1, this.flattenedRows = [], [...e];
|
|
517
|
-
let
|
|
594
|
+
let i;
|
|
518
595
|
if (!this.hasAppliedDefaultExpanded && this.expandedKeys.size === 0 && t.defaultExpanded !== !1) {
|
|
519
|
-
const
|
|
520
|
-
|
|
596
|
+
const s = T(r);
|
|
597
|
+
i = G(t.defaultExpanded ?? !1, s), i.size > 0 && (this.expandedKeys = new Set(i), this.hasAppliedDefaultExpanded = !0);
|
|
521
598
|
}
|
|
522
599
|
const o = v({
|
|
523
600
|
rows: [...e],
|
|
524
601
|
config: t,
|
|
525
602
|
expanded: this.expandedKeys,
|
|
526
|
-
initialExpanded:
|
|
603
|
+
initialExpanded: i
|
|
527
604
|
});
|
|
528
605
|
this.isActive = !0, this.flattenedRows = o, this.keysToAnimate.clear();
|
|
529
606
|
const g = /* @__PURE__ */ new Set();
|
|
530
|
-
return o.forEach((
|
|
531
|
-
if (
|
|
607
|
+
return o.forEach((s, l) => {
|
|
608
|
+
if (s.kind === "data") {
|
|
532
609
|
const d = `data-${l}`;
|
|
533
610
|
g.add(d), this.previousVisibleKeys.has(d) || this.keysToAnimate.add(d);
|
|
534
611
|
}
|
|
535
|
-
}), this.previousVisibleKeys = g, o.map((
|
|
612
|
+
}), this.previousVisibleKeys = g, o.map((s) => s.kind === "group" ? {
|
|
536
613
|
__isGroupRow: !0,
|
|
537
|
-
__groupKey:
|
|
538
|
-
__groupValue:
|
|
539
|
-
__groupDepth:
|
|
540
|
-
__groupRows:
|
|
541
|
-
__groupExpanded:
|
|
542
|
-
__groupRowCount: I(
|
|
543
|
-
} :
|
|
614
|
+
__groupKey: s.key,
|
|
615
|
+
__groupValue: s.value,
|
|
616
|
+
__groupDepth: s.depth,
|
|
617
|
+
__groupRows: s.rows,
|
|
618
|
+
__groupExpanded: s.expanded,
|
|
619
|
+
__groupRowCount: I(s)
|
|
620
|
+
} : s.row);
|
|
544
621
|
}
|
|
545
622
|
/** @internal */
|
|
546
623
|
onCellClick(e) {
|
|
@@ -562,17 +639,17 @@ class D extends C {
|
|
|
562
639
|
renderRow(e, t, r) {
|
|
563
640
|
if (!e?.__isGroupRow)
|
|
564
641
|
return !1;
|
|
565
|
-
const
|
|
566
|
-
if (
|
|
567
|
-
const
|
|
642
|
+
const i = this.config;
|
|
643
|
+
if (i.groupRowRenderer) {
|
|
644
|
+
const s = () => {
|
|
568
645
|
this.toggle(e.__groupKey);
|
|
569
|
-
}, l =
|
|
646
|
+
}, l = i.groupRowRenderer({
|
|
570
647
|
key: e.__groupKey,
|
|
571
648
|
value: e.__groupValue,
|
|
572
649
|
depth: e.__groupDepth,
|
|
573
650
|
rows: e.__groupRows,
|
|
574
651
|
expanded: e.__groupExpanded,
|
|
575
|
-
toggleExpand:
|
|
652
|
+
toggleExpand: s
|
|
576
653
|
});
|
|
577
654
|
if (l)
|
|
578
655
|
return t.className = "data-grid-row group-row", t.__isCustomRow = !0, t.setAttribute("data-group-depth", String(e.__groupDepth)), typeof l == "string" ? t.innerHTML = l : (t.innerHTML = "", t.appendChild(l)), !0;
|
|
@@ -580,7 +657,7 @@ class D extends C {
|
|
|
580
657
|
const o = () => {
|
|
581
658
|
this.toggle(e.__groupKey);
|
|
582
659
|
};
|
|
583
|
-
return t.className = "data-grid-row 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.setProperty("--tbw-group-depth", String(e.__groupDepth || 0)),
|
|
660
|
+
return t.className = "data-grid-row 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.setProperty("--tbw-group-depth", String(e.__groupDepth || 0)), i.indentWidth !== void 0 && t.style.setProperty("--tbw-group-indent-width", `${i.indentWidth}px`), t.style.height = "", t.innerHTML = "", i.fullWidth !== !1 ? this.renderFullWidthGroupRow(e, t, o) : this.renderPerColumnGroupRow(e, t, o), !0;
|
|
584
661
|
}
|
|
585
662
|
/** @internal */
|
|
586
663
|
afterRender() {
|
|
@@ -589,9 +666,9 @@ class D extends C {
|
|
|
589
666
|
const t = this.gridElement?.querySelector(".rows");
|
|
590
667
|
if (!t) return;
|
|
591
668
|
const r = e === "fade" ? "tbw-group-fade-in" : "tbw-group-slide-in";
|
|
592
|
-
for (const
|
|
593
|
-
const o =
|
|
594
|
-
l && this.keysToAnimate.has(l) && (
|
|
669
|
+
for (const i of t.querySelectorAll(".data-grid-row:not(.group-row)")) {
|
|
670
|
+
const o = i.querySelector(".cell[data-row]"), g = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1, l = this.flattenedRows[g]?.kind === "data" ? `data-${g}` : void 0;
|
|
671
|
+
l && this.keysToAnimate.has(l) && (i.classList.add(r), i.addEventListener("animationend", () => i.classList.remove(r), { once: !0 }));
|
|
595
672
|
}
|
|
596
673
|
this.keysToAnimate.clear();
|
|
597
674
|
}
|
|
@@ -602,24 +679,24 @@ class D extends C {
|
|
|
602
679
|
*/
|
|
603
680
|
createToggleButton(e, t) {
|
|
604
681
|
const r = document.createElement("button");
|
|
605
|
-
return r.type = "button", r.className = `group-toggle${e ? " expanded" : ""}`, r.setAttribute("aria-label", e ? "Collapse group" : "Expand group"), this.setIcon(r, this.resolveIcon(e ? "collapse" : "expand")), r.addEventListener("click", (
|
|
606
|
-
|
|
682
|
+
return r.type = "button", r.className = `group-toggle${e ? " expanded" : ""}`, r.setAttribute("aria-label", e ? "Collapse group" : "Expand group"), this.setIcon(r, this.resolveIcon(e ? "collapse" : "expand")), r.addEventListener("click", (i) => {
|
|
683
|
+
i.stopPropagation(), t();
|
|
607
684
|
}), r;
|
|
608
685
|
}
|
|
609
686
|
/**
|
|
610
687
|
* Get the formatted label text for a group.
|
|
611
688
|
*/
|
|
612
689
|
getGroupLabelText(e, t, r) {
|
|
613
|
-
const
|
|
614
|
-
return
|
|
690
|
+
const i = this.config;
|
|
691
|
+
return i.formatLabel ? i.formatLabel(e, t, r) : String(e);
|
|
615
692
|
}
|
|
616
693
|
renderFullWidthGroupRow(e, t, r) {
|
|
617
|
-
const
|
|
618
|
-
|
|
694
|
+
const i = this.config, o = i.aggregators ?? {}, g = e.__groupRows ?? [], s = document.createElement("div");
|
|
695
|
+
s.className = "cell group-full", s.style.gridColumn = "1 / -1", s.setAttribute("role", "gridcell"), s.setAttribute("data-col", "0"), s.appendChild(this.createToggleButton(e.__groupExpanded, r));
|
|
619
696
|
const l = document.createElement("span");
|
|
620
|
-
if (l.className = "group-label", l.textContent = this.getGroupLabelText(e.__groupValue, e.__groupDepth || 0, e.__groupKey),
|
|
697
|
+
if (l.className = "group-label", l.textContent = this.getGroupLabelText(e.__groupValue, e.__groupDepth || 0, e.__groupKey), s.appendChild(l), i.showRowCount !== !1) {
|
|
621
698
|
const u = document.createElement("span");
|
|
622
|
-
u.className = "group-count", u.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`,
|
|
699
|
+
u.className = "group-count", u.textContent = `(${e.__groupRowCount ?? e.__groupRows?.length ?? 0})`, s.appendChild(u);
|
|
623
700
|
}
|
|
624
701
|
const d = Object.entries(o);
|
|
625
702
|
if (d.length > 0) {
|
|
@@ -634,12 +711,12 @@ class D extends C {
|
|
|
634
711
|
h.textContent = `${f}: ${c}`, u.appendChild(h);
|
|
635
712
|
}
|
|
636
713
|
}
|
|
637
|
-
u.children.length > 0 &&
|
|
714
|
+
u.children.length > 0 && s.appendChild(u);
|
|
638
715
|
}
|
|
639
|
-
t.appendChild(
|
|
716
|
+
t.appendChild(s);
|
|
640
717
|
}
|
|
641
718
|
renderPerColumnGroupRow(e, t, r) {
|
|
642
|
-
const
|
|
719
|
+
const i = this.config, o = i.aggregators ?? {}, g = this.columns, s = e.__groupRows ?? [], d = this.gridElement?.querySelector(".body")?.style.gridTemplateColumns || "";
|
|
643
720
|
d && (t.style.display = "grid", t.style.gridTemplateColumns = d);
|
|
644
721
|
let u = !1;
|
|
645
722
|
g.forEach((a, w) => {
|
|
@@ -651,7 +728,7 @@ class D extends C {
|
|
|
651
728
|
if (u) {
|
|
652
729
|
const c = o[a.field];
|
|
653
730
|
if (c) {
|
|
654
|
-
const h = _(c,
|
|
731
|
+
const h = _(c, s, a.field, a);
|
|
655
732
|
p.textContent = h != null ? String(h) : "";
|
|
656
733
|
} else
|
|
657
734
|
p.textContent = "";
|
|
@@ -659,13 +736,13 @@ class D extends C {
|
|
|
659
736
|
u = !0, p.appendChild(this.createToggleButton(e.__groupExpanded, r));
|
|
660
737
|
const c = document.createElement("span"), h = o[a.field];
|
|
661
738
|
if (h) {
|
|
662
|
-
const f = _(h,
|
|
739
|
+
const f = _(h, s, a.field, a);
|
|
663
740
|
c.textContent = f != null ? String(f) : String(e.__groupValue);
|
|
664
741
|
} else
|
|
665
742
|
c.textContent = this.getGroupLabelText(e.__groupValue, e.__groupDepth || 0, e.__groupKey);
|
|
666
|
-
if (p.appendChild(c),
|
|
743
|
+
if (p.appendChild(c), i.showRowCount !== !1) {
|
|
667
744
|
const f = document.createElement("span");
|
|
668
|
-
f.className = "group-count", f.textContent = ` (${
|
|
745
|
+
f.className = "group-count", f.textContent = ` (${s.length})`, p.appendChild(f);
|
|
669
746
|
}
|
|
670
747
|
}
|
|
671
748
|
t.appendChild(p);
|
|
@@ -677,13 +754,13 @@ class D extends C {
|
|
|
677
754
|
* Expand all groups.
|
|
678
755
|
*/
|
|
679
756
|
expandAll() {
|
|
680
|
-
this.expandedKeys =
|
|
757
|
+
this.expandedKeys = S(this.flattenedRows), this.emitPluginEvent("grouping-state-change", { expandedKeys: [...this.expandedKeys] }), this.requestRender();
|
|
681
758
|
}
|
|
682
759
|
/**
|
|
683
760
|
* Collapse all groups.
|
|
684
761
|
*/
|
|
685
762
|
collapseAll() {
|
|
686
|
-
this.expandedKeys = k(), this.requestRender();
|
|
763
|
+
this.expandedKeys = k(), this.emitPluginEvent("grouping-state-change", { expandedKeys: [...this.expandedKeys] }), this.requestRender();
|
|
687
764
|
}
|
|
688
765
|
/**
|
|
689
766
|
* Toggle expansion of a specific group.
|
|
@@ -691,24 +768,26 @@ class D extends C {
|
|
|
691
768
|
* @param key - The group key to toggle
|
|
692
769
|
*/
|
|
693
770
|
toggle(e) {
|
|
694
|
-
const t = !this.expandedKeys.has(e), r = this.config,
|
|
695
|
-
if (r.accordion && t &&
|
|
771
|
+
const t = !this.expandedKeys.has(e), r = this.config, i = this.flattenedRows.find((o) => o.kind === "group" && o.key === e);
|
|
772
|
+
if (r.accordion && t && i) {
|
|
696
773
|
const o = /* @__PURE__ */ new Set();
|
|
697
774
|
for (const g of this.expandedKeys)
|
|
698
775
|
if (e.startsWith(g + "||") || g.startsWith(e + "||"))
|
|
699
776
|
e.startsWith(g + "||") && o.add(g);
|
|
700
777
|
else {
|
|
701
|
-
const
|
|
702
|
-
|
|
778
|
+
const s = this.flattenedRows.find((l) => l.kind === "group" && l.key === g);
|
|
779
|
+
s && s.depth !== i.depth && o.add(g);
|
|
703
780
|
}
|
|
704
781
|
o.add(e), this.expandedKeys = o;
|
|
705
782
|
} else
|
|
706
|
-
this.expandedKeys =
|
|
783
|
+
this.expandedKeys = K(this.expandedKeys, e);
|
|
707
784
|
this.emit("group-toggle", {
|
|
708
785
|
key: e,
|
|
709
786
|
expanded: this.expandedKeys.has(e),
|
|
710
|
-
value:
|
|
711
|
-
depth:
|
|
787
|
+
value: i?.value,
|
|
788
|
+
depth: i?.depth ?? 0
|
|
789
|
+
}), this.emitPluginEvent("grouping-state-change", {
|
|
790
|
+
expandedKeys: [...this.expandedKeys]
|
|
712
791
|
}), this.requestRender();
|
|
713
792
|
}
|
|
714
793
|
/**
|