nuxt-ui-tools 1.0.1 → 1.2.0

package/dist/runtime/table/composables/use-table-filter-selected-options.js

@@ -0,0 +1,99 @@
+import { useQuery, useQueryClient } from "@tanstack/vue-query";
+import { computed, shallowRef, watch } from "vue";
+import { isBoolean, isNullish, isNumber, isString } from "../../shared/utils/predicate.js";
+import { QUERY_DEFAULTS } from "../constants/query-state.js";
+export function useTableFilterSelectedOptions(params) {
+  const queryClient = useQueryClient();
+  const known = shallowRef(/* @__PURE__ */ new Map());
+  const remoteDefinitions = computed(
+    () => params.definitions.value.flatMap((definition) => {
+      const remote = definition.kind === "option" ? definition.source?.remote : void 0;
+      return remote ? [{ key: definition.key, remote }] : [];
+    })
+  );
+  function selectedValues(key) {
+    const rule = params.rules.value.find((entry) => entry.key === key);
+    const values = Array.isArray(rule?.value) ? rule.value : isNullish(rule?.value) ? [] : [rule.value];
+    return values.filter(isPrimitiveValue);
+  }
+  const requests = computed(
+    () => remoteDefinitions.value.flatMap(({ key, remote }) => {
+      const cached = known.value.get(key);
+      const missing = selectedValues(key).filter((value) => !cached?.has(String(value)));
+      const query = missing.length ? resolveSelectedQuery(remote, missing) : void 0;
+      return query ? [{ key, query }] : [];
+    })
+  );
+  const hydration = useQuery(
+    computed(() => {
+      const snapshot = requests.value;
+      return {
+        enabled: snapshot.length > 0,
+        queryFn: () => Promise.all(
+          snapshot.map(async ({ key, query }) => ({
+            key,
+            options: await queryClient.fetchQuery({
+              queryFn: (context) => {
+                if (!query.queryFn) {
+                  throw new Error(
+                    "resolveSelected must return a query definition with a queryFn."
+                  );
+                }
+                return query.queryFn({ ...context, direction: "forward", pageParam: null });
+              },
+              queryKey: query.queryKey,
+              staleTime: QUERY_DEFAULTS.staleTime.filterOptions
+            })
+          }))
+        ),
+        queryKey: [
+          "table-filter-selected-options",
+          snapshot.map(({ key, query }) => [key, query.queryKey])
+        ],
+        refetchOnWindowFocus: QUERY_DEFAULTS.refetchOnWindowFocus,
+        staleTime: QUERY_DEFAULTS.staleTime.filterOptions
+      };
+    })
+  );
+  watch(
+    () => hydration.data.value,
+    (results) => {
+      for (const result of results ?? []) remember(result.key, result.options);
+    }
+  );
+  function remember(key, options) {
+    const entries = flattenValueEntries(options);
+    if (!entries.length) return;
+    const current = known.value.get(key);
+    if (entries.every((entry) => current?.get(String(entry.value))?.label === entry.label)) return;
+    const next = new Map(current);
+    for (const entry of entries) next.set(String(entry.value), entry);
+    known.value = new Map(known.value).set(key, next);
+  }
+  function getSelectedOptions(key) {
+    const cached = known.value.get(key);
+    if (!cached) return [];
+    return selectedValues(key).flatMap((value) => {
+      const entry = cached.get(String(value));
+      return entry ? [entry] : [];
+    });
+  }
+  return {
+    getSelectedOptions,
+    /** Options of committed values are resolving for this filter. */
+    isResolving: (key) => hydration.isFetching.value && requests.value.some((request) => request.key === key),
+    remember
+  };
+}
+function resolveSelectedQuery(remote, values) {
+  return remote.resolveSelected?.({ values });
+}
+function flattenValueEntries(options) {
+  return options.flatMap((option) => [
+    ...isNullish(option.value) ? [] : [{ ...option, value: option.value }],
+    ...flattenValueEntries(option.children ?? [])
+  ]);
+}
+function isPrimitiveValue(value) {
+  return isString(value) || isNumber(value) || isBoolean(value);
+}

package/dist/runtime/table/composables/use-table-filters.d.ts

