@tekkare/romulus 0.1.126 → 0.1.127

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.125",
+  "version": "0.1.126",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/AlertCard.vue

@@ -14,7 +14,7 @@
 -->
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import type { RmAlert, RmAlertMenuItem } from '../utils/alerts'
+import type { RmAlert, RmAlertEvent, RmAlertMenuItem } from '../utils/alerts'
 
 const props = withDefaults(
   defineProps<{
@@ -27,8 +27,20 @@ const props = withDefaults(
      * reconstruire sa requete Elasticsearch.
      */
     onWatchedPage?: boolean
+    /** Le journal de l'alerte est deplie sous la carte. */
+    expanded?: boolean
+    /** Ce que l'alerte a rapporte, charge par l'appelant au depliement. */
+    events?: RmAlertEvent[]
+    eventsLoading?: boolean
   }>(),
-  { menu: () => [], lang: 'fr', onWatchedPage: false },
+  {
+    menu: () => [],
+    lang: 'fr',
+    onWatchedPage: false,
+    expanded: false,
+    events: () => [],
+    eventsLoading: false,
+  },
 )
 
 const emit = defineEmits<{
@@ -52,6 +64,9 @@ const FR = {
   resume: 'Réactiver',
   rearm: 'Réarmer depuis cette page',
   shared: "Partagée avec l'espace",
+  journal: "Voir ce que l'alerte a rapporté",
+  journalClose: 'Replier le journal',
+  noEvents: 'Rien de signalé depuis la création.',
   appeared: 'Nouvel élément',
   changed: 'Changement de valeur',
   disappeared: 'Sortie du périmètre',
@@ -113,6 +128,9 @@ const EN = {
   resume: 'Resume',
   rearm: 'Re-arm from this page',
   shared: 'Shared with the workspace',
+  journal: 'See what this alert reported',
+  journalClose: 'Collapse the journal',
+  noEvents: 'Nothing reported since it was created.',
   appeared: 'New item',
   changed: 'Value change',
   disappeared: 'Left the scope',
@@ -234,7 +252,21 @@ function pick(item: RmAlertMenuItem) {
 <template>
   <div class="rm-alert" :class="`rm-alert--${alert.status}`">
     <div class="rm-alert__head">
-      <button type="button" class="rm-alert__title" @click="emit('open', alert.id)">
+      <!-- Le titre est la commande du depliement : c'est le geste attendu
+           d'une carte qui cache quelque chose, et ca evite un bouton de plus
+           dans un en-tete qui en porte deja deux. -->
+      <button
+        type="button"
+        class="rm-alert__title"
+        :aria-expanded="expanded"
+        :title="expanded ? T.journalClose : T.journal"
+        @click="emit('open', alert.id)"
+      >
+        <RmIcon
+          :name="expanded ? 'CaretDown' : 'CaretRight'"
+          :size="14"
+          class="rm-alert__caret"
+        />
         {{ alert.title }}
         <span v-if="alert.unreadCount" class="rm-alert__unread">
           {{ alert.unreadCount }}
@@ -344,9 +376,15 @@ function pick(item: RmAlertMenuItem) {
         <RmIcon name="Fire" :size="13" />{{ alert.lastEventLabel }}
       </span>
     </div>
+
+    <div v-if="expanded" class="rm-alert__journal">
+      <RmLoadingState v-if="eventsLoading" />
+      <RmAlertEvents v-else-if="events.length" :events="events" :lang="lang" />
+      <p v-else class="rm-alert__journal-empty">{{ T.noEvents }}</p>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.rm-alert{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:10px;display:flex;flex-direction:column;gap:10px;padding:14px 16px}.rm-alert--paused,.rm-alert--seeding{background:var(--rm-surface-muted,#fafafa)}.rm-alert__head{align-items:flex-start;display:flex;gap:10px;justify-content:space-between}.rm-alert__title{all:unset;align-items:center;color:var(--rm-text,#111827);cursor:pointer;display:inline-flex;font-size:15px;font-weight:600;gap:8px;line-height:1.35}.rm-alert__title:hover{color:var(--rm-primary,#4f46e5)}.rm-alert__unread{align-items:center;background:var(--rm-primary,#4f46e5);border-radius:999px;color:#fff;display:inline-flex;font-size:11px;font-weight:700;height:18px;justify-content:center;min-width:18px;padding:0 5px}.rm-alert__head-actions{align-items:center;display:flex;flex-shrink:0;gap:6px}.rm-alert__status{align-items:center;background:var(--rm-surface-muted,#f3f4f6);border-radius:999px;color:var(--rm-text-soft,#6b7280);display:inline-flex;font-size:11px;font-weight:600;gap:5px;letter-spacing:.03em;padding:3px 8px;text-transform:uppercase;white-space:nowrap}.rm-alert__dot{background:currentColor;border-radius:999px;height:6px;width:6px}.rm-alert__status--active{background:var(--rm-success-soft,#ecfdf5);color:var(--rm-success,#047857)}.rm-alert__status--failing,.rm-alert__status--stale{background:var(--rm-warn-soft,#fffbeb);color:var(--rm-warn,#b45309)}.rm-alert__view{align-items:center;color:var(--rm-text-soft,#6b7280);display:flex;flex-wrap:wrap;font-size:12px;gap:5px;margin:0}.rm-alert__shared{border-radius:999px;font-size:11px;padding:1px 6px}.rm-alert__notice,.rm-alert__shared{background:var(--rm-surface-muted,#f3f4f6)}.rm-alert__notice{align-items:flex-start;border-radius:8px;color:var(--rm-text-soft,#4b5563);display:flex;font-size:12.5px;gap:8px;line-height:1.45;padding:9px 11px}.rm-alert__notice--warn{background:var(--rm-warn-soft,#fffbeb);color:var(--rm-warn,#92400e)}.rm-alert__notice-detail{display:block;font-size:11.5px;font-style:normal;margin-top:3px;opacity:.8}.rm-alert__spec{background:var(--rm-surface-muted,#f9fafb);border-radius:8px;display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 12px}.rm-alert__row{align-items:baseline;display:grid;gap:10px;grid-template-columns:110px 1fr}.rm-alert__row dt{color:var(--rm-text-soft,#9ca3af);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}.rm-alert__row dd{color:var(--rm-text,#111827);display:flex;flex-wrap:wrap;font-size:13px;gap:5px;margin:0}.rm-alert__chip{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:6px;font-size:12px;padding:1px 7px}.rm-alert__reseed{margin:0}.rm-alert__meta,.rm-alert__reseed{color:var(--rm-text-soft,#9ca3af);font-size:11.5px}.rm-alert__meta{border-top:1px solid var(--rm-border-soft,#f3f4f6);display:flex;flex-wrap:wrap;gap:12px;padding-top:9px}.rm-alert__meta span{align-items:center;display:inline-flex;gap:4px}.rm-alert__menu-wrap{position:relative}.rm-alert__more{all:unset;border-radius:6px;color:var(--rm-text-soft,#9ca3af);cursor:pointer;display:inline-flex;padding:3px}.rm-alert__more:hover{background:var(--rm-surface-muted,#f3f4f6);color:var(--rm-text,#111827)}.rm-alert__menu-shade{inset:0;position:fixed;z-index:20}.rm-alert__menu{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);display:flex;flex-direction:column;min-width:190px;padding:4px;position:absolute;right:0;top:calc(100% + 4px);z-index:21}.rm-alert__menu-item{all:unset;align-items:center;border-radius:6px;color:var(--rm-text,#111827);cursor:pointer;display:flex;font-size:13px;gap:8px;padding:7px 9px}.rm-alert__menu-item:hover{background:var(--rm-surface-muted,#f3f4f6)}.rm-alert__menu-item--danger{color:var(--rm-danger,#b91c1c)}
+.rm-alert{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:10px;display:flex;flex-direction:column;gap:10px;padding:14px 16px}.rm-alert--paused,.rm-alert--seeding{background:var(--rm-surface-muted,#fafafa)}.rm-alert__head{align-items:flex-start;display:flex;gap:10px;justify-content:space-between}.rm-alert__journal{border-top:1px solid var(--rm-border,#e5e7eb);padding-top:10px}.rm-alert__journal-empty{color:var(--rm-text-soft,#9ca3af);font-size:12.5px;margin:0}.rm-alert__caret{color:var(--rm-text-soft,#9ca3af);flex-shrink:0}.rm-alert__title{all:unset;align-items:center;color:var(--rm-text,#111827);cursor:pointer;display:inline-flex;font-size:15px;font-weight:600;gap:8px;line-height:1.35}.rm-alert__title:hover{color:var(--rm-primary,#4f46e5)}.rm-alert__unread{align-items:center;background:var(--rm-primary,#4f46e5);border-radius:999px;color:#fff;display:inline-flex;font-size:11px;font-weight:700;height:18px;justify-content:center;min-width:18px;padding:0 5px}.rm-alert__head-actions{align-items:center;display:flex;flex-shrink:0;gap:6px}.rm-alert__status{align-items:center;background:var(--rm-surface-muted,#f3f4f6);border-radius:999px;color:var(--rm-text-soft,#6b7280);display:inline-flex;font-size:11px;font-weight:600;gap:5px;letter-spacing:.03em;padding:3px 8px;text-transform:uppercase;white-space:nowrap}.rm-alert__dot{background:currentColor;border-radius:999px;height:6px;width:6px}.rm-alert__status--active{background:var(--rm-success-soft,#ecfdf5);color:var(--rm-success,#047857)}.rm-alert__status--failing,.rm-alert__status--stale{background:var(--rm-warn-soft,#fffbeb);color:var(--rm-warn,#b45309)}.rm-alert__view{align-items:center;color:var(--rm-text-soft,#6b7280);display:flex;flex-wrap:wrap;font-size:12px;gap:5px;margin:0}.rm-alert__shared{border-radius:999px;font-size:11px;padding:1px 6px}.rm-alert__notice,.rm-alert__shared{background:var(--rm-surface-muted,#f3f4f6)}.rm-alert__notice{align-items:flex-start;border-radius:8px;color:var(--rm-text-soft,#4b5563);display:flex;font-size:12.5px;gap:8px;line-height:1.45;padding:9px 11px}.rm-alert__notice--warn{background:var(--rm-warn-soft,#fffbeb);color:var(--rm-warn,#92400e)}.rm-alert__notice-detail{display:block;font-size:11.5px;font-style:normal;margin-top:3px;opacity:.8}.rm-alert__spec{background:var(--rm-surface-muted,#f9fafb);border-radius:8px;display:flex;flex-direction:column;gap:6px;margin:0;padding:10px 12px}.rm-alert__row{align-items:baseline;display:grid;gap:10px;grid-template-columns:110px 1fr}.rm-alert__row dt{color:var(--rm-text-soft,#9ca3af);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}.rm-alert__row dd{color:var(--rm-text,#111827);display:flex;flex-wrap:wrap;font-size:13px;gap:5px;margin:0}.rm-alert__chip{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:6px;font-size:12px;padding:1px 7px}.rm-alert__reseed{margin:0}.rm-alert__meta,.rm-alert__reseed{color:var(--rm-text-soft,#9ca3af);font-size:11.5px}.rm-alert__meta{border-top:1px solid var(--rm-border-soft,#f3f4f6);display:flex;flex-wrap:wrap;gap:12px;padding-top:9px}.rm-alert__meta span{align-items:center;display:inline-flex;gap:4px}.rm-alert__menu-wrap{position:relative}.rm-alert__more{all:unset;border-radius:6px;color:var(--rm-text-soft,#9ca3af);cursor:pointer;display:inline-flex;padding:3px}.rm-alert__more:hover{background:var(--rm-surface-muted,#f3f4f6);color:var(--rm-text,#111827)}.rm-alert__menu-shade{inset:0;position:fixed;z-index:20}.rm-alert__menu{background:var(--rm-surface,#fff);border:1px solid var(--rm-border,#e5e7eb);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);display:flex;flex-direction:column;min-width:190px;padding:4px;position:absolute;right:0;top:calc(100% + 4px);z-index:21}.rm-alert__menu-item{all:unset;align-items:center;border-radius:6px;color:var(--rm-text,#111827);cursor:pointer;display:flex;font-size:13px;gap:8px;padding:7px 9px}.rm-alert__menu-item:hover{background:var(--rm-surface-muted,#f3f4f6)}.rm-alert__menu-item--danger{color:var(--rm-danger,#b91c1c)}
 </style>

package/dist/runtime/components/AlertEvents.vue

@@ -0,0 +1,80 @@
+<!--
+  RmAlertEvents - ce qu'une alerte a rapporte.
+
+  La meme liste sert a deux endroits : le journal du panneau, qui melange
+  toutes les alertes, et le depliement d'une carte, qui n'en montre qu'une.
+  D'ou `showSource` : rappeler « Veille Keytruda » sous chaque ligne d'une
+  carte qui porte deja ce titre n'apprend rien.
+
+  Le composant ne met rien en forme lui-meme : les dates arrivent deja
+  ecrites, comme partout ailleurs dans le paquet.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RmAlertEvent } from '../utils/alerts'
+
+const props = withDefaults(
+  defineProps<{
+    events: RmAlertEvent[]
+    /** Nommer l'alerte d'ou vient chaque ligne. */
+    showSource?: boolean
+    lang?: 'fr' | 'en'
+  }>(),
+  { showSource: false, lang: 'fr' },
+)
+
+const FR = {
+  appeared: 'Nouveau',
+  changed: 'Modifié',
+  disappeared: 'Sorti du périmètre',
+  becomes: 'devient',
+  empty: '(vide)',
+}
+
+const EN = {
+  appeared: 'New',
+  changed: 'Changed',
+  disappeared: 'Left the scope',
+  becomes: 'becomes',
+  empty: '(empty)',
+}
+
+const T = computed(() => (props.lang === 'en' ? EN : FR))
+</script>
+
+<template>
+  <div class="rm-alert-events">
+    <article
+      v-for="event in events"
+      :key="event.id"
+      class="rm-alert-events__item"
+      :class="{ 'rm-alert-events__item--unread': !event.read }"
+    >
+      <header class="rm-alert-events__head">
+        <span class="rm-alert-events__kind" :class="`rm-alert-events__kind--${event.kind}`">
+          {{ T[event.kind] }}
+        </span>
+        <time class="rm-alert-events__date">{{ event.dateLabel }}</time>
+      </header>
+      <p class="rm-alert-events__title">{{ event.title }}</p>
+      <p v-if="event.subtitle" class="rm-alert-events__sub">{{ event.subtitle }}</p>
+      <p
+        v-for="(change, index) in event.changes ?? []"
+        :key="index"
+        class="rm-alert-events__change"
+      >
+        {{ change.label || change.field }} :
+        <s>{{ change.before || T.empty }}</s>
+        {{ T.becomes }}
+        <strong>{{ change.after || T.empty }}</strong>
+      </p>
+      <p v-if="showSource && event.alertTitle" class="rm-alert-events__from">
+        {{ event.alertTitle }}
+      </p>
+    </article>
+  </div>
+</template>
+
+<style scoped>
+.rm-alert-events{display:flex;flex-direction:column;gap:10px}.rm-alert-events__item{border:1px solid var(--rm-border,#e5e7eb);border-radius:9px;display:flex;flex-direction:column;gap:3px;padding:10px 12px}.rm-alert-events__item--unread{border-left:3px solid var(--rm-primary,#4f46e5)}.rm-alert-events__head{align-items:center;display:flex;gap:8px;justify-content:space-between}.rm-alert-events__kind{color:var(--rm-text-soft,#6b7280);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.rm-alert-events__kind--appeared{color:var(--rm-success,#047857)}.rm-alert-events__kind--changed{color:var(--rm-info,#1d4ed8)}.rm-alert-events__kind--disappeared{color:var(--rm-warn,#b45309)}.rm-alert-events__date{color:var(--rm-text-soft,#9ca3af);font-size:11px}.rm-alert-events__title{color:var(--rm-text,#111827);font-size:13.5px;line-height:1.4;margin:0}.rm-alert-events__from,.rm-alert-events__sub{color:var(--rm-text-soft,#9ca3af);font-size:11.5px;margin:0}.rm-alert-events__change{color:var(--rm-text-soft,#4b5563);font-size:12.5px;margin:2px 0 0}.rm-alert-events__change s{opacity:.65}
+</style>

package/dist/runtime/components/Alerts.vue

@@ -30,6 +30,11 @@ const props = withDefaults(
     createHint?: string
     /** La page affichee est celle que les alertes de la liste surveillent. */
     onWatchedPage?: boolean
+    /** Alerte dont le journal est deplie, s'il y en a une. */
+    expandedId?: string | null
+    /** Evenements de cette alerte, charges par l'appelant. */
+    expandedEvents?: RmAlertEvent[]
+    expandedLoading?: boolean
     lang?: 'fr' | 'en'
   }>(),
   {
@@ -40,6 +45,9 @@ const props = withDefaults(
     canCreate: false,
     createHint: '',
     onWatchedPage: false,
+    expandedId: null,
+    expandedEvents: () => [],
+    expandedLoading: false,
     lang: 'fr',
   },
 )
@@ -68,11 +76,6 @@ const FR = {
   emptyEvents: 'Rien de neuf',
   emptyEventsText:
     'Les changements détectés sur vos périmètres apparaîtront ici, du plus récent au plus ancien.',
-  appeared: 'Nouveau',
-  changed: 'Modifié',
-  disappeared: 'Sorti du périmètre',
-  becomes: 'devient',
-  empty: '(vide)',
 }
 
 const EN = {
@@ -89,11 +92,6 @@ const EN = {
   emptyEvents: 'Nothing new',
   emptyEventsText:
     'Changes detected on your scopes will show up here, most recent first.',
-  appeared: 'New',
-  changed: 'Changed',
-  disappeared: 'Left the scope',
-  becomes: 'becomes',
-  empty: '(empty)',
 }
 
 const T = computed(() => (props.lang === 'en' ? EN : FR))
@@ -108,6 +106,29 @@ const paused = computed(() => props.alerts.filter((alert) => alert.status === 'p
  */
 const active = computed(() => props.alerts.filter((alert) => alert.status !== 'paused'))
 
+/**
+ * La liste visible, coupee en sections.
+ *
+ * Les sections suivent l'ordre d'apparition des alertes : c'est l'appelant
+ * qui trie, parce que lui seul sait ce qui vient en premier (chez lui, la
+ * page affichee). Sans `group`, tout tient dans une section sans titre et
+ * la liste se lit comme avant.
+ */
+const sections = computed(() => {
+  const list = props.tab === 'paused' ? paused.value : active.value
+  const order: string[] = []
+  const byLabel = new Map<string, RmAlert[]>()
+  for (const alert of list) {
+    const label = alert.group ?? ''
+    if (!byLabel.has(label)) {
+      byLabel.set(label, [])
+      order.push(label)
+    }
+    byLabel.get(label)!.push(alert)
+  }
+  return order.map((label) => ({ label, alerts: byLabel.get(label)! }))
+})
+
 const unreadTotal = computed(() =>
   props.alerts.reduce((total, alert) => total + (alert.unreadCount ?? 0), 0),
 )
@@ -162,50 +183,38 @@ function setTab(value: 'active' | 'paused' | 'events') {
           {{ T.readAll }}
         </button>
 
-        <article
-          v-for="event in events"
-          :key="event.id"
-          class="rm-alerts__event"
-          :class="{ 'rm-alerts__event--unread': !event.read }"
-        >
-          <header class="rm-alerts__event-head">
-            <span class="rm-alerts__kind" :class="`rm-alerts__kind--${event.kind}`">
-              {{ T[event.kind] }}
-            </span>
-            <time class="rm-alerts__event-date">{{ event.dateLabel }}</time>
-          </header>
-          <p class="rm-alerts__event-title">{{ event.title }}</p>
-          <p v-if="event.subtitle" class="rm-alerts__event-sub">{{ event.subtitle }}</p>
-          <p
-            v-for="(change, index) in event.changes ?? []"
-            :key="index"
-            class="rm-alerts__change"
-          >
-            {{ change.label || change.field }} :
-            <s>{{ change.before || T.empty }}</s>
-            {{ T.becomes }}
-            <strong>{{ change.after || T.empty }}</strong>
-          </p>
-          <p v-if="event.alertTitle" class="rm-alerts__event-from">{{ event.alertTitle }}</p>
-        </article>
+        <RmAlertEvents :events="events" show-source :lang="lang" />
       </div>
 
       <RmEmptyState v-else :title="T.emptyEvents" :text="T.emptyEventsText" />
     </template>
 
     <template v-else>
-      <div v-if="(tab === 'paused' ? paused : active).length" class="rm-alerts__list">
-        <RmAlertCard
-          v-for="alert in tab === 'paused' ? paused : active"
-          :key="alert.id"
-          :alert="alert"
-          :menu="menu"
-          :lang="lang"
-          :on-watched-page="onWatchedPage"
-          @open="emit('open', $event)"
-          @rearm="emit('rearm', $event)"
-          @menu="emit('menu', $event)"
-        />
+      <div v-if="sections.length" class="rm-alerts__list">
+        <section
+          v-for="section in sections"
+          :key="section.label"
+          class="rm-alerts__section"
+        >
+          <h3 v-if="section.label" class="rm-alerts__section-title">
+            {{ section.label }}
+            <span class="rm-alerts__section-count">{{ section.alerts.length }}</span>
+          </h3>
+          <RmAlertCard
+            v-for="alert in section.alerts"
+            :key="alert.id"
+            :alert="alert"
+            :menu="menu"
+            :lang="lang"
+            :on-watched-page="onWatchedPage"
+            :expanded="expandedId === alert.id"
+            :events="expandedId === alert.id ? expandedEvents : []"
+            :events-loading="expandedId === alert.id && expandedLoading"
+            @open="emit('open', $event)"
+            @rearm="emit('rearm', $event)"
+            @menu="emit('menu', $event)"
+          />
+        </section>
       </div>
 
       <RmEmptyState
@@ -218,5 +227,5 @@ function setTab(value: 'active' | 'paused' | 'events') {
 </template>
 
 <style scoped>
-.rm-alerts{display:flex;flex-direction:column;gap:14px}.rm-alerts__intro{color:var(--rm-text-soft,#6b7280);font-size:13px;line-height:1.5;margin:0}.rm-alerts__create{align-items:flex-start;display:flex;flex-direction:column;gap:6px}.rm-alerts__hint{color:var(--rm-text-soft,#9ca3af);font-size:12px;line-height:1.45;margin:0}.rm-alerts__tabs{border-bottom:1px solid var(--rm-border,#e5e7eb);display:flex;gap:4px}.rm-alerts__tab{all:unset;align-items:center;border-bottom:2px solid transparent;color:var(--rm-text-soft,#6b7280);cursor:pointer;display:inline-flex;font-size:13px;font-weight:500;gap:6px;padding:8px 10px}.rm-alerts__tab--on{border-bottom-color:var(--rm-primary,#4f46e5);color:var(--rm-primary,#4f46e5)}.rm-alerts__tab-count{background:var(--rm-surface-muted,#f3f4f6);border-radius:999px;font-size:11px;font-weight:700;padding:0 6px}.rm-alerts__tab--on .rm-alerts__tab-count{background:var(--rm-primary,#4f46e5);color:#fff}.rm-alerts__events,.rm-alerts__list{display:flex;flex-direction:column;gap:10px}.rm-alerts__read-all{all:unset;align-self:flex-end;color:var(--rm-primary,#4f46e5);cursor:pointer;font-size:12px}.rm-alerts__event{border:1px solid var(--rm-border,#e5e7eb);border-radius:9px;display:flex;flex-direction:column;gap:3px;padding:10px 12px}.rm-alerts__event--unread{border-left:3px solid var(--rm-primary,#4f46e5)}.rm-alerts__event-head{align-items:center;display:flex;gap:8px;justify-content:space-between}.rm-alerts__kind{color:var(--rm-text-soft,#6b7280);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.rm-alerts__kind--appeared{color:var(--rm-success,#047857)}.rm-alerts__kind--changed{color:var(--rm-info,#1d4ed8)}.rm-alerts__kind--disappeared{color:var(--rm-warn,#b45309)}.rm-alerts__event-date{color:var(--rm-text-soft,#9ca3af);font-size:11px}.rm-alerts__event-title{color:var(--rm-text,#111827);font-size:13.5px;line-height:1.4;margin:0}.rm-alerts__event-from,.rm-alerts__event-sub{color:var(--rm-text-soft,#9ca3af);font-size:11.5px;margin:0}.rm-alerts__change{color:var(--rm-text-soft,#4b5563);font-size:12.5px;margin:2px 0 0}.rm-alerts__change s{opacity:.65}
+.rm-alerts{display:flex;flex-direction:column;gap:14px}.rm-alerts__intro{color:var(--rm-text-soft,#6b7280);font-size:13px;line-height:1.5;margin:0}.rm-alerts__create{align-items:flex-start;display:flex;flex-direction:column;gap:6px}.rm-alerts__hint{color:var(--rm-text-soft,#9ca3af);font-size:12px;line-height:1.45;margin:0}.rm-alerts__tabs{border-bottom:1px solid var(--rm-border,#e5e7eb);display:flex;gap:4px}.rm-alerts__tab{all:unset;align-items:center;border-bottom:2px solid transparent;color:var(--rm-text-soft,#6b7280);cursor:pointer;display:inline-flex;font-size:13px;font-weight:500;gap:6px;padding:8px 10px}.rm-alerts__tab--on{border-bottom-color:var(--rm-primary,#4f46e5);color:var(--rm-primary,#4f46e5)}.rm-alerts__tab-count{background:var(--rm-surface-muted,#f3f4f6);border-radius:999px;font-size:11px;font-weight:700;padding:0 6px}.rm-alerts__tab--on .rm-alerts__tab-count{background:var(--rm-primary,#4f46e5);color:#fff}.rm-alerts__events,.rm-alerts__list,.rm-alerts__section{display:flex;flex-direction:column;gap:10px}.rm-alerts__section-title{align-items:center;color:var(--rm-text-soft,#6b7280);display:flex;font-size:11.5px;font-weight:700;gap:6px;letter-spacing:.05em;margin:4px 0 0;text-transform:uppercase}.rm-alerts__section-count{background:var(--rm-surface-muted,#f3f4f6);border-radius:999px;font-size:11px;letter-spacing:0;padding:0 6px}.rm-alerts__read-all{all:unset;align-self:flex-end;color:var(--rm-primary,#4f46e5);cursor:pointer;font-size:12px}
 </style>

package/dist/runtime/utils/alerts.d.ts

@@ -65,6 +65,14 @@ export interface RmAlert {
     createdLabel?: string | null;
     lastEventLabel?: string | null;
     eventsThisMonth?: number;
+    /**
+     * Section ou ranger l'alerte dans la liste, deja traduite.
+     *
+     * L'appelant seul sait ce qui separe ses alertes : ici, la page surveillee.
+     * Les alertes se rangent dans l'ordre ou leurs sections apparaissent, donc
+     * c'est a lui de trier la liste avant de la passer.
+     */
+    group?: string;
     /** Partagee avec l'espace de travail. */
     shared?: boolean;
     /** L'utilisateur courant en est proprietaire. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.126",
+  "version": "0.1.127",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",