nuxt-ui-tools 1.4.0 → 1.5.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.5.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -143,8 +143,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/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-filter-tags.d.vue.ts

@@ -2,7 +2,7 @@ import type { DataListControlSize, DataListFilterTagsUi } from '../../types/inde
 type __VLS_Props = {
     showAdd?: boolean;
     showClear?: boolean;
-    /** `sheet` collapses the tags into a bottom sheet on mobile; `tags` keeps inline tags everywhere. */
+    /** `tags` keeps inline tags on mobile (default); `sheet` moves all filters into a bottom sheet. */
     mobile?: 'sheet' | 'tags';
     size?: DataListControlSize;
     ui?: DataListFilterTagsUi;

package/dist/runtime/table/components/data-list/data-list-filter-tags.vue

@@ -9,7 +9,7 @@ import FilterTagsBar from "../filters/tags/filter-tags-bar.vue";
 const props = defineProps({
   showAdd: { type: Boolean, required: false, default: false },
   showClear: { type: Boolean, required: false, default: false },
-  mobile: { type: String, required: false, default: "sheet" },
+  mobile: { type: String, required: false, default: "tags" },
   size: { type: String, required: false },
   ui: { type: Object, required: false }
 });

package/dist/runtime/table/components/data-list/data-list-filter-tags.vue.d.ts

@@ -2,7 +2,7 @@ import type { DataListControlSize, DataListFilterTagsUi } from '../../types/inde
 type __VLS_Props = {
     showAdd?: boolean;
     showClear?: boolean;
-    /** `sheet` collapses the tags into a bottom sheet on mobile; `tags` keeps inline tags everywhere. */
+    /** `tags` keeps inline tags on mobile (default); `sheet` moves all filters into a bottom sheet. */
     mobile?: 'sheet' | 'tags';
     size?: DataListControlSize;
     ui?: DataListFilterTagsUi;

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

@@ -5,6 +5,7 @@ import USlideover from "@nuxt/ui/components/Slideover.vue";
 import { computed, onMounted, watch } from "vue";
 import { useUiToolsLocale } from "#ui-tools/i18n";
 import { isNullish } from "../../../../shared/utils/predicate";
+import { useDataListBreakpoint } from "../../../composables/use-data-list-breakpoint";
 import { useDataListUi } from "../../../composables/use-data-list-ui";
 import { useTableInternals } from "../../../composables/use-table-internals";
 import { mergeDataListProps, mergeDataListUiClass } from "../../../utils";
@@ -19,6 +20,7 @@ const props = defineProps({
 });
 const internals = useTableInternals();
 const dataListUi = useDataListUi();
+const { isMobile } = useDataListBreakpoint();
 const { locale, t } = useUiToolsLocale();
 const config = computed(() => dataListUi.ui.value.filterPanel);
 const resolvedUi = computed(() => ({ ...config.value?.ui, ...props.ui }));
@@ -39,6 +41,7 @@ const triggerBind = computed(() => {
   return rest;
 });
 const triggerLabel = computed(() => triggerProps.value.label ?? t("table.filters.panel.trigger"));
+const hasTriggerIcon = computed(() => Boolean(triggerProps.value.icon));
 const countProps = computed(
   () => controlProps.value.count === false ? null : mergeDataListProps(
     { color: "neutral", size: "xs", variant: "solid" },
@@ -212,6 +215,10 @@ onMounted(() => {
       <UButton
         v-bind="triggerBind"
         :aria-expanded="open"
+        :aria-label="triggerLabel"
+        :square="
+  triggerProps.square ?? (isMobile && hasTriggerIcon && (!countProps || activeCount === 0))
+"
         :ui="{
   base: mergeDataListUiClass(
     'nut-dl-fpanel-trigger shrink-0',
@@ -221,11 +228,16 @@ onMounted(() => {
 }"
       >
         <span
+          v-if="!isMobile || !hasTriggerIcon || countProps && activeCount > 0"
           :class="
-  mergeDataListUiClass('flex items-center gap-2', void 0, resolvedUi.triggerContent)
+  mergeDataListUiClass(
+    'nut-dl-fpanel-trigger__content flex items-center gap-2',
+    void 0,
+    resolvedUi.triggerContent
+  )
 "
         >
-          <span>{{ triggerLabel }}</span>
+          <span v-if="!isMobile || !hasTriggerIcon">{{ triggerLabel }}</span>
           <UBadge
             v-if="countProps && activeCount > 0"
             v-bind="countProps"

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

@@ -48,11 +48,12 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
         :key="entry.value == null ? entry.label : String(entry.value)"
         :class="
   mergeDataListUiClass(
-    `nut-dl-option flex items-center rounded-md text-left outline-none transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'text-highlighted' : 'text-default'}`,
+    `nut-dl-option flex cursor-pointer items-center rounded-md text-left outline-none transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'text-highlighted' : 'text-default'}`,
     void 0,
     ui?.option
   )
 "
+        @click="emit('select', { event: $event, entry, index, sectionKey: section.key })"
       >
         <UCheckbox
           :model-value="entry.selected ?? false"
@@ -67,7 +68,6 @@ const geometry = computed(() => resolveDataListControlGeometry(size.value));
         <button
           type="button"
           :class="['flex min-w-0 flex-1 items-center text-left', geometry.toolbarGap]"
-          @click="emit('select', { event: $event, entry, index, sectionKey: section.key })"
         >
           <span
             v-if="entry.color"

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

@@ -39,7 +39,7 @@ const modelValue = defineModel({ type: null, ...{
   root: 'w-full',
   fieldset: mergeDataListUiClass('grid gap-0.5', void 0, ui?.list),
   item: mergeDataListUiClass(
-    `flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
+    `relative flex cursor-pointer items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
     void 0,
     ui?.option
   ),
@@ -47,7 +47,7 @@ const modelValue = defineModel({ type: null, ...{
   base: 'cursor-pointer',
   wrapper: 'min-w-0 flex-1',
   label: mergeDataListUiClass(
-    `w-full cursor-pointer text-default ${sizeClasses.optionLabel}`,
+    `w-full cursor-pointer text-default before:absolute before:inset-0 ${sizeClasses.optionLabel}`,
     void 0,
     ui?.optionLabel
   )

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

@@ -61,12 +61,13 @@ function activateTreeEntry(entry) {
       :key="entry.id"
       :class="
   mergeDataListUiClass(
-    `flex items-center rounded-md text-left transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'bg-elevated text-highlighted' : 'text-default'}`,
+    `flex cursor-pointer items-center rounded-md text-left transition-colors hover:bg-elevated ${sizeClasses.option} ${entry.selected ? 'bg-elevated text-highlighted' : 'text-default'}`,
     void 0,
     ui?.option
   )
 "
       :style="getTreeIndentStyle(entry.depth)"
+      @click="activateTreeEntry(entry)"
     >
       <button
         v-if="entry.expandable"
@@ -111,7 +112,6 @@ function activateTreeEntry(entry) {
         type="button"
         class="flex min-w-0 flex-1 items-center text-left"
         :class="geometry.toolbarGap"
-        @click="activateTreeEntry(entry)"
       >
         <UIcon
           v-if="entry.icon"
@@ -161,7 +161,7 @@ function activateTreeEntry(entry) {
   root: 'w-full',
   fieldset: mergeDataListUiClass('grid gap-0.5', void 0, ui?.list),
   item: mergeDataListUiClass(
-    `flex items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
+    `relative flex cursor-pointer items-center rounded-md transition-colors hover:bg-elevated data-[state=checked]:bg-elevated ${sizeClasses.option}`,
     void 0,
     ui?.option
   ),
@@ -169,7 +169,7 @@ function activateTreeEntry(entry) {
   base: 'cursor-pointer',
   wrapper: 'min-w-0 flex-1',
   label: mergeDataListUiClass(
-    `w-full cursor-pointer text-default ${sizeClasses.optionLabel}`,
+    `w-full cursor-pointer text-default before:absolute before:inset-0 ${sizeClasses.optionLabel}`,
     void 0,
     ui?.optionLabel
   )
@@ -187,7 +187,7 @@ function activateTreeEntry(entry) {
           :aria-label="item.expanded ? `Collapse ${item.label}` : `Expand ${item.label}`"
           :aria-expanded="item.expanded"
           :class="[
-  'flex shrink-0 items-center justify-center rounded-sm text-muted transition-transform hover:bg-accented',
+  'relative z-10 flex shrink-0 items-center justify-center rounded-sm text-muted transition-transform hover:bg-accented',
   sizeClasses.optionIcon,
   item.expanded ? 'rotate-90' : ''
 ]"

package/dist/runtime/table/components/filters/shared/filter-trigger-tag.vue

@@ -68,7 +68,13 @@ const labelClass = computed(() => `flex min-w-0 items-center ${geometry.value.to
 
 <template>
   <div
-    :class="mergeDataListUiClass('inline-flex min-w-0 max-w-full align-top', void 0, ui?.root)"
+    :class="
+  mergeDataListUiClass(
+    'nut-dl-tag-wrap inline-flex min-w-0 max-w-full align-top',
+    void 0,
+    ui?.root
+  )
+"
   >
     <template v-if="showOperatorPickerFirst">
       <UButton

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

@@ -1,4 +1,4 @@
-import { useQuery, useQueryClient } from "@tanstack/vue-query";
+import { hashKey, useQuery, useQueryClient } from "@tanstack/vue-query";
 import { computed, shallowRef, watch } from "vue";
 import { isBoolean, isNullish, isNumber, isString } from "../../shared/utils/predicate.js";
 import { QUERY_DEFAULTS } from "../constants/query-state.js";
@@ -11,6 +11,21 @@ export function useTableFilterSelectedOptions(params) {
       return remote ? [{ key: definition.key, remote }] : [];
     })
   );
+  const selectedScopes = computed(
+    () => remoteDefinitions.value.map(({ key, remote }) => ({
+      identity: remote.selectedQueryKeyFor ? hashKey(remote.selectedQueryKeyFor({ values: [] })) : null,
+      key
+    }))
+  );
+  watch(selectedScopes, (current, previous) => {
+    const earlier = new Map(previous.map((entry) => [entry.key, entry.identity]));
+    const next = new Map(known.value);
+    for (const entry of current) {
+      if (earlier.has(entry.key) && earlier.get(entry.key) !== entry.identity)
+        next.delete(entry.key);
+    }
+    if (next.size !== known.value.size) known.value = next;
+  });
   function selectedValues(key) {
     const rule = params.rules.value.find((entry) => entry.key === key);
     const values = Array.isArray(rule?.value) ? rule.value : isNullish(rule?.value) ? [] : [rule.value];

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

@@ -1,3 +1,4 @@
+import type { QueryKey } from '@tanstack/vue-query';
 import type { RemoteOptionsPageRequest, RemoteOptionsPagination, RemoteOptionsResult, RemoteOptionsSearch } from '../../shared/types/remote-options.js';
 import type { TableFilterOperator, TableQueryStateFilterRule, TableQueryStateFilterValue } from './query-state.js';
 import type { TableFacetExecutionResult, TableFacetRequestDescriptor, TableFacetsContext, TableQueryDefinition } from './source.js';
@@ -566,6 +567,12 @@ export interface TableFilterRemoteOptions<TValue = TableFilterPrimitiveValue, TP
     resolveSelected?: {
         bivarianceHack(request: TableFilterRemoteSelectedRequest<TValue>): TableQueryDefinition<readonly TableOptionEntryForPresentation<TValue, TPresentation>[]>;
     }['bivarianceHack'];
+    /** Identity of a selected lookup for reusable loaders with changing external scope. */
+    selectedQueryKeyFor?: {
+        bivarianceHack(request: {
+            values: readonly TValue[];
+        }): QueryKey;
+    }['bivarianceHack'];
     /**
      * Page size, and how far before the list end the next page loads. Defaults to
      * `{ type: 'page', size: 25 }` with the next page requested three viewport heights ahead.

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

@@ -1,6 +1,5 @@
 import type { QueryKey } from '@tanstack/vue-query';
-import type { QueryFnDefinition } from '../../shared/types/query.js';
-import type { RemoteOptionsPageRequest, RemoteOptionsPagination, RemoteOptionsResult, RemoteOptionsSearch } from '../../shared/types/remote-options.js';
+import type { RemoteOptionsLoader, RemoteOptionsPagination, RemoteOptionsSearch } from '../../shared/types/remote-options.js';
 import type { TableResolvedFilterGroup } from './filters.js';
 import type { TableCursorPageResult, TableOffsetPageResult, TableRemoteSourceRequest, TableSourceExecutionResult, TableSourceQueryResult, TableSourceRow } from './source.js';
 import type { GenericObject, TableKnownFieldPath, TableSortingRule, TableSortKey } from './utils.js';
@@ -47,18 +46,6 @@ export interface RemoteTableOptionsConfig<TRow extends GenericObject, TOption ex
 }
 /**
  * Remote option source built by `remoteTableOptions()`. It fits dashboard `p.remote()`, table
- * option filters (`source.remote`), and form remote options (`source: options.load`).
+ * option filters (`source.remote`), and form remote options (`loader: options`).
  */
-export interface RemoteTableOptions<TOption> {
-    /** Query definition of one page of options for a search term. */
-    load: (request: {
-        search: string;
-        page: RemoteOptionsPageRequest;
-    }) => QueryFnDefinition<RemoteOptionsResult<TOption>>;
-    /** Query definition of the options of selected values. */
-    resolveSelected: (request: {
-        values: readonly (string | number | boolean)[];
-    }) => QueryFnDefinition<readonly TOption[]>;
-    pagination: RemoteOptionsPagination;
-    search?: RemoteOptionsSearch;
-}
+export type RemoteTableOptions<TOption> = RemoteOptionsLoader<TOption>;

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

@@ -1,4 +1,5 @@
-import { isArray, isFunction, isObject } from "../../shared/utils/predicate.js";
+import { isArray, isObject } from "../../shared/utils/predicate.js";
+import { mapRemoteOptionsQuery } from "../../shared/utils/remote-options-query.js";
 const DEFAULT_PAGINATION = { size: 25, type: "cursor" };
 export function remoteTableOptions(query, config) {
   const pagination = config.pagination ?? DEFAULT_PAGINATION;
@@ -13,55 +14,54 @@ export function remoteTableOptions(query, config) {
       sorting: params.filters ? [] : [...sorting]
     };
   }
+  function selectedRequest(values) {
+    return request({
+      filters: [
+        {
+          children: [
+            {
+              key: config.valueKey ?? "id",
+              operator: "isAnyOf",
+              type: "condition",
+              value: [...values]
+            }
+          ],
+          combinator: "and",
+          type: "group"
+        }
+      ],
+      page: { cursor: null, index: 1, size: Math.max(1, values.length) },
+      search: ""
+    });
+  }
   return {
     load: ({ page, search: term }) => mapQuery(query(request({ page, search: term })), (result) => ({
       ...resolvePage(result),
       options: result.rows.map(config.option)
     })),
     pagination,
-    resolveSelected: ({ values }) => mapQuery(
-      query(
-        request({
-          filters: [
-            {
-              children: [
-                {
-                  key: config.valueKey ?? "id",
-                  operator: "isAnyOf",
-                  type: "condition",
-                  value: [...values]
-                }
-              ],
-              combinator: "and",
-              type: "group"
-            }
-          ],
-          page: { cursor: null, index: 1, size: Math.max(1, values.length) },
-          search: ""
-        })
-      ),
-      (result) => result.rows.map(config.option)
-    ),
-    search
+    queryKeyFor: ({ page, search: term }) => [
+      ...query(request({ page, search: term })).queryKey,
+      "remote-options"
+    ],
+    resolveSelected: ({ values }) => mapQuery(query(selectedRequest(values)), (result) => result.rows.map(config.option)),
+    search,
+    selectedQueryKeyFor: ({ values }) => [
+      ...query(selectedRequest(values)).queryKey,
+      "remote-options"
+    ]
   };
 }
 function mapQuery(definition, map) {
-  const { queryKey } = definition;
-  const queryFn = "queryFn" in definition ? definition.queryFn : void 0;
-  return {
-    async queryFn(context) {
-      if (!isQueryFn(queryFn))
-        throw new Error("[remoteTableOptions] `query` must return a query with a queryFn.");
-      const result = await queryFn({ ...context, queryKey });
+  return mapRemoteOptionsQuery(
+    definition,
+    (result) => {
       if (!isTableResult(result))
         throw new Error("[remoteTableOptions] the query must resolve to a table response (`rows`).");
       return map(result);
     },
-    queryKey: [...queryKey, "remote-options"]
-  };
-}
-function isQueryFn(value) {
-  return isFunction(value);
+    ["remote-options"]
+  );
 }
 function isTableResult(value) {
   return isObject(value) && isArray(value.rows);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Nuxt module and runtime toolkit for UI-heavy Nuxt applications",
   "homepage": "https://github.com/ChronicStone/nuxt-ui-tools#readme",
   "bugs": "https://github.com/ChronicStone/nuxt-ui-tools/issues",