@mittwald/flow-remote-vue-components 0.0.0-stage → 1.5.0-next.35

package/dist/js/remote-vue-components/src/list/listContext.mjs

@@ -0,0 +1,13 @@
+import { inject, provide } from "vue";
+//#region src/list/listContext.ts
+var listModelKey = Symbol("flowListModel");
+var provideListModel = (model) => provide(listModelKey, model);
+var injectListModel = () => {
+	const model = inject(listModelKey, void 0);
+	if (!model) throw new Error("This component must be used inside a <List />.");
+	return model;
+};
+//#endregion
+export { injectListModel, provideListModel };
+
+//# sourceMappingURL=listContext.mjs.map

package/dist/js/remote-vue-components/src/list/listContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"listContext.mjs","names":[],"sources":["../../../../../src/list/listContext.ts"],"sourcesContent":["import { inject, provide, type InjectionKey } from \"vue\";\nimport type { ListModel } from \"./model\";\n\n/**\n * The list a component inside it sees.\n *\n * `never`, not `any`: the item type is the consumer's, and every read of an\n * item goes through the consumer's own render function. `any` would be the\n * `Table<any>` variance trap — a `ListModel<never>` is not assignable to it.\n */\nexport type AnyListModel = ListModel<never>;\n\nconst listModelKey: InjectionKey<AnyListModel> = Symbol(\"flowListModel\");\n\nexport const provideListModel = (model: AnyListModel): void =>\n  provide(listModelKey, model);\n\nexport const injectListModel = (): AnyListModel => {\n  const model = inject(listModelKey, undefined);\n\n  if (!model) {\n    throw new Error(\"This component must be used inside a <List />.\");\n  }\n\n  return model;\n};\n"],"mappings":";;AAYA,IAAM,eAA2C,OAAO,eAAe;AAEvE,IAAa,oBAAoB,UAC/B,QAAQ,cAAc,KAAK;AAE7B,IAAa,wBAAsC;CACjD,MAAM,QAAQ,OAAO,cAAc,KAAA,CAAS;CAE5C,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,gDAAgD;CAGlE,OAAO;AACT"}

package/dist/js/remote-vue-components/src/list/locales.mjs

@@ -0,0 +1,84 @@
+import { useLanguage } from "../composables/remoteContext.mjs";
+import { computed } from "vue";
+//#region src/list/locales.ts
+var texts = {
+	"en-US": {
+		dateRange: "Date range",
+		filters: "Filters",
+		"filters.all": "All filters",
+		"filters.clear": "Clear filters",
+		"filters.clearSelection": "Clear selection",
+		"filters.deselectAll": "Deselect all",
+		"filters.reset": "Reset filters",
+		"filters.selectAll": "Select all",
+		"filters.store": "Store filters",
+		loadingMore: "Loading more items",
+		"noItems.heading": "No items available",
+		"noItems.text": "Once there are items available, they will be displayed here.",
+		"noResult.heading": "No search results found",
+		"noResult.text": "Your search did not return any results. Please adjust the search query or your filters.",
+		options: "Options",
+		paginationInfo: "Showing {visibleItemsCount} of {totalItemsCount}",
+		reset: "Reset",
+		"results.show.one": "Show {totalItemCount} result",
+		"results.show.other": "Show {totalItemCount} Results",
+		settings: "Settings",
+		"settings.viewMode": "View",
+		"settings.viewMode.list": "List",
+		"settings.viewMode.table": "Table",
+		"settings.viewMode.tiles": "Tiles",
+		showMore: "Show more",
+		sorting: "Sorting",
+		"toggleExpandButton.collapse": "Show less",
+		"toggleExpandButton.expand": "Show more"
+	},
+	"de-DE": {
+		dateRange: "Zeitraum",
+		filters: "Filter",
+		"filters.all": "Alle Filter",
+		"filters.clear": "Filter entfernen",
+		"filters.clearSelection": "Auswahl aufheben",
+		"filters.deselectAll": "Alle abwählen",
+		"filters.reset": "Filter zurücksetzen",
+		"filters.selectAll": "Alle auswählen",
+		"filters.store": "Filter speichern",
+		loadingMore: "Weitere Einträge werden geladen",
+		"noItems.heading": "Keine Einträge vorhanden",
+		"noItems.text": "Sobald Einträge vorhanden sind, werden sie hier angezeigt.",
+		"noResult.heading": "Keine Suchergebnisse gefunden",
+		"noResult.text": "Deine Suche ergab keine Ergebnisse. Bitte passe die Suchanfrage oder deine Filter an.",
+		options: "Optionen",
+		paginationInfo: "{visibleItemsCount} von insgesamt {totalItemsCount} angezeigt",
+		reset: "Zurücksetzen",
+		"results.show.one": "{totalItemCount} Ergebnis anzeigen",
+		"results.show.other": "{totalItemCount} Ergebnisse anzeigen",
+		settings: "Einstellungen",
+		"settings.viewMode": "Ansicht",
+		"settings.viewMode.list": "Liste",
+		"settings.viewMode.table": "Tabelle",
+		"settings.viewMode.tiles": "Raster",
+		showMore: "Mehr anzeigen",
+		sorting: "Sortierung",
+		"toggleExpandButton.collapse": "Weniger anzeigen",
+		"toggleExpandButton.expand": "Mehr anzeigen"
+	}
+};
+/**
+* The list's texts in the host's language.
+*
+* Only `{name}` placeholders, not ICU: the two strings that interpolate count
+* items, and neither pluralizes. A string that needed a plural rule would need
+* a formatter, and the honest fix then is `@flr-generate` on the List rather
+* than an ICU parser in a binding.
+*/
+var useListTexts = () => {
+	const language = useLanguage();
+	return computed(() => {
+		const table = language.value?.startsWith("de") ? texts["de-DE"] : texts["en-US"];
+		return (key, values = {}) => table[key].replace(/\{(\w+)\}/g, (placeholder, name) => name in values ? String(values[name]) : placeholder);
+	});
+};
+//#endregion
+export { texts, useListTexts };
+
+//# sourceMappingURL=locales.mjs.map

