@antelopejs/dms 0.7.3 → 0.7.5

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## v0.7.5
+
+[compare changes](https://github.com/AntelopeJS/dms/compare/v0.7.4...v0.7.5)
+
+### 🚀 Enhancements
+
+- **table-view:** Reorder the cards of the cards display ([#194](https://github.com/AntelopeJS/dms/pull/194))
+
+### 🏡 Chore
+
+- **release:** @antelopejs/interface-dms v0.5.2 ([83da6c1](https://github.com/AntelopeJS/dms/commit/83da6c1))
+
+### ❤️ Contributors
+
+- Antony Rizzitelli <rizzitelli.antony@pm.me>
+
+## v0.7.4
+
+[compare changes](https://github.com/AntelopeJS/dms/compare/v0.7.3...v0.7.4)
+
+### 🩹 Fixes
+
+- **table-view:** Open the toolbar search from its button again ([#193](https://github.com/AntelopeJS/dms/pull/193))
+
+### ❤️ Contributors
+
+- Antony Rizzitelli <rizzitelli.antony@pm.me>
+
 ## v0.7.3
 
 [compare changes](https://github.com/AntelopeJS/dms/compare/v0.7.2...v0.7.3)

package/dist/test/unit/interfaces/dms-base/table-view-source-reorder.test.js

@@ -16,6 +16,7 @@ const interface_database_decorators_1 = require("@antelopejs/interface-database-
 const chai_1 = require("chai");
 const constants_1 = require("@antelopejs/interface-dms/constants");
 const default_types_1 = require("@antelopejs/interface-dms/base/data-types/default-types");
+const custom_1 = require("@antelopejs/interface-dms/base/custom");
 const table_view_1 = require("@antelopejs/interface-dms/base/table-view");
 const TABLE = "reorder-features";
 let Feature = class Feature extends interface_database_decorators_1.Table {
@@ -164,6 +165,21 @@ describe("[unit] interfaces/dms-base — table view sources and reorder", () =>
         (0, chai_1.expect)(options.reorder).to.deep.equal({ field: "position" });
         (0, chai_1.expect)(options.pagination).to.equal("infinite");
     });
+    it("serves the reorder field beside a cards display drawn by a card component", () => {
+        const component = (0, custom_1.CustomComponent)("FeatureCard");
+        const options = optionsOf({
+            labelKey: "name",
+            reorder: { field: "position" },
+            displays: [{ id: table_view_1.CARDS_DISPLAY_ID }],
+            defaultDisplay: table_view_1.CARDS_DISPLAY_ID,
+            card: { component },
+        });
+        (0, chai_1.expect)(options.reorder).to.deep.equal({ field: "position" });
+        const cards = options.displays?.find((display) => display.id === table_view_1.CARDS_DISPLAY_ID);
+        (0, chai_1.expect)(cards?.options?.card).to.deep.include({
+            component: component.serializeSync(),
+        });
+    });
     it("refuses a reorder field the rows cannot be sorted on nor saved by", () => {
         (0, chai_1.expect)(() => optionsOf({ reorder: { field: "name" } })).to.throw(/must be a NumberType column/);
         (0, chai_1.expect)(() => optionsOf({ reorder: { field: "votes" } })).to.throw(/must be @Sortable\(\)/);

package/dist/test/unit/interfaces/dms-base/table-view-source-reorder.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-view-source-reorder.test.js","sourceRoot":"","sources":["../../../../../src/test/unit/interfaces/dms-base/table-view-source-reorder.test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table-view-source-reorder.test.js","sourceRoot":"","sources":["../../../../../src/test/unit/interfaces/dms-base/table-view-source-reorder.test.ts"],"names":[],"mappings":"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"}

package/frontend-vue/layers/dms-ui/app/build/components/table/Actions.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Data">
-import { injectLocal, useFocus, useFocusWithin } from "@vueuse/core";
+import { injectLocal, useFocusWithin } from "@vueuse/core";
 import { tv } from "tailwind-variants";
-import type { ShallowRef } from "vue";
+import { nextTick, type ShallowRef } from "vue";
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
 
 import TableMenu from "./Menu.vue";
@@ -162,7 +162,6 @@ const searchActive = ref(false);
 const searchInputRef = ref<HTMLInputElement>();
 const searchSectionRef = ref<HTMLElement>();
 
-const { focused: inputFocus } = useFocus(searchInputRef);
 const { focused: searchAreaFocused } = useFocusWithin(searchSectionRef);
 
 // A search set from outside (a view opened) shows in its field.
@@ -183,16 +182,17 @@ tableSharedData.onFiltersCleared(() => {
   if (!searchAreaFocused.value) searchActive.value = false;
 });
 
-watch(searchAreaFocused, (isFocused) => {
+// Opening the search unmounts the trigger button that held the focus: the
+// area reads as left for a moment, until the field takes the focus. Only an
+// area still left once the field rendered folds the search back.
+watch(searchAreaFocused, async (isFocused) => {
   if (isFocused || !searchActive.value) return;
+  await nextTick();
+  if (searchAreaFocused.value || !searchActive.value) return;
   if (tableSharedData?.globalFilterState.value) return;
   searchActive.value = false;
 });
 
-const toggleSearch = () => {
-  searchActive.value = !searchActive.value;
-  inputFocus.value = !inputFocus.value;
-};
 
 const searchFieldRef = ref<{ $el: HTMLElement }>();
 
@@ -205,6 +205,12 @@ const focusSearchBar = () => {
     ?.focus();
 };
 
+const openSearch = async () => {
+  searchActive.value = true;
+  await nextTick();
+  focusSearchBar();
+};
+
 const searchPlaceholderText = computed(() =>
   props.searchPlaceholder
     ? processI18n(props.searchPlaceholder)
@@ -426,7 +432,7 @@ const uiTableActions = computed(() => uiTableActionsVariant());
           square
           :aria-label="t('dms.table.search_open')"
           :class="uiTableActions.trigger()"
-          @click="toggleSearch"
+          @click="openSearch"
         />
 
         <div :class="uiTableActions.searchContainer({ searchActive })">

package/frontend-vue/layers/dms-ui/app/build/components/table/Table.vue

@@ -29,6 +29,7 @@ import {
 import type {
   CustomButton,
   TableViewDisplayCapabilities,
+  TableViewDisplayReorder,
   TableViewEmptyStatesConfig,
 } from "../../../composables/table-view/types";
 import type {
@@ -44,6 +45,10 @@ import type { ResolvedQuickFilter } from "../../composables/table-view/utils/qui
 import type { ClearableTableFilters } from "../../composables/table/utils/clearTableFilters";
 import type { EventHookOn } from "@vueuse/core";
 import type { VNodeChild } from "vue";
+import {
+  REORDER_HANDLE_CLASS,
+  useReorderHandles,
+} from "../../composables/table-view/useReorderHandles";
 
 export interface Data {
   [key: string]: unknown;
@@ -82,12 +87,7 @@ export interface TableAccumulation {
 }
 
 /** Rows ordered by hand (backend `reorder`): a handle moves a row. */
-export interface TableReorder {
-  /** Off while a search, a filter or a tab narrows the rows. */
-  enabled: boolean;
-  /** Moves the row at `from` to `to`, within the page. */
-  move: (from: number, to: number) => void;
-}
+export type TableReorder = TableViewDisplayReorder;
 
 /** Where a table draws its views (see `TableProps.viewsPlacement`). */
 export type TableViewsPlacement = "band" | "header";
@@ -531,8 +531,7 @@ const theme = tv({
     handleHeadCell: `${HEADER_MATCH_BG} border-b-default w-8 border-b p-0`,
     handleCell:
       "border-b-muted w-8 border-b ps-2 pe-0 in-[tr:last-child]:border-b-0",
-    handle:
-      "inline-flex size-6 cursor-grab items-center justify-center rounded text-dimmed hover:text-highlighted focus-visible:outline-2 focus-visible:outline-(--dms-accent-line) disabled:cursor-not-allowed disabled:opacity-40 [&>svg]:size-4",
+    handle: REORDER_HANDLE_CLASS,
   },
   variants: {
     cellWrap: {
@@ -809,23 +808,10 @@ const leadingCellCount = computed(
   () => (hasPresenceRail.value ? 1 : 0) + (props.reorder ? 1 : 0),
 );
 
-// Moving rows: the row dragged by its handle, dropped on another row; the
-// arrow keys on a handle move its row by one.
-const draggedRowIndex = ref<number | undefined>();
-const dropRow = (index: number) => {
-  const from = draggedRowIndex.value;
-  draggedRowIndex.value = undefined;
-  if (from !== undefined && props.reorder?.enabled) {
-    props.reorder.move(from, index);
-  }
-};
-const stepRow = (index: number, step: number) => {
-  const target = index + step;
-  const count = table.getRowModel().rows.length;
-  if (props.reorder?.enabled && target >= 0 && target < count) {
-    props.reorder.move(index, target);
-  }
-};
+const reorderHandles = useReorderHandles({
+  reorder: () => props.reorder,
+  count: () => table.getRowModel().rows.length,
+});
 
 // Pinned columns stick only while they cover at most 60% of the visible scroll
 // area: on a phone, labelled row actions or a wide pinned set would otherwise
@@ -1497,8 +1483,8 @@ defineShortcuts({
                       @dblclick="handleRowDoubleClick(row.original)"
                       @mouseenter="handleRowHover(row)"
                       @mouseleave="handleRowLeave"
-                      @dragover="reorder?.enabled && $event.preventDefault()"
-                      @drop="dropRow(row.index)"
+                      @dragover="reorderHandles.allowDrop"
+                      @drop="reorderHandles.drop(row.index)"
                     >
                       <td
                         v-if="hasPresenceRail"
@@ -1515,20 +1501,8 @@ defineShortcuts({
                       />
                       <td v-if="reorder" :class="uiTable.handleCell()">
                         <button
-                          type="button"
-                          :draggable="reorder.enabled"
-                          :disabled="!reorder.enabled"
-                          :aria-label="t('dms.table.reorder.move')"
-                          :title="
-                            reorder.enabled
-                              ? t('dms.table.reorder.move')
-                              : t('dms.table.reorder.disabled')
-                          "
+                          v-bind="reorderHandles.handleFor(row.index)"
                           :class="uiTable.handle()"
-                          @dragstart="draggedRowIndex = row.index"
-                          @dragend="draggedRowIndex = undefined"
-                          @keydown.up.prevent="stepRow(row.index, -1)"
-                          @keydown.down.prevent="stepRow(row.index, 1)"
                         >
                           <UIcon name="i-ph-dots-six-vertical" />
                         </button>

package/frontend-vue/layers/dms-ui/app/build/components/table-view/CardsDisplay.vue

@@ -6,12 +6,17 @@ import CardGridSkeleton from "./CardGridSkeleton.vue";
 import type { TableViewColumn } from "../../../composables/table-view/types/column";
 import type {
   TableViewCardConfig,
+  TableViewCardReorder,
   TableViewDisplayContext,
 } from "../../../composables/table-view/types/display";
 import {
   buildCardProps,
   cardFieldColumns,
 } from "../../composables/table-view/utils/card";
+import {
+  REORDER_HANDLE_CLASS,
+  useReorderHandles,
+} from "../../composables/table-view/useReorderHandles";
 
 interface CardsDisplayProps {
   context: TableViewDisplayContext<T>;
@@ -85,6 +90,22 @@ const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
 };
 
 const openItem = (item: T) => props.context.actions.open(item);
+
+// A hand-ordered table (backend `reorder`): each card carries a move handle,
+// and is where another card dragged by its handle drops.
+const { draggedIndex, handleFor, drop, allowDrop } = useReorderHandles({
+  reorder: () => props.context.reorder,
+  count: () => props.context.items.length,
+});
+
+const cardReorder = (index: number): TableViewCardReorder | undefined =>
+  props.context.reorder
+    ? {
+        enabled: props.context.reorder.enabled,
+        dragging: draggedIndex.value === index,
+        handle: handleFor(index),
+      }
+    : undefined;
 </script>
 
 <template>
@@ -107,30 +128,49 @@ const openItem = (item: T) => props.context.actions.open(item);
       class="grid grid-cols-[repeat(auto-fill,minmax(min(230px,100%),1fr))] gap-3 px-[18px] pt-4 pb-[18px]"
     >
       <template v-if="cardComponent">
-        <component
-          :is="cardComponent"
-          v-for="item in props.context.items"
+        <!-- A wrapper out of the grid's layout, catching the drop on the
+             card whatever its root element. -->
+        <div
+          v-for="(item, index) in props.context.items"
           :key="rowId(item)"
-          v-bind="{
-            ...(card?.component?.options ?? {}),
-            ...buildCardProps(item, props.context),
-          }"
-        />
+          class="contents"
+          @dragover="allowDrop"
+          @drop="drop(index)"
+        >
+          <component
+            :is="cardComponent"
+            v-bind="{
+              ...(card?.component?.options ?? {}),
+              ...buildCardProps(item, props.context),
+              reorder: cardReorder(index),
+            }"
+          />
+        </div>
       </template>
       <template v-else>
         <article
-          v-for="item in props.context.items"
+          v-for="(item, index) in props.context.items"
           :key="rowId(item)"
           class="group border-default hover:border-primary/35 @container cursor-pointer rounded-[10px] border bg-(--ui-bg) p-3.5 text-[12.5px] transition-colors focus-visible:outline-2 focus-visible:outline-(--dms-accent-line)"
           :class="{
             'border-primary ring-primary ring-1':
               props.context.selection.isSelected(rowId(item)),
+            'opacity-50': draggedIndex === index,
           }"
           tabindex="0"
           @click="openItem(item)"
           @keydown.enter.self="openItem(item)"
+          @dragover="allowDrop"
+          @drop="drop(index)"
         >
           <header class="flex items-center gap-2.5">
+            <button
+              v-if="props.context.reorder"
+              v-bind="handleFor(index)"
+              :class="['-ms-1.5', REORDER_HANDLE_CLASS]"
+            >
+              <UIcon name="i-ph-dots-six-vertical" />
+            </button>
             <span
               class="bg-accented text-default grid size-7 shrink-0 place-items-center rounded-[7px] font-mono text-[10.5px] font-bold"
             >

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

@@ -0,0 +1,93 @@
+import { nextTick, ref } from "vue";
+import type {
+  TableViewDisplayReorder,
+  TableViewReorderHandle,
+} from "../../../composables/table-view/types/display";
+
+// One place back or forward: a row of the grid steps up and down, a card of
+// the cards grid also left and right.
+const STEP_BY_KEY: Record<string, number> = {
+  ArrowUp: -1,
+  ArrowLeft: -1,
+  ArrowDown: 1,
+  ArrowRight: 1,
+};
+
+const DRAG_EFFECT = "move";
+
+/** The look of a move handle, on a grid row and on a card. */
+export const REORDER_HANDLE_CLASS =
+  "inline-flex size-6 shrink-0 cursor-grab items-center justify-center rounded text-dimmed hover:text-highlighted focus-visible:outline-2 focus-visible:outline-(--dms-accent-line) disabled:cursor-not-allowed disabled:opacity-40 [&>svg]:size-4";
+
+export interface ReorderHandlesOptions {
+  reorder: () => TableViewDisplayReorder | undefined;
+  /** How many rows the display draws: a step past either end does nothing. */
+  count: () => number;
+}
+
+/**
+ * The move handles of a hand-ordered display, the grid's and the cards'
+ * alike: the row dragged by its handle is dropped on another row, and the
+ * arrow keys on a handle move its row by one, keeping the focus on it.
+ */
+export function useReorderHandles(options: ReorderHandlesOptions) {
+  const { t } = useI18n();
+  const draggedIndex = ref<number | undefined>();
+
+  const isEnabled = () => !!options.reorder()?.enabled;
+
+  const drop = (index: number) => {
+    const from = draggedIndex.value;
+    draggedIndex.value = undefined;
+    if (from !== undefined && isEnabled()) options.reorder()!.move(from, index);
+  };
+
+  const allowDrop = (event: DragEvent) => {
+    if (isEnabled()) event.preventDefault();
+  };
+
+  const step = (index: number, delta: number) => {
+    const target = index + delta;
+    if (!isEnabled() || target < 0 || target >= options.count()) return false;
+    options.reorder()!.move(index, target);
+    return true;
+  };
+
+  const startDrag = (index: number, event: DragEvent) => {
+    draggedIndex.value = index;
+    // Firefox starts a drag only once it carries data.
+    event.dataTransfer?.setData("text/plain", String(index));
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = DRAG_EFFECT;
+  };
+
+  // The handle moves with its row (rows are keyed by id), and the browser
+  // drops the focus of an element it moves: give it back.
+  const stepByKey = (index: number, event: KeyboardEvent) => {
+    const delta = STEP_BY_KEY[event.key];
+    if (delta === undefined) return;
+    event.preventDefault();
+    const handle = event.currentTarget as HTMLElement | null;
+    if (step(index, delta)) void nextTick(() => handle?.focus());
+  };
+
+  const handleFor = (index: number): TableViewReorderHandle => {
+    const enabled = isEnabled();
+    return {
+      type: "button",
+      draggable: enabled,
+      disabled: !enabled,
+      "aria-label": t("dms.table.reorder.move"),
+      title: enabled
+        ? t("dms.table.reorder.move")
+        : t("dms.table.reorder.disabled"),
+      onClick: (event) => event.stopPropagation(),
+      onDragstart: (event) => startDrag(index, event),
+      onDragend: () => {
+        draggedIndex.value = undefined;
+      },
+      onKeydown: (event) => stepByKey(index, event),
+    };
+  };
+
+  return { draggedIndex, handleFor, drop, allowDrop };
+}

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

@@ -1,10 +1,10 @@
 import { get } from "@nuxt/ui/runtime/utils/index.js";
 import type { ComputedRef, Ref } from "vue";
 import type {
+  TableViewDisplayReorder,
   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> {
@@ -18,8 +18,8 @@ export interface TableReorderOptions<T> {
   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>;
+  /** The display shown draws the rows in their order: the grid, the cards. */
+  isOrderedDisplay: ComputedRef<boolean>;
   /** Lists the rows again, after a move failed. */
   refresh: () => Promise<void> | void;
   onError: (error: unknown) => void;
@@ -28,8 +28,9 @@ export interface TableReorderOptions<T> {
 /**
  * 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.
+ * the rows are narrowed (the handle says how to turn it back on); on a
+ * display that does not draw the rows in their order (the board, the
+ * groups), 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;
@@ -66,8 +67,8 @@ export function useTableReorder<T>(options: TableReorderOptions<T>) {
     }
   };
 
-  const state = computed<TableReorder | undefined>(() => {
-    if (!reorder || !options.isGrid.value || !options.canEdit.value) {
+  const state = computed<TableViewDisplayReorder | undefined>(() => {
+    if (!reorder || !options.isOrderedDisplay.value || !options.canEdit.value) {
       return undefined;
     }
     return { enabled: !options.isNarrowed.value, move };

package/frontend-vue/layers/dms-ui/app/components/table-view/TableView.vue

@@ -37,6 +37,7 @@ import type {
 } from "../../composables/table-view/types";
 import {
   TABLE_DISPLAY_ID,
+  CARDS_DISPLAY_ID,
   KANBAN_DISPLAY_ID,
   GROUPED_DISPLAY_ID,
   TableViewEvents,
@@ -1019,7 +1020,9 @@ const accumulation = computed<TableAccumulation | undefined>(() =>
     : undefined,
 );
 
-// Rows ordered by hand: moving is off while anything narrows the rows.
+// Rows ordered by hand: moving is off while anything narrows the rows, and
+// only the displays drawing the rows in their order move them.
+const ORDERED_DISPLAY_IDS = new Set([TABLE_DISPLAY_ID, CARDS_DISPLAY_ID]);
 const { reorderState } = useTableReorder<T>({
   reorder: reorderConfig,
   data,
@@ -1033,7 +1036,9 @@ const { reorderState } = useTableReorder<T>({
       !!effectiveGlobalFilter.value ||
       activeTabFilters.value.length > 0,
   ),
-  isGrid: computed(() => activeDisplayId.value === TABLE_DISPLAY_ID),
+  isOrderedDisplay: computed(() =>
+    ORDERED_DISPLAY_IDS.has(activeDisplayId.value),
+  ),
   refresh: () => refresh(),
   onError: (failure) =>
     toast.add({
@@ -1742,6 +1747,7 @@ const displayContext = computed(
     pageId,
     options: optionsForDisplay(activeDisplayId.value),
     refresh: refreshAll,
+    reorder: reorderState.value,
     table: displayTable.value,
   }),
 );

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/display.ts

@@ -95,6 +95,47 @@ export interface TableViewDisplayActions<T> {
   custom: (action: CustomRowAction) => void;
 }
 
+/**
+ * Rows ordered by hand (backend `reorder`), as a display moves them. Set on
+ * the displays that draw the rows in their order (the grid and `cards`), for
+ * a caller who may edit them.
+ */
+export interface TableViewDisplayReorder {
+  /** Off while a search, a filter or a tab narrows the rows. */
+  enabled: boolean;
+  /** Moves the row at `from` to `to`, both indexes into `items`. */
+  move: (from: number, to: number) => void;
+}
+
+/**
+ * The attributes and listeners of a move handle: `v-bind` them on a
+ * `<button>`. Dragged, it moves its row onto the card it is dropped on; with
+ * it focused, the arrow keys move the row one place back (up, left) or
+ * forward (down, right).
+ */
+export interface TableViewReorderHandle {
+  type: "button";
+  draggable: boolean;
+  disabled: boolean;
+  "aria-label": string;
+  /** Says how to move the row, or, while moving is off, how to turn it on. */
+  title: string;
+  onClick: (event: MouseEvent) => void;
+  onDragstart: (event: DragEvent) => void;
+  onDragend: () => void;
+  onKeydown: (event: KeyboardEvent) => void;
+}
+
+/** A card's move handle, on a hand-ordered `cards` display. */
+export interface TableViewCardReorder {
+  /** Off while a search, a filter or a tab narrows the rows. */
+  enabled: boolean;
+  /** The card is the one being dragged. */
+  dragging: boolean;
+  /** Bind on the element the card is moved by. */
+  handle: TableViewReorderHandle;
+}
+
 /**
  * The card the `kanban` and `cards` displays draw (backend `card` option):
  * the columns it shows, or a component drawing it whole.
@@ -127,6 +168,11 @@ export interface TableViewCardProps<T = Record<string, unknown>> {
   open: () => void;
   /** Kanban only: the value of the column the card sits in. */
   groupValue?: string;
+  /**
+   * `cards` only, on a hand-ordered table (backend `reorder`) and for a
+   * caller who may edit: the card's move handle, to draw somewhere on it.
+   */
+  reorder?: TableViewCardReorder;
 }
 
 /**
@@ -182,6 +228,11 @@ export interface TableViewDisplayContext<T = Record<string, unknown>> {
   options?: Record<string, unknown>;
   /** Re-fetch the table view (shared list + tab counts + active display). */
   refresh: () => Promise<void> | void;
+  /**
+   * Rows ordered by hand (backend `reorder`): set on the grid and the
+   * `cards` display, for a caller who may edit the rows.
+   */
+  reorder?: TableViewDisplayReorder;
 
   /**
    * Escape hatch: the TanStack table instance, present when the display is

package/frontend-vue/tests/table-actions-search-label.test.ts

@@ -37,8 +37,13 @@ const ButtonStub = defineComponent({
       h("button", slots.default?.()),
 });
 
+// A real UInput wraps its field: the toolbar focuses the input inside it.
 const InputStub = defineComponent({
-  setup: () => () => h("input"),
+  inheritAttrs: false,
+  setup:
+    (_, { attrs }) =>
+    () =>
+      h("div", [h("input", attrs)]),
 });
 
 let app: App | undefined;
@@ -88,6 +93,7 @@ function mountActions(searchPlaceholder: string | undefined, search = "") {
     app.component(name, stub);
   }
   const container = document.createElement("div");
+  document.body.append(container);
   app.mount(container);
   return container;
 }
@@ -110,6 +116,7 @@ beforeEach(() => {
 afterEach(() => {
   app?.unmount();
   app = undefined;
+  document.body.replaceChildren();
   vi.unstubAllGlobals();
 });
 
@@ -121,6 +128,20 @@ describe("table toolbar search", () => {
     );
   });
 
+  it("opens the search field from its button and focuses it", async () => {
+    const container = mountActions(undefined);
+    const trigger = container.querySelector("button");
+    trigger?.focus();
+    trigger?.click();
+    await nextTick();
+    await nextTick();
+    const input = container.querySelector("input");
+    expect(input).not.toBeNull();
+    expect(document.activeElement).toBe(input);
+    await nextTick();
+    expect(container.querySelector("input")).not.toBeNull();
+  });
+
   it("uses the configured placeholder, which also names the field", async () => {
     const container = mountActions("$page.members.search", "ada");
     await nextTick();

package/frontend-vue/tests/table-cell-wrap.test.ts

@@ -2,6 +2,7 @@ import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 import { tv } from "tailwind-variants";
 import { EYEBROW_CLASS } from "../layers/dms-ui/app/build/utils/eyebrow";
+import { REORDER_HANDLE_CLASS } from "../layers/dms-ui/app/build/composables/table-view/useReorderHandles";
 
 const tableSource = readFileSync(
   new URL(
@@ -17,8 +18,9 @@ const themeSource = tableSource.slice(
 const theme = new Function(
   "tv",
   "EYEBROW_CLASS",
+  "REORDER_HANDLE_CLASS",
   `${themeSource}; return theme;`,
-)(tv, EYEBROW_CLASS);
+)(tv, EYEBROW_CLASS, REORDER_HANDLE_CLASS);
 
 describe("Table grid cell layout theme", () => {
   it.each([undefined, false])("preserves the default for %s", (cellWrap) => {

package/frontend-vue/tests/table-row-hover.test.ts

@@ -2,6 +2,7 @@ import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 import { tv } from "tailwind-variants";
 import { EYEBROW_CLASS } from "../layers/dms-ui/app/build/utils/eyebrow";
+import { REORDER_HANDLE_CLASS } from "../layers/dms-ui/app/build/composables/table-view/useReorderHandles";
 import {
   resolveRowClickAction,
   type RowClickActionOptions,
@@ -22,8 +23,9 @@ const themeSource = tableSource.slice(
 const theme = new Function(
   "tv",
   "EYEBROW_CLASS",
+  "REORDER_HANDLE_CLASS",
   `${themeSource}; return theme;`,
-)(tv, EYEBROW_CLASS);
+)(tv, EYEBROW_CLASS, REORDER_HANDLE_CLASS);
 
 const HOVER_ROW = "hover:bg-elevated";
 const HOVER_CELL = "group-hover:bg-elevated";

package/frontend-vue/tests/table-scroll-area.test.ts

@@ -2,6 +2,7 @@ import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 import { tv } from "tailwind-variants";
 import { EYEBROW_CLASS } from "../layers/dms-ui/app/build/utils/eyebrow";
+import { REORDER_HANDLE_CLASS } from "../layers/dms-ui/app/build/composables/table-view/useReorderHandles";
 
 const tableSource = readFileSync(
   new URL(
@@ -17,8 +18,9 @@ const themeSource = tableSource.slice(
 const theme = new Function(
   "tv",
   "EYEBROW_CLASS",
+  "REORDER_HANDLE_CLASS",
   `${themeSource}; return theme;`,
-)(tv, EYEBROW_CLASS);
+)(tv, EYEBROW_CLASS, REORDER_HANDLE_CLASS);
 
 describe("Table scroll area", () => {
   it("sticks the header band to the top of its own scroll area", () => {

package/frontend-vue/tests/table-view-card-props.test.ts

@@ -113,7 +113,10 @@ describe("cards display with a custom card", () => {
     received.length = 0;
     vi.stubGlobal("computed", computed);
     vi.stubGlobal("h", h);
-    vi.stubGlobal("useI18n", () => ({ locale: ref("en") }));
+    vi.stubGlobal("useI18n", () => ({
+      locale: ref("en"),
+      t: (key: string) => key,
+    }));
     vi.stubGlobal("useTranslation", () => ({ processI18n: (t: string) => t }));
     vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
     vi.stubGlobal("resolveDmsComponent", (name: string) =>
@@ -146,7 +149,10 @@ describe("the default cards", () => {
 
   beforeEach(() => {
     vi.stubGlobal("computed", computed);
-    vi.stubGlobal("useI18n", () => ({ locale: ref("en") }));
+    vi.stubGlobal("useI18n", () => ({
+      locale: ref("en"),
+      t: (key: string) => key,
+    }));
     vi.stubGlobal("useTranslation", () => ({ processI18n: (t: string) => t }));
     vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
   });

package/frontend-vue/tests/table-view-cards-reorder.test.ts

@@ -0,0 +1,250 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  reactive,
+  ref,
+  type App,
+  type PropType,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import CardsDisplay from "../layers/dms-ui/app/build/components/table-view/CardsDisplay.vue";
+import { useTableReorder } from "../layers/dms-ui/app/build/composables/table-view/useTableReorder";
+import { moveRow } from "../layers/dms-ui/app/build/composables/table-view/utils/reorder";
+import type {
+  TableViewCardReorder,
+  TableViewDisplayContext,
+} from "../layers/dms-ui/app/composables/table-view/types/display";
+
+vi.mock("../layers/dms-ui/app/build/components/table/Pagination.vue", () => ({
+  default: { render: () => null },
+}));
+vi.mock("../layers/dms-ui/app/build/components/table/Empty.vue", () => ({
+  default: { render: () => null },
+}));
+
+type Row = { _id: string; name: string };
+type Api = Parameters<typeof useTableReorder>[0]["api"];
+
+const tableViewSource = readFileSync(
+  resolve(
+    __dirname,
+    "../layers/dms-ui/app/components/table-view/TableView.vue",
+  ),
+  "utf8",
+);
+
+const TaskCard = defineComponent({
+  props: {
+    rowId: String,
+    selected: Boolean,
+    reorder: Object as PropType<TableViewCardReorder>,
+  },
+  setup: (props) => () =>
+    h("article", { "data-selected": String(props.selected) }, [
+      props.rowId,
+      props.reorder ? h("button", props.reorder.handle) : null,
+    ]),
+});
+
+function createContext(enabled = true, componentName?: string) {
+  const items = ref<Row[]>(
+    ["t0", "t1", "t2"].map((id) => ({ _id: id, name: `Task ${id}` })),
+  );
+  const moves: [number, number][] = [];
+  const opened: unknown[] = [];
+  const selected = ref<string[]>(["t1"]);
+  const reorder = {
+    enabled,
+    move: (from: number, to: number) => {
+      moves.push([from, to]);
+      items.value = moveRow(items.value, from, to);
+    },
+  };
+  const context = reactive({
+    items,
+    columns: [],
+    loading: false,
+    rowIdKey: "_id",
+    labelKey: "name",
+    options: componentName ? { card: { component: { componentName } } } : {},
+    pagination: { pageIndex: 0, pageSize: 10, total: 3 },
+    selection: {
+      isSelected: (id: string) => selected.value.includes(id),
+      toggle: (id: string, value?: boolean) => {
+        const on = value ?? !selected.value.includes(id);
+        selected.value = on
+          ? [...selected.value, id]
+          : selected.value.filter((entry) => entry !== id);
+      },
+    },
+    actions: { canAdd: false, open: (item: unknown) => opened.push(item) },
+    reorder,
+  }) as unknown as TableViewDisplayContext<Row>;
+  return { context, items, moves, opened, selected };
+}
+
+const dragEvent = (type: string) => new Event(type, { bubbles: true });
+const key = (name: string) =>
+  new KeyboardEvent("keydown", { key: name, bubbles: true });
+
+describe("the cards display of a hand-ordered table", () => {
+  let app: App | undefined;
+  let container: HTMLElement;
+
+  const mount = (context: TableViewDisplayContext<Row>) => {
+    app = createApp({ render: () => h(CardsDisplay, { context }) });
+    app.component(
+      "UCheckbox",
+      defineComponent({
+        emits: ["update:modelValue"],
+        setup:
+          (_, { emit }) =>
+          () =>
+            h("input", {
+              type: "checkbox",
+              onChange: () => emit("update:modelValue", true),
+            }),
+      }),
+    );
+    app.component("UIcon", defineComponent({ render: () => h("i") }));
+    container = document.createElement("div");
+    document.body.append(container);
+    app.mount(container);
+  };
+  const handles = () => [
+    ...container.querySelectorAll<HTMLButtonElement>("button[draggable]"),
+  ];
+  const cards = () => [...container.querySelectorAll("article")];
+
+  beforeEach(() => {
+    vi.stubGlobal("computed", computed);
+    vi.stubGlobal("h", h);
+    vi.stubGlobal("useI18n", () => ({
+      locale: ref("en"),
+      t: (text: string) => text,
+    }));
+    vi.stubGlobal("useTranslation", () => ({ processI18n: (t: string) => t }));
+    vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
+    vi.stubGlobal("resolveDmsComponent", (name: string) =>
+      name === "TaskCard" ? TaskCard : undefined,
+    );
+  });
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("moves a card dragged by its handle onto the card it is dropped on", async () => {
+    const { context, moves, items } = createContext();
+    mount(context);
+    expect(handles()).toHaveLength(3);
+    expect(handles()[0]!.getAttribute("aria-label")).toBe(
+      "dms.table.reorder.move",
+    );
+    handles()[2]!.dispatchEvent(dragEvent("dragstart"));
+    await nextTick();
+    expect(cards()[2]!.classList.contains("opacity-50")).toBe(true);
+    cards()[0]!.dispatchEvent(dragEvent("drop"));
+    expect(moves).toEqual([[2, 0]]);
+    expect(items.value.map((row) => row._id)).toEqual(["t2", "t0", "t1"]);
+  });
+
+  it("moves a card by one with the arrow keys and keeps the focus on its handle", async () => {
+    const { context, moves, items } = createContext();
+    mount(context);
+    const handle = handles()[1]!;
+    handle.focus();
+    handle.dispatchEvent(key("ArrowLeft"));
+    await nextTick();
+    await nextTick();
+    expect(items.value.map((row) => row._id)).toEqual(["t1", "t0", "t2"]);
+    expect(document.activeElement).toBe(handle);
+    handles()[2]!.dispatchEvent(key("ArrowDown"));
+    handles()[0]!.dispatchEvent(key("ArrowUp"));
+    expect(moves).toEqual([[1, 0]]);
+  });
+
+  it("keeps its selection and its default action beside the handle", () => {
+    const { context, opened, selected } = createContext();
+    mount(context);
+    handles()[0]!.click();
+    handles()[0]!.dispatchEvent(key("Enter"));
+    expect(opened).toEqual([]);
+    container.querySelectorAll("input")[0]!.dispatchEvent(new Event("change"));
+    expect(selected.value).toEqual(["t1", "t0"]);
+    cards()[2]!.click();
+    expect(opened).toEqual([context.items[2]]);
+  });
+
+  it("disables the handle while moving is off, saying how to turn it on", () => {
+    const { context, moves } = createContext(false);
+    mount(context);
+    const handle = container.querySelector("header button")!;
+    expect(handle.hasAttribute("disabled")).toBe(true);
+    expect(handle.getAttribute("title")).toBe("dms.table.reorder.disabled");
+    handle.dispatchEvent(dragEvent("dragstart"));
+    cards()[0]!.dispatchEvent(dragEvent("drop"));
+    expect(moves).toEqual([]);
+  });
+
+  it("draws no handle on a table not ordered by hand", () => {
+    const { context } = createContext();
+    (context as { reorder?: unknown }).reorder = undefined;
+    mount(context);
+    expect(container.querySelector("header button")).toBe(null);
+  });
+
+  it("hands a custom card its handle, its selection, and drops on it", () => {
+    const { context, moves } = createContext(true, "TaskCard");
+    mount(context);
+    expect(cards().map((card) => card.dataset.selected)).toEqual([
+      "false",
+      "true",
+      "false",
+    ]);
+    handles()[0]!.dispatchEvent(dragEvent("dragstart"));
+    cards()[2]!.dispatchEvent(dragEvent("drop"));
+    expect(moves).toEqual([[0, 2]]);
+    handles()[1]!.dispatchEvent(key("ArrowRight"));
+    expect(moves).toEqual([
+      [0, 2],
+      [1, 2],
+    ]);
+  });
+});
+
+describe("which displays move rows", () => {
+  it("offers moving on the grid and the cards, never on the board or the groups", () => {
+    expect(tableViewSource).toMatch(
+      /ORDERED_DISPLAY_IDS = new Set\(\[TABLE_DISPLAY_ID, CARDS_DISPLAY_ID\]\)/,
+    );
+    expect(tableViewSource).toMatch(/reorder: reorderState\.value,/);
+  });
+
+  it("draws no handle on a display that does not draw the rows in their order", () => {
+    vi.stubGlobal("computed", computed);
+    const { reorderState } = useTableReorder({
+      reorder: { field: "position" },
+      data: ref(null),
+      rowIdKey: "_id",
+      location: "/api/features",
+      api: vi.fn() as unknown as Api,
+      canEdit: computed(() => true),
+      isNarrowed: computed(() => false),
+      isOrderedDisplay: computed(() => false),
+      refresh: vi.fn(),
+      onError: vi.fn(),
+    });
+    expect(reorderState.value).toBe(undefined);
+    vi.unstubAllGlobals();
+  });
+});

package/frontend-vue/tests/table-view-reorder.test.ts

@@ -67,7 +67,7 @@ describe("rows ordered by hand", () => {
       api: api as unknown as Api,
       canEdit: computed(() => true),
       isNarrowed: computed(() => narrowed),
-      isGrid: computed(() => true),
+      isOrderedDisplay: computed(() => true),
       refresh,
       onError,
     });
@@ -113,7 +113,7 @@ describe("rows ordered by hand", () => {
       api: vi.fn() as unknown as Api,
       canEdit: computed(() => false),
       isNarrowed: computed(() => false),
-      isGrid: computed(() => true),
+      isOrderedDisplay: computed(() => true),
       refresh: vi.fn(),
       onError: vi.fn(),
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"
@@ -37,7 +37,7 @@
     "@antelopejs/interface-data-api": ">=0.2.0 <1.0.0",
     "@antelopejs/interface-database": ">=0.1.8 <1.0.0",
     "@antelopejs/interface-database-decorators": ">=0.1.7 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.5.1 <0.6.0",
+    "@antelopejs/interface-dms": ">=0.5.2 <0.6.0",
     "@antelopejs/interface-email": ">=0.0.5 <1.0.0",
     "@antelopejs/interface-file-storage": ">=0.1.3 <1.0.0",
     "archiver": "^7.0.1",

package/skills/dms/SKILL.md

@@ -53,6 +53,9 @@ For the framework underneath (the core, `ajs` CLI, interfaces as versioned contr
   and a `PillsDisplay` item may be `{ label, tone?, variant: "soft" | "outline" }`, styled per row.
   A `KeyValueList` row takes `copy: true` (a copy button for its shown value) or `copyValue`
   (the text to copy instead, e.g. a full URL behind a short label).
+  A table ordered by hand (`reorder: { field }`) moves its rows on the grid and its cards on
+  the `cards` display alike; a `card.component` receives a `reorder` prop and `v-bind`s
+  `reorder.handle` on a button — no custom display just to drag cards.
 - **It's interfaces all the way down.** Everything you consume from the DMS is an AntelopeJS
   interface imported as an `@antelopejs/interface-dms/...` subpath (see the imports below);
   a distributable module exposes its own from a companion `@antelopejs/interface-<name>` package listed in `antelopeJs.implements`.