@antelopejs/dms 0.10.0 → 0.11.1

package/frontend-vue/layers/dms-core/app/composables/useFieldErrors.ts

@@ -1,5 +1,8 @@
 import { nextTick, reactive } from "vue";
-import { resolveApiMessage } from "./translation/useTranslation";
+import {
+  type I18nTranslate,
+  resolveApiMessage,
+} from "./translation/useTranslation";
 import { resolveApiErrorMessage } from "./useApiError";
 
 /**
@@ -116,24 +119,23 @@ const FIELD_ERROR_KEYS = {
 /** Issue types whose size is a count (characters, items), not a value. */
 const COUNTED_TYPES = new Set(["string", "array", "set"]);
 
-// The data API (`@antelopejs/interface-data-api`) words its refusals in
-// English and lists the fields after a colon.
-const DATA_API_MESSAGES: ReadonlyArray<{ pattern: RegExp; message: string }> = [
-  {
-    pattern: /^Missing mandatory fields:\s*(.+)$/,
-    message: FIELD_ERROR_KEYS.required,
-  },
-  {
-    pattern: /^Invalid field type\(s\):\s*(.+)$/,
-    message: FIELD_ERROR_KEYS.invalid,
-  },
-];
+// The codes the data API (`@antelopejs/interface-data-api`) refuses a body
+// with, `{ code, fields }`: the message each field shows.
+const DATA_API_CODES: Readonly<Record<string, string>> = {
+  missing_mandatory_fields: FIELD_ERROR_KEYS.required,
+  invalid_field_types: FIELD_ERROR_KEYS.invalid,
+};
+
+// The same, naming the field: "Loss reason is required".
+const NAMED_FIELD_ERROR_KEYS: Readonly<Record<string, string>> = {
+  [FIELD_ERROR_KEYS.required]: "dms.field_errors.named_required",
+  [FIELD_ERROR_KEYS.invalid]: "dms.field_errors.named_invalid",
+};
 
 // `name: String must contain…`: one validation issue prefixed with its field.
 const FIELD_PREFIXED_MESSAGE = /^([\w.]+):\s+(.+)$/s;
 // `error.invalid_2fa_code`, `page.settings.roles.error.name_taken`.
 const BARE_I18N_KEY = /^[a-z0-9_]+(\.[a-z0-9_]+)+$/i;
-const LIST_SEPARATOR = /\s*,\s*/;
 
 /** The HTTP status of a fetch error; undefined for a network failure. */
 export function apiErrorStatus(error: unknown): number | undefined {
@@ -265,16 +267,19 @@ function fromFieldObject(body: Record<string, unknown>): ApiFieldError[] {
   ];
 }
 
