nuxt-ui-tools 1.1.0 → 1.3.0

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

@@ -19,6 +19,27 @@ export default defineUiToolsLocale({
         series: "{label} (p\xE9riode pr\xE9c\xE9dente)",
         year: "Ann\xE9e pr\xE9c\xE9dente"
       },
+      filters: {
+        all: "Tous",
+        clear: "Effacer le filtre {label}",
+        clearSelection: "Effacer la s\xE9lection",
+        empty: "Aucun r\xE9sultat",
+        label: "Filtres",
+        loadError: "Impossible de charger les options",
+        loading: "Chargement\u2026",
+        more: "{label} +{count}",
+        no: "Non",
+        presets: "Pr\xE9r\xE9glages",
+        reset: "R\xE9initialiser",
+        retry: "R\xE9essayer",
+        search: "Rechercher\u2026",
+        views: "Vues",
+        yes: "Oui"
+      },
+      format: {
+        pointsOne: "{value} pt",
+        pointsOther: "{value} pts"
+      },
       freshness: {
         prefix: "Mis \xE0 jour",
         updated: "Mis \xE0 jour {time}"
@@ -39,6 +60,14 @@ export default defineUiToolsLocale({
         label: "Actualiser",
         off: "D\xE9sactiv\xE9e"
       },
+      page: {
+        loading: "chargement\u2026",
+        updated: "mis \xE0 jour"
+      },
+      series: {
+        add: "Ajouter",
+        remove: "Retirer {label}"
+      },
       rowActions: "Actions pour {label}",
       stat: {
         goal: "Objectif {value}"
@@ -352,7 +381,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;
@@ -416,6 +419,47 @@ export interface UiToolsDashboardMessages {
         auto: string;
         off: string;
     };
+    page: {
+        /** Before the time the data on screen was fetched, after the date: "updated" 3 min ago. */
+        updated: string;
+        /** While the first data loads, after the date. */
+        loading: string;
+    };
+    series: {
+        /** Button of a chart whose series a filter picks, listing the options. */
+        add: string;
+        /** Accessible name of a series chip's remove button: "Remove {label}". */
+        remove: string;
+    };
+    filters: {
+        /** Accessible name of a filter bar. */
+        label: string;
+        /** Accessible name of the view tabs. */
+        views: string;
+        /** Text of an empty selection. */
+        all: string;
+        /** Items of a boolean filter. */
+        yes: string;
+        no: string;
+        /** Pill text of several selected values: "{label} +{count}". */
+        more: string;
+        search: string;
+        empty: string;
+        loading: string;
+        loadError: string;
+        retry: string;
+        clearSelection: string;
+        /** Heading of the presets under a filter's options. */
+        presets: string;
+        /** Accessible name of a pill's clear button: "Clear {label}". */
+        clear: string;
+        reset: string;
+    };
+    format: {
+        /** Signed difference of two percentages, `Intl.PluralRules` "one" form: "{value} pt". */
+        pointsOne: string;
+        pointsOther: string;
+    };
     /** Accessible name of a row's `⋮` menu. */
     rowActions: string;
     alerts: {

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/styles/tokens.css

@@ -1 +1 @@
-:root{--nut-form-veil:rgba(31,29,26,.18)}.dark{--nut-form-veil:rgba(0,0,0,.45)}:where(:root){--nut-dash-s1:var(--ui-primary);--nut-dash-s2:var(--ui-color-neutral-400);--nut-dash-s3:var(--ui-secondary);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 20%,var(--ui-bg));--nut-dash-s5:var(--ui-warning);--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 35%,var(--ui-bg));--nut-dash-up:var(--ui-success);--nut-dash-up-mark:var(--nut-dash-up);--nut-dash-down:var(--ui-error);--nut-dash-muted:var(--ui-border-accented);--nut-dash-track:var(--ui-bg-elevated);--nut-dash-grid:var(--ui-border-muted);--nut-dash-axis:var(--ui-text-dimmed);--nut-dash-ref:var(--ui-text-dimmed);--nut-dash-ref-label:var(--ui-text-muted);--nut-dash-ghost:var(--ui-bg-accented);--nut-dash-ghost-shine:color-mix(in oklab,var(--ui-bg) 70%,transparent)}:where(.dark){--nut-dash-s2:var(--ui-color-neutral-500);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 30%,var(--ui-bg));--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 40%,var(--ui-bg))}@supports (color:oklch(from red l c h)){:where(:root){--nut-dash-s4:oklch(from var(--ui-primary) 0.88 calc(c * 0.45) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.8 calc(c * 0.55) h)}:where(.dark){--nut-dash-s4:oklch(from var(--ui-primary) 0.42 calc(c * 0.6) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.45 calc(c * 0.65) h)}}.nut-dash-chart{--vis-font-family:inherit;--vis-axis-tick-label-color:var(--nut-dash-axis);--vis-axis-tick-label-font-size:10px;--vis-axis-grid-color:var(--nut-dash-grid);--vis-axis-domain-color:var(--nut-dash-grid);--vis-crosshair-line-stroke-color:var(--ui-border-accented);--vis-crosshair-circle-stroke-color:var(--ui-bg);--vis-tooltip-background-color:var(--ui-bg);--vis-tooltip-border-color:var(--ui-border);--vis-tooltip-text-color:var(--ui-text);--vis-tooltip-padding:8px 10px;--vis-tooltip-border-radius:calc(var(--ui-radius)*1.5);--vis-tooltip-shadow-color:rgb(0 0 0/8%);--vis-plotline-label-font-size:10px}.nut-dash-chart--bars [data-vis-component] rect:hover{opacity:.8}.nut-dash-tip{display:flex;flex-direction:column;font-size:12px;gap:4px;min-width:9rem}.nut-dash-tip-title{color:var(--ui-text-muted);font-weight:500}.nut-dash-tip-row{align-items:center;display:flex;gap:6px}.nut-dash-tip-row i{border-radius:2px;height:8px;width:8px}.nut-dash-tip-row span{color:var(--ui-text-muted);flex:1}.nut-dash-tip-row b{font-variant-numeric:tabular-nums;font-weight:600}.nut-dash-ghost{background:var(--nut-dash-ghost)}.nut-dash-shimmer{overflow:hidden;position:relative}.nut-dash-shimmer:after{animation:nut-dash-shimmer 1.6s ease-in-out infinite;background:linear-gradient(100deg,transparent 25%,var(--nut-dash-ghost-shine) 50%,transparent 75%);content:"";inset:0;pointer-events:none;position:absolute;transform:translateX(-100%);will-change:transform}@keyframes nut-dash-shimmer{to{transform:translateX(100%)}}.nut-dash-enter{animation:nut-dash-enter .28s ease-out}@keyframes nut-dash-enter{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}.nut-dash-progress{animation:nut-dash-progress 1.1s ease-in-out infinite}@keyframes nut-dash-progress{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){.nut-dash-shimmer:after{display:none}.nut-dash-enter{animation:none}.nut-dash-progress{animation-duration:3s}}
+:root{--nut-form-veil:rgba(31,29,26,.18)}.dark{--nut-form-veil:rgba(0,0,0,.45)}:where(:root){--nut-dash-s1:var(--ui-primary);--nut-dash-s2:var(--ui-color-neutral-400);--nut-dash-s3:var(--ui-secondary);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 20%,var(--ui-bg));--nut-dash-s5:var(--ui-warning);--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 35%,var(--ui-bg));--nut-dash-up:var(--ui-success);--nut-dash-up-mark:var(--nut-dash-up);--nut-dash-down:var(--ui-error);--nut-dash-muted:var(--ui-border-accented);--nut-dash-track:var(--ui-bg-elevated);--nut-dash-grid:var(--ui-border-muted);--nut-dash-axis:var(--ui-text-dimmed);--nut-dash-ref:var(--ui-text-dimmed);--nut-dash-ref-label:var(--ui-text-muted);--nut-dash-ghost:var(--ui-bg-accented);--nut-dash-ghost-shine:color-mix(in oklab,var(--ui-bg) 70%,transparent);--nut-dash-filter-active:color-mix(in oklab,var(--ui-primary) 9%,var(--ui-bg));--nut-dash-filter-active-line:color-mix(in oklab,var(--ui-primary) 35%,var(--ui-border));--nut-dash-filter-ink:var(--nut-dl-accent-ink,var(--ui-primary));--nut-dash-row-hover:var(--ui-bg-elevated)}:where(.dark){--nut-dash-s2:var(--ui-color-neutral-500);--nut-dash-s4:color-mix(in oklab,var(--ui-primary) 30%,var(--ui-bg));--nut-dash-s6:color-mix(in oklab,var(--ui-secondary) 40%,var(--ui-bg))}@supports (color:oklch(from red l c h)){:where(:root){--nut-dash-s4:oklch(from var(--ui-primary) 0.88 calc(c * 0.45) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.8 calc(c * 0.55) h)}:where(.dark){--nut-dash-s4:oklch(from var(--ui-primary) 0.42 calc(c * 0.6) h);--nut-dash-s6:oklch(from var(--ui-secondary) 0.45 calc(c * 0.65) h)}}.nut-dash-chart{--vis-font-family:inherit;--vis-axis-tick-label-color:var(--nut-dash-axis);--vis-axis-tick-label-font-size:10px;--vis-axis-grid-color:var(--nut-dash-grid);--vis-axis-domain-color:var(--nut-dash-grid);--vis-crosshair-line-stroke-color:var(--ui-border-accented);--vis-crosshair-circle-stroke-color:var(--ui-bg);--vis-tooltip-background-color:var(--ui-bg);--vis-tooltip-border-color:var(--ui-border);--vis-tooltip-text-color:var(--ui-text);--vis-tooltip-padding:8px 10px;--vis-tooltip-border-radius:calc(var(--ui-radius)*1.5);--vis-tooltip-shadow-color:rgb(0 0 0/8%);--vis-plotline-label-font-size:10px}.nut-dash-chart--bars [data-vis-component] rect:hover{opacity:.8}.nut-dash-tip{display:flex;flex-direction:column;font-size:12px;gap:4px;min-width:9rem}.nut-dash-tip-title{color:var(--ui-text-muted);font-weight:500}.nut-dash-tip-row{align-items:center;display:flex;gap:6px}.nut-dash-tip-row i{border-radius:2px;height:8px;width:8px}.nut-dash-tip-row span{color:var(--ui-text-muted);flex:1}.nut-dash-tip-row b{font-variant-numeric:tabular-nums;font-weight:600}.nut-dash-ghost{background:var(--nut-dash-ghost)}.nut-dash-shimmer{overflow:hidden;position:relative}.nut-dash-shimmer:after{animation:nut-dash-shimmer 1.6s ease-in-out infinite;background:linear-gradient(100deg,transparent 25%,var(--nut-dash-ghost-shine) 50%,transparent 75%);content:"";inset:0;pointer-events:none;position:absolute;transform:translateX(-100%);will-change:transform}@keyframes nut-dash-shimmer{to{transform:translateX(100%)}}.nut-dash-enter{animation:nut-dash-enter .28s ease-out}@keyframes nut-dash-enter{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}.nut-dash-progress{animation:nut-dash-progress 1.1s ease-in-out infinite}@keyframes nut-dash-progress{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){.nut-dash-shimmer:after{display:none}.nut-dash-enter{animation:none}.nut-dash-progress{animation-duration:3s}}

package/dist/runtime/shared/types/query.d.ts

@@ -8,3 +8,11 @@ export type QueryDefinition<TData = unknown> = Omit<UseQueryOptions<TData>, 'que
     queryKey: QueryKey;
     queryFn?: QueryFunction<TData, QueryKey, string | null>;
 };
+/**
+ * The smallest query definition: a key and the function that fetches it. Covariant in its data, so
+ * a definition of specific options fits wherever a broader option type is expected.
+ */
+export interface QueryFnDefinition<TData = unknown> {
+    queryKey: QueryKey;
+    queryFn: QueryFunction<TData, QueryKey, string | null>;
+}

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