nuxt-ui-tools 1.3.0 → 1.5.0

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.3.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",