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

package/dist/js/components-base/src/list/loading/types.mjs

@@ -0,0 +1,27 @@
+//#region ../components-base/src/list/loading/types.ts
+/**
+* The query for one batch.
+*
+* Every branch is the same question — "does the source do this itself?" — and
+* getting it wrong is silent: a source that paginates but is sent no pagination
+* returns its first page forever.
+*/
+var getListDataLoaderOptions = (source, batchIndex) => {
+	const { batchSize, modes } = source;
+	return {
+		pagination: modes.manualPagination ? {
+			limit: batchSize,
+			offset: batchSize * batchIndex
+		} : void 0,
+		sorting: modes.manualSorting ? Object.fromEntries(source.sorting.filter((s) => s.isSorted()).map((s) => [s.property, s.direction])) : void 0,
+		filtering: modes.manualFiltering ? Object.fromEntries(source.filters.filter((f) => f.getValue() !== null).map((f) => [f.property, {
+			mode: f.mode,
+			values: f.getArrayValue().map((v) => v.value)
+		}])) : void 0,
+		searchString: modes.manualFiltering ? source.searchString : void 0
+	};
+};
+//#endregion
+export { getListDataLoaderOptions };
+
+//# sourceMappingURL=types.mjs.map

package/dist/js/components-base/src/list/loading/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","names":[],"sources":["../../../../../../../components-base/src/list/loading/types.ts"],"sourcesContent":["import type { FilterMode } from \"../filter/types\";\nimport type { ListLoaderModes } from \"../pagination/types\";\nimport type { SearchValue } from \"../search/types\";\nimport type { ListSorting } from \"../sorting/ListSorting\";\nimport type { PropertyName } from \"../types\";\n\n/** One batch of list data, as a loader hands it over. */\nexport type ListData<T> = readonly T[];\n\n/**\n * How far one batch has got.\n *\n * The same four values `@mittwald/react-use-promise` uses, spelled out rather\n * than imported: that package is React's, and this one is the half both\n * bindings share.\n */\nexport type BatchLoadingState = \"void\" | \"loading\" | \"loaded\" | \"error\";\n\n/** A value per property of `T`, e.g. a direction or a filter's selection. */\nexport type ListPropertyRecord<T, TValue> = Partial<\n  Record<PropertyName<T>, TValue>\n>;\n\ninterface ListDataLoaderPaginationOptions {\n  offset: number;\n  limit: number;\n}\n\n/**\n * What a list asks its data source for.\n *\n * The consumer-facing contract of every dynamic loader, and the reason it is\n * here rather than with a binding: a Vue app and a React app write the same\n * loader function. Each field is filled only where the source said it does that\n * job itself — see `ListLoaderModes`.\n */\nexport interface ListDataLoaderOptions<T> {\n  sorting?: ListPropertyRecord<T, \"asc\" | \"desc\">;\n  filtering?: ListPropertyRecord<T, { mode: FilterMode; values: unknown[] }>;\n  searchString?: SearchValue;\n  pagination?: ListDataLoaderPaginationOptions;\n}\n\nexport interface ListDataLoaderResult<T> {\n  data: ListData<T>;\n  itemTotalCount?: number;\n  metadata?: unknown;\n}\n\nexport type ListAsyncDataLoader<T> = (\n  options: ListDataLoaderOptions<T>,\n) => Promise<ListDataLoaderResult<T>>;\n\n/** What building the loader options needs of a filter, and nothing more. */\nexport interface QueryableFilter<T> {\n  readonly property: PropertyName<T>;\n  readonly mode: FilterMode;\n  getValue(): unknown;\n  getArrayValue(): { value: unknown }[];\n}\n\nexport interface ListDataLoaderOptionsSource<T> {\n  readonly batchSize: number;\n  readonly modes: ListLoaderModes;\n  readonly sorting: ListSorting<T>[];\n  readonly filters: QueryableFilter<T>[];\n  readonly searchString: SearchValue;\n}\n\n/**\n * The query for one batch.\n *\n * Every branch is the same question — \"does the source do this itself?\" — and\n * getting it wrong is silent: a source that paginates but is sent no pagination\n * returns its first page forever.\n */\nexport const getListDataLoaderOptions = <T>(\n  source: ListDataLoaderOptionsSource<T>,\n  batchIndex: number,\n): ListDataLoaderOptions<T> => {\n  const { batchSize, modes } = source;\n\n  return {\n    pagination: modes.manualPagination\n      ? { limit: batchSize, offset: batchSize * batchIndex }\n      : undefined,\n\n    sorting: modes.manualSorting\n      ? (Object.fromEntries(\n          source.sorting\n            .filter((s) => s.isSorted())\n            .map((s) => [s.property, s.direction]),\n        ) as ListDataLoaderOptions<T>[\"sorting\"])\n      : undefined,\n\n    filtering: modes.manualFiltering\n      ? (Object.fromEntries(\n          source.filters\n            .filter((f) => f.getValue() !== null)\n            .map((f) => [\n              f.property,\n              { mode: f.mode, values: f.getArrayValue().map((v) => v.value) },\n            ]),\n        ) as ListDataLoaderOptions<T>[\"filtering\"])\n      : undefined,\n\n    searchString: modes.manualFiltering ? source.searchString : undefined,\n  };\n};\n"],"mappings":";;;;;;;;AA4EA,IAAa,4BACX,QACA,eAC6B;CAC7B,MAAM,EAAE,WAAW,UAAU;CAE7B,OAAO;EACL,YAAY,MAAM,mBACd;GAAE,OAAO;GAAW,QAAQ,YAAY;EAAW,IACnD,KAAA;EAEJ,SAAS,MAAM,gBACV,OAAO,YACN,OAAO,QACJ,QAAQ,MAAM,EAAE,SAAS,CAAC,CAAC,CAC3B,KAAK,MAAM,CAAC,EAAE,UAAU,EAAE,SAAS,CAAC,CACzC,IACA,KAAA;EAEJ,WAAW,MAAM,kBACZ,OAAO,YACN,OAAO,QACJ,QAAQ,MAAM,EAAE,SAAS,MAAM,IAAI,CAAC,CACpC,KAAK,MAAM,CACV,EAAE,UACF;GAAE,MAAM,EAAE;GAAM,QAAQ,EAAE,cAAc,CAAC,CAAC,KAAK,MAAM,EAAE,KAAK;EAAE,CAChE,CAAC,CACL,IACA,KAAA;EAEJ,cAAc,MAAM,kBAAkB,OAAO,eAAe,KAAA;CAC9D;AACF"}

