@dnax/ui 0.0.11 → 0.0.13

package/components/QBottomSheetFooter.vue

@@ -1,9 +1,27 @@
 <script setup lang="ts">
-// QBottomSheetFooter — zone d'actions en bas du panneau (équivalent DrawerFooter).
+// 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">
-    <slot />
+  <div
+    class="q-bottom-sheet__footer"
+    :class="{ 'q-bottom-sheet__footer--no-padding': noPadding }"
+  >
+    <q-toolbar>
+      <slot />
+    </q-toolbar>
   </div>
 </template>

package/components/QBottomSheetHeader.vue

@@ -1,35 +1,51 @@
 <script setup lang="ts">
-// QBottomSheetHeader — header du panneau : titre + description + bouton fermer (équivalent DrawerHeader/DrawerTitle).
+// 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"
 import { qBottomSheetKey } from "./QBottomSheet.vue"
+import QToolbar from "./QToolbar.vue"
+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-text">
-      <h2 v-if="title" class="q-bottom-sheet__title">{{ title }}</h2>
-      <slot name="title" />
-      <p v-if="description" class="q-bottom-sheet__description">{{ description }}</p>
-      <slot name="description" />
-    </div>
-    <button
-      type="button"
-      class="q-bottom-sheet__close"
-      aria-label="Fermer"
-      @click="sheet?.setOpen(false)"
-    >
-      <Icon :icon="icons.x" aria-hidden="true" />
-    </button>
-    <slot />
+  <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>
+        <slot name="title" />
+        <p v-if="description" class="q-bottom-sheet__description">{{ description }}</p>
+        <slot name="description" />
+      </div>
+      <q-space />
+      <button
+        type="button"
+        class="q-bottom-sheet__close"
+        aria-label="Fermer"
+        @click="sheet?.setOpen(false)"
+      >
+        <Icon :icon="icons.x" aria-hidden="true" />
+      </button>
+      <slot />
+    </q-toolbar>
   </div>
 </template>

package/components/QContainer.vue

@@ -38,6 +38,19 @@ interface Props {
   waveColor?: string
   /** Couleur de la seconde vague (background-effect="wave", défaut violet) */
   waveColor2?: string
+  /** Style glassmorphism : fond translucide + flou d'arrière-plan + bordure claire */
+  glass?: boolean
+  /** URL d'une image de fond — rendue en couche derrière le contenu (cover) */
+  backgroundImage?: string
+  /** Taille de l'image : cover | contain | fill | none | scale-down, ou valeur
+   *  CSS ("50%", "400px" → boîte centrée, image entière visible) */
+  backgroundImageSize?: string
+  /** Anime l'image de fond (Ken Burns indéterminé : zoom + panoramique lents en boucle) */
+  backgroundAnimated?: boolean
+  /** Direction de la boucle Ken Burns : alternate (défaut) | alternate-reverse | normal | reverse */
+  backgroundAnimationDirection?: "alternate" | "alternate-reverse" | "normal" | "reverse"
+  /** Durée d'une itération du Ken Burns (défaut 24s) */
+  backgroundAnimationDuration?: string
   class?: string
 }
 
@@ -47,6 +60,13 @@ const props = withDefaults(defineProps<Props>(), {
   padding: "16px",
 })
 
