@rozie-ui/data-table-lit 0.8.1 → 0.9.1

package/dist/index.mjs

@@ -292,6 +292,28 @@ const tileIndex = (i, lo, hi) => {
 	return lo + k;
 };
 //#endregion
+//#region src/helpers/rangeFill.ts
+const rangeFillTargets = (range, activeRow, activeCol) => {
+	const single = {
+		top: activeRow,
+		bottom: activeRow,
+		col: activeCol,
+		size: 1
+	};
+	if (!range) return single;
+	const top = Math.min(range.r0, range.r1);
+	const bottom = Math.max(range.r0, range.r1);
+	const left = Math.min(range.c0, range.c1);
+	const right = Math.max(range.c0, range.c1);
+	if (activeCol < left || activeCol > right || activeRow < top || activeRow > bottom) return single;
+	return {
+		top,
+		bottom,
+		col: activeCol,
+		size: bottom - top + 1
+	};
+};
+//#endregion
 //#region src/helpers/rowValueUtils.ts
 const replaceRowValue = (rows, rowIndex, field, value) => {
 	const src = rows || [];
@@ -587,6 +609,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			initialControlledValue: void 0
 		});
 		this.stickyHeader = false;
+		this.columnLines = false;
 		this.interactionMode = "table";
 		this.singleClickEdit = false;
 		this.undoable = false;
@@ -2698,7 +2721,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			this._activeColIndex.value = col;
 			if (isHeader !== prevIsHeader || col !== prevCol || (isHeader ? movedLevel !== prevLevel : movedRow !== prevRow)) this.focusIntentEpoch = this.focusIntentEpoch + 1;
 			if (this.rangeTransition) this.rangeTransition = false;
-			else if (this.rangeClickPending && this.rangeClickPending.isHeader === isHeader && this.rangeClickPending.r === movedRow && this.rangeClickPending.c === col) this.rangeClickPending = null;
+			else if (!isHeader && tgt !== cellEl && this._editingRow.value === movedRow && this._editingCol.value === col) {} else if (this.rangeClickPending && this.rangeClickPending.isHeader === isHeader && this.rangeClickPending.r === movedRow && this.rangeClickPending.c === col) this.rangeClickPending = null;
 			else {
 				this.rangeClickPending = null;
 				this.clearRange();
@@ -3462,6 +3485,14 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			}
 			this.applyGridToRange(grid, box.r0, box.c0, "filled");
 		};
+		this.fillTargets = () => rangeFillTargets(this.normalizedRange(), this._activeRow.value, this._activeColIndex.value);
+		this.rangeSize = () => this._activeIsHeader.value ? 1 : this.fillTargets().size;
+		this.fillActiveColumn = (value) => {
+			const t = this.fillTargets();
+			const grid = [];
+			for (let i = 0; i < t.size; i++) grid.push([value]);
+			return this.applyGridToRange(grid, t.top, t.col, "updated");
+		};
 		this.fillDragging = false;
 		this.fillDragMove = null;
 		this.fillDragUp = null;
@@ -3888,6 +3919,44 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			} else if (skipFocusReturn !== true) this.focusCellWhenReady(focusRow, focusCol);
 			return true;
 		};