+/** `{ code, fields }`, the data API's refusal of a body; undefined otherwise. */
+function fromCodedFields(
+  body: Record<string, unknown>,
+): ApiFieldError[] | undefined {
+  const { code, fields } = body;
+  const message = typeof code === "string" ? DATA_API_CODES[code] : undefined;
+  if (!message || !Array.isArray(fields)) return undefined;
+  return fields
+    .filter((field): field is string => typeof field === "string")
+    .map((field) => ({ field, message }));
+}
+
 function fromText(text: string): ApiFieldError[] {
-  for (const { pattern, message } of DATA_API_MESSAGES) {
-    const match = pattern.exec(text);
-    if (match) {
-      return match[1]!
-        .split(LIST_SEPARATOR)
-        .filter(Boolean)
-        .map((field) => ({ field, message }));
-    }
-  }
   const prefixed = FIELD_PREFIXED_MESSAGE.exec(text);
   if (prefixed) {
     const [, field, message] = prefixed;
@@ -320,7 +325,7 @@ function fromBody(body: unknown): ApiFieldError[] {
   const record = body as Record<string, unknown>;
   if (isIssueList(record.issues)) return fromIssues(record.issues);
   if (isIssueList(record.errors)) return fromIssues(record.errors);
-  return fromFieldObject(record);
+  return fromCodedFields(record) ?? fromFieldObject(record);
 }
 
 function isClientError(status: number | undefined): status is number {
@@ -337,8 +342,8 @@ function isClientError(status: number | undefined): status is number {
  *
  * Read, in order: a code the form maps to a field (`codes`, for any 4xx), a
  * zod issue list (what `assertValidation` answers), a `{ field, message }`
- * body (with optional `values` and `params`), the data API's "Missing mandatory fields: a, b" / "Invalid field
- * type(s): a" and a `field: message` text. A network failure, a 403, a 429
+ * body (with optional `values` and `params`), the data API's
+ * `{ code, fields }` and a `field: message` text. A network failure, a 403, a 429
  * or a 5xx never resolves to a field.
  *
  * @returns The field errors, one per field (the first issue wins), and
@@ -371,6 +376,36 @@ export function resolveFieldErrors<F extends string>(
   return { fields, hasUnmatched: hasUnmatched || fields.length === 0 };
 }
 
+/**
+ * The data API's refusal of a body (`{ code, fields }`) as one sentence per
+ * field naming it, translated: "Loss reason is required." Undefined for any
+ * other error. `labelOf` gives a field's label, translated; the field's id
+ * stands in for one it does not know.
+ */
+export function describeFieldErrors(
+  error: unknown,
+  translate: I18nTranslate,
+  labelOf: (field: string) => string | undefined,
+): string | undefined {
+  const status = apiErrorStatus(error);
+  if (status === undefined || !VALIDATION_STATUSES.has(status)) {
+    return undefined;
+  }
+  const body = bodyOf(error);
+  if (typeof body !== "object" || body === null || Array.isArray(body)) {
+    return undefined;
+  }
+  const entries = fromCodedFields(body as Record<string, unknown>);
+  if (!entries?.length) return undefined;
+  return entries
+    .map(({ field, message }) =>
+      translate(NAMED_FIELD_ERROR_KEYS[message]!, {
+        field: labelOf(field) ?? field,
+      }),
+    )
+    .join(" ");
+}
+
 /**
  * The message of an error that belongs to no field, for its toast: the API's
  * message key, the first validation issue's (or a generic one), else the

package/frontend-vue/layers/dms-core/app/utils/formatter.ts

@@ -227,50 +227,18 @@ export function formatDateTime(
   });
 }
 
-// The narrow no-break space French (and a few other locales) groups digits
-// with: the interface's font draws it a fraction of a digit wide, so "1 234"
-// read as "1234" beside a column's "12 345". Groups take a full no-break space.
-const NARROW_GROUP_SEPARATOR = " ";
-const GROUP_SEPARATOR = " ";
-
-/** `Intl.NumberFormat`, its digit groups always shown and visible. */
-export interface ReadableNumberFormat {
-  format(value: number): string;
-  formatToParts(value: number): Intl.NumberFormatPart[];
-  resolvedOptions(): Intl.ResolvedNumberFormatOptions;
-}
-
-function readablePart(part: Intl.NumberFormatPart): Intl.NumberFormatPart {
-  return part.type === "group" && part.value === NARROW_GROUP_SEPARATOR
-    ? { ...part, value: GROUP_SEPARATOR }
-    : part;
-}
-
 /**
  * `new Intl.NumberFormat(locale, options)` the way the interface writes a
  * figure: a four-digit one grouped like a longer one ("1 234" next to
- * "12 345", where Spanish or Polish would leave "1234" by default), with a
- * group separator wide enough to see. `options.useGrouping` still decides.
- * Throws as `Intl.NumberFormat` does on options it refuses.
+ * "12 345", where Spanish or Polish would leave "1234" by default).
+ * `options.useGrouping` still decides. Throws as `Intl.NumberFormat` does on
+ * options it refuses.
  */
 export function readableNumberFormat(
   locale?: string,
   options?: Intl.NumberFormatOptions,
-): ReadableNumberFormat {
-  const format = new Intl.NumberFormat(locale, {
-    useGrouping: true,
-    ...options,
-  });
-  const formatToParts = (value: number) =>
-    format.formatToParts(value).map(readablePart);
-  return {
-    format: (value) =>
-      formatToParts(value)
-        .map((part) => part.value)
-        .join(""),
-    formatToParts,
-    resolvedOptions: () => format.resolvedOptions(),
-  };
+): Intl.NumberFormat {
+  return new Intl.NumberFormat(locale, { useGrouping: true, ...options });
 }
 
 /**

package/frontend-vue/layers/dms-core/app/utils/menu.ts

@@ -16,6 +16,14 @@ export const MENU_STATUS_TEXT_CLASSES: Record<MenuItemStatus, string> = {
   neutral: "text-dimmed",
 };
 
+/** Status colors for the chip on a parent entry's leading icon. */
+export const MENU_STATUS_CHIP_COLORS = {
+  success: "success",
+  warning: "warning",
+  error: "error",
+  neutral: "neutral",
+} as const satisfies Record<MenuItemStatus, string>;
+
 export const translateMenuItem = (
   item: NavigationMenuItem,
   processI18n: (value: string) => string,
@@ -50,28 +58,6 @@ export const shouldExpandMenuItem = (
   return matchedFullId === fullId || matchedFullId.startsWith(`${fullId}.`);
 };
 
-export const addDefaultOpenToMenuItem = (
-  item: NavigationMenuItem,
-  matchedFullId: string | null,
-): NavigationMenuItem => ({
-  ...item,
-  defaultOpen: item.children
-    ? shouldExpandMenuItem(item, matchedFullId)
-    : undefined,
-  children: item.children?.map((child) =>
-    addDefaultOpenToMenuItem(child, matchedFullId),
-  ),
-});
-
-export const addDefaultOpenToMenuItems = (
-  items: NavigationMenuItem[][],
-  matchedFullId: string | null,
-): NavigationMenuItem[][] => {
-  return items.map((group) =>
-    group.map((item) => addDefaultOpenToMenuItem(item, matchedFullId)),
-  );
-};
-
 const normalizeRoutePath = (path: string): string =>
   path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
 
@@ -114,90 +100,100 @@ const queryMatches = (
   );
 };
 
-// Whether `item` should be highlighted for the current route. Prefix matching is
-// restricted to leaf links so a page stays highlighted on its auto-generated
-// sub-routes (e.g. `/orders/detail/42`); a parent that carries its own menu
-// children highlights on its exact route only, so it never lights up alongside
-// an active descendant that already has its own entry. The fullId equality
-// fallback covers param routes whose URL never string-matches the `to` pattern.
-// Entries sharing one page through query parameters (`/project?project=<id>`)
-// are told apart by those parameters, so only one of them lights up.
+/** Highlights a parent on sub-routes only when no descendant is active. */
 export const isMenuItemActive = (
   item: NavigationMenuItem,
   matchedFullId: string | null,
   currentRoute: MenuRouteState,
+  isDescendantActive = false,
 ): boolean => {
   const target = resolveItemTarget(item.to);
   if (!target) return false;
   if (!queryMatches(target.query, currentRoute.query)) return false;
-  const matchesRoute = item.children?.length
-    ? normalizeRoutePath(currentRoute.path) === normalizeRoutePath(target.path)
-    : matchesRoutePrefix(currentRoute.path, target.path);
+  const matchesRoute =
+    item.children?.length && isDescendantActive
+      ? normalizeRoutePath(currentRoute.path) ===
+        normalizeRoutePath(target.path)
+      : matchesRoutePrefix(currentRoute.path, target.path);
   if (matchesRoute) return true;
   const fullId = (item as DmsMenuItem).fullId;
   return matchedFullId !== null && fullId === matchedFullId;
 };
 
-// Only the boolean `true` is set on plain entries: Nuxt UI forwards an explicit
-// `active` to the underlying link, and a `false` there would suppress the
-// built-in route match. Entries carrying a query always get an explicit value,
-// because that built-in match is a URL prefix test that would light up
-// `?project=a` on `?project=ab`.
+/**
+ * Query entries and parents override native prefix highlighting. Plain leaves
+ * keep the router's fallback for routes the DMS cannot string-match.
+ */
 const resolveActiveState = (
   item: NavigationMenuItem,
-  matchedFullId: string | null,
-  currentRoute: MenuRouteState,
+  isActive: boolean,
 ): Partial<Pick<NavigationMenuItem, "active">> => {
-  if (isMenuItemActive(item, matchedFullId, currentRoute)) {
+  if (isActive) {
     return { active: true };
   }
-  return hasQuery(resolveItemTarget(item.to)) ? { active: false } : {};
+  return hasQuery(resolveItemTarget(item.to)) || item.children?.length
+    ? { active: false }
+    : {};
 };
 
-export const addActiveStateToMenuItem = (
+interface MenuRouteVerdict {
+  item: NavigationMenuItem;
+  holdsActive: boolean;
+}
+
+function judgeMenuRoute(
   item: NavigationMenuItem,
   matchedFullId: string | null,
   currentRoute: MenuRouteState,
-): NavigationMenuItem => ({
-  ...item,
-  ...resolveActiveState(item, matchedFullId, currentRoute),
-  children: item.children?.map((child) =>
-    addActiveStateToMenuItem(child, matchedFullId, currentRoute),
-  ),
-});
-
-export const addActiveStateToMenuItems = (
+): MenuRouteVerdict {
+  const children = item.children?.map((child) =>
+    judgeMenuRoute(child, matchedFullId, currentRoute),
+  );
+  const descendantActive =
+    children?.some((child) => child.holdsActive) ?? false;
+  const active = isMenuItemActive(
+    item,
+    matchedFullId,
+    currentRoute,
+    descendantActive,
+  );
+  const holdsActive = active || descendantActive;
+  return {
+    holdsActive,
+    item: {
+      ...item,
+      ...resolveActiveState(item, active),
+      defaultOpen: children?.length
+        ? holdsActive || shouldExpandMenuItem(item, matchedFullId)
+        : undefined,
+      children: children?.map((child) => child.item),
+    },
+  };
+}
+
+/** Computes highlight and expansion together, from descendants to ancestors. */
+export const applyMenuRouteState = (
   items: NavigationMenuItem[][],
   matchedFullId: string | null,
   currentRoute: MenuRouteState,
 ): NavigationMenuItem[][] => {
   return items.map((group) =>
-    group.map((item) =>
-      addActiveStateToMenuItem(item, matchedFullId, currentRoute),
-    ),
+    group.map((item) => judgeMenuRoute(item, matchedFullId, currentRoute).item),
   );
 };
 
-const collectExpandedIds = (
-  items: NavigationMenuItem[],
-  matchedFullId: string,
-): string[] => {
+const collectExpandedIds = (items: NavigationMenuItem[]): string[] => {
   const ids: string[] = [];
   for (const item of items) {
-    if (item.id && shouldExpandMenuItem(item, matchedFullId)) {
-      ids.push(item.id as string);
-      if (item.children) {
-        ids.push(...collectExpandedIds(item.children, matchedFullId));
-      }
+    if (typeof item.id === "string" && item.defaultOpen) {
+      ids.push(item.id);
     }
+    if (item.children) ids.push(...collectExpandedIds(item.children));
   }
   return ids;
 };
 
-export const getExpandedItemIds = (
-  items: NavigationMenuItem[][],
-  matchedFullId: string | null,
-): string[] => {
-  if (!matchedFullId) return [];
-  return items.flatMap((group) => collectExpandedIds(group, matchedFullId));
+/** Reads the expansion verdict for controlled accordions. */
+export const collectOpenItemIds = (items: NavigationMenuItem[][]): string[] => {
+  return items.flatMap((group) => collectExpandedIds(group));
 };

package/frontend-vue/layers/dms-core/i18n/locales/core-en-GB.json

@@ -408,6 +408,8 @@
       "too_short": "This value is too short.",
       "too_small": "This value is too small.",
       "too_large": "This value is too large.",
+      "named_required": "{field} is required.",
+      "named_invalid": "{field} is not valid.",
       "with_values": "{message}: {values}",
       "code_incomplete": "Enter every digit of the code.",
       "password_rules": "The password doesn’t meet every rule.",

package/frontend-vue/layers/dms-core/i18n/locales/core-fr-FR.json

@@ -408,6 +408,8 @@
       "too_short": "Cette valeur est trop courte.",
       "too_small": "Cette valeur est trop petite.",
       "too_large": "Cette valeur est trop grande.",
+      "named_required": "{field} est obligatoire.",
+      "named_invalid": "{field} n’est pas valide.",
       "with_values": "{message} : {values}",
       "code_incomplete": "Saisissez tous les chiffres du code.",
       "password_rules": "Le mot de passe ne respecte pas toutes les règles.",

package/frontend-vue/layers/dms-core/shared/types/app-config.ts

@@ -67,8 +67,6 @@ export interface DmsFooterConfig {
    * the copyright.
    */
   copyright?: string | false;
-  /** The GitHub "Star" button of the DMS repository. */
-  githubStar?: boolean;
   /** The language picker. */
   localeSwitcher?: boolean;
 }

package/frontend-vue/layers/dms-layout/app/app.config.ts

@@ -215,7 +215,6 @@ export default {
     defaults: { logo: dmsLogo(), colors: dmsColors() },
     footer: {
       copyright: "Antelope",
-      githubStar: true,
       localeSwitcher: true,
     },
   },

package/frontend-vue/layers/dms-layout/app/assets/css/main.css

@@ -31,7 +31,12 @@
 }
 
 /* Self-hosted Geist (SIL OFL 1.1, files and LICENSE.txt in ../fonts).
-   Variable files cover weights 100–900 and keep builds deterministic offline. */
+   Variable files cover weights 100–900 and keep builds deterministic offline.
+   Geist has no narrow no-break space (U+202F), which French and a few other
+   locales group digits with: a fallback face drew it a fraction of a digit
+   wide, so "1 234" read as "1234". Each file here maps U+202F to its no-break
+   space glyph (fontTools: cmap[0x202F] = cmap[0xA0]); keep that mapping when
+   updating them. */
 @font-face {
   font-family: "Geist";
   font-style: normal;
@@ -155,6 +160,11 @@
      items, ~10px menus and 16px modals. */
     --ui-radius: calc(0.5rem / 1.5);
     --dms-radius-card: 0.875rem;
+    /* Pill tabs keep their v2 10px track, 7px tab and 4px count at the
+     default radius, and follow a theme that changes it. */
+    --dms-radius-tab-list: calc(var(--ui-radius) * 1.875);
+    --dms-radius-tab: calc(var(--ui-radius) * 1.3125);
+    --dms-radius-tab-badge: calc(var(--ui-radius) * 0.75);
 
     /* v2 shell metrics: 48px navbar, 56px sidebar brand row. */
     --ui-header-height: 3rem;

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardPageBody.vue

@@ -5,7 +5,6 @@ import PageHeaderActionsOutlet from "./PageHeaderActionsOutlet.vue";
 import PageSkeleton from "./PageSkeleton.vue";
 import type { LayoutHeaderAction } from "./PageHeaderActionBar.vue";
 import { providePageHeaderActions } from "../../../composables/layout/usePageHeaderActions";
-import type { PageRecordSource } from "../../../composables/layout/usePageRecord";
 
 interface Props {
   hideHeader?: boolean;
@@ -15,14 +14,12 @@ interface Props {
   /** Header buttons declared by the backend page (`headerActions`). */
   headerActions?: LayoutHeaderAction[];
   /**
-   * The page query the server resolved the buttons' availability for, set
-   * when one declares an `availability` (`headerActionsQuery`).
+   * The page query the server served the buttons for, set when one declares
+   * an `availability` or the page reads a `record` (`headerActionsQuery`).
    */
   headerActionsQuery?: Record<string, string>;
   /** The route parameters (`:id`) they were resolved for, likewise. */
   headerActionsParams?: Record<string, string>;
-  /** The record the page shows, which header buttons may act on (`record`). */
-  record?: PageRecordSource;
   /** Space between the page header and the page. */
   headerClass?: string;
 }
@@ -35,7 +32,6 @@ const props = withDefaults(defineProps<Props>(), {
   headerActions: () => [],
   headerActionsQuery: undefined,
   headerActionsParams: undefined,
-  record: undefined,
   headerClass: "pb-6",
 });
 
@@ -75,7 +71,6 @@ const PAGE_SLOT_CLASS =
         :actions="props.headerActions"
         :served-query="props.headerActionsQuery"
         :served-params="props.headerActionsParams"
-        :record="props.record"
       />
     </template>
   </PageHeader>

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardSidebar.vue

@@ -185,13 +185,9 @@ const items = computed((): NavigationMenuItem[][] => {
       moduleRootNode.value,
     );
     const translatedItems = translateMenuItems(moduleMenuItems, processI18n);
-    const openItems = addDefaultOpenToMenuItems(
+    return applyMenuRouteState(
       translatedItems,
       currentFullId.value,
-    );
-    return addActiveStateToMenuItems(
-      openItems,
-      currentFullId.value,
       currentRoute.value,
     );
   }
@@ -204,13 +200,9 @@ const items = computed((): NavigationMenuItem[][] => {
     siteLayout.siteLayoutTree.value,
   );
   const translatedItems = translateMenuItems(menuItems, processI18n);
-  const openItems = addDefaultOpenToMenuItems(
+  return applyMenuRouteState(
     translatedItems,
     currentFullId.value,
-  );
-  return addActiveStateToMenuItems(
-    openItems,
-    currentFullId.value,
     currentRoute.value,
   );
 });
@@ -220,7 +212,7 @@ const openCategories = ref<string[]>([]);
 watch(
   () => items.value,
   (menuItems) => {
-    const requiredIds = getExpandedItemIds(menuItems, currentFullId.value);
+    const requiredIds = collectOpenItemIds(menuItems);
     const current = new Set(openCategories.value);
     for (const id of requiredIds) {
       current.add(id);