package/dist/js/remote-vue-components/src/list/locales.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"locales.mjs","names":[],"sources":["../../../../../src/list/locales.ts"],"sourcesContent":["import { useLanguage } from \"@/composables/remoteContext\";\nimport { computed, type ComputedRef } from \"vue\";\n\n/*\n * Copied from `packages/components/src/components/List/locales/*.locale.json`.\n *\n * Flow's strings are compiled into the React bundle by a locale plugin and are\n * not importable from a published package, so a Vue binding has to carry its\n * own — the same trade as the overlays' strings (`src/overlays/locales.ts`), at\n * a larger count. A rewording on the Flow side fails\n * `src/tests/CopiedTexts.test.ts`.\n */\nexport const texts = {\n  \"en-US\": {\n    dateRange: \"Date range\",\n    filters: \"Filters\",\n    \"filters.all\": \"All filters\",\n    \"filters.clear\": \"Clear filters\",\n    \"filters.clearSelection\": \"Clear selection\",\n    \"filters.deselectAll\": \"Deselect all\",\n    \"filters.reset\": \"Reset filters\",\n    \"filters.selectAll\": \"Select all\",\n    \"filters.store\": \"Store filters\",\n    loadingMore: \"Loading more items\",\n    \"noItems.heading\": \"No items available\",\n    \"noItems.text\":\n      \"Once there are items available, they will be displayed here.\",\n    \"noResult.heading\": \"No search results found\",\n    \"noResult.text\":\n      \"Your search did not return any results. Please adjust the search query or your filters.\",\n    options: \"Options\",\n    paginationInfo: \"Showing {visibleItemsCount} of {totalItemsCount}\",\n    reset: \"Reset\",\n    /*\n     * One key per branch, because Flow's is ICU (`{n, select, 1 {…} other {…}}`)\n     * and this binding carries a `{name}` formatter rather than an ICU parser.\n     * The two branches are picked in code — see `AllFiltersModal`.\n     */\n    \"results.show.one\": \"Show {totalItemCount} result\",\n    \"results.show.other\": \"Show {totalItemCount} Results\",\n    settings: \"Settings\",\n    \"settings.viewMode\": \"View\",\n    \"settings.viewMode.list\": \"List\",\n    \"settings.viewMode.table\": \"Table\",\n    \"settings.viewMode.tiles\": \"Tiles\",\n    showMore: \"Show more\",\n    sorting: \"Sorting\",\n    \"toggleExpandButton.collapse\": \"Show less\",\n    \"toggleExpandButton.expand\": \"Show more\",\n  },\n  \"de-DE\": {\n    dateRange: \"Zeitraum\",\n    filters: \"Filter\",\n    \"filters.all\": \"Alle Filter\",\n    \"filters.clear\": \"Filter entfernen\",\n    \"filters.clearSelection\": \"Auswahl aufheben\",\n    \"filters.deselectAll\": \"Alle abwählen\",\n    \"filters.reset\": \"Filter zurücksetzen\",\n    \"filters.selectAll\": \"Alle auswählen\",\n    \"filters.store\": \"Filter speichern\",\n    loadingMore: \"Weitere Einträge werden geladen\",\n    \"noItems.heading\": \"Keine Einträge vorhanden\",\n    \"noItems.text\":\n      \"Sobald Einträge vorhanden sind, werden sie hier angezeigt.\",\n    \"noResult.heading\": \"Keine Suchergebnisse gefunden\",\n    \"noResult.text\":\n      \"Deine Suche ergab keine Ergebnisse. Bitte passe die Suchanfrage oder deine Filter an.\",\n    options: \"Optionen\",\n    paginationInfo:\n      \"{visibleItemsCount} von insgesamt {totalItemsCount} angezeigt\",\n    reset: \"Zurücksetzen\",\n    \"results.show.one\": \"{totalItemCount} Ergebnis anzeigen\",\n    \"results.show.other\": \"{totalItemCount} Ergebnisse anzeigen\",\n    settings: \"Einstellungen\",\n    \"settings.viewMode\": \"Ansicht\",\n    \"settings.viewMode.list\": \"Liste\",\n    \"settings.viewMode.table\": \"Tabelle\",\n    \"settings.viewMode.tiles\": \"Raster\",\n    showMore: \"Mehr anzeigen\",\n    sorting: \"Sortierung\",\n    \"toggleExpandButton.collapse\": \"Weniger anzeigen\",\n    \"toggleExpandButton.expand\": \"Mehr anzeigen\",\n  },\n} as const;\n\nexport type ListTextKey = keyof (typeof texts)[\"en-US\"];\n\nexport type ListTextFormatter = (\n  key: ListTextKey,\n  values?: Record<string, string | number>,\n) => string;\n\n/**\n * The list's texts in the host's language.\n *\n * Only `{name}` placeholders, not ICU: the two strings that interpolate count\n * items, and neither pluralizes. A string that needed a plural rule would need\n * a formatter, and the honest fix then is `@flr-generate` on the List rather\n * than an ICU parser in a binding.\n */\nexport const useListTexts = (): ComputedRef<ListTextFormatter> => {\n  const language = useLanguage();\n\n  return computed(() => {\n    const table = language.value?.startsWith(\"de\")\n      ? texts[\"de-DE\"]\n      : texts[\"en-US\"];\n\n    return (key, values = {}) =>\n      table[key].replace(/\\{(\\w+)\\}/g, (placeholder, name: string) =>\n        name in values ? String(values[name]) : placeholder,\n      );\n  });\n};\n"],"mappings":";;;AAYA,IAAa,QAAQ;CACnB,SAAS;EACP,WAAW;EACX,SAAS;EACT,eAAe;EACf,iBAAiB;EACjB,0BAA0B;EAC1B,uBAAuB;EACvB,iBAAiB;EACjB,qBAAqB;EACrB,iBAAiB;EACjB,aAAa;EACb,mBAAmB;EACnB,gBACE;EACF,oBAAoB;EACpB,iBACE;EACF,SAAS;EACT,gBAAgB;EAChB,OAAO;EAMP,oBAAoB;EACpB,sBAAsB;EACtB,UAAU;EACV,qBAAqB;EACrB,0BAA0B;EAC1B,2BAA2B;EAC3B,2BAA2B;EAC3B,UAAU;EACV,SAAS;EACT,+BAA+B;EAC/B,6BAA6B;CAC/B;CACA,SAAS;EACP,WAAW;EACX,SAAS;EACT,eAAe;EACf,iBAAiB;EACjB,0BAA0B;EAC1B,uBAAuB;EACvB,iBAAiB;EACjB,qBAAqB;EACrB,iBAAiB;EACjB,aAAa;EACb,mBAAmB;EACnB,gBACE;EACF,oBAAoB;EACpB,iBACE;EACF,SAAS;EACT,gBACE;EACF,OAAO;EACP,oBAAoB;EACpB,sBAAsB;EACtB,UAAU;EACV,qBAAqB;EACrB,0BAA0B;EAC1B,2BAA2B;EAC3B,2BAA2B;EAC3B,UAAU;EACV,SAAS;EACT,+BAA+B;EAC/B,6BAA6B;CAC/B;AACF;;;;;;;;;AAiBA,IAAa,qBAAqD;CAChE,MAAM,WAAW,YAAY;CAE7B,OAAO,eAAe;EACpB,MAAM,QAAQ,SAAS,OAAO,WAAW,IAAI,IACzC,MAAM,WACN,MAAM;EAEV,QAAQ,KAAK,SAAS,CAAC,MACrB,MAAM,IAAI,CAAC,QAAQ,eAAe,aAAa,SAC7C,QAAQ,SAAS,OAAO,OAAO,KAAK,IAAI,WAC1C;CACJ,CAAC;AACH"}

