@toolbox-web/grid 1.18.0 → 1.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.js +112 -86
- package/all.js.map +1 -1
- package/index.js +2 -2
- package/lib/plugins/selection/SelectionPlugin.d.ts +21 -0
- package/lib/plugins/selection/SelectionPlugin.d.ts.map +1 -1
- package/lib/plugins/selection/index.js +182 -139
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/selection/types.d.ts +26 -0
- package/lib/plugins/selection/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/umd/grid.all.umd.js +14 -14
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js +2 -2
- package/umd/plugins/selection.umd.js.map +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
function R(
|
|
2
|
-
if (!
|
|
3
|
-
const e =
|
|
1
|
+
function R(o) {
|
|
2
|
+
if (!o) return -1;
|
|
3
|
+
const e = o.getAttribute("data-row");
|
|
4
4
|
if (e) return parseInt(e, 10);
|
|
5
|
-
const t =
|
|
5
|
+
const t = o.closest(".data-grid-row");
|
|
6
6
|
if (!t) return -1;
|
|
7
7
|
const s = t.parentElement;
|
|
8
8
|
if (!s) return -1;
|
|
@@ -11,10 +11,10 @@ function R(n) {
|
|
|
11
11
|
if (i[r] === t) return r;
|
|
12
12
|
return -1;
|
|
13
13
|
}
|
|
14
|
-
function C(
|
|
15
|
-
|
|
14
|
+
function C(o) {
|
|
15
|
+
o && o.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
|
|
16
16
|
}
|
|
17
|
-
const p = '<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>',
|
|
17
|
+
const p = '<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>', v = {
|
|
18
18
|
expand: "▶",
|
|
19
19
|
collapse: "▼",
|
|
20
20
|
sortAsc: "▲",
|
|
@@ -27,7 +27,7 @@ const p = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
|
|
|
27
27
|
filterActive: p,
|
|
28
28
|
print: "🖨️"
|
|
29
29
|
};
|
|
30
|
-
class
|
|
30
|
+
class E {
|
|
31
31
|
/**
|
|
32
32
|
* Plugin dependencies - declare other plugins this one requires.
|
|
33
33
|
*
|
|
@@ -317,7 +317,7 @@ class v {
|
|
|
317
317
|
*/
|
|
318
318
|
get gridIcons() {
|
|
319
319
|
const e = this.grid?.gridConfig?.icons ?? {};
|
|
320
|
-
return { ...
|
|
320
|
+
return { ...v, ...e };
|
|
321
321
|
}
|
|
322
322
|
// #region Animation Helpers
|
|
323
323
|
/**
|
|
@@ -393,69 +393,69 @@ class v {
|
|
|
393
393
|
}
|
|
394
394
|
// #endregion
|
|
395
395
|
}
|
|
396
|
-
const
|
|
397
|
-
function
|
|
398
|
-
return
|
|
396
|
+
const k = "__tbw_expander";
|
|
397
|
+
function I(o) {
|
|
398
|
+
return o.field === k;
|
|
399
399
|
}
|
|
400
|
-
function f(
|
|
401
|
-
return
|
|
400
|
+
function f(o) {
|
|
401
|
+
return o.meta?.utility === !0;
|
|
402
402
|
}
|
|
403
|
-
function g(
|
|
403
|
+
function g(o) {
|
|
404
404
|
return {
|
|
405
|
-
startRow: Math.min(
|
|
406
|
-
startCol: Math.min(
|
|
407
|
-
endRow: Math.max(
|
|
408
|
-
endCol: Math.max(
|
|
405
|
+
startRow: Math.min(o.startRow, o.endRow),
|
|
406
|
+
startCol: Math.min(o.startCol, o.endCol),
|
|
407
|
+
endRow: Math.max(o.startRow, o.endRow),
|
|
408
|
+
endCol: Math.max(o.startCol, o.endCol)
|
|
409
409
|
};
|
|
410
410
|
}
|
|
411
|
-
function
|
|
412
|
-
const e = g(
|
|
411
|
+
function _(o) {
|
|
412
|
+
const e = g(o);
|
|
413
413
|
return {
|
|
414
414
|
from: { row: e.startRow, col: e.startCol },
|
|
415
415
|
to: { row: e.endRow, col: e.endCol }
|
|
416
416
|
};
|
|
417
417
|
}
|
|
418
|
-
function
|
|
419
|
-
return
|
|
418
|
+
function y(o) {
|
|
419
|
+
return o.map(_);
|
|
420
420
|
}
|
|
421
|
-
function
|
|
421
|
+
function q(o, e, t) {
|
|
422
422
|
const s = g(t);
|
|
423
|
-
return
|
|
423
|
+
return o >= s.startRow && o <= s.endRow && e >= s.startCol && e <= s.endCol;
|
|
424
424
|
}
|
|
425
|
-
function
|
|
426
|
-
return t.some((s) =>
|
|
425
|
+
function K(o, e, t) {
|
|
426
|
+
return t.some((s) => q(o, e, s));
|
|
427
427
|
}
|
|
428
|
-
function
|
|
429
|
-
const e = [], t = g(
|
|
428
|
+
function M(o) {
|
|
429
|
+
const e = [], t = g(o);
|
|
430
430
|
for (let s = t.startRow; s <= t.endRow; s++)
|
|
431
431
|
for (let i = t.startCol; i <= t.endCol; i++)
|
|
432
432
|
e.push({ row: s, col: i });
|
|
433
433
|
return e;
|
|
434
434
|
}
|
|
435
|
-
function
|
|
435
|
+
function F(o) {
|
|
436
436
|
const e = /* @__PURE__ */ new Map();
|
|
437
|
-
for (const t of
|
|
438
|
-
for (const s of
|
|
437
|
+
for (const t of o)
|
|
438
|
+
for (const s of M(t))
|
|
439
439
|
e.set(`${s.row},${s.col}`, s);
|
|
440
440
|
return [...e.values()];
|
|
441
441
|
}
|
|
442
|
-
function m(
|
|
442
|
+
function m(o, e) {
|
|
443
443
|
return {
|
|
444
|
-
startRow:
|
|
445
|
-
startCol:
|
|
444
|
+
startRow: o.row,
|
|
445
|
+
startCol: o.col,
|
|
446
446
|
endRow: e.row,
|
|
447
447
|
endCol: e.col
|
|
448
448
|
};
|
|
449
449
|
}
|
|
450
|
-
function b(
|
|
451
|
-
const t = g(
|
|
450
|
+
function b(o, e) {
|
|
451
|
+
const t = g(o), s = g(e);
|
|
452
452
|
return t.startRow === s.startRow && t.startCol === s.startCol && t.endRow === s.endRow && t.endCol === s.endCol;
|
|
453
453
|
}
|
|
454
|
-
const
|
|
455
|
-
function
|
|
456
|
-
if (
|
|
454
|
+
const D = '@layer tbw-plugins{tbw-grid.selecting .data-grid-row>.cell{-webkit-user-select:none;user-select:none}tbw-grid:has(.selection){-webkit-user-select:none;user-select:none}tbw-grid .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%));outline:none;position:relative}tbw-grid .data-grid-row.row-focus:after{content:"";position:absolute;inset:0;pointer-events:none;border-width:0;border-style:var(--tbw-selection-border-style, var(--tbw-border-style));border-color:var(--tbw-range-border-color, var(--tbw-color-accent));border-top-width:var(--tbw-selection-border-width, var(--tbw-border-width));border-bottom-width:var(--tbw-selection-border-width, var(--tbw-border-width));z-index:1}tbw-grid .data-grid-row.row-focus+.data-grid-row.row-focus:after{border-top-width:0}tbw-grid .data-grid-row.row-focus:has(+.data-grid-row.row-focus):after{border-bottom-width:0}tbw-grid[data-selection-mode=row] .cell-focus,tbw-grid[data-selection-mode=row] .row-focus,tbw-grid[data-selection-mode=range] .cell-focus{outline:none}tbw-grid .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg);position:relative}tbw-grid .data-grid-row>.cell.selected:after{content:"";position:absolute;inset:0;pointer-events:none;border:0 var(--tbw-selection-border-style, var(--tbw-border-style)) var(--tbw-range-border-color);z-index:1}tbw-grid .data-grid-row>.cell.selected.top:after{border-top-width:var(--tbw-selection-border-width, var(--tbw-border-width))}tbw-grid .data-grid-row>.cell.selected.bottom:after{border-bottom-width:var(--tbw-selection-border-width, var(--tbw-border-width))}tbw-grid .data-grid-row>.cell.selected.first:after{border-left-width:var(--tbw-selection-border-width, var(--tbw-border-width))}tbw-grid .data-grid-row>.cell.selected.last:after{border-right-width:var(--tbw-selection-border-width, var(--tbw-border-width))}tbw-grid .data-grid-row[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row[data-selectable=false].row-focus{background-color:var(--tbw-color-row-alt)}tbw-grid .data-grid-row>.cell[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row>.cell[data-selectable=false].selected{background-color:var(--tbw-selection-warning-bg, rgba(from var(--tbw-color-error) r g b / 50%))}tbw-grid .tbw-selection-summary{font-size:var(--tbw-font-size-sm, .8125rem);color:var(--tbw-color-fg-muted);white-space:nowrap}tbw-grid .data-grid-row>.cell[data-field=__tbw_checkbox],tbw-grid .header-row>.cell[data-field=__tbw_checkbox]{text-align:center;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}tbw-grid .tbw-select-row-checkbox{pointer-events:none;margin:0;cursor:pointer}tbw-grid .tbw-checkbox-header{display:flex;justify-content:center;align-items:center;height:100%}tbw-grid .tbw-select-all-checkbox{margin:0;cursor:pointer}}', S = "__tbw_checkbox";
|
|
455
|
+
function L(o, e, t) {
|
|
456
|
+
if (o === "cell" && e.selectedCell)
|
|
457
457
|
return {
|
|
458
|
-
mode:
|
|
458
|
+
mode: o,
|
|
459
459
|
ranges: [
|
|
460
460
|
{
|
|
461
461
|
from: { row: e.selectedCell.row, col: e.selectedCell.col },
|
|
@@ -463,16 +463,16 @@ function D(n, e, t) {
|
|
|
463
463
|
}
|
|
464
464
|
]
|
|
465
465
|
};
|
|
466
|
-
if (
|
|
467
|
-
const s = [...e.selected].sort((l,
|
|
468
|
-
let r = s[0],
|
|
466
|
+
if (o === "row" && e.selected.size > 0) {
|
|
467
|
+
const s = [...e.selected].sort((l, h) => l - h), i = [];
|
|
468
|
+
let r = s[0], n = r;
|
|
469
469
|
for (let l = 1; l < s.length; l++)
|
|
470
|
-
s[l] ===
|
|
471
|
-
return i.push({ from: { row: r, col: 0 }, to: { row:
|
|
470
|
+
s[l] === n + 1 ? n = s[l] : (i.push({ from: { row: r, col: 0 }, to: { row: n, col: t - 1 } }), r = s[l], n = r);
|
|
471
|
+
return i.push({ from: { row: r, col: 0 }, to: { row: n, col: t - 1 } }), { mode: o, ranges: i };
|
|
472
472
|
}
|
|
473
|
-
return
|
|
473
|
+
return o === "range" && e.ranges.length > 0 ? { mode: o, ranges: y(e.ranges) } : { mode: o, ranges: [] };
|
|
474
474
|
}
|
|
475
|
-
class
|
|
475
|
+
class P extends E {
|
|
476
476
|
/**
|
|
477
477
|
* Plugin manifest - declares queries and configuration validation rules.
|
|
478
478
|
* @internal
|
|
@@ -481,7 +481,8 @@ class L extends v {
|
|
|
481
481
|
queries: [
|
|
482
482
|
{ type: "getSelection", description: "Get the current selection state" },
|
|
483
483
|
{ type: "selectRows", description: "Select specific rows by index (row mode only)" },
|
|
484
|
-
{ type: "getSelectedRowIndices", description: "Get sorted array of selected row indices" }
|
|
484
|
+
{ type: "getSelectedRowIndices", description: "Get sorted array of selected row indices" },
|
|
485
|
+
{ type: "getSelectedRows", description: "Get actual row objects for the current selection (works in all modes)" }
|
|
485
486
|
],
|
|
486
487
|
configRules: [
|
|
487
488
|
{
|
|
@@ -497,13 +498,14 @@ class L extends v {
|
|
|
497
498
|
/** @internal */
|
|
498
499
|
name = "selection";
|
|
499
500
|
/** @internal */
|
|
500
|
-
styles =
|
|
501
|
+
styles = D;
|
|
501
502
|
/** @internal */
|
|
502
503
|
get defaultConfig() {
|
|
503
504
|
return {
|
|
504
505
|
mode: "cell",
|
|
505
506
|
triggerOn: "click",
|
|
506
|
-
enabled: !0
|
|
507
|
+
enabled: !0,
|
|
508
|
+
multiSelect: !0
|
|
507
509
|
};
|
|
508
510
|
}
|
|
509
511
|
// #region Internal State
|
|
@@ -576,6 +578,8 @@ class L extends v {
|
|
|
576
578
|
return this.getSelection();
|
|
577
579
|
if (e.type === "getSelectedRowIndices")
|
|
578
580
|
return this.getSelectedRowIndices();
|
|
581
|
+
if (e.type === "getSelectedRows")
|
|
582
|
+
return this.getSelectedRows();
|
|
579
583
|
if (e.type === "selectRows")
|
|
580
584
|
return this.selectRows(e.context), !0;
|
|
581
585
|
}
|
|
@@ -595,12 +599,12 @@ class L extends v {
|
|
|
595
599
|
/** @internal */
|
|
596
600
|
onCellClick(e) {
|
|
597
601
|
if (!this.isSelectionEnabled()) return !1;
|
|
598
|
-
const { rowIndex: t, colIndex: s, originalEvent: i } = e, { mode: r, triggerOn:
|
|
599
|
-
if (i.type !==
|
|
602
|
+
const { rowIndex: t, colIndex: s, originalEvent: i } = e, { mode: r, triggerOn: n = "click" } = this.config;
|
|
603
|
+
if (i.type !== n)
|
|
600
604
|
return !1;
|
|
601
|
-
const l = this.columns[s],
|
|
605
|
+
const l = this.columns[s], h = l && f(l);
|
|
602
606
|
if (r === "cell") {
|
|
603
|
-
if (
|
|
607
|
+
if (h || !this.isCellSelectable(t, s))
|
|
604
608
|
return !1;
|
|
605
609
|
const a = this.selectedCell;
|
|
606
610
|
return a && a.row === t && a.col === s || (this.selectedCell = { row: t, col: s }, this.emit("selection-change", this.#e()), this.requestAfterRender()), !1;
|
|
@@ -608,13 +612,13 @@ class L extends v {
|
|
|
608
612
|
if (r === "row") {
|
|
609
613
|
if (!this.isRowSelectable(t))
|
|
610
614
|
return !1;
|
|
611
|
-
const a = i.shiftKey,
|
|
612
|
-
if (
|
|
613
|
-
const
|
|
614
|
-
|
|
615
|
-
for (let w =
|
|
615
|
+
const a = this.config.multiSelect !== !1, d = i.shiftKey && a, c = (i.ctrlKey || i.metaKey) && a, u = l?.meta?.checkboxColumn === !0;
|
|
616
|
+
if (d && this.anchor !== null) {
|
|
617
|
+
const x = Math.min(this.anchor, t), A = Math.max(this.anchor, t);
|
|
618
|
+
c || this.selected.clear();
|
|
619
|
+
for (let w = x; w <= A; w++)
|
|
616
620
|
this.isRowSelectable(w) && this.selected.add(w);
|
|
617
|
-
} else if (
|
|
621
|
+
} else if (c || u && a)
|
|
618
622
|
this.selected.has(t) ? this.selected.delete(t) : this.selected.add(t), this.anchor = t;
|
|
619
623
|
else {
|
|
620
624
|
if (this.selected.size === 1 && this.selected.has(t))
|
|
@@ -624,15 +628,15 @@ class L extends v {
|
|
|
624
628
|
return this.lastSelected = t, this.explicitSelection = !0, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
|
|
625
629
|
}
|
|
626
630
|
if (r === "range") {
|
|
627
|
-
if (
|
|
631
|
+
if (h || !this.isCellSelectable(t, s))
|
|
628
632
|
return !1;
|
|
629
|
-
const a = i.shiftKey,
|
|
633
|
+
const a = i.shiftKey, d = (i.ctrlKey || i.metaKey) && this.config.multiSelect !== !1;
|
|
630
634
|
if (a && this.cellAnchor) {
|
|
631
635
|
const c = m(this.cellAnchor, { row: t, col: s }), u = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null;
|
|
632
636
|
if (u && b(u, c))
|
|
633
637
|
return !1;
|
|
634
|
-
|
|
635
|
-
} else if (
|
|
638
|
+
d ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = c : this.ranges.push(c) : this.ranges = [c], this.activeRange = c;
|
|
639
|
+
} else if (d) {
|
|
636
640
|
const c = {
|
|
637
641
|
startRow: t,
|
|
638
642
|
startCol: s,
|
|
@@ -663,32 +667,33 @@ class L extends v {
|
|
|
663
667
|
return this.grid.query("isEditing").some(Boolean) ? !1 : (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);
|
|
664
668
|
if (t === "cell" && i)
|
|
665
669
|
return queueMicrotask(() => {
|
|
666
|
-
const r = this.grid._focusRow,
|
|
667
|
-
this.isCellSelectable(r,
|
|
670
|
+
const r = this.grid._focusRow, n = this.grid._focusCol;
|
|
671
|
+
this.isCellSelectable(r, n) ? this.selectedCell = { row: r, col: n } : this.selectedCell = null, this.emit("selection-change", this.#e()), this.requestAfterRender();
|
|
668
672
|
}), !1;
|
|
669
673
|
if (t === "row") {
|
|
674
|
+
const r = this.config.multiSelect !== !1;
|
|
670
675
|
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
|
671
|
-
const
|
|
672
|
-
return
|
|
673
|
-
const
|
|
674
|
-
if (
|
|
676
|
+
const n = e.shiftKey && r;
|
|
677
|
+
return n && this.anchor === null && (this.anchor = this.grid._focusRow), queueMicrotask(() => {
|
|
678
|
+
const l = this.grid._focusRow;
|
|
679
|
+
if (n && this.anchor !== null) {
|
|
675
680
|
this.selected.clear();
|
|
676
|
-
const
|
|
677
|
-
for (let
|
|
678
|
-
this.isRowSelectable(
|
|
681
|
+
const h = Math.min(this.anchor, l), a = Math.max(this.anchor, l);
|
|
682
|
+
for (let d = h; d <= a; d++)
|
|
683
|
+
this.isRowSelectable(d) && this.selected.add(d);
|
|
679
684
|
} else
|
|
680
|
-
this.isRowSelectable(
|
|
681
|
-
this.lastSelected =
|
|
685
|
+
this.isRowSelectable(l) ? (this.selected.clear(), this.selected.add(l), this.anchor = l) : this.selected.clear();
|
|
686
|
+
this.lastSelected = l, this.explicitSelection = !0, this.emit("selection-change", this.#e()), this.requestAfterRender();
|
|
682
687
|
}), !1;
|
|
683
688
|
}
|
|
684
|
-
if (e.key === "a" && (e.ctrlKey || e.metaKey))
|
|
689
|
+
if (r && e.key === "a" && (e.ctrlKey || e.metaKey))
|
|
685
690
|
return this.grid.query("isEditing").some(Boolean) ? !1 : (e.preventDefault(), e.stopPropagation(), this.selectAll(), !0);
|
|
686
691
|
}
|
|
687
692
|
if (t === "range" && i) {
|
|
688
|
-
const r = e.key === "Tab",
|
|
689
|
-
return
|
|
693
|
+
const r = e.key === "Tab", n = e.shiftKey && !r;
|
|
694
|
+
return n && !this.cellAnchor && (this.cellAnchor = { row: this.grid._focusRow, col: this.grid._focusCol }), this.pendingKeyboardUpdate = { shiftKey: n }, queueMicrotask(() => this.requestAfterRender()), !1;
|
|
690
695
|
}
|
|
691
|
-
return t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey) ? this.grid.query("isEditing").some(Boolean) ? !1 : (e.preventDefault(), e.stopPropagation(), this.selectAll(), !0) : !1;
|
|
696
|
+
return t === "range" && this.config.multiSelect !== !1 && e.key === "a" && (e.ctrlKey || e.metaKey) ? this.grid.query("isEditing").some(Boolean) ? !1 : (e.preventDefault(), e.stopPropagation(), this.selectAll(), !0) : !1;
|
|
692
697
|
}
|
|
693
698
|
/** @internal */
|
|
694
699
|
onCellMouseDown(e) {
|
|
@@ -697,13 +702,13 @@ class L extends v {
|
|
|
697
702
|
if (t && f(t) || !this.isCellSelectable(e.rowIndex, e.colIndex) || e.originalEvent.shiftKey && this.cellAnchor)
|
|
698
703
|
return;
|
|
699
704
|
this.isDragging = !0;
|
|
700
|
-
const s = e.rowIndex, i = e.colIndex, r = e.originalEvent.ctrlKey || e.originalEvent.metaKey,
|
|
705
|
+
const s = e.rowIndex, i = e.colIndex, r = (e.originalEvent.ctrlKey || e.originalEvent.metaKey) && this.config.multiSelect !== !1, n = {
|
|
701
706
|
startRow: s,
|
|
702
707
|
startCol: i,
|
|
703
708
|
endRow: s,
|
|
704
709
|
endCol: i
|
|
705
710
|
};
|
|
706
|
-
return !r && this.ranges.length === 1 && b(this.ranges[0],
|
|
711
|
+
return !r && this.ranges.length === 1 && b(this.ranges[0], n) ? (this.cellAnchor = { row: s, col: i }, !0) : (this.cellAnchor = { row: s, col: i }, r || (this.ranges = []), this.ranges.push(n), this.activeRange = n, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0);
|
|
707
712
|
}
|
|
708
713
|
/** @internal */
|
|
709
714
|
onCellMouseMove(e) {
|
|
@@ -711,8 +716,8 @@ class L extends v {
|
|
|
711
716
|
let t = e.colIndex;
|
|
712
717
|
const s = this.columns[t];
|
|
713
718
|
if (s && f(s)) {
|
|
714
|
-
const
|
|
715
|
-
|
|
719
|
+
const n = this.columns.findIndex((l) => !f(l));
|
|
720
|
+
n >= 0 && (t = n);
|
|
716
721
|
}
|
|
717
722
|
const i = m(this.cellAnchor, { row: e.rowIndex, col: t }), r = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null;
|
|
718
723
|
return r && b(r, i) || (this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = i : this.ranges.push(i), this.activeRange = i, this.emit("selection-change", this.#e()), this.requestAfterRender()), !0;
|
|
@@ -729,9 +734,9 @@ class L extends v {
|
|
|
729
734
|
*/
|
|
730
735
|
processColumns(e) {
|
|
731
736
|
if (this.config.checkbox && this.config.mode === "row") {
|
|
732
|
-
if (e.some((r) => r.field ===
|
|
737
|
+
if (e.some((r) => r.field === S))
|
|
733
738
|
return e;
|
|
734
|
-
const t = this.#t(), s = e.findIndex(
|
|
739
|
+
const t = this.#t(), s = e.findIndex(I), i = s >= 0 ? s + 1 : 0;
|
|
735
740
|
return [...e.slice(0, i), t, ...e.slice(i)];
|
|
736
741
|
}
|
|
737
742
|
return e;
|
|
@@ -741,7 +746,7 @@ class L extends v {
|
|
|
741
746
|
*/
|
|
742
747
|
#t() {
|
|
743
748
|
return {
|
|
744
|
-
field:
|
|
749
|
+
field: S,
|
|
745
750
|
header: "",
|
|
746
751
|
width: 32,
|
|
747
752
|
resizable: !1,
|
|
@@ -754,7 +759,7 @@ class L extends v {
|
|
|
754
759
|
},
|
|
755
760
|
headerRenderer: () => {
|
|
756
761
|
const e = document.createElement("div");
|
|
757
|
-
e.className = "tbw-checkbox-header";
|
|
762
|
+
if (e.className = "tbw-checkbox-header", this.config.multiSelect === !1) return e;
|
|
758
763
|
const t = document.createElement("input");
|
|
759
764
|
return t.type = "checkbox", t.className = "tbw-select-all-checkbox", t.addEventListener("click", (s) => {
|
|
760
765
|
s.stopPropagation(), s.target.checked ? this.selectAll() : this.clearSelection();
|
|
@@ -778,20 +783,20 @@ class L extends v {
|
|
|
778
783
|
*/
|
|
779
784
|
#i(e) {
|
|
780
785
|
e.querySelectorAll(".tbw-select-row-checkbox").forEach((i) => {
|
|
781
|
-
const r = i.closest(".cell"),
|
|
782
|
-
|
|
786
|
+
const r = i.closest(".cell"), n = r ? R(r) : -1;
|
|
787
|
+
n >= 0 && (i.checked = this.selected.has(n));
|
|
783
788
|
});
|
|
784
789
|
const s = e.querySelector(".tbw-select-all-checkbox");
|
|
785
790
|
if (s) {
|
|
786
791
|
const i = this.rows.length;
|
|
787
792
|
let r = 0;
|
|
788
793
|
if (this.config.isSelectable)
|
|
789
|
-
for (let
|
|
790
|
-
this.isRowSelectable(
|
|
794
|
+
for (let h = 0; h < i; h++)
|
|
795
|
+
this.isRowSelectable(h) && r++;
|
|
791
796
|
else
|
|
792
797
|
r = i;
|
|
793
|
-
const
|
|
794
|
-
s.checked =
|
|
798
|
+
const n = r > 0 && this.selected.size >= r, l = this.selected.size > 0;
|
|
799
|
+
s.checked = n, s.indeterminate = l && !n;
|
|
795
800
|
}
|
|
796
801
|
}
|
|
797
802
|
// #endregion
|
|
@@ -830,33 +835,33 @@ class L extends v {
|
|
|
830
835
|
const e = this.gridElement;
|
|
831
836
|
if (!e) return;
|
|
832
837
|
const { mode: t } = this.config, s = !!this.config.isSelectable;
|
|
833
|
-
e.querySelectorAll(".cell").forEach((
|
|
834
|
-
|
|
838
|
+
e.querySelectorAll(".cell").forEach((n) => {
|
|
839
|
+
n.classList.remove("selected", "top", "bottom", "first", "last"), s && n.removeAttribute("data-selectable");
|
|
835
840
|
});
|
|
836
841
|
const r = e.querySelectorAll(".data-grid-row");
|
|
837
|
-
if (r.forEach((
|
|
838
|
-
|
|
839
|
-
}), t === "row" && (C(e), r.forEach((
|
|
840
|
-
const l =
|
|
841
|
-
|
|
842
|
+
if (r.forEach((n) => {
|
|
843
|
+
n.classList.remove("selected", "row-focus"), s && n.removeAttribute("data-selectable");
|
|
844
|
+
}), t === "row" && (C(e), r.forEach((n) => {
|
|
845
|
+
const l = n.querySelector(".cell[data-row]"), h = R(l);
|
|
846
|
+
h >= 0 && (s && !this.isRowSelectable(h) && n.setAttribute("data-selectable", "false"), this.selected.has(h) && n.classList.add("selected", "row-focus"));
|
|
842
847
|
}), this.config.checkbox && this.#i(e)), (t === "cell" || t === "range") && s && e.querySelectorAll(".cell[data-row][data-col]").forEach((l) => {
|
|
843
|
-
const
|
|
844
|
-
|
|
848
|
+
const h = parseInt(l.getAttribute("data-row") ?? "-1", 10), a = parseInt(l.getAttribute("data-col") ?? "-1", 10);
|
|
849
|
+
h >= 0 && a >= 0 && (this.isCellSelectable(h, a) || l.setAttribute("data-selectable", "false"));
|
|
845
850
|
}), t === "range" && this.ranges.length > 0) {
|
|
846
851
|
C(e);
|
|
847
|
-
const
|
|
848
|
-
for (const c of
|
|
849
|
-
if (a >= c.startRow && a <= c.endRow &&
|
|
852
|
+
const n = this.ranges.map(g), l = (a, d) => {
|
|
853
|
+
for (const c of n)
|
|
854
|
+
if (a >= c.startRow && a <= c.endRow && d >= c.startCol && d <= c.endCol)
|
|
850
855
|
return !0;
|
|
851
856
|
return !1;
|
|
852
857
|
};
|
|
853
858
|
e.querySelectorAll(".cell[data-row][data-col]").forEach((a) => {
|
|
854
|
-
const
|
|
855
|
-
if (
|
|
859
|
+
const d = parseInt(a.getAttribute("data-row") ?? "-1", 10), c = parseInt(a.getAttribute("data-col") ?? "-1", 10);
|
|
860
|
+
if (d >= 0 && c >= 0) {
|
|
856
861
|
const u = this.columns[c];
|
|
857
862
|
if (u && f(u))
|
|
858
863
|
return;
|
|
859
|
-
l(
|
|
864
|
+
l(d, c) && (a.classList.add("selected"), l(d - 1, c) || a.classList.add("top"), l(d + 1, c) || a.classList.add("bottom"), l(d, c - 1) || a.classList.add("first"), l(d, c + 1) || a.classList.add("last"));
|
|
860
865
|
}
|
|
861
866
|
});
|
|
862
867
|
}
|
|
@@ -870,11 +875,11 @@ class L extends v {
|
|
|
870
875
|
if (this.pendingKeyboardUpdate && s === "range") {
|
|
871
876
|
const { shiftKey: i } = this.pendingKeyboardUpdate;
|
|
872
877
|
this.pendingKeyboardUpdate = null;
|
|
873
|
-
const r = this.grid._focusRow,
|
|
878
|
+
const r = this.grid._focusRow, n = this.grid._focusCol;
|
|
874
879
|
if (i && this.cellAnchor) {
|
|
875
|
-
const l = m(this.cellAnchor, { row: r, col:
|
|
880
|
+
const l = m(this.cellAnchor, { row: r, col: n });
|
|
876
881
|
this.ranges = [l], this.activeRange = l;
|
|
877
|
-
} else i || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: r, col:
|
|
882
|
+
} else i || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: r, col: n });
|
|
878
883
|
this.emit("selection-change", this.#e());
|
|
879
884
|
}
|
|
880
885
|
this.#r(s), this.grid.setAttribute("data-selection-mode", s), t && t.classList.toggle("selecting", this.isDragging), this.#s();
|
|
@@ -915,13 +920,13 @@ class L extends v {
|
|
|
915
920
|
* Get all selected cells across all ranges.
|
|
916
921
|
*/
|
|
917
922
|
getSelectedCells() {
|
|
918
|
-
return
|
|
923
|
+
return F(this.ranges);
|
|
919
924
|
}
|
|
920
925
|
/**
|
|
921
926
|
* Check if a specific cell is in range selection.
|
|
922
927
|
*/
|
|
923
928
|
isCellSelected(e, t) {
|
|
924
|
-
return
|
|
929
|
+
return K(e, t, this.ranges);
|
|
925
930
|
}
|
|
926
931
|
/**
|
|
927
932
|
* Select all selectable rows (row mode) or all cells (range mode).
|
|
@@ -937,22 +942,24 @@ class L extends v {
|
|
|
937
942
|
* ```
|
|
938
943
|
*/
|
|
939
944
|
selectAll() {
|
|
940
|
-
const { mode: e } = this.config;
|
|
941
|
-
if (
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
945
|
+
const { mode: e, multiSelect: t } = this.config;
|
|
946
|
+
if (t !== !1) {
|
|
947
|
+
if (e === "row") {
|
|
948
|
+
this.selected.clear();
|
|
949
|
+
for (let s = 0; s < this.rows.length; s++)
|
|
950
|
+
this.isRowSelectable(s) && this.selected.add(s);
|
|
951
|
+
this.explicitSelection = !0, this.emit("selection-change", this.#e()), this.requestAfterRender();
|
|
952
|
+
} else if (e === "range") {
|
|
953
|
+
const s = this.rows.length, i = this.columns.length;
|
|
954
|
+
if (s > 0 && i > 0) {
|
|
955
|
+
const r = {
|
|
956
|
+
startRow: 0,
|
|
957
|
+
startCol: 0,
|
|
958
|
+
endRow: s - 1,
|
|
959
|
+
endCol: i - 1
|
|
960
|
+
};
|
|
961
|
+
this.ranges = [r], this.activeRange = r, this.emit("selection-change", this.#e()), this.requestAfterRender();
|
|
962
|
+
}
|
|
956
963
|
}
|
|
957
964
|
}
|
|
958
965
|
}
|
|
@@ -970,12 +977,12 @@ class L extends v {
|
|
|
970
977
|
* ```
|
|
971
978
|
*/
|
|
972
979
|
selectRows(e) {
|
|
973
|
-
if (this.config.mode
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
980
|
+
if (this.config.mode !== "row") return;
|
|
981
|
+
const t = this.config.multiSelect === !1 && e.length > 1 ? [e[e.length - 1]] : e;
|
|
982
|
+
this.selected.clear();
|
|
983
|
+
for (const s of t)
|
|
984
|
+
s >= 0 && s < this.rows.length && this.isRowSelectable(s) && this.selected.add(s);
|
|
985
|
+
this.anchor = t.length > 0 ? t[t.length - 1] : null, this.explicitSelection = !0, this.emit("selection-change", this.#e()), this.requestAfterRender();
|
|
979
986
|
}
|
|
980
987
|
/**
|
|
981
988
|
* Get the indices of all selected rows (convenience for row mode).
|
|
@@ -990,6 +997,42 @@ class L extends v {
|
|
|
990
997
|
getSelectedRowIndices() {
|
|
991
998
|
return [...this.selected].sort((e, t) => e - t);
|
|
992
999
|
}
|
|
1000
|
+
/**
|
|
1001
|
+
* Get the actual row objects for the current selection.
|
|
1002
|
+
*
|
|
1003
|
+
* Works across all selection modes:
|
|
1004
|
+
* - **Row mode**: Returns the row objects for all selected rows.
|
|
1005
|
+
* - **Cell mode**: Returns the single row containing the selected cell, or `[]`.
|
|
1006
|
+
* - **Range mode**: Returns the unique row objects that intersect any selected range.
|
|
1007
|
+
*
|
|
1008
|
+
* Row objects are resolved from the grid's processed (sorted/filtered) row array,
|
|
1009
|
+
* so they always reflect the current visual order.
|
|
1010
|
+
*
|
|
1011
|
+
* @example
|
|
1012
|
+
* ```ts
|
|
1013
|
+
* const plugin = grid.getPlugin(SelectionPlugin);
|
|
1014
|
+
* const selected = plugin.getSelectedRows(); // [{ id: 1, name: 'Alice' }, ...]
|
|
1015
|
+
* ```
|
|
1016
|
+
*/
|
|
1017
|
+
getSelectedRows() {
|
|
1018
|
+
const { mode: e } = this.config, t = this.rows;
|
|
1019
|
+
if (e === "row")
|
|
1020
|
+
return this.getSelectedRowIndices().filter((s) => s >= 0 && s < t.length).map((s) => t[s]);
|
|
1021
|
+
if (e === "cell" && this.selectedCell) {
|
|
1022
|
+
const { row: s } = this.selectedCell;
|
|
1023
|
+
return s >= 0 && s < t.length ? [t[s]] : [];
|
|
1024
|
+
}
|
|
1025
|
+
if (e === "range" && this.ranges.length > 0) {
|
|
1026
|
+
const s = /* @__PURE__ */ new Set();
|
|
1027
|
+
for (const i of this.ranges) {
|
|
1028
|
+
const r = Math.max(0, Math.min(i.startRow, i.endRow)), n = Math.min(t.length - 1, Math.max(i.startRow, i.endRow));
|
|
1029
|
+
for (let l = r; l <= n; l++)
|
|
1030
|
+
s.add(l);
|
|
1031
|
+
}
|
|
1032
|
+
return [...s].sort((i, r) => i - r).map((i) => t[i]);
|
|
1033
|
+
}
|
|
1034
|
+
return [];
|
|
1035
|
+
}
|
|
993
1036
|
/**
|
|
994
1037
|
* Clear all selection.
|
|
995
1038
|
*/
|
|
@@ -1007,13 +1050,13 @@ class L extends v {
|
|
|
1007
1050
|
endCol: t.to.col
|
|
1008
1051
|
})), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
|
|
1009
1052
|
mode: this.config.mode,
|
|
1010
|
-
ranges:
|
|
1053
|
+
ranges: y(this.ranges)
|
|
1011
1054
|
}), this.requestAfterRender();
|
|
1012
1055
|
}
|
|
1013
1056
|
// #endregion
|
|
1014
1057
|
// #region Private Helpers
|
|
1015
1058
|
#e() {
|
|
1016
|
-
return
|
|
1059
|
+
return L(
|
|
1017
1060
|
this.config.mode,
|
|
1018
1061
|
{
|
|
1019
1062
|
selectedCell: this.selectedCell,
|
|
@@ -1026,6 +1069,6 @@ class L extends v {
|
|
|
1026
1069
|
// #endregion
|
|
1027
1070
|
}
|
|
1028
1071
|
export {
|
|
1029
|
-
|
|
1072
|
+
P as SelectionPlugin
|
|
1030
1073
|
};
|
|
1031
1074
|
//# sourceMappingURL=index.js.map
|