@dnax/ui 0.0.12 → 0.0.13

package/components/QBottomSheetFooter.vue

@@ -2,11 +2,24 @@
 // QBottomSheetFooter — pied du panneau façon barre d'app (équivalent QFooter) :
 // les actions sont embarquées dans un <q-toolbar> (min-height 50px, padding
 // 0 12px) et alignées à droite (justify-content: flex-end — styles/main.css).
+// no-padding retire le padding horizontal du toolbar.
 import QToolbar from "./QToolbar.vue"
+
+interface Props {
+  /** Supprime le padding du toolbar (actions collées aux bords) */
+  noPadding?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  noPadding: false,
+})
 </script>
 
 <template>
-  <div class="q-bottom-sheet__footer">
+  <div
+    class="q-bottom-sheet__footer"
+    :class="{ 'q-bottom-sheet__footer--no-padding': noPadding }"
+  >
     <q-toolbar>
       <slot />
     </q-toolbar>

package/components/QBottomSheetHeader.vue

@@ -2,6 +2,7 @@
 // QBottomSheetHeader — header du panneau façon barre d'app (équivalent QHeader) :
 // le contenu est embarqué dans un <q-toolbar> (min-height 50px, padding 0 12px),
 // avec titre + description + bouton fermer (équivalent DrawerHeader/DrawerTitle).
+// no-padding retire le padding horizontal du toolbar.
 import { inject } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
@@ -12,14 +13,22 @@ import QSpace from "./QSpace.vue"
 interface Props {
   title?: string
   description?: string
+  /** Supprime le padding du toolbar (contenu collé aux bords) */
+  noPadding?: boolean
 }
 
-const props = defineProps<Props>()
+withDefaults(defineProps<Props>(), {
+  noPadding: false,
+})
+
 const sheet = inject(qBottomSheetKey, null)
 </script>
 
 <template>
-  <div class="q-bottom-sheet__header">
+  <div
+    class="q-bottom-sheet__header"
+    :class="{ 'q-bottom-sheet__header--no-padding': noPadding }"
+  >
     <q-toolbar>
       <div class="q-bottom-sheet__header-text">
         <h2 v-if="title" class="q-bottom-sheet__title">{{ title }}</h2>

package/components/QDialog.vue

