@livenetworks/ashlar 2.1.13 → 2.2.0

package/components/ln-table/ln-table.schema.json

@@ -1,195 +1,195 @@
-{
-	"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
-	"component": "ln-table",
-	"generator": "scripts/sync-ln-schemas.mjs",
-	"attributes": {
-		"data-ln-debug": {
-			"direction": "author",
-			"sources": [
-				"ln-table-dev.scss",
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-sort": {
-			"direction": null,
-			"sources": [
-				"ln-table-dev.scss",
-				"ln-table.scss"
-			]
-		},
-		"data-ln-sort-icon": {
-			"direction": null,
-			"sources": [
-				"ln-table.scss"
-			]
-		},
-		"data-ln-table": {
-			"direction": null,
-			"sources": [
-				"ln-table-dev.scss",
-				"ln-table.scss",
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"fallback": "",
-			"description": "Table instance name or identifier"
-		},
-		"data-ln-table-body": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-table-cell-attr": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"description": "Cell attribute template mapping"
-		},
-		"data-ln-table-col": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"description": "Column header identifier or field mapping"
-		},
-		"data-ln-table-col-select": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "trigger",
-			"description": "Header select-all checkbox trigger"
-		},
-		"data-ln-table-col-sort": {
-			"direction": null,
-			"sources": [
-				"ln-table-dev.scss"
-			]
-		},
-		"data-ln-table-dict": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-table-empty": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "marker",
-			"description": "Container for table empty state"
-		},
-		"data-ln-table-empty-when": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-table-filtered": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-table-loading": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "marker",
-			"description": "Loading indicator element in footer or template"
-		},
-		"data-ln-table-row": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "marker",
-			"description": "Table row template element"
-		},
-		"data-ln-table-row-action": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "trigger",
-			"description": "Action trigger inside a table row"
-		},
-		"data-ln-table-row-id": {
-			"direction": "both",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"description": "Record identifier on row element"
-		},
-		"data-ln-table-row-select": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "trigger",
-			"description": "Row selection checkbox trigger"
-		},
-		"data-ln-table-select-all-label": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"description": "Accessibility label for select-all header trigger"
-		},
-		"data-ln-table-selectable": {
-			"direction": null,
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "boolean",
-			"description": "Enables row selection check controls"
-		},
-		"data-ln-table-selected": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-table-sort": {
-			"direction": null,
-			"sources": [
-				"ln-table-dev.scss"
-			]
-		},
-		"data-ln-table-source": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			],
-			"type": "string",
-			"fallback": "",
-			"description": "Source store or coordinator addressing"
-		},
-		"data-ln-table-total": {
-			"direction": "author",
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-template": {
-			"direction": null,
-			"sources": [
-				"src/ln-table.js"
-			]
-		},
-		"data-ln-value": {
-			"direction": "runtime",
-			"sources": [
-				"src/ln-table.js"
-			]
-		}
-	}
-}
+{
+	"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
+	"component": "ln-table",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": "author",
+			"sources": [
+				"ln-table-dev.scss",
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-sort": {
+			"direction": null,
+			"sources": [
+				"ln-table-dev.scss",
+				"ln-table.scss"
+			]
+		},
+		"data-ln-sort-icon": {
+			"direction": null,
+			"sources": [
+				"ln-table.scss"
+			]
+		},
+		"data-ln-table": {
+			"direction": null,
+			"sources": [
+				"ln-table-dev.scss",
+				"ln-table.scss",
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"fallback": "",
+			"description": "Table instance name or identifier"
+		},
+		"data-ln-table-body": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-table-cell-attr": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"description": "Cell attribute template mapping"
+		},
+		"data-ln-table-col": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"description": "Column header identifier or field mapping"
+		},
+		"data-ln-table-col-select": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "trigger",
+			"description": "Header select-all checkbox trigger"
+		},
+		"data-ln-table-col-sort": {
+			"direction": null,
+			"sources": [
+				"ln-table-dev.scss"
+			]
+		},
+		"data-ln-table-dict": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-table-empty": {
+			"direction": "both",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "marker",
+			"description": "Container for table empty state"
+		},
+		"data-ln-table-empty-when": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-table-filtered": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-table-loading": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "marker",
+			"description": "Loading indicator element in footer or template"
+		},
+		"data-ln-table-row": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "marker",
+			"description": "Table row template element"
+		},
+		"data-ln-table-row-action": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "trigger",
+			"description": "Action trigger inside a table row"
+		},
+		"data-ln-table-row-id": {
+			"direction": "both",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"description": "Record identifier on row element"
+		},
+		"data-ln-table-row-select": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "trigger",
+			"description": "Row selection checkbox trigger"
+		},
+		"data-ln-table-select-all-label": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"description": "Accessibility label for select-all header trigger"
+		},
+		"data-ln-table-selectable": {
+			"direction": null,
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "boolean",
+			"description": "Enables row selection check controls"
+		},
+		"data-ln-table-selected": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-table-sort": {
+			"direction": null,
+			"sources": [
+				"ln-table-dev.scss"
+			]
+		},
+		"data-ln-table-source": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			],
+			"type": "string",
+			"fallback": "",
+			"description": "Source store or coordinator addressing"
+		},
+		"data-ln-table-total": {
+			"direction": "author",
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-template": {
+			"direction": null,
+			"sources": [
+				"src/ln-table.js"
+			]
+		},
+		"data-ln-value": {
+			"direction": "runtime",
+			"sources": [
+				"src/ln-table.js"
+			]
+		}
+	}
+}

package/components/ln-table/src/ln-table.js

