@antelopejs/dms 0.4.5 → 0.4.7

package/frontend-vue/layers/dms-layout/app/emails/EmailAdminInvite.vue

@@ -1,31 +1,76 @@
 <script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import EmailLayout from "./components/EmailLayout.vue";
 import EmailButton from "./components/EmailButton.vue";
 import { emailStyles } from "./components/index";
 
-defineProps<{
+const props = defineProps<{
   email: string;
   signupLink: string;
-  expiresIn: string;
+  expiresInDays: number;
+  workspaceName?: string;
+  inviterName?: string;
+  platformName?: string;
 }>();
+
+const { t, locale } = useI18n();
+
+const joinTarget = computed(() => {
+  const { workspaceName, platformName } = props;
+  if (workspaceName && platformName) {
+    return t("emails.admin_invite.workspace_on_platform", {
+      workspace: workspaceName,
+      platform: platformName,
+    });
+  }
+  return workspaceName || platformName;
+});
+
+const title = computed(() =>
+  props.workspaceName
+    ? t("emails.admin_invite.title_workspace", {
+        workspace: props.workspaceName,
+      })
+    : t("emails.admin_invite.title"),
+);
+
+const invitation = computed(() => {
+  if (!joinTarget.value) {
+    return t("emails.admin_invite.invitation");
+  }
+  return props.inviterName
+    ? t("emails.admin_invite.invitation_from_inviter", {
+        inviter: props.inviterName,
+        target: joinTarget.value,
+      })
+    : t("emails.admin_invite.invitation_to_target", {
+        target: joinTarget.value,
+      });
+});
 </script>
 
 <template>
-  <EmailLayout title="You're Invited!">
-    <EText :style="emailStyles.text">Hello,</EText>
+  <EmailLayout :title="title" :lang="locale">
+    <EText :style="emailStyles.text">
+      {{ t("emails.admin_invite.greeting") }}
+    </EText>
 
     <EText :style="emailStyles.text">
-      You've been invited to join our platform. Click the button below to create
-      your account:
+      {{ invitation }} {{ t("emails.admin_invite.call_to_action") }}
     </EText>
 
-    <EmailButton :href="signupLink" :expires-in="expiresIn">
-      Create Account
+    <EmailButton
+      :href="signupLink"
+      :expires-in="t('emails.admin_invite.expires_in', { days: expiresInDays })"
+      :expires-label="t('emails.admin_invite.expires_label')"
+    >
+      {{ t("emails.admin_invite.button") }}
     </EmailButton>
 
     <template #footer>
       <EText :style="emailStyles.footer">
-        If you didn't expect this invitation, you can safely ignore this email.
+        {{ t("emails.admin_invite.footer") }}
       </EText>
     </template>
   </EmailLayout>

package/frontend-vue/layers/dms-layout/app/error.vue

@@ -34,6 +34,13 @@ const DEFAULT_ERROR_CONFIG = {
 
 const DEFAULT_STATUS_CODE = 500;
 
+// Their cards already say what happened; the message behind them is the
+// technical cause ("DMS backend request failed"), which the server has logged.
+const STATUSES_WITHOUT_ERROR_MESSAGE = new Set([
+  HTTP_NOT_FOUND,
+  HTTP_FORBIDDEN,
+]);
+
 const props = defineProps<{
   error: DmsErrorData;
 }>();
@@ -45,6 +52,14 @@ const { loggedIn, reconcileSession, redirectToAuth } = useSessionRecovery();
 
 const isRecovering = ref(false);
 
+const visibleErrorMessage = computed(() =>
+  STATUSES_WITHOUT_ERROR_MESSAGE.has(
+    props.error.statusCode || DEFAULT_STATUS_CODE,
+  )
+    ? undefined
+    : props.error.message,
+);
+
 const errorConfig = computed(() => {
   const statusCode = props.error.statusCode || DEFAULT_STATUS_CODE;
   const config = ERROR_CONFIGS[statusCode] || DEFAULT_ERROR_CONFIG;
@@ -121,10 +136,10 @@ onMounted(() => {
         </p>
 
         <p
-          v-if="!isRecovering && error.message"
+          v-if="!isRecovering && visibleErrorMessage"
           class="text-dimmed mb-6 text-sm"
         >
-          {{ error.message }}
+          {{ visibleErrorMessage }}
         </p>
 
         <div v-if="!isRecovering" class="flex gap-3">

package/frontend-vue/layers/dms-layout/app/types/page.ts

@@ -65,9 +65,30 @@ export type SiteLayoutTree = Omit<PageInfo, "layoutUrl"> & {
   layoutUrl?: string;
   hasAccess?: boolean;
 };
+// Mirror of LayoutBannerVariant from @antelopejs/interface-dms/layout-banners.
+export type LayoutBannerVariant = "info" | "warning" | "error";
+
+/**
+ * Mirror of the backend's serialized layout banner. The payload only carries
+ * the banners whose visibility resolver passed for this request, so there is
+ * nothing left to decide here but the user's own dismissals.
+ */
+export interface LayoutBanner {
+  key: string;
+  variant: LayoutBannerVariant;
+  order: number;
+  dismissible: boolean;
+  icon?: string;
+  text?: string;
+  component?: string;
+  props?: Record<string, unknown>;
+}
+
 export type SiteLayout = {
   pages: Record<string, PageInfo>;
   categories: Record<string, CategoryInfo>;
+  /** Absent when the backend predates layout banners. */
+  banners?: LayoutBanner[];
 };
 
 export interface QuickActionCategoryInfo {
@@ -80,6 +101,7 @@ export interface QuickActionCategoryInfo {
 export type QuickActionTarget =
   | { type: "navigate"; to: string; query?: Record<string, string> }
   | { type: "openForm"; to: string; component: string }
+  | { type: "button"; to: string; component: string; button: string }
   | { type: "event"; name: string; payload?: unknown };
 
 /**

package/frontend-vue/layers/dms-layout/app/utils/breadcrumb.ts

@@ -0,0 +1,48 @@
+import type { PageValidation } from "../types/page";
+
+export interface BreadcrumbTargetSource {
+  layoutUrl?: string;
+  validation?: PageValidation;
+}
+
+/**
+ * The URL that opens the page at `path`. A page that declares
+ * `validation.requiredQueryParams` 404s without them, so the URL carries the
+ * values `currentQuery` holds for them — and only those — and there is no URL
+ * when any is missing, empty or repeated.
+ */
+export function buildPageTarget(
+  path: string,
+  validation: PageValidation | undefined,
+  currentQuery: Record<string, unknown>,
+): string | undefined {
+  const requiredParams = validation?.requiredQueryParams ?? [];
+  const carriedQuery = new URLSearchParams();
+
+  for (const param of requiredParams) {
+    const value = currentQuery[param];
+    if (typeof value !== "string" || value === "") {
+      return undefined;
+    }
+    carriedQuery.set(param, value);
+  }
+
+  const search = carriedQuery.toString();
+  return search ? `${path}?${search}` : path;
+}
+
+/**
+ * The link of a breadcrumb crumb: the page's {@link buildPageTarget}.
+ * Categories without a page behind them get no link.
+ */
+export function buildBreadcrumbTarget(
+  path: string,
+  metadata: BreadcrumbTargetSource,
+  currentQuery: Record<string, unknown>,
+): string | undefined {
+  if (!metadata.layoutUrl) {
+    return undefined;
+  }
+
+  return buildPageTarget(path, metadata.validation, currentQuery);
+}

package/frontend-vue/layers/dms-layout/app/utils/favorites.ts

@@ -0,0 +1,94 @@
+import { getQuery, parseURL } from "ufo";
+import type { FavoritePage } from "../composables/favorites/useFavoritePages";
+import type { PageValidation } from "../types/page";
+import { buildPageTarget } from "./breadcrumb";
+
+const FAVORITE_TITLE_SEPARATOR = " · ";
+
+export interface FavoritePageMetadata {
+  id?: string;
+  displayName?: string;
+  icon?: string;
+  validation?: PageValidation;
+}
+
+export interface FavoritePageSource {
+  path: string;
+  metadata: FavoritePageMetadata;
+  query: Record<string, unknown>;
+  translate: (text: string) => string;
+}
+
+export type FavoriteRouteResolver = (
+  path: string,
+) => { metadata: FavoritePageMetadata } | null;
+
+function requiredQueryValues(
+  validation: PageValidation | undefined,
+  query: Record<string, unknown>,
+): string[] {
+  return (validation?.requiredQueryParams ?? []).map((param) =>
+    String(query[param]),
+  );
+}
+
+// A page narrowed by its query shows one entity out of many: its generic
+// display name would label every favorite of it the same way.
+function entityTitle(pageTitle: string, queryValues: string[]): string {
+  return [pageTitle, ...queryValues].join(FAVORITE_TITLE_SEPARATOR);
+}
+
+/**
+ * The favorite that reopens the page at `path` as it is showing now. A page
+ * requiring query parameters keeps them in its path and gets a title telling
+ * its entities apart; there is no favorite when a required value is missing.
+ */
+export function buildFavoritePage(
+  source: FavoritePageSource,
+): FavoritePage | null {
+  const { path, metadata, query } = source;
+  const target = buildPageTarget(path, metadata.validation, query);
+  if (!target) {
+    return null;
+  }
+
+  const displayName = metadata.displayName || path;
+  const queryValues = requiredQueryValues(metadata.validation, query);
+  if (queryValues.length === 0) {
+    return {
+      id: metadata.id || path,
+      path,
+      title: displayName,
+      icon: metadata.icon,
+    };
+  }
+
+  return {
+    id: target,
+    path: target,
+    title: entityTitle(source.translate(displayName), queryValues),
+    icon: metadata.icon,
+  };
+}
+
+/**
+ * Whether a stored favorite still opens a page: its path matches one, and its
+ * query holds every value that page requires.
+ */
+export function isFavoritePathValid(
+  favoritePath: string,
+  resolveRoute: FavoriteRouteResolver,
+): boolean {
+  const { pathname } = parseURL(favoritePath);
+  const route = resolveRoute(pathname);
+  if (!route) {
+    return false;
+  }
+  return (
+    buildPageTarget(
+      pathname,
+      route.metadata.validation,
+      getQuery(favoritePath),
+    ) !== undefined
+  );
+}

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

@@ -40,7 +40,9 @@
     "soon": "Coming soon"
   },
   "quickActions": {
-    "title": "Quick actions"
+    "title": "Quick actions",
+    "category_members": "Members",
+    "invite_member": "Invite a member"
   },
   "commandPalette": {
     "button": "Search…",
@@ -218,7 +220,8 @@
           "cancel_confirm_description": "Are you sure you want to cancel this invitation? The invite link will no longer work."
         },
         "error": {
-          "not_found": "Invitation not found"
+          "not_found": "Invitation not found",
+          "resolved": "This invitation has already been accepted or cancelled"
         }
       },
       "roles": {
@@ -269,5 +272,21 @@
     "intro": "Browse the modules available on this platform.",
     "empty": "No modules are accessible to you yet.",
     "open": "Open module"
+  },
+  "emails": {
+    "admin_invite": {
+      "title": "You're Invited!",
+      "title_workspace": "You're invited to {workspace}",
+      "greeting": "Hello,",
+      "invitation": "You've been invited to join our platform.",
+      "invitation_to_target": "You've been invited to join {target}.",
+      "invitation_from_inviter": "{inviter} invited you to join {target}.",
+      "workspace_on_platform": "{workspace} on {platform}",
+      "call_to_action": "Click the button below to create your account:",
+      "button": "Create Account",
+      "expires_label": "This invitation expires in",
+      "expires_in": "{days} days",
+      "footer": "If you didn't expect this invitation, you can safely ignore this email."
+    }
   }
 }

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

@@ -40,7 +40,9 @@
     "soon": "Bientôt disponible"
   },
   "quickActions": {
-    "title": "Actions rapides"
+    "title": "Actions rapides",
+    "category_members": "Membres",
+    "invite_member": "Inviter un membre"
   },
   "commandPalette": {
     "button": "Rechercher…",
@@ -222,7 +224,8 @@
           "cancel_confirm_description": "Êtes-vous sûr de vouloir annuler cette invitation ? Le lien d'invitation ne fonctionnera plus."
         },
         "error": {
-          "not_found": "Invitation introuvable"
+          "not_found": "Invitation introuvable",
+          "resolved": "Cette invitation a déjà été acceptée ou annulée"
         }
       },
       "roles": {
@@ -273,5 +276,21 @@
     "intro": "Parcourez les modules disponibles sur cette plateforme.",
     "empty": "Aucun module ne vous est accessible pour le moment.",
     "open": "Ouvrir le module"
+  },
+  "emails": {
+    "admin_invite": {
+      "title": "Vous êtes invité !",
+      "title_workspace": "Vous êtes invité à rejoindre {workspace}",
+      "greeting": "Bonjour,",
+      "invitation": "Vous avez été invité à rejoindre notre plateforme.",
+      "invitation_to_target": "Vous avez été invité à rejoindre {target}.",
+      "invitation_from_inviter": "{inviter} vous invite à rejoindre {target}.",
+      "workspace_on_platform": "{workspace} sur {platform}",
+      "call_to_action": "Cliquez sur le bouton ci-dessous pour créer votre compte :",
+      "button": "Créer mon compte",
+      "expires_label": "Cette invitation expire dans",
+      "expires_in": "{days} jours",
+      "footer": "Si vous n'attendiez pas cette invitation, vous pouvez ignorer cet e-mail."
+    }
   }
 }

package/frontend-vue/layers/dms-onboarding/app/composables/onboarding/index.ts

@@ -1 +1 @@
-export * from "./useOnboardingMiddleware";
+export * from "./useOnboarding";

package/frontend-vue/layers/dms-onboarding/app/composables/onboarding/{useOnboardingMiddleware.ts → useOnboarding.ts}

@@ -37,15 +37,3 @@ export const setOnboardingComplete = () => {
   );
   cache.value = { hasOnboarded: true };
 };
-
-export const useOnboardingMiddleware = async () => {
-  const { hasOnboarded } = await useOnboarding();
-
-  if (!hasOnboarded) return;
-
-  throw createError({
-    statusCode: HTTP_PRECONDITION_FAILED,
-    statusMessage: "Invalid request",
-    message: "Onboarding already completed",
-  });
-};

package/frontend-vue/layers/dms-onboarding/app/custom-pages/onboarding.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import Register from "../components/onboarding/steps/register.vue";
 
-await useOnboardingMiddleware();
+// A custom page runs the global middleware only once it declares its meta:
+// that is what lets the onboarding middleware send a visitor away from a
+// wizard that is already finished, on a direct load as on a navigation.
+defineDmsPageMeta({});
 </script>
 
 <template>

package/frontend-vue/layers/dms-onboarding/app/middleware/onboarding.global.ts

@@ -1,6 +1,16 @@
+const ONBOARDING_PATH = "/onboarding";
+const LOGIN_PATH = "/auth";
+
+// Where a visit to the finished wizard lands: the app for a signed-in user, the
+// login page for anyone else rather than a homepage whose 401 would bounce
+// them there anyway.
+function completedOnboardingDestination(): string {
+  const { loggedIn } = useUserSession();
+  return loggedIn.value ? useHomepage() : LOGIN_PATH;
+}
+
 export default defineDmsMiddleware(async (to) => {
-  // The onboarding wizard itself must always be reachable so it can render.
-  if (to.path.startsWith("/onboarding")) return;
+  const isOnboardingRoute = to.path.startsWith(ONBOARDING_PATH);
 
   // While the instance has no admin yet, funnel every route to the onboarding
   // wizard. Running as a global middleware (instead of a plugin) lets this take
@@ -11,11 +21,18 @@ export default defineDmsMiddleware(async (to) => {
   try {
     info = await useOnboarding();
   } catch {
-    // If the onboarding status can't be resolved, don't block navigation.
+    // If the onboarding status can't be resolved, don't block navigation: the
+    // wizard stays reachable, and it is its own register call that refuses a
+    // second admin.
     return;
   }
 
+  if (isOnboardingRoute) {
+    if (!info.hasOnboarded) return;
+    return navigateDms(completedOnboardingDestination(), { replace: true });
+  }
+
   if (info.hasOnboarded) return;
 
-  return navigateDms("/onboarding");
+  return navigateDms(ONBOARDING_PATH);
 });

package/frontend-vue/layers/dms-ui/app/build/components/containers/drawer/DynamicDrawer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Component } from "vue";
+import { DialogDescription, DialogTitle, VisuallyHidden } from "reka-ui";
 
 type DrawerDirection = "top" | "bottom" | "left" | "right";
 
@@ -82,15 +83,24 @@ function onContentResolve() {
       <!-- Same container as the body so the title aligns with the form -->
       <UContainer class="flex w-full flex-1 items-center justify-between gap-4">
         <div v-if="headerComponent" class="flex-1">
+          <VisuallyHidden>
+            <DialogTitle>{{ title }}</DialogTitle>
+            <DialogDescription>{{ description }}</DialogDescription>
+          </VisuallyHidden>
           <Suspense>
             <component :is="headerComponent" v-bind="headerComponentOptions" />
           </Suspense>
         </div>
         <div v-else class="flex-1">
-          <h2 class="text-highlighted font-semibold">{{ title }}</h2>
-          <p v-if="description" class="text-muted text-sm">
+          <DialogTitle as="h2" class="text-highlighted font-semibold">
+            {{ title }}
+          </DialogTitle>
+          <DialogDescription v-if="description" class="text-muted text-sm">
             {{ description }}
-          </p>
+          </DialogDescription>
+          <VisuallyHidden v-else>
+            <DialogDescription />
+          </VisuallyHidden>
         </div>
         <UButton
           icon="i-lucide-x"

package/frontend-vue/layers/dms-ui/app/build/components/containers/modal/DynamicModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Component } from "vue";
+import { DialogDescription, DialogTitle, VisuallyHidden } from "reka-ui";
 import type { ModalSize } from "../../../../types/modal";
 
 interface DynamicModalProps {
@@ -98,15 +99,24 @@ function onContentResolve() {
     <template #header>
       <div class="flex w-full items-center justify-between gap-4">
         <div v-if="headerComponent" class="flex-1">
+          <VisuallyHidden>
+            <DialogTitle>{{ title }}</DialogTitle>
+            <DialogDescription>{{ description }}</DialogDescription>
+          </VisuallyHidden>
           <Suspense>
             <component :is="headerComponent" v-bind="headerComponentOptions" />
           </Suspense>
         </div>
         <div v-else class="flex-1">
-          <h2 class="text-highlighted font-semibold">{{ title }}</h2>
-          <p v-if="description" class="text-muted text-sm">
+          <DialogTitle as="h2" class="text-highlighted font-semibold">
+            {{ title }}
+          </DialogTitle>
+          <DialogDescription v-if="description" class="text-muted text-sm">
             {{ description }}
-          </p>
+          </DialogDescription>
+          <VisuallyHidden v-else>
+            <DialogDescription />
+          </VisuallyHidden>
         </div>
         <UButton
           icon="i-lucide-x"

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableViewConfig.ts

@@ -8,6 +8,7 @@ import {
   KANBAN_DISPLAY_ID,
 } from "../../../composables/table-view/types";
 import type { FormContainerType } from "./types";
+import { buildInitialColumnVisibility } from "./utils/columnVisibility";
 
 const BUILTIN_DISPLAYS: Record<
   string,
@@ -110,13 +111,7 @@ export const useTableViewConfig = <T extends Data>(
 
   const defaultDisplay = config.defaultDisplay ?? TABLE_DISPLAY_ID;
 
-  const initialVisibility = config.columns?.reduce(
-    (acc, column) => {
-      acc[column.id] = column.visible ?? true;
-      return acc;
-    },
-    {} as Record<string, boolean>,
-  );
+  const initialVisibility = buildInitialColumnVisibility(config.columns ?? []);
 
   const tableProps = computed<Partial<TableProps<T>>>(() => ({
     caption: processI18n(config.caption ?? ""),

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/utils/columnVisibility.ts

@@ -0,0 +1,13 @@
+import type { VisibilityState } from "@tanstack/vue-table";
+import type { TableViewColumn } from "../../../../composables/table-view/types/column";
+
+/**
+ * The visibility a table opens with before the user picks columns: a column
+ * declared `isVisible: false` starts hidden but stays in the column picker.
+ */
+export const buildInitialColumnVisibility = (
+  columns: Pick<TableViewColumn, "id" | "isVisible">[],
+): VisibilityState =>
+  Object.fromEntries(
+    columns.map((column) => [column.id, column.isVisible ?? true]),
+  );

package/frontend-vue/layers/dms-ui/app/components/PasswordStrength.vue

@@ -6,7 +6,7 @@
     <UProgress
       :color="props.color"
       :model-value="props.score"
-      :max="4"
+      :max="props.strength.length"
       size="sm"
     />
   </div>

package/frontend-vue/layers/dms-ui/app/components/activity/ActivityItem.vue

@@ -35,7 +35,7 @@ const bubbleClass = computed(() => SOFT_TINT[props.iconColor]);
       :class="bubbleClass"
       class="grid size-[26px] shrink-0 place-items-center rounded-full"
     >
-      <UIcon :name="icon" class="size-3.5" aria-hidden="true" />
+      <UIcon :name="icon" class="size-3.5" :aria-hidden="true" />
     </div>
 
     <div class="min-w-0 flex-1">

package/frontend-vue/layers/dms-ui/app/components/banner/Banner.vue

@@ -75,7 +75,7 @@ const iconBoxClass = computed(
   >
     <template #leading>
       <div :class="iconBoxClass">
-        <UIcon :name="icon" class="size-[21px]" aria-hidden="true" />
+        <UIcon :name="icon" class="size-[21px]" :aria-hidden="true" />
       </div>
     </template>
 

package/frontend-vue/layers/dms-ui/app/components/card/NavCard.vue

@@ -24,7 +24,7 @@ defineProps<Props>();
       <div
         class="bg-primary/10 ring-primary/20 group-hover:bg-primary/15 flex size-10 shrink-0 items-center justify-center rounded-lg ring transition-colors"
       >
-        <UIcon :name="icon" class="text-primary size-5" aria-hidden="true" />
+        <UIcon :name="icon" class="text-primary size-5" :aria-hidden="true" />
       </div>
 
       <h3 class="text-highlighted min-w-0 truncate text-base font-semibold">
@@ -34,7 +34,7 @@ defineProps<Props>();
       <UIcon
         name="i-ph-caret-right"
         class="text-dimmed ml-auto size-4 shrink-0 opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100"
-        aria-hidden="true"
+        :aria-hidden="true"
       />
     </div>
 

package/frontend-vue/layers/dms-ui/app/components/chart/Chart.vue

@@ -5,6 +5,7 @@ import type { MixedSeriesDef } from "../../composables/chart/useApexChart.types"
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { useThemeRevision } from "../../composables/chart/useThemeRevision";
 import { formatValue } from "../../composables/chart/formatValue";
+import { toDonutRecords } from "../../composables/chart/donutRecords";
 import {
   CHART_EVENT_NAMES,
   isSegmentChart,
@@ -144,24 +145,13 @@ const finalSeries = computed<ChartSeries[]>(() => {
   return staticSeries.value;
 });
 
+// A donut plots the first series only; a nested one plots its card's, like
+// every other nested chart type.
 const finalDonutData = computed<DonutRecord[]>(() => {
   if (!isCircular.value) return [];
-  if (data.value && Array.isArray(data.value.series)) {
-    const first = data.value.series[0];
-    if (first && Array.isArray(first.data)) {
-      return first.data.map((entry) => {
-        if (typeof entry === "number") {
-          return { label: String(entry), value: entry };
-        }
-        const point = entry as { label?: string; x?: unknown; y?: unknown };
-        return {
-          label: point.label ?? String(point.x ?? ""),
-          value: Number(point.y ?? 0),
-        };
-      });
-    }
-  }
-  return staticDonut.value;
+  const source = nestedContext ? nestedContext.cardSeries : fetchSeries.value;
+  const records = toDonutRecords(source[0]);
+  return records.length > 0 ? records : staticDonut.value;
 });
 
 function buildCircularClickPayload(opts: {