package/dist/js/remote-vue-components/src/list/metadata.mjs

@@ -0,0 +1,22 @@
+import watchMobxValue from "../lib/mobxSelector.mjs";
+import { injectListModel } from "./listContext.mjs";
+//#region src/list/metadata.ts
+/**
+* What the loader reported beside its data.
+*
+* The counterpart of React's `useListMetadata`: a loader returns `{ data,
+* itemTotalCount, metadata }`, and `metadata` is whatever the source sends
+* along — a cursor, a facet count, an API's own envelope. The list does not
+* read it; this is how the app gets it back.
+*
+* A ref, not a value: the batches arrive over time, and each one may bring new
+* metadata. Call it inside a `<List>`, where the list can be injected.
+*/
+var useListMetadata = () => {
+	const list = injectListModel();
+	return watchMobxValue(() => list.loaderState.metadata);
+};
+//#endregion
+export { useListMetadata as default, useListMetadata };
+
+//# sourceMappingURL=metadata.mjs.map

package/dist/js/remote-vue-components/src/list/metadata.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.mjs","names":[],"sources":["../../../../../src/list/metadata.ts"],"sourcesContent":["import { watchMobxValue } from \"@/lib/mobxSelector\";\nimport type { Ref } from \"vue\";\nimport { injectListModel } from \"./listContext\";\n\n/**\n * What the loader reported beside its data.\n *\n * The counterpart of React's `useListMetadata`: a loader returns `{ data,\n * itemTotalCount, metadata }`, and `metadata` is whatever the source sends\n * along — a cursor, a facet count, an API's own envelope. The list does not\n * read it; this is how the app gets it back.\n *\n * A ref, not a value: the batches arrive over time, and each one may bring new\n * metadata. Call it inside a `<List>`, where the list can be injected.\n */\nexport const useListMetadata = <T = unknown>(): Readonly<\n  Ref<T | undefined>\n> => {\n  const list = injectListModel();\n  return watchMobxValue(() => list.loaderState.metadata as T | undefined);\n};\n\nexport default useListMetadata;\n"],"mappings":";;;;;;;;;;;;;;AAeA,IAAa,wBAER;CACH,MAAM,OAAO,gBAAgB;CAC7B,OAAO,qBAAqB,KAAK,YAAY,QAAyB;AACxE"}

package/dist/js/remote-vue-components/src/list/model.mjs

