@antelopejs/dms 0.4.5 → 0.4.6

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: {

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

@@ -155,10 +155,10 @@ const primaryDotColor = computed(() => resolveChartColor("primary"));
     <div class="mb-4 flex flex-wrap items-start justify-between gap-3">
       <div class="min-w-0">
         <p class="text-muted text-sm">{{ processI18n(title) }}</p>
-        <p class="text-2xl font-semibold tracking-tight tabular-nums">
+        <div class="text-2xl font-semibold tracking-tight tabular-nums">
           <USkeleton v-if="isLoading && data === null" class="h-8 w-32" />
           <span v-else>{{ formatted }}</span>
-        </p>
+        </div>
         <div
           v-if="
             (showDelta && delta !== null) || previousFormatted || description

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

@@ -51,7 +51,7 @@ const display = computed(() => {
     class="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium whitespace-nowrap tabular-nums transition-colors"
     :class="colorClass"
   >
-    <UIcon :name="icon" class="size-3" aria-hidden="true" />
+    <UIcon :name="icon" class="size-3" :aria-hidden="true" />
     {{ display }}
   </span>
 </template>

package/frontend-vue/layers/dms-ui/app/components/copy/CopyButton.vue

@@ -32,7 +32,7 @@ const label = computed(() =>
     <UIcon
       :name="copied ? 'i-lucide-check' : 'i-lucide-copy'"
       class="size-4"
-      aria-hidden="true"
+      :aria-hidden="true"
     />
   </button>
 </template>

package/frontend-vue/layers/dms-ui/app/components/kpi/KpiCard.vue

@@ -118,7 +118,7 @@ const iconWrapClass = computed(() =>
     <div class="flex items-start justify-between gap-3">
       <div class="min-w-0 flex-1">
         <p :class="labelClass">{{ processI18n(title) }}</p>
-        <p class="mt-1 text-2xl font-semibold tracking-tight tabular-nums">
+        <div class="mt-1 text-2xl font-semibold tracking-tight tabular-nums">
           <USkeleton v-if="isLoading && data === null" class="h-8 w-24" />
           <span v-else class="inline-flex items-baseline gap-x-1">
             <span
@@ -135,7 +135,7 @@ const iconWrapClass = computed(() =>
               {{ formattedParts.unit }}
             </span>
           </span>
-        </p>
+        </div>
         <div
           v-if="showTrend || compareLabel || description"
           class="mt-2 flex min-w-0 items-center gap-x-2"
@@ -153,7 +153,7 @@ const iconWrapClass = computed(() =>
         <UIcon
           :name="resolvedIcon"
           :class="isStat ? 'size-4' : 'size-5'"
-          aria-hidden="true"
+          :aria-hidden="true"
         />
       </div>
     </div>

package/frontend-vue/layers/dms-ui/app/components/master-detail/MasterDetail.vue

@@ -49,7 +49,11 @@ defineSlots<{
               class="grid size-[26px] shrink-0 place-items-center"
               :class="selected === item.value ? 'text-primary' : 'text-toned'"
             >
-              <UIcon :name="item.icon" class="size-[18px]" aria-hidden="true" />
+              <UIcon
+                :name="item.icon"
+                class="size-[18px]"
+                :aria-hidden="true"
+              />
             </span>
             <span class="min-w-0">
               <span class="text-highlighted block text-sm font-semibold">

package/frontend-vue/layers/dms-ui/app/components/segmented/Segmented.vue

@@ -98,7 +98,7 @@ function onKeydown(event: KeyboardEvent, index: number) {
         v-if="item.icon"
         :name="item.icon"
         class="size-3.5"
-        aria-hidden="true"
+        :aria-hidden="true"
       />
       {{ item.label }}
     </button>

package/frontend-vue/layers/dms-ui/app/components/status/StatusSummary.vue

@@ -68,7 +68,7 @@ const resolvedIcon = computed(() => props.icon || DEFAULT_ICON[props.status]);
           :class="RING[status]"
           class="grid size-16 shrink-0 place-items-center rounded-full border-2"
         >
-          <UIcon :name="resolvedIcon" class="size-[30px]" aria-hidden="true" />
+          <UIcon :name="resolvedIcon" class="size-[30px]" :aria-hidden="true" />
         </div>
         <div>
           <p