@dnax/ui 0.0.22 → 0.0.23

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.22",
+  "version": "0.0.23",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",