@ixfx/components 0.9.7 → 0.10.0

package/dist/data-grid.js

@@ -1,14 +1,15 @@
 import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
-import { t as themeFallbacks } from "./fallbacks-BcKGq-2F.js";
+import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES } from "./incr-search-C05WjbZh.js";
 import { t as handleStyles } from "./handle-BPOxBOKf.js";
-import { t as ListNativeDragController } from "./list-native-drag-controller-B0hWdbtM.js";
+import { t as ListNativeDragController } from "./list-native-drag-controller-D97TYjn1.js";
 import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
 import "./interaction-BskmlA9t.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import "./menu-CMXhIaNZ.js";
+import "./menu-C8a-84S5.js";
+import "./pan-text-CqtvjPyK.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
@@ -26,12 +27,16 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.getRowKey = (r, i) => r.key ?? r.id ?? String(i);
 		this.editable = false;
 		this.editability = `user`;
+		this.cellOverflow = `ellipsis`;
+		this.zebraStripes = false;
 		this.groupBy = null;
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
 		this.columnMenu = `auto`;
 		this.itemsDraggable = false;
 		this._columnFormatters = /* @__PURE__ */ new Map();
+		this._resizingColKey = void 0;
+		this._animatingColKeys = /* @__PURE__ */ new Set();
 		this._selectedKeys = /* @__PURE__ */ new Set();
 		this._scrollTop = 0;
 		this._scrollLeft = 0;
@@ -64,6 +69,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
 			getMetrics: () => ({ rowHeight: this.rowHeight }),
 			getRenderer: () => this.dragPreviewRenderer,