@@ -113,6 +113,9 @@ import { calculateSelectionState, calculateVirtualWindow, calculatePoolSize, tog
 		this._vEnd = -1;
 		this._rafId = null;
 		this._scrollHandler = null;
+		this._resizeHandler = null;
+		this._vResized = false;
+		this._vTop = 0;
 		this._scrollContainer = null;
 		this._colgroup = null;
 		this._rowPool = null;
@@ -479,6 +482,8 @@ import { calculateSelectionState, calculateVirtualWindow, calculatePoolSize, tog
 
 	_component.prototype._lockColumnWidths = function () {
 		if (!this.table || !this.thead || this._colgroup) return;
+		// Header row has no box (card mode, hidden ancestor): don't lock 0px columns; retried on resize.
+		if (this.ths.length && !this.ths[0].offsetWidth) return;
 
 		const colgroup = document.createElement('colgroup');
 		this.ths.forEach(function (th) {
@@ -618,8 +623,16 @@ import { calculateSelectionState, calculateVirtualWindow, calculatePoolSize, tog
 			});
 		};
 
+		// Resize shares the scroll rAF; the flag scopes re-measuring to resize frames.
+		// A lock deferred while the header row had no box happens here, before the re-measure.
+		this._resizeHandler = function () {
+			self._lockColumnWidths();
+			self._vResized = true;
+			self._scrollHandler();
+		};
+
 		scrollTarget.addEventListener('scroll', this._scrollHandler, { passive: true });
-		window.addEventListener('resize', this._scrollHandler, { passive: true });
+		window.addEventListener('resize', this._resizeHandler, { passive: true });
 	};
 
 	_component.prototype._disableVirtualScroll = function () {
@@ -629,8 +642,9 @@ import { calculateSelectionState, calculateVirtualWindow, calculatePoolSize, tog
 		if (this._scrollHandler) {
 			const scrollTarget = this._scrollContainer || window;
 			scrollTarget.removeEventListener('scroll', this._scrollHandler);
-			window.removeEventListener('resize', this._scrollHandler);
+			window.removeEventListener('resize', this._resizeHandler);
 			this._scrollHandler = null;
+			this._resizeHandler = null;
 		}
 		this._scrollContainer = null;
 		if (this._rafId) {
@@ -835,8 +849,7 @@ import { calculateSelectionState, calculateVirtualWindow, calculatePoolSize, tog
 	_component.prototype._renderVirtual = function () {
 		const data = this._filteredData;
 		const total = data.length;
-		const rowH = this._rowHeight;
-		if (!rowH || !total) return;
+		if (!this._rowHeight || !total) return;
 
 		const theadH = this.thead ? this.thead.offsetHeight : 0;
 		const sc = this._scrollContainer;
@@ -857,7 +870,25 @@ import { calculateSelectionState, calculateVirtualWindow, calculatePoolSize, tog
 			viewportH = window.innerHeight;
 		}
 
-		const vw = calculateVirtualWindow(scrollIntoData, viewportH, rowH, total, BUFFER_ROWS);
+		// After a resize a media query may have restyled rows (e.g. stacked cards):
+		// re-measure the rendered block's pitch (read before any write) and keep the
+		// record that was at the viewport top in place.
+		let target = scrollIntoData;
+		if (this._vResized) {
+			this._vResized = false;
+			const n = this._vEnd - this._vStart;
+			const last = this._rowPool && this._rowPool[n - 1];
+			const pitch = last ? (last.getBoundingClientRect().bottom - this._rowPool[0].getBoundingClientRect().top) / n : 0;
+			if (pitch && pitch !== this._rowHeight) {
+				this._rowHeight = pitch;
+				this._vStart = -1;
+				if (this._vTop > 0) target = this._vTop * pitch;
+			}
+		}
+		const rowH = this._rowHeight;
+		this._vTop = target / rowH;
+
+		const vw = calculateVirtualWindow(target, viewportH, rowH, total, BUFFER_ROWS);
 		const startRow = vw.start;
 		const endRow = vw.end;
 
@@ -911,6 +942,11 @@ import { calculateSelectionState, calculateVirtualWindow, calculatePoolSize, tog
 		}
 
 		if (this._selectable) this._updateSelectAll();
+
+		if (target !== scrollIntoData) {
+			if (sc) sc.scrollTop += target - scrollIntoData;
+			else window.scrollTo(window.scrollX, window.scrollY + target - scrollIntoData);
+		}
 	};
 
 
@@ -944,13 +980,13 @@ import { calculateSelectionState, calculateVirtualWindow, calculatePoolSize, tog
 				td.setAttribute('colspan', String(colSpan));
 				td.appendChild(clone);
 				const tr = document.createElement('tr');
-				tr.className = 'table-empty ln-table__empty';
 				tr.appendChild(td);
 				loadingEl = tr;
 			}
 		}
 
 		if (loadingEl) {
+			loadingEl.setAttribute('data-ln-table-empty', '');
 			this.tbody.replaceChildren(loadingEl);
 		} else {
 			this.tbody.replaceChildren();
@@ -1011,13 +1047,13 @@ import { calculateSelectionState, calculateVirtualWindow, calculatePoolSize, tog
 				td.setAttribute('colspan', String(colSpan));
 				td.appendChild(clone);
 				const tr = document.createElement('tr');
-				tr.className = 'ln-table__empty';
 				tr.appendChild(td);
 				emptyEl = tr;
 			}
 		}
 
 		if (emptyEl) {
+			emptyEl.setAttribute('data-ln-table-empty', '');
 			this.tbody.replaceChildren(emptyEl);
 		} else {
 			this.tbody.replaceChildren();