@dnax/ui 0.0.9 → 0.0.10

package/components/QSidebar.vue

@@ -113,6 +113,18 @@ onBeforeUnmount(() => {
   if (typeof document !== "undefined") document.removeEventListener("keydown", onDocKeydown)
 })
 
+// Verrouille le scroll du body quand la sidebar offcanvas est ouverte : le body
+// ne bouge plus en arrière-plan (et le swipe ne part pas sur la page)
+watch(
+  () => !isStatic.value && open.value,
+  (locked) => {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = locked ? "hidden" : ""
+    }
+  },
+  { immediate: true },
+)
+
 const rootClasses = computed(() =>
   cn(
     "q-sidebar",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/styles/main.css

@@ -3621,8 +3621,13 @@ html.dark body {
   transition:
     transform 0.25s ease,
     visibility 0.25s;
-  /* Scroll vertical natif autorisé, gestes horizontaux (swipe pour fermer) au JS */
+  /* Scroll vertical natif autorisé, gestes horizontaux (swipe pour fermer) au JS.
+     touch-action n'est PAS hérité → on l'applique à tous les descendants : le
+     geste peut démarrer sur le contenu scrollable (.q-sidebar__content) sans que
+     le navigateur ne prenne le swipe pour le body. */
   touch-action: pan-y;
+  /* Empêche le scroll-chaining : swiper la sidebar ne fait plus bouger le body */
+  overscroll-behavior: contain;
   /* Safe-area : encoche, barre d'accueil et côtés en paysage */
   padding-top: 0;
   padding-top: constant(safe-area-inset-top);
@@ -3635,6 +3640,13 @@ html.dark body {
   padding-left: env(safe-area-inset-left);
 }
 
+/* Tous les descendants (contenu scrollable, menu, boutons…) : gestes horizontaux
+   au JS, scroll vertical natif uniquement */
+.q-sidebar--offcanvas,
+.q-sidebar--offcanvas * {
+  touch-action: pan-y;
+}
+
 .q-sidebar--offcanvas.q-sidebar--right {
   left: auto;
   right: 0;
@@ -3702,6 +3714,8 @@ html.dark body {
   overflow-y: auto;
   padding: 8px;
   scrollbar-width: thin;
+  /* Le scroll du contenu ne doit pas se propager au body (swipe-to-close) */
+  overscroll-behavior: contain;
 }
 
 .q-sidebar__footer {