@dnax/ui 0.0.9 → 0.0.11

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/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/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/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

@@ -126,7 +126,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,

package/lib/q.ts

@@ -5,9 +5,9 @@
 //   app.use(QPlugin)  →  accès $q via this.$q / getCurrentInstance().proxy.$q
 // ou import direct :
 //   import { $q } from "@dnax/ui"  →  $q.dialog.open(...)
-import { ref } from "vue"
+import { inject, ref } from "vue"
 import { h } from "vue"
-import type { App, Component, Ref } from "vue"
+import type { App, Component, InjectionKey, Ref } from "vue"
 import { toast } from "vue-sonner"
 import type { ExternalToast } from "vue-sonner"
 import QNotifyToast from "../components/QNotifyToast.vue"
@@ -44,6 +44,39 @@ export interface DialogController {
   _opts: DialogOptions
 }
 
+// — Contexte plugin dialog (pattern Quasar) —
+// Le composant passé à $q.dialog.open({ component }) DOIT contenir un
+// <q-dialog v-model="open" @hide="onDialogHide"> à sa racine ; il pilote
+// l'ouverture via le composable useDialogPluginComponent().
+export interface DialogPluginContext {
+  /** Ref d'ouverture (v-model du <q-dialog> du composant) */
+  open: Ref<boolean>
+  /** Ferme en validant — le résolveur onOK est appelé */
+  onOK: (data?: unknown) => void
+  /** Ferme en annulant — le résolveur onCancel est appelé */
+  onCancel: () => void
+  /** Fermé par backdrop / Échap / × — le résolveur onDismiss est appelé */
+  onHide: () => void
+}
+
+export const qDialogPluginKey: InjectionKey<DialogPluginContext> = Symbol("q-dialog-plugin")
+
+/**
+ * Composable Quasar-style pour les composants passés à $q.dialog.open().
+ * Le composant doit rendre un <q-dialog v-model="open" @hide="onDialogHide">
+ * comme racine. Expose aussi onDialogOK / onDialogCancel pour fermer en validant
+ * ou en annulant, et onDialogHide à brancher sur @hide du q-dialog.
+ */
+export function useDialogPluginComponent() {
+  const ctx = inject(qDialogPluginKey, null)
+  return {
+    open: ctx?.open ?? ref(false),
+    onDialogHide: () => ctx?.onHide(),
+    onDialogOK: (data?: unknown) => ctx?.onOK(data),
+    onDialogCancel: () => ctx?.onCancel(),
+  }
+}
+
 // — Pile de dialogues (singleton module-level, client-side) —
 const dialogs: Ref<DialogController[]> = ref([])
 

package/package.json

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

package/scripts/generate-exports.ts

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

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 {
@@ -6223,6 +6237,58 @@ html.dark body {
   }
 }
 
+/* swipe-* : le panneau glisse depuis un bord et y REVIENT à la fermeture
+   (aller-retour, comme la sidebar) — swipe-left : vient de la droite et y
+   retourne ; swipe-right : vient de la gauche et y retourne. */
+.q-dialog-swipe-left-enter-active,
+.q-dialog-swipe-left-leave-active,
+.q-dialog-swipe-right-enter-active,
+.q-dialog-swipe-right-leave-active {
+  transition: opacity var(--q-dialog-duration-enter, 0.2s) ease;
+}
+
+.q-dialog-swipe-left-enter-active .q-dialog__content,
+.q-dialog-swipe-left-leave-active .q-dialog__content {
+  --q-dialog-swipe-x: 100vw;
+}
+
+.q-dialog-swipe-right-enter-active .q-dialog__content,
+.q-dialog-swipe-right-leave-active .q-dialog__content {
+  --q-dialog-swipe-x: -100vw;
+}
+
+.q-dialog-swipe-left-enter-active .q-dialog__content,
+.q-dialog-swipe-right-enter-active .q-dialog__content {
+  animation: q-dialog-swipe-in var(--q-dialog-duration-enter, 0.3s) cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.q-dialog-swipe-left-leave-active .q-dialog__content,
+.q-dialog-swipe-right-leave-active .q-dialog__content {
+  animation: q-dialog-swipe-out var(--q-dialog-duration-leave, 0.2s) ease-in forwards;
+}
+
+@keyframes q-dialog-swipe-in {
+  from {
+    opacity: 0.6;
+    transform: translateX(var(--q-dialog-swipe-x, 100vw));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes q-dialog-swipe-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(var(--q-dialog-swipe-x, 100vw));
+  }
+}
+
 /* ===== QContainer ===== */
 .q-container {
   width: 100%;