@antelopejs/dms 0.7.5 → 0.7.6

package/frontend-vue/layers/dms-ui/app/components/top-list/TopListCard.vue

@@ -3,6 +3,9 @@ import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { useMounted } from "@vueuse/core";
 import DmsEmptyState from "../empty-state/EmptyState.vue";
 import DmsSectionHeader from "../section-header/SectionHeader.vue";
+import DmsBlockActions, {
+  type BlockAction,
+} from "../../build/components/blocks/BlockActions.vue";
 // Imported rather than resolved from the registry: a registered component is
 // a lazy chunk of its own, and a list whose rows only arrive with its data
 // would draw an empty card for the moment that chunk takes.
@@ -42,6 +45,8 @@ interface Props extends DefaultComponentProps {
   maxHeight?: string;
   staticItems?: TopListItem[];
   emptyLabel?: string;
+  /** Link buttons in the card head, after the period badge. */
+  actions?: BlockAction[];
   /**
    * Placeholder rows while `fetchUrl` loads: the "top N" it answers.
    * Optional. Defaults to 10, enough to fill the default `maxHeight`.
@@ -90,6 +95,7 @@ const props = withDefaults(defineProps<Props>(), {
   currencyCode: "EUR",
   maxHeight: DEFAULT_MAX_HEIGHT,
   skeletonCount: SKELETON_ROW_COUNT,
+  actions: () => [],
 });
 
 const { locale, t } = useI18n();
@@ -247,11 +253,33 @@ const gridStyle = computed(() => ({
       :title="processI18n(title)"
       :description="description ? processI18n(description) : undefined"
     >
-      <template v-if="periodScope" #trailing>
-        <UBadge v-if="badgeLabel" :color="badgeColor" variant="soft" size="sm">
-          {{ badgeLabel }}
-        </UBadge>
-        <USkeleton v-else class="h-5 w-16 rounded-[5px]" aria-hidden="true" />
+      <template v-if="periodScope || props.actions.length" #trailing>
+        <template v-if="periodScope">
+          <UBadge
+            v-if="badgeLabel"
+            :color="badgeColor"
+            variant="soft"
+            size="sm"
+          >
+            {{ badgeLabel }}
+          </UBadge>
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            v-else
+            class="h-5 w-16 rounded-[5px]"
+            aria-hidden="true"
+          />
+        </template>
+        <!-- Quiet links, as in an ActivityFeed head: the rows stay the
+          card's content. -->
+        <DmsBlockActions
+          v-if="props.actions.length"
+          :actions="props.actions"
+          size="xs"
+          lead-variant="ghost"
+          lead-color="neutral"
+          rest-variant="ghost"
+        />
       </template>
     </DmsSectionHeader>
 
@@ -308,15 +336,23 @@ const gridStyle = computed(() => ({
           class="flex h-14 items-center gap-3 px-[18px]"
         >
           <USkeleton
+            :aria-label="t('dms.a11y.loading')"
             v-if="showRank"
             class="size-[26px] shrink-0 rounded-[7px]"
           />
           <div class="grid flex-1 gap-1.5">
-            <USkeleton class="h-3 w-2/5" />
-            <USkeleton class="h-2.5 w-1/4" />
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-2/5" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="h-2.5 w-1/4"
+            />
           </div>
-          <USkeleton class="h-3 w-14" />
-          <USkeleton v-if="showDelta" class="h-3 w-[46px]" />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-14" />
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            v-if="showDelta"
+            class="h-3 w-[46px]"
+          />
         </div>
       </div>
     </div>

package/frontend-vue/layers/dms-ui/app/composables/form/types/field.ts

@@ -54,6 +54,8 @@ export interface FormSection {
   label: string;
   description?: string;
   icon?: string;
+  /** Heading of the side navigation the section's entry sits under. */
+  navGroup?: string;
   fieldIds: string[];
 }
 

package/frontend-vue/layers/dms-ui/app/composables/tab/types/props.ts

@@ -31,6 +31,11 @@ export interface TabProps extends TabComponentProps {
   badgesUrl?: string;
   /** Topics whose events make the tab set read `badgesUrl` again. */
   realtimeTopic?: string | string[];
+  /**
+   * A horizontal `pill` list as wide as its tabs, not the full width; a
+   * `link` list already sizes its tabs to their labels.
+   */
+  fit?: boolean;
 }
 
 /** The badges `badgesUrl` answers with, by tab slot. */