+		this.commitEditToRange = (overrideValue = void 0) => {
+			if (this._editingRow.value < 0) return false;
+			if (this.committedThisSession) return false;
+			const colId = this.editingColumnId();
+			if (colId == null) {
+				this.endEdit();
+				return false;
+			}
+			const rawValue = overrideValue !== void 0 ? overrideValue : this._draftValue.value;
+			const err = this.runValidator(colId, this.coerceCellValue(colId, rawValue), this.editingRowOriginal());
+			if (err !== true) {
+				this.setInvalid(err);
+				this.focusEditorWhenReady(this._editingRow.value, this._editingCol.value);
+				return false;
+			}
+			this.setInvalid("");
+			const focusRow = this._editingRow.value;
+			const focusCol = this._editingCol.value;
+			const rowOriginal = this.editingRowOriginal();
+			const rowId = this.editingRowId();
+			this.editTransition = true;
+			this.committedThisSession = true;
+			const result = this.fillActiveColumn(rawValue);
+			this.endEdit();
+			this.editTransition = false;
+			this.rangeClickPending = {
+				isHeader: false,
+				r: focusRow,
+				c: focusCol
+			};
+			if (result && result.changed > 0) this.pendingEditFollow = {
+				rowOriginal,
+				rowId,
+				col: focusCol
+			};
+			else this.focusCellWhenReady(focusRow, focusCol);
+			return true;
+		};
 		this.toggleActiveBooleanCell = () => {
 			if (this.rowIndexIsGrouped(this._activeRow.value)) return;
 			const row = (this._rows.value || [])[this._activeRow.value];
@@ -3899,6 +3968,11 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			const rowId = row.id;
 			const oldValue = this.cellValueAt(this._activeRow.value, this._activeColIndex.value);
 			const newValue = !oldValue;
+			if (this.rangeSize() > 1) {
+				this.setInvalid("");
+				this.fillActiveColumn(newValue);
+				return;
+			}
 			const err = this.runValidator(colId, newValue, rowOriginal);
 			if (err !== true) {
 				this.setInvalid(err);
@@ -4129,14 +4203,21 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 		this.committedThisSession = false;
 		this.rowDraftSync = {};
 		this.dropinTabFlush = null;
+		this.rangeCommitIntent = false;
 		this.inRowEdit = () => this._editingRowIndex.value != null;
 		this.editorValueFor = (colId) => this.inRowEdit() ? this._rowDraft.value ? this._rowDraft.value[colId] : null : this._draftValue.value;
 		this.editorCheckedFor = (colId) => !!(this.inRowEdit() ? this._rowDraft.value ? this._rowDraft.value[colId] : null : this._draftValue.value);
-		this.editorCommitFor = (colId) => (value) => {
+		this.editorCommitFor = (colId) => (value, options) => {
 			if (this.inRowEdit()) {
 				this.setRowDraft(colId, value);
 				return;
 			}
+			const wantsRange = options != null && options.toRange === true || this.rangeCommitIntent;
+			this.rangeCommitIntent = false;
+			if (wantsRange && !this.dropinTabFlush && this.rangeSize() > 1) {
+				this.commitEditToRange(value);
+				return;
+			}
 			if (this.dropinTabFlush) {
 				this.dropinTabFlush.called = true;
 				if (this.commitEdit(value, true)) this.dropinTabFlush.committed = true;
@@ -4208,7 +4289,10 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				}
 				return;
 			}
-			if (key === "Enter") {
+			if (key === "Enter" && (e.ctrlKey || e.metaKey) && this.rangeSize() > 1) {
+				e.preventDefault();
+				this.commitEditToRange(void 0);
+			} else if (key === "Enter") {
 				e.preventDefault();
 				this.commitEdit(void 0);
 			} else if (key === "Tab") {
@@ -4229,8 +4313,18 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 				this.cancelEdit();
 			}
 		};
+		this.onEditorDropinKeyDownCapture = (e) => {
+			if (!e) return;
+			if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+				this.rangeCommitIntent = true;
+				setTimeout(() => {
+					this.rangeCommitIntent = false;
+				}, 0);
+			}
+		};
 		this.onEditorDropinKeyDown = (e) => {
 			if (!e) return;
+			this.rangeCommitIntent = false;
 			const key = e.key;
 			if (this.inRowEdit()) {
 				if (key === "Enter") {
@@ -4488,6 +4582,8 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
   --rdt-border: 1px solid var(--rozie-data-table-border-color, var(--rdt-ds-border-color));
   --rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color, var(--rdt-ds-control-border-color));
   --rdt-filter-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
+  --rdt-column-border: 1px solid var(--rozie-data-table-column-border-color, var(--rozie-data-table-border-color, var(--rdt-ds-column-border-color)));
+  --rdt-pinned-bg: var(--rozie-data-table-pinned-bg, var(--rdt-ds-pinned-bg));
   --rdt-font: var(--rozie-data-table-font, var(--rdt-ds-font));
   --rdt-cell-padding: var(--rozie-data-table-cell-padding, var(--rdt-ds-cell-padding));
   --rdt-header-bg: var(--rozie-data-table-header-bg, var(--rdt-ds-header-bg));
@@ -4509,7 +4605,12 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
   --rdt-page-size-radius: var(--rozie-data-table-radius, var(--rdt-ds-radius));
 }
 .rozie-data-table[data-rozie-s-d5dcab4c] {
-  border-collapse: collapse;
+  /* SEPARATE, not collapse. With collapsed borders the browser keeps a sticky cell's shared
+     border in the scrolling grid, so a 1px line of scrolled content shows beside pinned
+     columns and above the sticky header. Separate borders travel with their cell; zero
+     spacing keeps lines 1px because each cell draws only its own sides (see the cell rule). */
+  border-collapse: separate;
+  border-spacing: 0;
   width: 100%;
   font: var(--rdt-font, 14px system-ui, sans-serif);
   color: var(--rdt-color, inherit);
@@ -4568,8 +4669,28 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-td[data-rozie-s-d5dcab4c] {
   padding: var(--rdt-cell-padding, 0.5rem 0.75rem);
   text-align: left;
+  /* Reset every side, then draw only the row line. Under separate borders each cell owns its
+     lines, and the reset keeps a host's plain \`table td { border }\` rule from drawing a second
+     set inside the table (this class-scoped rule outranks it). */
+  border: 0;
   border-bottom: var(--rdt-border, 1px solid rgba(0, 0, 0, 0.08));
 }
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-detail-cell[data-rozie-s-d5dcab4c] {
+  border: 0;
+}
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] .rdt-th[data-rozie-s-d5dcab4c],
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] .rdt-td[data-rozie-s-d5dcab4c],
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] .rdt-filter-cell[data-rozie-s-d5dcab4c],
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] .rdt-detail-cell[data-rozie-s-d5dcab4c] {
+  border-inline-end: var(--rdt-column-border, 1px solid rgba(0, 0, 0, 0.08));
+}
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] tr[data-rozie-s-d5dcab4c] > [data-rozie-s-d5dcab4c]:first-child:not(.rdt-col-spacer[data-rozie-s-d5dcab4c]),
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] tr[data-rozie-s-d5dcab4c] > .rdt-col-spacer[data-rozie-s-d5dcab4c]:first-child + *[data-rozie-s-d5dcab4c] {
+  border-inline-start: var(--rdt-column-border, 1px solid rgba(0, 0, 0, 0.08));
+}
+.rozie-data-table.rdt-column-lines[data-rozie-s-d5dcab4c] .rdt-thead[data-rozie-s-d5dcab4c] > tr[data-rozie-s-d5dcab4c]:first-child > .rdt-th[data-rozie-s-d5dcab4c] {
+  border-top: var(--rdt-column-border, 1px solid rgba(0, 0, 0, 0.08));
+}
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-thead[data-rozie-s-d5dcab4c] .rdt-th[data-rozie-s-d5dcab4c] {
   font-weight: var(--rdt-header-weight, 600);
   /* OPAQUE default (was rgba(0,0,0,0.03)): a translucent header lets the scrolling body
@@ -4693,8 +4814,21 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-pinned[data-rozie-s-d5dcab4c] {
   box-sizing: border-box;
 }
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-td.rdt-pinned[data-rozie-s-d5dcab4c] {
+  background-color: var(--rdt-pinned-bg, #fff);
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-group-header[data-rozie-s-d5dcab4c] > .rdt-td.rdt-pinned[data-rozie-s-d5dcab4c] {
+  background: linear-gradient(var(--rdt-group-header-bg, rgba(0, 0, 0, 0.025)), var(--rdt-group-header-bg, rgba(0, 0, 0, 0.025))), var(--rdt-pinned-bg, #fff);
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-filter-cell.rdt-pinned[data-rozie-s-d5dcab4c] {
+  background: linear-gradient(var(--rdt-filter-row-bg, rgba(0, 0, 0, 0.015)), var(--rdt-filter-row-bg, rgba(0, 0, 0, 0.015))), var(--rdt-pinned-bg, #fff);
+}
+.rozie-data-table[data-rozie-s-d5dcab4c] .rdt-td.rdt-pinned.rdt-in-range[data-rozie-s-d5dcab4c] {
+  background: linear-gradient(var(--rdt-range-bg, rgba(37, 99, 235, 0.12)), var(--rdt-range-bg, rgba(37, 99, 235, 0.12))), var(--rdt-pinned-bg, #fff);
+}
 .rozie-data-table[data-rozie-s-d5dcab4c] .rdt-filter-cell[data-rozie-s-d5dcab4c] {
   padding: var(--rdt-filter-cell-padding, 0.35rem 0.75rem);
+  border: 0;
   border-bottom: var(--rdt-border, 1px solid rgba(0, 0, 0, 0.08));
 }
 .rozie-data-table-wrap[data-rozie-s-d5dcab4c] .rdt-filter-row[data-rozie-s-d5dcab4c] .rdt-col-filter {
@@ -5291,6 +5425,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 			};
 			document.addEventListener("pointerdown", this.docPointerDown, true);
 		}
+		if (this.gridRoot) this.gridRoot.addEventListener("keydown", this.onEditorDropinKeyDownCapture, true);
 		if (this.isWindowed()) this.gridScrollEl = this._ref__rozieRoot ? this._ref__rozieRoot.querySelector(".rdt-scroll") : null;
 		if (this.rowsWindowed()) {
 			this.virtualizer = new Virtualizer(this.virtualizerOptions());
@@ -5380,6 +5515,7 @@ let DataTable = class DataTable extends SignalWatcher(LitElement) {
 					document.removeEventListener("pointerdown", this.docPointerDown, true);
 					this.docPointerDown = null;
 				}
+				if (this.gridRoot) this.gridRoot.removeEventListener("keydown", this.onEditorDropinKeyDownCapture, true);
 				if (this.virtualizerCleanup) this.virtualizerCleanup();
 				if (this.colVirtualizerCleanup) this.colVirtualizerCleanup();
 				this.teardownColRtlWatch();
@@ -5453,7 +5589,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 <table class="${Object.entries({
 			"rozie-data-table": true,
 			"rdt-sticky": this.stickyHeader,
-			"rdt-col-windowed": this.colsWindowed()
+			"rdt-col-windowed": this.colsWindowed(),
+			"rdt-column-lines": this.columnLines
 		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} aria-colcount=${rozieAttr(this.gridAriaColCount())} @keydown=${($event) => {
 			this.onGridKeyDown($event);
 		}} @focusin=${($event) => {
@@ -5788,7 +5925,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
 			columnLabel: this.headerLabel(cell.column.id),
-			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
+			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index),
+			rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 		}) : html`<slot name="${`editor-${cell.column.id}`}" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -5799,7 +5937,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
 					columnLabel: this.headerLabel(cell.column.id),
-					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
+					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index),
+					rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 				});
 			} catch {
 				return "{}";
@@ -5813,7 +5952,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
 			columnLabel: this.headerLabel(cell.column.id),
-			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
+			autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index),
+			rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 		}) : html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -5824,7 +5964,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
 					columnLabel: this.headerLabel(cell.column.id),
-					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index)
+					autofocus: this.editorAutofocusFor(cell.column.id, wr.vi.index),
+					rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 				});
 			} catch {
 				return "{}";
@@ -5906,7 +6047,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 </table>
 </div>` : html`<table class="${Object.entries({
 			"rozie-data-table": true,
-			"rdt-sticky": this.stickyHeader
+			"rdt-sticky": this.stickyHeader,
+			"rdt-column-lines": this.columnLines
 		}).filter(([, v]) => v).map(([k]) => k).join(" ")}" role=${rozieAttr(this.tableRole())} aria-rowcount=${rozieAttr(this.gridAriaRowCount())} aria-colcount=${rozieAttr(this.gridAriaColCount())} @keydown=${($event) => {
 			this.onGridKeyDown($event);
 		}} @focusin=${($event) => {
@@ -6218,7 +6360,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
 			columnLabel: this.headerLabel(cell.column.id),
-			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
+			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row)),
+			rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 		}) : html`<slot name="${`editor-${cell.column.id}`}" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -6229,7 +6372,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
 					columnLabel: this.headerLabel(cell.column.id),
-					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
+					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row)),
+					rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 				});
 			} catch {
 				return "{}";
@@ -6243,7 +6387,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 			commit: this.editorCommitFor(cell.column.id),
 			cancel: this.editorCancelFor(),
 			columnLabel: this.headerLabel(cell.column.id),
-			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
+			autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row)),
+			rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 		}) : html`<slot name="editor" data-rozie-params=${(() => {
 			try {
 				return JSON.stringify({
@@ -6254,7 +6399,8 @@ ${this.groupable ? html`<div class="rdt-group-bar-host" data-rozie-s-d5dcab4c>
 					commit: this.editorCommitFor(cell.column.id),
 					cancel: this.editorCancelFor(),
 					columnLabel: this.headerLabel(cell.column.id),
-					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row))
+					autofocus: this.editorAutofocusFor(cell.column.id, this.rowIndexOf(row)),
+					rangeSize: this.inRowEdit() ? 1 : this.rangeSize()
 				});
 			} catch {
 				return "{}";
@@ -6517,6 +6663,11 @@ __decorate([property({
 	reflect: true,
 	attribute: "sticky-header"
 })], DataTable.prototype, "stickyHeader", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "column-lines"
+})], DataTable.prototype, "columnLines", void 0);
 __decorate([property({
 	type: String,
 	reflect: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-lit",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -46,7 +46,7 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@rozie/runtime-lit": "^0.10.1"
+    "@rozie/runtime-lit": "^0.10.2"
   },
   "peerDependencies": {
     "lit": "^3.2",