@@ -0,0 +1,392 @@
+import { ListFilter } from "../../../components-base/src/list/filter/ListFilter.mjs";
+import { ListItemCollection } from "../../../components-base/src/list/item/ListItemCollection.mjs";
+import { ListLoaderState } from "../../../components-base/src/list/loading/ListLoaderState.mjs";
+import { getListDataLoaderOptions } from "../../../components-base/src/list/loading/types.mjs";
+import { ListBatchesController } from "../../../components-base/src/list/pagination/ListBatchesController.mjs";
+import { ListSearch } from "../../../components-base/src/list/search/ListSearch.mjs";
+import { ListSorting, mergeHiddenSorting } from "../../../components-base/src/list/sorting/ListSorting.mjs";
+import { ListTable } from "../../../components-base/src/list/table/ListTable.mjs";
+import { ListViewMode } from "../../../components-base/src/list/viewMode/ListViewMode.mjs";
+import "../../../components-base/src/index.mjs";
+import { DateRangeFilter } from "./dateRangeFilter.mjs";
+import { isRef } from "vue";
+import { action, makeObservable, observable } from "mobx";
+import { hash } from "object-code";
+import { getCoreRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/table-core";
+//#region src/list/model.ts
+var emptyData = [];
+/** The same items in the same order, whether or not it is the same array. */
+var isSameData = (current, next) => current === next || current !== void 0 && current.length === next.length && current.every((item, index) => item === next[index]);
+var setupSignature = (value) => String(hash(value));
+var isPlainObject = (value) => {
+	if (typeof value !== "object" || value === null) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+};
+var withoutFunctions = (value, copies = /* @__PURE__ */ new Map()) => {
+	if (isRef(value)) return withoutFunctions(value.value, copies);
+	if (!Array.isArray(value) && !isPlainObject(value)) return value;
+	const existing = copies.get(value);
+	if (existing !== void 0) return existing;
+	if (Array.isArray(value)) {
+		const copy = [];
+		copies.set(value, copy);
+		for (const entry of value) copy.push(withoutFunctions(entry, copies));
+		return copy;
+	}
+	const copy = {};
+	copies.set(value, copy);
+	for (const [key, entry] of Object.entries(value)) if (typeof entry !== "function") copy[key] = withoutFunctions(entry, copies);
+	return copy;
+};
+var renderShapeKeys = [
+	"itemView",
+	"onAction",
+	"componentProps",
+	"accordion",
+	"table",
+	"aria-label",
+	"aria-labelledby"
+];
+var pickRenderShape = (shape) => Object.fromEntries(renderShapeKeys.map((key) => [key, shape[key]]));
+/**
+* Flow's list, without React.
+*
+* Every rule it follows — the batches, the filters, the sorting, the search,
+* the view mode, the table — is `@mittwald/flow-components-base`, the same
+* objects `packages/components` builds its list from. What is assembled here is
+* only the wiring, plus the one thing the shared model deliberately left to a
+* binding: fetching a batch.
+*
+* It is a plain object, not a Vue reactive one. Its state is MobX, and a
+* component reads it through `watchMobxValue`.
+*/
+var ListModel = class {
+	shape;
+	/**
+	* Observable, and a new object on every render of the `List`: the components
+	* reading it render without props, so Vue would otherwise skip them and the
+	* host would keep the first `selectedKeys` it was handed.
+	*/
+	renderShape;
+	loaderState;
+	loader;
+	staticDataProperties = [];
+	filters = [];
+	sorting = [];
+	search;
+	listTable;
+	items;
+	batches;
+	viewMode;
+	/**
+	* Controlled, because a hidden sorting has to survive a click on a visible
+	* one — the table's own updater replaces the whole array.
+	*/
+	sortingState;
+	currentData = emptyData;
+	/**
+	* The request each batch is waiting for. A newer request for the batch, or a
+	* reset, makes an older one stale: its answer belongs to a query the list no
+	* longer shows.
+	*/
+	pendingLoads = /* @__PURE__ */ new Map();
+	setupSignatures;
+	constructor(shape) {
+		this.shape = shape;
+		this.renderShape = pickRenderShape(shape);
+		this.loader = {
+			manualPagination: shape.manualPagination ?? false,
+			manualFiltering: shape.manualFiltering ?? shape.manualPagination ?? false,
+			manualSorting: shape.manualSorting ?? shape.manualPagination ?? false
+		};
+		this.loaderState = new ListLoaderState({ getItemId: shape.getItemId });
+		if (shape.staticData) this.shape.staticData = [...shape.staticData];
+		this.collectStaticDataProperties();
+		this.buildSetup();
+		this.setupSignatures = this.signaturesOf(shape);
+		this.sortingState = this.sorting.filter((s) => s.initialEnabled !== false).map((s) => s.getReactTableColumnSort());
+		makeObservable(this, {
+			sortingState: observable.ref,
+			setSortingState: action.bound,
+			renderShape: observable.ref,
+			setRenderShape: action.bound
+		});
+		this.listTable = new ListTable(this.getTableOptions(emptyData));
+		this.items = new ListItemCollection(this);
+		this.batches = new ListBatchesController(this, { batchSize: shape.batchSize });
+		this.viewMode = new ListViewMode({
+			defaultValue: shape.defaultViewMode,
+			settings: this.settings
+		});
+		this.wireSetup();
+	}
+	buildSetup() {
+		const { shape } = this;
+		this.filters = (shape.filters ?? []).map((filterShape) => filterShape.mode === "dateRange" ? new DateRangeFilter(this, filterShape) : new ListFilter(this, filterShape));
+		this.sorting = (shape.sorting ?? []).map((sortingShape) => new ListSorting(this, sortingShape));
+		this.search = shape.search ? new ListSearch(this, shape.search) : void 0;
+	}
+	wireSetup() {
+		this.filters.forEach((f) => f.onFilterUpdated(() => {
+			this.batches.reset();
+			this.resetLoaderState();
+			ListFilter.storeFilters(this, this.filters, { autosave: true });
+		}));
+		this.search?.onUpdated(() => {
+			this.batches.reset();
+			this.resetLoaderState();
+		});
+	}
+	signaturesOf(shape) {
+		return {
+			setup: setupSignature(withoutFunctions([
+				shape.filters,
+				shape.sorting,
+				shape.search
+			])),
+			dependencies: setupSignature(withoutFunctions(shape.dependencies ?? []))
+		};
+	}
+	/**
+	* Takes what this render says about the filters, the sorting, the search and
+	* the loader.
+	*
+	* Read once, a filter whose `values` load after the list was built would
+	* offer nothing for good, and a loader reading a changed route would keep
+	* answering for the old one. React reads all of it on every render; here it
+	* is compared, and only a change rebuilds — a rebuild re-applies the table
+	* options, which re-renders the list.
+	*/
+	updateSetup(shape) {
+		const signatures = this.signaturesOf(shape);
+		this.shape.asyncLoader = shape.asyncLoader;
+		const setupChanged = signatures.setup !== this.setupSignatures.setup;
+		const dependenciesChanged = signatures.dependencies !== this.setupSignatures.dependencies;
+		this.setupSignatures = signatures;
+		if (setupChanged) {
+			this.shape.filters = shape.filters;
+			this.shape.sorting = shape.sorting;
+			this.shape.search = shape.search;
+			this.buildSetup();
+			this.wireSetup();
+			this.listTable.setOptions(this.getTableOptions(this.currentData));
+			this.filters.forEach((filter) => filter.deleteUnknownFilterValues());
+		}
+		if (dependenciesChanged) {
+			this.shape.dependencies = shape.dependencies;
+			this.resetLoaderState();
+		}
+	}
+	/** Takes what this render hands on to the elements. */
+	setRenderShape(shape) {
+		this.renderShape = pickRenderShape(shape);
+	}
+	/**
+	* Drops every request still on its way: its answer, or its failure, belongs
+	* to a list that is gone.
+	*/
+	discardPendingLoads() {
+		this.pendingLoads.clear();
+	}
+	resetLoaderState() {
+		this.pendingLoads.clear();
+		this.loaderState.reset();
+	}
+	get dataTable() {
+		return this.listTable.table;
+	}
+	get settings() {
+		return this.shape.settings;
+	}
+	setSortingState(next) {
+		this.sortingState = next;
+		this.listTable.setOptions(this.getTableOptions(this.currentData));
+		if (this.loader.manualSorting && !this.hasComposableLoader) this.resetLoaderState();
+	}
+	get loadingItemsCount() {
+		return this.shape.loadingItemsCount ?? this.batches.batchSize;
+	}
+	get hasActiveFilters() {
+		this.listTable.revision;
+		return this.filters.some((f) => f.isActive());
+	}
+	get visibleSorting() {
+		return this.sorting.filter((s) => s.initialEnabled !== "hidden");
+	}
+	/**
+	* The items the table currently shows.
+	*
+	* Reading the table's `revision` is the subscription: the rows come out of
+	* the options and the state, and `revision` is the only observable that moves
+	* when either does.
+	*/
+	get renderedItems() {
+		this.listTable.revision;
+		return this.items.entries;
+	}
+	get isEmpty() {
+		return !this.loaderState.isLoading && this.renderedItems.length === 0;
+	}
+	getEmptyViewType() {
+		return this.hasActiveFilters || this.search?.isSet ? "search" : "list";
+	}
+	clearSorting() {
+		this.sorting.forEach((s) => s.clear());
+	}
+	resetFilters() {
+		this.filters.forEach((f) => f.resetValues());
+	}
+	/**
+	* Replaces the data a static list shows.
+	*
+	* The loader state goes with it: the batches describe the old array, and
+	* keeping them would merge the two.
+	*
+	* Compared by content, not by identity, because a consumer writes the array
+	* inline — `h(ListStaticData, { data: [...] })` builds a new one on every
+	* render. On identity that is always "changed", and the reset it triggers
+	* re-renders the list, which builds the array again: Vue reports it as
+	* "Maximum recursive updates exceeded in component <List>".
+	*/
+	setStaticData(data) {
+		if (isSameData(this.shape.staticData, data)) return;
+		this.shape.staticData = [...data];
+		this.staticDataProperties.length = 0;
+		this.collectStaticDataProperties();
+		this.resetLoaderState();
+	}
+	/** Pushes this render's data into the table. */
+	setData(data) {
+		this.currentData = data;
+		this.listTable.setOptions(this.getTableOptions(data));
+	}
+	/** The query for one batch, as the data source asked to be asked. */
+	getDataLoaderOptions(batchIndex) {
+		return getListDataLoaderOptions({
+			batchSize: this.batches.batchSize,
+			modes: this.loader,
+			sorting: this.sorting,
+			filters: this.filters,
+			searchString: this.dataTable.getState().globalFilter
+		}, batchIndex);
+	}
+	/**
+	* Whether a composable owns the batches.
+	*
+	* A composable cannot be called from a watcher — it needs a `setup()` — so
+	* that source loads through a component per batch instead of `loadBatch`.
+	*/
+	get hasComposableLoader() {
+		return this.shape.composableLoader !== void 0;
+	}
+	/**
+	* Loads one batch and reports it, or reports that there is nothing to load.
+	*
+	* An answer that arrives after a newer request for the batch, or after a
+	* reset, is dropped. A failure marks the batch `"error"` and rejects — the
+	* list hands it to Vue's error handling, where React throws it into the error
+	* boundary.
+	*/
+	async loadBatch(batchIndex) {
+		const { staticData, asyncLoader } = this.shape;
+		if (staticData || !asyncLoader) {
+			this.reportBatch(batchIndex, staticData ? {
+				data: staticData,
+				itemTotalCount: staticData.length
+			} : {
+				data: emptyData,
+				itemTotalCount: 0
+			});
+			return;
+		}
+		const request = {};
+		this.pendingLoads.set(batchIndex, request);
+		const isCurrent = () => this.pendingLoads.get(batchIndex) === request;
+		let result;
+		try {
+			result = await asyncLoader(this.getDataLoaderOptions(batchIndex));
+		} catch (error) {
+			if (isCurrent()) {
+				this.pendingLoads.delete(batchIndex);
+				this.loaderState.setBatchLoadingState(batchIndex, "error");
+				throw error;
+			}
+			return;
+		}
+		if (isCurrent()) {
+			this.pendingLoads.delete(batchIndex);
+			this.reportBatch(batchIndex, result);
+		}
+	}
+	/**
+	* Hands one batch's result to the shared state.
+	*
+	* Both loaders end here: the async one when its promise resolves, the
+	* composable one when whatever it returned becomes defined.
+	*/
+	reportBatch(batchIndex, result) {
+		this.loaderState.setDataBatch(batchIndex, result.data);
+		this.loaderState.setMetadata(result.metadata);
+		if (result.itemTotalCount !== void 0) this.batches.updateItemTotalCount(result.itemTotalCount);
+		this.loaderState.setBatchLoadingState(batchIndex, "loaded");
+	}
+	collectStaticDataProperties() {
+		for (const entry of (this.shape.staticData ?? emptyData).slice(0, 100)) {
+			if (typeof entry !== "object" || entry === null) continue;
+			for (const property of Object.keys(entry)) if (!this.staticDataProperties.includes(property)) this.staticDataProperties.push(property);
+		}
+	}
+	getTableOptions(data) {
+		const initialState = {
+			pagination: { pageSize: this.shape.batchSize ?? 20 },
+			columnFilters: []
+		};
+		for (const filter of this.filters) filter.updateInitialState(initialState);
+		this.search?.updateInitialState(initialState);
+		return {
+			data,
+			state: { sorting: this.sortingState },
+			getRowId: this.shape.getItemId,
+			initialState,
+			columns: this.getColumnDefs(),
+			getCoreRowModel: getCoreRowModel(),
+			getSortedRowModel: getSortedRowModel(),
+			getFilteredRowModel: getFilteredRowModel(),
+			getPaginationRowModel: getPaginationRowModel(),
+			getFacetedUniqueValues: getFacetedUniqueValues(),
+			onSortingChange: (updater) => {
+				const next = typeof updater === "function" ? updater(this.sortingState) : updater;
+				this.setSortingState(mergeHiddenSorting(this.sorting, next));
+			},
+			globalFilterFn: "auto",
+			manualPagination: this.loader.manualPagination,
+			manualFiltering: this.loader.manualFiltering,
+			manualSorting: this.loader.manualSorting
+		};
+	}
+	getColumnDefs() {
+		const defs = /* @__PURE__ */ new Map();
+		const getOrCreate = (property) => {
+			const existing = defs.get(property);
+			if (existing) return existing;
+			const def = {
+				id: property,
+				accessorKey: property,
+				enableSorting: false,
+				enableColumnFilter: false,
+				sortingFn: "alphanumeric"
+			};
+			defs.set(property, def);
+			return def;
+		};
+		this.filters.forEach((f) => f.updateTableColumnDef(getOrCreate(f.property)));
+		this.sorting.forEach((s) => s.updateTableColumnDef(getOrCreate(s.property)));
+		this.staticDataProperties.forEach((p) => getOrCreate(p));
+		return Array.from(defs.values());
+	}
+};
+//#endregion
+export { ListModel };
+
+//# sourceMappingURL=model.mjs.map

package/dist/js/remote-vue-components/src/list/model.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.mjs","names":[],"sources":["../../../../../src/list/model.ts"],"sourcesContent":["import type {\n  ListDataLoaderOptions,\n  ListData,\n  ListDataLoaderResult,\n  ListLoaderModes,\n  ListPaginationContext,\n  ListItem,\n  ListSettingsPort,\n  PropertyName,\n} from \"@mittwald/flow-components-base\";\nimport {\n  getListDataLoaderOptions,\n  ListBatchesController,\n  ListFilter,\n  ListItemCollection,\n  ListLoaderState,\n  ListSearch,\n  ListSorting,\n  ListTable,\n  ListViewMode,\n  mergeHiddenSorting,\n} from \"@mittwald/flow-components-base\";\nimport { action, makeObservable, observable } from \"mobx\";\nimport { hash } from \"object-code\";\nimport { isRef } from \"vue\";\nimport {\n  getCoreRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n} from \"@tanstack/table-core\";\nimport type {\n  ColumnDef,\n  ColumnSort,\n  InitialTableState,\n  Table,\n  TableOptions,\n} from \"@tanstack/table-core\";\nimport { DateRangeFilter } from \"./dateRangeFilter\";\nimport type { ListRendered, VueListShape } from \"./types\";\n\nconst emptyData: never[] = [];\n\n/** The same items in the same order, whether or not it is the same array. */\nconst isSameData = <T>(\n  current: ListData<T> | undefined,\n  next: ListData<T>,\n): boolean =>\n  current === next ||\n  (current !== undefined &&\n    current.length === next.length &&\n    current.every((item, index) => item === next[index]));\n\n/*\n * What a render hands the model: the setup elements' props, which change when\n * the app's state does. Functions are left out — a Vue closure reads refs, so\n * a new one on every render is the same function, and comparing them would\n * rebuild the list on every render.\n */\nconst setupSignature = (value: unknown): string => String(hash(value));\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> => {\n  if (typeof value !== \"object\" || value === null) {\n    return false;\n  }\n  const prototype: unknown = Object.getPrototypeOf(value);\n  return prototype === Object.prototype || prototype === null;\n};\n\n/*\n * Walks plain objects and arrays only, and unwraps a ref or a computed to its\n * value: its object carries its subscribers, which change without the value.\n * Anything else — a `Date`, a `Map`, a class instance — goes to `hash` as it\n * is, which reads it the way React's loader does. A cycle is copied as a\n * cycle, which `hash` detects.\n */\nconst withoutFunctions = (\n  value: unknown,\n  copies = new Map<object, unknown>(),\n): unknown => {\n  if (isRef(value)) {\n    return withoutFunctions(value.value, copies);\n  }\n  if (!Array.isArray(value) && !isPlainObject(value)) {\n    return value;\n  }\n  const existing = copies.get(value);\n  if (existing !== undefined) {\n    return existing;\n  }\n\n  if (Array.isArray(value)) {\n    const copy: unknown[] = [];\n    copies.set(value, copy);\n    for (const entry of value) {\n      copy.push(withoutFunctions(entry, copies));\n    }\n    return copy;\n  }\n\n  const copy: Record<string, unknown> = {};\n  copies.set(value, copy);\n  for (const [key, entry] of Object.entries(value)) {\n    if (typeof entry !== \"function\") {\n      copy[key] = withoutFunctions(entry, copies);\n    }\n  }\n  return copy;\n};\n\n/** The parts of the shape a render can change after the list was built. */\nexport type ListSetupShape<T> = Pick<\n  VueListShape<T>,\n  \"filters\" | \"sorting\" | \"search\" | \"asyncLoader\" | \"dependencies\"\n>;\n\nconst renderShapeKeys = [\n  \"itemView\",\n  \"onAction\",\n  \"componentProps\",\n  \"accordion\",\n  \"table\",\n  \"aria-label\",\n  \"aria-labelledby\",\n] as const;\n\n/**\n * The parts of the shape the list's components hand on to the elements as they\n * are. Every render of the `List` replaces them.\n */\nexport type ListRenderShape<T> = Pick<\n  VueListShape<T>,\n  (typeof renderShapeKeys)[number]\n>;\n\nconst pickRenderShape = <T>(shape: VueListShape<T>): ListRenderShape<T> =>\n  Object.fromEntries(\n    renderShapeKeys.map((key) => [key, shape[key]]),\n  ) as ListRenderShape<T>;\n\n/**\n * Flow's list, without React.\n *\n * Every rule it follows — the batches, the filters, the sorting, the search,\n * the view mode, the table — is `@mittwald/flow-components-base`, the same\n * objects `packages/components` builds its list from. What is assembled here is\n * only the wiring, plus the one thing the shared model deliberately left to a\n * binding: fetching a batch.\n *\n * It is a plain object, not a Vue reactive one. Its state is MobX, and a\n * component reads it through `watchMobxValue`.\n */\nexport class ListModel<T> implements ListPaginationContext<T> {\n  public readonly shape: Omit<VueListShape<T>, keyof ListRenderShape<T>>;\n  /**\n   * Observable, and a new object on every render of the `List`: the components\n   * reading it render without props, so Vue would otherwise skip them and the\n   * host would keep the first `selectedKeys` it was handed.\n   */\n  public renderShape: ListRenderShape<T>;\n  public readonly loaderState: ListLoaderState<T>;\n  public readonly loader: ListLoaderModes;\n  public readonly staticDataProperties: PropertyName<T>[] = [];\n  /*\n   * Rebuilt when the app changes them, as React rebuilds them on every render.\n   * Their state is not in them — it is the table's — so a rebuild keeps what\n   * the user selected.\n   */\n  public filters: ListFilter<T, never, never, ListRendered>[] = [];\n  public sorting: ListSorting<T>[] = [];\n  public search?: ListSearch<T>;\n  public readonly listTable: ListTable<T>;\n  public readonly items: ListItemCollection<T>;\n  public readonly batches: ListBatchesController<T>;\n  public readonly viewMode: ListViewMode;\n\n  /**\n   * Controlled, because a hidden sorting has to survive a click on a visible\n   * one — the table's own updater replaces the whole array.\n   */\n  public sortingState: ColumnSort[];\n\n  private currentData: readonly T[] = emptyData;\n\n  /**\n   * The request each batch is waiting for. A newer request for the batch, or a\n   * reset, makes an older one stale: its answer belongs to a query the list no\n   * longer shows.\n   */\n  private readonly pendingLoads = new Map<number, object>();\n\n  private setupSignatures: { setup: string; dependencies: string };\n\n  public constructor(shape: VueListShape<T>) {\n    this.shape = shape;\n    this.renderShape = pickRenderShape(shape);\n\n    this.loader = {\n      manualPagination: shape.manualPagination ?? false,\n      manualFiltering: shape.manualFiltering ?? shape.manualPagination ?? false,\n      manualSorting: shape.manualSorting ?? shape.manualPagination ?? false,\n    };\n\n    this.loaderState = new ListLoaderState<T>({ getItemId: shape.getItemId });\n    if (shape.staticData) {\n      this.shape.staticData = [...shape.staticData];\n    }\n    this.collectStaticDataProperties();\n    this.buildSetup();\n    this.setupSignatures = this.signaturesOf(shape);\n\n    this.sortingState = this.sorting\n      .filter((s) => s.initialEnabled !== false)\n      .map((s) => s.getReactTableColumnSort());\n\n    makeObservable(this, {\n      sortingState: observable.ref,\n      setSortingState: action.bound,\n      renderShape: observable.ref,\n      setRenderShape: action.bound,\n    });\n\n    this.listTable = new ListTable<T>(this.getTableOptions(emptyData));\n    this.items = new ListItemCollection<T>(this);\n    this.batches = new ListBatchesController<T>(this, {\n      batchSize: shape.batchSize,\n    });\n    this.viewMode = new ListViewMode({\n      defaultValue: shape.defaultViewMode,\n      settings: this.settings,\n    });\n\n    this.wireSetup();\n  }\n\n  private buildSetup(): void {\n    const { shape } = this;\n\n    this.filters = (shape.filters ?? []).map((filterShape) =>\n      filterShape.mode === \"dateRange\"\n        ? (new DateRangeFilter<T>(this, filterShape) as unknown as ListFilter<\n            T,\n            never,\n            never,\n            ListRendered\n          >)\n        : new ListFilter<T, never, never, ListRendered>(\n            this,\n            filterShape as never,\n          ),\n    );\n    this.sorting = (shape.sorting ?? []).map(\n      (sortingShape) => new ListSorting<T>(this, sortingShape),\n    );\n    this.search = shape.search\n      ? new ListSearch<T>(this, shape.search)\n      : undefined;\n  }\n\n  /* The list owns the filters, so the list wires what a change resets. */\n  private wireSetup(): void {\n    this.filters.forEach((f) =>\n      f.onFilterUpdated(() => {\n        this.batches.reset();\n        this.resetLoaderState();\n        ListFilter.storeFilters(this, this.filters, { autosave: true });\n      }),\n    );\n    this.search?.onUpdated(() => {\n      this.batches.reset();\n      this.resetLoaderState();\n    });\n  }\n\n  private signaturesOf(shape: ListSetupShape<T>) {\n    return {\n      setup: setupSignature(\n        withoutFunctions([shape.filters, shape.sorting, shape.search]),\n      ),\n      dependencies: setupSignature(withoutFunctions(shape.dependencies ?? [])),\n    };\n  }\n\n  /**\n   * Takes what this render says about the filters, the sorting, the search and\n   * the loader.\n   *\n   * Read once, a filter whose `values` load after the list was built would\n   * offer nothing for good, and a loader reading a changed route would keep\n   * answering for the old one. React reads all of it on every render; here it\n   * is compared, and only a change rebuilds — a rebuild re-applies the table\n   * options, which re-renders the list.\n   */\n  public updateSetup(shape: ListSetupShape<T>): void {\n    const signatures = this.signaturesOf(shape);\n    /* The latest closure, whether or not anything else changed. */\n    this.shape.asyncLoader = shape.asyncLoader;\n\n    const setupChanged = signatures.setup !== this.setupSignatures.setup;\n    const dependenciesChanged =\n      signatures.dependencies !== this.setupSignatures.dependencies;\n    this.setupSignatures = signatures;\n\n    if (setupChanged) {\n      this.shape.filters = shape.filters;\n      this.shape.sorting = shape.sorting;\n      this.shape.search = shape.search;\n      this.buildSetup();\n      this.wireSetup();\n      this.listTable.setOptions(this.getTableOptions(this.currentData));\n      /* React runs this after every render that rebuilt its filters. */\n      this.filters.forEach((filter) => filter.deleteUnknownFilterValues());\n    }\n\n    /*\n     * React keys the loader's promise on its dependencies, so a change loads\n     * every batch again.\n     */\n    if (dependenciesChanged) {\n      this.shape.dependencies = shape.dependencies;\n      this.resetLoaderState();\n    }\n  }\n\n  /** Takes what this render hands on to the elements. */\n  public setRenderShape(shape: VueListShape<T>): void {\n    this.renderShape = pickRenderShape(shape);\n  }\n\n  /**\n   * Drops every request still on its way: its answer, or its failure, belongs\n   * to a list that is gone.\n   */\n  public discardPendingLoads(): void {\n    this.pendingLoads.clear();\n  }\n\n  private resetLoaderState(): void {\n    this.pendingLoads.clear();\n    this.loaderState.reset();\n  }\n\n  /* `ListModelContext` — what the shared model reaches for. */\n  public get dataTable(): Table<T> {\n    return this.listTable.table;\n  }\n\n  public get settings(): ListSettingsPort | undefined {\n    return this.shape.settings;\n  }\n\n  public setSortingState(next: ColumnSort[]): void {\n    this.sortingState = next;\n    /*\n     * The options carry the sorting, so changing the state alone changes\n     * nothing: `ListTable` re-applies the options it was last handed, and the\n     * sorting in those is the one from before this call.\n     */\n    this.listTable.setOptions(this.getTableOptions(this.currentData));\n    /*\n     * A source that sorts itself has to be asked again, the way React's loader\n     * is — its promise is keyed on the query, and the query carries the\n     * sorting. A composable is handed the query as a getter and follows it\n     * without this.\n     */\n    if (this.loader.manualSorting && !this.hasComposableLoader) {\n      this.resetLoaderState();\n    }\n  }\n\n  public get loadingItemsCount(): number {\n    return this.shape.loadingItemsCount ?? this.batches.batchSize;\n  }\n\n  public get hasActiveFilters(): boolean {\n    /*\n     * Another read of the table's state, so another read of the revision —\n     * without it the empty view keeps saying \"no items\" after a filter has\n     * emptied the list, which is a different sentence and a different icon.\n     */\n    void this.listTable.revision;\n    return this.filters.some((f) => f.isActive());\n  }\n\n  public get visibleSorting(): ListSorting<T>[] {\n    return this.sorting.filter((s) => s.initialEnabled !== \"hidden\");\n  }\n\n  /**\n   * The items the table currently shows.\n   *\n   * Reading the table's `revision` is the subscription: the rows come out of\n   * the options and the state, and `revision` is the only observable that moves\n   * when either does.\n   */\n  public get renderedItems(): ListItem<T>[] {\n    void this.listTable.revision;\n    return this.items.entries;\n  }\n\n  public get isEmpty(): boolean {\n    /*\n     * `renderedItems`, not `items.entries`: the data reaches the table one\n     * turn after the loader reports it, and reading the rows without the\n     * table's revision leaves this stuck on the answer from before.\n     */\n    return !this.loaderState.isLoading && this.renderedItems.length === 0;\n  }\n\n  public getEmptyViewType(): \"search\" | \"list\" {\n    return this.hasActiveFilters || this.search?.isSet ? \"search\" : \"list\";\n  }\n\n  public clearSorting(): void {\n    this.sorting.forEach((s) => s.clear());\n  }\n\n  public resetFilters(): void {\n    this.filters.forEach((f) => f.resetValues());\n  }\n\n  /**\n   * Replaces the data a static list shows.\n   *\n   * The loader state goes with it: the batches describe the old array, and\n   * keeping them would merge the two.\n   *\n   * Compared by content, not by identity, because a consumer writes the array\n   * inline — `h(ListStaticData, { data: [...] })` builds a new one on every\n   * render. On identity that is always \"changed\", and the reset it triggers\n   * re-renders the list, which builds the array again: Vue reports it as\n   * \"Maximum recursive updates exceeded in component <List>\".\n   */\n  public setStaticData(data: ListData<T>): void {\n    if (isSameData(this.shape.staticData, data)) {\n      return;\n    }\n\n    /*\n     * A copy, so an array the app changes in place — `items.value.push(…)` —\n     * still compares as changed on the next render.\n     */\n    this.shape.staticData = [...data];\n    /* React collects them from the data of every render. */\n    this.staticDataProperties.length = 0;\n    this.collectStaticDataProperties();\n    this.resetLoaderState();\n  }\n\n  /** Pushes this render's data into the table. */\n  public setData(data: T[]): void {\n    this.currentData = data;\n    this.listTable.setOptions(this.getTableOptions(data));\n  }\n\n  /** The query for one batch, as the data source asked to be asked. */\n  public getDataLoaderOptions(batchIndex: number): ListDataLoaderOptions<T> {\n    return getListDataLoaderOptions<T>(\n      {\n        batchSize: this.batches.batchSize,\n        modes: this.loader,\n        sorting: this.sorting,\n        filters: this.filters,\n        searchString: this.dataTable.getState().globalFilter as\n          string | undefined,\n      },\n      batchIndex,\n    );\n  }\n\n  /**\n   * Whether a composable owns the batches.\n   *\n   * A composable cannot be called from a watcher — it needs a `setup()` — so\n   * that source loads through a component per batch instead of `loadBatch`.\n   */\n  public get hasComposableLoader(): boolean {\n    return this.shape.composableLoader !== undefined;\n  }\n\n  /**\n   * Loads one batch and reports it, or reports that there is nothing to load.\n   *\n   * An answer that arrives after a newer request for the batch, or after a\n   * reset, is dropped. A failure marks the batch `\"error\"` and rejects — the\n   * list hands it to Vue's error handling, where React throws it into the error\n   * boundary.\n   */\n  public async loadBatch(batchIndex: number): Promise<void> {\n    const { staticData, asyncLoader } = this.shape;\n\n    if (staticData || !asyncLoader) {\n      this.reportBatch(\n        batchIndex,\n        staticData\n          ? { data: staticData, itemTotalCount: staticData.length }\n          : { data: emptyData, itemTotalCount: 0 },\n      );\n      return;\n    }\n\n    const request = {};\n    this.pendingLoads.set(batchIndex, request);\n    const isCurrent = () => this.pendingLoads.get(batchIndex) === request;\n\n    let result: ListDataLoaderResult<T>;\n    try {\n      result = await asyncLoader(this.getDataLoaderOptions(batchIndex));\n    } catch (error) {\n      if (isCurrent()) {\n        this.pendingLoads.delete(batchIndex);\n        this.loaderState.setBatchLoadingState(batchIndex, \"error\");\n        throw error;\n      }\n      return;\n    }\n\n    if (isCurrent()) {\n      this.pendingLoads.delete(batchIndex);\n      this.reportBatch(batchIndex, result);\n    }\n  }\n\n  /**\n   * Hands one batch's result to the shared state.\n   *\n   * Both loaders end here: the async one when its promise resolves, the\n   * composable one when whatever it returned becomes defined.\n   */\n  public reportBatch(\n    batchIndex: number,\n    result: ListDataLoaderResult<T>,\n  ): void {\n    this.loaderState.setDataBatch(batchIndex, result.data);\n    this.loaderState.setMetadata(result.metadata);\n\n    if (result.itemTotalCount !== undefined) {\n      this.batches.updateItemTotalCount(result.itemTotalCount);\n    }\n\n    this.loaderState.setBatchLoadingState(batchIndex, \"loaded\");\n  }\n\n  private collectStaticDataProperties(): void {\n    for (const entry of (this.shape.staticData ?? emptyData).slice(0, 100)) {\n      if (typeof entry !== \"object\" || entry === null) {\n        continue;\n      }\n      for (const property of Object.keys(entry) as PropertyName<T>[]) {\n        if (!this.staticDataProperties.includes(property)) {\n          this.staticDataProperties.push(property);\n        }\n      }\n    }\n  }\n\n  private getTableOptions(data: readonly T[]): TableOptions<T> {\n    const initialState: InitialTableState = {\n      pagination: { pageSize: this.shape.batchSize ?? 20 },\n      columnFilters: [],\n    };\n\n    for (const filter of this.filters) {\n      filter.updateInitialState(initialState);\n    }\n    this.search?.updateInitialState(initialState);\n\n    return {\n      data: data as T[],\n      state: { sorting: this.sortingState },\n      getRowId: this.shape.getItemId,\n      initialState,\n      columns: this.getColumnDefs(),\n      getCoreRowModel: getCoreRowModel(),\n      getSortedRowModel: getSortedRowModel(),\n      getFilteredRowModel: getFilteredRowModel(),\n      getPaginationRowModel: getPaginationRowModel(),\n      getFacetedUniqueValues: getFacetedUniqueValues(),\n      onSortingChange: (updater) => {\n        const next =\n          typeof updater === \"function\" ? updater(this.sortingState) : updater;\n        this.setSortingState(mergeHiddenSorting(this.sorting, next));\n      },\n      globalFilterFn: \"auto\",\n      manualPagination: this.loader.manualPagination,\n      manualFiltering: this.loader.manualFiltering,\n      manualSorting: this.loader.manualSorting,\n    } as TableOptions<T>;\n  }\n\n  private getColumnDefs(): ColumnDef<T>[] {\n    const defs = new Map<PropertyName<T>, ColumnDef<T>>();\n\n    const getOrCreate = (property: PropertyName<T>): ColumnDef<T> => {\n      const existing = defs.get(property);\n      if (existing) {\n        return existing;\n      }\n      const def: ColumnDef<T> = {\n        id: property as string,\n        accessorKey: property as string,\n        enableSorting: false,\n        enableColumnFilter: false,\n        sortingFn: \"alphanumeric\",\n      } as ColumnDef<T>;\n      defs.set(property, def);\n      return def;\n    };\n\n    this.filters.forEach((f) =>\n      f.updateTableColumnDef(getOrCreate(f.property)),\n    );\n    this.sorting.forEach((s) =>\n      s.updateTableColumnDef(getOrCreate(s.property)),\n    );\n    this.staticDataProperties.forEach((p) => getOrCreate(p));\n\n    return Array.from(defs.values());\n  }\n}\n"],"mappings":"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"}