+			getDragPreviewSourceResolver: () => this.dragPreviewSource,
 			dispatch: (detail) => this.dispatchEvent(new CustomEvent(`list-native-drag-start`, {
 				detail,
 				bubbles: true,
@@ -312,6 +318,14 @@ let DataGridElement = class DataGridElement extends LitElement {
       --data-grid-header-bg: var(--surface-2);
       --data-grid-border: var(--border);
       --data-grid-header-text: var(--surface-3-text);
+      --data-grid-reorder-handle-width: 10px;
+      /* How strongly the alternate ("zebra") row stands out from the base row
+         background when [zebra-stripes] is set - a color-mix() percentage. */
+      --data-grid-zebra-intensity: 6%;
+      /* Duration of the width transition when a column is auto-sized via
+         autoSizeColumn(). Read back in JS (_columnResizeAnimationMs) to know
+         when the animation has finished, so keep it a plain time value. */
+      --data-grid-column-resize-duration: 180ms;
       position: relative;
       display: block;
       overflow: hidden;
@@ -340,11 +354,28 @@ let DataGridElement = class DataGridElement extends LitElement {
       box-sizing: border-box;
     }
     .header-cell[data-tickled] { background: var(--surface-5); }
+    /* Applied to a header-cell / cell while its column is animating towards
+       an autoSizeColumn() target width. */
+    .header-cell.width-animating, .cell.width-animating {
+      transition: width var(--data-grid-column-resize-duration, 180ms) ease-out;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .header-cell.width-animating, .cell.width-animating { transition: none; }
+    }
     .header-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .sort-icon { font-size: 10px; opacity: 0.7; }
-    .resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
-    .reorder-handle { cursor: grab; opacity: 0.5; padding: 0 2px; display: inline-flex; align-items: center; }
-    .reorder-handle .ixfx-handle { --ixfx-handle-spot-size: 14px; --ixfx-handle-dot-size: 3px; }
+    .resize-handle {
+      position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1;
+      display: flex; align-items: stretch; justify-content: center;
+    }
+    .resize-handle::before {
+      content: ''; width: 2px; margin: 2px 0; border-radius: 1px; background: var(--split-gutter-color, transparent);
+      transition: background-color var(--transition, 0.15s ease-out);
+    }
+    .resize-handle:hover::before { background: var(--split-gutter-hover-color, var(--surface-6)); }
+    .resize-handle[data-active]::before { background: var(--split-gutter-active-color, var(--accent)); }
+    .reorder-handle { cursor: grab; opacity: 0.5; display: inline-flex; align-items: center; }
+    .reorder-handle .ixfx-handle { --ixfx-handle-length: 14px; --ixfx-handle-thickness: var(--data-grid-reorder-handle-width, 10px); --ixfx-handle-dot-size: 3px; }
     .flyout-trigger { flex-shrink: 0; width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-left: var(--border-subtle); background: var(--data-grid-header-bg); }
     .viewport { flex: 1; overflow: auto; position: relative; }
     .spacer { position: relative; }
@@ -352,14 +383,28 @@ let DataGridElement = class DataGridElement extends LitElement {
       position: absolute; left: 0; right: 0; display: flex; align-items: stretch;
       gap: 0;
       height: var(--data-grid-row-height);
-      border: none;
-      box-shadow: inset 0 0 0 1px var(--item-border-color, transparent);
+      /* Border width is always 1px, even when not visually shown (transparent),
+         so hover/selection never changes the box size and shifts content. */
+      border: 1px solid transparent;
       background: var(--item-bg);
       border-radius: var(--item-border-radius);
       padding: 0;
       box-sizing: border-box;
+      /* Only background transitions - hover ("tickled") no longer changes
+         border, so there is nothing else to animate. */
+      transition: background var(--transition, 0.1s ease-out);
+    }
+    /* Zebra striping: alternate rows tint towards the text colour, which
+       lightens in dark themes and darkens in light themes - so it reads as
+       "more contrast" either way. The zebra-odd class is only applied when
+       zebraStripes is set (see render()). Declared before .tickled /
+       .selected so those states (same specificity) still win when a striped
+       row is also hovered or selected. */
+    .row.item.zebra-odd {
+      background: color-mix(in oklch, transparent calc(100% - var(--data-grid-zebra-intensity, 6%)), var(--surface-3-text) var(--data-grid-zebra-intensity, 6%));
     }
-    .row.item.tickled { background: var(--item-bg-tickled); border: var(--item-border-tickled); color: var(--item-text-tickled); }
+    /* Hover: background only, no border change (avoids layout shift + colour flash). */
+    .row.item.tickled { background: var(--item-bg-tickled); color: var(--item-text-tickled); }
     .row.item.selected { background: var(--item-bg-selected); border: var(--item-border-selected); color: var(--item-text-selected); }
     .row.item.selected.tickled { background: var(--item-bg-selected-tickled); }
     .row.item.dragging-origin { opacity: 0.6; }
@@ -1228,7 +1273,13 @@ let DataGridElement = class DataGridElement extends LitElement {
 			composed: true
 		}));
 	}
-	_autoSizeColumn(col) {
+	/**
+	* Measure the width a column would need to show its header label and every
+	* row's (formatted) value without truncation, clamped to `minWidth`/`maxWidth`.
+	* Values are measured from their formatted string via canvas `measureText` -
+	* accurate for plain text, an estimate for anything else.
+	*/
+	_measureAutoWidth(col) {
 		const cs = getComputedStyle(this);
 		const font = `${cs.fontSize} ${cs.fontFamily}`;
 		const ctx = document.createElement(`canvas`).getContext(`2d`);
@@ -1243,12 +1294,15 @@ let DataGridElement = class DataGridElement extends LitElement {
 		for (const r of this.rows) {
 			const v = r[col.key];
 			if (v === null || v === void 0 || v === ``) continue;
-			const w = measure(String(v)) + cellPad;
+			const w = measure(String(this._formatValue(v, col, r))) + cellPad;
 			if (w > maxW) maxW = w;
 		}
 		const min = col.minWidth ?? 40;
 		const max = col.maxWidth ?? 600;
-		const w = Math.max(min, Math.min(max, maxW));
+		return Math.max(min, Math.min(max, maxW));
+	}
+	_autoSizeColumn(col) {
+		const w = this._measureAutoWidth(col);
 		col.width = w;
 		this.requestUpdate();
 		this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
@@ -1260,11 +1314,50 @@ let DataGridElement = class DataGridElement extends LitElement {
 			composed: true
 		}));
 	}
+	/**
+	* Resize a single column, by key, to fit its contents (header label + every
+	* row's formatted value), animating the width change smoothly. Only works
+	* for plain columns - one with a custom `renderer` can't be measured
+	* reliably from its raw value, so it's left untouched. Returns `false` (and
+	* does nothing) if the column doesn't exist, isn't resizable, or has a
+	* `renderer`.
+	*/
+	autoSizeColumn(key) {
+		const col = this.columns.find((c) => c.key === key);
+		if (!col || col.resizable === false || col.renderer) return false;
+		const target = this._measureAutoWidth(col);
+		if ((col.width ?? 150) === target) return true;
+		this._animatingColKeys = new Set(this._animatingColKeys).add(key);
+		requestAnimationFrame(() => {
+			col.width = target;
+			this.requestUpdate();
+			this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
+				detail: {
+					key,
+					width: target
+				},
+				bubbles: true,
+				composed: true
+			}));
+			window.setTimeout(() => {
+				const next = new Set(this._animatingColKeys);
+				next.delete(key);
+				this._animatingColKeys = next;
+			}, this._columnResizeAnimationMs());
+		});
+		return true;
+	}
+	_columnResizeAnimationMs() {
+		const raw = getComputedStyle(this).getPropertyValue(`--data-grid-column-resize-duration`).trim();
+		const ms = raw.endsWith(`ms`) ? Number.parseFloat(raw) : raw.endsWith(`s`) ? Number.parseFloat(raw) * 1e3 : Number.parseFloat(raw);
+		return (Number.isFinite(ms) && ms > 0 ? ms : 180) + 30;
+	}
 	_onResizePointerDown(e, col) {
 		e.preventDefault();
 		e.stopPropagation();
 		const startX = e.clientX;
 		const startW = col.width ?? 150;
+		this._resizingColKey = col.key;
 		const onMove = (ev) => {
 			col.width = Math.max(col.minWidth ?? 40, Math.min(col.maxWidth ?? 600, startW + ev.clientX - startX));
 			this.requestUpdate();
@@ -1272,6 +1365,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		const onUp = (ev) => {
 			window.removeEventListener(`pointermove`, onMove);
 			window.removeEventListener(`pointerup`, onUp);
+			this._resizingColKey = void 0;
 			const w = Math.max(col.minWidth ?? 40, Math.min(col.maxWidth ?? 600, startW + ev.clientX - startX));
 			this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
 				detail: {
@@ -1328,15 +1422,15 @@ let DataGridElement = class DataGridElement extends LitElement {
           <div class="header-scroll">
             ${showCheckbox ? html`<div class="header-cell checkbox-col"></div>` : nothing}
             ${repeat(this._visibleColumns, (c) => c.key, (col, idx) => html`
-              <div class="header-cell" style="width:${col.width ?? 150}px" ?drag-source=${this._drag?.active && this._drag.sourceCol.key === col.key}
+              <div class="header-cell ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" style="width:${col.width ?? 150}px" ?drag-source=${this._drag?.active && this._drag.sourceCol.key === col.key}
                 @click=${() => this._onHeaderClick(col)}
                 @pointerenter=${() => this._tickled.handlePointerEnter(col.key)}>
                 ${col.reorderable !== false ? html`<span class="reorder-handle" draggable="false"
                   @pointerdown=${(e) => this._beginHeaderDrag(e, col, idx)}
-                ><span class="ixfx-handle" data-handle="dotted" data-shape="spot" part="reorder-handle"></span></span>` : nothing}
+                ><span class="ixfx-handle" data-handle="dotted" data-shape="vertical" part="reorder-handle"></span></span>` : nothing}
                 <span class="header-label">${col.label}</span>
                 ${this.sortState?.key === col.key ? html`<span class="sort-icon">${this.sortState.direction === `asc` ? `▲` : `▼`}</span>` : nothing}
-                ${col.resizable !== false ? html`<span class="resize-handle" @pointerdown=${(e) => this._onResizePointerDown(e, col)} @click=${(e) => e.stopPropagation()} @dblclick=${(e) => {
+                ${col.resizable !== false ? html`<span class="resize-handle" ?data-active=${this._resizingColKey === col.key} @pointerdown=${(e) => this._onResizePointerDown(e, col)} @click=${(e) => e.stopPropagation()} @dblclick=${(e) => {
 			e.preventDefault();
 			e.stopPropagation();
 			this._autoSizeColumn(col);
@@ -1407,7 +1501,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			const selected = this._selectedKeys.has(rowKey);
 			const tickled = this._tickled.isTickled(rowKey);
 			return html`
-                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.zebraStripes && absIdx2 % 2 === 1 ? `zebra-odd` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
                   data-key=${rowKey}
                   draggable=${this.#nativeDrag.draggableAttr}
                   @click=${(e) => {
@@ -1513,7 +1607,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 				const rendered = col.renderer ? col.renderer(row, col, absIdx2) : displayVal;
 				const cellContent = col.renderer ? rendered : displayVal;
 				const textEditable = this._isEditable(row, col) && this._isTextEditor(col);
-				return html`<div class="cell ${textEditable ? `editable-text` : ``}" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}"
+				const indent = col.align !== `right` && col.align !== `center` && col.reorderable !== false ? `padding-left:calc(var(--space-s) + var(--data-grid-reorder-handle-width, 10px) + var(--space-xs));` : ``;
+				const canPan = this.cellOverflow === `pan-text` && !col.renderer && (selected || tickled);
+				return html`<div class="cell ${textEditable ? `editable-text` : ``} ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}; ${indent}"
                       @click=${(e) => {
 					this._lastClickedCell = {
 						rowKey,
@@ -1535,7 +1631,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 						composed: true
 					}));
 				}}
-                    >${cellContent}</div>`;
+                    >${canPan ? html`<ixfx-pan-text mode="loop">${cellContent}</ixfx-pan-text>` : cellContent}</div>`;
 			})}
                 </div>
               `;
@@ -1569,6 +1665,15 @@ __decorate([property({
 	type: String,
 	reflect: true
 })], DataGridElement.prototype, "editability", void 0);
+__decorate([property({
+	type: String,
+	attribute: `cell-overflow`
+})], DataGridElement.prototype, "cellOverflow", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `zebra-stripes`,
+	reflect: true
+})], DataGridElement.prototype, "zebraStripes", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "groupBy", void 0);
 __decorate([property({
 	type: Boolean,
@@ -1599,6 +1704,9 @@ __decorate([property({
 	reflect: true
 })], DataGridElement.prototype, "itemsDraggable", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "dragPreviewRenderer", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "dragPreviewSource", void 0);
+__decorate([state()], DataGridElement.prototype, "_resizingColKey", void 0);
+__decorate([state()], DataGridElement.prototype, "_animatingColKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollLeft", void 0);