@tekkare/romulus 0.1.226 → 0.1.227

package/dist/module.json

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

package/dist/runtime/components/Alerts.vue

@@ -13,7 +13,7 @@
   bouton qui disparait n'apprend pas pourquoi.
 -->
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, reactive } from 'vue'
 import type { RmAlert, RmAlertEvent, RmAlertMenuItem } from '../utils/alerts'
 
 const props = withDefaults(
@@ -36,6 +36,12 @@ const props = withDefaults(
     expandedEvents?: RmAlertEvent[]
     expandedLoading?: boolean
     lang?: 'fr' | 'en'
+    /**
+     * Sections rendues repliees, par leur libelle (`group`). Pour ce qui se
+     * consulte rarement, comme les alertes posees depuis une autre app : la
+     * liste reste complete sans que ces cartes passent devant.
+     */
+    collapsedGroups?: string[]
   }>(),
   {
     events: () => [],
@@ -49,6 +55,7 @@ const props = withDefaults(
     expandedEvents: () => [],
     expandedLoading: false,
     lang: 'fr',
+    collapsedGroups: () => [],
   },
 )
 
@@ -129,6 +136,9 @@ const sections = computed(() => {
   return order.map((label) => ({ label, alerts: byLabel.get(label)! }))
 })
 
+/** Sections repliables ouvertes a la main. Toutes fermees au depart. */
+const opened = reactive<Record<string, boolean>>({})
+
 const unreadTotal = computed(() =>
   props.alerts.reduce((total, alert) => total + (alert.unreadCount ?? 0), 0),
 )
@@ -200,30 +210,52 @@ function setTab(value: 'active' | 'paused' | 'events') {
 
     <template v-else>
       <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>
+        <template v-for="section in sections" :key="section.label">
+          <RmCollapse
+            v-if="section.label && collapsedGroups.includes(section.label)"
+            :model-value="!!opened[section.label]"
+            :title="section.label"
+            :count="section.alerts.length"
+            @update:model-value="opened[section.label] = $event"
+          >
+            <div class="rm-alerts__section">
+              <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)"
+              />
+            </div>
+          </RmCollapse>
+          <section v-else 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>
+        </template>
       </div>
 
       <!-- Meme etat vide que les vues : cadre pointille, cloche teintee quand

package/package.json

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