package/dist/js/components-base/src/list/pagination/ListBatchesController.mjs

@@ -0,0 +1,62 @@
+//#region ../components-base/src/list/pagination/ListBatchesController.ts
+/**
+* How much of the list is shown, in batches of `batchSize`.
+*
+* Resetting on a changed filter or search is **not** wired here: the filters
+* and the search belong to the list that assembles them, and it is the list
+* that calls `reset()`. Keeping the wiring out also keeps the variance trap out
+* — a list of concrete filters is not assignable to a list of generic ones.
+*/
+var ListBatchesController = class {
+	batchSize;
+	context;
+	constructor(context, shape = {}) {
+		const { batchSize = 20 } = shape;
+		this.context = context;
+		this.batchSize = batchSize;
+	}
+	get dataTable() {
+		return this.context.dataTable;
+	}
+	getBatchIndex() {
+		return this.dataTable.getState().pagination.pageIndex;
+	}
+	hasNextBatch() {
+		if (this.context.loader.manualPagination) return this.dataTable.getCanNextPage();
+		return this.dataTable.getState().pagination.pageSize < this.getTotalItemsCount();
+	}
+	getTotalItemsCount() {
+		if (this.context.loader.manualPagination) return this.dataTable.getRowCount();
+		return this.dataTable.getFilteredRowModel().rows.length;
+	}
+	getVisibleItemsCount() {
+		return this.dataTable.getRowModel().rows.length ?? 0;
+	}
+	updateItemTotalCount(value) {
+		this.dataTable.setOptions((s) => ({
+			...s,
+			rowCount: value
+		}));
+	}
+	reset() {
+		if (this.context.loader.manualFiltering) this.updateItemTotalCount(0);
+		this.dataTable.setPagination(() => ({
+			pageIndex: 0,
+			pageSize: this.batchSize
+		}));
+	}
+	nextBatch() {
+		if (this.context.loader.manualPagination) {
+			this.dataTable.nextPage();
+			return;
+		}
+		this.dataTable.setPagination((prev) => ({
+			...prev,
+			pageSize: prev.pageSize + this.batchSize
+		}));
+	}
+};
+//#endregion
+export { ListBatchesController };
+
+//# sourceMappingURL=ListBatchesController.mjs.map

