@tekkare/romulus 0.1.122 → 0.1.123

package/dist/module.json

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

package/dist/runtime/components/ComplexSelect.vue

@@ -278,7 +278,7 @@ function applyPreset(preset: RmComplexSelectPreset) {
 
 let unregister: (() => void) | undefined
 onMounted(() => {
-  unregister = rmPanelRegister(close)
+  unregister = rmPanelRegister(close, () => isOpen.value)
 })
 
 onUnmounted(() => {

package/dist/runtime/components/DropdownSelect.vue

@@ -193,7 +193,7 @@ function onKeydown(event: KeyboardEvent) {
 
 let unregister: (() => void) | undefined
 onMounted(() => {
-  unregister = rmPanelRegister(close)
+  unregister = rmPanelRegister(close, () => isOpen.value)
 })
 
 onUnmounted(() => {

package/dist/runtime/components/FilterComplex.vue

@@ -302,7 +302,7 @@ function onKeydown(e: KeyboardEvent) {
 
 let unregister: (() => void) | undefined
 onMounted(() => {
-  unregister = rmPanelRegister(close)
+  unregister = rmPanelRegister(close, () => isOpen.value)
   document.addEventListener('click', onClickOutside)
   document.addEventListener('keydown', onKeydown)
 })

package/dist/runtime/components/FilterDropdown.vue

@@ -159,7 +159,7 @@ function onClickOutside(e: Event) {
 
 let unregister: (() => void) | undefined
 onMounted(() => {
-  unregister = rmPanelRegister(close)
+  unregister = rmPanelRegister(close, () => isOpen.value)
   document.addEventListener('click', onClickOutside)
 })
 onUnmounted(() => {

package/dist/runtime/components/Modal.vue

@@ -2,6 +2,7 @@
 import { computed, ref, toRef } from 'vue'
 import { PhX } from '@phosphor-icons/vue'
 import { useRmDialog } from '../composables/useRmDialog'
+import { rmPanelsDismiss } from '../utils/panels'
 
 export interface RmModalProps {
   /** Whether the modal is open */
@@ -37,6 +38,18 @@ function close() {
   emit('update:modelValue', false)
 }
 
+/**
+ * Un panneau ouvert prend le clic avant le voile.
+ *
+ * Une liste deployee dans le formulaire deborde souvent de la boite : le clic
+ * qui vise a la refermer tombe sur le voile, et la modale partait avec, tout
+ * le formulaire avec elle.
+ */
+function onOverlayClick() {
+  if (rmPanelsDismiss()) return
+  close()
+}
+
 const surface = ref<HTMLElement | null>(null)
 useRmDialog({ open: toRef(props, 'modelValue'), surface, close })
 
@@ -62,7 +75,7 @@ const modalStyle = computed(() => {
       <div
         v-if="modelValue"
         class="rm-modal-overlay"
-        @click.self="close"
+        @click.self="onOverlayClick"
       >
         <div
           ref="surface"

package/dist/runtime/components/MultipleSelect.vue

@@ -161,7 +161,7 @@ function toggleAll() {
 
 let unregister: (() => void) | undefined
 onMounted(() => {
-  unregister = rmPanelRegister(close)
+  unregister = rmPanelRegister(close, () => isOpen.value)
 })
 
 onUnmounted(() => {

package/dist/runtime/composables/useRmDialog.js

@@ -1,4 +1,5 @@
 import { nextTick, onBeforeUnmount, watch } from "vue";
+import { rmPanelsDismiss } from "../utils/panels.js";
 const FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -15,6 +16,7 @@ export function useRmDialog({ open, surface, close }) {
   function onKeydown(event) {
     if (event.key === "Escape") {
       event.stopPropagation();
+      if (rmPanelsDismiss()) return;
       close();
       return;
     }

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

@@ -2,7 +2,22 @@
  * Inscrit un panneau. A appeler au montage, cote client seulement : sur le
  * serveur le registre est partage par toutes les requetes et personne ne le
  * vide.
+ *
+ * `isOpen` est facultatif mais vivement conseille : sans lui, le panneau ne
+ * protege pas la surface qui le porte du clic qui le referme.
  */
-export declare function rmPanelRegister(close: () => void): () => boolean;
+export declare function rmPanelRegister(close: () => void, isOpen?: () => boolean): () => boolean;
 /** Ferme tous les panneaux sauf celui qui vient de s'ouvrir. */
 export declare function rmPanelOpened(self: () => void): void;
+/**
+ * Referme les panneaux deployes, et dit s'il y en avait.
+ *
+ * Une modale se ferme au clic sur son voile et a `Escape`. Un panneau pose
+ * dans son formulaire deborde souvent de la boite : le clic qui vise a le
+ * refermer tombe alors sur le voile, et l'utilisateur perd tout son
+ * formulaire pour avoir voulu replier une liste. Meme geste au clavier.
+ *
+ * La surface appelle donc ceci d'abord : si un panneau etait ouvert, le geste
+ * lui revient et s'arrete la.
+ */
+export declare function rmPanelsDismiss(): boolean;

package/dist/runtime/utils/panels.js

@@ -1,10 +1,16 @@
-const closers = /* @__PURE__ */ new Set();
-export function rmPanelRegister(close) {
-  closers.add(close);
-  return () => closers.delete(close);
+const panels = /* @__PURE__ */ new Set();
+export function rmPanelRegister(close, isOpen) {
+  const panel = { close, isOpen };
+  panels.add(panel);
+  return () => panels.delete(panel);
 }
 export function rmPanelOpened(self) {
-  closers.forEach((close) => {
-    if (close !== self) close();
+  panels.forEach((panel) => {
+    if (panel.close !== self) panel.close();
   });
 }
+export function rmPanelsDismiss() {
+  const open = [...panels].filter((panel) => panel.isOpen?.());
+  open.forEach((panel) => panel.close());
+  return open.length > 0;
+}

package/package.json

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