nuxt-ui-tools 1.4.0 → 1.6.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.4.0",
+  "version": "1.6.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -36,6 +36,7 @@ function getPublicComponents(runtimeDir, options) {
       "SortMenu",
       "LayoutSwitch",
       "Content",
+      "ErrorState",
       "Table",
       "Grid",
       "Pagination",
@@ -143,8 +144,9 @@ function setupImports(runtimeDir) {
       { from: "i18n", name: "provideUiToolsLocale" },
       { from: "i18n", name: "useUiToolsLocale" }
     ]),
-    // Shared responsive helpers
+    // Shared runtime
     ...withRuntime(runtimeDir, [
+      { from: "shared", name: "defineRemoteOptions" },
       { from: "shared", name: "getResponsiveValue" },
       { from: "shared", name: "parseResponsiveValue" },
       { from: "shared", name: "resolveResponsiveValueAtBreakpoint" },

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

@@ -10,7 +10,6 @@ import { mergeDashboardOptions, resolveDashboardOptionValues } from "../utils/op
 import { runDashboardRemoteResult } from "../utils/remote.js";
 export function useDashboardRemoteOptions(params) {
   const { config } = params;
-  const queryKey = config.queryKey ?? params.queryKey;
   const pageSize = Math.max(
     1,
     config.pagination?.size ?? DASHBOARD_REMOTE_OPTIONS_DEFAULTS.pageSize
@@ -22,6 +21,12 @@ export function useDashboardRemoteOptions(params) {
     computed(() => search.value.trim()),
     config.search?.debounce ?? DASHBOARD_REMOTE_OPTIONS_DEFAULTS.searchDebounce
   );
+  function queryKeyFor(term2) {
+    return config.queryKeyFor?.({
+      page: { ...REMOTE_OPTIONS_FIRST_PAGE, size: pageSize },
+      search: term2
+    }) ?? config.queryKey ?? params.queryKey;
+  }
   const pages = useInfiniteQuery(
     computed(() => ({
       enabled: (open.value || search.value !== "") && (term.value.length === 0 || term.value.length >= minLength),
@@ -33,7 +38,7 @@ export function useDashboardRemoteOptions(params) {
         config.load({ page: { ...context.pageParam, size: pageSize }, search: term.value }),
         context
       ),
-      queryKey: [...queryKey, "options", term.value],
+      queryKey: config.queryKeyFor ? [...queryKeyFor(term.value), { remoteOptionPages: pageSize }] : [...queryKeyFor(term.value), "options", term.value],
       staleTime: DASHBOARD_REMOTE_OPTIONS_DEFAULTS.staleTime
     }))
   );
@@ -50,7 +55,7 @@ export function useDashboardRemoteOptions(params) {
     computed(() => ({
       enabled: Boolean(config.resolveSelected) && missing.value.length > 0,
       queryFn: (context) => config.resolveSelected ? runDashboardRemoteResult(config.resolveSelected({ values: missing.value }), context) : Promise.resolve([]),
-      queryKey: [...queryKey, "selected", missing.value],
+      queryKey: config.selectedQueryKeyFor ? config.selectedQueryKeyFor({ values: missing.value }) : [...queryKeyFor(""), "selected", missing.value],
       // Hydrated labels stay while the next set of missing values resolves.
       placeholderData: (previous) => previous,
       staleTime: DASHBOARD_REMOTE_OPTIONS_DEFAULTS.selectedStaleTime

package/dist/runtime/dashboard/types/filters.d.ts

@@ -150,8 +150,14 @@ export interface DashboardRemoteOptionsConfig {
     /** Defaults to `{ type: 'page', size: 25 }`. */
     pagination?: RemoteOptionsPagination;
     search?: RemoteOptionsSearch;
-    /** Cache identity of the option source. Defaults to a key derived from the filter location. */
+    /** Cache identity of an inline source. Defaults to a key derived from the filter location. */
     queryKey?: QueryKey;
+    /** Cache identity of a reusable loader, derived from its endpoint request and current search. */
+    queryKeyFor?: (request: DashboardRemoteOptionsRequest) => QueryKey;
+    /** Cache identity of a selected lookup, including scope absent from the page endpoint. */
+    selectedQueryKeyFor?: (request: {
+        values: readonly string[];
+    }) => QueryKey;
 }
 /** Option items of a filter: fixed, or read reactively (e.g. from another query's data). */
 export type DashboardFilterItems = readonly DashboardOption[] | (() => readonly DashboardOption[]);

package/dist/runtime/dashboard/utils/builders/dashboard-filters.js

@@ -79,8 +79,25 @@ function optionsFilter(items, options) {
   return defineFilter("options", codec, { ...options, items });
 }
 function remoteFilter(config, extra) {
-  const { load, pagination, queryKey, resolveSelected, search, ...options } = config;
-  const remote = { load, pagination, queryKey, resolveSelected, search };
+  const {
+    load,
+    pagination,
+    queryKey,
+    queryKeyFor,
+    resolveSelected,
+    search,
+    selectedQueryKeyFor,
+    ...options
+  } = config;
+  const remote = {
+    load,
+    pagination,
+    queryKey,
+    queryKeyFor,
+    resolveSelected,
+    search,
+    selectedQueryKeyFor
+  };
   return defineFilter("remote", optionalStringCodec, {
     searchable: true,
     ...options,

package/dist/runtime/form/composables/use-field-options.js

@@ -350,8 +350,27 @@ function resolveRemoteOptionConfig(field) {
     return null;
   }
   const options = Object.getOwnPropertyDescriptor(field, "options")?.value;
+  if (isRemoteLoaderOptionConfig(options)) {
+    const { loader, ...fieldOptions } = options;
+    return {
+      ...fieldOptions,
+      pagination: loader.pagination,
+      queryKeyFor: loader.queryKeyFor,
+      resolveSelected: loader.resolveSelected,
+      search: loader.search,
+      selectedQueryKeyFor: loader.selectedQueryKeyFor,
+      source: loader.load
+    };
+  }
   return isRemoteOptionConfig(options) ? options : null;
 }
+function isRemoteLoaderOptionConfig(value) {
+  if (!isRecord(value) || value.mode !== "remote" || !isRecord(value.loader)) {
+    return false;
+  }
+  const { loader } = value;
+  return isFunction(loader.load) && isFunction(loader.resolveSelected) && isRecord(loader.pagination);
+}
 function isRemoteOptionConfig(value) {
   return isRecord(value) && value.mode === "remote" && isFunction(Object.getOwnPropertyDescriptor(value, "source")?.value) && isRecord(value.pagination);
 }

package/dist/runtime/form/composables/use-remote-field-options.js

@@ -1,4 +1,4 @@
-import { useQueryClient } from "@tanstack/vue-query";
+import { hashKey, useQueryClient } from "@tanstack/vue-query";
 import { debounceFilter, watchWithFilter } from "@vueuse/core";
 import { computed, ref, shallowRef, watch } from "vue";
 import { formOptionKey, mergeResolvedOptions, normalizeOptionItems } from "../utils/options.js";
@@ -384,7 +384,7 @@ export function useRemoteFieldOptions(params) {
         selectedError.value = null;
         return;
       }
-      retainSelected([]);
+      retainSelected(loaded.value);
       if (missingSelected.value.length) {
         void hydrateSelected({ reconcile: false });
       }
@@ -410,6 +410,25 @@ export function useRemoteFieldOptions(params) {
     },
     { deep: true }
   );
+  const pageIdentity = computed(() => {
+    const config = params.config.value;
+    return config?.queryKeyFor ? hashKey(
+      config.queryKeyFor({
+        page: { cursor: null, index: 1, size: pageSize.value },
+        search: ""
+      })
+    ) : null;
+  });
+  const selectedIdentity = computed(() => {
+    const config = params.config.value;
+    return config?.selectedQueryKeyFor ? hashKey(config.selectedQueryKeyFor({ values: [] })) : null;
+  });
+  watch([pageIdentity, selectedIdentity], ([page, selected], [previousPage, previousSelected]) => {
+    if (page === previousPage && selected === previousSelected) return;
+    selectionGeneration.value += 1;
+    if (page !== previousPage) void reload({ clearSearch: false });
+    if (selectedValues.value.length) void hydrateSelected({ reconcile: true });
+  });
   return {
     activate,
     error: errorValue,

package/dist/runtime/form/types/options.d.ts

@@ -1,4 +1,5 @@
-import type { RemoteOptionsPageRequest, RemoteOptionsPagination, RemoteOptionsResult, RemoteOptionsSearch } from '../../shared/types/remote-options.js';
+import type { QueryKey } from '@tanstack/vue-query';
+import type { RemoteOptionsLoader, RemoteOptionsPageRequest, RemoteOptionsPagination, RemoteOptionsResult, RemoteOptionsSearch } from '../../shared/types/remote-options.js';
 import type { FormValue } from './/index.js';
 import type { FormFieldCallback, FormFieldCallbackParams } from './callbacks.js';
 import type { FormQueryOptions } from './context.js';
@@ -92,6 +93,15 @@ export interface FormRemoteOptionConfig<TOption, TContext = NonNullable<unknown>
     resolveSelected?: (request: FormRemoteSelectedRequest<TContext, TDeps, TValue, TOption>) => FormRemoteSource<readonly TOption[]>;
     pagination: RemoteOptionsPagination;
     search?: RemoteOptionsSearch;
+    /** Identity of the first page, so reusable loaders follow external scope changes. */
+    queryKeyFor?: (request: {
+        search: string;
+        page: RemoteOptionsPageRequest;
+    }) => QueryKey;
+    /** Identity of selected labels, including scope absent from the page endpoint. */
+    selectedQueryKeyFor?: (request: {
+        values: readonly FormOptionValue[];
+    }) => QueryKey;
     /** Dependency aliases whose changes reset the loaded pages and re-run selected hydration. */
     refreshOn?: readonly string[];
     /** Clears selected values the latest successful selected hydration did not return. Defaults to `false`. */
@@ -103,4 +113,14 @@ export interface FormRemoteOptionConfig<TOption, TContext = NonNullable<unknown>
     /** Disable the field while its option source has no usable data yet. */
     disableOnLoading?: boolean;
 }
-export type FormAnyOptionConfig<TOption, TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue = FormValue> = FormOptionConfig<TOption, TContext, TDeps, TValue> | FormRemoteOptionConfig<TOption, TContext, TDeps, TValue> | FormOptionsSource<TOption, TContext, TDeps, TValue>;
+/** Reuses one remote loader while keeping field-specific refresh and creation behavior local. */
+export interface FormRemoteLoaderOptionConfig<TOption, TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue = FormValue> extends Omit<FormRemoteOptionConfig<TOption, TContext, TDeps, TValue>, 'source' | 'resolveSelected' | 'pagination' | 'search' | 'queryKeyFor' | 'selectedQueryKeyFor'> {
+    loader: RemoteOptionsLoader<TOption>;
+    source?: never;
+    resolveSelected?: never;
+    pagination?: never;
+    search?: never;
+    queryKeyFor?: never;
+    selectedQueryKeyFor?: never;
+}
+export type FormAnyOptionConfig<TOption, TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue = FormValue> = FormOptionConfig<TOption, TContext, TDeps, TValue> | FormRemoteOptionConfig<TOption, TContext, TDeps, TValue> | FormRemoteLoaderOptionConfig<TOption, TContext, TDeps, TValue> | FormOptionsSource<TOption, TContext, TDeps, TValue>;

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

@@ -369,6 +369,7 @@ export default defineUiToolsLocale({
         loadMore: "Load more",
         loadingMore: "Loading\u2026",
         noMatchingFilters: "No matching filters.",
+        clearSearch: "Clear search",
         resetColumns: "Default",
         resetFilters: "Reset",
         searchColumns: "Search columns...",
@@ -422,6 +423,24 @@ export default defineUiToolsLocale({
           done: "Done",
           order: "Order",
           sortBy: "Sort by"
+        },
+        date: {
+          custom: "Custom range",
+          end: "End",
+          presets: {
+            last30Days: "Last 30 days",
+            last7Days: "Last 7 days",
+            lastMonth: "Last month",
+            sevenDaysAgo: "7 days ago",
+            startOfMonth: "Start of month",
+            startOfYear: "Start of year",
+            thisMonth: "This month",
+            today: "Today",
+            yearToDate: "Year to date",
+            yesterday: "Yesterday"
+          },
+          range: "Date range",
+          start: "Start"
         }
       },
       footer: {
@@ -463,8 +482,8 @@ export default defineUiToolsLocale({
         },
         gridError: {
           action: "Retry",
-          description: "The latest request failed. Try again once the data source is available.",
-          title: "Unable to load this grid"
+          description: "The last request failed. Try again in a moment.",
+          title: "This list could not be loaded"
         },
         loaded: "{count} loaded",
         loadingMore: "Loading more\u2026"
@@ -472,6 +491,8 @@ export default defineUiToolsLocale({
       summaries: {
         filtered: "Filtered",
         page: "Page",
+        rowOne: "row",
+        rowOther: "rows",
         selection: "Selection",
         total: "Total"
       }

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

@@ -369,6 +369,7 @@ export default defineUiToolsLocale({
         loadMore: "Charger plus",
         loadingMore: "Chargement\u2026",
         noMatchingFilters: "Aucun filtre correspondant.",
+        clearSearch: "Effacer la recherche",
         resetColumns: "Par d\xE9faut",
         resetFilters: "R\xE9initialiser",
         searchColumns: "Rechercher des colonnes...",
@@ -422,6 +423,24 @@ export default defineUiToolsLocale({
           done: "Termin\xE9",
           order: "Ordre",
           sortBy: "Trier par"
+        },
+        date: {
+          custom: "P\xE9riode personnalis\xE9e",
+          end: "Fin",
+          presets: {
+            last30Days: "30 derniers jours",
+            last7Days: "7 derniers jours",
+            lastMonth: "Le mois dernier",
+            sevenDaysAgo: "Il y a 7 jours",
+            startOfMonth: "D\xE9but du mois",
+            startOfYear: "D\xE9but de l'ann\xE9e",
+            thisMonth: "Ce mois-ci",
+            today: "Aujourd'hui",
+            yearToDate: "Depuis le d\xE9but de l'ann\xE9e",
+            yesterday: "Hier"
+          },
+          range: "P\xE9riode",
+          start: "D\xE9but"
         }
       },
       footer: {
@@ -463,8 +482,8 @@ export default defineUiToolsLocale({
         },
         gridError: {
           action: "R\xE9essayer",
-          description: "La derni\xE8re requ\xEAte a \xE9chou\xE9. R\xE9essayez une fois la source de donn\xE9es disponible.",
-          title: "Impossible de charger cette grille"
+          description: "La derni\xE8re requ\xEAte a \xE9chou\xE9. R\xE9essayez dans un instant.",
+          title: "Impossible de charger cette liste"
         },
         loaded: "{count} charg\xE9s",
         loadingMore: "Chargement en cours\u2026"
@@ -472,6 +491,8 @@ export default defineUiToolsLocale({
       summaries: {
         filtered: "Filtr\xE9s",
         page: "Page",
+        rowOne: "ligne",
+        rowOther: "lignes",
         selection: "S\xE9lection",
         total: "Total"
       }

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

@@ -21,6 +21,7 @@ export interface UiToolsTableMessages {
     };
     controls: {
         addFilter: string;
+        clearSearch: string;
         resetFilters: string;
         columnsCount: string;
         close: string;
@@ -46,6 +47,8 @@ export interface UiToolsTableMessages {
         page: string;
         filtered: string;
         selection: string;
+        rowOne: string;
+        rowOther: string;
     };
     columnsMenu: {
         sortAsc: string;
@@ -66,6 +69,24 @@ export interface UiToolsTableMessages {
             sortBy: string;
             order: string;
         };
+        date: {
+            range: string;
+            custom: string;
+            start: string;
+            end: string;
+            presets: {
+                today: string;
+                yesterday: string;
+                sevenDaysAgo: string;
+                startOfMonth: string;
+                startOfYear: string;
+                last7Days: string;
+                last30Days: string;
+                thisMonth: string;
+                lastMonth: string;
+                yearToDate: string;
+            };
+        };
         panel: {
             trigger: string;
             clearAll: string;

package/dist/runtime/shared/index.d.ts

@@ -1,5 +1,6 @@
 export * from './composables/use-responsive-value.js';
 export * from './composables/use-range-select.js';
+export { defineRemoteOptions } from './utils/define-remote-options.js';
 export * from './types/responsive.js';
 export * from './types/utils.js';
 export * from './utils/object.js';

package/dist/runtime/shared/index.js

@@ -1,5 +1,6 @@
 export * from "./composables/use-responsive-value.js";
 export * from "./composables/use-range-select.js";
+export { defineRemoteOptions } from "./utils/define-remote-options.js";
 export * from "./types/responsive.js";
 export * from "./types/utils.js";
 export * from "./utils/object.js";

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

@@ -1,4 +1,4 @@
-import type { QueryFunction, QueryKey, UseQueryOptions } from '@tanstack/vue-query';
+import type { QueryFunction, QueryKey, QueryOptions, UseQueryOptions } from '@tanstack/vue-query';
 /**
  * TanStack query definition accepted by runtime domains that own the `useQuery` call themselves
  * (table sources, dashboard queries): an explicit `queryKey`, an optional `queryFn`, and any other
@@ -16,3 +16,7 @@ export interface QueryFnDefinition<TData = unknown> {
     queryKey: QueryKey;
     queryFn: QueryFunction<TData, QueryKey, string | null>;
 }
+/** Data returned by a query function, including generated options whose function may be a ref. */
+export type QueryFunctionResult<TQuery> = TQuery extends {
+    queryFn: (...args: never[]) => infer TResult;
+} ? Awaited<TResult> : TQuery extends QueryOptions<infer TQueryFnData, infer _TError, infer _TData, infer _TQueryData, infer _TQueryKey> ? Awaited<TQueryFnData> : TQuery extends UseQueryOptions<infer _TQueryFnData, infer _TError, infer TData, infer _TQueryData, infer _TQueryKey> ? Awaited<TData> : never;

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

@@ -1,3 +1,11 @@
+import type { QueryKey } from '@tanstack/vue-query';
+import type { QueryFnDefinition, QueryFunctionResult } from './query.js';
+export type RemoteOptionValue = string | number | boolean;
+/** Option shape shared by dashboard, table, and form remote pickers. */
+export interface RemoteOption<TValue extends RemoteOptionValue = RemoteOptionValue> {
+    value: TValue;
+    label: string;
+}
 /**
  * Page envelope returned by an index-paginated remote option source.
  */
@@ -35,3 +43,51 @@ export interface RemoteOptionsSearch {
     /** Minimum term length before a search request runs. Defaults to 0. */
     minLength?: number;
 }
+/** One reusable, query-backed option source. Inline remote definitions remain supported. */
+export interface RemoteOptionsLoader<TOption> {
+    load: (request: {
+        search: string;
+        page: RemoteOptionsPageRequest;
+    }) => QueryFnDefinition<RemoteOptionsResult<TOption>>;
+    resolveSelected: (request: {
+        values: readonly RemoteOptionValue[];
+    }) => QueryFnDefinition<readonly TOption[]>;
+    pagination: RemoteOptionsPagination;
+    search?: RemoteOptionsSearch;
+    /** Identity of a page query, used by pickers that cache an infinite list as one query. */
+    queryKeyFor?: (request: {
+        search: string;
+        page: RemoteOptionsPageRequest;
+    }) => QueryKey;
+    /** Identity of a selected-value lookup, including any scope used only by that endpoint. */
+    selectedQueryKeyFor?: (request: {
+        values: readonly RemoteOptionValue[];
+    }) => QueryKey;
+}
+/** Query options returned by an endpoint or generated client. */
+export interface RemoteOptionsQueryDefinition {
+    queryKey: QueryKey;
+}
+/** Endpoint query definitions; supplied before mapping so their result types are inferred first. */
+export interface RemoteOptionsQueries<TPageQuery extends RemoteOptionsQueryDefinition, TSelectedQuery extends RemoteOptionsQueryDefinition> {
+    load: (request: {
+        search: string;
+        page: RemoteOptionsPageRequest;
+    }) => TPageQuery;
+    resolveSelected: (request: {
+        values: readonly RemoteOptionValue[];
+    }) => TSelectedQuery;
+}
+/** Maps endpoint responses to the option result shared by all three pickers. */
+export interface DefineRemoteOptionsConfig<TPageQuery extends RemoteOptionsQueryDefinition, TSelectedQuery extends RemoteOptionsQueryDefinition, TOption extends RemoteOption> {
+    /** Stable namespace for mapped query results; requests still use their endpoint query keys. */
+    key: string;
+    /** Maps the endpoint page to options and the next-page marker. */
+    mapPage: (result: QueryFunctionResult<TPageQuery>) => RemoteOptionsResult<TOption>;
+    /** Maps selected lookup results to option items. */
+    mapSelected: (result: QueryFunctionResult<TSelectedQuery>) => readonly NoInfer<TOption>[];
+    /** Page type and size expected by the endpoint. */
+    pagination: RemoteOptionsPagination;
+    /** Debounce and minimum term length applied by the consuming picker. */
+    search?: RemoteOptionsSearch;
+}

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

@@ -0,0 +1,23 @@
+import type { DefineRemoteOptionsConfig, RemoteOption, RemoteOptionsLoader, RemoteOptionsQueries, RemoteOptionsQueryDefinition } from '../types/remote-options.js';
+/**
+ * Defines a query-backed option loader once for dashboard filters, table filters, and form fields.
+ * The endpoint's query key separates requests; `key` separates mapped option data from other
+ * consumers of that endpoint. Inline remote definitions continue to work in each domain.
+ *
+ * @example
+ * ```ts
+ * const users = defineRemoteOptions({
+ *   load: ({ search, page }) => api.users.list.queryOptions({ search, cursor: page.cursor }),
+ *   resolveSelected: ({ values }) => api.users.byIds.queryOptions({ ids: values }),
+ * }, {
+ *   key: 'users',
+ *   mapPage: ({ rows, nextCursor }) => ({
+ *     options: rows.map((user) => ({ value: user.id, label: user.name })),
+ *     nextCursor,
+ *   }),
+ *   mapSelected: ({ rows }) => rows.map((user) => ({ value: user.id, label: user.name })),
+ *   pagination: { type: 'cursor', size: 25 },
+ * })
+ * ```
+ */
+export declare function defineRemoteOptions<TPageQuery extends RemoteOptionsQueryDefinition, TSelectedQuery extends RemoteOptionsQueryDefinition, const TOption extends RemoteOption>(queries: RemoteOptionsQueries<TPageQuery, TSelectedQuery>, config: DefineRemoteOptionsConfig<TPageQuery, TSelectedQuery, TOption>): RemoteOptionsLoader<TOption>;

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

@@ -0,0 +1,24 @@
+import { mapRemoteOptionsQuery } from "./remote-options-query.js";
+export function defineRemoteOptions(queries, config) {
+  const suffix = ["remote-options", config.key];
+  return {
+    load: (request) => mapRemoteOptionsQuery(
+      queries.load(request),
+      config.mapPage,
+      [...suffix, "page"]
+    ),
+    pagination: config.pagination,
+    queryKeyFor: (request) => [...queries.load(request).queryKey, ...suffix, "page"],
+    resolveSelected: (request) => mapRemoteOptionsQuery(
+      queries.resolveSelected(request),
+      config.mapSelected,
+      [...suffix, "selected"]
+    ),
+    selectedQueryKeyFor: (request) => [
+      ...queries.resolveSelected(request).queryKey,
+      ...suffix,
+      "selected"
+    ],
+    search: config.search
+  };
+}

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

@@ -0,0 +1,6 @@
+import type { QueryKey } from '@tanstack/vue-query';
+import type { QueryFnDefinition } from '../types/query.js';
+/** Maps an endpoint query while keeping its own key and cancellation context. */
+export declare function mapRemoteOptionsQuery<TData, TResult>(definition: {
+    queryKey: QueryKey;
+}, map: (result: TData) => TResult, suffix: readonly unknown[]): QueryFnDefinition<TResult>;

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

@@ -0,0 +1,18 @@
+import { isFunction } from "./predicate.js";
+export function mapRemoteOptionsQuery(definition, map, suffix) {
+  return {
+    async queryFn(context) {
+      if (!hasQueryFunction(definition)) {
+        throw new Error(
+          "[remote options] `load` and `resolveSelected` must return a query with a queryFn."
+        );
+      }
+      const result = await definition.queryFn({ ...context, queryKey: definition.queryKey });
+      return map(result);
+    },
+    queryKey: [...definition.queryKey, ...suffix]
+  };
+}
+function hasQueryFunction(definition) {
+  return "queryFn" in definition && isFunction(definition.queryFn);
+}

package/dist/runtime/table/components/data-list/data-list-content.vue

@@ -104,7 +104,13 @@ watch(
       :error="error"
       :retry="refresh"
     >
-      <DataListErrorState min-height="16rem" :size="resolvedSize" :ui="ui" @retry="refresh" />
+      <DataListErrorState
+        :min-height="fit === 'content' ? '16rem' : void 0"
+        :class="fit === 'content' ? '' : 'min-h-0 flex-1'"
+        :size="resolvedSize"
+        :ui="ui"
+        @retry="refresh"
+      />
     </slot>
     <slot
       v-else-if="empty && $slots.empty"

package/dist/runtime/table/components/data-list/data-list-error-state.d.vue.ts

@@ -3,11 +3,28 @@ type __VLS_Props = {
     minHeight?: string;
     size?: DataListControlSize;
     ui?: DataListContentUi;
+    /** Replaces the localized default title. */
+    title?: string;
+    /** Replaces the localized default description. */
+    description?: string;
+    /** Support reference shown under the description, such as a request identifier. */
+    reference?: string;
+    icon?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};