package/dist/js/components-base/src/list/pagination/ListBatchesController.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBatchesController.mjs","names":[],"sources":["../../../../../../../components-base/src/list/pagination/ListBatchesController.ts"],"sourcesContent":["import type { ListModelContext } from \"../ListModelContext\";\nimport type { ListBatchesControllerShape, ListLoaderModes } from \"./types\";\n\n/**\n * The context a batches controller needs: the table, plus who does the paging.\n *\n * Declared here rather than folded into `ListModelContext`, so a model that\n * only sorts or filters is not made to carry a loader it never asks anything.\n */\nexport interface ListPaginationContext<T> extends ListModelContext<T> {\n  readonly loader: ListLoaderModes;\n}\n\n/**\n * How much of the list is shown, in batches of `batchSize`.\n *\n * Resetting on a changed filter or search is **not** wired here: the filters\n * and the search belong to the list that assembles them, and it is the list\n * that calls `reset()`. Keeping the wiring out also keeps the variance trap out\n * — a list of concrete filters is not assignable to a list of generic ones.\n */\nexport class ListBatchesController<T> {\n  public readonly batchSize: number;\n  private readonly context: ListPaginationContext<T>;\n\n  public constructor(\n    context: ListPaginationContext<T>,\n    shape: ListBatchesControllerShape = {},\n  ) {\n    const { batchSize = 20 } = shape;\n\n    this.context = context;\n    this.batchSize = batchSize;\n  }\n\n  private get dataTable() {\n    return this.context.dataTable;\n  }\n\n  public getBatchIndex(): number {\n    return this.dataTable.getState().pagination.pageIndex;\n  }\n\n  public hasNextBatch(): boolean {\n    if (this.context.loader.manualPagination) {\n      return this.dataTable.getCanNextPage();\n    }\n    return (\n      this.dataTable.getState().pagination.pageSize < this.getTotalItemsCount()\n    );\n  }\n\n  public getTotalItemsCount(): number {\n    if (this.context.loader.manualPagination) {\n      return this.dataTable.getRowCount();\n    }\n    return this.dataTable.getFilteredRowModel().rows.length;\n  }\n\n  public getVisibleItemsCount(): number {\n    return this.dataTable.getRowModel().rows.length ?? 0;\n  }\n\n  public updateItemTotalCount(value: number): void {\n    this.dataTable.setOptions((s) => ({\n      ...s,\n      rowCount: value,\n    }));\n  }\n\n  public reset(): void {\n    if (this.context.loader.manualFiltering) {\n      this.updateItemTotalCount(0);\n    }\n    this.dataTable.setPagination(() => ({\n      pageIndex: 0,\n      pageSize: this.batchSize,\n    }));\n  }\n\n  public nextBatch(): void {\n    if (this.context.loader.manualPagination) {\n      this.dataTable.nextPage();\n      return;\n    }\n\n    this.dataTable.setPagination((prev) => ({\n      ...prev,\n      pageSize: prev.pageSize + this.batchSize,\n    }));\n  }\n}\n"],"mappings":";;;;;;;;;AAqBA,IAAa,wBAAb,MAAsC;CACpC;CACA;CAEA,YACE,SACA,QAAoC,CAAC,GACrC;EACA,MAAM,EAAE,YAAY,OAAO;EAE3B,KAAK,UAAU;EACf,KAAK,YAAY;CACnB;CAEA,IAAY,YAAY;EACtB,OAAO,KAAK,QAAQ;CACtB;CAEA,gBAA+B;EAC7B,OAAO,KAAK,UAAU,SAAS,CAAC,CAAC,WAAW;CAC9C;CAEA,eAA+B;EAC7B,IAAI,KAAK,QAAQ,OAAO,kBACtB,OAAO,KAAK,UAAU,eAAe;EAEvC,OACE,KAAK,UAAU,SAAS,CAAC,CAAC,WAAW,WAAW,KAAK,mBAAmB;CAE5E;CAEA,qBAAoC;EAClC,IAAI,KAAK,QAAQ,OAAO,kBACtB,OAAO,KAAK,UAAU,YAAY;EAEpC,OAAO,KAAK,UAAU,oBAAoB,CAAC,CAAC,KAAK;CACnD;CAEA,uBAAsC;EACpC,OAAO,KAAK,UAAU,YAAY,CAAC,CAAC,KAAK,UAAU;CACrD;CAEA,qBAA4B,OAAqB;EAC/C,KAAK,UAAU,YAAY,OAAO;GAChC,GAAG;GACH,UAAU;EACZ,EAAE;CACJ;CAEA,QAAqB;EACnB,IAAI,KAAK,QAAQ,OAAO,iBACtB,KAAK,qBAAqB,CAAC;EAE7B,KAAK,UAAU,qBAAqB;GAClC,WAAW;GACX,UAAU,KAAK;EACjB,EAAE;CACJ;CAEA,YAAyB;EACvB,IAAI,KAAK,QAAQ,OAAO,kBAAkB;GACxC,KAAK,UAAU,SAAS;GACxB;EACF;EAEA,KAAK,UAAU,eAAe,UAAU;GACtC,GAAG;GACH,UAAU,KAAK,WAAW,KAAK;EACjC,EAAE;CACJ;AACF"}

package/dist/js/components-base/src/list/search/ListSearch.mjs

@@ -0,0 +1,60 @@
+//#region ../components-base/src/list/search/ListSearch.ts
+/**
+* The list's search term: where it starts, where it is kept, who to tell.
+*
+* The term itself lives in the table's global filter — this owns the initial
+* value, the persistence and the notification, none of which is a framework's
+* business. What a binding adds on top is how the field is _rendered_.
+*/
+var ListSearch = class {
+	context;
+	onUpdateCallbacks = /* @__PURE__ */ new Set();
+	initialValue;
+	defaultValue;
+	autosave;
+	constructor(context, shape) {
+		const { autosave = context.settingsDefaults?.search?.autosave ?? false, defaultValue } = shape;
+		this.autosave = autosave;
+		this.context = context;
+		this.defaultValue = defaultValue;
+		this.initialValue = this.getInitialValue();
+	}
+	get value() {
+		return this.context.dataTable.getState().globalFilter;
+	}
+	get isSet() {
+		return this.value !== void 0;
+	}
+	callOnUpdateCallbacks() {
+		this.onUpdateCallbacks.forEach((cb) => cb());
+	}
+	getInitialValue() {
+		return this.context.settings?.get("search", { autosave: this.autosave })?.value ?? this.defaultValue;
+	}
+	updateInitialState(initialState) {
+		initialState.globalFilter = this.initialValue;
+	}
+	setValue(value) {
+		const table = this.context.dataTable;
+		if (value === void 0 || value.trim() === "") {
+			if (table.getState().globalFilter) {
+				table.setGlobalFilter(void 0);
+				this.callOnUpdateCallbacks();
+			}
+		} else {
+			table.setGlobalFilter(value);
+			this.callOnUpdateCallbacks();
+		}
+		this.context.settings?.store("search", { value }, { autosave: this.autosave });
+	}
+	clear() {
+		this.setValue(void 0);
+	}
+	onUpdated(cb) {
+		this.onUpdateCallbacks.add(cb);
+	}
+};
+//#endregion
+export { ListSearch, ListSearch as default };
+
+//# sourceMappingURL=ListSearch.mjs.map

