@antelopejs/dms 0.7.5 → 0.7.6

package/frontend-vue/tests/tab-fit.test.ts

@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+/**
+ * `fit` draws a horizontal pill list as wide as its tabs: the list stops
+ * taking the column's width and the triggers stop growing to share it. A
+ * link list, a vertical one and a list without `fit` keep their classes.
+ */
+import * as vue from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { AxeOrientation } from "../layers/dms-core/app/types/orientation";
+import { Color } from "../layers/dms-core/app/types/color";
+import { Size } from "../layers/dms-core/app/types/size";
+import { TabVariant } from "../layers/dms-ui/app/composables/tab/types/props";
+
+vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
+  useChartFetch: () => ({ data: vue.ref(null) }),
+}));
+
+interface TabsUi {
+  list?: unknown;
+  trigger?: unknown;
+}
+
+let received: TabsUi = {};
+let app: vue.App | undefined;
+
+const Tabs = vue.defineComponent({
+  props: { ui: { type: Object, default: () => ({}) } },
+  setup: (props) => () => {
+    received = props.ui as TabsUi;
+    return vue.h("div");
+  },
+});
+
+const classesOf = (value: unknown): string =>
+  [value].flat(Infinity).filter(Boolean).join(" ");
+
+async function mount(props: Record<string, unknown>): Promise<TabsUi> {
+  const { default: Tab } = await import(
+    "../layers/dms-ui/app/components/tab/Tab.vue"
+  );
+  app = vue.createApp({
+    render: () =>
+      vue.h(Tab, {
+        items: [
+          { label: "Activity", slot: "activity" },
+          { label: "Logins", slot: "logins" },
+        ],
+        componentId: "tabs",
+        pageId: "dashboard",
+        ...props,
+      }),
+  });
+  app.component("UTabs", Tabs);
+  app.mount(document.createElement("div"));
+  await vue.nextTick();
+  return received;
+}
+
+beforeEach(() => {
+  for (const name of ["computed", "ref", "useTemplateRef"] as const) {
+    vi.stubGlobal(name, vue[name]);
+  }
+  vi.stubGlobal("AxeOrientation", AxeOrientation);
+  vi.stubGlobal("Color", Color);
+  vi.stubGlobal("Size", Size);
+  vi.stubGlobal("useI18n", () => ({ locale: vue.ref("en-US"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+  vi.stubGlobal("useWatch", () => ({ state: vue.ref({}) }));
+  vi.stubGlobal("useTab", () => ({ activeTab: vue.ref("0") }));
+  vi.stubGlobal("useTabShortcuts", () => {});
+});
+
+afterEach(() => {
+  app?.unmount();
+  vi.unstubAllGlobals();
+});
+
+describe("Tab fit", () => {
+  it("hugs a horizontal pill list to its tabs", async () => {
+    const ui = await mount({ fit: true });
+    expect(classesOf(ui.list)).toContain("w-fit");
+    expect(classesOf(ui.trigger)).toContain("grow-0");
+  });
+
+  it("keeps the full width by default", async () => {
+    const ui = await mount({});
+    expect(classesOf(ui.list)).not.toContain("w-fit");
+    expect(classesOf(ui.trigger)).toBe("");
+  });
+
+  it.each([
+    { variant: TabVariant.link },
+    { orientation: AxeOrientation.vertical },
+  ])("leaves %o as it was", async (props) => {
+    const ui = await mount({ fit: true, ...props });
+    expect(classesOf(ui.list)).not.toContain("w-fit");
+    expect(classesOf(ui.trigger)).toBe("");
+  });
+});

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

@@ -448,6 +448,21 @@ describe("identity sub-line", () => {
     expect(sub?.className).toContain("text-muted");
   });
 
+  it("reads each row's tile icon from iconField, falling back to icon", async () => {
+    const identity = await identityFormatter();
+    const options = { iconField: "icon", icon: "i-ph-puzzle-piece" };
+    const tileOf = (row: Record<string, unknown>) =>
+      render(() =>
+        (identity.default as Formatter)("Exports", "en", options, row),
+      )
+        .querySelector("[data-icon]")
+        ?.getAttribute("data-icon");
+
+    expect(tileOf({ icon: "i-ph-export" })).toBe("i-ph-export");
+    expect(tileOf({ icon: "" })).toBe("i-ph-puzzle-piece");
+    expect(tileOf({})).toBe("i-ph-puzzle-piece");
+  });
+
   it("draws an empty issuer as its translated empty label and icon", async () => {
     const identity = await identityFormatter();
     const cell = render(() =>

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

@@ -38,8 +38,30 @@ describe("Table grid cell layout theme", () => {
 
   it("preserves pinned cell and table layout classes", () => {
     expect(theme({ cellWrap: true }).table()).toBe(theme().table());
-    expect(theme({ cellWrap: true }).rowCell({ pinned: "left" })).toBe(
-      theme().rowCell({ pinned: "left" }),
+    const pinned = theme().rowCell({ pinned: "left" }).split(" ");
+    const wrapped = theme()
+      .rowCell({ pinned: "left", cellWrap: true })
+      .split(" ");
+    expect(wrapped.filter((name: string) => !pinned.includes(name))).toEqual([
+      "py-2.5",
+    ]);
+    expect(pinned.filter((name: string) => !wrapped.includes(name))).toEqual([
+      "py-0",
+    ]);
+  });
+
+  it("pads only a wrapped cell, so its lines clear the row's hairlines", () => {
+    expect(theme().rowCell({ cellWrap: true })).toContain("py-2.5");
+    expect(theme().rowCell({ cellWrap: true })).toContain("h-11");
+    expect(theme().rowCell({ cellWrap: true })).not.toContain("py-0");
+    for (const cellWrap of [undefined, false]) {
+      expect(theme().rowCell({ cellWrap })).toContain("py-0");
+    }
+  });
+
+  it("reads each column's policy for its cell too", () => {
+    expect(tableSource).toMatch(
+      /uiTable\.rowCell\(\{[^}]*cellWrap: \(cell\.column\.columnDef as TableColumn<T>\)\s*\.cellWrap,?\s*\}\)/,
     );
   });
 

package/frontend-vue/tests/table-row-action-errors.test.ts

@@ -73,6 +73,11 @@ function fetchError(status: number | undefined, data?: unknown) {
   });
 }
 
+const shownRows = [
+  { _id: "t1", name: "Write the report" },
+  { _id: "t2", name: "Review the draft" },
+];
+
 async function rowActions() {
   const { useTableRowActions } = await import(
     "../layers/dms-ui/app/build/composables/table-view/useTableViewRowActions"
@@ -84,6 +89,7 @@ async function rowActions() {
     pageId: "tasks",
     formComponents: {},
     refreshCallback: refresh,
+    rowNavigation: { rows: () => shownRows, rowIdKey: "_id" },
   });
 }
 
@@ -298,6 +304,26 @@ describe("Table row actions: refusals", () => {
     });
   });
 
+  it("words a fixed dialog with the fields of the one row it deletes", async () => {
+    api.mockResolvedValue(1);
+    const { deleteRows } = await rowActions();
+
+    await deleteRows(["t1"], { confirm: { title: "Delete {name}?" } });
+
+    expect(dialogs[0]!.options.title).toBe("Delete Write the report?");
+  });
+
+  it("words a fixed dialog with the count of the rows it deletes", async () => {
+    api.mockResolvedValue(2);
+    const { deleteRows } = await rowActions();
+
+    await deleteRows(["t1", "t2"], {
+      confirm: { title: "Delete {count} tasks?" },
+    });
+
+    expect(dialogs[0]!.options.title).toBe("Delete 2 tasks?");
+  });
+
   it("keeps the generic confirmation for several rows of a `from` dialog", async () => {
     api.mockResolvedValue(2);
     const { deleteRows } = await rowActions();

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.5",
+  "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.2 <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,9 +48,19 @@ 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