package/dist/js/remote-vue-components/src/list/settings.mjs

@@ -0,0 +1,62 @@
+import { injectSettings } from "../components/SettingsProvider.mjs";
+//#region src/list/settings.ts
+/**
+* Which keys survive how.
+*
+* The same matrix Flow's React `ListSettingsStore` holds: only the filters have
+* a "store these" button, so only they are written to a second, manual slot.
+*/
+var supports = {
+	activeFilters: {
+		autosave: true,
+		manualSave: true
+	},
+	viewMode: {
+		autosave: true,
+		manualSave: false
+	},
+	sorting: {
+		autosave: true,
+		manualSave: false
+	},
+	search: {
+		autosave: true,
+		manualSave: false
+	}
+};
+/**
+* The list's view settings, persisted — `ListSettingsStore` in
+* packages/components, key for key: the `SettingsProvider`'s store, component
+* `"List"`, key `<storageKey>.<setting>` plus a `.autosave` sibling.
+*
+* Unvalidated, unlike React's, which parses every value with a zod schema. A
+* value that is not what it should be is dropped by the model anyway — an
+* unknown filter value is deleted, an unknown sorting simply never matches.
+*/
+var createListSettings = (store, storageKey) => {
+	const keyOf = (key, autosave = false) => `${storageKey}.${key}${autosave ? ".autosave" : ""}`;
+	const get = (key, options) => {
+		const { autosave, manualSave = !autosave } = options;
+		return (supports[key].autosave && autosave ? store.get("List", keyOf(key, options.autosave)) : void 0) ?? (supports[key].manualSave && manualSave ? store.get("List", keyOf(key, false)) : void 0);
+	};
+	const set = (key, value, options) => {
+		if (supports[key].manualSave && options.manualSave) store.set("List", keyOf(key, false), value);
+		if (supports[key].autosave && options.autosave) store.set("List", keyOf(key, true), value);
+	};
+	return {
+		get,
+		store: set
+	};
+};
+/**
+* The persistence for a list: the surrounding `SettingsProvider`'s, or none —
+* like React, a list without a provider keeps nothing.
+*/
+var useListSettings = (storageKey) => {
+	const store = injectSettings();
+	return storageKey && store ? createListSettings(store, storageKey) : void 0;
+};
+//#endregion
+export { createListSettings, useListSettings };
+
+//# sourceMappingURL=settings.mjs.map