package/dist/js/components-base/src/list/search/ListSearch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSearch.mjs","names":[],"sources":["../../../../../../../components-base/src/list/search/ListSearch.ts"],"sourcesContent":["import type { ListModelContext } from \"../ListModelContext\";\nimport type { ListSearchShape, SearchValue } from \"./types\";\nimport type { InitialTableState } from \"@tanstack/table-core\";\n\n/**\n * The list's search term: where it starts, where it is kept, who to tell.\n *\n * The term itself lives in the table's global filter — this owns the initial\n * value, the persistence and the notification, none of which is a framework's\n * business. What a binding adds on top is how the field is _rendered_.\n */\nexport class ListSearch<T> {\n  public readonly context: ListModelContext<T>;\n  private readonly onUpdateCallbacks = new Set<() => unknown>();\n  private readonly initialValue?: string;\n  private readonly defaultValue?: string;\n  private readonly autosave: boolean;\n\n  public constructor(context: ListModelContext<T>, shape: ListSearchShape) {\n    const {\n      autosave = context.settingsDefaults?.search?.autosave ?? false,\n      defaultValue,\n    } = shape;\n\n    this.autosave = autosave;\n    this.context = context;\n    this.defaultValue = defaultValue;\n    this.initialValue = this.getInitialValue();\n  }\n\n  public get value(): SearchValue {\n    return this.context.dataTable.getState().globalFilter as SearchValue;\n  }\n\n  public get isSet(): boolean {\n    return this.value !== undefined;\n  }\n\n  private callOnUpdateCallbacks(): void {\n    this.onUpdateCallbacks.forEach((cb) => cb());\n  }\n\n  private getInitialValue(): string | undefined {\n    return (\n      this.context.settings?.get(\"search\", { autosave: this.autosave })\n        ?.value ?? this.defaultValue\n    );\n  }\n\n  public updateInitialState(initialState: InitialTableState): void {\n    initialState.globalFilter = this.initialValue;\n  }\n\n  public setValue(value: SearchValue): void {\n    const table = this.context.dataTable;\n\n    if (value === undefined || value.trim() === \"\") {\n      /*\n       * Only when something was actually set: clearing an empty search would\n       * otherwise reset the loader and refetch on every keystroke that leaves\n       * the field empty.\n       */\n      if (table.getState().globalFilter) {\n        table.setGlobalFilter(undefined);\n        this.callOnUpdateCallbacks();\n      }\n    } else {\n      table.setGlobalFilter(value);\n      this.callOnUpdateCallbacks();\n    }\n\n    this.context.settings?.store(\n      \"search\",\n      { value },\n      { autosave: this.autosave },\n    );\n  }\n\n  public clear(): void {\n    this.setValue(undefined);\n  }\n\n  public onUpdated(cb: () => unknown): void {\n    this.onUpdateCallbacks.add(cb);\n  }\n}\n\nexport default ListSearch;\n"],"mappings":";;;;;;;;AAWA,IAAa,aAAb,MAA2B;CACzB;CACA,oCAAqC,IAAI,IAAmB;CAC5D;CACA;CACA;CAEA,YAAmB,SAA8B,OAAwB;EACvE,MAAM,EACJ,WAAW,QAAQ,kBAAkB,QAAQ,YAAY,OACzD,iBACE;EAEJ,KAAK,WAAW;EAChB,KAAK,UAAU;EACf,KAAK,eAAe;EACpB,KAAK,eAAe,KAAK,gBAAgB;CAC3C;CAEA,IAAW,QAAqB;EAC9B,OAAO,KAAK,QAAQ,UAAU,SAAS,CAAC,CAAC;CAC3C;CAEA,IAAW,QAAiB;EAC1B,OAAO,KAAK,UAAU,KAAA;CACxB;CAEA,wBAAsC;EACpC,KAAK,kBAAkB,SAAS,OAAO,GAAG,CAAC;CAC7C;CAEA,kBAA8C;EAC5C,OACE,KAAK,QAAQ,UAAU,IAAI,UAAU,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,EAC7D,SAAS,KAAK;CAEtB;CAEA,mBAA0B,cAAuC;EAC/D,aAAa,eAAe,KAAK;CACnC;CAEA,SAAgB,OAA0B;EACxC,MAAM,QAAQ,KAAK,QAAQ;EAE3B,IAAI,UAAU,KAAA,KAAa,MAAM,KAAK,MAAM,IAMtC;OAAA,MAAM,SAAS,CAAC,CAAC,cAAc;IACjC,MAAM,gBAAgB,KAAA,CAAS;IAC/B,KAAK,sBAAsB;GAC7B;SACK;GACL,MAAM,gBAAgB,KAAK;GAC3B,KAAK,sBAAsB;EAC7B;EAEA,KAAK,QAAQ,UAAU,MACrB,UACA,EAAE,MAAM,GACR,EAAE,UAAU,KAAK,SAAS,CAC5B;CACF;CAEA,QAAqB;EACnB,KAAK,SAAS,KAAA,CAAS;CACzB;CAEA,UAAiB,IAAyB;EACxC,KAAK,kBAAkB,IAAI,EAAE;CAC/B;AACF"}

package/dist/js/components-base/src/list/sorting/ListSorting.mjs

