nuxt-ui-tools 1.1.0 → 1.2.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/dashboard/components/block/dashboard-skeleton.vue

@@ -73,11 +73,14 @@ const funnelWidths = computed(
   </div>
 
   <!-- Feed: a rail of markers, two lines per event, and a time -->
-  <div v-else-if="kind === 'feed'" class="flex flex-col">
-    <div v-for="(width, index) in widths" :key="index" class="flex gap-3 pb-3.5">
+  <div v-else-if="kind === 'feed'" class="-my-2 flex flex-col">
+    <div v-for="(width, index) in widths" :key="index" class="flex gap-3 py-2">
       <div class="flex w-7 shrink-0 flex-col items-center">
         <div class="nut-dash-ghost size-7 rounded-full" />
-        <div v-if="index < widths.length - 1" class="mt-1 w-px flex-1 bg-[var(--nut-dash-grid)]" />
+        <div
+          v-if="index < widths.length - 1"
+          class="mt-1 -mb-4 w-px flex-1 bg-[var(--nut-dash-grid)]"
+        />
       </div>
       <div class="flex min-w-0 flex-1 flex-col gap-1.5 pt-1">
         <div class="flex items-center gap-3">

package/dist/runtime/dashboard/components/dashboard-feed.vue

@@ -71,7 +71,7 @@ const classes = computed(
     {
       description: "mt-0.5 block text-xs text-muted",
       group: "pt-1 pb-2.5 text-[11px] font-semibold tracking-wide text-dimmed uppercase",
-      item: "flex min-w-0 gap-3",
+      item: "flex min-w-0 gap-3 py-2",
       label: "min-w-0 flex-1 text-[13px] text-default",
       marker: "relative z-[1] grid size-7 shrink-0 place-items-center overflow-hidden rounded-full",
       time: "shrink-0 text-[11.5px] text-dimmed tabular-nums"
@@ -158,11 +158,12 @@ function tabulate() {
 
     <template #default="{ expanded }">
       <div class="flex flex-col">
-        <section v-for="group in groups(expanded)" :key="group.key">
+        <section v-for="group in groups(expanded)" :key="group.key" class="not-first:mt-3.5">
           <h3 v-if="group.time !== void 0" :class="classes.group">
             {{ clock.day(group.time) }}
           </h3>
-          <ol class="flex flex-col">
+          <!-- Rows pad evenly so the hover box frames them; the list cancels the outer padding -->
+          <ol class="-my-2 flex flex-col">
             <li
               v-for="(entry, position) in group.entries"
               :key="entry.key"
@@ -173,7 +174,7 @@ function tabulate() {
   entry.selected && DASHBOARD_SELECTED_ROW
 ]"
             >
-              <!-- Rail: the marker, then a line down to the next event of the group -->
+              <!-- Rail: the marker, then a line through the row padding to the next marker -->
               <div class="relative flex w-7 shrink-0 flex-col items-center">
                 <span v-if="entry.avatar" :class="classes.marker" class="bg-elevated">
                   <img :src="entry.avatar" alt="" class="size-full object-cover" />
@@ -194,10 +195,10 @@ function tabulate() {
                 <span
                   v-if="position < group.entries.length - 1"
                   aria-hidden="true"
-                  class="w-px flex-1 bg-[var(--nut-dash-grid)]"
+                  class="-mb-4 w-px flex-1 bg-[var(--nut-dash-grid)]"
                 />
               </div>
-              <div class="flex min-w-0 flex-1 items-baseline gap-3 pt-[5px] pb-3.5">
+              <div class="flex min-w-0 flex-1 items-baseline gap-3 pt-[5px]">
                 <div :class="classes.label">
                   {{ entry.label }}
                   <small v-if="entry.description" :class="classes.description">

package/dist/runtime/dashboard/composables/use-dashboard-remote-options.js

@@ -1,12 +1,12 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/vue-query";
 import { refDebounced } from "@vueuse/core";
 import { computed, markRaw, shallowRef } from "vue";
-import { DASHBOARD_REMOTE_OPTIONS_DEFAULTS } from "../constants/query.js";
 import {
-  mergeDashboardOptions,
-  resolveDashboardOptionValues,
-  resolveDashboardRemoteNextPage
-} from "../utils/options.js";
+  REMOTE_OPTIONS_FIRST_PAGE,
+  resolveRemoteOptionsNextPage
+} from "../../shared/utils/remote-options.js";
+import { DASHBOARD_REMOTE_OPTIONS_DEFAULTS } from "../constants/query.js";
+import { mergeDashboardOptions, resolveDashboardOptionValues } from "../utils/options.js";
 export function useDashboardRemoteOptions(params) {
   const { config } = params;
   const queryKey = config.queryKey ?? params.queryKey;
@@ -21,8 +21,8 @@ export function useDashboardRemoteOptions(params) {
   const pages = useInfiniteQuery(
     computed(() => ({
       enabled: (open.value || searchInput.value !== "") && (search.value.length === 0 || search.value.length >= minLength),
-      getNextPageParam: (lastPage, allPages) => resolveDashboardRemoteNextPage(lastPage, allPages.length),
-      initialPageParam: { cursor: null, index: 1 },
+      getNextPageParam: (lastPage, allPages) => resolveRemoteOptionsNextPage(lastPage, allPages.length),
+      initialPageParam: REMOTE_OPTIONS_FIRST_PAGE,
       queryFn: ({ pageParam }) => config.load({ page: { ...pageParam, size: pageSize }, search: search.value }),
       queryKey: [...queryKey, "options", search.value],
       staleTime: DASHBOARD_REMOTE_OPTIONS_DEFAULTS.staleTime

package/dist/runtime/dashboard/utils/options.d.ts

@@ -1,12 +1,5 @@
-import type { RemoteOptionsResult } from '../../shared/types/remote-options.js';
 import type { DashboardOption } from '../types/index.js';
-export interface DashboardRemotePageParam {
-    index: number;
-    cursor: string | null;
-}
 /** Normalizes a single or multiple param value to its string keys, in value order. */
 export declare function resolveDashboardOptionValues(value: unknown): string[];
-/** Next page of a page- or cursor-paginated remote source, or `undefined` at the end. */
-export declare function resolveDashboardRemoteNextPage(page: RemoteOptionsResult<DashboardOption<string>>, loadedPages: number): DashboardRemotePageParam | undefined;
 /** Unique options by value, keeping the first occurrence. */
 export declare function mergeDashboardOptions(...lists: readonly (readonly DashboardOption[])[]): DashboardOption[];

package/dist/runtime/dashboard/utils/options.js

@@ -3,11 +3,6 @@ export function resolveDashboardOptionValues(value) {
   if (Array.isArray(value)) return value.filter((entry) => !isNullish(entry)).map(String);
   return isNullish(value) ? [] : [String(value)];
 }
-export function resolveDashboardRemoteNextPage(page, loadedPages) {
-  if ("nextCursor" in page)
-    return page.nextCursor ? { cursor: page.nextCursor, index: loadedPages + 1 } : void 0;
-  return page.hasMore ? { cursor: null, index: loadedPages + 1 } : void 0;
-}
 export function mergeDashboardOptions(...lists) {
   const seen = /* @__PURE__ */ new Set();
   const merged = [];

package/dist/runtime/i18n/locales/en.js

@@ -352,7 +352,9 @@ export default defineUiToolsLocale({
           lte: "at most"
         },
         options: {
-          empty: "No matching options."
+          empty: "No matching options.",
+          loadError: "Options could not be loaded.",
+          retry: "Retry"
         },
         panel: {
           apply: "Apply",

package/dist/runtime/i18n/locales/fr.js

@@ -352,7 +352,9 @@ export default defineUiToolsLocale({
           lte: "au plus"
         },
         options: {
-          empty: "Aucune option correspondante."
+          empty: "Aucune option correspondante.",
+          loadError: "Impossible de charger les options.",
+          retry: "R\xE9essayer"
         },
         panel: {
           apply: "Appliquer",

package/dist/runtime/i18n/types.d.ts

@@ -78,6 +78,9 @@ export interface UiToolsTableMessages {
         };
         options: {
             empty: string;
+            /** Remote option pages failed to load. */
+            loadError: string;
+            retry: string;
         };
         booleans: {
             true: string;

package/dist/runtime/shared/styles/scrollbars.css

@@ -1 +1 @@
-:root{--nut-scrollbar-size:11px;--nut-scrollbar-gap:3px;--nut-scrollbar-thumb:color-mix(in srgb,var(--ui-text,#1f1d1a) 18%,transparent);--nut-scrollbar-thumb-hover:color-mix(in srgb,var(--ui-text,#1f1d1a) 32%,transparent);--nut-scrollbar-thumb-active:color-mix(in srgb,var(--ui-text,#1f1d1a) 44%,transparent)}@supports not selector(::-webkit-scrollbar){*{scrollbar-color:transparent transparent;scrollbar-width:thin;transition:scrollbar-color .2s ease}:hover{scrollbar-color:var(--nut-scrollbar-thumb) transparent}}@supports selector(::-webkit-scrollbar){::-webkit-scrollbar{background:transparent;height:var(--nut-scrollbar-size);width:var(--nut-scrollbar-size)}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:transparent;border:var(--nut-scrollbar-gap) solid transparent;border-radius:999px}:hover::-webkit-scrollbar-thumb{background-color:var(--nut-scrollbar-thumb)}::-webkit-scrollbar-thumb:hover{background-color:var(--nut-scrollbar-thumb-hover)}::-webkit-scrollbar-thumb:active{background-color:var(--nut-scrollbar-thumb-active)}}
+:root{--nut-scrollbar-size:11px;--nut-scrollbar-gap:3px;--nut-scrollbar-thumb:color-mix(in srgb,var(--ui-text,#1f1d1a) 18%,transparent);--nut-scrollbar-thumb-hover:color-mix(in srgb,var(--ui-text,#1f1d1a) 32%,transparent);--nut-scrollbar-thumb-active:color-mix(in srgb,var(--ui-text,#1f1d1a) 44%,transparent)}@supports (scrollbar-width:thin){*{scrollbar-color:transparent transparent;scrollbar-width:thin;transition:scrollbar-color .2s ease}:hover{scrollbar-color:var(--nut-scrollbar-thumb) transparent}}@supports not (scrollbar-width:thin){::-webkit-scrollbar{background:transparent;height:var(--nut-scrollbar-size);width:var(--nut-scrollbar-size)}::-webkit-scrollbar-corner,::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:transparent;border:var(--nut-scrollbar-gap) solid transparent;border-radius:999px}:hover::-webkit-scrollbar-thumb{background-color:var(--nut-scrollbar-thumb)}::-webkit-scrollbar-thumb:hover{background-color:var(--nut-scrollbar-thumb-hover)}::-webkit-scrollbar-thumb:active{background-color:var(--nut-scrollbar-thumb-active)}}

package/dist/runtime/shared/utils/remote-options.d.ts

@@ -0,0 +1,10 @@
+import type { RemoteOptionsResult } from '../types/remote-options.js';
+/** Position of a page in a remote option source: its 1-based index, and its cursor when paged by cursor. */
+export interface RemoteOptionsPageParam {
+    index: number;
+    cursor: string | null;
+}
+/** First page of any remote option source. */
+export declare const REMOTE_OPTIONS_FIRST_PAGE: RemoteOptionsPageParam;
+/** Next page of a page- or cursor-paginated remote option source, or `undefined` at the end. */
+export declare function resolveRemoteOptionsNextPage<TOption>(page: RemoteOptionsResult<TOption>, loadedPages: number): RemoteOptionsPageParam | undefined;

package/dist/runtime/shared/utils/remote-options.js

@@ -0,0 +1,6 @@
+export const REMOTE_OPTIONS_FIRST_PAGE = { cursor: null, index: 1 };
+export function resolveRemoteOptionsNextPage(page, loadedPages) {
+  if ("nextCursor" in page)
+    return page.nextCursor ? { cursor: page.nextCursor, index: loadedPages + 1 } : void 0;
+  return page.hasMore ? { cursor: null, index: loadedPages + 1 } : void 0;
+}

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

@@ -0,0 +1,11 @@
+import type { useTableFilterOptions } from '../../../composables/use-table-filter-options.js';
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
+type __VLS_Props = {
+    remote: ReturnType<typeof useTableFilterOptions>['remote'];
+    indicator: 'checkbox' | 'radio';
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,76 @@
+<script setup>
+import { useEventListener } from "@vueuse/core";
+import { nextTick, shallowRef, watch } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import FilterOptionLoadingList from "./filter-option-loading-list.vue";
+const PREFETCH_VIEWPORTS = 3;
+const props = defineProps({
+  remote: { type: null, required: true },
+  indicator: { type: String, required: true },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const { t } = useUiToolsLocale();
+const sentinel = shallowRef(null);
+const viewport = shallowRef(null);
+watch(sentinel, (element) => {
+  viewport.value = findScrollContainer(element);
+});
+useEventListener(viewport, "scroll", loadAhead, { passive: true });
+watch(
+  () => [props.remote.hasMore.value, props.remote.loadingMore.value, viewport.value],
+  async () => {
+    await nextTick();
+    loadAhead();
+  },
+  { immediate: true }
+);
+function loadAhead() {
+  const element = viewport.value;
+  const { failed, hasMore, loadingMore, prefetchDistance } = props.remote;
+  if (!element || element.clientHeight === 0) return;
+  if (!hasMore.value || loadingMore.value || failed.value) return;
+  const distance = prefetchDistance.value;
+  const threshold = distance === "viewport" ? element.clientHeight * PREFETCH_VIEWPORTS : Math.max(0, distance);
+  if (element.scrollHeight - element.scrollTop - element.clientHeight <= threshold) {
+    props.remote.loadMore();
+  }
+}
+function findScrollContainer(element) {
+  const marked = element?.closest("[data-filter-option-scroll]");
+  if (marked instanceof HTMLElement) return marked;
+  for (let current = element?.parentElement; current; current = current.parentElement) {
+    if (/(auto|scroll)/.test(getComputedStyle(current).overflowY)) return current;
+  }
+  return null;
+}
+</script>
+
+<template>
+  <div data-filter-option-list-end>
+    <FilterOptionLoadingList
+      v-if="remote.loadingMore.value"
+      :count="3"
+      :indicator="indicator"
+      :size="size"
+      :ui="ui"
+      data-filter-option-loading-more
+    />
+    <div
+      v-else-if="remote.failed.value"
+      class="flex items-center justify-between gap-2 px-2 py-1.5 text-xs text-error"
+      data-filter-option-error
+    >
+      <span class="truncate">{{ t("table.filters.options.loadError") }}</span>
+      <button
+        type="button"
+        class="shrink-0 font-medium underline-offset-2 hover:underline focus-visible:underline focus-visible:outline-none"
+        data-filter-option-retry
+        @click="remote.retry()"
+      >
+        {{ t("table.filters.options.retry") }}
+      </button>
+    </div>
+    <span ref="sentinel" aria-hidden="true" class="block h-px w-full" />
+  </div>
+</template>

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

@@ -0,0 +1,11 @@
+import type { useTableFilterOptions } from '../../../composables/use-table-filter-options.js';
+import type { DataListControlSize, DataListFilterEditorUi } from '../../../types/index.js';
+type __VLS_Props = {
+    remote: ReturnType<typeof useTableFilterOptions>['remote'];
+    indicator: 'checkbox' | 'radio';
+    size?: DataListControlSize;
+    ui?: DataListFilterEditorUi;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -2,9 +2,12 @@ import type { DataListControlSize, DataListFilterEditorUi } from '../../../types
 type __VLS_Props = {
     size?: DataListControlSize;
     indicator?: 'checkbox' | 'radio';
+    /** Placeholder rows. */
+    count?: number;
     ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    count: number;
     indicator: "checkbox" | "radio";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -6,6 +6,7 @@ import { mergeDataListUiClass, resolveFilterEditorSizeClasses } from "../../../u
 const props = defineProps({
   size: { type: String, required: false },
   indicator: { type: String, required: false, default: "radio" },
+  count: { type: Number, required: false, default: 5 },
   ui: { type: Object, required: false }
 });
 const dataListUi = useDataListUi();
@@ -18,7 +19,7 @@ const sizeClasses = computed(() => resolveFilterEditorSizeClasses(resolvedSize.v
 <template>
   <div :class="mergeDataListUiClass('grid gap-0.5', void 0, ui?.list)">
     <div
-      v-for="index in 5"
+      v-for="index in props.count"
       :key="index"
       :class="
   mergeDataListUiClass(

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

@@ -2,9 +2,12 @@ import type { DataListControlSize, DataListFilterEditorUi } from '../../../types
 type __VLS_Props = {
     size?: DataListControlSize;
     indicator?: 'checkbox' | 'radio';
+    /** Placeholder rows. */
+    count?: number;
     ui?: DataListFilterEditorUi;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    count: number;
     indicator: "checkbox" | "radio";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -100,7 +100,7 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
         </button>
 
         <USkeleton
-          v-if="props.showCounts && props.countLoading"
+          v-if="props.showCounts && (props.countLoading || entry.count == null)"
           :class="[sizeClasses.skeletonCount, 'shrink-0 rounded-full']"
         />
         <span

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/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-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> & {