@@ -88,8 +88,36 @@ const onDocKeydown = (e: KeyboardEvent) => {
 // « Retour » navigateur → ferme le dialog au lieu de naviguer
 useOverlayBack(open, () => { open.value = false }, "QDialog")
 
-watch(open, (v) => {
-  if (typeof document !== "undefined") document.body.style.overflow = v ? "hidden" : ""
+// — Verrou du scroll de la page derrière le dialog —
+// Compteur module-level + suivi par instance : chaque dialog verrouille au plus
+// une fois et déverrouille au plus une fois → pile de dialogs ($q.dialog) sans
+// déverrouillage prématuré. Verrouille html + body (iOS Safari ignore
+// overflow:hidden sur body seul).
+let scrollLockCount = 0
+function setBodyScrollLock(locked: boolean) {
+  if (typeof document === "undefined") return
+  scrollLockCount = Math.max(0, scrollLockCount + (locked ? 1 : -1))
+  const on = scrollLockCount > 0
+  document.documentElement.style.overflow = on ? "hidden" : ""
+  document.body.style.overflow = on ? "hidden" : ""
+}
+
+let didLock = false
+const lockIf = (v: boolean) => {
+  if (v && !didLock) {
+    didLock = true
+    setBodyScrollLock(true)
+  }
+  else if (!v && didLock) {
+    didLock = false
+    setBodyScrollLock(false)
+  }
+}
+
+onMounted(() => lockIf(props.modelValue))
+watch(open, lockIf)
+onBeforeUnmount(() => {
+  if (didLock) setBodyScrollLock(false)
 })
 
 onMounted(() => {
@@ -98,8 +126,8 @@ onMounted(() => {
 onBeforeUnmount(() => {
   if (typeof document !== "undefined") {
     document.removeEventListener("keydown", onDocKeydown)
-    document.body.style.overflow = ""
   }
+  if (didLock) setBodyScrollLock(false)
 })
 
 const overlayClasses = computed(() => cn("q-dialog__overlay", `q-dialog__overlay--${props.position}`))

package/components/QDialogFooter.vue

@@ -2,11 +2,24 @@
 // QDialogFooter — pied de la modale façon barre d'app (équivalent QFooter) :
 // les actions sont embarquées dans un <q-toolbar> (min-height 50px, padding
 // 0 12px) et alignées à droite (justify-content: flex-end — styles/main.css).
+// no-padding retire le padding horizontal du toolbar.
 import QToolbar from "./QToolbar.vue"
+
+interface Props {
+  /** Supprime le padding du toolbar (actions collées aux bords) */
+  noPadding?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  noPadding: false,
+})
 </script>
 
 <template>
-  <div class="q-dialog__footer">
+  <div
+    class="q-dialog__footer"
+    :class="{ 'q-dialog__footer--no-padding': noPadding }"
+  >
     <q-toolbar>
       <slot />
     </q-toolbar>

package/components/QDialogHeader.vue

@@ -2,6 +2,7 @@
 // QDialogHeader — header de la modale façon barre d'app (équivalent QHeader) :
 // le contenu est embarqué dans un <q-toolbar> (min-height 50px, padding 0 12px),
 // avec titre + description + bouton fermer (équivalent DialogHeader/Title/Close).
+// no-padding retire le padding horizontal du toolbar.
 import { inject } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
@@ -14,17 +15,23 @@ interface Props {
   description?: string
   /** Bouton fermer */
   showClose?: boolean
+  /** Supprime le padding du toolbar (contenu collé aux bords) */
+  noPadding?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showClose: true,
+  noPadding: false,
 })
 
 const dialog = inject(qDialogKey, null)
 </script>
 
 <template>
-  <div class="q-dialog__header">
+  <div
+    class="q-dialog__header"
+    :class="{ 'q-dialog__header--no-padding': noPadding }"
+  >
     <q-toolbar>
       <div class="q-dialog__header-text">
         <h2 v-if="title" class="q-dialog__title">{{ title }}</h2>

package/components/QFooter.vue

@@ -16,6 +16,8 @@ interface Props {
   translucent?: boolean | number
   /** Glassmorphism marqué : fond très translucide + flou fort + bordure claire */
   glass?: boolean
+  /** Supprime le padding horizontal (éléments collés aux bords, safe-area conservée) */
+  noPadding?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -23,6 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
   elevated: false,
   reveal: false,
   bordered: false,
+  noPadding: false,
 })
 
 const rootEl = ref<HTMLElement | null>(null)
@@ -71,6 +74,7 @@ onBeforeUnmount(() => {
       'q-footer--reveal-hidden': props.reveal && !visible,
       'q-footer--translucent': props.translucent === true || typeof props.translucent === 'number',
       'q-footer--glass': props.glass,
+      'q-footer--no-padding': props.noPadding,
     }"
     :style="translucentStyle"
   >

package/package.json

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

package/styles/main.css

@@ -582,6 +582,20 @@ html.dark body {
   z-index: 100;
 }
 
+/* no-padding : horizontal collé aux bords — safe-area conservées */
+.q-footer--no-padding {
+  padding: 4px 0;
+  padding-bottom: 0;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: 0;
+  padding-left: constant(safe-area-inset-left);
+  padding-left: env(safe-area-inset-left);
+  padding-right: 0;
+  padding-right: constant(safe-area-inset-right);
+  padding-right: env(safe-area-inset-right);
+}
+
 .q-footer--elevated {
   box-shadow: 0 -2px 4px rgb(0 0 0 / 0.2);
 }
@@ -4644,6 +4658,12 @@ html.dark body {
   justify-content: flex-end; /* actions alignées à droite (défaut) */
 }
 
+.q-bottom-sheet__footer--no-padding .q-toolbar,
+.q-bottom-sheet__header--no-padding .q-toolbar,
+.q-dialog__header--no-padding .q-toolbar {
+  padding: 0; /* no-padding : contenu collé aux bords */
+}
+
 .q-bottom-sheet__panel--dark .q-bottom-sheet__header,
 .q-bottom-sheet__panel--dark .q-bottom-sheet__footer {
   border-color: rgb(255 255 255 / 0.12);
@@ -5847,6 +5867,8 @@ html.dark body {
   max-width: 90vw;
   max-height: 90vh;
   overflow: auto;
+  /* Le scroll du contenu ne doit jamais se chaîner à la page derrière */
+  overscroll-behavior: contain;
   background-color: #fff;
   color: inherit;
   border-radius: var(--q-radius);
@@ -6014,6 +6036,10 @@ html.dark body {
   justify-content: flex-end; /* actions alignées à droite (défaut) */
 }
 
+.q-dialog__footer--no-padding .q-toolbar {
+  padding: 0; /* no-padding : actions collées aux bords */
+}
+
 .q-dialog__body {
   min-height: 0;
   padding: 4px 16px 16px;