@@ -0,0 +1,79 @@
+import { getListColumn } from "../ListModelContext.mjs";
+//#region ../components-base/src/list/sorting/ListSorting.ts
+/**
+* One way a list can be sorted — a property, a direction, and whether it is on.
+*
+* Framework-free: the state lives in the TanStack table and the preference in
+* the settings store, and this only translates between them. Which is why it
+* could move here whole, unlike the loader, which had to leave its fetching
+* behind.
+*/
+var ListSorting = class {
+	context;
+	property;
+	name;
+	directionName;
+	direction;
+	initialEnabled;
+	customSortingFn;
+	autosave;
+	constructor(context, shape) {
+		const { property, name, directionName, direction = "asc", customSortingFn, autosave = context.settingsDefaults?.sorting?.autosave ?? true } = shape;
+		this.autosave = autosave;
+		this.context = context;
+		this.property = property;
+		this.name = name;
+		this.directionName = directionName;
+		this.direction = direction;
+		this.customSortingFn = customSortingFn;
+		this.initialEnabled = this.getInitialEnabled(shape);
+	}
+	getInitialEnabled(shape) {
+		if (shape.defaultEnabled === "hidden") return "hidden";
+		const storedSorting = this.context.settings?.get("sorting", { autosave: this.autosave });
+		return (storedSorting ? storedSorting.property === this.property && storedSorting.direction === this.direction : void 0) ?? shape.defaultEnabled ?? false;
+	}
+	updateTableColumnDef(def) {
+		def.enableSorting = true;
+		if (this.customSortingFn) def.sortingFn = this.customSortingFn;
+	}
+	getReactTableColumnSort() {
+		return {
+			id: this.property,
+			desc: this.direction === "desc"
+		};
+	}
+	isSorted() {
+		return this.getTableColumn().getIsSorted() == this.direction;
+	}
+	getTableColumn() {
+		return getListColumn(this.context.dataTable, this.property);
+	}
+	enable() {
+		this.getTableColumn().toggleSorting(this.direction === "desc", false);
+		this.context.settings?.store("sorting", {
+			property: this.property,
+			direction: this.direction
+		}, { autosave: this.autosave });
+	}
+	clear() {
+		this.getTableColumn().clearSorting();
+	}
+	get id() {
+		return `${this.getTableColumn().id}:${this.direction}`;
+	}
+};
+/**
+* The next sorting state, with every hidden sorting still in it.
+*
+* A hidden sorting is not a user choice — it is how the list is ordered when
+* nothing else says otherwise, so a click on a visible sorting must not drop
+* it. The table's own updater knows nothing about that distinction.
+*/
+var mergeHiddenSorting = (sortings, next) => {
+	return [...sortings.filter((s) => s.initialEnabled === "hidden" && !next.some((existing) => existing.id === s.property)).map((s) => s.getReactTableColumnSort()), ...next];
+};
+//#endregion
+export { ListSorting, ListSorting as default, mergeHiddenSorting };
+
+//# sourceMappingURL=ListSorting.mjs.map

