@tekkare/romulus 0.1.227 → 0.1.229

package/dist/module.json

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

package/dist/runtime/components/FilterBar.vue

@@ -109,6 +109,24 @@ function toggle(which: RmFilterBarPanel) {
   panel.value = panel.value === which ? null : which
 }
 
+/**
+ * Un clic hors de la barre referme le panneau ouvert. Les menus des listes
+ * deroulantes, les popovers et les modales sont teleportes sous <body>, hors
+ * de l'arbre de l'app : un clic dedans appartient encore au panneau (choisir
+ * une option ne doit pas le fermer), on ne ferme donc que pour un clic tombe
+ * dans le meme conteneur racine que la barre.
+ */
+const root = ref<HTMLElement | null>(null)
+
+function onDocPointerDown(event: PointerEvent) {
+  if (!panel.value || !root.value) return
+  const target = event.target as Node
+  if (root.value.contains(target)) return
+  let appRoot: HTMLElement = root.value
+  while (appRoot.parentElement && appRoot.parentElement !== document.body) appRoot = appRoot.parentElement
+  if (appRoot.contains(target)) panel.value = null
+}
+
 /**
  * Le lien de recherche avancee est pose DANS le champ, a son bout : le champ
  * doit donc lui reserver sa place, sinon le texte saisi et la croix passent
@@ -157,6 +175,7 @@ function watchHeader() {
 onMounted(() => {
   watchHeader()
   watchAdvanced()
+  document.addEventListener('pointerdown', onDocPointerDown)
 })
 
 onBeforeUnmount(() => {
@@ -164,12 +183,14 @@ onBeforeUnmount(() => {
   headerSize = null
   advancedSize?.disconnect()
   advancedSize = null
+  document.removeEventListener('pointerdown', onDocPointerDown)
 })
 </script>
 
 <template>
   <div
     id="rm_filter_bar"
+    ref="root"
     class="rm-fbar"
     :class="panel ? 'rm-fbar--open' : 'rm-fbar--closed'"
     :style="{ top: `${stickyTop}px`, '--rm-fbar-advanced-w': `${advancedWidth}px` }"

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.227",
+  "version": "0.1.229",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",