@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-ui/app/build/composables/table/useTableConfigClipboard.ts

@@ -1,6 +1,10 @@
 import { injectLocal } from "@vueuse/core";
 import type { ShallowRef } from "vue";
-import type { Data, TableSharedData } from "../../components/table/Table.vue";
+import type {
+  Data,
+  TableDensity,
+  TableSharedData,
+} from "../../components/table/Table.vue";
 
 const CONFIG_VERSION = 1;
 const TOAST_DURATION_MS = 3000;
@@ -14,6 +18,7 @@ interface SerializedTableConfig {
   pinning: { left?: string[]; right?: string[] };
   sorting: unknown[];
   pagination: { pageIndex: number; pageSize: number };
+  density?: TableDensity;
 }
 
 const isSerializedConfig = (value: unknown): value is SerializedTableConfig => {
@@ -60,6 +65,7 @@ export const useTableConfigClipboard = <T extends Data>() => {
       pinning: data.columnPinningState.value,
       sorting: data.sortingState.value,
       pagination: data.paginationState.value,
+      density: data.densityState.value,
     };
   };
 
@@ -74,6 +80,7 @@ export const useTableConfigClipboard = <T extends Data>() => {
     data.columnPinningState.value = config.pinning;
     data.sortingState.value = config.sorting as never;
     data.paginationState.value = config.pagination;
+    if (config.density) data.densityState.value = config.density;
   };
 
   const exportConfig = async (): Promise<void> => {

package/frontend-vue/layers/dms-ui/app/build/composables/table/useTableStates.ts

@@ -39,12 +39,6 @@ export const useTableStates = (states: TableStates) => {
     );
   };
 
