@tekkare/romulus 0.1.226 → 0.1.228

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.225",
+  "version": "0.1.227",
   "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/dist/runtime/components/FilterTree.vue

@@ -26,6 +26,7 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { PhCaretDown, PhCaretRight, PhCheck, PhMagnifyingGlass, PhMinus } from '@phosphor-icons/vue'
 import type { Component } from 'vue'
 import { rmPanelOpened, rmPanelRegister } from '../utils/panels'
+import { rmTreeCommit, rmTreeSettle } from '../utils/filterTree'
 
 export interface RmTreeNode {
   /** Ce qui part dans la selection. Unique dans tout l'arbre. */
@@ -161,7 +162,20 @@ const index = computed(() => {
 const draft = ref(new Set<string>())
 const expanded = ref(new Set<string>())
 
+/**
+ * « Tout deselectionner » vide aussi ce que l'arbre ne montre pas : le
+ * prochain `commit` ne garde alors rien de cache (cf. rmTreeCommit).
+ */
+let dropHidden = false
+
+/**
+ * L'arbre ne montre qu'une partie de la taxonomie : l'appelant cherche cote
+ * serveur et ne passe que les noeuds trouves (cf. `filterSearch`).
+ */
+const partial = computed(() => !props.filterSearch && search.value.trim() !== '')
+
 function resetDraft() {
+  dropHidden = false
   draft.value = new Set(selected.value)
   // Les branches qui portent la selection s'ouvrent : arriver sur un arbre
   // replie alors qu'il est filtre ne dit pas sur quoi.
@@ -203,12 +217,7 @@ const settleOrder = computed(() =>
 )
 
 function settle() {
-  settleOrder.value.forEach(({ node }) => {
-    if (!node.children?.length) return
-    const all = node.children.every(child => draft.value.has(child.value))
-    if (all) draft.value.add(node.value)
-    else draft.value.delete(node.value)
-  })
+  rmTreeSettle(settleOrder.value, draft.value, partial.value)
 }
 
 function toggle(value: string) {
@@ -368,6 +377,7 @@ watch(isOpen, async (open) => {
 
 function clear() {
   draft.value = new Set()
+  dropHidden = true
 }
 
 /**
@@ -376,7 +386,8 @@ function clear() {
  * selections identiques donnent la meme liste.
  */
 function commit() {
-  const values = [...index.value.keys()].filter(value => draft.value.has(value))
+  const values = rmTreeCommit(index.value.keys(), draft.value, selected.value, !dropHidden)
+  dropHidden = false
   selected.value = values
   emit('apply', values)
 }

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

@@ -0,0 +1,39 @@
+/**
+ * Selection de RmFilterTree, hors du composant pour pouvoir la tester.
+ *
+ * Deux regles comptent quand l'arbre affiche n'est qu'une partie de la
+ * taxonomie, ce qui arrive des que l'appelant cherche cote serveur
+ * (`filterSearch` a faux) : il ne passe alors que les noeuds trouves.
+ */
+/** Un noeud de l'index, reduit a ce que la remontee lit. */
+export interface RmTreeSettleEntry {
+    node: {
+        value: string;
+        children?: {
+            value: string;
+        }[];
+    };
+}
+/**
+ * La selection a ecrire dans le modele.
+ *
+ * Les valeurs affichees suivent le brouillon, dans l'ordre de l'arbre. Celles
+ * que l'arbre ne montre pas (cochees lors d'une recherche precedente) sont
+ * gardees telles quelles : l'arbre ne sait rien d'elles, il n'a pas a les
+ * retirer. Sans cette regle, cocher un code apres une nouvelle recherche
+ * effacait tous ceux choisis avant.
+ *
+ * `keepHidden` a faux pour « Tout deselectionner », qui vide tout.
+ */
+export declare function rmTreeCommit(shown: Iterable<string>, draft: Set<string>, previous: string[], keepHidden?: boolean): string[];
+/**
+ * Remonte la coherence apres un clic : un parent est decoche des qu'il lui
+ * manque un enfant, et coche quand il les a tous.
+ *
+ * `partial` : l'arbre ne montre qu'une partie des enfants (recherche cote
+ * serveur). Avoir coche tous les enfants AFFICHES ne veut alors pas dire avoir
+ * coche la branche : le parent n'est plus coche d'office, sans quoi chercher
+ * « C500 » et le cocher cochait aussi « C50 », et la selection annoncait tout
+ * le chapitre. Cocher le parent lui-meme reste possible.
+ */
+export declare function rmTreeSettle(order: RmTreeSettleEntry[], draft: Set<string>, partial?: boolean): void;

package/dist/runtime/utils/filterTree.js

@@ -0,0 +1,14 @@
+export function rmTreeCommit(shown, draft, previous, keepHidden = true) {
+  const known = new Set(shown);
+  const hidden = keepHidden ? previous.filter((value) => !known.has(value)) : [];
+  const kept = [...known].filter((value) => draft.has(value));
+  return [...hidden, ...kept.filter((value) => !hidden.includes(value))];
+}
+export function rmTreeSettle(order, draft, partial = false) {
+  order.forEach(({ node }) => {
+    if (!node.children?.length) return;
+    const all = node.children.every((child) => draft.has(child.value));
+    if (!all) draft.delete(node.value);
+    else if (!partial) draft.add(node.value);
+  });
+}

package/package.json

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