@dnax/ui 0.0.20 → 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 —
@@ -280,6 +306,15 @@ const onClear = () => {
   emit("clear")
 }
 
+// Clear du champ de recherche du panneau (sheet/modal) : vide la recherche
+// sans effacer la sélection, garde le focus dans l'input
+const onSearchClear = () => {
+  query.value = ""
+  emit("update:inputValue", "")
+  activeIndex.value = 0
+  nextTick(() => panelInput.value?.focus())
+}
+
 const isSelected = (opt: any) => getValue(opt) === props.modelValue
 
 // À la perte de focus : si le texte saisi ne correspond exactement à aucune
@@ -362,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)
@@ -471,6 +507,7 @@ watch(open, (v) => {
             role="dialog"
             aria-modal="true"
             :aria-label="sheetTitle"
+            @transitionend="onSheetTransitionEnd"
           >
             <div
               class="q-autocomplete__sheet-header"
@@ -502,6 +539,15 @@ watch(open, (v) => {
                 @input="onInput"
                 @keydown="onKeydown"
               />
+              <button
+                v-if="query !== ''"
+                type="button"
+                class="q-autocomplete__search-clear"
+                aria-label="Effacer la recherche"
+                @mousedown.prevent="onSearchClear"
+              >
+                <Icon :icon="icons.x" aria-hidden="true" />
+              </button>
             </div>
             <div
               ref="popupRef"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.20",
+  "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 {
@@ -3571,6 +3577,27 @@ html.dark body {
 .q-autocomplete__search-input::placeholder {
   color: rgb(0 0 0 / 0.45);
 }
+.q-autocomplete__search-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 0.15);
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.q-autocomplete__search-clear:hover {
+  background: rgb(0 0 0 / 0.25);
+}
+.q-autocomplete__search-clear svg {
+  width: 12px;
+  height: 12px;
+}
 .q-autocomplete__sheet-list {
   overflow-y: auto;
   padding: 6px;