@tekkare/romulus 0.1.160 → 0.1.161

package/dist/module.json

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

package/dist/runtime/components/ComplexSelect.vue

@@ -172,6 +172,50 @@ const PANEL_WIDTH = 820
 /** Marge gardee contre les bords de la fenetre. */
 const PANEL_GAP = 8
 
+/**
+ * Largeur en dessous de laquelle un conteneur n'est pas pris pour cadre : une
+ * carte etroite qui cache son debordement reduirait le panneau a un couloir,
+ * alors qu'elle ne le decoupe plus (il est pose sur la fenetre).
+ */
+const MIN_BOUNDS = 360
+
+/**
+ * Le cadre dans lequel le panneau doit tenir.
+ *
+ * La fenetre ne suffit pas. Un filtre pose dans un tiroir colle au bord droit
+ * de l'ecran tient contre ce bord : cale a gauche le panneau sort du tiroir
+ * par la droite, cale a droite il en sort par la gauche et couvre la page.
+ * Dans les deux cas il flotte hors de la surface qui le porte, et le lecteur
+ * lit un panneau qui n'appartient visiblement plus a rien.
+ *
+ * On remonte donc jusqu'au premier ancetre qui borne son contenu (un tiroir,
+ * une modale, un panneau du cadre : tout ce qui n'a pas `overflow: visible`),
+ * et le panneau se range dedans. Sans ancetre de ce genre — le cas courant
+ * d'un filtre pose en pleine page — le cadre reste la fenetre, et le placement
+ * ne change pas.
+ */
+function panelBounds(): { left: number, right: number } {
+  const viewport = { left: PANEL_GAP, right: window.innerWidth - PANEL_GAP }
+  let node = rootRef.value?.parentElement
+
+  while (node && node !== document.body) {
+    const style = getComputedStyle(node)
+    const clips = `${style.overflowX}${style.overflowY}`.replace(/visible/g, '') !== ''
+    if (clips) {
+      const box = node.getBoundingClientRect()
+      if (box.width >= MIN_BOUNDS) {
+        return {
+          left: Math.max(viewport.left, box.left + PANEL_GAP),
+          right: Math.min(viewport.right, box.right - PANEL_GAP),
+        }
+      }
+    }
+    node = node.parentElement
+  }
+
+  return viewport
+}
+
 /**
  * Le panneau est pose sur la fenetre, pas dans le champ : depose dans le flux,
  * il etait coupe des que le filtre vivait dans un conteneur qui defile (un
@@ -179,8 +223,7 @@ const PANEL_GAP = 8
  * l'appelant ne le rattrapait.
  *
  * Il sort donc par un `Teleport` et se positionne a la main, sous le champ,
- * cale a gauche par defaut et sur le bord droit du champ quand il depasserait
- * de l'ecran.
+ * cale a gauche du champ et ramene dans son cadre quand il en depasserait.
  */
 const panelStyle = ref<Record<string, string>>({})
 
@@ -188,10 +231,12 @@ function placePanel() {
   const rect = rootRef.value?.getBoundingClientRect()
   if (!rect) return
 
-  const width = Math.min(PANEL_WIDTH, window.innerWidth - PANEL_GAP * 2)
-  const left = rect.left + width > window.innerWidth - PANEL_GAP
-    ? Math.max(PANEL_GAP, rect.right - width)
-    : rect.left
+  const bounds = panelBounds()
+  const width = Math.min(PANEL_WIDTH, bounds.right - bounds.left)
+  // Cale a gauche du champ, puis ramene dans le cadre : le bord droit d'abord,
+  // le gauche ensuite, pour qu'un cadre plus etroit que le panneau laisse voir
+  // son debut plutot que sa fin.
+  const left = Math.max(bounds.left, Math.min(rect.left, bounds.right - width))
 
   // Sous le champ, sauf quand il ne reste rien dessous : le panneau se pose
   // alors au-dessus, et sa hauteur se borne a la place reellement libre.

package/package.json

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