@dnax/ui 0.0.10 → 0.0.12

package/components/QBottomSheetFooter.vue

@@ -1,9 +1,14 @@
 <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).
+import QToolbar from "./QToolbar.vue"
 </script>
 
 <template>
   <div class="q-bottom-sheet__footer">
-    <slot />
+    <q-toolbar>
+      <slot />
+    </q-toolbar>
   </div>
 </template>

package/components/QBottomSheetHeader.vue

@@ -1,9 +1,13 @@
 <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).
 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
@@ -16,20 +20,23 @@ const sheet = inject(qBottomSheetKey, null)
 
 <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 />
+    <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

@@ -40,8 +40,8 @@ interface Props {
   contentStyle?: StyleValue
   noBackdropDismiss?: boolean
   noEscDismiss?: boolean
-  /** Animation : fade | zoom | slide-up | slide-down | slide-left | slide-right (sinon basée sur position) */
-  transition?: "fade" | "zoom" | "slide-up" | "slide-down" | "slide-left" | "slide-right"
+  /** Animation : fade | zoom | slide-up | slide-down | slide-left | slide-right | swipe-left | swipe-right (sinon basée sur position) */
+  transition?: "fade" | "zoom" | "slide-up" | "slide-down" | "slide-left" | "slide-right" | "swipe-left" | "swipe-right"
   /** Durée des transitions d'entrée/sortie en ms (défaut CSS : ~200ms entrée, ~150ms sortie) */
   transitionDuration?: number
 }

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,14 @@
 <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).
+import QToolbar from "./QToolbar.vue"
 </script>
 
 <template>
   <div class="q-dialog__footer">
-    <slot />
+    <q-toolbar>
+      <slot />
+    </q-toolbar>
   </div>
 </template>

package/components/QDialogHeader.vue

@@ -1,9 +1,13 @@
 <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).
 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
@@ -21,21 +25,24 @@ const dialog = inject(qDialogKey, null)
 
 <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 />
+    <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/QDialogProvider.vue

@@ -2,26 +2,28 @@
 // QDialogProvider — rend la pile de dialogues programmatiques ($q.dialog).
 // Intégré dans QConfigProvider (rendu automatiquement par le plus externe),
 // mais utilisable aussi en autonome : <q-dialog-provider><slot /></q-dialog-provider>.
-// Chaque entrée de la pile est rendue dans un <q-dialog> ; quand le composant
-// émet ok / cancel / dismiss / close, le résolveur correspondant est appelé
+//
+// Pattern Quasar : le composant passé à $q.dialog.open({ component }) DOIT contenir
+// un <q-dialog v-model="open" @hide="onDialogHide"> à sa racine, piloté via le
+// composable useDialogPluginComponent() (exporté par @dnax/ui). Le provider fournit
+// le contexte (open, onOK, onCancel) via QDialogHost ; à la fermeture (backdrop,
+// Échap, ×, onDialogOK, onDialogCancel), le résolveur correspondant est appelé
 // puis l'entrée est retirée de la pile.
 import { computed, inject } from "vue"
 import { dialogStack, closeDialog } from "../lib/q"
 import type { DialogController } from "../lib/q"
 import { qConfigKey } from "../lib/config"
 import { themeVarsStyle } from "../lib/themeVars"
+import QDialogHost from "./internal/QDialogHost.vue"
 
 const dialogs = dialogStack
 
 const config = inject(qConfigKey, null)
 
-// Les dialogs sont téléportés au body (QDialog) : on repose les tokens du thème
-// sur leur contenu pour qu'ils héritent des couleurs/radius du provider.
+// Les dialogs sont téléportés au body (QDialog du composant passé) : on repose
+// les tokens du thème sur le host pour qu'ils héritent des couleurs/radius du provider.
 const dialogThemeStyle = themeVarsStyle(computed(() => config?.theme.value ?? {}))
 
-const contentStyle = (ctrl: DialogController) =>
-  typeof ctrl._opts.fullscreen === "string" ? { width: ctrl._opts.fullscreen } : undefined
-
 const handleOk = (ctrl: DialogController, data?: unknown) => {
   ctrl._resolvers.ok?.(data)
   closeDialog(ctrl)
@@ -38,28 +40,20 @@ const handleDismiss = (ctrl: DialogController) => {
 
 <template>
   <slot />
-  <q-dialog
+  <div
     v-for="(dialog, idx) in dialogs"
     :key="idx"
-    :model-value="true"
-    :maximized="dialog._opts.fullscreen === true"
-    :content-style="[contentStyle(dialog), dialogThemeStyle]"
-    :content-class="dialog._opts.class"
-    :persistent="dialog._opts.persistent"
-    @update:model-value="(v: boolean) => !v && handleDismiss(dialog)"
+    :style="dialogThemeStyle"
   >
-    <q-dialog-header
-      v-if="dialog._opts.title || dialog._opts.description"
-      :title="dialog._opts.title"
-      :description="dialog._opts.description"
-    />
-    <component
-      :is="dialog._opts.component"
-      v-bind="dialog._opts.componentProps"
+    <q-dialog-host
+      :ctrl="dialog"
+      :on-ok="(data?: unknown) => handleOk(dialog, data)"
+      :on-cancel="() => handleCancel(dialog)"
+      :on-hide="() => handleDismiss(dialog)"
       @ok="(data?: unknown) => handleOk(dialog, data)"
-      @cancel="handleCancel(dialog)"
-      @dismiss="handleDismiss(dialog)"
-      @close="handleDismiss(dialog)"
+      @cancel="() => handleCancel(dialog)"
+      @dismiss="() => handleDismiss(dialog)"
+      @close="() => handleDismiss(dialog)"
     />
-  </q-dialog>
+  </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) */
@@ -24,6 +25,11 @@ const props = withDefaults(defineProps<Props>(), {
   bordered: 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 +61,7 @@ onBeforeUnmount(() => {
 
 <template>
   <footer
+    ref="rootEl"
     class="q-footer"
     :class="{
       'q-footer--fixed': fixed,

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/components/internal/QDialogHost.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// QDialogHost — host interne du $q.dialog : rend le composant passé tel quel et
+// lui fournit le contexte plugin (pattern Quasar). Le composant passé DOIT
+// contenir un <q-dialog v-model="open" @hide="onDialogHide"> comme racine, piloté
+// via useDialogPluginComponent(). À la fermeture (backdrop/Échap/× → @hide), ou
+// via onDialogOK / onDialogCancel, les résolveurs sont appelés et l'entrée retirée.
+import { provide, ref } from "vue"
+import { qDialogPluginKey } from "../../lib/q"
+import type { DialogController } from "../../lib/q"
+
+const props = defineProps<{
+  ctrl: DialogController
+  onOk: (data?: unknown) => void
+  onCancel: () => void
+  onHide: () => void
+}>()
+
+const open = ref(true)
+
+provide(qDialogPluginKey, {
+  open,
+  onOK: (data?: unknown) => props.onOk(data),
+  onCancel: () => props.onCancel(),
+  onHide: () => 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

@@ -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"
@@ -126,7 +127,7 @@ 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 } from "./lib/q"
+export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent } from "./lib/q"
 export type {
   DialogOptions,
   DialogController,