package/dist/js/components-base/src/list/sorting/ListSorting.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSorting.mjs","names":[],"sources":["../../../../../../../components-base/src/list/sorting/ListSorting.ts"],"sourcesContent":["import { getListColumn, type ListModelContext } from \"../ListModelContext\";\nimport type { PropertyName } from \"../types\";\nimport type { ListSortingShape, SortingDefaultMode, SortingFn } from \"./types\";\nimport type {\n  Column,\n  ColumnDef,\n  ColumnSort,\n  SortDirection,\n} from \"@tanstack/table-core\";\n\n/**\n * One way a list can be sorted — a property, a direction, and whether it is on.\n *\n * Framework-free: the state lives in the TanStack table and the preference in\n * the settings store, and this only translates between them. Which is why it\n * could move here whole, unlike the loader, which had to leave its fetching\n * behind.\n */\nexport class ListSorting<T> {\n  public readonly context: ListModelContext<T>;\n  public readonly property: PropertyName<T>;\n  public readonly name?: string;\n  public readonly directionName?: string;\n  public readonly direction: SortDirection;\n  public readonly initialEnabled: SortingDefaultMode;\n  public readonly customSortingFn?: SortingFn<T>;\n  public readonly autosave: boolean;\n\n  public constructor(context: ListModelContext<T>, shape: ListSortingShape<T>) {\n    const {\n      property,\n      name,\n      directionName,\n      direction = \"asc\",\n      customSortingFn,\n      autosave = context.settingsDefaults?.sorting?.autosave ?? true,\n    } = shape;\n\n    this.autosave = autosave;\n    this.context = context;\n    this.property = property;\n    this.name = name;\n    this.directionName = directionName;\n    this.direction = direction;\n    this.customSortingFn = customSortingFn;\n    this.initialEnabled = this.getInitialEnabled(shape);\n  }\n\n  private getInitialEnabled(shape: ListSortingShape<T>): SortingDefaultMode {\n    if (shape.defaultEnabled === \"hidden\") {\n      return \"hidden\";\n    }\n\n    const storedSorting = this.context.settings?.get(\"sorting\", {\n      autosave: this.autosave,\n    });\n\n    const storedEnabled = storedSorting\n      ? storedSorting.property === this.property &&\n        storedSorting.direction === this.direction\n      : undefined;\n\n    return storedEnabled ?? shape.defaultEnabled ?? false;\n  }\n\n  public updateTableColumnDef(def: ColumnDef<T>): void {\n    def.enableSorting = true;\n    if (this.customSortingFn) {\n      def.sortingFn = this.customSortingFn;\n    }\n  }\n\n  public getReactTableColumnSort(): ColumnSort {\n    return {\n      id: this.property as string,\n      desc: this.direction === \"desc\",\n    };\n  }\n\n  public isSorted(): boolean {\n    return this.getTableColumn().getIsSorted() == this.direction;\n  }\n\n  public getTableColumn(): Column<T> {\n    return getListColumn(this.context.dataTable, this.property);\n  }\n\n  public enable(): void {\n    this.getTableColumn().toggleSorting(this.direction === \"desc\", false);\n\n    this.context.settings?.store(\n      \"sorting\",\n      {\n        property: this.property as string,\n        direction: this.direction,\n      },\n      {\n        autosave: this.autosave,\n      },\n    );\n  }\n\n  public clear(): void {\n    this.getTableColumn().clearSorting();\n  }\n\n  public get id(): string {\n    return `${this.getTableColumn().id}:${this.direction}`;\n  }\n}\n\nexport default ListSorting;\n\n/**\n * The next sorting state, with every hidden sorting still in it.\n *\n * A hidden sorting is not a user choice — it is how the list is ordered when\n * nothing else says otherwise, so a click on a visible sorting must not drop\n * it. The table's own updater knows nothing about that distinction.\n */\nexport const mergeHiddenSorting = <T>(\n  sortings: ListSorting<T>[],\n  next: ColumnSort[],\n): ColumnSort[] => {\n  const hidden = sortings\n    .filter(\n      (s) =>\n        s.initialEnabled === \"hidden\" &&\n        !next.some((existing) => existing.id === s.property),\n    )\n    .map((s) => s.getReactTableColumnSort());\n\n  return [...hidden, ...next];\n};\n"],"mappings":";;;;;;;;;;AAkBA,IAAa,cAAb,MAA4B;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,YAAmB,SAA8B,OAA4B;EAC3E,MAAM,EACJ,UACA,MACA,eACA,YAAY,OACZ,iBACA,WAAW,QAAQ,kBAAkB,SAAS,YAAY,SACxD;EAEJ,KAAK,WAAW;EAChB,KAAK,UAAU;EACf,KAAK,WAAW;EAChB,KAAK,OAAO;EACZ,KAAK,gBAAgB;EACrB,KAAK,YAAY;EACjB,KAAK,kBAAkB;EACvB,KAAK,iBAAiB,KAAK,kBAAkB,KAAK;CACpD;CAEA,kBAA0B,OAAgD;EACxE,IAAI,MAAM,mBAAmB,UAC3B,OAAO;EAGT,MAAM,gBAAgB,KAAK,QAAQ,UAAU,IAAI,WAAW,EAC1D,UAAU,KAAK,SACjB,CAAC;EAOD,QALsB,gBAClB,cAAc,aAAa,KAAK,YAChC,cAAc,cAAc,KAAK,YACjC,KAAA,MAEoB,MAAM,kBAAkB;CAClD;CAEA,qBAA4B,KAAyB;EACnD,IAAI,gBAAgB;EACpB,IAAI,KAAK,iBACP,IAAI,YAAY,KAAK;CAEzB;CAEA,0BAA6C;EAC3C,OAAO;GACL,IAAI,KAAK;GACT,MAAM,KAAK,cAAc;EAC3B;CACF;CAEA,WAA2B;EACzB,OAAO,KAAK,eAAe,CAAC,CAAC,YAAY,KAAK,KAAK;CACrD;CAEA,iBAAmC;EACjC,OAAO,cAAc,KAAK,QAAQ,WAAW,KAAK,QAAQ;CAC5D;CAEA,SAAsB;EACpB,KAAK,eAAe,CAAC,CAAC,cAAc,KAAK,cAAc,QAAQ,KAAK;EAEpE,KAAK,QAAQ,UAAU,MACrB,WACA;GACE,UAAU,KAAK;GACf,WAAW,KAAK;EAClB,GACA,EACE,UAAU,KAAK,SACjB,CACF;CACF;CAEA,QAAqB;EACnB,KAAK,eAAe,CAAC,CAAC,aAAa;CACrC;CAEA,IAAW,KAAa;EACtB,OAAO,GAAG,KAAK,eAAe,CAAC,CAAC,GAAG,GAAG,KAAK;CAC7C;AACF;;;;;;;;AAWA,IAAa,sBACX,UACA,SACiB;CASjB,OAAO,CAAC,GARO,SACZ,QACE,MACC,EAAE,mBAAmB,YACrB,CAAC,KAAK,MAAM,aAAa,SAAS,OAAO,EAAE,QAAQ,CACvD,CAAC,CACA,KAAK,MAAM,EAAE,wBAAwB,CAE7B,GAAQ,GAAG,IAAI;AAC5B"}

package/dist/js/components-base/src/list/table/ListTable.mjs

