nuxt-ui-tools 1.2.0 → 1.4.0

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

@@ -19,6 +19,27 @@ export default defineUiToolsLocale({
         series: "{label} (previous period)",
         year: "Previous year"
       },
+      filters: {
+        all: "All",
+        clear: "Clear {label}",
+        clearSelection: "Clear selection",
+        empty: "No results",
+        label: "Filters",
+        loadError: "Options could not be loaded",
+        loading: "Loading\u2026",
+        more: "{label} +{count}",
+        no: "No",
+        presets: "Presets",
+        reset: "Reset",
+        retry: "Retry",
+        search: "Search\u2026",
+        views: "Views",
+        yes: "Yes"
+      },
+      format: {
+        pointsOne: "{value} pt",
+        pointsOther: "{value} pts"
+      },
       freshness: {
         prefix: "Updated",
         updated: "Updated {time}"
@@ -39,6 +60,14 @@ export default defineUiToolsLocale({
         label: "Refresh",
         off: "Off"
       },
+      page: {
+        loading: "loading\u2026",
+        updated: "updated"
+      },
+      series: {
+        add: "Add",
+        remove: "Remove {label}"
+      },
       rowActions: "Actions for {label}",
       stat: {
         goal: "Goal {value}"
@@ -72,6 +101,24 @@ export default defineUiToolsLocale({
         resetButton: "Reset",
         submitButton: "Submit"
       },
+      page: {
+        complete: "Everything is ready.",
+        modifiedOne: "{count} modified.",
+        modifiedOther: "{count} modified.",
+        navigation: "Form sections",
+        optional: "optional",
+        remaining: "{count} left to complete.",
+        resetSection: "Reset",
+        sectionsOne: "{count} section",
+        sectionsOther: "{count} sections",
+        status: {
+          complete: "Complete",
+          invalid: "Has errors",
+          pending: "To complete"
+        },
+        unmodified: "No unsaved changes.",
+        unsavedChanges: "Unsaved changes"
+      },
       fields: {
         array: {
           addItem: "Add item",

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}"
@@ -72,6 +101,24 @@ export default defineUiToolsLocale({
         resetButton: "R\xE9initialiser",
         submitButton: "Soumettre"
       },
+      page: {
+        complete: "Tout est pr\xEAt.",
+        modifiedOne: "{count} modifi\xE9e.",
+        modifiedOther: "{count} modifi\xE9es.",
+        navigation: "Sections du formulaire",
+        optional: "optionnel",
+        remaining: "{count} \xE0 compl\xE9ter.",
+        resetSection: "R\xE9initialiser",
+        sectionsOne: "{count} section",
+        sectionsOther: "{count} sections",
+        status: {
+          complete: "Compl\xE8te",
+          invalid: "Contient des erreurs",
+          pending: "\xC0 compl\xE9ter"
+        },
+        unmodified: "Aucune modification en cours.",
+        unsavedChanges: "Modifications non enregistr\xE9es"
+      },
       fields: {
         array: {
           addItem: "Ajouter un \xE9l\xE9ment",

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

@@ -275,6 +275,35 @@ export interface UiToolsFormMessages {
         cancelButton: string;
         resetButton: string;
     };
+    /** Form page chrome. Counts use `Intl.PluralRules`: `One` for "one", `Other` otherwise. */
+    page: {
+        /** Accessible name of the section navigation when the schema gives it no title. */
+        navigation: string;
+        /** Marks an optional section, in the navigation and on its card. */
+        optional: string;
+        /** Badge under the page title and name of a section's dirty marker. */
+        unsavedChanges: string;
+        /** Button of a modified section that puts its values back. */
+        resetSection: string;
+        /** Bold count inserted in `remaining` and `modified`: "{count} sections". */
+        sectionsOne: string;
+        sectionsOther: string;
+        /** Navigation summary while required sections are incomplete: "{count} to complete." */
+        remaining: string;
+        /** Navigation summary once every required section is complete. */
+        complete: string;
+        /** Navigation summary of a form with dirty checking: "{count} modified." */
+        modifiedOne: string;
+        modifiedOther: string;
+        /** Navigation summary of a form with dirty checking and no change. */
+        unmodified: string;
+        /** Accessible status of a navigation entry. */
+        status: {
+            complete: string;
+            pending: string;
+            invalid: string;
+        };
+    };
     states: {
         contextError: {
             title: string;
@@ -419,6 +448,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/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/table/types/index.d.ts

@@ -5,6 +5,7 @@ export type * from './data-list';
 export type * from './filters';
 export type * from './layout';
 export type * from './query-state';
+export type * from './remote-options';
 export type * from './schema';
 export type * from './source';
 export type * from './state';

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

@@ -0,0 +1,64 @@
+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 { TableResolvedFilterGroup } from './filters.js';
+import type { TableCursorPageResult, TableOffsetPageResult, TableRemoteSourceRequest, TableSourceExecutionResult, TableSourceQueryResult, TableSourceRow } from './source.js';
+import type { GenericObject, TableKnownFieldPath, TableSortingRule, TableSortKey } from './utils.js';
+/** Response of an endpoint speaking the table request protocol. */
+export type RemoteTableResult<TRow extends GenericObject> = TableOffsetPageResult<TRow, string> | TableCursorPageResult<TRow, string> | TableSourceExecutionResult<TRow, string>;
+/** Option built from one row: a value and a label, plus any extra option fields. */
+export interface RemoteTableOption {
+    value: string | number;
+    label: string;
+}
+/** A TanStack query definition: its key, and a `queryFn` or the options that carry one. */
+export interface RemoteTableQueryDefinition {
+    queryKey: QueryKey;
+}
+/**
+ * Query definition of one table request, typically the endpoint a remote table already uses:
+ * `(request) => $api.accounts.query.queryOptions({ body: request })`. The row type is read from
+ * its result, as `tableSource` does.
+ */
+export type RemoteTableQuery<TQuery extends RemoteTableQueryDefinition = RemoteTableQueryDefinition> = (request: TableRemoteSourceRequest) => TQuery;
+/** Row type of the table response a `RemoteTableQuery` resolves to. */
+export type RemoteTableQueryRow<TQuery> = TableSourceRow<TableSourceQueryResult<TQuery>>;
+export interface RemoteTableOptionsConfig<TRow extends GenericObject, TOption extends RemoteTableOption> {
+    /** Option of one row. A method, so the typed callback fits the builder's erased signature. */
+    option(row: TRow): TOption;
+    /**
+     * Fields the search term looks in, or those fields with the debounce (default 250 ms) and
+     * minimum term length (default 0).
+     */
+    search?: readonly TableKnownFieldPath<TRow>[] | ({
+        fields: readonly TableKnownFieldPath<TRow>[];
+    } & RemoteOptionsSearch);
+    /** Order of the options: a field, ascending, or explicit sorting rules. */
+    sort?: TableSortKey<TRow> | readonly TableSortingRule<TableSortKey<TRow>>[];
+    /**
+     * Field holding the option value, matched with `isAnyOf` to resolve the labels of selected
+     * values the loaded pages do not contain. Defaults to `'id'`.
+     */
+    valueKey?: TableKnownFieldPath<TRow> | 'id';
+    /** Filters applied to every request, e.g. active accounts only. */
+    filters?: readonly TableResolvedFilterGroup<TableKnownFieldPath<TRow> | string>[];
+    /** Page type and size. Must match what the endpoint pages by. Defaults to cursor pages of 25. */
+    pagination?: RemoteOptionsPagination;
+}
+/**
+ * Remote option source built by `remoteTableOptions()`. It fits dashboard `p.remote()`, table
+ * option filters (`source.remote`), and form remote options (`source: options.load`).
+ */
+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;
+}

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

@@ -1,9 +1,18 @@
-import type { InfiniteData, QueryFunction, QueryKey } from '@tanstack/vue-query';
+import type { InfiniteData, QueryFunction, QueryKey, UseQueryOptions } from '@tanstack/vue-query';
 import type { QueryDefinition } from '../../shared/types/query.js';
 import type { TableResolvedFilterGroup } from './filters.js';
 import type { GenericObject, TableKnownFieldPath, TablePaginationState, TableSortKey, TableSortingRule, TableRowsFromSourceResult } from './utils.js';
 /** Table name of the shared `QueryDefinition`, kept for public type compatibility. */
 export type TableQueryDefinition<TData = unknown> = QueryDefinition<TData>;
+/**
+ * Result of a query definition: what its `queryFn` resolves to, or the data type of TanStack
+ * options whose `queryFn` may be a ref or `skipToken` (Tuyau's `queryOptions()`).
+ */
+export type TableSourceQueryResult<TQuery> = TQuery extends {
+    queryFn: (...args: never[]) => infer TResult;
+} ? Awaited<TResult> : TQuery extends UseQueryOptions<infer _TQueryFnData, infer _TError, infer TResult, infer _TQueryData, infer _TQueryKey> ? Awaited<TResult> : never;
+/** Row of a table query result: an array of rows, or a page (`{ rows }`). */
+export type TableSourceRow<TResult> = TableRowsFromSourceResult<Awaited<TResult>> extends infer TRow ? TRow extends GenericObject ? TRow : GenericObject : GenericObject;
 export interface TableInfiniteQueryDefinition<TData = unknown> {
     queryKey: QueryKey;
     queryFn: QueryFunction<TData, QueryKey, string | null>;

package/dist/runtime/table/utils/builders/table-source.d.ts

@@ -1,6 +1,5 @@
-import type { QueryKey, UseQueryOptions } from '@tanstack/vue-query';
-import type { GenericObject, TableClientSource, TableCursorPageResult, TableGlobalFacetDescriptor, TableOffsetPageResult, TablePaginationState, TableRemoteSource, TableRemoteSourceRequest, TableResolvedFilterGroup, TableRowsFromSourceResult, TableSourceExecutionResult, TableSortingRule } from '../../types/index.js';
-type TableSourceRow<TResult> = TableRowsFromSourceResult<Awaited<TResult>> extends infer TRow ? TRow extends GenericObject ? TRow : GenericObject : GenericObject;
+import type { QueryKey } from '@tanstack/vue-query';
+import type { GenericObject, TableClientSource, TableCursorPageResult, TableGlobalFacetDescriptor, TableOffsetPageResult, TablePaginationState, TableRemoteSource, TableRemoteSourceRequest, TableResolvedFilterGroup, TableSourceExecutionResult, TableSourceQueryResult, TableSourceRow, TableSortingRule } from '../../types/index.js';
 type ClientTableSourceResult<TResult> = TResult extends readonly GenericObject[] ? TableSourceRow<TResult>[] : TableSourceExecutionResult<TableSourceRow<TResult>>;
 type RemoteTableSourceResult<TResult> = TResult extends {
     pageInfo: {
@@ -25,9 +24,6 @@ interface TableSourceInferenceContext {
 interface TableSourceQueryDefinition {
     queryKey: QueryKey;
 }
-type TableSourceQueryResult<TQuery> = TQuery extends {
-    queryFn: (...args: never[]) => infer TResult;
-} ? Awaited<TResult> : TQuery extends UseQueryOptions<infer _TQueryFnData, infer _TError, infer TResult, infer _TQueryData, infer _TQueryKey> ? Awaited<TResult> : never;
 interface ClientTableSourceInput<TQuery extends TableSourceQueryDefinition> {
     mode?: 'client';
     query: (context: TableSourceInferenceContext) => TQuery;

package/dist/runtime/table/utils/index.d.ts

@@ -8,6 +8,7 @@ export * from './filters/index.js';
 export * from './pagination.js';
 export * from './prefetch.js';
 export * from './query-state.js';
+export * from './remote-table-options.js';
 export * from './resolved-filters.js';
 export * from './rows.js';
 export * from './schema.js';

package/dist/runtime/table/utils/index.js

@@ -8,6 +8,7 @@ export * from "./filters/index.js";
 export * from "./pagination.js";
 export * from "./prefetch.js";
 export * from "./query-state.js";
+export * from "./remote-table-options.js";
 export * from "./resolved-filters.js";
 export * from "./rows.js";
 export * from "./schema.js";

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

@@ -0,0 +1,26 @@
+import type { RemoteTableOption, RemoteTableOptions, RemoteTableOptionsConfig, RemoteTableQuery, RemoteTableQueryDefinition, RemoteTableQueryRow } from '../types/index.js';
+/**
+ * Turns an endpoint that speaks the table request protocol into a remote option source: searchable,
+ * paged, with labels of selected values resolved by an `isAnyOf` filter on `valueKey`. Use it for
+ * dashboard filters (`p.remote(...)`), table option filters (`source.remote`), and form remote
+ * options (`source: options.load`).
+ *
+ * Each page is its own query, keyed after the endpoint's key, so pages are cached and shared by
+ * every picker using the same source.
+ *
+ * The query comes first: the row type is read from its result, so `option` and `search` are typed
+ * whatever order the options are written in.
+ *
+ * @example
+ * ```ts
+ * const accounts = remoteTableOptions(
+ *   (request) => $api.accounts.query.queryOptions({ body: request }),
+ *   {
+ *     search: ['name'],
+ *     sort: 'name',
+ *     option: (account) => ({ label: account.name, value: account.id }),
+ *   },
+ * )
+ * ```
+ */
+export declare function remoteTableOptions<TQuery extends RemoteTableQueryDefinition, const TOption extends RemoteTableOption>(query: RemoteTableQuery<TQuery>, config: RemoteTableOptionsConfig<RemoteTableQueryRow<TQuery>, TOption>): RemoteTableOptions<TOption>;

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

@@ -0,0 +1,88 @@
+import { isArray, isFunction, isObject } from "../../shared/utils/predicate.js";
+const DEFAULT_PAGINATION = { size: 25, type: "cursor" };
+export function remoteTableOptions(query, config) {
+  const pagination = config.pagination ?? DEFAULT_PAGINATION;
+  const { fields, search } = resolveSearch(config.search);
+  const sorting = resolveSorting(config.sort);
+  function request(params) {
+    const { page } = params;
+    return {
+      filters: [...config.filters ?? [], ...params.filters ?? []],
+      pagination: pagination.type === "cursor" ? { count: "none", cursor: page.cursor, mode: "cursor", pageSize: page.size } : { count: "exact", mode: "offset", pageIndex: page.index - 1, pageSize: page.size },
+      search: { fields: [...fields], value: params.search },
+      sorting: params.filters ? [] : [...sorting]
+    };
+  }
+  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
+  };
+}
+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 });
+      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);
+}
+function isTableResult(value) {
+  return isObject(value) && isArray(value.rows);
+}
+function resolvePage(result) {
+  if (!("pageInfo" in result)) return { hasMore: false };
+  return result.pageInfo.mode === "cursor" ? { nextCursor: result.pageInfo.nextCursor } : { hasMore: result.pageInfo.hasNextPage };
+}
+function resolveSearch(search) {
+  if (!search) return { fields: [], search: void 0 };
+  if (isFieldList(search)) return { fields: search, search: void 0 };
+  const { fields, ...options } = search;
+  return { fields, search: options };
+}
+function isFieldList(value) {
+  return Array.isArray(value);
+}
+function resolveSorting(sort) {
+  if (sort === void 0) return [];
+  return isSortingRules(sort) ? sort : [{ dir: "asc", key: sort }];
+}
+function isSortingRules(sort) {
+  return Array.isArray(sort);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ui-tools",
-  "version": "1.2.0",
+  "version": "1.4.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",
@@ -182,18 +182,21 @@
     "@nuxt/module-builder": "^1.0.3",
     "@nuxt/schema": "^4.5.2",
     "@nuxt/ui": "^4.10.0",
+    "@tailwindcss/vite": "4.3.3",
     "@tiptap/y-tiptap": "3.0.9",
     "@types/node": "25.4.0",
     "@unovis/ts": "1.7.0",
     "@unovis/vue": "1.7.0",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vitejs/plugin-vue-jsx": "^5.1.6",
+    "@vitest/browser-playwright": "4.1.11",
     "@vue/test-utils": "2.5.1",
     "changelogen": "^0.6.2",
     "happy-dom": "20.14.5",
     "nuxt": "^4.5.2",
     "oxfmt": "0.64.0",
     "oxlint": "^1.82.0",
+    "playwright": "1.63.0",
     "typescript": "~5.9.3",
     "ultracite": "7.12.0",
     "vitest": "^4.1.11",

package/dist/runtime/dashboard/composables/use-dashboard-param-scope.d.ts

@@ -1,30 +0,0 @@
-import type { QueryKey } from '@tanstack/vue-query';
-import type { DashboardOptionsHandle, DashboardParamMap } from '../types/index.js';
-/**
- * What one param scope exposes. Declared rather than inferred: the inferred type would carry Vue's
- * `Raw<…>` marker, which declaration files cannot name.
- */
-export interface DashboardParamScope {
-    keys: readonly string[];
-    /** Option handles of option-backed params, by param key. */
-    options: Readonly<Record<string, DashboardOptionsHandle>>;
-    /** URL segments of this scope's params, before the scope prefix. */
-    urlKeys: readonly string[];
-    /** Writable facade: one getter / setter per param. */
-    values: object;
-}
-/**
- * Owns the params of one scope (dashboard root, a view, or a query's widget params): exactly one
- * `useQueryStates` instance, a writable values facade, and the option handles of option-backed
- * params. Scopes without params allocate nothing.
- */
-export declare function useDashboardParamScope(params: {
-    definitions: DashboardParamMap;
-    prefix: string;
-    queryKey: QueryKey;
-}): DashboardParamScope;
-/**
- * Exposes several scopes' values through one object, e.g. shared params plus a view's own params
- * inside the view's query factories. Reads and writes go straight to the owning scope.
- */
-export declare function mergeDashboardParamValues(scopes: readonly DashboardParamScope[]): object;

package/dist/runtime/dashboard/composables/use-dashboard-param-scope.js

@@ -1,71 +0,0 @@
-import { markRaw } from "vue";
-import { useQueryStates } from "../../query-state/index.js";
-import { hasProperty } from "../../shared/utils/predicate.js";
-import { useDashboardOptions } from "./use-dashboard-options.js";
-const emptyFacade = markRaw({});
-const noUrlKeys = [];
-export function useDashboardParamScope(params) {
-  const entries = Object.entries(params.definitions).flatMap(
-    ([key, definition]) => isRuntimeParam(definition) ? [[key, definition]] : []
-  );
-  if (entries.length === 0)
-    return { keys: [], options: emptyFacade, urlKeys: noUrlKeys, values: emptyFacade };
-  const schema = {};
-  for (const [key, definition] of entries) {
-    schema[key] = {
-      codec: definition.codec,
-      defaultValue: definition.defaultValue,
-      historyMode: definition.historyMode,
-      omitDefault: definition.omitDefault,
-      urlKey: definition.urlKey
-    };
-  }
-  const state = useQueryStates({ historyMode: "replace", prefix: params.prefix, schema });
-  function read(key) {
-    const current = state.value;
-    return current[key];
-  }
-  function write(key, value) {
-    state.value = { ...state.value, [key]: value ?? params.definitions[key]?.defaultValue };
-  }
-  const values = {};
-  for (const [key] of entries) {
-    Object.defineProperty(values, key, {
-      enumerable: true,
-      get: () => read(key),
-      set: (value) => write(key, value)
-    });
-  }
-  const options = {};
-  for (const [key, definition] of entries) {
-    if (!definition.items && !definition.remote) continue;
-    options[key] = useDashboardOptions({
-      definition,
-      queryKey: [...params.queryKey, key],
-      value: () => read(key)
-    });
-  }
-  return {
-    keys: entries.map(([key]) => key),
-    options: markRaw(options),
-    /** URL segments of this scope's params, before the scope prefix. */
-    urlKeys: entries.map(([key, definition]) => definition.urlKey ?? key),
-    values: markRaw(values)
-  };
-}
-export function mergeDashboardParamValues(scopes) {
-  const merged = {};
-  for (const scope of scopes) {
-    for (const key of scope.keys) {
-      Object.defineProperty(merged, key, {
-        enumerable: true,
-        get: () => Reflect.get(scope.values, key),
-        set: (value) => Reflect.set(scope.values, key, value)
-      });
-    }
-  }
-  return markRaw(merged);
-}
-function isRuntimeParam(definition) {
-  return hasProperty(definition, "codec");
-}