nuxt-ui-tools 1.4.0 → 1.6.0

package/dist/runtime/table/components/table/table-renderer.vue.d.ts

@@ -1,4 +1,5 @@
 import type { DataListControlSize, DataListTableUi } from '../../types/index.js';
+import type { TableColumnSlot } from './table-layout.js';
 type __VLS_Props = {
     gutter?: number;
     height?: string;
@@ -7,17 +8,8 @@ type __VLS_Props = {
     ui?: DataListTableUi;
 };
 declare function refresh(): void;
-type ColumnSlot = {
-    kind: 'column';
-    columnId: string;
-    key: string;
-} | {
-    kind: 'spacer';
-    colSpan: number;
-    key: string;
-};
-declare var __VLS_34: {
-    columnSlots: ColumnSlot[];
+declare var __VLS_28: {
+    columnSlots: TableColumnSlot[];
     leafColumns: import("@tanstack/table-core").Column<{
         columnPinningFeature: import("@tanstack/table-core").TableFeature;
         columnResizingFeature: import("@tanstack/table-core").TableFeature;
@@ -26,16 +18,16 @@ declare var __VLS_34: {
         coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
         columnMeta: import("../../utils/index.js").DataListColumnMeta;
     }, object, unknown>[];
-}, __VLS_36: {
+}, __VLS_30: {
     error: {};
     retry: typeof refresh;
-}, __VLS_45: {};
+}, __VLS_39: {};
 type __VLS_Slots = {} & {
-    footer?: (props: typeof __VLS_34) => any;
+    footer?: (props: typeof __VLS_28) => any;
 } & {
-    error?: (props: typeof __VLS_36) => any;
+    error?: (props: typeof __VLS_30) => any;
 } & {
-    empty?: (props: typeof __VLS_45) => any;
+    empty?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     resetColumnSizing: () => void;

package/dist/runtime/table/components/table/table-row.d.vue.ts

@@ -0,0 +1,19 @@
+/**
+ * One body row. As a component it is patched by key and re-renders only when its own props change,
+ * so rows that stay on screen while the virtual window slides keep their cells untouched.
+ */
+import type { HTMLAttributes } from 'vue';
+import type { GenericObject } from '../../types/index.js';
+import type { tableRowCells } from './table-layout.js';
+type __VLS_Props = {
+    rowId: string;
+    original: GenericObject;
+    index: number;
+    cells: ReturnType<typeof tableRowCells>;
+    selected: boolean;
+    appended: boolean;
+    rowClass?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/table/table-row.vue

@@ -0,0 +1,51 @@
+<script setup>
+import TableCell from "./table-cell";
+defineProps({
+  rowId: { type: String, required: true },
+  original: { type: Object, required: true },
+  index: { type: Number, required: true },
+  cells: { type: null, required: true },
+  selected: { type: Boolean, required: true },
+  appended: { type: Boolean, required: true },
+  rowClass: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+});
+</script>
+
+<template>
+  <tr
+    class="nut-dl-row group/row"
+    :class="[
+  selected ? 'nut-dl-row--selected' : '',
+  appended ? 'nut-dl-row--appended' : '',
+  rowClass
+]"
+    :data-index="index"
+    :data-row-id="rowId"
+  >
+    <template v-for="slot in cells" :key="slot.key">
+      <td v-if="slot.kind === 'fill'" class="nut-dl-table__fill p-0" aria-hidden="true" />
+      <td
+        v-else-if="slot.kind === 'spacer'"
+        :colspan="slot.colSpan"
+        class="nut-dl-table__spacer p-0"
+        aria-hidden="true"
+      />
+      <td
+        v-else-if="slot.layout"
+        class="nut-dl-td h-[var(--nut-dl-row-h)] py-0 align-middle"
+        :class="slot.layout.class"
+        :data-col="slot.columnId"
+        :style="slot.layout.style"
+      >
+        <div class="nut-dl-td__inner min-w-0" :class="slot.layout.innerClass">
+          <TableCell
+            v-if="slot.layout.render"
+            :index="index"
+            :render="slot.layout.render"
+            :row="original"
+          />
+        </div>
+      </td>
+    </template>
+  </tr>
+</template>

package/dist/runtime/table/components/table/table-row.vue.d.ts

@@ -0,0 +1,19 @@
+/**
+ * One body row. As a component it is patched by key and re-renders only when its own props change,
+ * so rows that stay on screen while the virtual window slides keep their cells untouched.
+ */
+import type { HTMLAttributes } from 'vue';
+import type { GenericObject } from '../../types/index.js';
+import type { tableRowCells } from './table-layout.js';
+type __VLS_Props = {
+    rowId: string;
+    original: GenericObject;
+    index: number;
+    cells: ReturnType<typeof tableRowCells>;
+    selected: boolean;
+    appended: boolean;
+    rowClass?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/table/components/table/table-skeleton-cell.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionalComponent } from 'vue';
+import type { TableColumnAlign, TableColumnSkeleton } from '../../types/index.js';
+interface TableSkeletonCellProps {
+    skeleton?: TableColumnSkeleton;
+    align?: TableColumnAlign;
+    seed: number;
+}
+declare const TableSkeletonCell: FunctionalComponent<TableSkeletonCellProps>;
+export default TableSkeletonCell;

package/dist/runtime/table/components/table/table-skeleton-cell.js

@@ -0,0 +1,104 @@
+import { h } from "vue";
+import { isNumber } from "../../../shared/utils/predicate.js";
+const SPREAD = [0.6, 0.15, 0.9, 0.4, 0.75, 0.05, 0.5, 0.3];
+const TEXT_RANGE = [0.38, 0.78];
+const NUMBER_RANGE = [0.28, 0.44];
+const CAPTION_SHARE = 0.62;
+const GAPS = {
+  badge: "gap-1",
+  dot: "gap-2",
+  icon: "gap-1.5"
+};
+function share(options) {
+  if (isNumber(options.width)) return options.width;
+  const [min, max] = options.width ?? TEXT_RANGE;
+  return min + (max - min) * SPREAD[options.seed % SPREAD.length];
+}
+function bar(options) {
+  return h("span", {
+    class: [
+      "nut-dl-skeleton block max-w-full rounded-full",
+      options.caption ? "h-[0.55em]" : "h-[0.66em]"
+    ],
+    style: { width: `${Math.round(options.width * 100)}%` }
+  });
+}
+function lines(options) {
+  const width = share({ seed: options.seed, width: options.config.width ?? options.range });
+  return h(
+    "span",
+    {
+      class: [
+        "flex min-w-0 flex-1 flex-col gap-[0.5em]",
+        options.align === "right" ? "items-end" : "",
+        options.align === "center" ? "items-center" : ""
+      ]
+    },
+    options.lines === 2 ? [bar({ width }), bar({ caption: true, width: width * CAPTION_SHARE })] : [bar({ width })]
+  );
+}
+const SHAPES = {
+  avatar: (options) => [
+    h("span", {
+      class: [
+        "nut-dl-skeleton size-7 shrink-0",
+        options.config.avatar === "circle" ? "rounded-full" : "rounded-md"
+      ]
+    }),
+    lines({ ...options, lines: options.config.lines ?? 2 })
+  ],
+  badge: (options) => Array.from(
+    { length: options.config.count ?? 1 },
+    (_, index) => h("span", {
+      class: "nut-dl-skeleton block h-[1.55em] shrink-0 rounded-md",
+      style: {
+        width: `${(3.6 + share({ seed: options.seed + index, width: [0, 1.6] })).toFixed(2)}em`
+      }
+    })
+  ),
+  check: () => h("span", { class: "nut-dl-skeleton block size-4 shrink-0 rounded-[4px]" }),
+  icon: (options) => [
+    h("span", {
+      class: [
+        "nut-dl-skeleton size-[18px] shrink-0",
+        options.config.avatar === "circle" ? "rounded-full" : "rounded-[5px]"
+      ]
+    }),
+    lines({ ...options, lines: options.config.lines ?? 1 })
+  ],
+  dot: (options) => [
+    h("span", { class: "nut-dl-skeleton size-[7px] shrink-0 rounded-full" }),
+    lines({ ...options, lines: options.config.lines ?? 1, range: [0.3, 0.6] })
+  ],
+  number: (options) => lines({ ...options, align: "right", lines: options.config.lines ?? 1, range: NUMBER_RANGE }),
+  progress: () => [
+    h("span", { class: "nut-dl-skeleton block h-1.5 min-w-0 flex-1 rounded-full" }),
+    h("span", { class: "nut-dl-skeleton block h-[0.66em] w-[2.4em] shrink-0 rounded-full" })
+  ],
+  text: (options) => lines({ ...options, lines: options.config.lines ?? 1 })
+};
+function resolve(skeleton) {
+  if (!skeleton) return { kind: "text" };
+  return typeof skeleton === "string" ? { kind: skeleton } : skeleton;
+}
+const TableSkeletonCell = (props) => {
+  const config = resolve(props.skeleton);
+  if (config.kind === "none") return null;
+  const align = config.kind === "number" ? "right" : props.align;
+  return h(
+    "span",
+    {
+      class: [
+        "nut-dl-skeleton-cell flex w-full min-w-0 items-center",
+        GAPS[config.kind] ?? "gap-2.5",
+        align === "right" ? "justify-end" : "",
+        align === "center" ? "justify-center" : ""
+      ],
+      "data-skeleton": config.kind
+    },
+    SHAPES[config.kind]({ align, config, seed: props.seed })
+  );
+};
+TableSkeletonCell.props = ["skeleton", "align", "seed"];
+TableSkeletonCell.displayName = "DataListTableSkeletonCell";
+export default TableSkeletonCell;

package/dist/runtime/table/components/utils/search-query-input.vue

@@ -1,6 +1,8 @@
 <script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
 import { computed, ref, watch } from "vue";
+import { useUiToolsLocale } from "#ui-tools/i18n";
 const props = defineProps({
   placeholder: { type: String, required: true },
   loading: { type: Boolean, required: false },
@@ -9,7 +11,9 @@ const props = defineProps({
   inputProps: { type: Object, required: false }
 });
 const model = defineModel({ type: String, ...{ required: true } });
+const { t } = useUiToolsLocale();
 const localValue = ref(model.value);
+const input = ref(null);
 watch(
   model,
   (value) => {
@@ -26,16 +30,23 @@ const inputAttrs = computed(() => ({
   variant: "outline",
   ...props.inputProps
 }));
+const clearable = computed(() => localValue.value.length > 0);
 function commitValue() {
   if (localValue.value === model.value) {
     return;
   }
   model.value = localValue.value;
 }
+function clear() {
+  localValue.value = "";
+  model.value = "";
+  input.value?.inputRef?.focus();
+}
 </script>
 
 <template>
   <UInput
+    ref="input"
     v-bind="inputAttrs"
     :model-value="localValue"
     :size="props.size"
@@ -46,7 +57,22 @@ function commitValue() {
     @update:model-value="localValue = String($event ?? '')"
     @blur="commitValue"
     @keydown.enter.prevent="commitValue"
-  />
+    @keydown.escape="clearable && clear()"
+  >
+    <template v-if="clearable" #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="xs"
+        icon="i-lucide-circle-x"
+        :aria-label="t('table.controls.clearSearch')"
+        :class="ui?.clear"
+        class="nut-dl-search__clear -mr-1 text-dimmed hover:text-default"
+        @mousedown.prevent
+        @click="clear"
+      />
+    </template>
+  </UInput>
 </template>
 
 <style>

package/dist/runtime/table/composables/use-deferred-commit.d.ts

@@ -0,0 +1,20 @@
+/** Delay between the last edit of a typed filter value and its commit to the query. */
+export declare const FILTER_COMMIT_DELAY = 350;
+export interface UseDeferredCommitParams {
+    commit: () => void;
+    delay?: number;
+    /** Commits a pending value when the owner unmounts, for editors embedded in a picker or sheet. */
+    flushOnDispose?: boolean;
+}
+/**
+ * Commits a typed value after a short pause, on demand (`flush`), or not at all (`cancel`).
+ * Editors schedule a commit on every edit, flush it when they close, and cancel it once the value
+ * is committed by another path (Enter, clear). Embedded editors unmount with their picker or sheet
+ * instead of closing, so they flush on dispose.
+ */
+export declare function useDeferredCommit(params: UseDeferredCommitParams): {
+    cancel: () => void;
+    flush: () => void;
+    pending: import("vue").Ref<boolean, boolean>;
+    schedule: () => void;
+};

package/dist/runtime/table/composables/use-deferred-commit.js

@@ -0,0 +1,31 @@
+import { onScopeDispose, ref } from "vue";
+export const FILTER_COMMIT_DELAY = 350;
+export function useDeferredCommit(params) {
+  const pending = ref(false);
+  let timer;
+  function cancel() {
+    if (timer !== void 0) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+    pending.value = false;
+  }
+  function schedule() {
+    cancel();
+    pending.value = true;
+    timer = setTimeout(() => {
+      timer = void 0;
+      pending.value = false;
+      params.commit();
+    }, params.delay ?? FILTER_COMMIT_DELAY);
+  }
+  function flush() {
+    if (!pending.value) {
+      return;
+    }
+    cancel();
+    params.commit();
+  }
+  onScopeDispose(() => params.flushOnDispose ? flush() : cancel());
+  return { cancel, flush, pending, schedule };
+}

package/dist/runtime/table/composables/use-table-data.d.ts

@@ -1,5 +1,5 @@
 import { useInfiniteQuery, useQueries, useQuery } from '@tanstack/vue-query';
-import type { ComputedRef } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 import type { GenericObject, TableExternalState, TableFacetExecutionResult, TableRemoteSourceRequest, TableSchemaView, TableSourceRequestContext, TableRefreshResult, TableRuntimeRecord } from '../types/index.js';
 import type { UseTableStartupReturn } from './use-table-startup.js';
 import type { useTableState } from './use-table-state.js';
@@ -36,6 +36,8 @@ export interface UseTableDataReturn {
         isFetching: boolean;
         isRefreshing: boolean;
         isRevalidating: boolean;
+        /** Rows of the previous request stay on screen while a new page, sort, filter or search loads. */
+        isReplacing: boolean;
         isContextPending: boolean;
         isContextFetching: boolean;
         isDataPending: boolean;
@@ -45,6 +47,8 @@ export interface UseTableDataReturn {
     }>;
     refreshContext: () => Promise<TableRefreshResult[]>;
     refreshData: () => (...args: Parameters<ReturnType<typeof useQuery>['refetch']>) => Promise<TableRefreshResult>;
+    /** Counts refresh requests, including ones issued while a request is already running. */
+    refreshes: Readonly<Ref<number>>;
     refreshPageContext: () => Promise<TableRefreshResult[]>;
     updateRows: (rows: GenericObject[]) => void;
 }

package/dist/runtime/table/composables/use-table-data.js

@@ -1,5 +1,5 @@
 import { keepPreviousData, useInfiniteQuery, useQueries, useQuery } from "@tanstack/vue-query";
-import { computed, shallowRef, watch } from "vue";
+import { computed, readonly, ref, shallowRef, watch } from "vue";
 import { isArray, isFunction, isNumber, isObject, isString } from "../../shared/utils/predicate.js";
 import { QUERY_DEFAULTS } from "../constants/query-state.js";
 import {
@@ -72,9 +72,20 @@ export function useTableData(params) {
   const usesEmbeddedRemoteFacets = computed(() => remoteSource.value?.facets === true);
   const facetsContextKey = computed(() => JSON.stringify(facetsBaseContext.value));
   const lastResolvedEmbeddedFacetsKey = shallowRef(null);
+  const facetsCarrierKey = shallowRef(null);
+  const dataRequestKey = computed(
+    () => JSON.stringify({
+      ...facetsBaseContext.value,
+      pagination: requestPagination.value,
+      sorting: requestSorting.value
+    })
+  );
+  const requestsEmbeddedFacets = computed(
+    () => usesEmbeddedRemoteFacets.value && globalFacetDescriptors.value.length > 0 && (facetsContextKey.value !== lastResolvedEmbeddedFacetsKey.value || dataRequestKey.value === facetsCarrierKey.value)
+  );
   const requestContext = computed(() => ({
     context: contextData.value,
-    facets: usesEmbeddedRemoteFacets.value && globalFacetDescriptors.value.length > 0 && facetsContextKey.value !== lastResolvedEmbeddedFacetsKey.value ? globalFacetDescriptors.value : void 0,
+    facets: requestsEmbeddedFacets.value ? globalFacetDescriptors.value : void 0,
     filters: requestFilters.value,
     pagination: requestPagination.value,
     search: requestSearch.value,
@@ -329,6 +340,7 @@ export function useTableData(params) {
         isPageContextPending: false,
         isPending: true,
         isRefreshing: false,
+        isReplacing: false,
         isRevalidating: false,
         phase: params.startup.phase.value
       };
@@ -348,6 +360,7 @@ export function useTableData(params) {
       isPageContextPending: isPageContextPending.value,
       isPending: isContextPending.value || !isActiveDataSuccess.value && isDataPending || !initialized.value && isPageContextPending.value,
       isRefreshing,
+      isReplacing: !isCursorPagination.value && query.isPlaceholderData.value && isDataFetching && rawData.value.rows.length > 0,
       isRevalidating: isActiveDataRefetching.value && rawData.value.rows.length > 0,
       phase: params.startup.phase.value
     };
@@ -369,6 +382,7 @@ export function useTableData(params) {
       }
       embeddedFacetsState.value = embeddedFacets;
       lastResolvedEmbeddedFacetsKey.value = facetsContextKey.value;
+      facetsCarrierKey.value = dataRequestKey.value;
     },
     { immediate: true }
   );
@@ -385,6 +399,7 @@ export function useTableData(params) {
         }
         embeddedFacetsState.value = embeddedFacets;
         lastResolvedEmbeddedFacetsKey.value = facetsContextKey.value;
+        facetsCarrierKey.value = dataRequestKey.value;
         return;
       }
     },
@@ -397,8 +412,10 @@ export function useTableData(params) {
     params.startup.start();
     return Promise.all(contextResults.value.map((item) => item.refetch()));
   }
+  const refreshes = ref(0);
   function refreshData() {
     return (...args) => {
+      refreshes.value += 1;
       params.startup.start();
       if (isCursorPagination.value) {
         cursorRowOverrides.value = /* @__PURE__ */ new Map();
@@ -453,6 +470,7 @@ export function useTableData(params) {
     rawData,
     refreshContext,
     refreshData,
+    refreshes: readonly(refreshes),
     refreshPageContext,
     requestContext,
     sourceRequest,

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/composables/use-table-summaries.js

@@ -7,7 +7,16 @@ export function useTableSummaries(params) {
   const scopes = computed(
     () => config.value?.scopes ?? (params.selection.selectionEnabled.value ? ["filtered", "page", "selection"] : ["filtered", "page"])
   );
-  const scope = ref(config.value?.scope ?? "filtered");
+  const defaultScope = computed(() => config.value?.scope ?? "filtered");
+  const scope = ref(defaultScope.value);
+  watch(
+    () => params.selection.selectedRows.value.length > 0,
+    (selected) => {
+      if (scopes.value.includes("selection")) {
+        scope.value = selected ? "selection" : defaultScope.value;
+      }
+    }
+  );
   const rows = computed(() => {
     if (scope.value === "selection") {
       return params.selection.selectedRows.value;

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

@@ -1,5 +1,19 @@
 import type { GenericObject, RenderableType, TableColumnAlign, TableColumnPinned, TableKnownFieldPath, TableFieldValue, TableRowRenderParams, TableSortKey, TableTextValue, TableRuntimeRecord } from './utils.js';
-export type TableColumnSkeleton = 'text' | 'avatar' | 'dot' | 'check' | 'badge' | 'number' | 'none';
+/** Placeholder shape drawn in a column while its first page loads. */
+export type TableColumnSkeletonKind = 'text' | 'avatar' | 'icon' | 'dot' | 'check' | 'badge' | 'number' | 'progress' | 'none';
+/** Tunes a placeholder shape so it mirrors the content the column renders. */
+export interface TableColumnSkeletonConfig {
+    kind: TableColumnSkeletonKind;
+    /** Adds a shorter caption line under the main one. Avatars default to two lines. */
+    lines?: 1 | 2;
+    /** Draws the avatar or icon as a circle instead of a rounded square. */
+    avatar?: 'circle' | 'square';
+    /** Share of the cell taken by the main line: a fixed fraction, or a `[min, max]` range varied per row. */
+    width?: number | readonly [number, number];
+    /** Number of badges drawn side by side. */
+    count?: number;
+}
+export type TableColumnSkeleton = TableColumnSkeletonKind | TableColumnSkeletonConfig;
 export type TableSummaryKind = 'sum' | 'avg' | 'count' | 'min' | 'max';
 export type TableSummaryScope = 'page' | 'filtered' | 'selection';
 export type TableSummaryValue = string | number | boolean | Date | null | undefined;

package/dist/runtime/table/types/data-list.d.ts

@@ -40,6 +40,7 @@ export interface DataListSearchUi {
     [slot: string]: DataListUiClass | undefined;
     root?: DataListUiClass;
     base?: DataListUiClass;
+    clear?: DataListUiClass;
     leading?: DataListUiClass;
     leadingIcon?: DataListUiClass;
     leadingAvatar?: DataListUiClass;

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/columns/defs.js

@@ -87,7 +87,7 @@ export function createColumnDefs(options) {
         sortableKey: runtimeColumn.sortableKey
       },
       minSize: min,
-      size: Math.max(authored ?? DEFAULT_COLUMN_SIZE, Math.min(floor, 260), min)
+      size: Math.max(authored ?? Math.max(DEFAULT_COLUMN_SIZE, Math.min(floor, 260)), min)
     });
   }
   return defs;

package/dist/runtime/table/utils/filters/date.d.ts

@@ -16,13 +16,19 @@ export declare function resolveDateFilterScalarPresets(options: {
     definition: TableDateFilterDefinition;
     operator: TableScalarDateFilterOperator;
     now?: Date;
+    translate?: DatePresetTranslator;
 }): ResolvedTableDateFilterScalarPreset[];
 export declare function resolveDateFilterRangePresets(options: {
     definition: TableDateFilterDefinition;
     now?: Date;
+    translate?: DatePresetTranslator;
 }): ResolvedTableDateFilterRangePreset[];
 export declare function resolveDateFilterRangeCalendarPanels(options: {
     definition: TableDateFilterDefinition;
     mobile: boolean;
 }): 1 | 2;
 export declare function resolveDateFilterOperatorDescription(operator: TableDateFilterOperator | undefined): string;
+type DefaultDatePresetKey = 'today' | 'yesterday' | 'sevenDaysAgo' | 'startOfMonth' | 'startOfYear' | 'last7Days' | 'last30Days' | 'thisMonth' | 'lastMonth' | 'yearToDate';
+/** Translates a default preset label; authored presets keep their own text. */
+export type DatePresetTranslator = (key: DefaultDatePresetKey) => string;
+export {};