@toolbox-web/grid 1.19.0 → 1.19.2
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 +97 -86
- package/all.js.map +1 -1
- package/index.js +367 -341
- package/index.js.map +1 -1
- package/lib/core/grid.d.ts.map +1 -1
- package/lib/core/internal/rows.d.ts.map +1 -1
- package/lib/core/internal/utils.d.ts +2 -2
- package/lib/core/internal/utils.d.ts.map +1 -1
- package/lib/core/plugin/types.d.ts +0 -2
- package/lib/core/plugin/types.d.ts.map +1 -1
- package/lib/core/types.d.ts +11 -0
- package/lib/core/types.d.ts.map +1 -1
- package/lib/plugins/clipboard/index.js.map +1 -1
- package/lib/plugins/column-virtualization/index.js.map +1 -1
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/editing/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/MasterDetailPlugin.d.ts.map +1 -1
- package/lib/plugins/master-detail/index.js +62 -55
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/print/index.js.map +1 -1
- package/lib/plugins/reorder/index.js.map +1 -1
- package/lib/plugins/responsive/index.js.map +1 -1
- package/lib/plugins/row-reorder/index.js.map +1 -1
- package/lib/plugins/selection/SelectionPlugin.d.ts +3 -0
- package/lib/plugins/selection/SelectionPlugin.d.ts.map +1 -1
- package/lib/plugins/selection/index.js +179 -175
- 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/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 +24 -24
- 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/master-detail.umd.js +1 -1
- package/umd/plugins/master-detail.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js +2 -2
- package/umd/plugins/selection.umd.js.map +1 -1
|
@@ -1,20 +1,20 @@
|
|
|
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;
|
|
9
|
-
const
|
|
10
|
-
for (let
|
|
11
|
-
if (r
|
|
9
|
+
const i = s.querySelectorAll(":scope > .data-grid-row");
|
|
10
|
+
for (let r = 0; r < i.length; r++)
|
|
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 y(
|
|
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
|
-
for (let
|
|
432
|
-
e.push({ row: s, col:
|
|
431
|
+
for (let i = t.startCol; i <= t.endCol; i++)
|
|
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
|
|
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
|
|
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
|
|
@@ -498,13 +498,14 @@ class L extends v {
|
|
|
498
498
|
/** @internal */
|
|
499
499
|
name = "selection";
|
|
500
500
|
/** @internal */
|
|
501
|
-
styles =
|
|
501
|
+
styles = D;
|
|
502
502
|
/** @internal */
|
|
503
503
|
get defaultConfig() {
|
|
504
504
|
return {
|
|
505
505
|
mode: "cell",
|
|
506
506
|
triggerOn: "click",
|
|
507
|
-
enabled: !0
|
|
507
|
+
enabled: !0,
|
|
508
|
+
multiSelect: !0
|
|
508
509
|
};
|
|
509
510
|
}
|
|
510
511
|
// #region Internal State
|
|
@@ -545,10 +546,10 @@ class L extends v {
|
|
|
545
546
|
checkSelectable(e, t) {
|
|
546
547
|
const { isSelectable: s } = this.config;
|
|
547
548
|
if (!s) return !0;
|
|
548
|
-
const
|
|
549
|
-
if (!
|
|
550
|
-
const
|
|
551
|
-
return s(
|
|
549
|
+
const i = this.rows[e];
|
|
550
|
+
if (!i) return !1;
|
|
551
|
+
const r = t !== void 0 ? this.columns[t] : void 0;
|
|
552
|
+
return s(i, e, r, t);
|
|
552
553
|
}
|
|
553
554
|
/**
|
|
554
555
|
* Check if an entire row is selectable (for row mode).
|
|
@@ -598,26 +599,26 @@ class L extends v {
|
|
|
598
599
|
/** @internal */
|
|
599
600
|
onCellClick(e) {
|
|
600
601
|
if (!this.isSelectionEnabled()) return !1;
|
|
601
|
-
const { rowIndex: t, colIndex: s, originalEvent:
|
|
602
|
-
if (
|
|
602
|
+
const { rowIndex: t, colIndex: s, originalEvent: i } = e, { mode: r, triggerOn: n = "click" } = this.config;
|
|
603
|
+
if (i.type !== n)
|
|
603
604
|
return !1;
|
|
604
|
-
const l = this.columns[s],
|
|
605
|
-
if (
|
|
606
|
-
if (
|
|
605
|
+
const l = this.columns[s], h = l && f(l);
|
|
606
|
+
if (r === "cell") {
|
|
607
|
+
if (h || !this.isCellSelectable(t, s))
|
|
607
608
|
return !1;
|
|
608
609
|
const a = this.selectedCell;
|
|
609
610
|
return a && a.row === t && a.col === s || (this.selectedCell = { row: t, col: s }, this.emit("selection-change", this.#e()), this.requestAfterRender()), !1;
|
|
610
611
|
}
|
|
611
|
-
if (
|
|
612
|
+
if (r === "row") {
|
|
612
613
|
if (!this.isRowSelectable(t))
|
|
613
614
|
return !1;
|
|
614
|
-
const a =
|
|
615
|
-
if (
|
|
616
|
-
const
|
|
617
|
-
|
|
618
|
-
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++)
|
|
619
620
|
this.isRowSelectable(w) && this.selected.add(w);
|
|
620
|
-
} else if (
|
|
621
|
+
} else if (c || u && a)
|
|
621
622
|
this.selected.has(t) ? this.selected.delete(t) : this.selected.add(t), this.anchor = t;
|
|
622
623
|
else {
|
|
623
624
|
if (this.selected.size === 1 && this.selected.has(t))
|
|
@@ -626,16 +627,16 @@ class L extends v {
|
|
|
626
627
|
}
|
|
627
628
|
return this.lastSelected = t, this.explicitSelection = !0, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
|
|
628
629
|
}
|
|
629
|
-
if (
|
|
630
|
-
if (
|
|
630
|
+
if (r === "range") {
|
|
631
|
+
if (h || !this.isCellSelectable(t, s))
|
|
631
632
|
return !1;
|
|
632
|
-
const a =
|
|
633
|
+
const a = i.shiftKey, d = (i.ctrlKey || i.metaKey) && this.config.multiSelect !== !1;
|
|
633
634
|
if (a && this.cellAnchor) {
|
|
634
635
|
const c = m(this.cellAnchor, { row: t, col: s }), u = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null;
|
|
635
636
|
if (u && b(u, c))
|
|
636
637
|
return !1;
|
|
637
|
-
|
|
638
|
-
} 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) {
|
|
639
640
|
const c = {
|
|
640
641
|
startRow: t,
|
|
641
642
|
startCol: s,
|
|
@@ -661,37 +662,38 @@ class L extends v {
|
|
|
661
662
|
/** @internal */
|
|
662
663
|
onKeyDown(e) {
|
|
663
664
|
if (!this.isSelectionEnabled()) return !1;
|
|
664
|
-
const { mode: t } = this.config,
|
|
665
|
+
const { mode: t } = this.config, i = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
|
|
665
666
|
if (e.key === "Escape")
|
|
666
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);
|
|
667
|
-
if (t === "cell" &&
|
|
668
|
+
if (t === "cell" && i)
|
|
668
669
|
return queueMicrotask(() => {
|
|
669
|
-
const
|
|
670
|
-
this.isCellSelectable(
|
|
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();
|
|
671
672
|
}), !1;
|
|
672
673
|
if (t === "row") {
|
|
674
|
+
const r = this.config.multiSelect !== !1;
|
|
673
675
|
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
|
674
|
-
const
|
|
675
|
-
return
|
|
676
|
-
const
|
|
677
|
-
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) {
|
|
678
680
|
this.selected.clear();
|
|
679
|
-
const
|
|
680
|
-
for (let
|
|
681
|
-
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);
|
|
682
684
|
} else
|
|
683
|
-
this.isRowSelectable(
|
|
684
|
-
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();
|
|
685
687
|
}), !1;
|
|
686
688
|
}
|
|
687
|
-
if (e.key === "a" && (e.ctrlKey || e.metaKey))
|
|
689
|
+
if (r && e.key === "a" && (e.ctrlKey || e.metaKey))
|
|
688
690
|
return this.grid.query("isEditing").some(Boolean) ? !1 : (e.preventDefault(), e.stopPropagation(), this.selectAll(), !0);
|
|
689
691
|
}
|
|
690
|
-
if (t === "range" &&
|
|
691
|
-
const
|
|
692
|
-
return
|
|
692
|
+
if (t === "range" && i) {
|
|
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;
|
|
693
695
|
}
|
|
694
|
-
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;
|
|
695
697
|
}
|
|
696
698
|
/** @internal */
|
|
697
699
|
onCellMouseDown(e) {
|
|
@@ -700,13 +702,13 @@ class L extends v {
|
|
|
700
702
|
if (t && f(t) || !this.isCellSelectable(e.rowIndex, e.colIndex) || e.originalEvent.shiftKey && this.cellAnchor)
|
|
701
703
|
return;
|
|
702
704
|
this.isDragging = !0;
|
|
703
|
-
const s = e.rowIndex,
|
|
705
|
+
const s = e.rowIndex, i = e.colIndex, r = (e.originalEvent.ctrlKey || e.originalEvent.metaKey) && this.config.multiSelect !== !1, n = {
|
|
704
706
|
startRow: s,
|
|
705
|
-
startCol:
|
|
707
|
+
startCol: i,
|
|
706
708
|
endRow: s,
|
|
707
|
-
endCol:
|
|
709
|
+
endCol: i
|
|
708
710
|
};
|
|
709
|
-
return !
|
|
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);
|
|
710
712
|
}
|
|
711
713
|
/** @internal */
|
|
712
714
|
onCellMouseMove(e) {
|
|
@@ -714,11 +716,11 @@ class L extends v {
|
|
|
714
716
|
let t = e.colIndex;
|
|
715
717
|
const s = this.columns[t];
|
|
716
718
|
if (s && f(s)) {
|
|
717
|
-
const
|
|
718
|
-
|
|
719
|
+
const n = this.columns.findIndex((l) => !f(l));
|
|
720
|
+
n >= 0 && (t = n);
|
|
719
721
|
}
|
|
720
|
-
const
|
|
721
|
-
return
|
|
722
|
+
const i = m(this.cellAnchor, { row: e.rowIndex, col: t }), r = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null;
|
|
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;
|
|
722
724
|
}
|
|
723
725
|
/** @internal */
|
|
724
726
|
onCellMouseUp(e) {
|
|
@@ -732,10 +734,10 @@ class L extends v {
|
|
|
732
734
|
*/
|
|
733
735
|
processColumns(e) {
|
|
734
736
|
if (this.config.checkbox && this.config.mode === "row") {
|
|
735
|
-
if (e.some((
|
|
737
|
+
if (e.some((r) => r.field === S))
|
|
736
738
|
return e;
|
|
737
|
-
const t = this.#t(), s = e.findIndex(
|
|
738
|
-
return [...e.slice(0,
|
|
739
|
+
const t = this.#t(), s = e.findIndex(I), i = s >= 0 ? s + 1 : 0;
|
|
740
|
+
return [...e.slice(0, i), t, ...e.slice(i)];
|
|
739
741
|
}
|
|
740
742
|
return e;
|
|
741
743
|
}
|
|
@@ -757,7 +759,7 @@ class L extends v {
|
|
|
757
759
|
},
|
|
758
760
|
headerRenderer: () => {
|
|
759
761
|
const e = document.createElement("div");
|
|
760
|
-
e.className = "tbw-checkbox-header";
|
|
762
|
+
if (e.className = "tbw-checkbox-header", this.config.multiSelect === !1) return e;
|
|
761
763
|
const t = document.createElement("input");
|
|
762
764
|
return t.type = "checkbox", t.className = "tbw-select-all-checkbox", t.addEventListener("click", (s) => {
|
|
763
765
|
s.stopPropagation(), s.target.checked ? this.selectAll() : this.clearSelection();
|
|
@@ -768,8 +770,8 @@ class L extends v {
|
|
|
768
770
|
t.type = "checkbox", t.className = "tbw-select-row-checkbox";
|
|
769
771
|
const s = e.cellEl;
|
|
770
772
|
if (s) {
|
|
771
|
-
const
|
|
772
|
-
|
|
773
|
+
const i = parseInt(s.getAttribute("data-row") ?? "-1", 10);
|
|
774
|
+
i >= 0 && (t.checked = this.selected.has(i));
|
|
773
775
|
}
|
|
774
776
|
return t;
|
|
775
777
|
}
|
|
@@ -779,22 +781,22 @@ class L extends v {
|
|
|
779
781
|
* Update checkbox checked states to reflect current selection.
|
|
780
782
|
* Called from #applySelectionClasses.
|
|
781
783
|
*/
|
|
782
|
-
#
|
|
783
|
-
e.querySelectorAll(".tbw-select-row-checkbox").forEach((
|
|
784
|
-
const
|
|
785
|
-
|
|
784
|
+
#i(e) {
|
|
785
|
+
e.querySelectorAll(".tbw-select-row-checkbox").forEach((i) => {
|
|
786
|
+
const r = i.closest(".cell"), n = r ? R(r) : -1;
|
|
787
|
+
n >= 0 && (i.checked = this.selected.has(n));
|
|
786
788
|
});
|
|
787
789
|
const s = e.querySelector(".tbw-select-all-checkbox");
|
|
788
790
|
if (s) {
|
|
789
|
-
const
|
|
790
|
-
let
|
|
791
|
+
const i = this.rows.length;
|
|
792
|
+
let r = 0;
|
|
791
793
|
if (this.config.isSelectable)
|
|
792
|
-
for (let
|
|
793
|
-
this.isRowSelectable(
|
|
794
|
+
for (let h = 0; h < i; h++)
|
|
795
|
+
this.isRowSelectable(h) && r++;
|
|
794
796
|
else
|
|
795
|
-
|
|
796
|
-
const
|
|
797
|
-
s.checked =
|
|
797
|
+
r = i;
|
|
798
|
+
const n = r > 0 && this.selected.size >= r, l = this.selected.size > 0;
|
|
799
|
+
s.checked = n, s.indeterminate = l && !n;
|
|
798
800
|
}
|
|
799
801
|
}
|
|
800
802
|
// #endregion
|
|
@@ -805,7 +807,7 @@ class L extends v {
|
|
|
805
807
|
* Only updates when the focus has changed since the last sync.
|
|
806
808
|
* Skips when `explicitSelection` is set (click/keyboard set selection directly).
|
|
807
809
|
*/
|
|
808
|
-
#
|
|
810
|
+
#r(e) {
|
|
809
811
|
const t = this.grid._focusRow, s = this.grid._focusCol;
|
|
810
812
|
if (e === "row") {
|
|
811
813
|
if (this.explicitSelection) {
|
|
@@ -820,8 +822,8 @@ class L extends v {
|
|
|
820
822
|
return;
|
|
821
823
|
}
|
|
822
824
|
if ((t !== this.lastSyncedFocusRow || s !== this.lastSyncedFocusCol) && (this.lastSyncedFocusRow = t, this.lastSyncedFocusCol = s, this.isCellSelectable(t, s))) {
|
|
823
|
-
const
|
|
824
|
-
(!
|
|
825
|
+
const i = this.selectedCell;
|
|
826
|
+
(!i || i.row !== t || i.col !== s) && (this.selectedCell = { row: t, col: s }, this.emit("selection-change", this.#e()));
|
|
825
827
|
}
|
|
826
828
|
}
|
|
827
829
|
}
|
|
@@ -833,33 +835,33 @@ class L extends v {
|
|
|
833
835
|
const e = this.gridElement;
|
|
834
836
|
if (!e) return;
|
|
835
837
|
const { mode: t } = this.config, s = !!this.config.isSelectable;
|
|
836
|
-
e.querySelectorAll(".cell").forEach((
|
|
837
|
-
|
|
838
|
+
e.querySelectorAll(".cell").forEach((n) => {
|
|
839
|
+
n.classList.remove("selected", "top", "bottom", "first", "last"), s && n.removeAttribute("data-selectable");
|
|
838
840
|
});
|
|
839
|
-
const
|
|
840
|
-
if (
|
|
841
|
-
|
|
842
|
-
}), t === "row" && (C(e),
|
|
843
|
-
const l =
|
|
844
|
-
|
|
845
|
-
}), this.config.checkbox && this.#
|
|
846
|
-
const
|
|
847
|
-
|
|
841
|
+
const r = e.querySelectorAll(".data-grid-row");
|
|
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"));
|
|
847
|
+
}), this.config.checkbox && this.#i(e)), (t === "cell" || t === "range") && s && e.querySelectorAll(".cell[data-row][data-col]").forEach((l) => {
|
|
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"));
|
|
848
850
|
}), t === "range" && this.ranges.length > 0) {
|
|
849
851
|
C(e);
|
|
850
|
-
const
|
|
851
|
-
for (const c of
|
|
852
|
-
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)
|
|
853
855
|
return !0;
|
|
854
856
|
return !1;
|
|
855
857
|
};
|
|
856
858
|
e.querySelectorAll(".cell[data-row][data-col]").forEach((a) => {
|
|
857
|
-
const
|
|
858
|
-
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) {
|
|
859
861
|
const u = this.columns[c];
|
|
860
862
|
if (u && f(u))
|
|
861
863
|
return;
|
|
862
|
-
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"));
|
|
863
865
|
}
|
|
864
866
|
});
|
|
865
867
|
}
|
|
@@ -871,16 +873,16 @@ class L extends v {
|
|
|
871
873
|
if (!e) return;
|
|
872
874
|
const t = e.children[0], { mode: s } = this.config;
|
|
873
875
|
if (this.pendingKeyboardUpdate && s === "range") {
|
|
874
|
-
const { shiftKey:
|
|
876
|
+
const { shiftKey: i } = this.pendingKeyboardUpdate;
|
|
875
877
|
this.pendingKeyboardUpdate = null;
|
|
876
|
-
const
|
|
877
|
-
if (
|
|
878
|
-
const l = m(this.cellAnchor, { row:
|
|
878
|
+
const r = this.grid._focusRow, n = this.grid._focusCol;
|
|
879
|
+
if (i && this.cellAnchor) {
|
|
880
|
+
const l = m(this.cellAnchor, { row: r, col: n });
|
|
879
881
|
this.ranges = [l], this.activeRange = l;
|
|
880
|
-
} else
|
|
882
|
+
} else i || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: r, col: n });
|
|
881
883
|
this.emit("selection-change", this.#e());
|
|
882
884
|
}
|
|
883
|
-
this.#
|
|
885
|
+
this.#r(s), this.grid.setAttribute("data-selection-mode", s), t && t.classList.toggle("selecting", this.isDragging), this.#s();
|
|
884
886
|
}
|
|
885
887
|
/**
|
|
886
888
|
* Called after scroll-triggered row rendering.
|
|
@@ -918,13 +920,13 @@ class L extends v {
|
|
|
918
920
|
* Get all selected cells across all ranges.
|
|
919
921
|
*/
|
|
920
922
|
getSelectedCells() {
|
|
921
|
-
return
|
|
923
|
+
return F(this.ranges);
|
|
922
924
|
}
|
|
923
925
|
/**
|
|
924
926
|
* Check if a specific cell is in range selection.
|
|
925
927
|
*/
|
|
926
928
|
isCellSelected(e, t) {
|
|
927
|
-
return
|
|
929
|
+
return K(e, t, this.ranges);
|
|
928
930
|
}
|
|
929
931
|
/**
|
|
930
932
|
* Select all selectable rows (row mode) or all cells (range mode).
|
|
@@ -940,22 +942,24 @@ class L extends v {
|
|
|
940
942
|
* ```
|
|
941
943
|
*/
|
|
942
944
|
selectAll() {
|
|
943
|
-
const { mode: e } = this.config;
|
|
944
|
-
if (
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
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
|
+
}
|
|
959
963
|
}
|
|
960
964
|
}
|
|
961
965
|
}
|
|
@@ -973,12 +977,12 @@ class L extends v {
|
|
|
973
977
|
* ```
|
|
974
978
|
*/
|
|
975
979
|
selectRows(e) {
|
|
976
|
-
if (this.config.mode
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
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();
|
|
982
986
|
}
|
|
983
987
|
/**
|
|
984
988
|
* Get the indices of all selected rows (convenience for row mode).
|
|
@@ -1020,12 +1024,12 @@ class L extends v {
|
|
|
1020
1024
|
}
|
|
1021
1025
|
if (e === "range" && this.ranges.length > 0) {
|
|
1022
1026
|
const s = /* @__PURE__ */ new Set();
|
|
1023
|
-
for (const
|
|
1024
|
-
const
|
|
1025
|
-
for (let l =
|
|
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++)
|
|
1026
1030
|
s.add(l);
|
|
1027
1031
|
}
|
|
1028
|
-
return [...s].sort((
|
|
1032
|
+
return [...s].sort((i, r) => i - r).map((i) => t[i]);
|
|
1029
1033
|
}
|
|
1030
1034
|
return [];
|
|
1031
1035
|
}
|
|
@@ -1052,7 +1056,7 @@ class L extends v {
|
|
|
1052
1056
|
// #endregion
|
|
1053
1057
|
// #region Private Helpers
|
|
1054
1058
|
#e() {
|
|
1055
|
-
return
|
|
1059
|
+
return L(
|
|
1056
1060
|
this.config.mode,
|
|
1057
1061
|
{
|
|
1058
1062
|
selectedCell: this.selectedCell,
|
|
@@ -1065,6 +1069,6 @@ class L extends v {
|
|
|
1065
1069
|
// #endregion
|
|
1066
1070
|
}
|
|
1067
1071
|
export {
|
|
1068
|
-
|
|
1072
|
+
P as SelectionPlugin
|
|
1069
1073
|
};
|
|
1070
1074
|
//# sourceMappingURL=index.js.map
|