@@ -71,6 +71,11 @@ export declare function useTableFilters(params: UseTableFiltersParams): {
     }) => void;
     searchPlaceholder: ComputedRef<string>;
     searchQuery: import("vue").WritableComputedRef<string, string>;
+    selectedOptions: {
+        getSelectedOptions: (key: string) => import("../types/index.js").TableFilterOptionValueEntry[];
+        isResolving: (key: string) => boolean;
+        remember: (key: string, options: readonly TableFilterOptionEntry[]) => void;
+    };
     setFilterOperator: (input: {
         key: string;
         operator: TableFilterOperator;

package/dist/runtime/table/composables/use-table-filters.js

@@ -11,6 +11,7 @@ import {
   resolveTableFilterDefaultRules,
   resolveFilterOptionEntries
 } from "../utils/index.js";
+import { useTableFilterSelectedOptions } from "./use-table-filter-selected-options.js";
 import { useTableSearch } from "./use-table-search.js";
 export function useTableFilters(params) {
   const { t } = useUiToolsLocale();
@@ -34,6 +35,10 @@ export function useTableFilters(params) {
     })
   );
   const hasActiveUiFilters = computed(() => activeUiFilters.value.length > 0);
+  const selectedOptions = useTableFilterSelectedOptions({
+    definitions,
+    rules: effectiveUiFilters
+  });
   function getDefinition(input) {
     return definitions.value.find(
       (definition) => definition.key === input.key
@@ -87,7 +92,7 @@ export function useTableFilters(params) {
     }
     const preview = buildFilterPreview({
       definition,
-      optionEntries: input.entries,
+      optionEntries: withSelectedOptions(input.key, input.entries),
       rule: getFilterState({ key: input.key })
     });
     const rule = getFilterState({ key: input.key });
@@ -98,6 +103,19 @@ export function useTableFilters(params) {
       dirty: !isNullish(getActiveFilterState({ key: input.key }))
     };
   }
+  function withSelectedOptions(key, entries = []) {
+    const listed = new Set(entries.map((entry) => String(entry.value)));
+    const missing = selectedOptions.getSelectedOptions(key).filter((entry) => !listed.has(String(entry.value)));
+    return missing.length ? [
+      ...entries,
+      ...missing.map((entry) => ({
+        color: entry.color,
+        icon: entry.icon,
+        label: getFilterLabelText({ label: entry.label }),
+        value: entry.value
+      }))
+    ] : entries;
+  }
   function getFilterOperator(input) {
     const definition = getDefinition({ key: input.key });
     const rule = getFilterState({ key: input.key });
@@ -253,6 +271,7 @@ export function useTableFilters(params) {
     replaceFilters,
     searchPlaceholder: search.searchPlaceholder,
     searchQuery: search.searchQuery,
+    selectedOptions,
     setFilterOperator,
     setOptionFilterValues,
     setScalarFilterValue,

package/dist/runtime/table/composables/use-table-internals.d.ts

@@ -191,6 +191,11 @@ declare function createTableInternals<TSchema>(options: {
         }) => void;
         searchPlaceholder: import("vue").ComputedRef<string>;
         searchQuery: import("vue").WritableComputedRef<string, string>;
+        selectedOptions: {
+            getSelectedOptions: (key: string) => import("../types/index.js").TableFilterOptionValueEntry[];
+            isResolving: (key: string) => boolean;
+            remember: (key: string, options: readonly import("../types/index.js").TableFilterOptionEntry[]) => void;
+        };
         setFilterOperator: (input: {
             key: string;
             operator: import("../types/index.js").TableFilterOperator;
@@ -240,7 +245,7 @@ declare function createTableInternals<TSchema>(options: {
         loadMore: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
         loadMoreError: import("vue").ComputedRef<unknown>;
         loadedCount: import("vue").ComputedRef<number>;
-        mode: import("vue").ComputedRef<"none" | "offset" | "cursor">;
+        mode: import("vue").ComputedRef<"cursor" | "none" | "offset">;
         next: () => void;
         noneState: import("vue").ComputedRef<{
             loadedCount: number;
@@ -270,7 +275,7 @@ declare function createTableInternals<TSchema>(options: {
             isLoadingMore: boolean;
             loadMoreError: unknown;
             loadedCount: number;
-            mode: "none" | "offset" | "cursor";
+            mode: "cursor" | "none" | "offset";
             pageCount: number;
             pageIndex: number;
             pageSize: number;
@@ -294,7 +299,7 @@ declare function createTableInternals<TSchema>(options: {
             readonly pageSize?: undefined;
             readonly pageIndex?: undefined;
         } | {
-            readonly count: "exact" | "none";
+            readonly count: "none" | "exact";
             readonly cursor: null;
             readonly mode: "cursor";
             readonly pageSize: number;
@@ -306,7 +311,7 @@ declare function createTableInternals<TSchema>(options: {
             readonly pageSize: number;
             readonly cursor?: undefined;
         }>;
-        paginationMode: "none" | "offset" | "cursor";
+        paginationMode: "cursor" | "none" | "offset";
         paginationRevision: import("vue").Ref<number, number>;
         resetPagination: () => void;
         setOffsetPagination: (value: {
@@ -314,7 +319,7 @@ declare function createTableInternals<TSchema>(options: {
             pageSize: number;
         }) => void;
         sorting: import("vue").WritableComputedRef<{
-            dir: "desc" | "asc";
+            dir: "asc" | "desc";
             key: string;
         } | null, {
             key: string;
@@ -325,7 +330,7 @@ declare function createTableInternals<TSchema>(options: {
     schema: import("vue").ComputedRef<TableSchemaView>;
     selection: {
         allSelected: import("vue").ComputedRef<boolean>;
-        bulkScope: import("vue").Ref<"selection" | "all", "selection" | "all">;
+        bulkScope: import("vue").Ref<"all" | "selection", "all" | "selection">;
         clearSelection: () => void;
         getRowId: (params: {
             row: import("../types/index.js").GenericObject;
@@ -394,10 +399,10 @@ declare function createTableInternals<TSchema>(options: {
         }) => import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[][];
         getPinnedState: (options: {
             columnId: string;
-        }) => "right" | "left" | null;
+        }) => "left" | "right" | null;
         getSortState: (options: {
             columnId: string;
-        }) => "desc" | "asc" | null;
+        }) => "asc" | "desc" | null;
         orderedColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
         reset: () => void;
         runtimeColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
@@ -421,7 +426,7 @@ declare function createTableInternals<TSchema>(options: {
         sortKeys: import("vue").ComputedRef<string[]>;
         sortingState: import("vue").ComputedRef<{
             active: boolean;
-            dir: "desc" | "asc" | undefined;
+            dir: "asc" | "desc" | undefined;
             key: string | undefined;
         }>;
         tableColumns: import("vue").ComputedRef<({
@@ -782,6 +787,11 @@ declare function useProvideTableInternals<TSchema>(options: {
         }) => void;
         searchPlaceholder: import("vue").ComputedRef<string>;
         searchQuery: import("vue").WritableComputedRef<string, string>;
+        selectedOptions: {
+            getSelectedOptions: (key: string) => import("../types/index.js").TableFilterOptionValueEntry[];
+            isResolving: (key: string) => boolean;
+            remember: (key: string, options: readonly import("../types/index.js").TableFilterOptionEntry[]) => void;
+        };
         setFilterOperator: (input: {
             key: string;
             operator: import("../types/index.js").TableFilterOperator;
@@ -831,7 +841,7 @@ declare function useProvideTableInternals<TSchema>(options: {
         loadMore: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
         loadMoreError: import("vue").ComputedRef<unknown>;
         loadedCount: import("vue").ComputedRef<number>;
-        mode: import("vue").ComputedRef<"none" | "offset" | "cursor">;
+        mode: import("vue").ComputedRef<"cursor" | "none" | "offset">;
         next: () => void;
         noneState: import("vue").ComputedRef<{
             loadedCount: number;
@@ -861,7 +871,7 @@ declare function useProvideTableInternals<TSchema>(options: {
             isLoadingMore: boolean;
             loadMoreError: unknown;
             loadedCount: number;
-            mode: "none" | "offset" | "cursor";
+            mode: "cursor" | "none" | "offset";
             pageCount: number;
             pageIndex: number;
             pageSize: number;
@@ -885,7 +895,7 @@ declare function useProvideTableInternals<TSchema>(options: {
             readonly pageSize?: undefined;
             readonly pageIndex?: undefined;
         } | {
-            readonly count: "exact" | "none";
+            readonly count: "none" | "exact";
             readonly cursor: null;
             readonly mode: "cursor";
             readonly pageSize: number;
@@ -897,7 +907,7 @@ declare function useProvideTableInternals<TSchema>(options: {
             readonly pageSize: number;
             readonly cursor?: undefined;
         }>;
-        paginationMode: "none" | "offset" | "cursor";
+        paginationMode: "cursor" | "none" | "offset";
         paginationRevision: import("vue").Ref<number, number>;
         resetPagination: () => void;
         setOffsetPagination: (value: {
@@ -905,7 +915,7 @@ declare function useProvideTableInternals<TSchema>(options: {
             pageSize: number;
         }) => void;
         sorting: import("vue").WritableComputedRef<{
-            dir: "desc" | "asc";
+            dir: "asc" | "desc";
             key: string;
         } | null, {
             key: string;
@@ -916,7 +926,7 @@ declare function useProvideTableInternals<TSchema>(options: {
     schema: import("vue").ComputedRef<TableSchemaView>;
     selection: {
         allSelected: import("vue").ComputedRef<boolean>;
-        bulkScope: import("vue").Ref<"selection" | "all", "selection" | "all">;
+        bulkScope: import("vue").Ref<"all" | "selection", "all" | "selection">;
         clearSelection: () => void;
         getRowId: (params: {
             row: import("../types/index.js").GenericObject;
@@ -985,10 +995,10 @@ declare function useProvideTableInternals<TSchema>(options: {
         }) => import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[][];
         getPinnedState: (options: {
             columnId: string;
-        }) => "right" | "left" | null;
+        }) => "left" | "right" | null;
         getSortState: (options: {
             columnId: string;
-        }) => "desc" | "asc" | null;
+        }) => "asc" | "desc" | null;
         orderedColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
         reset: () => void;
         runtimeColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
@@ -1012,7 +1022,7 @@ declare function useProvideTableInternals<TSchema>(options: {
         sortKeys: import("vue").ComputedRef<string[]>;
         sortingState: import("vue").ComputedRef<{
             active: boolean;
-            dir: "desc" | "asc" | undefined;
+            dir: "asc" | "desc" | undefined;
             key: string | undefined;
         }>;
         tableColumns: import("vue").ComputedRef<({
@@ -1370,6 +1380,11 @@ declare function useTableInternals(): {
         }) => void;
         searchPlaceholder: import("vue").ComputedRef<string>;
         searchQuery: import("vue").WritableComputedRef<string, string>;
+        selectedOptions: {
+            getSelectedOptions: (key: string) => import("../types/index.js").TableFilterOptionValueEntry[];
+            isResolving: (key: string) => boolean;
+            remember: (key: string, options: readonly import("../types/index.js").TableFilterOptionEntry[]) => void;
+        };
         setFilterOperator: (input: {
             key: string;
             operator: import("../types/index.js").TableFilterOperator;
@@ -1419,7 +1434,7 @@ declare function useTableInternals(): {
         loadMore: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
         loadMoreError: import("vue").ComputedRef<unknown>;
         loadedCount: import("vue").ComputedRef<number>;
-        mode: import("vue").ComputedRef<"none" | "offset" | "cursor">;
+        mode: import("vue").ComputedRef<"cursor" | "none" | "offset">;
         next: () => void;
         noneState: import("vue").ComputedRef<{
             loadedCount: number;
@@ -1449,7 +1464,7 @@ declare function useTableInternals(): {
             isLoadingMore: boolean;
             loadMoreError: unknown;
             loadedCount: number;
-            mode: "none" | "offset" | "cursor";
+            mode: "cursor" | "none" | "offset";
             pageCount: number;
             pageIndex: number;
             pageSize: number;
@@ -1473,7 +1488,7 @@ declare function useTableInternals(): {
             readonly pageSize?: undefined;
             readonly pageIndex?: undefined;
         } | {
-            readonly count: "exact" | "none";
+            readonly count: "none" | "exact";
             readonly cursor: null;
             readonly mode: "cursor";
             readonly pageSize: number;
@@ -1485,7 +1500,7 @@ declare function useTableInternals(): {
             readonly pageSize: number;
             readonly cursor?: undefined;
         }>;
-        paginationMode: "none" | "offset" | "cursor";
+        paginationMode: "cursor" | "none" | "offset";
         paginationRevision: import("vue").Ref<number, number>;
         resetPagination: () => void;
         setOffsetPagination: (value: {
@@ -1493,7 +1508,7 @@ declare function useTableInternals(): {
             pageSize: number;
         }) => void;
         sorting: import("vue").WritableComputedRef<{
-            dir: "desc" | "asc";
+            dir: "asc" | "desc";
             key: string;
         } | null, {
             key: string;
@@ -1504,7 +1519,7 @@ declare function useTableInternals(): {
     schema: import("vue").ComputedRef<TableSchemaView>;
     selection: {
         allSelected: import("vue").ComputedRef<boolean>;
-        bulkScope: import("vue").Ref<"selection" | "all", "selection" | "all">;
+        bulkScope: import("vue").Ref<"all" | "selection", "all" | "selection">;
         clearSelection: () => void;
         getRowId: (params: {
             row: import("../types/index.js").GenericObject;
@@ -1573,10 +1588,10 @@ declare function useTableInternals(): {
         }) => import("@nuxt/ui/runtime/components/DropdownMenu.d.vue.js").DropdownMenuItem[][];
         getPinnedState: (options: {
             columnId: string;
-        }) => "right" | "left" | null;
+        }) => "left" | "right" | null;
         getSortState: (options: {
             columnId: string;
-        }) => "desc" | "asc" | null;
+        }) => "asc" | "desc" | null;
         orderedColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
         reset: () => void;
         runtimeColumns: import("vue").ComputedRef<import("../utils/index.js").TableRuntimeColumn[]>;
@@ -1600,7 +1615,7 @@ declare function useTableInternals(): {
         sortKeys: import("vue").ComputedRef<string[]>;
         sortingState: import("vue").ComputedRef<{
             active: boolean;
-            dir: "desc" | "asc" | undefined;
+            dir: "asc" | "desc" | undefined;
             key: string | undefined;
         }>;
         tableColumns: import("vue").ComputedRef<({

package/dist/runtime/table/composables/use-table-pagination.d.ts

@@ -25,7 +25,7 @@ export declare function useTablePagination(options: UseTablePaginationParams): {
     loadMore: () => Promise<import("@tanstack/vue-query").InfiniteQueryObserverRefetchErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverSuccessResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverLoadingErrorResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPendingResult<unknown, unknown> | import("@tanstack/vue-query").InfiniteQueryObserverPlaceholderResult<unknown, unknown> | undefined>;
     loadMoreError: ComputedRef<unknown>;
     loadedCount: ComputedRef<number>;
-    mode: ComputedRef<"none" | "offset" | "cursor">;
+    mode: ComputedRef<"cursor" | "none" | "offset">;
     next: () => void;
     noneState: ComputedRef<{
         loadedCount: number;
@@ -55,7 +55,7 @@ export declare function useTablePagination(options: UseTablePaginationParams): {
         isLoadingMore: boolean;
         loadMoreError: unknown;
         loadedCount: number;
-        mode: "none" | "offset" | "cursor";
+        mode: "cursor" | "none" | "offset";
         pageCount: number;
         pageIndex: number;
         pageSize: number;

package/dist/runtime/table/composables/use-table-remote-filter-options.d.ts

@@ -0,0 +1,42 @@
+import type { InfiniteData } from '@tanstack/vue-query';
+import type { ComputedRef } from 'vue';
+import type { RemoteOptionsResult } from '../../shared/types/remote-options.js';
+import type { RemoteOptionsPageParam } from '../../shared/utils/remote-options.js';
+import type { TableFilterOptionEntry, TableFilterRemoteOptions } from '../types/index.js';
+type RemotePage = RemoteOptionsResult<TableFilterOptionEntry>;
+/** Defaults of `source.remote` on option filters, matching the form engine's remote options. */
+export declare const TABLE_REMOTE_FILTER_OPTIONS_DEFAULTS: {
+    readonly pageSize: 25;
+    readonly searchDebounce: 250;
+};
+export interface UseTableRemoteFilterOptionsParams {
+    config: ComputedRef<TableFilterRemoteOptions | undefined>;
+    /** Raw search input; it is trimmed and debounced before it reaches the source. */
+    search: ComputedRef<string>;
+    /** Pages load only while an editor shows the list. */
+    enabled: ComputedRef<boolean>;
+}
+/**
+ * Pages of a remote option filter. Nothing loads until an editor shows the list; each search term
+ * keeps its own pages in the TanStack Query cache, and the previous term's pages stay on screen
+ * while the next term loads.
+ */
+export declare function useTableRemoteFilterOptions(params: UseTableRemoteFilterOptionsParams): {
+    entries: ComputedRef<readonly TableFilterOptionEntry[]>;
+    error: import("vue").Ref<null, null> | import("vue").Ref<Error, Error>;
+    /** More pages exist after the loaded ones. */
+    hasMore: ComputedRef<boolean>;
+    /** The first page of the current term has not arrived yet. */
+    isLoading: ComputedRef<boolean>;
+    /** A new term, or a refetch, is loading while earlier options stay on screen. */
+    isRefreshing: ComputedRef<boolean>;
+    /** The next page is loading at the end of the list. */
+    loadingMore: ComputedRef<boolean>;
+    /** The last request failed: the next page (or the first) can be retried. */
+    failed: ComputedRef<boolean>;
+    loadMore: () => void;
+    pageValues: ComputedRef<(string | number | boolean)[][]>;
+    prefetchDistance: ComputedRef<number | "viewport">;
+    retry: () => Promise<import("@tanstack/vue-query").QueryObserverResult<InfiniteData<RemotePage, RemoteOptionsPageParam>, Error>>;
+};
+export {};

package/dist/runtime/table/composables/use-table-remote-filter-options.js

@@ -0,0 +1,102 @@
+import { useInfiniteQuery } from "@tanstack/vue-query";
+import { refDebounced } from "@vueuse/core";
+import { computed } from "vue";
+import {
+  REMOTE_OPTIONS_FIRST_PAGE,
+  resolveRemoteOptionsNextPage
+} from "../../shared/utils/remote-options.js";
+import { QUERY_DEFAULTS } from "../constants/query-state.js";
+export const TABLE_REMOTE_FILTER_OPTIONS_DEFAULTS = {
+  pageSize: 25,
+  searchDebounce: 250
+};
+export function useTableRemoteFilterOptions(params) {
+  const pageSize = computed(
+    () => Math.max(
+      1,
+      params.config.value?.pagination?.size ?? TABLE_REMOTE_FILTER_OPTIONS_DEFAULTS.pageSize
+    )
+  );
+  const minLength = computed(() => Math.max(0, params.config.value?.search?.minLength ?? 0));
+  const search = refDebounced(
+    computed(() => params.search.value.trim()),
+    () => params.config.value?.search?.debounce ?? TABLE_REMOTE_FILTER_OPTIONS_DEFAULTS.searchDebounce
+  );
+  const canFetch = computed(
+    () => search.value.length === 0 || search.value.length >= minLength.value
+  );
+  const pages = useInfiniteQuery(
+    computed(() => {
+      const config = params.config.value;
+      const term = search.value;
+      const size = pageSize.value;
+      const firstPage = config?.load({ page: { ...REMOTE_OPTIONS_FIRST_PAGE, size }, search: term });
+      return {
+        enabled: Boolean(config) && params.enabled.value && canFetch.value,
+        getNextPageParam: (lastPage, allPages) => resolveRemoteOptionsNextPage(lastPage, allPages.length),
+        initialPageParam: REMOTE_OPTIONS_FIRST_PAGE,
+        // Keeps the previous term's options on screen while the next term loads.
+        placeholderData: (previous) => previous,
+        async queryFn(queryContext) {
+          const definition = config?.load({
+            page: { ...queryContext.pageParam, size },
+            search: term
+          });
+          if (!definition?.queryFn) {
+            throw new Error("Remote option filters must return a query definition with a queryFn.");
+          }
+          return definition.queryFn({
+            ...queryContext,
+            direction: "forward",
+            pageParam: null,
+            queryKey: definition.queryKey
+          });
+        },
+        queryKey: [
+          ...firstPage?.queryKey ?? ["table-filter-remote-options", "disabled"],
+          { tableFilterOptionPages: size }
+        ],
+        refetchOnWindowFocus: QUERY_DEFAULTS.refetchOnWindowFocus,
+        staleTime: QUERY_DEFAULTS.staleTime.filterOptions
+      };
+    })
+  );
+  const entries = computed(
+    () => pages.data.value?.pages.flatMap((page) => page.options) ?? []
+  );
+  const pageValues = computed(
+    () => pages.data.value?.pages.map((page) => collectOptionValues(page.options)) ?? []
+  );
+  function loadMore() {
+    if (!pages.hasNextPage.value || pages.isFetchingNextPage.value || pages.isFetching.value) return;
+    void pages.fetchNextPage();
+  }
+  return {
+    entries,
+    error: pages.error,
+    /** More pages exist after the loaded ones. */
+    hasMore: computed(() => pages.hasNextPage.value),
+    /** The first page of the current term has not arrived yet. */
+    isLoading: computed(() => pages.isLoading.value && !pages.isPlaceholderData.value),
+    /** A new term, or a refetch, is loading while earlier options stay on screen. */
+    isRefreshing: computed(
+      () => pages.isFetching.value && !pages.isFetchingNextPage.value && !pages.isLoading.value
+    ),
+    /** The next page is loading at the end of the list. */
+    loadingMore: computed(() => pages.isFetchingNextPage.value),
+    /** The last request failed: the next page (or the first) can be retried. */
+    failed: computed(() => pages.isError.value || pages.isFetchNextPageError.value),
+    loadMore,
+    pageValues,
+    prefetchDistance: computed(
+      () => params.config.value?.pagination?.prefetchDistance ?? "viewport"
+    ),
+    retry: () => pages.isFetchNextPageError.value ? pages.fetchNextPage() : pages.refetch()
+  };
+}
+function collectOptionValues(options) {
+  return options.flatMap((option) => [
+    ...option.value === void 0 ? [] : [option.value],
+    ...collectOptionValues(option.children ?? [])
+  ]);
+}

package/dist/runtime/table/composables/use-table-selection.d.ts

@@ -7,7 +7,7 @@ export interface UseTableSelectionParams {
 }
 export declare function useTableSelection(options: UseTableSelectionParams): {
     allSelected: ComputedRef<boolean>;
-    bulkScope: import("vue").Ref<"selection" | "all", "selection" | "all">;
+    bulkScope: import("vue").Ref<"all" | "selection", "all" | "selection">;
     clearSelection: () => void;
     getRowId: (params: {
         row: GenericObject;

package/dist/runtime/table/composables/use-table-state.d.ts

@@ -21,7 +21,7 @@ export declare function useTableState(params: UseTableStateParams): {
             readonly pageSize?: undefined;
             readonly pageIndex?: undefined;
         } | {
-            readonly count: "exact" | "none";
+            readonly count: "none" | "exact";
             readonly cursor: null;
             readonly mode: "cursor";
             readonly pageSize: number;
@@ -33,7 +33,7 @@ export declare function useTableState(params: UseTableStateParams): {
             readonly pageSize: number;
             readonly cursor?: undefined;
         }>;
-        paginationMode: "none" | "offset" | "cursor";
+        paginationMode: "cursor" | "none" | "offset";
         paginationRevision: import("vue").Ref<number, number>;
         resetPagination: () => void;
         setOffsetPagination: (value: {
@@ -41,7 +41,7 @@ export declare function useTableState(params: UseTableStateParams): {
             pageSize: number;
         }) => void;
         sorting: import("vue").WritableComputedRef<{
-            dir: "desc" | "asc";
+            dir: "asc" | "desc";
             key: string;
         } | null, {
             key: string;