@ixfx/components 0.7.4 → 0.8.0

package/dist/data-grid.js

@@ -2,12 +2,14 @@ import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.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 { i as listItemFadeKeyframes } from "./list-item-animation-DuiwgN3l.js";
 import "./interaction-Cr13azbM.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
 import "./menu-Bg90Qr0B.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
+import { createCommandRegistry } from "@clinth/ui-commands";
 import { repeat } from "lit/directives/repeat.js";
 //#region src/data-grid/data-grid.ts
 let DataGridElement = class DataGridElement extends LitElement {
@@ -48,6 +50,8 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this._sortedRows = [];
 		this._flat = [];
 		this._flatKeys = [];
+		this.#searchKeyByRow = /* @__PURE__ */ new Map();
+		this.search = new ListSearchController(this, { adapter: this.#createSearchAdapter() });
 		this.#prevFlatKeys = [];
 		this.#enteringRowKeys = /* @__PURE__ */ new Set();
 		this.#rowReflowTimer = 0;
@@ -253,6 +257,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			tickledStyles,
 			tickledItemStyles,
 			listItemFadeKeyframes,
+			listSearchStyles,
 			css`
     :host {
       --data-grid-row-height: 28px;
@@ -261,6 +266,7 @@ 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);
+      position: relative;
       display: block;
       overflow: hidden;
       border: var(--data-grid-border);
@@ -354,6 +360,55 @@ let DataGridElement = class DataGridElement extends LitElement {
   `
 		];
 	}
+	#searchRegistry;
+	#unregisterSearchCommands;
+	#searchKeyByRow;
+	/** Command registry carrying this grid's `list.search.*` commands. */
+	get registry() {
+		return this.#searchRegistry;
+	}
+	#rowSearchText(row) {
+		if (this.rowSearchText) return this.rowSearchText(row);
+		const rec = row;
+		return this._visibleColumns.map((c) => String(rec[c.key] ?? ``)).join(` `);
+	}
+	#createSearchAdapter() {
+		return {
+			getItems: () => {
+				this.#searchKeyByRow.clear();
+				this._sortedRows.forEach((r, i) => this.#searchKeyByRow.set(r, this.getRowKey(r, i)));
+				return this._sortedRows;
+			},
+			getLabel: (row) => this.#rowSearchText(row),
+			getKey: (row) => this.#searchKeyByRow.get(row) ?? String(this._sortedRows.indexOf(row)),
+			focusItem: (row) => {
+				if (row === void 0) return;
+				const key = this.#searchKeyByRow.get(row);
+				if (key !== void 0) this.tickleRow(key);
+			},
+			selectItems: (rows) => {
+				this.selectKeys(rows.map((r) => this.#searchKeyByRow.get(r)).filter((k) => k !== void 0));
+			},
+			applyFilter: (matched) => {
+				this.filterPredicate = matched === void 0 ? void 0 : (row) => {
+					const k = this.#searchKeyByRow.get(row);
+					return k === void 0 || matched.has(k);
+				};
+			}
+		};
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#searchRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
+	}
 	/** Row-key snapshot from the previous update, for the insertion / removal animation. */
 	#prevFlatKeys;
 	#enteringRowKeys;
@@ -366,17 +421,29 @@ let DataGridElement = class DataGridElement extends LitElement {
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
 		this.addEventListener(`keydown`, this._onKeyDown);
 		this.addEventListener(`focusout`, this._onFocusOut);
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`focusout`, this._onFocusOut);
 		cancelAnimationFrame(this._raf);
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
 		if (this.#rowReflowTimer) {
 			clearTimeout(this.#rowReflowTimer);
 			this.#rowReflowTimer = 0;
 		}
 	}
+	/**
+	* Dispatch a command to this grid — routes through the command registry so
+	* `list.search.*` (and any other registered commands) work.
+	*/
+	dispatch(commandId, args) {
+		this.#searchRegistry?.invoke(commandId, args);
+	}
 	firstUpdated() {
 		new ResizeObserver(() => {
 			if (!this._viewportEl) return;
@@ -402,6 +469,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.setAttribute(`data-input-mode`, this._tickled.inputMode);
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
 		if (!this.#appendInProgress) {
 			if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`)) this._sortedRows = this._applySort([...this.rows]);
 			this._rebuildFlat();
@@ -456,18 +524,23 @@ let DataGridElement = class DataGridElement extends LitElement {
 		return String(this.groupBy(row));
 	}
 	_rebuildFlat() {
+		const filtered = this.filterPredicate !== void 0;
+		const source = filtered ? this._sortedRows.filter((r) => this.filterPredicate(r)) : this._sortedRows;
 		if (!this.groupBy) {
-			this._flat = this._sortedRows.map((r, i) => ({
-				type: `row`,
-				key: this.getRowKey(r, i),
-				row: r,
-				idx: i
-			}));
+			this._flat = source.map((r, i) => {
+				const idx = filtered ? this._sortedRows.indexOf(r) : i;
+				return {
+					type: `row`,
+					key: this.getRowKey(r, idx),
+					row: r,
+					idx
+				};
+			});
 			this._flatKeys = this._flat.map((f) => f.key);
 			return;
 		}
 		const groups = /* @__PURE__ */ new Map();
-		for (const r of this._sortedRows) {
+		for (const r of source) {
 			const k = this._getGroupKey(r) ?? ``;
 			const arr = groups.get(k);
 			if (arr) arr.push(r);
@@ -1337,6 +1410,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		})}
           </div>
         </div>
+        ${this.search.renderField()}
       </div>
     `;
 	}
@@ -1380,6 +1454,13 @@ __decorate([property({
 	attribute: `column-menu`
 })], DataGridElement.prototype, "columnMenu", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "globalFormatter", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "filterPredicate", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "rowSearchText", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], DataGridElement.prototype, "searchModes", void 0);
 __decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollLeft", void 0);