-  const resetFilters = () => {
-    states.columnFiltersState.value = states.columnFiltersState.value.map(
-      (filter) => ({ ...filter, value: filter.initialValue }),
-    );
-  };
-
   const deleteSorting = (index: number) => {
     states.sortingState.value = states.sortingState.value.filter(
       (_, i) => i !== index,
@@ -105,7 +99,6 @@ export const useTableStates = (states: TableStates) => {
   return {
     updateStateValue,
     deleteFilter,
-    resetFilters,
     deleteSorting,
     stateHandlers,
     stateGetters,

package/frontend-vue/layers/dms-ui/app/build/composables/table/utils/clearTableFilters.ts

@@ -0,0 +1,80 @@
+import type { Ref } from "vue";
+import type { PaginationState } from "@tanstack/vue-table";
+import type { TableFilter } from "../../../components/table/Table.vue";
+import { isFilterEffective } from "../../table-view/utils/tableQuery";
+
+// Everything that narrows a table's rows — filter chips (quick filters write
+// theirs) and the toolbar search — cleared in one go. The "clear all" actions
+// (empty state, filters row, filters popover) all go through
+// `clearTableFilters`.
+// Sort, page size, tab, display, group-by and the archive toggle are not
+// filters: they stay as they are.
+
+export interface TableNarrowingState {
+  columnFilters: Ref<TableFilter[]>;
+  /** The toolbar search text. */
+  globalFilter: Ref<string | undefined>;
+  /** Sent back to the first page after a clear. */
+  pagination?: Ref<PaginationState>;
+  /**
+   * The active display applies the search (true by default); an ignored
+   * search neither narrows the rows nor needs offering to clear.
+   */
+  searchApplies?: Ref<boolean>;
+}
+
+/** What a clear would change. */
+export interface ClearableTableFilters {
+  /** Filter chips, those of the quick filters included. */
+  filters: boolean;
+  search: boolean;
+}
+
+const sameValue = (a: unknown, b: unknown): boolean =>
+  JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+
+/**
+ * The filter chips once cleared: a pinned (default) filter goes back to its
+ * initial value, any other chip is dropped.
+ */
+export const resetColumnFilters = (filters: TableFilter[]): TableFilter[] =>
+  filters
+    .filter((filter) => filter.pinned)
+    .map((filter) => ({ ...filter, value: filter.initialValue }));
+
+const hasClearableColumnFilters = (filters: TableFilter[]): boolean =>
+  filters.some((filter) =>
+    filter.pinned ? !sameValue(filter.value, filter.initialValue) : true,
+  );
+
+const hasSearch = (state: TableNarrowingState): boolean =>
+  !!state.globalFilter.value && (state.searchApplies?.value ?? true);
+
+export const clearableTableFilters = (
+  state: TableNarrowingState,
+): ClearableTableFilters => ({
+  filters: hasClearableColumnFilters(state.columnFilters.value),
+  search: hasSearch(state),
+});
+
+/** The rows are narrowed by a search or a filter chip. */
+export const isTableNarrowed = (state: TableNarrowingState): boolean =>
+  hasSearch(state) || state.columnFilters.value.some(isFilterEffective);
+
+/** i18n key of a clear action, naming what it clears. */
+export const clearTableFiltersLabelKey = (
+  clearable: ClearableTableFilters,
+): string =>
+  clearable.filters && clearable.search
+    ? "dms.table.clear_filters_and_search"
+    : clearable.search
+      ? "dms.table.clear_search"
+      : "dms.table.clear_filters";
+
+export const clearTableFilters = (state: TableNarrowingState): void => {
+  state.columnFilters.value = resetColumnFilters(state.columnFilters.value);
+  state.globalFilter.value = "";
+  if (state.pagination && state.pagination.value.pageIndex !== 0) {
+    state.pagination.value = { ...state.pagination.value, pageIndex: 0 };
+  }
+};

package/frontend-vue/layers/dms-ui/app/build/composables/table/utils/columnOrder.ts

@@ -0,0 +1,34 @@
+import {
+  ALWAYS_PINNED_LEFT_COLUMN_IDS,
+  ALWAYS_PINNED_RIGHT_COLUMN_IDS,
+} from "../constants";
+
+const EDGE_COLUMN_IDS = new Set([
+  ...ALWAYS_PINNED_LEFT_COLUMN_IDS,
+  ...ALWAYS_PINNED_RIGHT_COLUMN_IDS,
+]);
+
+/**
+ * The full column order of a table from a partial one (a view's, a saved
+ * one): the columns it names first, in its order, then the others in their
+ * declared order. The checkbox, the caret and the row actions keep their
+ * edges, and a column the table no longer has is dropped.
+ */
+export function mergeColumnOrder(
+  order: readonly string[],
+  declared: readonly string[],
+): string[] {
+  const isDataColumn = (id: string) => !EDGE_COLUMN_IDS.has(id);
+  const named = order.filter(
+    (id, index) =>
+      isDataColumn(id) && declared.includes(id) && order.indexOf(id) === index,
+  );
+  const leading = declared.filter((id) =>
+    ALWAYS_PINNED_LEFT_COLUMN_IDS.includes(id),
+  );
+  const trailing = declared.filter((id) =>
+    ALWAYS_PINNED_RIGHT_COLUMN_IDS.includes(id),
+  );
+  const rest = declared.filter((id) => isDataColumn(id) && !named.includes(id));
+  return [...leading, ...named, ...rest, ...trailing];
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table/utils/pageSizeOptions.ts

@@ -0,0 +1,18 @@
+import { MAX_PAGE_SIZE } from "../constants";
+
+/** Page sizes every table offers in its footer picker. */
+export const STANDARD_PAGE_SIZES = [10, 25, MAX_PAGE_SIZE];
+
+/**
+ * The page sizes a table's footer picker lists: the standard ones, the
+ * table's own default when it is none of them, and the size on show (a
+ * stored preference may hold another).
+ */
+export function pageSizeOptions(
+  tableDefault: number | undefined,
+  current: number,
+): number[] {
+  const sizes = [...STANDARD_PAGE_SIZES, current];
+  if (tableDefault !== undefined) sizes.push(tableDefault);
+  return [...new Set(sizes)].sort((a, b) => a - b);
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/displayRegistry.ts

@@ -0,0 +1,30 @@
+import { markRaw } from "vue";
+import type { TableViewDisplay } from "../../../composables/table-view/types/display";
+
+const TABLE_VIEW_DISPLAYS_STATE_KEY = "dms:table-view-displays";
+
+/** The displays registered in this application, in registration order. */
+export function useTableViewDisplayState() {
+  return useDmsState<TableViewDisplay[]>(
+    TABLE_VIEW_DISPLAYS_STATE_KEY,
+    () => [],
+  );
+}
+
+/**
+ * Store a display in the registry, without the checks a module's
+ * registration goes through: the DMS registers its built-in displays, under
+ * their reserved ids, through this.
+ */
+export function storeTableViewDisplay(entry: TableViewDisplay): void {
+  const displays = useTableViewDisplayState();
+  // The registry is reactive state: a component stored in it would be made
+  // reactive too (Vue warns, and pays for it on every render).
+  const display = entry.component
+    ? { ...entry, component: markRaw(entry.component) }
+    : entry;
+  displays.value = [
+    ...displays.value.filter((registered) => registered.id !== display.id),
+    display,
+  ];
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useAccumulatedPages.ts

@@ -0,0 +1,46 @@
+import type { PaginationState } from "@tanstack/vue-table";
+import type { Ref, WatchSource } from "vue";
+import type { TableViewPaginationMode } from "../../../composables/table-view/types";
+
+const FIRST_PAGE_COUNT = 1;
+
+export interface AccumulatedPagesOptions {
+  mode: TableViewPaginationMode;
+  pagination: Ref<PaginationState>;
+  /** What lists other rows: a change starts over from the first page. */
+  resetOn: WatchSource[];
+}
+
+/**
+ * A list that grows by pages (`loadMore`, `infinite`) instead of paging: it
+ * asks for every page loaded so far in one request, from the first row, so
+ * a refresh or a realtime change re-reads the same rows. A new filter,
+ * search, sort or tab starts over from one page.
+ */
+export function useAccumulatedPages(options: AccumulatedPagesOptions) {
+  const isAccumulating = options.mode !== "pages";
+  const loadedPages = ref(FIRST_PAGE_COUNT);
+
+  const requestedPagination = computed<PaginationState>(() =>
+    isAccumulating
+      ? {
+          pageIndex: 0,
+          pageSize: options.pagination.value.pageSize * loadedPages.value,
+        }
+      : options.pagination.value,
+  );
+
+  watch(
+    options.resetOn,
+    () => {
+      loadedPages.value = FIRST_PAGE_COUNT;
+    },
+    { deep: true },
+  );
+
+  const loadNextPage = () => {
+    loadedPages.value += 1;
+  };
+
+  return { isAccumulating, requestedPagination, loadNextPage };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useExpandedRowDetails.ts

@@ -0,0 +1,56 @@
+import { ref } from "vue";
+
+/** Where the row a `lazyLoad` band shows stands. */
+export type ExpandedRowLoadState = "loading" | "error" | "ready";
+
+/** One open row as `lazyLoad` read it. */
+export interface ExpandedRowDetailEntry<T> {
+  state: ExpandedRowLoadState;
+  row?: T;
+}
+
+/**
+ * The rows `lazyLoad` bands show, read by id when they open and kept until
+ * `reset`, which the table calls whenever its listed rows reload: a band
+ * never lags behind its row. An answer that lands after a reset is dropped.
+ */
+export function useExpandedRowDetails<T>(
+  getRow: (id: string) => Promise<T | undefined>,
+) {
+  const entries = ref<Record<string, ExpandedRowDetailEntry<T>>>({});
+  let generation = 0;
+
+  const setEntry = (id: string, entry: ExpandedRowDetailEntry<T>) => {
+    entries.value = { ...entries.value, [id]: entry };
+  };
+
+  async function load(id: string): Promise<void> {
+    const loadedFor = generation;
+    setEntry(id, { state: "loading" });
+    let row: T | undefined;
+    try {
+      row = await getRow(id);
+    } catch {
+      row = undefined;
+    }
+    if (loadedFor !== generation) return;
+    setEntry(id, row ? { state: "ready", row } : { state: "error" });
+  }
+
+  /** Reads the rows among `ids` not read yet. */
+  function ensure(ids: string[]): void {
+    for (const id of ids) {
+      if (!entries.value[id]) void load(id);
+    }
+  }
+
+  function reset(): void {
+    generation += 1;
+    entries.value = {};
+  }
+
+  const entryOf = (id: string): ExpandedRowDetailEntry<T> | undefined =>
+    entries.value[id];
+
+  return { entryOf, ensure, load, reset };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useGroupedRows.ts

@@ -0,0 +1,125 @@
+import { EYEBROW_CLASS } from "../../utils/eyebrow";
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+import { h, toValue, type ComputedRef, type MaybeRefOrGetter } from "vue";
+import type {
+  TableViewColumn,
+  TableViewGroupedConfig,
+} from "../../../composables/table-view/types";
+import type {
+  Data,
+  TableFilter,
+  TableRowGrouping,
+} from "../../components/table/Table.vue";
+import { useColumnValueRenderer } from "../data-types/useColumnValueRenderer";
+import {
+  dateGroupLabel,
+  groupFilter,
+  NO_GROUP_KEY,
+  rowGroupKey,
+} from "./utils/groupedRows";
+
+const GROUP_EYEBROW_CLASS = `${EYEBROW_CLASS} text-dimmed`;
+
+export interface GroupedRowsOptions {
+  /** Follows the group-by the user picks in the options menu. */
+  grouped: MaybeRefOrGetter<TableViewGroupedConfig | undefined>;
+  /** The grouped display is the one shown. */
+  isActive: ComputedRef<boolean>;
+  columns: TableViewColumn[];
+  /** The rows listed. */
+  rows: ComputedRef<Data[] | undefined>;
+  /** The count query of the rows listed, narrowed by one more filter. */
+  countQuery: (filter: TableFilter) => Record<string, unknown>;
+  /** Asks the counts, by id, in one request (`count/batch`). */
+  countBatch: (
+    queries: { id: string; query: Record<string, unknown> }[],
+  ) => Promise<Record<string, number>>;
+}
+
+/**
+ * The `grouped` display: the grid's rows sorted on the grouped column, a
+ * header row before each group — the value as its cell draws it, or the day
+ * or week of a date — and, with `count`, how many rows each group holds.
+ */
+export function useGroupedRows(options: GroupedRowsOptions) {
+  const { isActive, columns, rows } = options;
+  const { t, locale } = useI18n();
+  const { renderColumnValue } = useColumnValueRenderer();
+  const grouped = computed(() => toValue(options.grouped));
+  const by = computed(() => grouped.value?.by ?? "value");
+  const field = computed(() => grouped.value?.groupByField ?? "");
+  const column = computed(() =>
+    columns.find((candidate) => candidate.accessorKey === field.value),
+  );
+
+  const keyOf = (row: Data): string =>
+    rowGroupKey(get(row, field.value), by.value, locale.value);
+
+  // A date heads its group as a mono eyebrow ("TODAY · 29 SEPT"); a value
+  // as its cell draws it, without the row's other fields.
+  const eyebrow = (text: string) =>
+    h("span", { class: GROUP_EYEBROW_CLASS }, text);
+  const header = (key: string, row: Data) => {
+    if (key === NO_GROUP_KEY) return eyebrow(t("dms.table.grouped.none"));
+    if (by.value !== "value") {
+      return eyebrow(
+        dateGroupLabel(key, by.value, locale.value, {
+          today: t("dms.table.grouped.today"),
+          yesterday: t("dms.table.grouped.yesterday"),
+          weekOf: (date) => t("dms.table.grouped.week_of", { date }),
+        }),
+      );
+    }
+    return column.value
+      ? renderColumnValue(column.value, {
+          [field.value]: get(row, field.value),
+        })
+      : key;
+  };
+
+  const counts = ref<Record<string, number>>({});
+  const listedKeys = computed(() =>
+    isActive.value && grouped.value?.count
+      ? [...new Set((rows.value ?? []).map(keyOf))]
+      : [],
+  );
+
+  // Asked again whenever the groups listed or the rows' filters change.
+  const countQueries = computed(() =>
+    listedKeys.value.flatMap((key) => {
+      const filter = groupFilter(field.value, key, by.value);
+      return filter ? [{ id: key, query: options.countQuery(filter) }] : [];
+    }),
+  );
+
+  // Counted in the browser: a server render draws the headers without them.
+  const refreshCounts = async () => {
+    const queries = countQueries.value;
+    if (import.meta.env.SSR || queries.length === 0) return;
+    try {
+      counts.value = await options.countBatch(queries);
+    } catch {
+      // Without its count a group header still reads.
+    }
+  };
+
+  if (grouped.value?.count) {
+    watch(countQueries, () => void refreshCounts(), {
+      immediate: true,
+      deep: true,
+    });
+  }
+
+  const grouping = computed<TableRowGrouping<Data> | undefined>(() => {
+    const config = grouped.value;
+    if (!isActive.value || !config) return undefined;
+    return {
+      keyOf,
+      header,
+      collapsible: config.collapsible,
+      countOf: config.count ? (key) => counts.value[key] : undefined,
+    };
+  });
+
+  return { grouping, refreshCounts };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useServerRenderedAsyncData.ts

@@ -0,0 +1,23 @@
+/**
+ * Async data a list renders from: awaited during the server render, so the
+ * markup carries the rows (and hydration reuses them), but never awaited in
+ * the browser, so a client navigation paints the list chrome and its skeleton
+ * right away instead of holding the page's Suspense until the fetch returns.
+ *
+ * Callers still `await` the result: on the server it is the fetch, in the
+ * browser an already settled value. Read the loading state from the returned
+ * `data` (`null` until the first result) rather than from `status`, which
+ * stays `idle` until the deferred fetch starts.
+ *
+ * @param key Async data key (shared with the hydration payload)
+ * @param handler Fetches the data
+ * @param options `useDmsAsyncData` options (`watch`, `transform`…)
+ */
+export function useServerRenderedAsyncData<T>(
+  key: string,
+  handler: () => Promise<T>,
+  options: Parameters<typeof useDmsAsyncData<T>>[2] = {},
+): Promise<Awaited<ReturnType<typeof useDmsAsyncData<T>>>> {
+  if (import.meta.env.SSR) return useDmsAsyncData<T>(key, handler, options);
+  return Promise.resolve(useDmsLazyAsyncData<T>(key, handler, options));
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableFooter.ts

@@ -0,0 +1,119 @@
+import type { ComputedRef } from "vue";
+import type {
+  TableViewColumn,
+  TableViewFooter,
+  TableViewFooterSummaryConfig,
+} from "../../../composables/table-view/types";
+import { useServerRenderedAsyncData } from "./useServerRenderedAsyncData";
+import type {
+  TableFooterLegendItem,
+  TableFooterTexts,
+} from "../../components/table/Table.vue";
+import { useColumnValueRenderer } from "../data-types/useColumnValueRenderer";
+
+export interface TableFooterOptions {
+  footer: TableViewFooter | undefined;
+  columns: TableViewColumn[];
+  location: string;
+  /** The list query without paging: the rows the figures cover. */
+  query: ComputedRef<Record<string, unknown>>;
+  /** Prefix of the data key, unique to the table on its page. */
+  dataKey: string;
+}
+
+interface LegendItemOption {
+  label?: string;
+  textColor?: string;
+  iconColor?: string;
+}
+
+// Sorting changes no figure: it stays out of the summary request.
+const UNSORTED_KEYS = new Set(["sortKey", "sortDirection"]);
+
+/**
+ * The footer band of a table view: its texts, the figures the `summary`
+ * route computes over every listed row — a sum read like its column's cells
+ * unless a `format` is given — and the legend of a select column.
+ */
+export async function useTableFooter(options: TableFooterOptions) {
+  const { footer, columns, location } = options;
+  const summaries = footer?.summary ?? [];
+  const { $authFetch } = useAuthFetch();
+  const { locale } = useI18n();
+  const { processI18n } = useTranslation();
+  const { renderValue } = useColumnValueRenderer();
+
+  const summaryQuery = computed(() => ({
+    ...Object.fromEntries(
+      Object.entries(options.query.value).filter(
+        ([key]) => !UNSORTED_KEYS.has(key),
+      ),
+    ),
+    ids: summaries.map((summary) => summary.id),
+  }));
+
+  const { data: values, refresh } = await useServerRenderedAsyncData<
+    Record<string, number>
+  >(
+    `${options.dataKey}-summary`,
+    () =>
+      summaries.length === 0
+        ? Promise.resolve({})
+        : $authFetch<Record<string, number>>(`${location}/summary`, {
+            query: summaryQuery.value,
+          }),
+    { watch: [summaryQuery] },
+  );
+
+  const formatSummary = (
+    summary: TableViewFooterSummaryConfig,
+    value: number | undefined,
+  ) => {
+    if (value === undefined) return undefined;
+    if (summary.format) {
+      return new Intl.NumberFormat(locale.value, summary.format).format(value);
+    }
+    const column =
+      summary.op === "sum"
+        ? columns.find((candidate) => candidate.accessorKey === summary.field)
+        : undefined;
+    return column
+      ? renderValue(column, value, undefined)
+      : new Intl.NumberFormat(locale.value).format(value);
+  };
+
+  const legendColumn = columns.find(
+    (column) => column.accessorKey === footer?.legend,
+  );
+  const legend = computed<TableFooterLegendItem[] | undefined>(() => {
+    const items = (
+      legendColumn?.type?.inputComponent?.options as
+        | { items?: LegendItemOption[] }
+        | undefined
+    )?.items;
+    return items?.map((item) => ({
+      label: processI18n(item.label ?? ""),
+      color: item.textColor ?? item.iconColor,
+    }));
+  });
+
+  const resolved = computed<TableFooterTexts | undefined>(() =>
+    footer
+      ? {
+          countLabel: footer.countLabel,
+          hint: footer.hint,
+          summaries: summaries.map((summary) => ({
+            id: summary.id,
+            label: processI18n(summary.label),
+            value: formatSummary(summary, values.value?.[summary.id]),
+          })),
+          legend: legend.value,
+        }
+      : undefined,
+  );
+
+  return {
+    footer: resolved,
+    refreshSummaries: () => (summaries.length > 0 ? refresh() : undefined),
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableReorder.ts

@@ -0,0 +1,77 @@
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+import type { ComputedRef, Ref } from "vue";
+import type {
+  TableViewListResponse,
+  TableViewReorderConfig,
+} from "../../../composables/table-view/types";
+import type { TableReorder } from "../../components/table/Table.vue";
+import { moveRow, reorderEdits } from "./utils/reorder";
+
+export interface TableReorderOptions<T> {
+  reorder: TableViewReorderConfig | undefined;
+  /** The page listed; a move updates it in place. */
+  data: Ref<TableViewListResponse<T> | null | undefined>;
+  rowIdKey: string;
+  location: string;
+  api: ReturnType<typeof $fetch.create>;
+  /** The caller may edit rows. */
+  canEdit: ComputedRef<boolean>;
+  /** A search, a filter or a tab narrows the rows. */
+  isNarrowed: ComputedRef<boolean>;
+  /** The grid is the display shown. */
+  isGrid: ComputedRef<boolean>;
+  /** Lists the rows again, after a move failed. */
+  refresh: () => Promise<void> | void;
+  onError: (error: unknown) => void;
+}
+
+/**
+ * Rows ordered by hand: a move updates the page at once and saves, by a
+ * partial edit, only the rows whose position changed. Moving is off while
+ * the rows are narrowed (the handle says how to turn it back on); outside
+ * the grid, or for a caller who may not edit, there is no handle at all.
+ */
+export function useTableReorder<T>(options: TableReorderOptions<T>) {
+  const { reorder, data, rowIdKey } = options;
+
+  const save = (edits: { id: string; value: number }[]) =>
+    Promise.all(
+      edits.map(({ id, value }) =>
+        options.api(`${options.location}/edit`, {
+          method: "PUT",
+          query: { id },
+          body: { [reorder!.field]: value },
+        }),
+      ),
+    );
+
+  const move = async (from: number, to: number) => {
+    const page = data.value;
+    if (!reorder || !page || from === to) return;
+    const moved = moveRow(page.results, from, to);
+    const edits = reorderEdits(moved, to, reorder.field, rowIdKey);
+    const values = new Map(edits.map((edit) => [edit.id, edit.value]));
+    data.value = {
+      ...page,
+      results: moved.map((row) => {
+        const value = values.get(String(get(row as never, rowIdKey)));
+        return value === undefined ? row : { ...row, [reorder.field]: value };
+      }),
+    };
+    try {
+      await save(edits);
+    } catch (error) {
+      options.onError(error);
+      await options.refresh();
+    }
+  };
+
+  const state = computed<TableReorder | undefined>(() => {
+    if (!reorder || !options.isGrid.value || !options.canEdit.value) {
+      return undefined;
+    }
+    return { enabled: !options.isNarrowed.value, move };
+  });
+
+  return { reorderState: state };
+}