nuxt-ui-tools 1.0.1 → 1.2.0

package/dist/runtime/table/components/filters/shared/filter-option-picker-content.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { isNullish } from "../../../../shared/utils/predicate";
+import FilterOptionListEnd from "./filter-option-list-end.vue";
 import FilterOptionLoadingList from "./filter-option-loading-list.vue";
 import FilterOptionMultipleList from "./filter-option-multiple-list.vue";
 import FilterOptionSingleList from "./filter-option-single-list.vue";
@@ -105,5 +106,17 @@ function handleSelect(options) {
         :ui="props.ui"
       />
     </template>
+
+    <FilterOptionListEnd
+      v-if="
+  props.state.optionSource.remote.enabled.value && !props.state.optionSource.isLoading.value
+"
+      :remote="props.state.optionSource.remote"
+      :indicator="
+  props.state.filterUi.value.selection.mode === 'multiple' || props.state.filterUi.value.presentation === 'tree' ? 'checkbox' : 'radio'
+"
+      :size="props.size"
+      :ui="props.ui"
+    />
   </FilterSearchablePanel>
 </template>

package/dist/runtime/table/components/filters/shared/filter-option-single-list.d.vue.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
         label: string;
         value: string;
         count?: number;
+        /** Counts are shown but this option's is not known yet. */
+        countPending?: boolean;
         icon?: string;
         truncate?: boolean;
     }[];

package/dist/runtime/table/components/filters/shared/filter-option-single-list.vue