@@ -0,0 +1,78 @@
+import { action, makeObservable, observable } from "mobx";
+import { createTable } from "@tanstack/table-core";
+//#region ../components-base/src/list/table/ListTable.ts
+/**
+* A TanStack table whose state is MobX.
+*
+* `useReactTable` is `createTable` plus a `useState` for the table's own state
+* and a `setOptions` on every render that folds that state back in. Only the
+* `useState` is React, and `@tanstack/vue-table` reimplements the same twenty
+* lines against Vue's reactivity — so the state lives here instead and each
+* binding brings its subscription.
+*
+* Options still arrive from the binding on every render, because that is where
+* they come from: the loaded data, the column definitions the list's filters
+* and sortings produce, a controlled piece of state. `setOptions` is therefore
+* called by the binding, and re-applied here whenever the state changes.
+*/
+var ListTable = class {
+	table;
+	state;
+	/**
+	* Bumped whenever the state _or_ the options changed.
+	*
+	* The row models are derived from both, and the options are plain data that
+	* arrives from the binding — so a binding observing only `state` keeps
+	* rendering the previous rows after new data was handed in. It is the one
+	* signal that says "ask the table again".
+	*/
+	revision = 0;
+	options;
+	constructor(options) {
+		const resolved = {
+			state: {},
+			onStateChange: () => {},
+			renderFallbackValue: null,
+			...options
+		};
+		this.table = createTable(resolved);
+		this.state = this.table.initialState;
+		this.options = options;
+		makeObservable(this, {
+			state: observable.ref,
+			revision: observable,
+			setState: action.bound,
+			setOptions: action.bound
+		});
+		this.applyOptions();
+	}
+	setState(updater) {
+		this.state = typeof updater === "function" ? updater(this.state) : updater;
+		this.applyOptions();
+	}
+	/** Called by the binding on every render, with that render's options. */
+	setOptions(options) {
+		this.options = options;
+		this.applyOptions();
+	}
+	applyOptions() {
+		const options = this.options;
+		this.revision += 1;
+		this.table.setOptions((prev) => ({
+			...prev,
+			...options,
+			state: {
+				...this.state,
+				...options.state
+			},
+			onStateChange: (updater) => {
+				this.setState(updater);
+				options.onStateChange?.(updater);
+			}
+		}));
+	}
+};
+//#endregion
+export { ListTable };
+
+//# sourceMappingURL=ListTable.mjs.map

package/dist/js/components-base/src/list/table/ListTable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListTable.mjs","names":[],"sources":["../../../../../../../components-base/src/list/table/ListTable.ts"],"sourcesContent":["import { action, makeObservable, observable } from \"mobx\";\nimport { createTable } from \"@tanstack/table-core\";\nimport type {\n  RowData,\n  Table,\n  TableOptions,\n  TableOptionsResolved,\n  TableState,\n  Updater,\n} from \"@tanstack/table-core\";\n\n/**\n * A TanStack table whose state is MobX.\n *\n * `useReactTable` is `createTable` plus a `useState` for the table's own state\n * and a `setOptions` on every render that folds that state back in. Only the\n * `useState` is React, and `@tanstack/vue-table` reimplements the same twenty\n * lines against Vue's reactivity — so the state lives here instead and each\n * binding brings its subscription.\n *\n * Options still arrive from the binding on every render, because that is where\n * they come from: the loaded data, the column definitions the list's filters\n * and sortings produce, a controlled piece of state. `setOptions` is therefore\n * called by the binding, and re-applied here whenever the state changes.\n */\nexport class ListTable<T extends RowData> {\n  public readonly table: Table<T>;\n  public state: TableState;\n  /**\n   * Bumped whenever the state _or_ the options changed.\n   *\n   * The row models are derived from both, and the options are plain data that\n   * arrives from the binding — so a binding observing only `state` keeps\n   * rendering the previous rows after new data was handed in. It is the one\n   * signal that says \"ask the table again\".\n   */\n  public revision = 0;\n  private options: TableOptions<T>;\n\n  public constructor(options: TableOptions<T>) {\n    const resolved: TableOptionsResolved<T> = {\n      state: {},\n      onStateChange: () => {\n        // replaced by `applyOptions` below\n      },\n      renderFallbackValue: null,\n      ...options,\n    };\n\n    this.table = createTable<T>(resolved);\n    this.state = this.table.initialState;\n    this.options = options;\n\n    makeObservable(this, {\n      state: observable.ref,\n      revision: observable,\n      setState: action.bound,\n      setOptions: action.bound,\n    });\n\n    this.applyOptions();\n  }\n\n  public setState(updater: Updater<TableState>): void {\n    this.state = typeof updater === \"function\" ? updater(this.state) : updater;\n    this.applyOptions();\n  }\n\n  /** Called by the binding on every render, with that render's options. */\n  public setOptions(options: TableOptions<T>): void {\n    this.options = options;\n    this.applyOptions();\n  }\n\n  private applyOptions(): void {\n    const options = this.options;\n    this.revision += 1;\n\n    this.table.setOptions((prev) => ({\n      ...prev,\n      ...options,\n      state: {\n        ...this.state,\n        ...options.state,\n      },\n      onStateChange: (updater) => {\n        this.setState(updater);\n        options.onStateChange?.(updater);\n      },\n    }));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,IAAa,YAAb,MAA0C;CACxC;CACA;;;;;;;;;CASA,WAAkB;CAClB;CAEA,YAAmB,SAA0B;EAC3C,MAAM,WAAoC;GACxC,OAAO,CAAC;GACR,qBAAqB,CAErB;GACA,qBAAqB;GACrB,GAAG;EACL;EAEA,KAAK,QAAQ,YAAe,QAAQ;EACpC,KAAK,QAAQ,KAAK,MAAM;EACxB,KAAK,UAAU;EAEf,eAAe,MAAM;GACnB,OAAO,WAAW;GAClB,UAAU;GACV,UAAU,OAAO;GACjB,YAAY,OAAO;EACrB,CAAC;EAED,KAAK,aAAa;CACpB;CAEA,SAAgB,SAAoC;EAClD,KAAK,QAAQ,OAAO,YAAY,aAAa,QAAQ,KAAK,KAAK,IAAI;EACnE,KAAK,aAAa;CACpB;;CAGA,WAAkB,SAAgC;EAChD,KAAK,UAAU;EACf,KAAK,aAAa;CACpB;CAEA,eAA6B;EAC3B,MAAM,UAAU,KAAK;EACrB,KAAK,YAAY;EAEjB,KAAK,MAAM,YAAY,UAAU;GAC/B,GAAG;GACH,GAAG;GACH,OAAO;IACL,GAAG,KAAK;IACR,GAAG,QAAQ;GACb;GACA,gBAAgB,YAAY;IAC1B,KAAK,SAAS,OAAO;IACrB,QAAQ,gBAAgB,OAAO;GACjC;EACF,EAAE;CACJ;AACF"}

