@dnax/ui 0.0.23 → 0.0.26

package/components/QBottomSheet.vue

@@ -16,6 +16,7 @@ export const qBottomSheetKey: InjectionKey<BottomSheetContext> = Symbol("q-botto
 import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from "vue"
 import { cn } from "../lib/utils"
 import { useOverlayBack } from "../lib/overlayBack"
+import { markOverlayClose } from "../lib/closeOverlay"
 
 interface Props {
   /** Ouvert (v-model) */
@@ -33,6 +34,10 @@ interface Props {
   translucent?: boolean | number
   /** Seuil de drag (px) au-delà duquel on ferme */
   dragThreshold?: number
+  /** Animation d'ouverture : slide-up (défaut) | fade | zoom */
+  transition?: "slide-up" | "fade" | "zoom"
+  /** Durée des transitions d'entrée/sortie en ms */
+  transitionDuration?: number
   /** Style du panneau (variables de thème pour les contenus téléportés) */
   contentStyle?: Record<string, string>
 }
@@ -63,6 +68,11 @@ provide<BottomSheetContext>(qBottomSheetKey, {
 // « Retour » navigateur → ferme le bottom sheet au lieu de naviguer
 useOverlayBack(open, () => { open.value = false }, "QBottomSheet")
 
+// v-close : marque l'overlay comme fermable (la directive remonte jusqu'ici)
+const markOverlay = (el: unknown) => {
+  markOverlayClose(el as HTMLElement | null, () => { open.value = false })
+}
+
 // Échap + verrouillage du scroll du body
 const onDocKeydown = (e: KeyboardEvent) => {
   if (e.key === "Escape" && open.value && !props.persistent) open.value = false
@@ -120,6 +130,21 @@ const radiusStyle = computed<Record<string, string> | undefined>(() => {
   return undefined
 })
 
+// Nom de transition : q-bs (défaut slide-up) | q-bs-fade | q-bs-zoom
+const transitionName = computed(() =>
+  props.transition ? `q-bs-${props.transition}` : "q-bs",
+)
+
+// Durée (ms) → variables consommées par les transitions/animations CSS
+const transitionStyle = computed<Record<string, string> | undefined>(() =>
+  props.transitionDuration
+    ? {
+        "--q-bs-duration-enter": `${props.transitionDuration}ms`,
+        "--q-bs-duration-leave": `${props.transitionDuration}ms`,
+      }
+    : undefined,
+)
+
 const panelClasses = computed(() =>
   cn(
     "q-bottom-sheet__panel",
@@ -143,9 +168,10 @@ const translucentStyle = computed<Record<string, string> | undefined>(() =>
   </span>
 
   <Teleport to="body">
-    <Transition name="q-bs">
+    <Transition :name="transitionName" :duration="transitionDuration">
       <div
         v-if="open"
+        :ref="markOverlay"
         class="q-bottom-sheet__overlay"
         @click="!persistent && (open = false)"
       >
@@ -153,7 +179,7 @@ const translucentStyle = computed<Record<string, string> | undefined>(() =>
           ref="panelRef"
           class="q-bottom-sheet__panel"
           :class="panelClasses"
-          :style="[panelStyle, radiusStyle, translucentStyle, props.contentStyle]"
+          :style="[panelStyle, radiusStyle, translucentStyle, transitionStyle, props.contentStyle]"
           role="dialog"
           aria-modal="true"
           @click.stop

package/components/QBottomSheetHeader.vue

@@ -2,8 +2,9 @@
 // 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"
+// Si un CONTENU custom est fourni (slot par défaut, sans title/description),
+// il n'est PAS enveloppé dans un toolbar — l'utilisateur fournit son layout.
+import { Comment, Fragment, Text, computed, inject, onUpdated, ref, useSlots } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { qBottomSheetKey } from "./QBottomSheet.vue"
@@ -17,11 +18,44 @@ interface Props {
   noPadding?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   noPadding: false,
 })
 
 const sheet = inject(qBottomSheetKey, null)
+
+const slots = useSlots()
+
+const refresh = ref(0)
+onUpdated(() => {
+  refresh.value++
+})
+
+function slotHasContent(nodes: unknown[]): boolean {
+  for (const n of nodes as any[]) {
+    if (!n) continue
+    if (n.type === Comment) continue
+    if (n.type === Text) {
+      if (String(n.children ?? "").trim() !== "") return true
+      continue
+    }
+    if (n.type === Fragment) {
+      if (slotHasContent(n.children ?? [])) return true
+      continue
+    }
+    return true
+  }
+  return false
+}
+
+const isStandard = computed(
+  () => props.title !== undefined || props.description !== undefined,
+)
+const hasCustomContent = computed(() => {
+  void refresh.value
+  return slotHasContent(slots.default?.() ?? [])
+})
+const useCustom = computed(() => !isStandard.value && hasCustomContent.value)
 </script>
 
 <template>
@@ -30,7 +64,9 @@ const sheet = inject(qBottomSheetKey, null)
     :class="{ 'q-bottom-sheet__header--no-padding': noPadding }"
     v-bind="$attrs"
   >
-    <q-toolbar>
+    <slot v-if="useCustom" />
+
+    <q-toolbar v-else>
       <div class="q-bottom-sheet__header-text">
         <h2 v-if="title" class="q-bottom-sheet__title">{{ title }}</h2>
         <slot name="title" />

package/components/QBottomSheetProvider.vue

@@ -2,11 +2,19 @@
 // QBottomSheetProvider — rend la pile de bottom sheets programmatiques ($q.bottomSheet).
 // Intégré dans QConfigProvider (rendu automatiquement par le plus externe),
 // utilisable aussi en autonome : <q-bottom-sheet-provider><slot /></q-bottom-sheet-provider>.
+//
+// Deux patterns (comme le plugin dialog) :
+//  - SANS title/description → le composant passé EST le sheet (racine
+//    <q-bottom-sheet v-model="open"> pilotée par useBottomSheetPluginComponent,
+//    open déjà true) — rendu tel quel via QBottomSheetHost.
+//  - AVEC title/description → le provider enveloppe dans un q-bottom-sheet +
+//    header ; le composant fournit le corps et émet @ok/@cancel/@dismiss.
 import { computed, inject } from "vue"
 import { bottomSheetStack, closeBottomSheet } from "../lib/q"
 import type { BottomSheetController } from "../lib/q"
 import { qConfigKey } from "../lib/config"
 import { themeVarsStyle } from "../lib/themeVars"
+import QBottomSheetHost from "./internal/QBottomSheetHost.vue"
 
 const sheets = bottomSheetStack
 
@@ -31,32 +39,49 @@ const handleDismiss = (ctrl: BottomSheetController) => {
 
 <template>
   <slot />
-  <q-bottom-sheet
-    v-for="(sheet, idx) in sheets"
-    :key="idx"
-    :model-value="true"
-    :persistent="sheet._opts.persistent"
-    :width="sheet._opts.width"
-    :height="sheet._opts.height"
-    :rounded="sheet._opts.rounded"
-    :dark="sheet._opts.dark"
-    :translucent="sheet._opts.translucent"
-    :drag-threshold="sheet._opts.dragThreshold"
-    :content-style="sheetThemeStyle"
-    @update:model-value="(v: boolean) => !v && handleDismiss(sheet)"
-  >
-    <q-bottom-sheet-header
-      v-if="sheet._opts.title || sheet._opts.description"
-      :title="sheet._opts.title"
-      :description="sheet._opts.description"
-    />
-    <component
-      :is="sheet._opts.component"
-      v-bind="sheet._opts.componentProps"
+  <template v-for="(sheet, idx) in sheets" :key="idx">
+    <!-- Pattern auto : le composant est lui-même un <q-bottom-sheet> -->
+    <q-bottom-sheet-host
+      v-if="!sheet._opts.title && !sheet._opts.description"
+      :ctrl="sheet"
+      :on-ok="(data?: unknown) => handleOk(sheet, data)"
+      :on-cancel="() => handleCancel(sheet)"
+      :on-hide="() => handleDismiss(sheet)"
       @ok="(data?: unknown) => handleOk(sheet, data)"
       @cancel="handleCancel(sheet)"
       @dismiss="handleDismiss(sheet)"
       @close="handleDismiss(sheet)"
     />
-  </q-bottom-sheet>
+    <!-- Pattern enveloppe : le provider rend le panneau + header, le composant
+         fournit le corps (events legacy ok/cancel/dismiss/close) -->
+    <q-bottom-sheet
+      v-else
+      :model-value="true"
+      :persistent="sheet._opts.persistent"
+      :width="sheet._opts.width"
+      :height="sheet._opts.height"
+      :rounded="sheet._opts.rounded"
+      :dark="sheet._opts.dark"
+      :translucent="sheet._opts.translucent"
+      :drag-threshold="sheet._opts.dragThreshold"
+      :transition="sheet._opts.transition"
+      :transition-duration="sheet._opts.transitionDuration"
+      :content-style="sheetThemeStyle"
+      @update:model-value="(v: boolean) => !v && handleDismiss(sheet)"
+    >
+      <q-bottom-sheet-header
+        v-if="sheet._opts.title || sheet._opts.description"
+        :title="sheet._opts.title"
+        :description="sheet._opts.description"
+      />
+      <component
+        :is="sheet._opts.component"
+        v-bind="sheet._opts.componentProps"
+        @ok="(data?: unknown) => handleOk(sheet, data)"
+        @cancel="handleCancel(sheet)"
+        @dismiss="handleDismiss(sheet)"
+        @close="handleDismiss(sheet)"
+      />
+    </q-bottom-sheet>
+  </template>
 </template>

package/components/QDialog.vue

@@ -17,6 +17,7 @@ import { cn } from "../lib/utils"
 import { radiusStyle, useRadius } from "../lib/useComponentProps"
 import type { RadiusProp } from "../lib/useComponentProps"
 import { useOverlayBack } from "../lib/overlayBack"
+import { markOverlayClose } from "../lib/closeOverlay"
 
 type DialogPosition = "standard" | "top" | "right" | "bottom" | "left"
 
@@ -88,6 +89,11 @@ const onDocKeydown = (e: KeyboardEvent) => {
 // « Retour » navigateur → ferme le dialog au lieu de naviguer
 useOverlayBack(open, () => { open.value = false }, "QDialog")
 
+// v-close : marque l'overlay comme fermable (la directive remonte jusqu'ici)
+const markOverlay = (el: unknown) => {
+  markOverlayClose(el as HTMLElement | null, () => { open.value = false })
+}
+
 // — 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
@@ -169,6 +175,7 @@ const durationStyle = computed<StyleValue>(() =>
     <Transition :name="transitionName" @after-enter="emit('show')" @after-leave="emit('hide')">
       <div
         v-if="open"
+        :ref="markOverlay"
         class="q-dialog__overlay"
         :class="overlayClasses"
         :style="durationStyle"

package/components/QDialogHeader.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 // 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"
+// avec titre + description + bouton fermer OPT-IN (show-close).
+// Si un CONTENU custom est fourni (slot par défaut, sans title/description/
+// show-close), il n'est PAS enveloppé dans un toolbar — l'utilisateur fournit
+// son propre layout (ex. <q-toolbar>) directement dans la barre.
+import { Comment, Fragment, Text, computed, inject, onUpdated, ref, useSlots } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { qDialogKey } from "./QDialog.vue"
@@ -13,18 +15,55 @@ import QSpace from "./QSpace.vue"
 interface Props {
   title?: string
   description?: string
-  /** Bouton fermer */
+  /** Affiche le bouton fermer (opt-in — sans la prop, aucun ×) */
   showClose?: boolean
   /** Supprime le padding du toolbar (contenu collé aux bords) */
   noPadding?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  showClose: true,
+  showClose: false,
   noPadding: false,
 })
 
 const dialog = inject(qDialogKey, null)
+
+const slots = useSlots()
+
+// Force le recalcul de la détection à chaque update (le contenu du slot peut
+// changer dynamiquement côté parent)
+const refresh = ref(0)
+onUpdated(() => {
+  refresh.value++
+})
+
+function slotHasContent(nodes: unknown[]): boolean {
+  for (const n of nodes as any[]) {
+    if (!n) continue
+    if (n.type === Comment) continue
+    if (n.type === Text) {
+      if (String(n.children ?? "").trim() !== "") return true
+      continue
+    }
+    if (n.type === Fragment) {
+      if (slotHasContent(n.children ?? [])) return true
+      continue
+    }
+    return true
+  }
+  return false
+}
+
+// Mode « custom » : pas de title/description/close et un contenu de slot → on
+// rend le slot directement (sans toolbar d'enveloppe)
+const isStandard = computed(
+  () => props.title !== undefined || props.description !== undefined || props.showClose,
+)
+const hasCustomContent = computed(() => {
+  void refresh.value
+  return slotHasContent(slots.default?.() ?? [])
+})
+const useCustom = computed(() => !isStandard.value && hasCustomContent.value)
 </script>
 
 <template>
@@ -33,7 +72,11 @@ const dialog = inject(qDialogKey, null)
     :class="{ 'q-dialog__header--no-padding': noPadding }"
     v-bind="$attrs"
   >
-    <q-toolbar>
+    <!-- Contenu custom : l'utilisateur fournit son propre layout (q-toolbar…) -->
+    <slot v-if="useCustom" />
+
+    <!-- Mode standard : toolbar embarqué (title / description / close) -->
+    <q-toolbar v-else>
       <div class="q-dialog__header-text">
         <h2 v-if="title" class="q-dialog__title">{{ title }}</h2>
         <slot name="title" />

package/components/QPage.vue

@@ -31,19 +31,6 @@ interface Props {
 
 defineProps<Props>()
 
-// Slots typés (mode virtual) : même contrat que QVirtualScroll
-// (item, index, ref pour la mesure ; before/after pour les zones sticky)
-defineSlots<{
-  default?: (props: { item: any; index: number; ref: (el: unknown) => void }) => any
-  before?: () => any
-  after?: () => any
-}>()
-
-// L'inférence du scope ne traverse pas la branche v-if → cast explicite
-// (le scope reçu EST le scope du QVirtualScroll)
-type VirtualScope = { item: any; index: number; ref: (el: unknown) => void }
-const forwardScope = (scope: unknown) => scope as VirtualScope
-
 const rootEl = ref<HTMLElement | null>(null)
 // ref fonctionnel : sur un élément → l'élément ; sur q-virtual-scroll (composant) → .$el
 const setRoot = (el: unknown) => {
@@ -71,7 +58,7 @@ useFixedBarOffset(rootEl, "page")
     v-bind="$attrs"
   >
     <template #default="scope">
-      <slot v-bind="forwardScope(scope)" />
+      <slot v-bind="scope" />
     </template>
     <template #before>
       <slot name="before" />

package/components/QTabs.vue

@@ -24,7 +24,7 @@ export const qTabsKey: InjectionKey<QTabContext> = Symbol("q-tabs")
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch } from "vue"
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch } from "vue"
 import { cva } from "class-variance-authority"
 import { cn } from "../lib/utils"
 import { colorValue } from "../lib/colors"
@@ -117,6 +117,24 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{ "update:modelValue": [value: string | number | null] }>()
 
+// — Mode non-contrôlé : sans v-model (pas de listener update:modelValue), QTabs
+// maintient son propre état interne — indispensable pour QRouteTab (le tab
+// actif suit la route sans v-model parent) et pour tout usage sans v-model.
+const instance = getCurrentInstance()
+const controlled = computed(
+  () => !!instance && "onUpdate:modelValue" in (instance.vnode.props ?? {}),
+)
+const internal = ref<string | number | null>(null)
+
+const activeName = computed<string | number | null>(() =>
+  controlled.value ? (props.modelValue ?? null) : internal.value,
+)
+
+const setActive = (name: string | number) => {
+  if (controlled.value) emit("update:modelValue", name)
+  else internal.value = name
+}
+
 // Position effective de l'indicateur : "top" | "bottom" (défaut) | "none" (masqué)
 const indicatorPos = computed<"top" | "bottom" | "none">(() => {
   const p = props.switchIndicatorPosition
@@ -145,7 +163,7 @@ const onCollapseEnd = (e: Event) => {
   measure()
 }
 
-watch([() => props.modelValue, tabRegs], measure)
+watch([activeName, tabRegs], measure)
 
 onMounted(() => {
   measure()
@@ -158,8 +176,8 @@ onBeforeUnmount(() => {
 })
 
 const context: QTabContext = {
-  activeName: computed(() => props.modelValue),
-  setActive: (name) => emit("update:modelValue", name),
+  activeName,
+  setActive,
   register: (tab) => {
     tabRegs.value = [...tabRegs.value, tab]
   },
@@ -175,7 +193,7 @@ const context: QTabContext = {
 provide(qTabsKey, context)
 
 const activeTabEl = computed(
-  () => tabRegs.value.find((t) => t.name === props.modelValue)?.el.value ?? null,
+  () => tabRegs.value.find((t) => t.name === activeName.value)?.el.value ?? null,
 )
 
 const indicatorStyle = computed<Record<string, string>>(() => {

package/components/internal/QBottomSheetHost.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// QBottomSheetHost — host interne du $q.bottomSheet (pattern Quasar, comme
+// QDialogHost) : rend le composant passé tel quel et lui fournit le contexte
+// plugin. Le composant DOIT contenir un <q-bottom-sheet v-model="open"
+// @hide="onDialogHide"> comme racine, piloté via
+// useBottomSheetPluginComponent() — open est déjà true (pas de v-model à
+// mettre). À la fermeture (@hide) ou via onDialogOK / onDialogCancel, les
+// résolveurs sont appelés et l'entrée retirée.
+import { provide, ref } from "vue"
+import { qBottomSheetPluginKey } from "../../lib/q"
+import type { BottomSheetController } from "../../lib/q"
+
+const props = defineProps<{
+  ctrl: BottomSheetController
+  onOk: (data?: unknown) => void
+  onCancel: () => void
+  onHide: () => void
+}>()
+
+const open = ref(true)
+
+provide(qBottomSheetPluginKey, {
+  open,
+  onDialogOK: (data?: unknown) => props.onOk(data),
+  onDialogCancel: () => props.onCancel(),
+  onDialogHide: () => props.onHide(),
+})
+
+// Le composant émet aussi les events legacy (ok/cancel/dismiss/close)
+const emit = defineEmits<{
+  ok: [data?: unknown]
+  cancel: []
+  dismiss: []
+  close: []
+}>()
+</script>
+
+<template>
+  <component
+    :is="props.ctrl._opts.component"
+    v-bind="props.ctrl._opts.componentProps"
+    @ok="emit('ok', $event)"
+    @cancel="emit('cancel')"
+    @dismiss="emit('dismiss')"
+    @close="emit('close')"
+  />
+</template>

package/index.ts

@@ -128,12 +128,13 @@ export { default as QUploader } from "./components/QUploader.vue"
 export { default as QVideo } from "./components/QVideo.vue"
 export { default as QVirtualScroll } from "./components/QVirtualScroll.vue"
 
-export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent } from "./lib/q"
+export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent, useBottomSheetPluginComponent } from "./lib/q"
 export type {
   DialogOptions,
   DialogController,
   BottomSheetOptions,
   BottomSheetController,
+  BottomSheetPluginContext,
   NotifyOptions,
   NotifyController,
 } from "./lib/q"
@@ -152,3 +153,4 @@ export {
   installOverlayBackHandler,
 } from "./lib/overlayBack"
 export type { OverlayHandle } from "./lib/overlayBack"
+export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"

package/lib/closeOverlay.ts

@@ -0,0 +1,48 @@
+// v-close — directive : ferme l'overlay (dialog, bottom sheet, …) le plus
+// proche au clic (équivalent Quasar v-close-popup).
+// Les overlays s'enregistrent en posant el.__qClose sur leur élément racine
+// (markOverlayClose) ; la directive remonte depuis l'élément cliqué.
+
+interface QCloseMarker extends HTMLElement {
+  __qClose?: () => void
+  __qVClose?: () => void
+}
+
+/** Marque un élément comme « overlay fermable » (posé par QDialog, QBottomSheet…) */
+export function markOverlayClose(el: HTMLElement | null, close: () => void) {
+  if (!el) return
+  ;(el as QCloseMarker).__qClose = close
+}
+
+/** Remonte jusqu'à l'overlay le plus proche portant __qClose */
+function closestOverlay(el: Element): QCloseMarker | null {
+  let node: Element | null = el
+  while (node) {
+    const marker = node as QCloseMarker
+    if (typeof marker.__qClose === "function") return marker
+    node = node.parentElement
+  }
+  return null
+}
+
+/** Ferme l'overlay parent le plus proche de `el` */
+export function closeParentOverlay(el: Element) {
+  closestOverlay(el)?.__qClose?.()
+}
+
+/** Directive : <q-btn v-close> → ferme le dialog/sheet parent au clic.
+ *  v-close="false" désactive la fermeture. */
+export const vClose = {
+  mounted(el: HTMLElement, binding: { value?: unknown }) {
+    const onClick = () => {
+      if (binding.value === false) return
+      closeParentOverlay(el)
+    }
+    el.addEventListener("click", onClick)
+    ;(el as QCloseMarker).__qVClose = onClick
+  },
+  unmounted(el: HTMLElement) {
+    const fn = (el as QCloseMarker).__qVClose
+    if (fn) el.removeEventListener("click", fn)
+  },
+}

package/lib/q.ts

@@ -112,7 +112,7 @@ export interface BottomSheetOptions {
   component: Component | string
   /** Props passées au composant */
   componentProps?: Record<string, any>
-  /** Titre affiché par QBottomSheetHeader (optionnel) */
+  /** Titre affiché par QBottomSheetHeader (optionnel — sinon le composant rend son propre header) */
   title?: string
   description?: string
   /** Largeur max du panneau (défaut : 640px) */
@@ -128,8 +128,28 @@ export interface BottomSheetOptions {
   persistent?: boolean
   /** Seuil de drag (px) au-delà duquel on ferme */
   dragThreshold?: number
+  /** Animation d'ouverture : slide-up (défaut) | fade | zoom */
+  transition?: "slide-up" | "fade" | "zoom"
+  /** Durée des transitions d'entrée/sortie en ms */
+  transitionDuration?: number
 }
 
+/**
+ * Contexte plugin bottom sheet — fourni par QBottomSheetHost quand le composant
+ * passé à $q.bottomSheet.open() est lui-même un <q-bottom-sheet> (pattern
+ * Quasar, identique à $q.dialog) : open est déjà true, pas besoin de v-model.
+ */
+export interface BottomSheetPluginContext {
+  /** Ref d'ouverture (v-model du <q-bottom-sheet> du composant, déjà true) */
+  open: Ref<boolean>
+  onDialogOK: (data?: unknown) => void
+  onDialogCancel: () => void
+  onDialogHide: () => void
+}
+
+export const qBottomSheetPluginKey: InjectionKey<BottomSheetPluginContext> =
+  Symbol("q-bottom-sheet-plugin")
+
 export interface BottomSheetController {
   onOK: (cb: (data?: any) => void | Promise<void>) => BottomSheetController
   onCancel: (cb: () => void | Promise<void>) => BottomSheetController
@@ -142,6 +162,22 @@ export interface BottomSheetController {
   _opts: BottomSheetOptions
 }
 
+/**
+ * Composable Quasar-style pour les composants passés à $q.bottomSheet.open() :
+ * le composant rend un <q-bottom-sheet v-model="open" @hide="onDialogHide">
+ * comme racine. open est déjà true (le panneau s'affiche à l'ouverture), et
+ * onDialogOK / onDialogCancel résolvent les callbacks du controller.
+ */
+export function useBottomSheetPluginComponent() {
+  const ctx = inject(qBottomSheetPluginKey, null)
+  return {
+    open: ctx?.open ?? ref(false),
+    onDialogHide: () => ctx?.onDialogHide(),
+    onDialogOK: (data?: unknown) => ctx?.onDialogOK(data),
+    onDialogCancel: () => ctx?.onDialogCancel(),
+  }
+}
+
 // — Pile de bottom sheets (singleton module-level, client-side) —
 const bottomSheets: Ref<BottomSheetController[]> = ref([])
 

package/module.ts

@@ -85,5 +85,19 @@ export default defineNuxtPlugin((nuxtApp) => {
 `,
       })
     }
+
+    // Directive globale v-close : <q-btn v-close> ferme le dialog/sheet parent
+    addPluginTemplate({
+      filename: "dnax-ui-directives.mjs",
+      mode: "client",
+      getContents: () => `
+import { defineNuxtPlugin } from "#imports"
+import { vClose } from "@dnax/ui/runtime"
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive("close", vClose)
+})
+`,
+    })
   },
 })

package/package.json

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

package/scripts/generate-exports.ts

@@ -26,12 +26,13 @@ const exports = files
 
 // Exports manuels (composables / helpers) — conservés à chaque régénération
 const manualExports = `
-export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent } from "./lib/q"
+export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent, useBottomSheetPluginComponent } from "./lib/q"
 export type {
   DialogOptions,
   DialogController,
   BottomSheetOptions,
   BottomSheetController,
+  BottomSheetPluginContext,
   NotifyOptions,
   NotifyController,
 } from "./lib/q"
@@ -50,6 +51,7 @@ export {
   installOverlayBackHandler,
 } from "./lib/overlayBack"
 export type { OverlayHandle } from "./lib/overlayBack"
+export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
 `
 
 await Bun.write(indexFile, `${exports}\n${manualExports}`)

package/styles/main.css

@@ -4868,25 +4868,37 @@ html.dark body {
   border-color: rgb(255 255 255 / 0.12);
 }
 
-/* — transitions (slide vertical type vaul) — */
+/* — transitions (slide vertical type vaul) — durées configurables via
+   transition-duration (vars --q-bs-duration-enter/leave) */
 .q-bs-enter-active,
-.q-bs-leave-active {
-  transition: opacity 0.25s ease;
+.q-bs-leave-active,
+.q-bs-fade-enter-active,
+.q-bs-fade-leave-active,
+.q-bs-zoom-enter-active,
+.q-bs-zoom-leave-active {
+  transition: opacity var(--q-bs-duration-enter, 0.25s) ease;
+}
+.q-bs-leave-active,
+.q-bs-fade-leave-active,
+.q-bs-zoom-leave-active {
+  transition: opacity var(--q-bs-duration-leave, 0.2s) ease;
 }
-
 .q-bs-enter-from,
-.q-bs-leave-to {
+.q-bs-leave-to,
+.q-bs-fade-enter-from,
+.q-bs-fade-leave-to,
+.q-bs-zoom-enter-from,
+.q-bs-zoom-leave-to {
   opacity: 0;
 }
 
+/* slide-up (défaut) : le panneau glisse depuis le bas */
 .q-bs-enter-active .q-bottom-sheet__panel {
-  animation: q-bs-in 0.25s ease;
+  animation: q-bs-in var(--q-bs-duration-enter, 0.25s) ease;
 }
-
 .q-bs-leave-active .q-bottom-sheet__panel {
-  animation: q-bs-out 0.2s ease forwards;
+  animation: q-bs-out var(--q-bs-duration-leave, 0.2s) ease forwards;
 }
-
 @keyframes q-bs-in {
   from {
     transform: translateY(100%);
@@ -4895,13 +4907,36 @@ html.dark body {
     transform: none;
   }
 }
-
 @keyframes q-bs-out {
   to {
     transform: translateY(100%);
   }
 }
 
+/* zoom : le panneau scale légèrement depuis le centre-bas */
+.q-bs-zoom-enter-active .q-bottom-sheet__panel {
+  animation: q-bs-zoom-in var(--q-bs-duration-enter, 0.25s) ease;
+}
+.q-bs-zoom-leave-active .q-bottom-sheet__panel {
+  animation: q-bs-zoom-out var(--q-bs-duration-leave, 0.2s) ease forwards;
+}
+@keyframes q-bs-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes q-bs-zoom-out {
+  to {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+}
+
 /* ===== QBackHeader ===== */
 .q-back-header {
   position: relative;