+const IMG_FIT = new Set(["cover", "contain", "fill", "none", "scale-down"])
+
+// Taille CSS libre ("50%", "400px"…) → boîte centrée (object-fit: contain)
+const imgSized = computed(
+  () => !!props.backgroundImageSize && !IMG_FIT.has(props.backgroundImageSize),
+)
+
 const containerStyle = computed<Record<string, string>>(() => {
   const style: Record<string, string> = {
     "--q-container-max": typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth,
@@ -61,6 +81,18 @@ const containerStyle = computed<Record<string, string>>(() => {
   if (props.auroraColor2) style["--q-aurora-color-2"] = props.auroraColor2
   if (props.waveColor) style["--q-wave-color"] = props.waveColor
   if (props.waveColor2) style["--q-wave-color-2"] = props.waveColor2
+  if (props.backgroundImageSize && IMG_FIT.has(props.backgroundImageSize)) {
+    style["--q-container-img-fit"] = props.backgroundImageSize
+  }
+  if (imgSized.value && props.backgroundImageSize) {
+    style["--q-container-img-size"] = props.backgroundImageSize
+  }
+  if (props.backgroundAnimationDirection) {
+    style["--q-container-kenburns-direction"] = props.backgroundAnimationDirection
+  }
+  if (props.backgroundAnimationDuration) {
+    style["--q-container-kenburns-duration"] = props.backgroundAnimationDuration
+  }
   return style
 })
 
@@ -68,7 +100,8 @@ const containerClasses = computed(() =>
   cn(
     "q-container",
     props.fluid && "q-container--fluid",
-    props.backgroundEffect && "q-container--bg",
+    (props.backgroundEffect || props.backgroundImage) && "q-container--bg",
+    props.glass && "q-container--glass",
     props.class,
   ),
 )
@@ -145,6 +178,19 @@ onBeforeUnmount(() => rootEl.value?.removeEventListener("mousemove", onMouseMove
 
 <template>
   <div ref="rootEl" class="q-container" :class="containerClasses" :style="containerStyle">
+    <img
+      v-if="backgroundImage"
+      :src="backgroundImage"
+      class="q-container__img"
+      :class="{
+        'q-container__img--glass': glass,
+        'q-container__img--animated': backgroundAnimated,
+        'q-container__img--sized': imgSized,
+      }"
+      alt=""
+      aria-hidden="true"
+      draggable="false"
+    />
     <div
       v-if="backgroundEffect"
       class="q-container__bg"

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/QDialogContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// QDialogContent — section de corps de la modale (équivalent QCardSection).
+// Le panneau <q-dialog> est en flex-column (max-height 90vh) : avec `scrollable`,
+// le corps prend l'espace restant et défile en interne, entre un header et un
+// footer fixes (essentiel en mode maximized, où le panneau est overflow: hidden).
+interface Props {
+  /** Rendu scrollable : le corps défile entre header et footer fixes */
+  scrollable?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  scrollable: false,
+})
+</script>
+
+<template>
+  <div class="q-dialog__body" :class="{ 'q-dialog__body--scrollable': scrollable }">
+    <slot />
+  </div>
+</template>

package/components/QDialogFooter.vue

@@ -1,9 +1,27 @@
 <script setup lang="ts">
-// QDialogFooter — zone d'actions en bas de la modale (équivalent DialogFooter).
+// 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">
-    <slot />
+  <div
+    class="q-dialog__footer"
+    :class="{ 'q-dialog__footer--no-padding': noPadding }"
+  >
+    <q-toolbar>
+      <slot />
+    </q-toolbar>
   </div>
 </template>

package/components/QDialogHeader.vue

@@ -1,41 +1,55 @@
 <script setup lang="ts">
-// QDialogHeader — header de la modale : titre + description + bouton fermer (équivalent DialogHeader/Title/Close).
+// 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"
 import { qDialogKey } from "./QDialog.vue"
+import QToolbar from "./QToolbar.vue"
+import QSpace from "./QSpace.vue"
 
 interface Props {
   title?: string
   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-text">
-      <h2 v-if="title" class="q-dialog__title">{{ title }}</h2>
-      <slot name="title" />
-      <p v-if="description" class="q-dialog__description">{{ description }}</p>
-      <slot name="description" />
-    </div>
-    <button
-      v-if="showClose"
-      type="button"
-      class="q-dialog__close"
-      aria-label="Fermer"
-      @click="dialog?.setOpen(false)"
-    >
-      <Icon :icon="icons.x" aria-hidden="true" />
-    </button>
-    <slot />
+  <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>
+        <slot name="title" />
+        <p v-if="description" class="q-dialog__description">{{ description }}</p>
+        <slot name="description" />
+      </div>
+      <q-space />
+      <button
+        v-if="showClose"
+        type="button"
+        class="q-dialog__close"
+        aria-label="Fermer"
+        @click="dialog?.setOpen(false)"
+      >
+        <Icon :icon="icons.x" aria-hidden="true" />
+      </button>
+      <slot />
+    </q-toolbar>
   </div>
 </template>

package/components/QFooter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 // QFooter — barre basse (safe-area bottom appliquée par styles/main.css : .q-app .q-footer)
 import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+import { useFixedBarOffset } from "../lib/fixedLayout"
 
 interface Props {
   /** Fixe la barre en bas de l'écran (sort du flux) */
@@ -15,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>(), {
@@ -22,8 +25,14 @@ const props = withDefaults(defineProps<Props>(), {
   elevated: false,
   reveal: false,
   bordered: false,
+  noPadding: false,
 })
 
+const rootEl = ref<HTMLElement | null>(null)
+
+// Empilement : bottom = hauteur cumulée des footers fixed suivants (si fixed)
+useFixedBarOffset(rootEl, "bar-bottom", () => props.fixed)
+
 const translucentStyle = computed<Record<string, string> | undefined>(() =>
   props.translucent === true || typeof props.translucent === "number"
     ? { "--q-translucent-opacity": `${typeof props.translucent === "number" ? props.translucent : 70}%` }
@@ -55,6 +64,7 @@ onBeforeUnmount(() => {
 
 <template>
   <footer
+    ref="rootEl"
     class="q-footer"
     :class="{
       'q-footer--fixed': fixed,
@@ -64,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/components/QPage.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 // QPage — zone de contenu. Prop `virtual` : active le virtual scroll
 // (rendu fenêtré via QVirtualScroll) quand on a beaucoup d'items.
-// Padding-top automatique quand des barres fixed (q-header / q-back-header)
-// précèdent la page : le contenu reste sous les barres (jamais masqué).
+// Padding-top/padding-bottom automatiques quand des barres fixed
+// (q-header / q-back-header avant, q-footer après) entourent la page : le
+// contenu reste visible, jamais masqué par les barres au scroll.
 import { onBeforeUnmount, onMounted, ref } from "vue"
 import { useFixedBarOffset } from "../lib/fixedLayout"
 import QVirtualScroll from "./QVirtualScroll.vue"

package/components/QTab.vue

@@ -95,9 +95,11 @@ const tabClasses = computed(() =>
     isActive.value && tabs?.activeClass.value,
     (props.noCaps || tabs?.noCaps.value) && "q-tab--no-caps",
     props.disable && "q-tab--disabled",
-    tabs?.inlineLabel.value && "q-tab--inline-label",
+    // Mode replié : le label s'étend à droite de l'icône → forcer l'inline-label
+    // (et neutraliser le padding stacked-icon + le fallback :has) */
+    (tabs?.inlineLabel.value || tabs?.collapseInactive.value) && "q-tab--inline-label",
     // Icône empilée au-dessus du label : padding vertical pour l'aérer du cadre
-    props.icon && !tabs?.inlineLabel.value && "q-tab--stacked-icon",
+    props.icon && !tabs?.inlineLabel.value && !tabs?.collapseInactive.value && "q-tab--stacked-icon",
   ),
 )
 

package/components/QTabs.vue

@@ -16,6 +16,8 @@ export interface QTabContext {
   inlineLabel: Readonly<Ref<boolean>>
   noCaps: Readonly<Ref<boolean>>
   activeClass: Readonly<Ref<string | undefined>>
+  /** Mode replié : seul le tab actif montre icône + label (les autres : icône seule) */
+  collapseInactive: Readonly<Ref<boolean>>
 }
 
 export const qTabsKey: InjectionKey<QTabContext> = Symbol("q-tabs")
@@ -49,6 +51,8 @@ interface Props {
   activeColor?: string
   /** Couleur de fond du tab actif */
   activeBgColor?: string
+  /** Couleur des tabs inactifs (token ou hex — défaut : couleur héritée) */
+  inactiveColor?: string
   /** Classe ajoutée au tab actif */
   activeClass?: string
   /** Couleur de l'indicateur (défaut : activeColor → primary) */
@@ -74,6 +78,19 @@ interface Props {
   contentClass?: string
   /** Anime les tabs au clic (appui scale + pop du tab actif) */
   animated?: boolean
+  /**
+   * Transition du changement de tab (requiert `animated`) :
+   * spring (défaut, rebond léger) | smooth (expo-out velouté, label qui monte)
+   * | elastic (rebond marqué).
+   */
+  transition?: "spring" | "smooth" | "elastic"
+  /** Durée des transitions en ms (indicateur, labels collapse, pop/rise) */
+  transitionDuration?: number
+  /**
+   * Mode replié (pattern mobile) : les tabs inactifs n'affichent que l'icône ;
+   * le tab actif s'étend (icône + label) avec une largeur animée.
+   */
+  collapseInactive?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -81,6 +98,7 @@ const props = withDefaults(defineProps<Props>(), {
   align: "center",
   activeColor: "",
   activeBgColor: "",
+  inactiveColor: "",
   activeClass: "",
   indicatorColor: "",
   dense: false,
@@ -92,6 +110,9 @@ const props = withDefaults(defineProps<Props>(), {
   stretch: false,
   contentClass: "",
   animated: false,
+  transition: "spring",
+  transitionDuration: undefined,
+  collapseInactive: false,
 })
 
 const emit = defineEmits<{ "update:modelValue": [value: string | number | null] }>()
@@ -107,6 +128,7 @@ const indicatorPos = computed<"top" | "bottom" | "none">(() => {
 // shallowRef : on ne veut PAS que Vue dé-unwrappe les Ref contenues dans les enregistrements
 const tabRegs = shallowRef<QTabRegistration[]>([])
 const tick = ref(0)
+const rootEl = ref<HTMLElement | null>(null)
 
 // Recalcule la position de l'indicateur après chaque changement de DOM
 const measure = async () => {
@@ -114,14 +136,25 @@ const measure = async () => {
   tick.value++
 }
 
+// collapse-inactive : le label s'étend/retombe via une transition max-width
+// (0.3s) — à la fin, la largeur du tab actif change encore → re-mesurer,
+// sinon l'indicateur reste calé sur la largeur repliée (mal positionné).
+// transitionend bulle depuis le label jusqu'à la racine : un seul écouteur.
+const onCollapseEnd = (e: Event) => {
+  if ((e as TransitionEvent).propertyName !== "max-width") return
+  measure()
+}
+
 watch([() => props.modelValue, tabRegs], measure)
 
 onMounted(() => {
   measure()
   if (typeof window !== "undefined") window.addEventListener("resize", measure)
+  rootEl.value?.addEventListener("transitionend", onCollapseEnd)
 })
 onBeforeUnmount(() => {
   if (typeof window !== "undefined") window.removeEventListener("resize", measure)
+  rootEl.value?.removeEventListener("transitionend", onCollapseEnd)
 })
 
 const context: QTabContext = {
@@ -136,6 +169,7 @@ const context: QTabContext = {
   inlineLabel: computed(() => props.inlineLabel),
   noCaps: computed(() => props.noCaps),
   activeClass: computed(() => (props.activeClass ? props.activeClass : undefined)),
+  collapseInactive: computed(() => props.collapseInactive),
 }
 
 provide(qTabsKey, context)
@@ -170,6 +204,8 @@ const containerStyle = computed<Record<string, string>>(() => {
   // Token (primary…) → var(--primary) ; sinon valeur directe (hex, rgb…)
   if (props.activeColor) style["--q-tabs-active-color"] = colorValue(props.activeColor)
   if (props.activeBgColor) style["--q-tabs-active-bg"] = colorValue(props.activeBgColor)
+  if (props.inactiveColor) style["--q-tabs-inactive-color"] = colorValue(props.inactiveColor)
+  if (props.transitionDuration) style["--q-tabs-duration"] = `${props.transitionDuration}ms`
   return style
 })
 
@@ -184,12 +220,15 @@ const tabsClasses = computed(() =>
     props.shrink && "q-tabs--shrink",
     props.stretch && "q-tabs--stretch",
     props.animated && "q-tabs--animated",
+    props.animated && `q-tabs--anim-${props.transition}`,
+    props.collapseInactive && "q-tabs--collapse-inactive",
   ),
 )
 </script>
 
 <template>
   <div
+    ref="rootEl"
     class="q-tabs"
     :class="tabsClasses"
     :style="containerStyle"

package/index.ts

@@ -39,6 +39,7 @@ export { default as QCountryPicker } from "./components/QCountryPicker.vue"
 export { default as QDataGrid } from "./components/QDataGrid.vue"
 export { default as QDatePicker } from "./components/QDatePicker.vue"
 export { default as QDialog } from "./components/QDialog.vue"
+export { default as QDialogContent } from "./components/QDialogContent.vue"
 export { default as QDialogFooter } from "./components/QDialogFooter.vue"
 export { default as QDialogHeader } from "./components/QDialogHeader.vue"
 export { default as QDialogProvider } from "./components/QDialogProvider.vue"