package/dist/js/components-base/src/list/viewMode/ListViewMode.mjs

@@ -0,0 +1,51 @@
+import { action, makeObservable, observable } from "mobx";
+//#region ../components-base/src/list/viewMode/ListViewMode.ts
+/**
+* Which layout the list is in, and its persistence.
+*
+* The value is a MobX observable rather than a binding's own state, so that the
+* rule it obeys — a stored mode wins over the default, and a change is written
+* back — is one implementation. A binding brings the subscription:
+* `useSelector` in React, `watchMobxValue` in Vue.
+*/
+var ListViewMode = class {
+	value;
+	storage;
+	constructor(options = {}) {
+		const { defaultValue, ...storage } = options;
+		this.storage = storage;
+		this.value = this.storage.settings?.get("viewMode", { autosave: this.autosave }) ?? defaultValue ?? "list";
+		makeObservable(this, {
+			value: observable,
+			set: action.bound
+		});
+	}
+	get autosave() {
+		return this.storage.autosave ?? true;
+	}
+	/**
+	* Where a change is written, for a binding whose list can change it without a
+	* new model — React rebuilds the list every render, the view mode lives on.
+	* The value itself is read only once, at construction.
+	*/
+	updateStorage(storage) {
+		this.storage = storage;
+	}
+	get isTiles() {
+		return this.value === "tiles";
+	}
+	get isTable() {
+		return this.value === "table";
+	}
+	get isList() {
+		return this.value === "list";
+	}
+	set(viewMode) {
+		this.value = viewMode;
+		this.storage.settings?.store("viewMode", viewMode, { autosave: this.autosave });
+	}
+};
+//#endregion
+export { ListViewMode };
+
+//# sourceMappingURL=ListViewMode.mjs.map

package/dist/js/components-base/src/list/viewMode/ListViewMode.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListViewMode.mjs","names":[],"sources":["../../../../../../../components-base/src/list/viewMode/ListViewMode.ts"],"sourcesContent":["import { action, makeObservable, observable } from \"mobx\";\nimport type { ListViewModeOptions, ListViewModeValue } from \"./types\";\n\n/**\n * Which layout the list is in, and its persistence.\n *\n * The value is a MobX observable rather than a binding's own state, so that the\n * rule it obeys — a stored mode wins over the default, and a change is written\n * back — is one implementation. A binding brings the subscription:\n * `useSelector` in React, `watchMobxValue` in Vue.\n */\nexport class ListViewMode {\n  public value: ListViewModeValue;\n  private storage: Pick<ListViewModeOptions, \"autosave\" | \"settings\">;\n\n  public constructor(options: ListViewModeOptions = {}) {\n    const { defaultValue, ...storage } = options;\n\n    this.storage = storage;\n    this.value =\n      this.storage.settings?.get(\"viewMode\", { autosave: this.autosave }) ??\n      defaultValue ??\n      \"list\";\n\n    makeObservable(this, {\n      value: observable,\n      set: action.bound,\n    });\n  }\n\n  public get autosave(): boolean {\n    return this.storage.autosave ?? true;\n  }\n\n  /**\n   * Where a change is written, for a binding whose list can change it without a\n   * new model — React rebuilds the list every render, the view mode lives on.\n   * The value itself is read only once, at construction.\n   */\n  public updateStorage(\n    storage: Pick<ListViewModeOptions, \"autosave\" | \"settings\">,\n  ): void {\n    this.storage = storage;\n  }\n\n  public get isTiles(): boolean {\n    return this.value === \"tiles\";\n  }\n\n  public get isTable(): boolean {\n    return this.value === \"table\";\n  }\n\n  public get isList(): boolean {\n    return this.value === \"list\";\n  }\n\n  public set(viewMode: ListViewModeValue): void {\n    this.value = viewMode;\n    this.storage.settings?.store(\"viewMode\", viewMode, {\n      autosave: this.autosave,\n    });\n  }\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAa,eAAb,MAA0B;CACxB;CACA;CAEA,YAAmB,UAA+B,CAAC,GAAG;EACpD,MAAM,EAAE,cAAc,GAAG,YAAY;EAErC,KAAK,UAAU;EACf,KAAK,QACH,KAAK,QAAQ,UAAU,IAAI,YAAY,EAAE,UAAU,KAAK,SAAS,CAAC,KAClE,gBACA;EAEF,eAAe,MAAM;GACnB,OAAO;GACP,KAAK,OAAO;EACd,CAAC;CACH;CAEA,IAAW,WAAoB;EAC7B,OAAO,KAAK,QAAQ,YAAY;CAClC;;;;;;CAOA,cACE,SACM;EACN,KAAK,UAAU;CACjB;CAEA,IAAW,UAAmB;EAC5B,OAAO,KAAK,UAAU;CACxB;CAEA,IAAW,UAAmB;EAC5B,OAAO,KAAK,UAAU;CACxB;CAEA,IAAW,SAAkB;EAC3B,OAAO,KAAK,UAAU;CACxB;CAEA,IAAW,UAAmC;EAC5C,KAAK,QAAQ;EACb,KAAK,QAAQ,UAAU,MAAM,YAAY,UAAU,EACjD,UAAU,KAAK,SACjB,CAAC;CACH;AACF"}