@antelopejs/dms 0.7.20 → 0.8.0

package/frontend-vue/layers/dms-layout/app/composables/useFooterLinks.ts

@@ -7,7 +7,8 @@ export interface FooterLink {
 
 /**
  * The Antelope links every footer starts with. A layer replaces one by
- * registering an entry under the same id.
+ * registering an entry under the same id, or removes it with
+ * `unregisterFooterLink`.
  */
 const DEFAULT_FOOTER_LINKS: FooterLink[] = [
   {
@@ -43,6 +44,15 @@ export function registerFooterLink(link: FooterLink): void {
   links.value = next;
 }
 
+/**
+ * Removes a link from the footer, one of the Antelope defaults
+ * (`dms:documentation`, `dms:website`) or another layer's. An id never
+ * registered is ignored.
+ */
+export function unregisterFooterLink(id: string): void {
+  links.value = links.value.filter((entry) => entry.id !== id);
+}
+
 export function useFooterLinks() {
   const sortedLinks = computed<FooterLink[]>(() =>
     [...links.value].sort(compareByOrder),

package/frontend-vue/layers/dms-layout/app/custom-pages/settings/roles.vue

@@ -32,7 +32,7 @@ interface RoleEditorHandle {
 
 const NAME_REQUIRED = "$page.settings.roles.error.name_required";
 const NAME_TAKEN = "$page.settings.roles.error.name_taken";
-const ROLE_DELETE_CONFIRM_URL = `${ROLES_API_PATH}/{id}/delete-confirm`;
+const ROLE_DELETE_CONFIRM_URL = `${ROLES_API_PATH}/{{row.id}}/delete-confirm`;
 
 const api = useRolesApi();
 const { t } = useI18n();

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

@@ -51,7 +51,7 @@ const invitation = computed(() => {
 </script>
 
 <template>
-  <EmailLayout :title="title" :lang="locale">
+  <EmailLayout :title="title" :lang="locale" public-logo-only>
     <EText :style="emailStyles.text">
       {{ t("emails.admin_invite.greeting") }}
     </EText>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import EmailLayout from "./components/EmailLayout.vue";
 import { emailStyles } from "./components/index";
 
@@ -6,22 +7,27 @@ defineProps<{
   userName: string;
   newEmail: string;
 }>();
+
+const { t, locale } = useI18n();
 </script>
 
 <template>
-  <EmailLayout title="Your sign-in email is being changed">
-    <EText :style="emailStyles.text">Hello {{ userName }},</EText>
+  <EmailLayout
+    :title="t('emails.email_change_notice.title')"
+    :lang="locale"
+    public-logo-only
+  >
+    <EText :style="emailStyles.text">
+      {{ t("emails.common.greeting", { name: userName }) }}
+    </EText>
 
     <EText :style="emailStyles.text">
-      Someone signed in to your account asked to change its sign-in email to
-      {{ newEmail }}. The change takes effect once that address is confirmed.
+      {{ t("emails.email_change_notice.body", { email: newEmail }) }}
     </EText>
 
     <template #footer>
       <EText :style="emailStyles.footer">
-        If this wasn't you, change your password now and sign out the other
-        sessions in Security: your account keeps this address until the new
-        one is confirmed.
+        {{ t("emails.email_change_notice.footer") }}
       </EText>
     </template>
   </EmailLayout>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import EmailLayout from "./components/EmailLayout.vue";
 import EmailOTP from "./components/EmailOTP.vue";
 import { emailStyles } from "./components/index";
@@ -8,24 +9,34 @@ defineProps<{
   newEmail: string;
   code: string;
   expiresIn: string;
+  expiresInHours: number;
 }>();
+
+const { t, locale } = useI18n();
 </script>
 
 <template>
-  <EmailLayout title="Confirm your new sign-in email">
-    <EText :style="emailStyles.text">Hello {{ userName }},</EText>
+  <EmailLayout
+    :title="t('emails.email_change_verification.title')"
+    :lang="locale"
+    public-logo-only
+  >
+    <EText :style="emailStyles.text">
+      {{ t("emails.common.greeting", { name: userName }) }}
+    </EText>
 
     <EText :style="emailStyles.text">
-      Enter the code below to make {{ newEmail }} the sign-in email of your
-      account:
+      {{ t("emails.email_change_verification.body", { email: newEmail }) }}
     </EText>
 
-    <EmailOTP :code="code" :expires-in="expiresIn" />
+    <EmailOTP
+      :code="code"
+      :expires-in="t('emails.common.hours', expiresInHours)"
+    />
 
     <template #footer>
       <EText :style="emailStyles.footer">
-        If you didn't ask for this change, you can safely ignore this email:
-        your account keeps its current address.
+        {{ t("emails.email_change_verification.footer") }}
       </EText>
     </template>
   </EmailLayout>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { I18nT, useI18n } from "vue-i18n";
 import EmailLayout from "./components/EmailLayout.vue";
 import EmailButton from "./components/EmailButton.vue";
 import { emailStyles } from "./components/index";
@@ -7,38 +8,48 @@ defineProps<{
   userName: string;
   downloadLink: string;
   expiresIn: string;
+  expiresInHours: number;
   partial: boolean;
   failedSources: string[];
 }>();
+
+const { t, locale } = useI18n();
 </script>
 
 <template>
-  <EmailLayout title="Your data export is ready">
-    <EText :style="emailStyles.text">Hello {{ userName }},</EText>
+  <EmailLayout
+    :title="t('emails.export_ready.title')"
+    :lang="locale"
+    public-logo-only
+  >
+    <EText :style="emailStyles.text">
+      {{ t("emails.common.greeting", { name: userName }) }}
+    </EText>
 
     <EText :style="emailStyles.text">
-      Your data export has been prepared. Use the button below to download the
-      archive:
+      {{ t("emails.export_ready.body") }}
     </EText>
 
     <EmailButton
       :href="downloadLink"
-      :expires-in="expiresIn"
-      expires-label="This download link expires in"
+      :expires-in="t('emails.common.hours', expiresInHours)"
+      :expires-label="t('emails.export_ready.expires_label')"
     >
-      Download export
+      {{ t("emails.export_ready.button") }}
     </EmailButton>
 
     <EText v-if="partial" :style="emailStyles.text">
-      This export is
-      <strong>incomplete</strong>
-      : the following parts could not be included —
-      {{ failedSources.join(", ") }}. Request a new export if you need them.
+      <I18nT keypath="emails.export_ready.partial" scope="global">
+        <template #incomplete>
+          <strong>{{ t("emails.export_ready.incomplete") }}</strong>
+        </template>
+        <template #sources>{{ failedSources.join(", ") }}</template>
+      </I18nT>
     </EText>
 
     <template #footer>
       <EText :style="emailStyles.footer">
-        If you didn't request this export, you can safely ignore this email.
+        {{ t("emails.export_ready.footer") }}
       </EText>
     </template>
   </EmailLayout>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import EmailLayout from "./components/EmailLayout.vue";
 import EmailOTP from "./components/EmailOTP.vue";
 import { emailStyles } from "./components/index";
@@ -7,24 +8,34 @@ defineProps<{
   userName: string;
   resetCode: string;
   expiresIn: string;
+  expiresInHours: number;
 }>();
+
+const { t, locale } = useI18n();
 </script>
 
 <template>
-  <EmailLayout title="Reset Your Password">
-    <EText :style="emailStyles.text">Hello {{ userName }},</EText>
+  <EmailLayout
+    :title="t('emails.reset_password.title')"
+    :lang="locale"
+    public-logo-only
+  >
+    <EText :style="emailStyles.text">
+      {{ t("emails.common.greeting", { name: userName }) }}
+    </EText>
 
     <EText :style="emailStyles.text">
-      We received a request to reset your password. Enter the verification code
-      below to reset your password:
+      {{ t("emails.reset_password.body") }}
     </EText>
 
-    <EmailOTP :code="resetCode" :expires-in="expiresIn" />
+    <EmailOTP
+      :code="resetCode"
+      :expires-in="t('emails.common.hours', expiresInHours)"
+    />
 
     <template #footer>
       <EText :style="emailStyles.footer">
-        If you didn't request a password reset, you can safely ignore this
-        email. Your password will remain unchanged.
+        {{ t("emails.reset_password.footer") }}
       </EText>
     </template>
   </EmailLayout>

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

@@ -1,18 +1,37 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import EmailLayout from "./components/EmailLayout.vue";
 import EmailOTP from "./components/EmailOTP.vue";
+import { emailStyles } from "./components/index";
 
 defineProps<{
   userName: string;
   verificationCode: string;
 }>();
+
+const { t, locale } = useI18n();
 </script>
 
 <template>
-  <EmailLayout title="Your verification code">
-    <p>Hello {{ userName }},</p>
-    <p>Use this verification code to finish signing in:</p>
+  <EmailLayout
+    :title="t('emails.two_factor.title')"
+    :lang="locale"
+    public-logo-only
+  >
+    <EText :style="emailStyles.text">
+      {{ t("emails.common.greeting", { name: userName }) }}
+    </EText>
+
+    <EText :style="emailStyles.text">
+      {{ t("emails.two_factor.body") }}
+    </EText>
+
     <EmailOTP :code="verificationCode" />
-    <p>If you did not attempt to sign in, you can safely ignore this email.</p>
+
+    <template #footer>
+      <EText :style="emailStyles.footer">
+        {{ t("emails.two_factor.footer") }}
+      </EText>
+    </template>
   </EmailLayout>
 </template>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import EmailLayout from "./components/EmailLayout.vue";
 import EmailOTP from "./components/EmailOTP.vue";
 import { emailStyles } from "./components/index";
@@ -7,23 +8,34 @@ defineProps<{
   userName: string;
   validationCode: string;
   expiresIn: string;
+  expiresInHours: number;
 }>();
+
+const { t, locale } = useI18n();
 </script>
 
 <template>
-  <EmailLayout title="Verify Your Email">
-    <EText :style="emailStyles.text">Hello {{ userName }},</EText>
+  <EmailLayout
+    :title="t('emails.user_validation.title')"
+    :lang="locale"
+    public-logo-only
+  >
+    <EText :style="emailStyles.text">
+      {{ t("emails.common.greeting", { name: userName }) }}
+    </EText>
 
     <EText :style="emailStyles.text">
-      Thank you for signing up! Enter the verification code below to verify your
-      email address:
+      {{ t("emails.user_validation.body") }}
     </EText>
 
-    <EmailOTP :code="validationCode" :expires-in="expiresIn" />
+    <EmailOTP
+      :code="validationCode"
+      :expires-in="t('emails.common.hours', expiresInHours)"
+    />
 
     <template #footer>
       <EText :style="emailStyles.footer">
-        If you didn't create an account, you can safely ignore this email.
+        {{ t("emails.user_validation.footer") }}
       </EText>
     </template>
   </EmailLayout>

package/frontend-vue/layers/dms-layout/app/emails/components/EmailOTP.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from "vue-i18n";
 import { emailStyles } from "./index";
 
 defineProps<{
@@ -6,17 +7,22 @@ defineProps<{
   expiresIn?: string;
   expiresLabel?: string;
 }>();
+
+const { t } = useI18n();
 </script>
 
 <template>
   <ESection :style="emailStyles.otp.box">
-    <EText :style="emailStyles.otp.label">Your verification code is:</EText>
+    <EText :style="emailStyles.otp.label">
+      {{ t("emails.common.code_label") }}
+    </EText>
     <EText :style="emailStyles.otp.code">
       {{ code }}
     </EText>
   </ESection>
 
   <EText v-if="expiresIn" :style="emailStyles.expires">
-    {{ expiresLabel ?? "This code expires in" }} {{ expiresIn }}.
+    {{ expiresLabel ?? t("emails.common.code_expires_label") }}
+    {{ expiresIn }}.
   </EText>
 </template>

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

@@ -867,6 +867,46 @@
       "expires_label": "This invitation expires in",
       "expires_in": "{days} days",
       "footer": "If you didn't expect this invitation, you can safely ignore this email."
+    },
+    "common": {
+      "greeting": "Hello {name},",
+      "code_label": "Your verification code is:",
+      "code_expires_label": "This code expires in",
+      "hours": "{count} hour | {count} hours"
+    },
+    "user_validation": {
+      "title": "Verify Your Email",
+      "body": "Thank you for signing up! Enter the verification code below to verify your email address:",
+      "footer": "If you didn't create an account, you can safely ignore this email."
+    },
+    "reset_password": {
+      "title": "Reset Your Password",
+      "body": "We received a request to reset your password. Enter the verification code below to reset your password:",
+      "footer": "If you didn't request a password reset, you can safely ignore this email. Your password will remain unchanged."
+    },
+    "two_factor": {
+      "title": "Your verification code",
+      "body": "Use this verification code to finish signing in:",
+      "footer": "If you did not attempt to sign in, you can safely ignore this email."
+    },
+    "email_change_verification": {
+      "title": "Confirm your new sign-in email",
+      "body": "Enter the code below to make {email} the sign-in email of your account:",
+      "footer": "If you didn't ask for this change, you can safely ignore this email: your account keeps its current address."
+    },
+    "email_change_notice": {
+      "title": "Your sign-in email is being changed",
+      "body": "Someone signed in to your account asked to change its sign-in email to {email}. The change takes effect once that address is confirmed.",
+      "footer": "If this wasn't you, change your password now and sign out the other sessions in Security: your account keeps this address until the new one is confirmed."
+    },
+    "export_ready": {
+      "title": "Your data export is ready",
+      "body": "Your data export has been prepared. Use the button below to download the archive:",
+      "button": "Download export",
+      "expires_label": "This download link expires in",
+      "partial": "This export is {incomplete}: the following parts could not be included — {sources}. Request a new export if you need them.",
+      "incomplete": "incomplete",
+      "footer": "If you didn't request this export, you can safely ignore this email."
     }
   },
   "empty_layout": {

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

@@ -871,6 +871,46 @@
       "expires_label": "Cette invitation expire dans",
       "expires_in": "{days} jours",
       "footer": "Si vous n'attendiez pas cette invitation, vous pouvez ignorer cet e-mail."
+    },
+    "common": {
+      "greeting": "Bonjour {name},",
+      "code_label": "Votre code de vérification :",
+      "code_expires_label": "Ce code expire dans",
+      "hours": "{count} heure | {count} heures"
+    },
+    "user_validation": {
+      "title": "Vérifiez votre adresse e-mail",
+      "body": "Merci pour votre inscription ! Saisissez le code ci-dessous pour vérifier votre adresse e-mail :",
+      "footer": "Si vous n'avez pas créé de compte, vous pouvez ignorer cet e-mail."
+    },
+    "reset_password": {
+      "title": "Réinitialisez votre mot de passe",
+      "body": "Nous avons reçu une demande de réinitialisation de votre mot de passe. Saisissez le code ci-dessous pour le réinitialiser :",
+      "footer": "Si vous n'êtes pas à l'origine de cette demande, vous pouvez ignorer cet e-mail. Votre mot de passe reste inchangé."
+    },
+    "two_factor": {
+      "title": "Votre code de vérification",
+      "body": "Saisissez ce code de vérification pour terminer votre connexion :",
+      "footer": "Si vous n'avez pas essayé de vous connecter, vous pouvez ignorer cet e-mail."
+    },
+    "email_change_verification": {
+      "title": "Confirmez votre nouvelle adresse de connexion",
+      "body": "Saisissez le code ci-dessous pour faire de {email} l'adresse de connexion de votre compte :",
+      "footer": "Si vous n'avez pas demandé ce changement, vous pouvez ignorer cet e-mail : votre compte garde son adresse actuelle."
+    },
+    "email_change_notice": {
+      "title": "Votre adresse de connexion va changer",
+      "body": "Une personne connectée à votre compte a demandé à remplacer son adresse de connexion par {email}. Le changement prendra effet une fois cette adresse confirmée.",
+      "footer": "Si ce n'est pas vous, changez votre mot de passe maintenant et déconnectez les autres sessions dans Sécurité : votre compte garde cette adresse tant que la nouvelle n'est pas confirmée."
+    },
+    "export_ready": {
+      "title": "Votre export de données est prêt",
+      "body": "Votre export de données a été préparé. Utilisez le bouton ci-dessous pour télécharger l'archive :",
+      "button": "Télécharger l'export",
+      "expires_label": "Ce lien de téléchargement expire dans",
+      "partial": "Cet export est {incomplete} : les parties suivantes n'ont pas pu être incluses — {sources}. Demandez un nouvel export si vous en avez besoin.",
+      "incomplete": "incomplet",
+      "footer": "Si vous n'avez pas demandé cet export, vous pouvez ignorer cet e-mail."
     }
   },
   "empty_layout": {

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageLink } from "../../composables/page/pageUrlValues";
 import type {
   FormField,
   FormFieldReadonly,
@@ -79,7 +80,7 @@ const readonly = computed<FormFieldReadonly>(() =>
         />
         <DmsAutoLink
           v-if="readonly.link"
-          :to="readonly.link.to"
+          :to="pageLink(readonly.link.to)"
           class="text-primary ms-auto text-[12.5px] font-medium"
         >
           {{ processI18n(readonly.link.label) }}

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import DmsEmptyState from "../../../components/empty-state/EmptyState.vue";
+import DmsEmptyState, {
+  type EmptyStateVariant,
+} from "../../../components/empty-state/EmptyState.vue";
 import type { FormLoadFailure } from "../../composables/form/formRecordLoad";
 
 // What a form shows instead of its fields when the record it edits did not
@@ -21,16 +23,22 @@ const props = withDefaults(defineProps<FormLoadErrorProps>(), {
 const emit = defineEmits<FormLoadErrorEmits>();
 
 const { t } = useI18n();
+
+const VARIANTS: Record<FormLoadFailure, EmptyStateVariant> = {
+  forbidden: "no-access",
+  missing: "no-data",
+  error: "error",
+};
 </script>
 
 <template>
   <DmsEmptyState
     size="md"
-    :variant="props.failure === 'forbidden' ? 'no-access' : 'error'"
+    :variant="VARIANTS[props.failure]"
     :title="t(`dms.form.load_error.${props.failure}_title`)"
     :description="t(`dms.form.load_error.${props.failure}_description`)"
   >
-    <template #actions>
+    <template v-if="props.failure !== 'missing'" #actions>
       <UButton
         :label="t('dms.form.load_error.retry')"
         icon="i-ph-arrows-clockwise"

package/frontend-vue/layers/dms-ui/app/build/components/table/Table.vue

@@ -256,6 +256,12 @@ export interface TableProps<T> {
   data?: T[] | null;
   columns?: TableColumn<T>[];
   loading?: boolean;
+  /**
+   * No answer has arrived yet. Without it, a load with no row listed counts
+   * as the first one, which also draws the skeleton over a re-read of an
+   * empty list.
+   */
+  firstPageLoading?: boolean;
   /**
    * Message (i18n key) of a failed data fetch; switches the empty-table panel
    * to its error state so a refused query never reads as "no data".
@@ -713,7 +719,11 @@ const DEFAULT_CAPABILITIES = resolveDisplayCapabilities({
   columnManagement: true,
 });
 
-const props = defineProps<TableProps<T>>();
+// Undefined, not the `false` an absent boolean prop casts to: the table then
+// judges the first load by itself.
+const props = withDefaults(defineProps<TableProps<T>>(), {
+  firstPageLoading: undefined,
+});
 const emits = defineEmits<TableEmits<T>>();
 
 const appConfig = useDmsAppConfig() as DmsAppConfig & {
@@ -827,7 +837,7 @@ const paginationState = defineModel<PaginationState>("pagination", {
 // The first page is on its way: skeleton rows (and placeholders for the
 // counts) hold the list's place instead of its empty state.
 const isFirstPageLoading = computed(
-  () => !!props.loading && !props.data?.length,
+  () => props.firstPageLoading ?? (!!props.loading && !props.data?.length),
 );
 const skeletonRowCount = computed(() =>
   Math.min(
@@ -1654,7 +1664,7 @@ defineShortcuts({
               </template>
               <!-- First load: skeleton rows keep the column rhythm instead of
                 flashing the empty state. -->
-              <template v-else-if="loading">
+              <template v-else-if="isFirstPageLoading">
                 <tr
                   v-for="rowIndex in skeletonRowCount"
                   :key="`skeleton-${rowIndex}`"

package/frontend-vue/layers/dms-ui/app/build/components/table-view/CardsDisplay.vue

@@ -113,7 +113,7 @@ const cardReorder = (index: number): TableViewCardReorder | undefined =>
     <!-- v2 cards display: an auto-fill grid inside the table card, sharing
          its selection and its pagination footer. -->
     <CardGridSkeleton
-      v-if="props.context.loading && props.context.items.length === 0"
+      v-if="props.context.firstPageLoading"
       :count="props.context.pagination.pageSize"
       :fields="fieldColumns.length"
     />

package/frontend-vue/layers/dms-ui/app/build/composables/actions/rowNavigation.ts

@@ -18,8 +18,22 @@ export interface RowNavigation {
 export interface RowNavigationSource {
   rows: () => Data[];
   rowIdKey: string;
+  /**
+   * Reads one row by id (the table's `get` route or `fetchRowUrl`): what a
+   * container's `showRow` falls back to for a row the table does not list.
+   */
+  getRow?: (id: string) => Promise<Data | undefined>;
 }
 
+/**
+ * What a drawer, modal or side panel opened on a row receives to show
+ * another row of the same table in its place (`showRow` prop): the row
+ * itself, or its id, read from the rows shown or else from the table's route.
+ * The table then treats it as the open row: its highlight, its position, its
+ * `?record=`. It rejects when the row could not be read.
+ */
+export type ShowRow = (row: Data | string) => Promise<void>;
+
 const rowIdOf = (row: Data, rowIdKey: string): string =>
   String(get(row, rowIdKey));