@toolbox-web/grid 1.15.0 → 1.16.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 +45 -23
- package/all.js.map +1 -1
- package/index.js +883 -865
- package/index.js.map +1 -1
- package/lib/core/internal/columns.d.ts +0 -5
- package/lib/core/internal/columns.d.ts.map +1 -1
- package/lib/core/internal/event-delegation.d.ts.map +1 -1
- package/lib/core/internal/rows.d.ts.map +1 -1
- package/lib/core/types.d.ts +12 -0
- package/lib/core/types.d.ts.map +1 -1
- package/lib/plugins/clipboard/ClipboardPlugin.d.ts.map +1 -1
- package/lib/plugins/clipboard/copy.d.ts.map +1 -1
- package/lib/plugins/clipboard/index.js +55 -55
- 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 +59 -49
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/context-menu/menu.d.ts.map +1 -1
- package/lib/plugins/context-menu/types.d.ts +4 -4
- package/lib/plugins/context-menu/types.d.ts.map +1 -1
- package/lib/plugins/editing/EditingPlugin.d.ts.map +1 -1
- package/lib/plugins/editing/index.js +228 -216
- package/lib/plugins/editing/index.js.map +1 -1
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/filter-model.d.ts.map +1 -1
- package/lib/plugins/filtering/index.js +4 -5
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/index.js.map +1 -1
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/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/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 +26 -26
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +21 -21
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/clipboard.umd.js +4 -4
- package/umd/plugins/clipboard.umd.js.map +1 -1
- package/umd/plugins/context-menu.umd.js +1 -1
- package/umd/plugins/context-menu.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
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
function
|
|
1
|
+
function M(o) {
|
|
2
2
|
o && o.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
|
|
3
3
|
}
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
|
|
4
|
+
const v = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', P = document.createElement("template");
|
|
5
|
+
P.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
|
|
6
|
+
const D = document.createElement("template");
|
|
7
|
+
D.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
|
|
8
8
|
function L(o, e) {
|
|
9
9
|
if (o._virtualization?.enabled) {
|
|
10
|
-
const { rowHeight:
|
|
10
|
+
const { rowHeight: n, container: l, viewportEl: c } = o._virtualization, a = l, d = c?.clientHeight ?? a?.clientHeight ?? 0;
|
|
11
11
|
if (a && d > 0) {
|
|
12
|
-
const g = o._focusRow *
|
|
13
|
-
g < a.scrollTop ? a.scrollTop = g : g +
|
|
12
|
+
const g = o._focusRow * n;
|
|
13
|
+
g < a.scrollTop ? a.scrollTop = g : g + n > a.scrollTop + d && (a.scrollTop = g - d + n);
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
const t = o._activeEditRows !== void 0 && o._activeEditRows !== -1;
|
|
17
|
-
t || o.refreshVirtualWindow(!1),
|
|
18
|
-
|
|
17
|
+
t || o.refreshVirtualWindow(!1), M(o._bodyEl), Array.from(o._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((n) => {
|
|
18
|
+
n.setAttribute("aria-selected", "false");
|
|
19
19
|
});
|
|
20
|
-
const i = o._focusRow,
|
|
21
|
-
if (i >=
|
|
22
|
-
const
|
|
23
|
-
let l =
|
|
24
|
-
if ((!l || !l.classList?.contains("cell")) && (l =
|
|
20
|
+
const i = o._focusRow, r = o._virtualization.start ?? 0, s = o._virtualization.end ?? o._rows.length;
|
|
21
|
+
if (i >= r && i < s) {
|
|
22
|
+
const n = o._bodyEl.querySelectorAll(".data-grid-row")[i - r];
|
|
23
|
+
let l = n?.children[o._focusCol];
|
|
24
|
+
if ((!l || !l.classList?.contains("cell")) && (l = n?.querySelector(`.cell[data-col="${o._focusCol}"]`) ?? n?.querySelector(".cell[data-col]")), l) {
|
|
25
25
|
l.classList.add("cell-focus"), l.setAttribute("aria-selected", "true");
|
|
26
26
|
const c = o.querySelector(".tbw-scroll-area");
|
|
27
27
|
if (c && l && (!t || e?.forceHorizontalScroll))
|
|
@@ -30,14 +30,14 @@ function L(o, e) {
|
|
|
30
30
|
else if (e?.forceScrollRight)
|
|
31
31
|
c.scrollLeft = c.scrollWidth - c.clientWidth;
|
|
32
32
|
else {
|
|
33
|
-
const a = o._getHorizontalScrollOffsets?.(
|
|
33
|
+
const a = o._getHorizontalScrollOffsets?.(n ?? void 0, l) ?? { left: 0, right: 0 };
|
|
34
34
|
if (!a.skipScroll) {
|
|
35
35
|
const d = l.getBoundingClientRect(), g = c.getBoundingClientRect(), f = d.left - g.left + c.scrollLeft, E = f + d.width, p = c.scrollLeft + a.left, m = c.scrollLeft + c.clientWidth - a.right;
|
|
36
36
|
f < p ? c.scrollLeft = f - a.left : E > m && (c.scrollLeft = E - c.clientWidth + a.right);
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
39
|
if (o._activeEditRows !== void 0 && o._activeEditRows !== -1 && l.classList.contains("editing")) {
|
|
40
|
-
const a = l.querySelector(
|
|
40
|
+
const a = l.querySelector(v);
|
|
41
41
|
if (a && document.activeElement !== a)
|
|
42
42
|
try {
|
|
43
43
|
a.focus({ preventScroll: !0 });
|
|
@@ -53,7 +53,7 @@ function L(o, e) {
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
|
-
const I = '<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>',
|
|
56
|
+
const I = '<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>', H = {
|
|
57
57
|
expand: "▶",
|
|
58
58
|
collapse: "▼",
|
|
59
59
|
sortAsc: "▲",
|
|
@@ -66,7 +66,7 @@ const I = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
|
|
|
66
66
|
filterActive: I,
|
|
67
67
|
print: "🖨️"
|
|
68
68
|
};
|
|
69
|
-
class
|
|
69
|
+
class O {
|
|
70
70
|
/**
|
|
71
71
|
* Plugin dependencies - declare other plugins this one requires.
|
|
72
72
|
*
|
|
@@ -356,7 +356,7 @@ class D {
|
|
|
356
356
|
*/
|
|
357
357
|
get gridIcons() {
|
|
358
358
|
const e = this.grid?.gridConfig?.icons ?? {};
|
|
359
|
-
return { ...
|
|
359
|
+
return { ...H, ...e };
|
|
360
360
|
}
|
|
361
361
|
// #region Animation Helpers
|
|
362
362
|
/**
|
|
@@ -432,8 +432,8 @@ class D {
|
|
|
432
432
|
}
|
|
433
433
|
// #endregion
|
|
434
434
|
}
|
|
435
|
-
const
|
|
436
|
-
function
|
|
435
|
+
const B = "@layer tbw-plugins{tbw-grid{--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px;--tbw-invalid-bg: light-dark(#fef2f2, #450a0a);--tbw-invalid-border-color: light-dark(#ef4444, #f87171)}tbw-grid:not(.tbw-grid-mode) .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}tbw-grid .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px);align-items:center;justify-content:center}tbw-grid .data-grid-row>.cell.editing input:not([type=checkbox]),tbw-grid .data-grid-row>.cell.editing select,tbw-grid .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}tbw-grid .tbw-editor-host{display:contents}tbw-grid .data-grid-row>.cell[data-invalid=true]{background:var(--tbw-invalid-bg);outline:1px solid var(--tbw-invalid-border-color);outline-offset:-1px}}";
|
|
436
|
+
function x(o) {
|
|
437
437
|
const e = o.options;
|
|
438
438
|
return e ? typeof e == "function" ? e() : e : [];
|
|
439
439
|
}
|
|
@@ -441,9 +441,9 @@ function N(o) {
|
|
|
441
441
|
return (e) => {
|
|
442
442
|
const t = o.editorParams, i = document.createElement("input");
|
|
443
443
|
i.type = "number", i.value = e.value != null ? String(e.value) : "", t?.min !== void 0 && (i.min = String(t.min)), t?.max !== void 0 && (i.max = String(t.max)), t?.step !== void 0 && (i.step = String(t.step)), t?.placeholder && (i.placeholder = t.placeholder);
|
|
444
|
-
const
|
|
445
|
-
return i.addEventListener("blur",
|
|
446
|
-
s.key === "Enter" &&
|
|
444
|
+
const r = () => e.commit(i.value === "" ? null : Number(i.value));
|
|
445
|
+
return i.addEventListener("blur", r), i.addEventListener("keydown", (s) => {
|
|
446
|
+
s.key === "Enter" && r(), s.key === "Escape" && e.cancel();
|
|
447
447
|
}), i;
|
|
448
448
|
};
|
|
449
449
|
}
|
|
@@ -453,38 +453,38 @@ function $() {
|
|
|
453
453
|
return e.type = "checkbox", e.checked = !!o.value, e.addEventListener("change", () => o.commit(e.checked)), e;
|
|
454
454
|
};
|
|
455
455
|
}
|
|
456
|
-
function
|
|
456
|
+
function G(o) {
|
|
457
457
|
return (e) => {
|
|
458
458
|
const t = o.editorParams, i = document.createElement("input");
|
|
459
459
|
i.type = "date", e.value instanceof Date ? i.valueAsDate = e.value : typeof e.value == "string" && e.value && (i.value = e.value.split("T")[0]), t?.min && (i.min = t.min), t?.max && (i.max = t.max), t?.placeholder && (i.placeholder = t.placeholder);
|
|
460
|
-
const
|
|
460
|
+
const r = () => {
|
|
461
461
|
typeof e.value == "string" ? e.commit(i.value) : e.commit(i.valueAsDate);
|
|
462
462
|
};
|
|
463
|
-
return i.addEventListener("change",
|
|
463
|
+
return i.addEventListener("change", r), i.addEventListener("keydown", (s) => {
|
|
464
464
|
s.key === "Escape" && e.cancel();
|
|
465
465
|
}), i;
|
|
466
466
|
};
|
|
467
467
|
}
|
|
468
|
-
function
|
|
468
|
+
function z(o) {
|
|
469
469
|
return (e) => {
|
|
470
470
|
const t = o.editorParams, i = document.createElement("select");
|
|
471
471
|
if (o.multi && (i.multiple = !0), t?.includeEmpty) {
|
|
472
|
-
const
|
|
473
|
-
|
|
472
|
+
const n = document.createElement("option");
|
|
473
|
+
n.value = "", n.textContent = t.emptyLabel ?? "", i.appendChild(n);
|
|
474
474
|
}
|
|
475
|
-
|
|
475
|
+
x(o).forEach((n) => {
|
|
476
476
|
const l = document.createElement("option");
|
|
477
|
-
l.value = String(
|
|
477
|
+
l.value = String(n.value), l.textContent = n.label, (o.multi && Array.isArray(e.value) && e.value.includes(n.value) || !o.multi && e.value === n.value) && (l.selected = !0), i.appendChild(l);
|
|
478
478
|
});
|
|
479
479
|
const s = () => {
|
|
480
480
|
if (o.multi) {
|
|
481
|
-
const
|
|
482
|
-
e.commit(
|
|
481
|
+
const n = Array.from(i.selectedOptions).map((l) => l.value);
|
|
482
|
+
e.commit(n);
|
|
483
483
|
} else
|
|
484
484
|
e.commit(i.value);
|
|
485
485
|
};
|
|
486
|
-
return i.addEventListener("change", s), i.addEventListener("blur", s), i.addEventListener("keydown", (
|
|
487
|
-
|
|
486
|
+
return i.addEventListener("change", s), i.addEventListener("blur", s), i.addEventListener("keydown", (n) => {
|
|
487
|
+
n.key === "Escape" && e.cancel();
|
|
488
488
|
}), i;
|
|
489
489
|
};
|
|
490
490
|
}
|
|
@@ -492,39 +492,39 @@ function F(o) {
|
|
|
492
492
|
return (e) => {
|
|
493
493
|
const t = o.editorParams, i = document.createElement("input");
|
|
494
494
|
i.type = "text", i.value = e.value != null ? String(e.value) : "", t?.maxLength !== void 0 && (i.maxLength = t.maxLength), t?.pattern && (i.pattern = t.pattern), t?.placeholder && (i.placeholder = t.placeholder);
|
|
495
|
-
const
|
|
495
|
+
const r = () => {
|
|
496
496
|
const s = i.value;
|
|
497
497
|
(e.value === null || e.value === void 0) && s === "" || typeof e.value == "string" && s === e.value.replace(/[\n\r]/g, "") || (typeof e.value == "number" && s !== "" ? e.commit(Number(s)) : e.commit(s));
|
|
498
498
|
};
|
|
499
|
-
return i.addEventListener("blur",
|
|
500
|
-
s.key === "Enter" &&
|
|
499
|
+
return i.addEventListener("blur", r), i.addEventListener("keydown", (s) => {
|
|
500
|
+
s.key === "Enter" && r(), s.key === "Escape" && e.cancel();
|
|
501
501
|
}), i;
|
|
502
502
|
};
|
|
503
503
|
}
|
|
504
|
-
function
|
|
504
|
+
function K(o) {
|
|
505
505
|
switch (o.type) {
|
|
506
506
|
case "number":
|
|
507
507
|
return N(o);
|
|
508
508
|
case "boolean":
|
|
509
509
|
return $();
|
|
510
510
|
case "date":
|
|
511
|
-
return z(o);
|
|
512
|
-
case "select":
|
|
513
511
|
return G(o);
|
|
512
|
+
case "select":
|
|
513
|
+
return z(o);
|
|
514
514
|
default:
|
|
515
515
|
return F(o);
|
|
516
516
|
}
|
|
517
517
|
}
|
|
518
|
-
function
|
|
518
|
+
function j(o, e) {
|
|
519
519
|
if (e.editor) return e.editor;
|
|
520
520
|
if (e.__editorTemplate) return "template";
|
|
521
521
|
if (!e.type) return;
|
|
522
522
|
const i = o.effectiveConfig?.typeDefaults;
|
|
523
523
|
if (i?.[e.type]?.editor)
|
|
524
524
|
return i[e.type].editor;
|
|
525
|
-
const
|
|
526
|
-
if (
|
|
527
|
-
const s =
|
|
525
|
+
const r = o.__frameworkAdapter;
|
|
526
|
+
if (r?.getTypeDefault) {
|
|
527
|
+
const s = r.getTypeDefault(e.type);
|
|
528
528
|
if (s?.editor)
|
|
529
529
|
return s.editor;
|
|
530
530
|
}
|
|
@@ -532,7 +532,7 @@ function W(o, e) {
|
|
|
532
532
|
function S(o) {
|
|
533
533
|
return !(typeof o != "string" || o === "__proto__" || o === "constructor" || o === "prototype");
|
|
534
534
|
}
|
|
535
|
-
function
|
|
535
|
+
function W(o) {
|
|
536
536
|
const e = (o.__editingCellCount ?? 0) + 1;
|
|
537
537
|
o.__editingCellCount = e, o.setAttribute("data-has-editing", "");
|
|
538
538
|
}
|
|
@@ -545,12 +545,12 @@ function _(o, e, t) {
|
|
|
545
545
|
function T(o) {
|
|
546
546
|
}
|
|
547
547
|
function Q(o, e, t, i) {
|
|
548
|
-
const
|
|
549
|
-
|
|
550
|
-
t(_(
|
|
551
|
-
}),
|
|
548
|
+
const r = o.querySelector("input,textarea,select");
|
|
549
|
+
r && (r.addEventListener("blur", () => {
|
|
550
|
+
t(_(r, e, i));
|
|
551
|
+
}), r instanceof HTMLInputElement && r.type === "checkbox" ? r.addEventListener("change", () => t(r.checked)) : r instanceof HTMLSelectElement && r.addEventListener("change", () => t(_(r, e, i))));
|
|
552
552
|
}
|
|
553
|
-
class X extends
|
|
553
|
+
class X extends O {
|
|
554
554
|
/**
|
|
555
555
|
* Plugin manifest - declares owned properties for configuration validation.
|
|
556
556
|
* @internal
|
|
@@ -590,7 +590,7 @@ class X extends D {
|
|
|
590
590
|
/** @internal */
|
|
591
591
|
name = "editing";
|
|
592
592
|
/** @internal */
|
|
593
|
-
styles =
|
|
593
|
+
styles = B;
|
|
594
594
|
/** @internal */
|
|
595
595
|
get defaultConfig() {
|
|
596
596
|
return {
|
|
@@ -612,7 +612,7 @@ class X extends D {
|
|
|
612
612
|
/** Snapshots of row data before editing started */
|
|
613
613
|
#l = /* @__PURE__ */ new Map();
|
|
614
614
|
/** Set of row IDs that have been modified (ID-based for stability) */
|
|
615
|
-
#
|
|
615
|
+
#r = /* @__PURE__ */ new Set();
|
|
616
616
|
/** Set of cells currently in edit mode: "rowIndex:colIndex" */
|
|
617
617
|
#o = /* @__PURE__ */ new Set();
|
|
618
618
|
/**
|
|
@@ -636,7 +636,7 @@ class X extends D {
|
|
|
636
636
|
* When false: arrow keys navigate between cells (navigation mode).
|
|
637
637
|
* Escape switches to navigation mode, Enter switches to edit mode.
|
|
638
638
|
*/
|
|
639
|
-
#
|
|
639
|
+
#n = !1;
|
|
640
640
|
/**
|
|
641
641
|
* In grid mode, when true, prevents inputs from auto-focusing.
|
|
642
642
|
* This is set when Escape is pressed (navigation mode) and cleared
|
|
@@ -660,13 +660,13 @@ class X extends D {
|
|
|
660
660
|
}), Object.defineProperty(e, "changedRowIds", {
|
|
661
661
|
get: () => this.changedRowIds,
|
|
662
662
|
configurable: !0
|
|
663
|
-
}), e.resetChangedRows = (
|
|
664
|
-
s && this.beginCellEdit(
|
|
663
|
+
}), e.resetChangedRows = (r) => this.resetChangedRows(r), e.beginBulkEdit = (r, s) => {
|
|
664
|
+
s && this.beginCellEdit(r, s);
|
|
665
665
|
}, document.addEventListener(
|
|
666
666
|
"keydown",
|
|
667
|
-
(
|
|
668
|
-
if (!this.#t &&
|
|
669
|
-
if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(
|
|
667
|
+
(r) => {
|
|
668
|
+
if (!this.#t && r.key === "Escape" && this.#e !== -1) {
|
|
669
|
+
if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(r) === !1)
|
|
670
670
|
return;
|
|
671
671
|
this.#s(this.#e, !0);
|
|
672
672
|
}
|
|
@@ -674,63 +674,66 @@ class X extends D {
|
|
|
674
674
|
{ capture: !0, signal: t }
|
|
675
675
|
), document.addEventListener(
|
|
676
676
|
"mousedown",
|
|
677
|
-
(
|
|
677
|
+
(r) => {
|
|
678
678
|
if (this.#t || this.#e === -1) return;
|
|
679
679
|
const s = i.findRenderedRowElement?.(this.#e);
|
|
680
|
-
!s || (
|
|
680
|
+
!s || (r.composedPath && r.composedPath() || []).includes(s) || this.config.onBeforeEditClose && this.config.onBeforeEditClose(r) === !1 || queueMicrotask(() => {
|
|
681
681
|
this.#e !== -1 && this.#s(this.#e, !1);
|
|
682
682
|
});
|
|
683
683
|
},
|
|
684
684
|
{ signal: t }
|
|
685
685
|
), this.gridElement.addEventListener(
|
|
686
686
|
"cell-change",
|
|
687
|
-
(
|
|
688
|
-
const s =
|
|
687
|
+
(r) => {
|
|
688
|
+
const s = r.detail;
|
|
689
689
|
if (s.source === "user") return;
|
|
690
|
-
const
|
|
690
|
+
const n = `${s.rowIndex}:${s.field}`, l = this.#c.get(n);
|
|
691
691
|
l && l(s.newValue);
|
|
692
692
|
},
|
|
693
693
|
{ signal: t }
|
|
694
|
-
), this.#t && (this.gridElement.classList.add("tbw-grid-mode"), this.requestRender(), this.gridElement.addEventListener(
|
|
694
|
+
), this.#t && (i._isGridEditMode = !0, this.gridElement.classList.add("tbw-grid-mode"), this.requestRender(), this.gridElement.addEventListener(
|
|
695
695
|
"focusin",
|
|
696
|
-
(
|
|
697
|
-
const s =
|
|
698
|
-
if (s.matches(
|
|
696
|
+
(r) => {
|
|
697
|
+
const s = r.target;
|
|
698
|
+
if (s.matches(v)) {
|
|
699
699
|
if (this.#a) {
|
|
700
700
|
s.blur(), this.gridElement.focus();
|
|
701
701
|
return;
|
|
702
702
|
}
|
|
703
|
-
this.#
|
|
703
|
+
this.#n = !0;
|
|
704
704
|
}
|
|
705
705
|
},
|
|
706
706
|
{ signal: t }
|
|
707
707
|
), this.gridElement.addEventListener(
|
|
708
708
|
"focusout",
|
|
709
|
-
(
|
|
710
|
-
const s =
|
|
711
|
-
(!s || !this.gridElement.contains(s) || !s.matches(
|
|
709
|
+
(r) => {
|
|
710
|
+
const s = r.relatedTarget;
|
|
711
|
+
(!s || !this.gridElement.contains(s) || !s.matches(v)) && (this.#n = !1);
|
|
712
712
|
},
|
|
713
713
|
{ signal: t }
|
|
714
714
|
), this.gridElement.addEventListener(
|
|
715
715
|
"keydown",
|
|
716
|
-
(
|
|
717
|
-
if (
|
|
716
|
+
(r) => {
|
|
717
|
+
if (r.key === "Escape" && this.#n) {
|
|
718
|
+
if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(r) === !1)
|
|
719
|
+
return;
|
|
718
720
|
const s = document.activeElement;
|
|
719
|
-
s && this.gridElement.contains(s) && (s.blur(), this.gridElement.focus()), this.#
|
|
721
|
+
s && this.gridElement.contains(s) && (s.blur(), this.gridElement.focus()), this.#n = !1, this.#a = !0, r.preventDefault(), r.stopPropagation();
|
|
720
722
|
}
|
|
721
723
|
},
|
|
722
724
|
{ capture: !0, signal: t }
|
|
723
725
|
), this.gridElement.addEventListener(
|
|
724
726
|
"mousedown",
|
|
725
|
-
(
|
|
726
|
-
|
|
727
|
+
(r) => {
|
|
728
|
+
r.target.matches(v) && (this.#a = !1);
|
|
727
729
|
},
|
|
728
730
|
{ signal: t }
|
|
729
731
|
));
|
|
730
732
|
}
|
|
731
733
|
/** @internal */
|
|
732
734
|
detach() {
|
|
733
|
-
|
|
735
|
+
const e = this.gridElement;
|
|
736
|
+
e._isGridEditMode = !1, this.gridElement.classList.remove("tbw-grid-mode"), this.#e = -1, this.#u = -1, this.#l.clear(), this.#r.clear(), this.#o.clear(), this.#c.clear(), this.#n = !1, this.#a = !1, this.#d = !1, super.detach();
|
|
734
737
|
}
|
|
735
738
|
/**
|
|
736
739
|
* Handle plugin queries.
|
|
@@ -752,8 +755,8 @@ class X extends D {
|
|
|
752
755
|
if (this.#t) return !1;
|
|
753
756
|
const t = this.grid, i = this.config.editOn ?? t.effectiveConfig?.editOn;
|
|
754
757
|
if (i === !1 || i === "manual" || i !== "click" && i !== "dblclick") return !1;
|
|
755
|
-
const
|
|
756
|
-
if (i === "click" &&
|
|
758
|
+
const r = e.originalEvent.type === "dblclick";
|
|
759
|
+
if (i === "click" && r || i === "dblclick" && !r) return !1;
|
|
757
760
|
const { rowIndex: s } = e;
|
|
758
761
|
return t._columns?.some((l) => l.editable) ? (e.originalEvent.stopPropagation(), this.beginBulkEdit(s), !0) : !1;
|
|
759
762
|
}
|
|
@@ -764,20 +767,24 @@ class X extends D {
|
|
|
764
767
|
onKeyDown(e) {
|
|
765
768
|
const t = this.grid;
|
|
766
769
|
if (e.key === "Escape") {
|
|
767
|
-
if (this.#t && this.#
|
|
770
|
+
if (this.#t && this.#n) {
|
|
771
|
+
if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1)
|
|
772
|
+
return !0;
|
|
768
773
|
const i = document.activeElement;
|
|
769
|
-
return i && this.gridElement.contains(i) && i.blur(), this.#
|
|
774
|
+
return i && this.gridElement.contains(i) && i.blur(), this.#n = !1, this.requestAfterRender(), !0;
|
|
770
775
|
}
|
|
771
776
|
if (this.#e !== -1 && !this.#t)
|
|
772
777
|
return this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1 || this.#s(this.#e, !0), !0;
|
|
773
778
|
}
|
|
774
|
-
if (this.#t && !this.#
|
|
779
|
+
if (this.#t && !this.#n && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight"))
|
|
775
780
|
return !1;
|
|
781
|
+
if (this.#t && this.#n && (e.key === "ArrowUp" || e.key === "ArrowDown"))
|
|
782
|
+
return !0;
|
|
776
783
|
if ((e.key === "ArrowUp" || e.key === "ArrowDown") && this.#e !== -1 && !this.#t) {
|
|
777
784
|
if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1)
|
|
778
785
|
return !0;
|
|
779
|
-
const i = t._rows.length - 1,
|
|
780
|
-
return this.#s(
|
|
786
|
+
const i = t._rows.length - 1, r = this.#e;
|
|
787
|
+
return this.#s(r, !1), e.key === "ArrowDown" ? t._focusRow = Math.min(i, t._focusRow + 1) : t._focusRow = Math.max(0, t._focusRow - 1), e.preventDefault(), L(t), this.requestAfterRender(), !0;
|
|
781
788
|
}
|
|
782
789
|
if (e.key === "Tab" && (this.#e !== -1 || this.#t)) {
|
|
783
790
|
if (e.preventDefault(), this.#d)
|
|
@@ -788,33 +795,33 @@ class X extends D {
|
|
|
788
795
|
if (e.key === " " || e.key === "Spacebar") {
|
|
789
796
|
if (this.#e !== -1)
|
|
790
797
|
return !1;
|
|
791
|
-
const i = t._focusRow,
|
|
792
|
-
if (i >= 0 &&
|
|
793
|
-
const s = t._visibleColumns[
|
|
794
|
-
if (s?.editable && s.type === "boolean" &&
|
|
798
|
+
const i = t._focusRow, r = t._focusCol;
|
|
799
|
+
if (i >= 0 && r >= 0) {
|
|
800
|
+
const s = t._visibleColumns[r], n = t._rows[i];
|
|
801
|
+
if (s?.editable && s.type === "boolean" && n) {
|
|
795
802
|
const l = s.field;
|
|
796
803
|
if (S(l)) {
|
|
797
|
-
const a = !
|
|
798
|
-
return this.#E(i, s, a,
|
|
804
|
+
const a = !n[l];
|
|
805
|
+
return this.#E(i, s, a, n), e.preventDefault(), this.requestRender(), !0;
|
|
799
806
|
}
|
|
800
807
|
}
|
|
801
808
|
}
|
|
802
809
|
return !1;
|
|
803
810
|
}
|
|
804
|
-
if (e.key === "Enter" && !e.shiftKey) {
|
|
805
|
-
if (this.#t && !this.#
|
|
811
|
+
if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
|
|
812
|
+
if (this.#t && !this.#n)
|
|
806
813
|
return this.#y(), !0;
|
|
807
814
|
if (this.#e !== -1)
|
|
808
815
|
return !!(this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1);
|
|
809
816
|
const i = this.config.editOn ?? t.effectiveConfig?.editOn;
|
|
810
817
|
if (i === !1 || i === "manual") return !1;
|
|
811
|
-
const
|
|
812
|
-
if (
|
|
813
|
-
const l = t._visibleColumns[s], c = t._rows[
|
|
818
|
+
const r = t._focusRow, s = t._focusCol;
|
|
819
|
+
if (r >= 0 && t._columns?.some((l) => l.editable)) {
|
|
820
|
+
const l = t._visibleColumns[s], c = t._rows[r], a = l?.field ?? "", d = a && c ? c[a] : void 0, g = this.gridElement.querySelector(`[data-row="${r}"][data-col="${s}"]`), f = new CustomEvent("cell-activate", {
|
|
814
821
|
cancelable: !0,
|
|
815
822
|
bubbles: !0,
|
|
816
823
|
detail: {
|
|
817
|
-
rowIndex:
|
|
824
|
+
rowIndex: r,
|
|
818
825
|
colIndex: s,
|
|
819
826
|
field: a,
|
|
820
827
|
value: d,
|
|
@@ -828,19 +835,19 @@ class X extends D {
|
|
|
828
835
|
const E = new CustomEvent("activate-cell", {
|
|
829
836
|
cancelable: !0,
|
|
830
837
|
bubbles: !0,
|
|
831
|
-
detail: { row:
|
|
838
|
+
detail: { row: r, col: s }
|
|
832
839
|
});
|
|
833
|
-
return this.gridElement.dispatchEvent(E), f.defaultPrevented || E.defaultPrevented ? (e.preventDefault(), !0) : (this.beginBulkEdit(
|
|
840
|
+
return this.gridElement.dispatchEvent(E), f.defaultPrevented || E.defaultPrevented ? (e.preventDefault(), !0) : (this.beginBulkEdit(r), !0);
|
|
834
841
|
}
|
|
835
842
|
return !1;
|
|
836
843
|
}
|
|
837
844
|
if (e.key === "F2") {
|
|
838
845
|
if (this.#e !== -1 || this.#t || (this.config.editOn ?? t.effectiveConfig?.editOn) === !1) return !1;
|
|
839
|
-
const
|
|
840
|
-
if (
|
|
841
|
-
const
|
|
842
|
-
if (
|
|
843
|
-
return e.preventDefault(), this.beginCellEdit(
|
|
846
|
+
const r = t._focusRow, s = t._focusCol;
|
|
847
|
+
if (r >= 0 && s >= 0) {
|
|
848
|
+
const n = t._visibleColumns[s];
|
|
849
|
+
if (n?.editable && n.field)
|
|
850
|
+
return e.preventDefault(), this.beginCellEdit(r, n.field), !0;
|
|
844
851
|
}
|
|
845
852
|
return !1;
|
|
846
853
|
}
|
|
@@ -854,17 +861,17 @@ class X extends D {
|
|
|
854
861
|
* @internal
|
|
855
862
|
*/
|
|
856
863
|
processColumns(e) {
|
|
857
|
-
const t = this.grid, i = t.effectiveConfig?.typeDefaults,
|
|
858
|
-
return !i && !
|
|
864
|
+
const t = this.grid, i = t.effectiveConfig?.typeDefaults, r = t.__frameworkAdapter;
|
|
865
|
+
return !i && !r?.getTypeDefault ? e : e.map((s) => {
|
|
859
866
|
if (!s.type) return s;
|
|
860
|
-
let
|
|
861
|
-
if (i?.[s.type]?.editorParams && (
|
|
862
|
-
const l =
|
|
863
|
-
l?.editorParams && (
|
|
867
|
+
let n;
|
|
868
|
+
if (i?.[s.type]?.editorParams && (n = i[s.type].editorParams), !n && r?.getTypeDefault) {
|
|
869
|
+
const l = r.getTypeDefault(s.type);
|
|
870
|
+
l?.editorParams && (n = l.editorParams);
|
|
864
871
|
}
|
|
865
|
-
return
|
|
872
|
+
return n ? {
|
|
866
873
|
...s,
|
|
867
|
-
editorParams: { ...
|
|
874
|
+
editorParams: { ...n, ...s.editorParams }
|
|
868
875
|
} : s;
|
|
869
876
|
});
|
|
870
877
|
}
|
|
@@ -876,18 +883,18 @@ class X extends D {
|
|
|
876
883
|
*/
|
|
877
884
|
afterRender() {
|
|
878
885
|
const e = this.grid;
|
|
879
|
-
if (this.#f && (this.#f = !1, this.#
|
|
886
|
+
if (this.#f && (this.#f = !1, this.#v(e)), this.#h !== -1) {
|
|
880
887
|
const t = this.#h;
|
|
881
888
|
this.#h = -1, e.animateRow?.(t, "change");
|
|
882
889
|
}
|
|
883
890
|
if (!this.#t && this.#o.size !== 0)
|
|
884
891
|
for (const t of this.#o) {
|
|
885
|
-
const [i,
|
|
892
|
+
const [i, r] = t.split(":"), s = parseInt(i, 10), n = parseInt(r, 10), l = e.findRenderedRowElement?.(s);
|
|
886
893
|
if (!l) continue;
|
|
887
|
-
const c = l.querySelector(`.cell[data-col="${
|
|
894
|
+
const c = l.querySelector(`.cell[data-col="${n}"]`);
|
|
888
895
|
if (!c || c.classList.contains("editing")) continue;
|
|
889
|
-
const a = e._rows[s], d = e._visibleColumns[
|
|
890
|
-
a && d && this.#m(a, s, d,
|
|
896
|
+
const a = e._rows[s], d = e._visibleColumns[n];
|
|
897
|
+
a && d && this.#m(a, s, d, n, c, !0);
|
|
891
898
|
}
|
|
892
899
|
}
|
|
893
900
|
/**
|
|
@@ -897,8 +904,8 @@ class X extends D {
|
|
|
897
904
|
*/
|
|
898
905
|
afterCellRender(e) {
|
|
899
906
|
if (!this.#t) return;
|
|
900
|
-
const { row: t, rowIndex: i, column:
|
|
901
|
-
|
|
907
|
+
const { row: t, rowIndex: i, column: r, colIndex: s, cellElement: n } = e;
|
|
908
|
+
r.editable && (n.classList.contains("editing") || this.#m(t, i, r, s, n, !0));
|
|
902
909
|
}
|
|
903
910
|
/**
|
|
904
911
|
* On scroll render, reapply editors to recycled cells.
|
|
@@ -915,7 +922,7 @@ class X extends D {
|
|
|
915
922
|
*/
|
|
916
923
|
get changedRows() {
|
|
917
924
|
const e = [];
|
|
918
|
-
for (const t of this.#
|
|
925
|
+
for (const t of this.#r) {
|
|
919
926
|
const i = this.grid.getRow(t);
|
|
920
927
|
i && e.push(i);
|
|
921
928
|
}
|
|
@@ -925,7 +932,7 @@ class X extends D {
|
|
|
925
932
|
* Get IDs of all modified rows.
|
|
926
933
|
*/
|
|
927
934
|
get changedRowIds() {
|
|
928
|
-
return Array.from(this.#
|
|
935
|
+
return Array.from(this.#r);
|
|
929
936
|
}
|
|
930
937
|
/**
|
|
931
938
|
* Get the currently active edit row index, or -1 if not editing.
|
|
@@ -959,8 +966,8 @@ class X extends D {
|
|
|
959
966
|
const t = this.grid, i = t._rows[e];
|
|
960
967
|
if (!i) return !1;
|
|
961
968
|
try {
|
|
962
|
-
const
|
|
963
|
-
return
|
|
969
|
+
const r = t.getRowId?.(i);
|
|
970
|
+
return r ? this.#r.has(r) : !1;
|
|
964
971
|
} catch {
|
|
965
972
|
return !1;
|
|
966
973
|
}
|
|
@@ -970,7 +977,7 @@ class X extends D {
|
|
|
970
977
|
* @param rowId - Row ID to check
|
|
971
978
|
*/
|
|
972
979
|
isRowChangedById(e) {
|
|
973
|
-
return this.#
|
|
980
|
+
return this.#r.has(e);
|
|
974
981
|
}
|
|
975
982
|
// #region Cell Validation
|
|
976
983
|
/**
|
|
@@ -995,8 +1002,8 @@ class X extends D {
|
|
|
995
1002
|
* ```
|
|
996
1003
|
*/
|
|
997
1004
|
setInvalid(e, t, i = "") {
|
|
998
|
-
let
|
|
999
|
-
|
|
1005
|
+
let r = this.#i.get(e);
|
|
1006
|
+
r || (r = /* @__PURE__ */ new Map(), this.#i.set(e, r)), r.set(t, i), this.#g(e, t, !0);
|
|
1000
1007
|
}
|
|
1001
1008
|
/**
|
|
1002
1009
|
* Clear the invalid state for a specific cell.
|
|
@@ -1017,7 +1024,7 @@ class X extends D {
|
|
|
1017
1024
|
const t = this.#i.get(e);
|
|
1018
1025
|
if (t) {
|
|
1019
1026
|
const i = Array.from(t.keys());
|
|
1020
|
-
this.#i.delete(e), i.forEach((
|
|
1027
|
+
this.#i.delete(e), i.forEach((r) => this.#g(e, r, !1));
|
|
1021
1028
|
}
|
|
1022
1029
|
}
|
|
1023
1030
|
/**
|
|
@@ -1026,7 +1033,7 @@ class X extends D {
|
|
|
1026
1033
|
clearAllInvalid() {
|
|
1027
1034
|
const e = Array.from(this.#i.entries());
|
|
1028
1035
|
this.#i.clear(), e.forEach(([t, i]) => {
|
|
1029
|
-
i.forEach((
|
|
1036
|
+
i.forEach((r, s) => this.#g(t, s, !1));
|
|
1030
1037
|
});
|
|
1031
1038
|
}
|
|
1032
1039
|
/**
|
|
@@ -1072,17 +1079,17 @@ class X extends D {
|
|
|
1072
1079
|
* Sync the data-invalid attribute on a cell element.
|
|
1073
1080
|
*/
|
|
1074
1081
|
#g(e, t, i) {
|
|
1075
|
-
const
|
|
1082
|
+
const r = this.grid, s = r._visibleColumns?.findIndex((d) => d.field === t);
|
|
1076
1083
|
if (s === -1 || s === void 0) return;
|
|
1077
|
-
const l =
|
|
1084
|
+
const l = r._rows?.findIndex((d) => {
|
|
1078
1085
|
try {
|
|
1079
|
-
return
|
|
1086
|
+
return r.getRowId?.(d) === e;
|
|
1080
1087
|
} catch {
|
|
1081
1088
|
return !1;
|
|
1082
1089
|
}
|
|
1083
1090
|
});
|
|
1084
1091
|
if (l === -1 || l === void 0) return;
|
|
1085
|
-
const a =
|
|
1092
|
+
const a = r.findRenderedRowElement?.(l)?.querySelector(`.cell[data-col="${s}"]`);
|
|
1086
1093
|
if (a)
|
|
1087
1094
|
if (i) {
|
|
1088
1095
|
a.setAttribute("data-invalid", "true");
|
|
@@ -1099,7 +1106,7 @@ class X extends D {
|
|
|
1099
1106
|
*/
|
|
1100
1107
|
resetChangedRows(e) {
|
|
1101
1108
|
const t = this.changedRows, i = this.changedRowIds;
|
|
1102
|
-
this.#
|
|
1109
|
+
this.#r.clear(), this.#p(), e || this.emit("changed-rows-reset", { rows: t, ids: i }), this.grid._rowPool?.forEach((s) => s.classList.remove("changed"));
|
|
1103
1110
|
}
|
|
1104
1111
|
/**
|
|
1105
1112
|
* Programmatically begin editing a cell.
|
|
@@ -1108,10 +1115,10 @@ class X extends D {
|
|
|
1108
1115
|
* @fires cell-commit - Emitted when the cell value is committed (on blur or Enter)
|
|
1109
1116
|
*/
|
|
1110
1117
|
beginCellEdit(e, t) {
|
|
1111
|
-
const i = this.grid,
|
|
1112
|
-
if (
|
|
1113
|
-
const l = i.findRenderedRowElement?.(e)?.querySelector(`.cell[data-col="${
|
|
1114
|
-
l && (this.#d = !0, this.#b(e,
|
|
1118
|
+
const i = this.grid, r = i._visibleColumns.findIndex((c) => c.field === t);
|
|
1119
|
+
if (r === -1 || !i._visibleColumns[r]?.editable) return;
|
|
1120
|
+
const l = i.findRenderedRowElement?.(e)?.querySelector(`.cell[data-col="${r}"]`);
|
|
1121
|
+
l && (this.#d = !0, this.#b(e, r, l));
|
|
1115
1122
|
}
|
|
1116
1123
|
/**
|
|
1117
1124
|
* Programmatically begin editing all editable cells in a row.
|
|
@@ -1125,17 +1132,17 @@ class X extends D {
|
|
|
1125
1132
|
const s = t.findRenderedRowElement?.(e);
|
|
1126
1133
|
if (!s) return;
|
|
1127
1134
|
this.#d = !1;
|
|
1128
|
-
const
|
|
1129
|
-
this.#
|
|
1135
|
+
const n = t._rows[e];
|
|
1136
|
+
this.#w(e, n), Array.from(s.children).forEach((l, c) => {
|
|
1130
1137
|
const a = t._visibleColumns[c];
|
|
1131
1138
|
if (a?.editable) {
|
|
1132
1139
|
const d = l;
|
|
1133
|
-
d.classList.contains("editing") || this.#m(
|
|
1140
|
+
d.classList.contains("editing") || this.#m(n, e, a, c, d, !0);
|
|
1134
1141
|
}
|
|
1135
1142
|
}), setTimeout(() => {
|
|
1136
1143
|
let l = s.querySelector(`.cell[data-col="${t._focusCol}"]`);
|
|
1137
1144
|
if (l?.classList.contains("editing") || (l = s.querySelector(".cell.editing")), l?.classList.contains("editing")) {
|
|
1138
|
-
const c = l.querySelector(
|
|
1145
|
+
const c = l.querySelector(v);
|
|
1139
1146
|
try {
|
|
1140
1147
|
c?.focus({ preventScroll: !0 });
|
|
1141
1148
|
} catch {
|
|
@@ -1162,8 +1169,8 @@ class X extends D {
|
|
|
1162
1169
|
* Begin editing a single cell.
|
|
1163
1170
|
*/
|
|
1164
1171
|
#b(e, t, i) {
|
|
1165
|
-
const
|
|
1166
|
-
!s || !
|
|
1172
|
+
const r = this.grid, s = r._rows[e], n = r._visibleColumns[t];
|
|
1173
|
+
!s || !n?.editable || i.classList.contains("editing") || (this.#e !== e && this.#w(e, s), this.#u = t, this.#m(s, e, n, t, i, !1));
|
|
1167
1174
|
}
|
|
1168
1175
|
/**
|
|
1169
1176
|
* Focus the editor input in the currently focused cell (grid mode only).
|
|
@@ -1174,8 +1181,8 @@ class X extends D {
|
|
|
1174
1181
|
if (t < 0 || i < 0) return;
|
|
1175
1182
|
const s = e.findRenderedRowElement?.(t)?.querySelector(`.cell[data-col="${i}"]`);
|
|
1176
1183
|
if (s?.classList.contains("editing")) {
|
|
1177
|
-
const
|
|
1178
|
-
|
|
1184
|
+
const n = s.querySelector(v);
|
|
1185
|
+
n && (this.#a = !1, n.focus(), this.#n = !0, n instanceof HTMLInputElement && (n.type === "text" || n.type === "number") && n.select());
|
|
1179
1186
|
}
|
|
1180
1187
|
}
|
|
1181
1188
|
/**
|
|
@@ -1184,20 +1191,20 @@ class X extends D {
|
|
|
1184
1191
|
* Wraps to next/previous row when reaching row boundaries.
|
|
1185
1192
|
*/
|
|
1186
1193
|
#C(e) {
|
|
1187
|
-
const t = this.grid, i = t._rows,
|
|
1194
|
+
const t = this.grid, i = t._rows, r = this.#t ? t._focusRow : this.#e, s = t._visibleColumns.map((a, d) => a.editable ? d : -1).filter((a) => a >= 0);
|
|
1188
1195
|
if (s.length === 0) return;
|
|
1189
1196
|
const l = s.indexOf(t._focusCol) + (e ? 1 : -1);
|
|
1190
1197
|
if (l >= 0 && l < s.length) {
|
|
1191
1198
|
t._focusCol = s[l];
|
|
1192
|
-
const d = t.findRenderedRowElement?.(
|
|
1193
|
-
d?.classList.contains("editing") && d.querySelector(
|
|
1199
|
+
const d = t.findRenderedRowElement?.(r)?.querySelector(`.cell[data-col="${s[l]}"]`);
|
|
1200
|
+
d?.classList.contains("editing") && d.querySelector(v)?.focus({ preventScroll: !0 }), L(t, { forceHorizontalScroll: !0 });
|
|
1194
1201
|
return;
|
|
1195
1202
|
}
|
|
1196
|
-
const c =
|
|
1203
|
+
const c = r + (e ? 1 : -1);
|
|
1197
1204
|
c >= 0 && c < i.length && (this.#t ? (t._focusRow = c, t._focusCol = e ? s[0] : s[s.length - 1], L(t, { forceHorizontalScroll: !0 }), this.requestAfterRender(), setTimeout(() => {
|
|
1198
1205
|
const d = t.findRenderedRowElement?.(c)?.querySelector(`.cell[data-col="${t._focusCol}"]`);
|
|
1199
|
-
d?.classList.contains("editing") && d.querySelector(
|
|
1200
|
-
}, 0)) : (this.#s(
|
|
1206
|
+
d?.classList.contains("editing") && d.querySelector(v)?.focus({ preventScroll: !0 });
|
|
1207
|
+
}, 0)) : (this.#s(r, !1), t._focusRow = c, t._focusCol = e ? s[0] : s[s.length - 1], this.beginBulkEdit(c), L(t, { forceHorizontalScroll: !0 })));
|
|
1201
1208
|
}
|
|
1202
1209
|
/**
|
|
1203
1210
|
* Sync the internal grid state with the plugin's editing state.
|
|
@@ -1209,17 +1216,17 @@ class X extends D {
|
|
|
1209
1216
|
/**
|
|
1210
1217
|
* Snapshot original row data and mark as editing.
|
|
1211
1218
|
*/
|
|
1212
|
-
#
|
|
1219
|
+
#w(e, t) {
|
|
1213
1220
|
if (this.#e !== e && (this.#l.set(e, { ...t }), this.#e = e, this.#p(), !this.#t)) {
|
|
1214
1221
|
const i = this.grid;
|
|
1215
|
-
let
|
|
1222
|
+
let r = "";
|
|
1216
1223
|
try {
|
|
1217
|
-
|
|
1224
|
+
r = i.getRowId?.(t) ?? "";
|
|
1218
1225
|
} catch {
|
|
1219
1226
|
}
|
|
1220
1227
|
this.emit("edit-open", {
|
|
1221
1228
|
rowIndex: e,
|
|
1222
|
-
rowId:
|
|
1229
|
+
rowId: r,
|
|
1223
1230
|
row: t
|
|
1224
1231
|
});
|
|
1225
1232
|
}
|
|
@@ -1229,14 +1236,14 @@ class X extends D {
|
|
|
1229
1236
|
*/
|
|
1230
1237
|
#s(e, t) {
|
|
1231
1238
|
if (this.#e !== e) return;
|
|
1232
|
-
const i = this.grid,
|
|
1239
|
+
const i = this.grid, r = this.#l.get(e), s = i._rows[e], n = i.findRenderedRowElement?.(e);
|
|
1233
1240
|
let l;
|
|
1234
1241
|
if (s)
|
|
1235
1242
|
try {
|
|
1236
1243
|
l = i.getRowId?.(s);
|
|
1237
1244
|
} catch {
|
|
1238
1245
|
}
|
|
1239
|
-
if (!t &&
|
|
1246
|
+
if (!t && n && s && n.querySelectorAll(".cell.editing").forEach((a) => {
|
|
1240
1247
|
const d = Number(a.getAttribute("data-col"));
|
|
1241
1248
|
if (isNaN(d)) return;
|
|
1242
1249
|
const g = i._visibleColumns[d];
|
|
@@ -1247,33 +1254,33 @@ class X extends D {
|
|
|
1247
1254
|
const E = g.field, p = s[E], m = _(f, g, p);
|
|
1248
1255
|
p !== m && this.#E(e, g, m, s);
|
|
1249
1256
|
}
|
|
1250
|
-
}), t &&
|
|
1251
|
-
Object.keys(
|
|
1252
|
-
s[c] =
|
|
1253
|
-
}), l && (this.#
|
|
1257
|
+
}), t && r && s)
|
|
1258
|
+
Object.keys(r).forEach((c) => {
|
|
1259
|
+
s[c] = r[c];
|
|
1260
|
+
}), l && (this.#r.delete(l), this.clearRowInvalid(l));
|
|
1254
1261
|
else if (!t && s) {
|
|
1255
|
-
const c = this.#_(
|
|
1262
|
+
const c = this.#_(r, s), a = l ? this.#r.has(l) : c, d = this.emitCancelable("row-commit", {
|
|
1256
1263
|
rowIndex: e,
|
|
1257
1264
|
rowId: l ?? "",
|
|
1258
1265
|
row: s,
|
|
1259
|
-
oldValue:
|
|
1266
|
+
oldValue: r,
|
|
1260
1267
|
newValue: s,
|
|
1261
1268
|
changed: a,
|
|
1262
1269
|
changedRows: this.changedRows,
|
|
1263
1270
|
changedRowIds: this.changedRowIds
|
|
1264
1271
|
});
|
|
1265
|
-
d &&
|
|
1266
|
-
s[g] =
|
|
1267
|
-
}), l && (this.#
|
|
1272
|
+
d && r ? (Object.keys(r).forEach((g) => {
|
|
1273
|
+
s[g] = r[g];
|
|
1274
|
+
}), l && (this.#r.delete(l), this.clearRowInvalid(l))) : !d && c && this.isAnimationEnabled && (this.#h = e);
|
|
1268
1275
|
}
|
|
1269
1276
|
this.#l.delete(e), this.#e = -1, this.#u = -1, this.#d = !1, this.#p();
|
|
1270
1277
|
for (const c of this.#o)
|
|
1271
1278
|
c.startsWith(`${e}:`) && this.#o.delete(c);
|
|
1272
1279
|
for (const c of this.#c.keys())
|
|
1273
1280
|
c.startsWith(`${e}:`) && this.#c.delete(c);
|
|
1274
|
-
|
|
1281
|
+
n && (n.querySelectorAll(".cell.editing").forEach((c) => {
|
|
1275
1282
|
c.classList.remove("editing"), U(c.parentElement);
|
|
1276
|
-
}), this.requestRender()), this.#f = !0,
|
|
1283
|
+
}), this.requestRender()), this.#f = !0, n || (this.#v(i), this.#f = !1), !this.#t && s && this.emit("edit-close", {
|
|
1277
1284
|
rowIndex: e,
|
|
1278
1285
|
rowId: l ?? "",
|
|
1279
1286
|
row: s,
|
|
@@ -1284,28 +1291,28 @@ class X extends D {
|
|
|
1284
1291
|
* Commit a single cell value change.
|
|
1285
1292
|
* Uses ID-based change tracking for stability when rows are reordered.
|
|
1286
1293
|
*/
|
|
1287
|
-
#E(e, t, i,
|
|
1294
|
+
#E(e, t, i, r) {
|
|
1288
1295
|
const s = t.field;
|
|
1289
1296
|
if (!S(s)) return;
|
|
1290
|
-
const
|
|
1291
|
-
if (
|
|
1297
|
+
const n = r[s];
|
|
1298
|
+
if (n === i) return;
|
|
1292
1299
|
const l = this.grid;
|
|
1293
1300
|
let c;
|
|
1294
1301
|
try {
|
|
1295
|
-
c = this.grid.getRowId(
|
|
1302
|
+
c = this.grid.getRowId(r);
|
|
1296
1303
|
} catch {
|
|
1297
1304
|
}
|
|
1298
|
-
const a = c ? !this.#
|
|
1305
|
+
const a = c ? !this.#r.has(c) : !0, d = c ? (m) => this.grid.updateRow(c, m, "cascade") : T;
|
|
1299
1306
|
let g = !1;
|
|
1300
1307
|
const f = c ? (m) => {
|
|
1301
1308
|
g = !0, this.setInvalid(c, s, m ?? "");
|
|
1302
1309
|
} : () => {
|
|
1303
1310
|
};
|
|
1304
1311
|
if (this.emitCancelable("cell-commit", {
|
|
1305
|
-
row:
|
|
1312
|
+
row: r,
|
|
1306
1313
|
rowId: c ?? "",
|
|
1307
1314
|
field: s,
|
|
1308
|
-
oldValue:
|
|
1315
|
+
oldValue: n,
|
|
1309
1316
|
value: i,
|
|
1310
1317
|
rowIndex: e,
|
|
1311
1318
|
changedRows: this.changedRows,
|
|
@@ -1314,10 +1321,10 @@ class X extends D {
|
|
|
1314
1321
|
updateRow: d,
|
|
1315
1322
|
setInvalid: f
|
|
1316
1323
|
})) return;
|
|
1317
|
-
c && !g && this.isCellInvalid(c, s) && this.clearInvalid(c, s),
|
|
1324
|
+
c && !g && this.isCellInvalid(c, s) && this.clearInvalid(c, s), r[s] = i, c && this.#r.add(c), this.#p(), this.emitPluginEvent("cell-edit-committed", {
|
|
1318
1325
|
rowIndex: e,
|
|
1319
1326
|
field: s,
|
|
1320
|
-
oldValue:
|
|
1327
|
+
oldValue: n,
|
|
1321
1328
|
newValue: i
|
|
1322
1329
|
});
|
|
1323
1330
|
const p = l.findRenderedRowElement?.(e);
|
|
@@ -1326,7 +1333,7 @@ class X extends D {
|
|
|
1326
1333
|
/**
|
|
1327
1334
|
* Inject an editor into a cell.
|
|
1328
1335
|
*/
|
|
1329
|
-
#m(e, t, i,
|
|
1336
|
+
#m(e, t, i, r, s, n) {
|
|
1330
1337
|
if (!i.editable || s.classList.contains("editing")) return;
|
|
1331
1338
|
let l;
|
|
1332
1339
|
try {
|
|
@@ -1334,14 +1341,19 @@ class X extends D {
|
|
|
1334
1341
|
} catch {
|
|
1335
1342
|
}
|
|
1336
1343
|
const c = l ? (u) => this.grid.updateRow(l, u, "cascade") : T, a = S(i.field) ? e[i.field] : void 0;
|
|
1337
|
-
s.classList.add("editing"), this.#o.add(`${t}:${
|
|
1344
|
+
s.classList.add("editing"), this.#o.add(`${t}:${r}`);
|
|
1338
1345
|
const d = s.parentElement;
|
|
1339
|
-
d &&
|
|
1346
|
+
d && W(d);
|
|
1340
1347
|
let g = !1;
|
|
1341
1348
|
const f = (u) => {
|
|
1342
|
-
g || !this.#t && this.#e === -1
|
|
1349
|
+
if (g || !this.#t && this.#e === -1) return;
|
|
1350
|
+
const h = this.grid._rows[t] ?? e;
|
|
1351
|
+
this.#E(t, i, u, h);
|
|
1343
1352
|
}, E = () => {
|
|
1344
|
-
g = !0, S(i.field)
|
|
1353
|
+
if (g = !0, S(i.field)) {
|
|
1354
|
+
const u = this.grid._rows[t] ?? e;
|
|
1355
|
+
u[i.field] = a;
|
|
1356
|
+
}
|
|
1345
1357
|
}, p = document.createElement("div");
|
|
1346
1358
|
p.className = "tbw-editor-host", s.innerHTML = "", s.appendChild(p), p.addEventListener("keydown", (u) => {
|
|
1347
1359
|
if (u.key === "Enter") {
|
|
@@ -1365,28 +1377,28 @@ class X extends D {
|
|
|
1365
1377
|
u.stopPropagation(), u.preventDefault(), E(), this.#s(t, !0);
|
|
1366
1378
|
}
|
|
1367
1379
|
});
|
|
1368
|
-
const m = i, y = m.__editorTemplate,
|
|
1380
|
+
const m = i, y = m.__editorTemplate, w = j(this.grid, m) ?? K(i), k = a, q = `${t}:${i.field}`, A = [];
|
|
1369
1381
|
this.#c.set(q, (u) => {
|
|
1370
1382
|
for (const h of A) h(u);
|
|
1371
1383
|
});
|
|
1372
1384
|
const C = (u) => {
|
|
1373
1385
|
A.push(u);
|
|
1374
1386
|
};
|
|
1375
|
-
if (
|
|
1376
|
-
this.#R(p, m, e, a, f, E,
|
|
1387
|
+
if (w === "template" && y)
|
|
1388
|
+
this.#R(p, m, e, a, f, E, n, t), C((u) => {
|
|
1377
1389
|
const h = p.querySelector(
|
|
1378
1390
|
"input,textarea,select"
|
|
1379
1391
|
);
|
|
1380
1392
|
h && (h instanceof HTMLInputElement && h.type === "checkbox" ? h.checked = !!u : h.value = String(u ?? ""));
|
|
1381
1393
|
});
|
|
1382
|
-
else if (typeof
|
|
1383
|
-
const u = document.createElement(
|
|
1394
|
+
else if (typeof w == "string") {
|
|
1395
|
+
const u = document.createElement(w);
|
|
1384
1396
|
u.value = k, u.addEventListener("change", () => f(u.value)), C((h) => {
|
|
1385
1397
|
u.value = h;
|
|
1386
|
-
}), p.appendChild(u),
|
|
1387
|
-
p.querySelector(
|
|
1398
|
+
}), p.appendChild(u), n || queueMicrotask(() => {
|
|
1399
|
+
p.querySelector(v)?.focus({ preventScroll: !0 });
|
|
1388
1400
|
});
|
|
1389
|
-
} else if (typeof
|
|
1401
|
+
} else if (typeof w == "function") {
|
|
1390
1402
|
const u = {
|
|
1391
1403
|
row: e,
|
|
1392
1404
|
rowId: l ?? "",
|
|
@@ -1397,7 +1409,7 @@ class X extends D {
|
|
|
1397
1409
|
cancel: E,
|
|
1398
1410
|
updateRow: c,
|
|
1399
1411
|
onValueChange: C
|
|
1400
|
-
}, h =
|
|
1412
|
+
}, h = w(u);
|
|
1401
1413
|
typeof h == "string" ? (p.innerHTML = h, Q(p, i, f, a), C((R) => {
|
|
1402
1414
|
const b = p.querySelector(
|
|
1403
1415
|
"input,textarea,select"
|
|
@@ -1405,10 +1417,10 @@ class X extends D {
|
|
|
1405
1417
|
b && (b instanceof HTMLInputElement && b.type === "checkbox" ? b.checked = !!R : b.value = String(R ?? ""));
|
|
1406
1418
|
})) : h instanceof Node && (p.appendChild(h), h instanceof HTMLInputElement || h instanceof HTMLSelectElement || h instanceof HTMLTextAreaElement ? C((b) => {
|
|
1407
1419
|
h instanceof HTMLInputElement && h.type === "checkbox" ? h.checked = !!b : h.value = String(b ?? "");
|
|
1408
|
-
}) : s.setAttribute("data-editor-managed", "")),
|
|
1409
|
-
p.querySelector(
|
|
1420
|
+
}) : s.setAttribute("data-editor-managed", "")), n || queueMicrotask(() => {
|
|
1421
|
+
p.querySelector(v)?.focus({ preventScroll: !0 });
|
|
1410
1422
|
});
|
|
1411
|
-
} else if (
|
|
1423
|
+
} else if (w && typeof w == "object") {
|
|
1412
1424
|
const u = document.createElement("div");
|
|
1413
1425
|
u.setAttribute("data-external-editor", ""), u.setAttribute("data-field", i.field), p.appendChild(u), s.setAttribute("data-editor-managed", "");
|
|
1414
1426
|
const h = {
|
|
@@ -1422,34 +1434,34 @@ class X extends D {
|
|
|
1422
1434
|
updateRow: c,
|
|
1423
1435
|
onValueChange: C
|
|
1424
1436
|
};
|
|
1425
|
-
if (
|
|
1437
|
+
if (w.mount)
|
|
1426
1438
|
try {
|
|
1427
|
-
|
|
1439
|
+
w.mount({ placeholder: u, context: h, spec: w });
|
|
1428
1440
|
} catch (R) {
|
|
1429
1441
|
console.warn(`[tbw-grid] External editor mount error for column '${i.field}':`, R);
|
|
1430
1442
|
}
|
|
1431
1443
|
else
|
|
1432
1444
|
this.grid.dispatchEvent(
|
|
1433
|
-
new CustomEvent("mount-external-editor", { detail: { placeholder: u, spec:
|
|
1445
|
+
new CustomEvent("mount-external-editor", { detail: { placeholder: u, spec: w, context: h } })
|
|
1434
1446
|
);
|
|
1435
1447
|
}
|
|
1436
1448
|
}
|
|
1437
1449
|
/**
|
|
1438
1450
|
* Render a template-based editor.
|
|
1439
1451
|
*/
|
|
1440
|
-
#R(e, t, i,
|
|
1452
|
+
#R(e, t, i, r, s, n, l, c) {
|
|
1441
1453
|
const a = t.__editorTemplate;
|
|
1442
1454
|
if (!a) return;
|
|
1443
1455
|
const d = a.cloneNode(!0), g = t.__compiledEditor;
|
|
1444
1456
|
g ? d.innerHTML = g({
|
|
1445
1457
|
row: i,
|
|
1446
|
-
value:
|
|
1458
|
+
value: r,
|
|
1447
1459
|
field: t.field,
|
|
1448
1460
|
column: t,
|
|
1449
1461
|
commit: s,
|
|
1450
|
-
cancel:
|
|
1462
|
+
cancel: n
|
|
1451
1463
|
}) : d.querySelectorAll("*").forEach((E) => {
|
|
1452
|
-
E.childNodes.length === 1 && E.firstChild?.nodeType === Node.TEXT_NODE && (E.textContent = E.textContent?.replace(/{{\s*value\s*}}/g,
|
|
1464
|
+
E.childNodes.length === 1 && E.firstChild?.nodeType === Node.TEXT_NODE && (E.textContent = E.textContent?.replace(/{{\s*value\s*}}/g, r == null ? "" : String(r)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (p, m) => {
|
|
1453
1465
|
if (!S(m)) return "";
|
|
1454
1466
|
const y = i[m];
|
|
1455
1467
|
return y == null ? "" : String(y);
|
|
@@ -1459,21 +1471,21 @@ class X extends D {
|
|
|
1459
1471
|
"input,textarea,select"
|
|
1460
1472
|
);
|
|
1461
1473
|
if (f) {
|
|
1462
|
-
f instanceof HTMLInputElement && f.type === "checkbox" ? f.checked = !!
|
|
1474
|
+
f instanceof HTMLInputElement && f.type === "checkbox" ? f.checked = !!r : f.value = String(r ?? "");
|
|
1463
1475
|
let E = !1;
|
|
1464
1476
|
f.addEventListener("blur", () => {
|
|
1465
|
-
E || s(_(f, t,
|
|
1477
|
+
E || s(_(f, t, r));
|
|
1466
1478
|
}), f.addEventListener("keydown", (p) => {
|
|
1467
1479
|
const m = p;
|
|
1468
1480
|
if (m.key === "Enter") {
|
|
1469
1481
|
if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(m) === !1)
|
|
1470
1482
|
return;
|
|
1471
|
-
m.stopPropagation(), m.preventDefault(), E = !0, s(_(f, t,
|
|
1483
|
+
m.stopPropagation(), m.preventDefault(), E = !0, s(_(f, t, r)), this.#s(c, !1);
|
|
1472
1484
|
}
|
|
1473
1485
|
if (m.key === "Escape") {
|
|
1474
1486
|
if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(m) === !1)
|
|
1475
1487
|
return;
|
|
1476
|
-
m.stopPropagation(), m.preventDefault(),
|
|
1488
|
+
m.stopPropagation(), m.preventDefault(), n(), this.#s(c, !0);
|
|
1477
1489
|
}
|
|
1478
1490
|
}), f instanceof HTMLInputElement && f.type === "checkbox" && f.addEventListener("change", () => s(f.checked)), l || setTimeout(() => f.focus({ preventScroll: !0 }), 0);
|
|
1479
1491
|
}
|
|
@@ -1485,24 +1497,24 @@ class X extends D {
|
|
|
1485
1497
|
*/
|
|
1486
1498
|
#_(e, t) {
|
|
1487
1499
|
if (!e) return !1;
|
|
1488
|
-
const i = e,
|
|
1489
|
-
for (const
|
|
1490
|
-
if (i[
|
|
1500
|
+
const i = e, r = t, s = /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)]);
|
|
1501
|
+
for (const n of s)
|
|
1502
|
+
if (i[n] !== r[n])
|
|
1491
1503
|
return !0;
|
|
1492
1504
|
return !1;
|
|
1493
1505
|
}
|
|
1494
1506
|
/**
|
|
1495
1507
|
* Restore focus to cell after exiting edit mode.
|
|
1496
1508
|
*/
|
|
1497
|
-
#
|
|
1509
|
+
#v(e) {
|
|
1498
1510
|
queueMicrotask(() => {
|
|
1499
1511
|
try {
|
|
1500
|
-
const t = e._focusRow, i = e._focusCol,
|
|
1501
|
-
if (
|
|
1512
|
+
const t = e._focusRow, i = e._focusCol, r = e.findRenderedRowElement?.(t);
|
|
1513
|
+
if (r) {
|
|
1502
1514
|
Array.from(e._bodyEl.querySelectorAll(".cell-focus")).forEach(
|
|
1503
|
-
(
|
|
1515
|
+
(n) => n.classList.remove("cell-focus")
|
|
1504
1516
|
);
|
|
1505
|
-
const s =
|
|
1517
|
+
const s = r.querySelector(`.cell[data-row="${t}"][data-col="${i}"]`);
|
|
1506
1518
|
s && (s.classList.add("cell-focus"), s.setAttribute("aria-selected", "true"), s.hasAttribute("tabindex") || s.setAttribute("tabindex", "-1"), s.focus({ preventScroll: !0 }));
|
|
1507
1519
|
}
|
|
1508
1520
|
} catch {
|
|
@@ -1513,6 +1525,6 @@ class X extends D {
|
|
|
1513
1525
|
}
|
|
1514
1526
|
export {
|
|
1515
1527
|
X as EditingPlugin,
|
|
1516
|
-
|
|
1528
|
+
K as defaultEditorFor
|
|
1517
1529
|
};
|
|
1518
1530
|
//# sourceMappingURL=index.js.map
|