@dnax/ui 0.0.21 → 0.0.23

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

@@ -31,6 +31,19 @@ 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) => {
@@ -58,7 +71,7 @@ useFixedBarOffset(rootEl, "page")
     v-bind="$attrs"
   >
     <template #default="scope">
-      <slot v-bind="scope" />
+      <slot v-bind="forwardScope(scope)" />
     </template>
     <template #before>
       <slot name="before" />

package/components/QRouteTab.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+// QRouteTab — QTab lié à la route (pattern Quasar QRouteTab) :
+// <q-route-tab to="/docs/components/tabs" label="Tabs" exact />
+// Le tab devient actif automatiquement quand la route courante matche `to`
+// (le v-model du QTabs suit), et cliquer navigue vers la destination.
+import { computed, inject, watch } from "vue"
+import type { RouteLocationRaw } from "vue-router"
+import { useRoute, useRouter } from "vue-router"
+import QTab from "./QTab.vue"
+import { qTabsKey } from "./QTabs.vue"
+
+let seq = 0
+
+interface Props {
+  /** Destination de route (même API que RouterLink `to`) */
+  to: RouteLocationRaw
+  /** Match exact : path (et hash) identiques — sinon préfixe de chemin */
+  exact?: boolean
+  /** remplace l'entrée d'historique au clic (router.replace) */
+  replace?: boolean
+  // — API QTab (transmise) —
+  name?: string | number
+  icon?: string
+  label?: string | number
+  alert?: boolean | string
+  alertIcon?: string
+  count?: number
+  countColor?: string
+  countMax?: number
+  noCaps?: boolean
+  tabindex?: string | number
+  disable?: boolean
+  contentClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  exact: false,
+  replace: false,
+  alert: false,
+  noCaps: false,
+  disable: false,
+  countMax: 99,
+})
+
+const tabs = inject(qTabsKey, null)
+
+const resolvedName = props.name ?? `rt_${seq++}`
+
+// Router optionnel : sans app router, QRouteTab se comporte comme un QTab
+let router: ReturnType<typeof useRouter> | undefined
+let route: ReturnType<typeof useRoute> | undefined
+try {
+  router = useRouter()
+  route = useRoute()
+}
+catch {
+  router = undefined
+  route = undefined
+}
+
+const matches = computed(() => {
+  if (!router || !route || !props.to) return false
+  const resolved = router.resolve(props.to)
+  if (props.exact) {
+    return resolved.path === route.path && resolved.hash === route.hash
+  }
+  // non-exact : la route courante commence par le path de `to` (préfixe de segment)
+  const prefix = resolved.path.endsWith("/") ? resolved.path : resolved.path + "/"
+  return route.path === resolved.path || route.path.startsWith(prefix)
+})
+
+// La route change → le tab qui matche devient actif (sync du v-model QTabs)
+watch(
+  () => route?.fullPath,
+  () => {
+    if (matches.value) tabs?.setActive(resolvedName)
+  },
+  { immediate: true },
+)
+
+const onClick = () => {
+  if (props.disable || !router) return
+  if (props.replace) router.replace(props.to)
+  else router.push(props.to)
+}
+</script>
+
+<template>
+  <q-tab
+    :name="resolvedName"
+    :label="label"
+    :icon="icon"
+    :alert="alert"
+    :alert-icon="alertIcon"
+    :count="count"
+    :count-color="countColor"
+    :count-max="countMax"
+    :no-caps="noCaps"
+    :tabindex="tabindex"
+    :disable="disable"
+    :content-class="contentClass"
+    @click="onClick"
+  >
+    <slot />
+  </q-tab>
+</template>

package/components/QVirtualScroll.vue

@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 defineSlots<{
-  default?: (props: { item: any; index: number; ref: (el: Element | null) => void }) => any
+  default?: (props: { item: any; index: number; ref: (el: unknown) => void }) => any
   before?: () => any
   after?: () => any
 }>()
@@ -49,7 +49,7 @@ const scrollTop = ref(0)
 // — Hauteurs mesurées par index (celles non mesurées → taille estimée) —
 const itemSizes = new Map<number, number>()
 const observers = new Map<number, ResizeObserver>()
-const refFns = new Map<number, (el: Element | null) => void>()
+const refFns = new Map<number, (el: unknown) => void>()
 
 // Préfixe cumulé des offsets (reconstruit quand les tailles changent, pas au scroll)
 let prefix: number[] = [0]
@@ -103,7 +103,7 @@ const observeItem = (index: number, el: Element | null) => {
 const itemRef = (index: number) => {
   let fn = refFns.get(index)
   if (!fn) {
-    fn = (el) => observeItem(index, el)
+    fn = (el: unknown) => observeItem(index, el as Element | null)
     refFns.set(index, fn)
   }
   return fn

package/index.ts

@@ -91,6 +91,7 @@ export { default as QRadio } from "./components/QRadio.vue"
 export { default as QRating } from "./components/QRating.vue"
 export { default as QReorder } from "./components/QReorder.vue"
 export { default as QRollingText } from "./components/QRollingText.vue"
+export { default as QRouteTab } from "./components/QRouteTab.vue"
 export { default as QRow } from "./components/QRow.vue"
 export { default as QSafeArea } from "./components/QSafeArea.vue"
 export { default as QScrollArea } from "./components/QScrollArea.vue"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "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 {