@dnax/ui 0.0.21 → 0.0.22

package/components/QAutocomplete.vue

@@ -162,8 +162,11 @@ const sheetTitle = computed(
 
 // — Swipe down pour fermer (mode sheet, opt-in swipe-to-close) —
 const dragging = ref(false)
+const swipeClosing = ref(false)
 let dragStartY = 0
 let dragDy = 0
+let swipeCloseTimer: number | undefined
+
 const canSwipe = computed(() => props.swipeToClose && props.mode === "sheet")
 
 const onDragStart = (e: PointerEvent) => {
@@ -183,16 +186,39 @@ const onDragMove = (e: PointerEvent) => {
 const onDragEnd = () => {
   if (!dragging.value) return
   dragging.value = false
-  if (dragDy > 80) closePopup()
-  else if (sheetRef.value) sheetRef.value.style.transform = ""
+  if (dragDy > 80) {
+    // Au-delà du seuil : on CONTINUE le glissement jusqu'à sortie complète
+    // (translateY(100%)) puis on ferme à la fin de la transition — au lieu de
+    // laisser le panneau revenir en place avant le fade (saut visuel).
+    swipeClosing.value = true
+    if (sheetRef.value) sheetRef.value.style.transform = "translateY(100%)"
+    window.clearTimeout(swipeCloseTimer)
+    swipeCloseTimer = window.setTimeout(() => {
+      swipeClosing.value = false
+      closePopup()
+    }, 400) // fallback si la transition ne se déclenche pas (déjà à 100%, reduced-motion)
+  }
+  else if (sheetRef.value) {
+    // Sous le seuil : retour en douceur à la position initiale
+    sheetRef.value.style.transform = ""
+  }
   dragDy = 0
 }
 
+// Ferme dès que la transition de glissement se termine (plus précis que le timeout)
+const onSheetTransitionEnd = (e: TransitionEvent) => {
+  if (e.propertyName !== "transform" || !swipeClosing.value) return
+  window.clearTimeout(swipeCloseTimer)
+  swipeClosing.value = false
+  closePopup()
+}
+
 const sheetClasses = computed(() => [
   `q-autocomplete__sheet--${props.mode}`,
   modeOptions.value?.class,
   dragging.value && "q-autocomplete__sheet--dragging",
   canSwipe.value && "q-autocomplete__sheet--swipeable",
+  swipeClosing.value && "q-autocomplete__sheet--swipe-closing",
 ])
 
 // — Valeurs des options —
@@ -371,6 +397,7 @@ onMounted(() => {
 })
 onBeforeUnmount(() => {
   if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
+  window.clearTimeout(swipeCloseTimer)
 })
 
 // Verrou du scroll de la page derrière le panneau (modal/sheet)
@@ -480,6 +507,7 @@ watch(open, (v) => {
             role="dialog"
             aria-modal="true"
             :aria-label="sheetTitle"
+            @transitionend="onSheetTransitionEnd"
           >
             <div
               class="q-autocomplete__sheet-header"

package/package.json

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

package/styles/main.css

@@ -3474,6 +3474,12 @@ html.dark body {
   transition: none;
 }
 
+/* fermeture par swipe : le glissement (translateY 100%) gère la sortie —
+   l'animation leave (pop-out 24px) serait un saut depuis la position glissée */
+.q-autocomplete-modal-leave-active .q-autocomplete__sheet--swipe-closing {
+  animation: none;
+}
+
 /* le header est la zone qui attrape le swipe (cursor grab) — seulement si
    swipe-to-close est actif (classe --swipeable) */
 .q-autocomplete__sheet--swipeable .q-autocomplete__sheet-header {