package/frontend-vue/tests/confirm-dialog-fields.test.ts

@@ -231,6 +231,18 @@ describe("ConfirmModal fields", () => {
     expect(closed).toHaveBeenCalledWith(true);
   });
 
+  it("says what the required mark means under the fields", async () => {
+    mount({ title: "Delete?", fields: [reassign] });
+    await flush();
+    expect(host.textContent).toContain("dms.form.required_legend");
+  });
+
+  it("draws no legend when no field is required", async () => {
+    mount({ title: "Delete?", fields: [{ ...reassign, required: false }] });
+    await flush();
+    expect(host.textContent).not.toContain("dms.form.required_legend");
+  });
+
   it("flags a required field left empty instead of confirming", async () => {
     const onConfirm = vi.fn();
     mount({ title: "Delete?", fields: [reassign], onConfirm });

package/frontend-vue/tests/drawer-target-direction.test.ts

@@ -184,6 +184,7 @@ describe("the drawer container", () => {
       clearGuards: vi.fn(),
     }));
     vi.stubGlobal("useDmsRoute", () => reactive({ path: "/" }));
+    vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
   });
 
   it("slides in from the bottom, full width, by default", async () => {

package/frontend-vue/tests/field-suffix-count.test.ts

@@ -0,0 +1,120 @@
+// @vitest-environment jsdom
+/**
+ * A number field writes its unit after the box ("30 days"), and a text field
+ * or a text area asked for it counts the characters typed, out of its
+ * `maxLength` ("4 / 60"). Without either option, the control is unchanged.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  type App,
+  type Component,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+} from "vue";
+import { characterCountText } from "../layers/dms-ui/app/build/utils/characterCount";
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+const Control = (tag: string) =>
+  defineComponent({
+    inheritAttrs: false,
+    setup:
+      (_, { slots, attrs }) =>
+      () =>
+        h("div", { "data-control": tag }, [
+          h(tag, { ...attrs }),
+          slots.trailing?.(),
+        ]),
+  });
+
+async function mount(component: Component, props: Record<string, unknown>) {
+  app = createApp({ render: () => h(component, props) });
+  app.component("UInput", Control("input"));
+  app.component("UTextarea", Control("textarea"));
+  app.component("UInputNumber", Control("input"));
+  app.mount(host);
+  await nextTick();
+}
+
+const load = async (name: string) =>
+  (await import(`../layers/dms-ui/app/components/form/components/${name}.vue`))
+    .default as Component;
+
+beforeEach(() => {
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => (text.startsWith("$") ? `t(${text})` : text),
+  }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("characterCountText", () => {
+  it("counts out of the limit, or alone", () => {
+    expect(characterCountText("Acme", 60)).toBe("4 / 60");
+    expect(characterCountText("Acme")).toBe("4");
+    expect(characterCountText(undefined, 60)).toBe("0 / 60");
+    expect(characterCountText("👋🏽", 10)).toBe("2 / 10");
+  });
+});
+
+describe("a text field's counter", () => {
+  it("shows the count in the field when asked", async () => {
+    await mount(await load("InputText"), {
+      modelValue: "Acme",
+      maxLength: 60,
+      showCount: true,
+    });
+    expect(
+      host.querySelector("[data-character-count]")?.textContent?.trim(),
+    ).toBe("4 / 60");
+    const input = host.querySelector("input")!;
+    expect(input.getAttribute("maxlength")).toBe("60");
+    expect(input.hasAttribute("showcount")).toBe(false);
+  });
+
+  it("draws no counter by default", async () => {
+    await mount(await load("InputText"), { modelValue: "Acme", maxLength: 60 });
+    expect(host.querySelector("[data-character-count]")).toBeNull();
+    expect(host.querySelector("input")!.getAttribute("maxlength")).toBe("60");
+  });
+
+  it("counts under a text area", async () => {
+    await mount(await load("Textarea"), {
+      modelValue: "Hello",
+      maxLength: 280,
+      showCount: true,
+    });
+    expect(
+      host.querySelector("[data-character-count]")?.textContent?.trim(),
+    ).toBe("5 / 280");
+    expect(host.querySelector("textarea")!.hasAttribute("showcount")).toBe(
+      false,
+    );
+  });
+});
+
+describe("a number field's unit", () => {
+  it("writes the unit after the field, translated", async () => {
+    await mount(await load("InputNumber"), {
+      modelValue: 30,
+      suffix: "$billing.days",
+    });
+    const suffix = host.querySelector("[data-field-suffix]");
+    expect(suffix?.textContent?.trim()).toBe("t($billing.days)");
+    expect(host.querySelector("input")!.hasAttribute("suffix")).toBe(false);
+  });
+
+  it("draws no unit by default", async () => {
+    await mount(await load("InputNumber"), { modelValue: 30 });
+    expect(host.querySelector("[data-field-suffix]")).toBeNull();
+  });
+});

package/frontend-vue/tests/form-section-nav-groups.test.ts

@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+/**
+ * A long sectioned form groups its side navigation under headings: the
+ * sections naming the same `navGroup` one after the other share one. The
+ * row of chips lists every section without them.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { type App, createApp, defineComponent, h, nextTick } from "vue";
+import {
+  groupSectionsForNav,
+  layoutSections,
+} from "../layers/dms-ui/app/build/composables/form/formSections";
+import FormSectionNav from "../layers/dms-ui/app/build/components/form/FormSectionNav.vue";
+
+const field = (id: string) => ({
+  id,
+  component: { componentName: "dms-input-text" },
+});
+
+const SECTIONS = [
+  { id: "plan", label: "Plan", fieldIds: ["plan"] },
+  {
+    id: "dunning",
+    label: "Dunning",
+    navGroup: "$billing",
+    fieldIds: ["dunning"],
+  },
+  { id: "tax", label: "Tax", navGroup: "$billing", fieldIds: ["tax"] },
+  { id: "terms", label: "Terms", navGroup: "Legal", fieldIds: ["terms"] },
+];
+
+const layout = layoutSections(
+  ["plan", "dunning", "tax", "terms"].map(field),
+  SECTIONS,
+);
+
+let app: App | undefined;
+let host: HTMLDivElement;
+
+async function mount(variant: "list" | "chips") {
+  app = createApp({
+    render: () =>
+      h(FormSectionNav, {
+        variant,
+        sections: layout.sections,
+        states: {},
+        anchorId: (id: string) => `form-${id}`,
+      }),
+  });
+  app.component("UIcon", defineComponent({ render: () => h("i") }));
+  app.mount(host);
+  await nextTick();
+}
+
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+  vi.stubGlobal("useTranslation", () => ({
+    processI18n: (text: string) => (text.startsWith("$") ? `t(${text})` : text),
+  }));
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  app?.unmount();
+  host.remove();
+  vi.unstubAllGlobals();
+});
+
+describe("groupSectionsForNav", () => {
+  it("cuts the sections wherever their heading changes", () => {
+    expect(
+      groupSectionsForNav(layout.sections).map((group) => [
+        group.label,
+        group.sections.map((section) => section.id),
+      ]),
+    ).toEqual([
+      [undefined, ["plan"]],
+      ["$billing", ["dunning", "tax"]],
+      ["Legal", ["terms"]],
+    ]);
+  });
+
+  it("keeps a form without groups in one run", () => {
+    const plain = layoutSections(
+      [field("a"), field("b")],
+      [
+        { id: "a", label: "A", fieldIds: ["a"] },
+        { id: "b", label: "B", fieldIds: ["b"] },
+      ],
+    );
+    expect(groupSectionsForNav(plain.sections)).toHaveLength(1);
+  });
+});
+
+describe("the side navigation", () => {
+  it("titles each run, and names its list by it", async () => {
+    await mount("list");
+    const lists = [...host.querySelectorAll("ul")];
+    expect(lists).toHaveLength(3);
+    expect(lists[0]!.hasAttribute("aria-labelledby")).toBe(false);
+    const headings = lists.slice(1).map((list) => {
+      const id = list.getAttribute("aria-labelledby")!;
+      return document.getElementById(id)?.textContent?.trim();
+    });
+    expect(headings).toEqual(["t($billing)", "Legal"]);
+    expect(lists[1]!.querySelectorAll("li")).toHaveLength(2);
+  });
+
+  it("lists the chips in one row, without headings", async () => {
+    await mount("chips");
+    expect(host.querySelectorAll("ul")).toHaveLength(1);
+    expect(host.querySelectorAll("li")).toHaveLength(4);
+    expect(host.querySelector("[aria-labelledby]")).toBeNull();
+  });
+});

package/frontend-vue/tests/nav-card-badge.test.ts

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { createApp, defineComponent, h, type App } from "vue";
-import { afterEach, expect, it } from "vitest";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import NavCard from "../layers/dms-ui/app/components/card/NavCard.vue";
 
 // A nav card of the settings overview carries its page's navigation badge in
@@ -39,6 +39,10 @@ function mountCard(props: Record<string, unknown>): HTMLElement {
 const headRow = (container: HTMLElement) =>
   container.querySelector("h3")?.parentElement as HTMLElement;
 
+beforeEach(() => {
+  vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
+});
+
 afterEach(() => {
   app?.unmount();
   app = undefined;

package/frontend-vue/tests/nuxt-ui-aria-labels.test.ts

@@ -0,0 +1,58 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+import coreEn from "../layers/dms-core/i18n/locales/core-en-GB.json";
+import coreFr from "../layers/dms-core/i18n/locales/core-fr-FR.json";
+
+// Nuxt UI hard-codes these labels in English, and its locales do not carry
+// them: each use has to bind its own, translated.
+const LABELLED_TAGS = {
+  UBreadcrumb: "dms.a11y.breadcrumb",
+  USkeleton: "dms.a11y.loading",
+} as const;
+const LOCALES = { "en-GB": coreEn, "fr-FR": coreFr };
+
+function walk(directory: string): string[] {
+  return readdirSync(directory).flatMap((name) => {
+    const path = join(directory, name);
+    return statSync(path).isDirectory() ? walk(path) : [path];
+  });
+}
+
+function lookup(messages: unknown, key: string): unknown {
+  return key
+    .split(".")
+    .reduce<unknown>(
+      (node, part) => (node as Record<string, unknown> | undefined)?.[part],
+      messages,
+    );
+}
+
+describe("Nuxt UI hard-coded aria-labels", () => {
+  const sources = walk(join(process.cwd(), "layers"))
+    .filter((path) => path.endsWith(".vue"))
+    .map((path) => ({
+      path: relative(process.cwd(), path),
+      text: readFileSync(path, "utf8"),
+    }));
+
+  for (const [tag, key] of Object.entries(LABELLED_TAGS)) {
+    it(`binds a translated aria-label on every ${tag}`, () => {
+      const tagPattern = new RegExp(`<${tag}\\b[^>]*?>`, "gs");
+      const offenders = sources.flatMap(({ path, text }) =>
+        [...text.matchAll(tagPattern)]
+          .filter(([found]) => !found.includes(`:aria-label="t('${key}')"`))
+          .map(() => path),
+      );
+
+      expect(offenders).toEqual([]);
+    });
+
+    it(`translates ${key} in every locale`, () => {
+      for (const messages of Object.values(LOCALES)) {
+        expect(lookup(messages, key)).toBeTypeOf("string");
+      }
+      expect(lookup(coreFr, key)).not.toBe(lookup(coreEn, key));
+    });
+  }
+});

package/frontend-vue/tests/page-fill-height.test.ts

@@ -68,11 +68,11 @@ const pageLayout = ref<PageLayoutFixture | null>(null);
 // is pending after a client navigation, once a short delay passes).
 const PAGE_SKELETON_MARKUP =
   '<div aria-hidden="true" class="dms-page-skeleton space-y-6 hidden [html[data-dms-role-preview=pending]_&amp;]:block"><!--v-if-->' +
-  '<div class="dms-card space-y-4 p-[18px]"><USkeleton class="h-3.5 w-40"></USkeleton><!--[-->' +
+  '<div class="dms-card space-y-4 p-[18px]"><USkeleton aria-label="dms.a11y.loading" class="h-3.5 w-40"></USkeleton><!--[-->' +
   ["72%", "58%", "66%", "44%"]
     .map(
       (width) =>
-        `<USkeleton class="h-2.5" style="width:${width};"></USkeleton>`,
+        `<USkeleton aria-label="dms.a11y.loading" class="h-2.5" style="width:${width};"></USkeleton>`,
     )
     .join("") +
   "<!--]--></div></div>";

package/frontend-vue/tests/save-bar.test.ts

@@ -104,3 +104,52 @@ it("lists a record form's unsaved changes beside Discard and Save", async () =>
     "dms.save_bar.save",
   ]);
 });
+
+const classesOf = (element: Element | null | undefined) =>
+  (element?.className ?? "").split(/\s+/);
+const anchor = () => host.firstElementChild!;
+const bar = () => anchor().firstElementChild!;
+
+it("takes no space while a clean page form's bar hides", async () => {
+  await mount({ variant: "floating", dirty: false });
+
+  expect(anchor().getAttribute("aria-hidden")).toBe("true");
+  expect(classesOf(anchor())).toEqual(
+    expect.arrayContaining(["sticky", "h-0"]),
+  );
+  expect(classesOf(bar())).toEqual(
+    expect.arrayContaining(["absolute", "invisible"]),
+  );
+});
+
+it("floats over the form when it shows, making room under the last field", async () => {
+  await mount({ variant: "floating", dirty: true, changes: ["Name"] });
+
+  expect(anchor().getAttribute("aria-hidden")).toBeNull();
+  expect(classesOf(anchor())).not.toContain("h-0");
+  expect(classesOf(anchor())).toContain("h-[calc(var(--dms-save-bar-h)+2rem)]");
+  expect(classesOf(bar())).toEqual(
+    expect.arrayContaining(["absolute", "h-(--dms-save-bar-h)"]),
+  );
+  expect(classesOf(bar())).not.toContain("invisible");
+});
+
+it("gives Cancel and Unsaved changes the same fixed height", async () => {
+  await mount({ variant: "floating", dirty: false, cancellable: true });
+  const cancelBar = classesOf(bar());
+  expect(buttons()).toEqual([{ label: "dms.button.cancel", disabled: false }]);
+  app?.unmount();
+
+  await mount({ variant: "floating", dirty: true, changes: ["Name"] });
+  expect(cancelBar).toContain("h-(--dms-save-bar-h)");
+  expect(classesOf(bar())).toContain("h-(--dms-save-bar-h)");
+});
+
+it("keeps a hidden band's place in its footer", async () => {
+  await mount({ variant: "band", kind: "action", dirty: false });
+
+  expect(anchor().getAttribute("aria-hidden")).toBe("true");
+  expect(classesOf(anchor())).toContain("invisible");
+  expect(classesOf(anchor())).not.toContain("h-0");
+  expect(classesOf(anchor())).not.toContain("absolute");
+});

package/frontend-vue/tests/stat-group-detail-lines.test.ts

@@ -0,0 +1,63 @@
+import { createSSRApp, defineComponent, h, ref, type Component } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import StatGroup from "../layers/dms-ui/app/components/stat-group/StatGroup.vue";
+import NavCard from "../layers/dms-ui/app/components/card/NavCard.vue";
+
+// A detail or a title cut on its first line loses what it says: a stat
+// group's details and a nav card's title take two lines before the ellipsis.
+
+const Slot = defineComponent({
+  setup:
+    (_, { slots }) =>
+    () =>
+      h("div", slots.default?.()),
+});
+
+async function render(component: Component, props: Record<string, unknown>) {
+  const app = createSSRApp({ render: () => h(component, props) });
+  for (const name of ["UIcon", "USkeleton", "DmsLink"]) {
+    app.component(name, Slot);
+  }
+  return renderToString(app);
+}
+
+beforeAll(() => {
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-GB"), t: String }));
+});
+
+const DETAIL = "Next invoice on Nov 1 for the three seats left";
+
+function detailClasses(html: string): string {
+  const element = new RegExp(
+    `<(?:p|small) class="([^"]*)"[^>]*>\\s*${DETAIL}`,
+  ).exec(html);
+  return element?.[1] ?? "";
+}
+
+describe("StatGroup detail", () => {
+  it.each(["joined", "cards"])(
+    "gives a %s cell's detail two lines before its ellipsis",
+    async (layout) => {
+      const html = await render(StatGroup, {
+        layout,
+        items: [{ eyebrow: "Billing", value: "On", detail: DETAIL }],
+      });
+      expect(detailClasses(html)).toContain("line-clamp-2");
+      expect(detailClasses(html)).not.toContain("truncate");
+    },
+  );
+});
+
+describe("NavCard title", () => {
+  it("takes two lines before its ellipsis", async () => {
+    const html = await render(NavCard, {
+      to: "/workspaces?view=past-due",
+      icon: "i-ph-warning",
+      title: "Workspaces past due for more than seven days",
+    });
+    const title = /<h3 class="([^"]*)"/.exec(html)?.[1] ?? "";
+    expect(title).toContain("line-clamp-2");
+    expect(title).not.toContain("truncate");
+  });
+});