@@ -71,7 +71,7 @@ const modelValue = defineModel({ type: null, ...{
           {{ item.label }}
         </span>
         <USkeleton
-          v-if="countLoading"
+          v-if="countLoading || item.countPending"
           :class="[sizeClasses.skeletonCount, 'shrink-0 rounded-full']"
         />
         <span v-else-if="item.count != null" class="shrink-0 text-muted">

package/dist/runtime/table/components/filters/shared/filter-option-single-list.vue.d.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
         label: string;
         value: string;
         count?: number;
+        /** Counts are shown but this option's is not known yet. */
+        countPending?: boolean;
         icon?: string;
         truncate?: boolean;
     }[];

package/dist/runtime/table/components/filters/shared/filter-option-tree-content.d.vue.ts

@@ -4,6 +4,8 @@ interface TreeEntry {
     label: string;
     value?: string | number | boolean;
     count?: number;
+    /** Counts are shown but this option's is not known yet. */
+    countPending?: boolean;
     icon?: string;
     depth: number;
     expandable: boolean;
@@ -21,6 +23,7 @@ type __VLS_Props = {
         label: string;
         value: string;
         count?: number;
+        countPending?: boolean;
         icon?: string;
         truncate?: boolean;
         depth: number;

package/dist/runtime/table/components/filters/shared/filter-option-tree-content.vue

@@ -138,7 +138,7 @@ function activateTreeEntry(entry) {
       </button>
 
       <USkeleton
-        v-if="countLoading"
+        v-if="countLoading || entry.countPending"
         :class="[sizeClasses.skeletonCount, 'shrink-0 rounded-full']"
       />
       <span
@@ -210,7 +210,7 @@ function activateTreeEntry(entry) {
           {{ item.label }}
         </span>
         <USkeleton
-          v-if="countLoading"
+          v-if="countLoading || item.countPending"
           :class="[sizeClasses.skeletonCount, 'shrink-0 rounded-full']"
         />
         <span v-else-if="item.count != null" class="shrink-0 text-muted">

package/dist/runtime/table/components/filters/shared/filter-option-tree-content.vue.d.ts

@@ -4,6 +4,8 @@ interface TreeEntry {
     label: string;
     value?: string | number | boolean;
     count?: number;
+    /** Counts are shown but this option's is not known yet. */
+    countPending?: boolean;
     icon?: string;
     depth: number;
     expandable: boolean;
@@ -21,6 +23,7 @@ type __VLS_Props = {
         label: string;
         value: string;
         count?: number;
+        countPending?: boolean;
         icon?: string;
         truncate?: boolean;
         depth: number;

package/dist/runtime/table/components/filters/shared/filter-searchable-panel.vue

@@ -59,6 +59,7 @@ const sizeClasses = computed(() => resolveFilterEditorSizeClasses(size));
     </div>
 
     <UScrollArea
+      data-filter-option-scroll
       type="hover"
       :class="
   mergeDataListUiClass(

package/dist/runtime/table/components/layout/table-footer.d.vue.ts

@@ -24,7 +24,7 @@ declare var __VLS_1: {
         isLoadingMore: boolean;
         loadMoreError: unknown;
         loadedCount: number;
-        mode: "none" | "offset" | "cursor";
+        mode: "cursor" | "none" | "offset";
         pageCount: number;
         pageIndex: number;
         pageSize: number;

package/dist/runtime/table/components/layout/table-footer.vue.d.ts

@@ -24,7 +24,7 @@ declare var __VLS_1: {
         isLoadingMore: boolean;
         loadMoreError: unknown;
         loadedCount: number;
-        mode: "none" | "offset" | "cursor";
+        mode: "cursor" | "none" | "offset";
         pageCount: number;
         pageIndex: number;
         pageSize: number;

package/dist/runtime/table/components/table/table-cell-ellipsis.d.ts

@@ -26,8 +26,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
     };
 }>> & Readonly<{}>, {
-    title: string;
     disabled: boolean;
+    title: string;
     wrapperClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -30,6 +30,7 @@ export declare function useOptionFilterEditorState(options: UseOptionFilterEdito
     flatRadioItems: ComputedRef<{
         color: string | undefined;
         count: number | undefined;
+        countPending: boolean;
         icon: string | undefined;
         label: string;
         truncate: boolean;
@@ -47,7 +48,16 @@ export declare function useOptionFilterEditorState(options: UseOptionFilterEdito
         isError: ComputedRef<boolean>;
         isLoading: ComputedRef<boolean>;
         isStaleLoading: ComputedRef<boolean>;
-        refresh: () => Promise<[import("@tanstack/vue-query").QueryObserverResult<TableFilterOptionEntry[] | import("../types/index.js").TableFilterOptionQueryResult, Error>, import("@tanstack/vue-query").QueryObserverResult<import("../types/index.js").TableFacetExecutionResult<string, unknown>, Error>]>;
+        refresh: () => Promise<[import("@tanstack/vue-query").QueryObserverResult<import("@tanstack/vue-query").InfiniteData<import("../../shared/index.js").RemoteOptionsPage<TableFilterOptionEntry> | import("../../shared/index.js").RemoteCursorOptionsPage<TableFilterOptionEntry>, import("../../shared/utils/remote-options.js").RemoteOptionsPageParam>, Error> | import("@tanstack/vue-query").QueryObserverResult<TableFilterOptionEntry[] | import("../types/index.js").TableFilterOptionQueryResult, Error>, import("@tanstack/vue-query").QueryObserverResult<import("../types/index.js").TableFacetExecutionResult<string, unknown>, Error>]>;
+        remote: {
+            enabled: ComputedRef<boolean>;
+            failed: ComputedRef<boolean>;
+            hasMore: ComputedRef<boolean>;
+            loadMore: () => void;
+            loadingMore: ComputedRef<boolean>;
+            prefetchDistance: ComputedRef<number | "viewport">;
+            retry: () => Promise<import("@tanstack/vue-query").QueryObserverResult<import("@tanstack/vue-query").InfiniteData<import("../../shared/index.js").RemoteOptionsPage<TableFilterOptionEntry> | import("../../shared/index.js").RemoteCursorOptionsPage<TableFilterOptionEntry>, import("../../shared/utils/remote-options.js").RemoteOptionsPageParam>, Error>>;
+        };
         searchExpandedIds: ComputedRef<string[]>;
         showCounts: ComputedRef<boolean>;
         sourceEntries: ComputedRef<(TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue> & {
@@ -68,6 +78,7 @@ export declare function useOptionFilterEditorState(options: UseOptionFilterEdito
     treeRadioItems: ComputedRef<{
         color: string | undefined;
         count: number | undefined;
+        countPending: boolean;
         depth: number;
         disabled: boolean;
         expandable: boolean;
@@ -82,6 +93,7 @@ export declare function useOptionFilterEditorState(options: UseOptionFilterEdito
     treeRadioValue: import("vue").WritableComputedRef<string | undefined, string | undefined>;
     triggerSummary: ComputedRef<string>;
     visibleTreeEntries: ComputedRef<{
+        countPending: boolean;
         expanded: boolean;
         indeterminate: boolean;
         id: string;

package/dist/runtime/table/composables/use-option-filter-editor-state.js

@@ -88,6 +88,7 @@ export function useOptionFilterEditorState(options) {
       if (!entry.branchSelectable) {
         return {
           ...entry,
+          countPending: optionSource.showCounts.value && isNullish(entry.count),
           expanded: effectiveExpandedIds.value.has(entry.id),
           indeterminate: false
         };
@@ -102,6 +103,7 @@ export function useOptionFilterEditorState(options) {
       ).length;
       return {
         ...entry,
+        countPending: optionSource.showCounts.value && isNullish(entry.count),
         expanded: effectiveExpandedIds.value.has(entry.id),
         indeterminate: selectedCount > 0 && selectedCount < descendantValues.length,
         selected: descendantValues.length > 0 && selectedCount === descendantValues.length
@@ -111,7 +113,8 @@ export function useOptionFilterEditorState(options) {
   const flatRadioItems = computed(
     () => displayEntries.value.map((entry) => ({
       color: entry.color,
-      count: optionSource.showCounts.value ? entry.count ?? 0 : void 0,
+      count: optionSource.showCounts.value ? entry.count : void 0,
+      countPending: optionSource.showCounts.value && isNullish(entry.count),
       icon: entry.icon,
       label: entry.label,
       truncate: filterUi.value.row.truncate,
@@ -134,7 +137,8 @@ export function useOptionFilterEditorState(options) {
   const treeRadioItems = computed(
     () => visibleTreeEntries.value.map((entry) => ({
       color: entry.color,
-      count: optionSource.showCounts.value ? entry.count ?? 0 : void 0,
+      count: optionSource.showCounts.value ? entry.count : void 0,
+      countPending: optionSource.showCounts.value && isNullish(entry.count),
       depth: entry.depth,
       disabled: !entry.selectable,
       expandable: entry.expandable,

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

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

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

@@ -7,10 +7,10 @@ export declare function useTableColumns(params: UseTableColumnsParams): {
     }) => 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[]>;
@@ -34,7 +34,7 @@ export declare function useTableColumns(params: UseTableColumnsParams): {
     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-filter-options.d.ts

@@ -22,7 +22,17 @@ export declare function useTableFilterOptions(options: UseTableFilterOptionsPara
     isError: ComputedRef<boolean>;
     isLoading: ComputedRef<boolean>;
     isStaleLoading: ComputedRef<boolean>;
-    refresh: () => Promise<[import("@tanstack/vue-query").QueryObserverResult<TableFilterOptionEntry[] | TableFilterOptionQueryResult, Error>, import("@tanstack/vue-query").QueryObserverResult<TableFacetExecutionResult<string, unknown>, Error>]>;
+    refresh: () => Promise<[import("@tanstack/vue-query").QueryObserverResult<import("@tanstack/vue-query").InfiniteData<import("../../shared/index.js").RemoteOptionsPage<TableFilterOptionEntry> | import("../../shared/index.js").RemoteCursorOptionsPage<TableFilterOptionEntry>, import("../../shared/utils/remote-options.js").RemoteOptionsPageParam>, Error> | import("@tanstack/vue-query").QueryObserverResult<TableFilterOptionEntry[] | TableFilterOptionQueryResult, Error>, import("@tanstack/vue-query").QueryObserverResult<TableFacetExecutionResult<string, unknown>, Error>]>;
+    /** Paging of `source.remote`: the editor list loads the next page ahead of the scroll. */
+    remote: {
+        enabled: ComputedRef<boolean>;
+        failed: ComputedRef<boolean>;
+        hasMore: ComputedRef<boolean>;
+        loadMore: () => void;
+        loadingMore: ComputedRef<boolean>;
+        prefetchDistance: ComputedRef<number | "viewport">;
+        retry: () => Promise<import("@tanstack/vue-query").QueryObserverResult<import("@tanstack/vue-query").InfiniteData<import("../../shared/index.js").RemoteOptionsPage<TableFilterOptionEntry> | import("../../shared/index.js").RemoteCursorOptionsPage<TableFilterOptionEntry>, import("../../shared/utils/remote-options.js").RemoteOptionsPageParam>, Error>>;
+    };
     searchExpandedIds: ComputedRef<string[]>;
     showCounts: ComputedRef<boolean>;
     sourceEntries: ComputedRef<(TableResolvedFilterOptionEntry<import("../types/index.js").TableFilterPrimitiveValue> & {

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

@@ -1,5 +1,5 @@
-import { useQuery } from "@tanstack/vue-query";
-import { computed, unref } from "vue";
+import { useQueries, useQuery } from "@tanstack/vue-query";
+import { computed, unref, watch } from "vue";
 import {
   isBoolean,
   isFunction,
@@ -17,6 +17,7 @@ import {
   resolveOptionFilterUi,
   resolveTableFacetMode
 } from "../utils/index.js";
+import { useTableRemoteFilterOptions } from "./use-table-remote-filter-options.js";
 export function useTableFilterOptions(options) {
   const isActive = computed(() => options.active?.value ?? true);
   const isReady = computed(() => options.ready?.value ?? true);
@@ -52,29 +53,36 @@ export function useTableFilterOptions(options) {
     () => shouldDeriveCounts.value && isActive.value && isReady.value
   );
   const isRemoteTable = computed(() => options.schema.value.source.mode === "remote");
+  const remoteConfig = computed(() => optionDefinition.value?.source?.remote);
+  const hasRemotePages = computed(() => Boolean(remoteConfig.value));
   const hasRemoteOptionQuery = computed(
-    () => options.definition.kind === "option" && isFunction(options.definition.source?.query)
+    () => !hasRemotePages.value && options.definition.kind === "option" && isFunction(options.definition.source?.query)
   );
+  const hasServerOptions = computed(() => hasRemotePages.value || hasRemoteOptionQuery.value);
   const facetSpec = computed(() => options.definition.source?.facet);
   const facetConfig = computed(
     () => isFacetConfig(facetSpec.value) ? facetSpec.value : null
   );
   const hasPerFilterFacetQuery = computed(() => isFunction(facetConfig.value?.query));
   const usesFacetCounts = computed(
-    () => Boolean(facetSpec.value) && (options.schema.value.source.mode === "client" || hasPerFilterFacetQuery.value || isRemoteTable.value && Boolean(remoteSource.value?.facets))
+    () => Boolean(facetSpec.value) && (options.schema.value.source.mode === "client" || hasPerFilterFacetQuery.value || // The main request cannot count options it never lists: paged options need `facet.query`.
+    isRemoteTable.value && Boolean(remoteSource.value?.facets) && !hasRemotePages.value)
+  );
+  const countsPagesRemotely = computed(
+    () => hasRemotePages.value && isRemoteTable.value && hasPerFilterFacetQuery.value
   );
   const resolvedTreeSearchMode = computed(() => {
     if (optionUi.value?.presentation !== "tree") {
-      return hasRemoteOptionQuery.value ? "remote" : "local";
+      return hasServerOptions.value ? "remote" : "local";
     }
     const configured = optionUi.value.tree.searchMode;
     if (configured === "local" || configured === "remote") {
       return configured;
     }
-    return hasRemoteOptionQuery.value ? "remote" : "local";
+    return hasServerOptions.value ? "remote" : "local";
   });
   const querySearch = computed(() => {
-    if (!hasRemoteOptionQuery.value) {
+    if (!hasServerOptions.value) {
       return;
     }
     if (resolvedTreeSearchMode.value === "local") {
@@ -97,6 +105,30 @@ export function useTableFilterOptions(options) {
       key: options.definition.key
     })
   );
+  const remotePages = useTableRemoteFilterOptions({
+    config: remoteConfig,
+    enabled: computed(() => isActive.value && isReady.value),
+    search: computed(() => querySearch.value ?? "")
+  });
+  watch(
+    [remotePages.entries, selectedValues],
+    ([entries, values]) => {
+      if (!hasRemotePages.value || !values.length) return;
+      const picked = new Set(values.map(String));
+      options.filters.selectedOptions.remember(
+        options.definition.key,
+        flattenRawOptionEntries(entries).filter((entry) => picked.has(String(entry.value)))
+      );
+    },
+    { immediate: true }
+  );
+  const remotePageEntries = computed(() => {
+    const listed = new Set(
+      flattenRawOptionEntries(remotePages.entries.value).map((entry) => String(entry.value))
+    );
+    const selected = options.filters.selectedOptions.getSelectedOptions(options.definition.key).filter((entry) => !listed.has(String(entry.value)));
+    return [...selected, ...remotePages.entries.value];
+  });
   const optionQuery = useQuery(
     computed(() => {
       const activeDefinition = optionDefinition.value;
@@ -126,7 +158,7 @@ export function useTableFilterOptions(options) {
   );
   const perFilterFacetQuery = useQuery(
     computed(() => {
-      if (!isRemoteTable.value || !usesFacetCounts.value || !facetConfig.value?.query) {
+      if (!isRemoteTable.value || !usesFacetCounts.value || !facetConfig.value?.query || countsPagesRemotely.value) {
         return {
           enabled: false,
           queryFn: async () => ({ facets: [] }),
@@ -168,10 +200,62 @@ export function useTableFilterOptions(options) {
     }
     return result?.options ? [...result.options] : [];
   });
+  const pageFacetRequests = computed(() => {
+    if (!countsPagesRemotely.value || !shouldResolveCounts.value) return [];
+    const paged = remotePages.pageValues.value;
+    const listed = new Set(paged.flat().map(String));
+    const outside = options.filters.selectedOptions.getSelectedOptions(options.definition.key).map((entry) => entry.value).filter((value) => !listed.has(String(value)));
+    return [outside, ...paged].filter((values) => values.length > 0);
+  });
+  const pageFacetQueries = useQueries({
+    queries: computed(() => {
+      const config = facetConfig.value;
+      const query = config?.query;
+      if (!query) return [];
+      return pageFacetRequests.value.map((values) => {
+        const definition = unref(
+          query({
+            facets: [{ key: options.definition.key, mode: resolveTableFacetMode(config), values }],
+            table: options.queryContent.facetsBaseContext.value
+          })
+        );
+        return {
+          // The table's own cache entry: it keeps the requested values next to their counts.
+          queryFn: async (context) => {
+            if (!definition.queryFn) {
+              throw new Error("facet.query must return a query definition with a queryFn.");
+            }
+            const result = await definition.queryFn({
+              ...context,
+              direction: "forward",
+              pageParam: null,
+              queryKey: definition.queryKey
+            });
+            return { result, values };
+          },
+          queryKey: ["table-filter-page-facets", ...definition.queryKey],
+          refetchOnWindowFocus: QUERY_DEFAULTS.refetchOnWindowFocus,
+          staleTime: QUERY_DEFAULTS.staleTime.filterOptions
+        };
+      });
+    })
+  });
+  const pageFacetCounts = computed(
+    () => pageFacetQueries.value.flatMap((query) => {
+      if (!query.data) return [];
+      const counted = new Map(
+        query.data.result.facets.filter((facet) => facet.key === options.definition.key).flatMap((facet) => facet.options).map((option) => [String(option.value), option.count])
+      );
+      return query.data.values.map((value) => ({ count: counted.get(String(value)) ?? 0, value }));
+    })
+  );
   const facetCounts = computed(() => {
     if (!usesFacetCounts.value) {
       return [];
     }
+    if (countsPagesRemotely.value) {
+      return pageFacetCounts.value;
+    }
     const facets = isRemoteTable.value && hasPerFilterFacetQuery.value ? unref(perFilterFacetQuery.data)?.facets ?? [] : options.queryContent.facets.value.facets;
     return facets.find((facet) => facet.key === options.definition.key)?.options ?? [];
   });
@@ -185,8 +269,10 @@ export function useTableFilterOptions(options) {
       definition: options.definition,
       deriveCounts: false,
       facetCounts: resolvedFacetCounts.value,
-      missingCountFallback: shouldResolveCounts.value && usesFacetCounts.value ? 0 : void 0,
-      options: hasRemoteOptionQuery.value ? remoteEntries.value : staticEntries.value,
+      // Paged options without counts yet stay unknown (a placeholder) until their page is counted.
+      missingCountFallback: shouldResolveCounts.value && usesFacetCounts.value && !countsPagesRemotely.value ? 0 : void 0,
+      options: hasRemotePages.value ? remotePageEntries.value : hasRemoteOptionQuery.value ? remoteEntries.value : staticEntries.value,
+      authoritative: hasRemotePages.value,
       rows: [],
       selectedValues: selectedValues.value
     })
@@ -228,7 +314,7 @@ export function useTableFilterOptions(options) {
         (entry) => !isNullish(entry.value)
       );
     }
-    if (!normalizedSearch.value.length || hasRemoteOptionQuery.value) {
+    if (!normalizedSearch.value.length || hasServerOptions.value) {
       return selectableSourceEntries.value;
     }
     return selectableSourceEntries.value.filter(
@@ -236,28 +322,53 @@ export function useTableFilterOptions(options) {
     );
   });
   const isInitialLoading = computed(
-    () => optionQuery.isLoading.value && !optionQuery.isPlaceholderData.value
+    () => hasRemotePages.value ? remotePages.isLoading.value : optionQuery.isLoading.value && !optionQuery.isPlaceholderData.value
+  );
+  const isStaleLoading = computed(
+    () => hasRemotePages.value ? remotePages.isRefreshing.value : !isInitialLoading.value && optionQuery.isFetching.value
   );
-  const isStaleLoading = computed(() => !isInitialLoading.value && optionQuery.isFetching.value);
   const isCountLoading = computed(
-    () => isRemoteTable.value && shouldResolveCounts.value && perFilterFacetQuery.isFetching.value
+    () => isRemoteTable.value && shouldResolveCounts.value && !countsPagesRemotely.value && perFilterFacetQuery.isFetching.value
   );
   return {
-    error: computed(() => optionQuery.error.value ?? perFilterFacetQuery.error.value),
+    error: computed(
+      () => (hasRemotePages.value ? remotePages.error.value : optionQuery.error.value) ?? perFilterFacetQuery.error.value
+    ),
     facetCounts,
     filteredEntries,
     filteredTreeEntries: computed(() => filteredTreeState.value.entries),
     isCountLoading,
-    isError: computed(() => optionQuery.isError.value || perFilterFacetQuery.isError.value),
+    isError: computed(
+      () => (hasRemotePages.value ? remotePages.failed.value : optionQuery.isError.value) || perFilterFacetQuery.isError.value
+    ),
     isLoading: isInitialLoading,
     isStaleLoading,
-    refresh: () => Promise.all([optionQuery.refetch(), perFilterFacetQuery.refetch()]),
+    refresh: () => Promise.all([
+      hasRemotePages.value ? remotePages.retry() : optionQuery.refetch(),
+      perFilterFacetQuery.refetch()
+    ]),
+    /** Paging of `source.remote`: the editor list loads the next page ahead of the scroll. */
+    remote: {
+      enabled: hasRemotePages,
+      failed: remotePages.failed,
+      hasMore: remotePages.hasMore,
+      loadMore: remotePages.loadMore,
+      loadingMore: remotePages.loadingMore,
+      prefetchDistance: remotePages.prefetchDistance,
+      retry: remotePages.retry
+    },
     searchExpandedIds: computed(() => filteredTreeState.value.expandedIds),
     showCounts: computed(() => shouldDeriveCounts.value && usesFacetCounts.value),
     sourceEntries: selectableSourceEntries,
     sourceTreeEntries: resolvedSourceTreeEntries
   };
 }
+function flattenRawOptionEntries(entries) {
+  return entries.flatMap((entry) => [
+    ...isNullish(entry.value) ? [] : [entry],
+    ...flattenRawOptionEntries(entry.children ?? [])
+  ]);
+}
 function isFacetConfig(value) {
   return isObject(value);
 }

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

@@ -0,0 +1,20 @@
+import type { ComputedRef } from 'vue';
+import type { TableFilterOptionEntry, TableFilterOptionValueEntry, TableQueryStateFilterRule, TableUiFilterDefinition } from '../types/index.js';
+export interface UseTableFilterSelectedOptionsParams {
+    definitions: ComputedRef<TableUiFilterDefinition[]>;
+    /** Committed filter rules. */
+    rules: ComputedRef<TableQueryStateFilterRule[]>;
+}
+/**
+ * Options of the committed values of remote option filters, so tags, panel chips, and the mobile
+ * sheet show labels instead of raw values. Options the editors loaded are recorded as values get
+ * picked; the rest (for example values restored from the URL) resolve through each filter's
+ * `source.remote.resolveSelected`, under the consumer's query key so a prefetched result is reused.
+ */
+export declare function useTableFilterSelectedOptions(params: UseTableFilterSelectedOptionsParams): {
+    getSelectedOptions: (key: string) => TableFilterOptionValueEntry[];
+    /** Options of committed values are resolving for this filter. */
+    isResolving: (key: string) => boolean;
+    remember: (key: string, options: readonly TableFilterOptionEntry[]) => void;
+};
+export type TableFilterSelectedOptions = ReturnType<typeof useTableFilterSelectedOptions>;