@antelopejs/dms 0.7.6 → 0.7.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v0.7.7
+
+[compare changes](https://github.com/AntelopeJS/dms/compare/v0.7.6...v0.7.7)
+
+### 🚀 Enhancements
+
+- **dms:** Group the jump navigation chips by navGroup ([#200](https://github.com/AntelopeJS/dms/pull/200))
+
+### ❤️ Contributors
+
+- Antony Rizzitelli <rizzitelli.antony@pm.me>
+
 ## v0.7.6
 
 [compare changes](https://github.com/AntelopeJS/dms/compare/v0.7.5...v0.7.6)

package/frontend-vue/layers/dms-ui/app/build/components/form/FormSectionNav.vue

@@ -25,21 +25,36 @@ const emit = defineEmits<{ select: [sectionId: string] }>();
 const { t } = useI18n();
 const { processI18n } = useTranslation();
 
-// The side list reads its sections in titled runs (`navGroup`); the row of
-// chips has no room for headings and lists them all in one run.
-const GROUPS_CLASSES: Record<FormSectionNavVariant, string> = {
+/**
+ * How the entries are laid out: the side list, the row of chips, or the
+ * chips cut into labelled runs once a section names a `navGroup`.
+ */
+type FormSectionNavLayout = FormSectionNavVariant | "chipGroups";
+
+// A row of chips with no group keeps its one scrolling line; with groups, the
+// runs wrap, each led by its label.
+const GROUPS_CLASSES: Record<FormSectionNavLayout, string> = {
   list: "flex flex-col gap-4",
   chips: "",
+  chipGroups: "flex flex-wrap items-center gap-x-5 gap-y-2.5",
 };
 
-const GROUP_CLASSES: Record<FormSectionNavVariant, string> = {
+const GROUP_CLASSES: Record<FormSectionNavLayout, string> = {
   list: "grid gap-1",
   chips: "contents",
+  chipGroups: "flex flex-wrap items-center gap-x-2 gap-y-1.5",
 };
 
-const VARIANT_CLASSES: Record<FormSectionNavVariant, string> = {
+const LIST_CLASSES: Record<FormSectionNavLayout, string> = {
   list: "flex flex-col gap-0.5",
   chips: "flex gap-1.5 overflow-x-auto pb-1",
+  chipGroups: "flex flex-wrap gap-1.5",
+};
+
+const GROUP_LABEL_CLASSES: Record<FormSectionNavLayout, string> = {
+  list: "px-2.5",
+  chips: "",
+  chipGroups: "shrink-0",
 };
 
 const ITEM_CLASSES: Record<FormSectionNavVariant, string> = {
@@ -55,9 +70,12 @@ const ACTIVE_CLASSES: Record<FormSectionNavVariant, string> = {
 
 const groupIdPrefix = useId();
 const groups = computed<FormSectionNavGroup[]>(() =>
-  props.variant === "list"
-    ? groupSectionsForNav(props.sections)
-    : [{ sections: props.sections }],
+  groupSectionsForNav(props.sections),
+);
+const layout = computed<FormSectionNavLayout>(() =>
+  props.variant === "chips" && groups.value.some((group) => group.label)
+    ? "chipGroups"
+    : props.variant,
 );
 
 function groupHeadingId(index: number): string {
@@ -79,23 +97,20 @@ function onSelect(event: MouseEvent, sectionId: string): void {
 </script>
 
 <template>
-  <nav
-    :aria-label="t('dms.form.sections.nav')"
-    :class="GROUPS_CLASSES[props.variant]"
-  >
+  <nav :aria-label="t('dms.form.sections.nav')" :class="GROUPS_CLASSES[layout]">
     <div
       v-for="(group, groupIndex) in groups"
       :key="group.sections[0]?.id ?? groupIndex"
-      :class="GROUP_CLASSES[props.variant]"
+      :class="GROUP_CLASSES[layout]"
     >
       <DmsEyebrow
         v-if="group.label"
         :id="groupHeadingId(groupIndex)"
         :label="processI18n(group.label)"
-        class="px-2.5"
+        :class="GROUP_LABEL_CLASSES[layout]"
       />
       <ul
-        :class="VARIANT_CLASSES[props.variant]"
+        :class="LIST_CLASSES[layout]"
         :aria-labelledby="group.label ? groupHeadingId(groupIndex) : undefined"
       >
         <li v-for="section in group.sections" :key="section.id">

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

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

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

@@ -1,8 +1,8 @@
 // @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.
+ * A long sectioned form groups its navigation under headings: the sections
+ * naming the same `navGroup` one after the other share one, in the side list
+ * and in the row of chips alike. Without a group, the chips stay one row.
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { type App, createApp, defineComponent, h, nextTick } from "vue";
@@ -37,7 +37,17 @@ const layout = layoutSections(
 let app: App | undefined;
 let host: HTMLDivElement;
 
-async function mount(variant: "list" | "chips") {
+const plainLayout = layoutSections(
+  [field("a"), field("b")],
+  [
+    { id: "a", label: "A", fieldIds: ["a"] },
+    { id: "b", label: "B", fieldIds: ["b"] },
+  ],
+);
+
+type NavProps = Record<string, unknown>;
+
+async function mount(variant: "list" | "chips", props: NavProps = {}) {
   app = createApp({
     render: () =>
       h(FormSectionNav, {
@@ -45,6 +55,7 @@ async function mount(variant: "list" | "chips") {
         sections: layout.sections,
         states: {},
         anchorId: (id: string) => `form-${id}`,
+        ...props,
       }),
   });
   app.component("UIcon", defineComponent({ render: () => h("i") }));
@@ -82,14 +93,7 @@ describe("groupSectionsForNav", () => {
   });
 
   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);
+    expect(groupSectionsForNav(plainLayout.sections)).toHaveLength(1);
   });
 });
 
@@ -106,11 +110,68 @@ describe("the side navigation", () => {
     expect(headings).toEqual(["t($billing)", "Legal"]);
     expect(lists[1]!.querySelectorAll("li")).toHaveLength(2);
   });
+});
 
-  it("lists the chips in one row, without headings", async () => {
+function labelledRuns(): [string | undefined, string[]][] {
+  return [...host.querySelectorAll("ul")].map((list) => {
+    const id = list.getAttribute("aria-labelledby");
+    const label = id
+      ? document.getElementById(id)?.textContent?.trim()
+      : undefined;
+    const chips = [...list.querySelectorAll("a")].map(
+      (chip) => chip.textContent?.trim() ?? "",
+    );
+    return [label, chips];
+  });
+}
+
+describe("the row of chips", () => {
+  it("leads each run of chips with its group's label", async () => {
     await mount("chips");
+    expect(labelledRuns()).toEqual([
+      [undefined, ["Plan"]],
+      ["t($billing)", ["Dunning", "Tax"]],
+      ["Legal", ["Terms"]],
+    ]);
+  });
+
+  it("wraps the runs instead of scrolling one line", async () => {
+    await mount("chips");
+    const nav = host.querySelector("nav")!;
+    expect(nav.classList.contains("flex-wrap")).toBe(true);
+    for (const list of host.querySelectorAll("ul")) {
+      expect(list.classList.contains("overflow-x-auto")).toBe(false);
+    }
+  });
+
+  it("keeps a form without groups in one scrolling row", async () => {
+    await mount("chips", { sections: plainLayout.sections });
     expect(host.querySelectorAll("ul")).toHaveLength(1);
-    expect(host.querySelectorAll("li")).toHaveLength(4);
+    expect(host.querySelectorAll("li")).toHaveLength(2);
     expect(host.querySelector("[aria-labelledby]")).toBeNull();
+    expect(host.querySelector("p")).toBeNull();
+    expect(host.querySelector("ul")!.className).toBe(
+      "flex gap-1.5 overflow-x-auto pb-1",
+    );
+  });
+
+  it("links each chip to its section and reports the one chosen", async () => {
+    const selected: string[] = [];
+    await mount("chips", {
+      activeId: "tax",
+      onSelect: (id: string) => selected.push(id),
+    });
+    const chips = [...host.querySelectorAll("a")];
+    expect(chips.map((chip) => chip.getAttribute("href"))).toEqual([
+      "#form-plan",
+      "#form-dunning",
+      "#form-tax",
+      "#form-terms",
+    ]);
+    expect(
+      host.querySelector("[aria-current='location']")?.textContent?.trim(),
+    ).toBe("Tax");
+    chips[3]!.click();
+    expect(selected).toEqual(["terms"]);
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"

package/skills/dms/SKILL.md

@@ -58,7 +58,8 @@ For the framework underneath (the core, `ajs` CLI, interfaces as versioned contr
   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").
+  A long sectioned `Form` groups its navigation with `FormSection.navGroup` ("Billing", "Legal"),
+  in the side list and in the `sectionNav: "jump"` chips alike (a form whose side column holds a preview).
   `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`