@antelopejs/dms 0.7.4 → 0.7.6

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/frontend-vue/tests/top-list-card-actions.test.ts

@@ -0,0 +1,91 @@
+/**
+ * A TopListCard's head carries link buttons ("Catalogue →") after its period
+ * badge, quiet like an ActivityFeed's; a card without them draws its head as
+ * before.
+ */
+import { createSSRApp, defineComponent, h, ref } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import TopListCard from "../layers/dms-ui/app/components/top-list/TopListCard.vue";
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({
+    data: ref({ items: [{ id: "pro", title: "Pro", value: 12 }] }),
+    isLoading: ref(false),
+  }),
+}));
+
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+const Button = defineComponent({
+  props: { label: String, to: String, variant: String, color: String },
+  setup: (props) => () =>
+    h(
+      "a",
+      {
+        "data-button": "",
+        href: props.to,
+        "data-variant": props.variant,
+        "data-color": props.color,
+      },
+      props.label,
+    ),
+});
+
+async function render(props: Record<string, unknown>): Promise<string> {
+  const app = createSSRApp({
+    render: () =>
+      h(TopListCard, {
+        title: "Top plans",
+        componentId: "plans",
+        pageId: "dashboard",
+        ...props,
+      }),
+  });
+  for (const name of ["DmsCard", "UBadge", "UIcon", "USkeleton"]) {
+    app.component(name, Slot);
+  }
+  app.component("UButton", Button);
+  app.component("DmsTopListRow", Slot);
+  return renderToString(app);
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-US"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => (text.startsWith("$") ? `t(${text})` : text),
+  }));
+  vi.stubGlobal("useComponentEvent", () => ({}));
+  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe("TopListCard actions", () => {
+  it("draws its link buttons in the head, quiet and translated", async () => {
+    const html = await render({
+      actions: [
+        {
+          label: "$dashboard.catalogue",
+          to: "/plans",
+          icon: "i-ph-arrow-right",
+        },
+      ],
+    });
+    const button = /<a data-button[^>]*href="\/plans"[^>]*>([^<]*)<\/a>/.exec(
+      html,
+    );
+    expect(button?.[1]).toBe("t($dashboard.catalogue)");
+    expect(button?.[0]).toContain('data-variant="ghost"');
+    expect(button?.[0]).toContain('data-color="neutral"');
+  });
+
+  it("draws no button without actions", async () => {
+    expect(await render({})).not.toContain("data-button");
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "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.3 <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

@@ -48,11 +48,24 @@ For the framework underneath (the core, `ajs` CLI, interfaces as versioned contr
   banners (`RegisterLayoutBanner({ resolve })` → `{ text, actions }`) take it; never format text server-side.
   A table cell's secondary line is a row field holding one (or `{ text, tone }`), named by
   `StatusPillDisplay({ subField })`, `IdentityDisplay({ subtitleField })` or
-  `TwoLineDisplay({ subField })`; `IdentityDisplay({ emptyLabel, emptyIcon })` draws an empty row.
+  `TwoLineDisplay({ subField })`; `IdentityDisplay({ emptyLabel, emptyIcon })` draws an empty row,
+  and `IdentityDisplay({ iconField })` reads each row's tile icon from a row field.
   `StatusPillDisplay({ toneField })` reads the pill's tone from a row field (an HTTP status class),
   and a `PillsDisplay` item may be `{ label, tone?, variant: "soft" | "outline" }`, styled per row.
+  A `StatGroup` detail and a `NavCardGrid` card title take up to two lines before their ellipsis.
+  A unit after a number field is `NumberType({ suffix: "$…days" })`, a character counter on a
+  text field `StringType({ maxLength, showCount: true })` — no custom `inputComponent` for either.
+  A `TableView` over a shared controller hides a column on one page with
+  `columns: { hidden: ["workspace"] }` (as `isVisible: false`, for that table view only) — no view
+  just to hide it.
+  A long sectioned `Form` groups its side navigation with `FormSection.navGroup` ("Billing", "Legal").
+  `TopListCard({ actions })` puts link buttons in its head ("Catalogue →"), and `Tab({ fit: true })`
+  keeps a pill tab list to its tabs' width.
   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`.