@dnax/ui 0.0.33 → 0.0.35

package/components/QBreadcrumbs.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+// QBreadcrumbs — fil d'ariane : <q-breadcrumbs separator="›" gutter="12px" active-color="secondary" align="center" dense />
+// Famille Quasar QBreadcrumbs + QBreadcrumbsEl, rendu façon shadcn-vue Breadcrumb
+// (nav > ol > li, aria-current="page" sur la page courante).
+//
+// Le conteneur insère AUTOMATIQUEMENT un séparateur entre chaque miette du slot par
+// défaut (en général des <q-breadcrumbs-el>) et marque la dernière miette comme la
+// page courante (couleur active + graisse). Les vnodes bruts du slot sont réaffichés
+// via le helper interne RenderNodes (intercaler les séparateurs = impossible en
+// template pur).
+import { Comment, Text, useSlots, type VNode } from "vue"
+import { Icon } from "@iconify/vue"
+import { cn } from "../lib/utils"
+import { colorValue } from "../lib/colors"
+import RenderNodes from "./internal/RenderNodes.vue"
+
+/** "lucide:chevron-right", "mdi:chevron-right"… → séparateur rendu en icône Iconify */
+const ICON_PREFIX_RE = /^[\w-]+:/
+const isIconName = (name: string) => ICON_PREFIX_RE.test(name)
+
+interface Props {
+  /** Séparateur entre les miettes : texte ("/", "›", "·"…) ou icône Iconify ("lucide:chevron-right") */
+  separator?: string
+  /** Couleur du séparateur (token ou hex) */
+  separatorColor?: string
+  /** Couleur de la dernière miette — la page courante (token ou hex, défaut primary) */
+  activeColor?: string
+  /** Couleur des miettes non courantes (token ou hex — défaut : texte adouci) */
+  color?: string
+  /** Espace entre les éléments (valeur CSS, défaut "8px") */
+  gutter?: string
+  /** Alignement du fil d'ariane */
+  align?: "left" | "center" | "right"
+  /** Taille réduite */
+  dense?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  separator: "/",
+  activeColor: "primary",
+  color: "",
+  gutter: "8px",
+  align: "left",
+  dense: false,
+})
+
+const emit = defineEmits<{
+  /**
+   * Émis quand l'utilisateur clique une miette qui n'est pas la page courante
+   * (la dernière) — payload : index de la miette + événement souris d'origine.
+   */
+  change: [index: number, event: MouseEvent]
+}>()
+
+const slots = useSlots()
+
+interface CrumbRow {
+  crumb: VNode
+  isLast: boolean
+}
+
+/** Miettes du slot par défaut (commentaires et nœuds texte purs ignorés), avec le marqueur de dernière. */
+const rows = (): CrumbRow[] => {
+  const list = (slots.default?.() ?? []).filter((v) => {
+    const t = v.type
+    return t !== Comment && t !== Text
+  })
+  return list.map((crumb, i) => ({ crumb, isLast: i === list.length - 1 }))
+}
+
+const containerStyle = (): Record<string, string> => {
+  const style: Record<string, string> = {}
+  if (props.separatorColor) style["--q-breadcrumbs-sep-color"] = colorValue(props.separatorColor)
+  if (props.activeColor) style["--q-breadcrumbs-active-color"] = colorValue(props.activeColor)
+  if (props.color) style["--q-breadcrumbs-color"] = colorValue(props.color)
+  if (props.gutter) style["--q-breadcrumbs-gutter"] = props.gutter
+  return style
+}
+
+const navClasses = (): string =>
+  cn(
+    "q-breadcrumbs",
+    props.align === "center" && "q-breadcrumbs--center",
+    props.align === "right" && "q-breadcrumbs--right",
+    props.dense && "q-breadcrumbs--dense",
+  )
+
+// Délégation de clic sur le <nav> : le clic DOM remonte jusqu'ici même pour les
+// miettes-lien (l'émission Vue de QBreadcrumbsEl ne « bulle » pas). On ignore la
+// page courante (dernière miette) et les séparateurs.
+const onNavClick = (e: MouseEvent) => {
+  const target = e.target
+  if (!(target instanceof Element)) return
+  const li = target.closest(".q-breadcrumbs__item")
+  if (!li || li.classList.contains("q-breadcrumbs__item--last")) return
+  const items = Array.from(li.parentElement?.children ?? []).filter((el) =>
+    el.classList.contains("q-breadcrumbs__item"),
+  )
+  const index = items.indexOf(li)
+  if (index >= 0) emit("change", index, e)
+}
+</script>
+
+<template>
+  <nav
+    class="q-breadcrumbs"
+    :class="navClasses()"
+    :style="containerStyle()"
+    aria-label="Breadcrumb"
+    @click="onNavClick"
+  >
+    <ol class="q-breadcrumbs__list">
+      <template v-for="(row, i) in rows()" :key="i">
+        <li
+          class="q-breadcrumbs__item"
+          :class="{ 'q-breadcrumbs__item--last': row.isLast }"
+          :aria-current="row.isLast ? 'page' : undefined"
+        >
+          <render-nodes :nodes="row.crumb" />
+        </li>
+        <li
+          v-if="!row.isLast && separator !== ''"
+          class="q-breadcrumbs__separator"
+          aria-hidden="true"
+        >
+          <Icon v-if="isIconName(separator)" :icon="separator" />
+          <template v-else>{{ separator }}</template>
+        </li>
+      </template>
+    </ol>
+  </nav>
+</template>

package/components/QBreadcrumbsEl.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+// QBreadcrumbsEl — une miette du fil d'ariane : <q-breadcrumbs-el label="Home" icon="lucide:home" to="/" />
+// Rendu comme lien routeur (<a>, prop `to`/`href`) ou simple texte (<span>) sinon —
+// la dernière miette du <q-breadcrumbs> parent est la page courante (couleur active
+// + aria-current gérés par le conteneur).
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { cn } from "../lib/utils"
+import { useRouter } from "vue-router"
+import type { RouteLocationRaw } from "vue-router"
+
+interface Props {
+  /** Texte de la miette (sinon contenu du slot) */
+  label?: string | number
+  /** Icône Iconify affichée à gauche (ex. : "lucide:home") */
+  icon?: string
+  /** Destination routeur : rend un lien <a> qui navigue au clic (router.push/replace) */
+  to?: RouteLocationRaw
+  /** router.replace au lieu de router.push */
+  replace?: boolean
+  /** Lien natif (<a href>) — sans routeur */
+  href?: string
+  /** Cible du lien natif (ex. "_blank") */
+  target?: string
+  /** Désactive la miette (clics ignorés) */
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  replace: false,
+  disable: false,
+})
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+// Routeur optionnel : sans router installé, `to` dégrade en simple <span> (l'API
+// `href` reste disponible pour les liens natifs).
+let router: ReturnType<typeof useRouter> | undefined
+try {
+  router = useRouter()
+}
+catch {
+  router = undefined
+}
+
+const resolvedHref = computed(() => {
+  if (props.href) return props.href
+  if (props.to && router) return router.resolve(props.to).href
+  return undefined
+})
+
+const tag = computed(() => (resolvedHref.value ? "a" : "span"))
+
+const elClasses = computed(() =>
+  cn("q-breadcrumbs__el", props.disable && "q-breadcrumbs__el--disabled"),
+)
+
+const onClick = (e: MouseEvent) => {
+  if (props.disable) return
+  if (props.to && router && !e.defaultPrevented) {
+    e.preventDefault()
+    if (props.replace) router.replace(props.to)
+    else router.push(props.to)
+  }
+  emit("click", e)
+}
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :href="resolvedHref || undefined"
+    :target="tag === 'a' ? target || undefined : undefined"
+    :rel="tag === 'a' && target === '_blank' ? 'noopener' : undefined"
+    :tabindex="disable && tag === 'a' ? -1 : undefined"
+    :aria-disabled="disable || undefined"
+    :class="elClasses"
+    @click="onClick"
+  >
+    <Icon v-if="icon" :icon="icon" class="q-breadcrumbs__el-icon" aria-hidden="true" />
+    <span v-if="label !== undefined" class="q-breadcrumbs__el-label">{{ label }}</span>
+    <slot v-else />
+  </component>
+</template>

package/components/QBtnActions.vue

@@ -3,10 +3,12 @@
 // piloté par données : plus besoin de compose un QMenu/QList séparé).
 // <q-btn-actions label="Actions" :actions="acts" @select-action="onSelect" />
 // Chaque action : { label, value?, icon?, color?, description?, onClick? }.
+// Le panneau est téléporté dans <body> en position fixed : il survit aux
+// contextes d'empilement/overflow (cellules sticky de table, scroll containers).
 
 export interface BtnAction {
-  /** Libellé affiché dans le menu */
-  label: string
+  /** Libellé affiché dans le menu (absent pour une entrée « séparateur seul ») */
+  label?: string
   /** Valeur émise par @select-action ; si absente, l'action elle-même est émise */
   value?: any
   /** Icône Iconify à gauche (ex. : "lucide:pencil") */
@@ -24,6 +26,20 @@ export interface BtnAction {
   /** Rappel local au clic (en plus de l'événement @select-action) */
   onClick?: (action: BtnAction) => void
 }
+
+/**
+ * Placement du panneau autour du déclencheur (côté + alignement sur l'axe
+ * perpendiculaire) :
+ * - "bottom-start" / "bottom-end" : sous le bouton, bord gauche / droit aligné ;
+ * - "top-start" / "top-end" : au-dessus du bouton ;
+ * - "left-start"… / "right-start"… : sur le côté (start = haut, end = bas) ;
+ * - sans suffixe ("bottom", "top", "left", "right") : centré sur l'axe croisé.
+ */
+export type DropdownPosition =
+  | "bottom-start" | "bottom-end" | "bottom"
+  | "top-start" | "top-end" | "top"
+  | "left-start" | "left-end" | "left"
+  | "right-start" | "right-end" | "right"
 </script>
 
 <script setup lang="ts">
@@ -46,8 +62,15 @@ interface Props {
   noCaret?: boolean
   /** Icône de la flèche déroulante */
   dropdownIcon?: string
-  /** Alignement du menu sous le bouton */
+  /** Alignement du menu sous le bouton : "left" = bottom-start, "right" = bottom-end (alias de `position`) */
   align?: "left" | "right"
+  /**
+   * Placement du panneau autour du déclencheur — ex. "bottom-end" (défaut),
+   * "top-start", "right", "left-end"… (voir DropdownPosition). Prioritaire sur `align`.
+   */
+  position?: DropdownPosition
+  /** Distance entre le panneau et le déclencheur, en px (défaut : 4) */
+  offset?: number
   /** Largeur minimale du menu (ex. "200px") */
   menuWidth?: string
   // — API déclencheur (transmise à QBtn) —
@@ -73,6 +96,7 @@ const props = withDefaults(defineProps<Props>(), {
   noCaret: false,
   dropdownIcon: "lucide:chevron-down",
   align: "right",
+  offset: 4,
   menuWidth: "180px",
   size: "md",
   color: "primary",
@@ -96,6 +120,9 @@ const emit = defineEmits<{
 
 const open = ref(false)
 const rootEl = ref<HTMLElement | null>(null)
+const panelEl = ref<HTMLElement | null>(null)
+/** Position fixed du panneau (téléporté dans <body>) */
+const panelPos = ref({ top: 0, left: 0, transform: "" })
 
 const canOpen = computed(() => !props.disable && !props.loading && props.actions.length > 0)
 
@@ -114,28 +141,111 @@ const effectiveRadius = useRadius("QBtnActions", () => props.radius)
 const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
 
 const panelStyle = computed<Record<string, string>>(() => ({
+  top: `${panelPos.value.top}px`,
+  left: `${panelPos.value.left}px`,
+  transform: panelPos.value.transform,
   minWidth: props.menuWidth,
   ...(roundedStyle.value ?? {}),
 }))
 
+// `position` explicite, sinon alias `align` (compat) → bottom-start / bottom-end
+const placement = computed<DropdownPosition>(
+  () => props.position ?? (props.align === "left" ? "bottom-start" : "bottom-end"),
+)
+
+// ═════════ Positionnement (fixed, téléporté) ═════════
+// Placement exprimé en « point d'ancrage » du panneau (top/left fixed) + un
+// décalage par translation en % de la taille du panneau (−100% = bord opposé,
+// −50% = centré) : aucun calcul de largeur/hauteur du panneau nécessaire.
+const placePanel = () => {
+  const el = rootEl.value
+  if (!el || typeof document === "undefined") return
+  const rect = el.getBoundingClientRect()
+  const [main, alt] = placement.value.split("-") as ["bottom" | "top" | "left" | "right", "start" | "end" | undefined]
+  const off = props.offset
+  const midX = (rect.left + rect.right) / 2
+  const midY = (rect.top + rect.bottom) / 2
+
+  let top = 0
+  let left = 0
+  let tx = "0%"
+  let ty = "0%"
+
+  if (main === "bottom" || main === "top") {
+    // Axe horizontal : bord gauche (start), bord droit (end) ou centre
+    if (alt === "start") left = rect.left
+    else if (alt === "end") {
+      left = rect.right
+      tx = "-100%"
+    }
+    else {
+      left = midX
+      tx = "-50%"
+    }
+    if (main === "bottom") top = rect.bottom + off
+    else {
+      top = rect.top - off
+      ty = "-100%"
+    }
+  }
+  else {
+    // Axe vertical : haut (start), bas (end) ou centre
+    if (alt === "start") top = rect.top
+    else if (alt === "end") {
+      top = rect.bottom
+      ty = "-100%"
+    }
+    else {
+      top = midY
+      ty = "-50%"
+    }
+    if (main === "right") left = rect.right + off
+    else {
+      left = rect.left - off
+      tx = "-100%"
+    }
+  }
+
+  panelPos.value = {
+    top,
+    left,
+    transform: tx === "0%" && ty === "0%" ? "none" : `translate(${tx}, ${ty})`,
+  }
+}
+
+const enableTracking = () => {
+  window.addEventListener("resize", placePanel)
+  window.addEventListener("scroll", placePanel, true)
+}
+const disableTracking = () => {
+  window.removeEventListener("resize", placePanel)
+  window.removeEventListener("scroll", placePanel, true)
+}
+
 // ═════════ Ouverture / fermeture ═════════
 const toggle = () => (open.value ? close() : openMenu())
 
 const openMenu = async () => {
   if (!canOpen.value) return
+  placePanel()
   open.value = true
+  enableTracking()
   await nextTick()
-  ;(rootEl.value?.querySelector(".q-btn-actions__item:not(:disabled)") as HTMLElement | null)?.focus()
+  ;(panelEl.value?.querySelector(".q-btn-actions__item:not(:disabled)") as HTMLElement | null)?.focus()
 }
 
 const close = () => {
   if (!open.value) return
   open.value = false
+  disableTracking()
 }
 
-// Clic extérieur → ferme
+// Clic extérieur (bouton ET panneau téléporté) → ferme
 const onDocMousedown = (e: MouseEvent) => {
-  if (rootEl.value && !rootEl.value.contains(e.target as Node)) close()
+  if (!open.value) return
+  const target = e.target as Node
+  if (rootEl.value?.contains(target) || panelEl.value?.contains(target)) return
+  close()
 }
 
 // Clavier : flèches/Home/End dans le menu, Échap ferme (focus revient au trigger)
@@ -149,7 +259,7 @@ const onKeydown = (e: KeyboardEvent) => {
   }
   if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return
   const items = Array.from(
-    rootEl.value?.querySelectorAll(".q-btn-actions__item:not(:disabled)") ?? [],
+    panelEl.value?.querySelectorAll(".q-btn-actions__item:not(:disabled)") ?? [],
   ) as HTMLElement[]
   if (!items.length) return
   const current = items.indexOf(document.activeElement as HTMLElement)
@@ -176,21 +286,32 @@ const isSeparatorOnly = (action: BtnAction): boolean =>
 const itemStyle = (action: BtnAction) =>
   action.color ? { color: colorValue(action.color) } : undefined
 
+// — Liste aplatie du menu : un nœud stable PAR ligne (séparateur OU item), jamais
+// deux frères conditionnels pour une même action. Évite la désynchronisation de
+// l'arbre de blocs de Vue (crash `emitsOptions` null dans shouldUpdateComponent)
+// quand le menu (Teleport + Transition) est patché avec un nombre variable d'enfants.
+type MenuRow = { type: "separator"; key: string } | { type: "item"; key: string; action: BtnAction }
+
+const menuRows = computed<MenuRow[]>(() => {
+  const rows: MenuRow[] = []
+  props.actions.forEach((action, i) => {
+    if (action.separator) rows.push({ type: "separator", key: `${i}-sep` })
+    if (!isSeparatorOnly(action)) rows.push({ type: "item", key: `${i}-item`, action })
+  })
+  return rows
+})
+
 onMounted(() => {
   if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown)
 })
 onBeforeUnmount(() => {
   if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
+  disableTracking()
 })
 </script>
 
 <template>
-  <div
-    ref="rootEl"
-    class="q-btn-actions"
-    :class="[`q-btn-actions--align-${align}`, dark && 'dark']"
-    @keydown="onKeydown"
-  >
+  <div ref="rootEl" class="q-btn-actions" :class="dark && 'dark'" @keydown="onKeydown">
     <QBtn
       class="q-btn-actions__trigger"
       :class="triggerClasses"
@@ -223,35 +344,39 @@ onBeforeUnmount(() => {
       />
     </QBtn>
 
-    <Transition name="q-popup">
-      <div
-        v-if="open"
-        class="q-btn-actions__panel"
-        role="menu"
-        :aria-label="label ?? 'Actions'"
-        :style="panelStyle"
-      >
-        <template v-for="(action, i) in actions" :key="i">
-          <div v-if="action.separator" class="q-btn-actions__separator" role="separator" />
-          <button
-            v-if="!isSeparatorOnly(action)"
-            type="button"
-            role="menuitem"
-            class="q-btn-actions__item"
-            :class="{ 'q-btn-actions__item--disabled': action.disable }"
-            :disabled="action.disable"
-            :style="itemStyle(action)"
-            @click="onSelect(action)"
-          >
-            <Icon :icon="action.icon" v-if="action.icon" class="q-btn-actions__item-icon" aria-hidden="true" />
-            <span class="q-btn-actions__item-text">
-              <span class="q-btn-actions__item-label">{{ action.label }}</span>
-              <span v-if="action.description" class="q-btn-actions__item-desc">{{ action.description }}</span>
-            </span>
-            <Icon :icon="action.iconRight" v-if="action.iconRight" class="q-btn-actions__item-icon" aria-hidden="true" />
-          </button>
-        </template>
-      </div>
-    </Transition>
+    <Teleport to="body">
+      <Transition name="q-popup">
+        <div
+          v-if="open"
+          ref="panelEl"
+          class="q-btn-actions__panel"
+          role="menu"
+          :aria-label="label ?? 'Actions'"
+          :style="panelStyle"
+          @keydown="onKeydown"
+        >
+          <template v-for="row in menuRows" :key="row.key">
+            <div v-if="row.type === 'separator'" class="q-btn-actions__separator" role="separator" />
+            <button
+              v-else
+              type="button"
+              role="menuitem"
+              class="q-btn-actions__item"
+              :class="{ 'q-btn-actions__item--disabled': row.action.disable }"
+              :disabled="row.action.disable"
+              :style="itemStyle(row.action)"
+              @click="onSelect(row.action)"
+            >
+              <Icon v-if="row.action.icon" :icon="row.action.icon" class="q-btn-actions__item-icon" aria-hidden="true" />
+              <span class="q-btn-actions__item-text">
+                <span class="q-btn-actions__item-label">{{ row.action.label }}</span>
+                <span v-if="row.action.description" class="q-btn-actions__item-desc">{{ row.action.description }}</span>
+              </span>
+              <Icon v-if="row.action.iconRight" :icon="row.action.iconRight" class="q-btn-actions__item-icon" aria-hidden="true" />
+            </button>
+          </template>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>

package/components/QBtnDropdown.vue

@@ -0,0 +1,133 @@
+<script lang="ts">
+// QBtnDropdown — dropdown Quasar : <q-btn-dropdown label="…" :items="…" @select="…" />.
+// Le déclencheur est un QBtn (+ flèche caret) ; le menu liste les `items`, chacun
+// avec une icône GAUCHE (`leftIcon`) et une icône DROITE (`rightIcon`).
+// Implémentation : réutilise le moteur de QBtnActions (panneau téléporté fixed,
+// clavier, séparateurs, clic extérieur) — zéro duplication.
+
+export interface DropdownItem {
+  /** Libellé affiché (absent pour une entrée « séparateur seul ») */
+  label?: string
+  /** Valeur émise par @select ; si absente, l'item lui-même est émis */
+  value?: any
+  /** Icône Iconify à GAUCHE du label (ex. "lucide:settings") */
+  leftIcon?: string
+  /** Icône Iconify à DROITE du label (ex. "lucide:chevron-right" pour un sous-menu) */
+  rightIcon?: string
+  /** Couleur du texte/icône (token — ex. "negative" — ou hex) */
+  color?: string
+  /** Sous-texte descriptif sous le label */
+  description?: string
+  /** Ligne de séparation affichée au-dessus de l'item */
+  separator?: boolean
+  /** Item désactivé */
+  disable?: boolean
+  /** Rappel local au clic (en plus de l'événement @select) */
+  onClick?: (item: DropdownItem) => void
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import QBtnActions, { type DropdownPosition } from "./QBtnActions.vue"
+import type { RadiusProp } from "../lib/useComponentProps"
+
+interface Props {
+  /** Items du menu (icône gauche + icône droite par item) */
+  items?: DropdownItem[]
+  /** Libellé du bouton déclencheur (sinon icône seule) */
+  label?: string
+  /** Icône Iconify du déclencheur (défaut "lucide:ellipsis" si pas de label) */
+  icon?: string
+  /** Masque la flèche déroulante */
+  noCaret?: boolean
+  /** Icône de la flèche déroulante */
+  dropdownIcon?: string
+  /** Alignement du menu sous le bouton : "left" = bottom-start, "right" = bottom-end (alias de `position`) */
+  align?: "left" | "right"
+  /**
+   * Placement du panneau autour du déclencheur — ex. "bottom-end" (défaut),
+   * "top-start", "right", "left-end"… Prioritaire sur `align`.
+   */
+  position?: DropdownPosition
+  /** Distance entre le panneau et le déclencheur, en px (défaut : 4) */
+  offset?: number
+  /** Largeur minimale du menu (ex. "220px") */
+  menuWidth?: string
+  // — API déclencheur (transmise à QBtn) —
+  color?: string
+  textColor?: string
+  size?: string
+  radius?: RadiusProp
+  flat?: boolean
+  outline?: boolean
+  unelevated?: boolean
+  dense?: boolean
+  round?: boolean
+  square?: boolean
+  noCaps?: boolean
+  stretch?: boolean
+  loading?: boolean
+  disable?: boolean
+  dark?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  align: "right",
+  offset: 4,
+  menuWidth: "220px",
+})
+
+const emit = defineEmits<{
+  /** Item sélectionné — payload : `value` de l'item (ou l'item si pas de value) */
+  select: [value: any]
+}>()
+
+// leftIcon/rightIcon → icon/iconRight du moteur QBtnActions
+const mappedActions = computed(() =>
+  (props.items ?? []).map((item) => ({
+    label: item.label,
+    value: item.value,
+    icon: item.leftIcon,
+    iconRight: item.rightIcon,
+    color: item.color,
+    description: item.description,
+    separator: item.separator,
+    disable: item.disable,
+    onClick: item.onClick ? () => item.onClick!(item) : undefined,
+  })),
+)
+
+const onSelectAction = (value: any) => emit("select", value)
+</script>
+
+<template>
+  <QBtnActions
+    :actions="mappedActions"
+    :label="label"
+    :icon="icon"
+    :no-caret="noCaret"
+    :dropdown-icon="dropdownIcon"
+    :align="align"
+    :position="position"
+    :offset="offset"
+    :menu-width="menuWidth"
+    :color="color"
+    :text-color="textColor"
+    :size="size"
+    :radius="radius"
+    :flat="flat"
+    :outline="outline"
+    :unelevated="unelevated"
+    :dense="dense"
+    :round="round"
+    :square="square"
+    :no-caps="noCaps"
+    :stretch="stretch"
+    :loading="loading"
+    :disable="disable"
+    :dark="dark"
+    @select-action="onSelectAction"
+  />
+</template>

package/components/_QBtnActionsLegacy.vue

@@ -0,0 +1,254 @@
+<script lang="ts">
+// QBtnActions — LEGACY (motif cassé) : v-for + DEUX frères v-if indépendants.
+// Copie temporaire pour harnais de test — ne pas utiliser.
+
+export interface BtnAction {
+  label?: string
+  value?: any
+  icon?: string
+  iconRight?: string
+  color?: string
+  description?: string
+  separator?: boolean
+  disable?: boolean
+  onClick?: (action: BtnAction) => void
+}
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { colorValue } from "../lib/colors"
+import { icons } from "../lib/icons"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+import QBtn from "./QBtn.vue"
+
+interface Props {
+  actions?: BtnAction[]
+  label?: string
+  icon?: string
+  noCaret?: boolean
+  dropdownIcon?: string
+  align?: "left" | "right"
+  menuWidth?: string
+  color?: string
+  textColor?: string
+  size?: string
+  radius?: RadiusProp
+  flat?: boolean
+  outline?: boolean
+  unelevated?: boolean
+  dense?: boolean
+  round?: boolean
+  square?: boolean
+  noCaps?: boolean
+  stretch?: boolean
+  loading?: boolean
+  disable?: boolean
+  dark?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  actions: () => [],
+  noCaret: false,
+  dropdownIcon: "lucide:chevron-down",
+  align: "right",
+  menuWidth: "180px",
+  size: "md",
+  color: "primary",
+  flat: false,
+  outline: false,
+  unelevated: false,
+  dense: false,
+  round: false,
+  square: false,
+  noCaps: false,
+  stretch: false,
+  loading: false,
+  disable: false,
+  dark: false,
+})
+
+const open = ref(false)
+const rootEl = ref<HTMLElement | null>(null)
+const panelEl = ref<HTMLElement | null>(null)
+const panelPos = ref({ top: 0, left: 0, transform: "" })
+
+const canOpen = computed(() => !props.disable && !props.loading && props.actions.length > 0)
+const triggerIcon = computed(() => props.icon ?? (props.label ? undefined : icons.ellipsis))
+const showCaret = computed(() => !props.noCaret && !!props.label)
+
+const triggerClasses = computed(() => [
+  "q-btn-actions__trigger",
+  open.value && "q-btn-actions__trigger--open",
+])
+
+const effectiveRadius = useRadius("QBtnActions", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+const panelStyle = computed<Record<string, string>>(() => ({
+  top: `${panelPos.value.top}px`,
+  left: `${panelPos.value.left}px`,
+  transform: panelPos.value.transform,
+  minWidth: props.menuWidth,
+  ...(roundedStyle.value ?? {}),
+}))
+
+const placePanel = () => {
+  const el = rootEl.value
+  if (!el || typeof document === "undefined") return
+  const rect = el.getBoundingClientRect()
+  if (props.align === "left") {
+    panelPos.value = { top: rect.bottom + 4, left: rect.left, transform: "none" }
+  }
+  else {
+    panelPos.value = { top: rect.bottom + 4, left: rect.right, transform: "translateX(-100%)" }
+  }
+}
+
+const enableTracking = () => {
+  window.addEventListener("resize", placePanel)
+  window.addEventListener("scroll", placePanel, true)
+}
+const disableTracking = () => {
+  window.removeEventListener("resize", placePanel)
+  window.removeEventListener("scroll", placePanel, true)
+}
+
+const toggle = () => (open.value ? close() : openMenu())
+
+const openMenu = async () => {
+  if (!canOpen.value) return
+  placePanel()
+  open.value = true
+  enableTracking()
+  await nextTick()
+  ;(panelEl.value?.querySelector(".q-btn-actions__item:not(:disabled)") as HTMLElement | null)?.focus()
+}
+
+const close = () => {
+  if (!open.value) return
+  open.value = false
+  disableTracking()
+}
+
+const onDocMousedown = (e: MouseEvent) => {
+  if (!open.value) return
+  const target = e.target as Node
+  if (rootEl.value?.contains(target) || panelEl.value?.contains(target)) return
+  close()
+}
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (!open.value) return
+  if (e.key === "Escape") {
+    e.preventDefault()
+    close()
+    ;(rootEl.value?.querySelector(".q-btn-actions__trigger") as HTMLElement | null)?.focus()
+    return
+  }
+  if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return
+  const items = Array.from(
+    panelEl.value?.querySelectorAll(".q-btn-actions__item:not(:disabled)") ?? [],
+  ) as HTMLElement[]
+  if (!items.length) return
+  const current = items.indexOf(document.activeElement as HTMLElement)
+  let next = current
+  if (e.key === "ArrowDown") next = (current + 1) % items.length
+  else if (e.key === "ArrowUp") next = (current - 1 + items.length) % items.length
+  else if (e.key === "Home") next = 0
+  else if (e.key === "End") next = items.length - 1
+  e.preventDefault()
+  items[next]?.focus()
+}
+
+const onSelect = (action: BtnAction) => {
+  if (action.disable) return
+  action.onClick?.(action)
+  close()
+}
+
+const isSeparatorOnly = (action: BtnAction): boolean =>
+  !!action.separator && !action.label && !action.icon && !action.iconRight && !action.description
+
+const itemStyle = (action: BtnAction) =>
+  action.color ? { color: colorValue(action.color) } : undefined
+
+onMounted(() => {
+  if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown)
+})
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
+  disableTracking()
+})
+</script>
+
+<template>
+  <div ref="rootEl" class="q-btn-actions" :class="dark && 'dark'" @keydown="onKeydown">
+    <QBtn
+      class="q-btn-actions__trigger"
+      :class="triggerClasses"
+      :label="label"
+      :icon="triggerIcon"
+      :color="color"
+      :text-color="textColor"
+      :size="size"
+      :radius="radius"
+      :flat="flat"
+      :outline="outline"
+      :unelevated="unelevated"
+      :dense="dense"
+      :round="round"
+      :square="square"
+      :no-caps="noCaps"
+      :stretch="stretch"
+      :loading="loading"
+      :disable="disable"
+      @click="toggle"
+    >
+      <Icon
+        v-if="showCaret"
+        :icon="dropdownIcon"
+        class="q-btn-actions__caret"
+        :class="{ 'q-btn-actions__caret--open': open }"
+        aria-hidden="true"
+      />
+    </QBtn>
+
+    <Teleport to="body">
+      <Transition name="q-popup">
+        <div
+          v-if="open"
+          ref="panelEl"
+          class="q-btn-actions__panel"
+          role="menu"
+          :aria-label="label ?? 'Actions'"
+          :style="panelStyle"
+          @keydown="onKeydown"
+        >
+          <template v-for="(action, i) in actions" :key="i">
+            <div v-if="action.separator" class="q-btn-actions__separator" role="separator" />
+            <button
+              v-if="!isSeparatorOnly(action)"
+              type="button"
+              role="menuitem"
+              class="q-btn-actions__item"
+              :class="{ 'q-btn-actions__item--disabled': action.disable }"
+              :disabled="action.disable"
+              :style="itemStyle(action)"
+              @click="onSelect(action)"
+            >
+              <Icon :icon="action.icon" v-if="action.icon" class="q-btn-actions__item-icon" aria-hidden="true" />
+              <span class="q-btn-actions__item-text">
+                <span class="q-btn-actions__item-label">{{ action.label }}</span>
+                <span v-if="action.description" class="q-btn-actions__item-desc">{{ action.description }}</span>
+              </span>
+              <Icon :icon="action.iconRight" v-if="action.iconRight" class="q-btn-actions__item-icon" aria-hidden="true" />
+            </button>
+          </template>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>

package/components/internal/RenderNodes.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+// RenderNodes — rend des vnodes bruts passés en prop (usage interne).
+// Permet à un composant à template (ex. QBreadcrumbs) de réafficher les vnodes du
+// slot par défaut en les enveloppant / les intercalant — impossible en template pur.
+import { defineComponent, type PropType, type VNode } from "vue"
+
+export default defineComponent({
+  name: "RenderNodes",
+  props: {
+    nodes: {
+      type: [Object, Array] as PropType<VNode | VNode[] | null>,
+      default: null,
+    },
+  },
+  setup(props) {
+    return () => {
+      const nodes = props.nodes
+      if (!nodes) return []
+      return Array.isArray(nodes) ? nodes : [nodes]
+    }
+  },
+})
+</script>

package/index.ts

@@ -16,8 +16,11 @@ export { default as QBottomSheetFooter } from "./components/QBottomSheetFooter.v
 export { default as QBottomSheetHeader } from "./components/QBottomSheetHeader.vue"
 export { default as QBottomSheetProvider } from "./components/QBottomSheetProvider.vue"
 export { default as QBottomSheetTrigger } from "./components/QBottomSheetTrigger.vue"
+export { default as QBreadcrumbs } from "./components/QBreadcrumbs.vue"
+export { default as QBreadcrumbsEl } from "./components/QBreadcrumbsEl.vue"
 export { default as QBtn } from "./components/QBtn.vue"
 export { default as QBtnActions } from "./components/QBtnActions.vue"
+export { default as QBtnDropdown } from "./components/QBtnDropdown.vue"
 export { default as QBtnGroup } from "./components/QBtnGroup.vue"
 export { default as QBubble } from "./components/QBubble.vue"
 export { default as QBubbleContent } from "./components/QBubbleContent.vue"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",
@@ -31,7 +31,7 @@
     "@editorjs/paragraph": "^2.11.7",
     "@editorjs/quote": "^2.7.6",
     "@iconify/vue": "^5.0.1",
-    "@nuxt/kit": "^4.5.2",
+    "@nuxt/kit": "4.5.2",
     "@tiptap/extension-bubble-menu": "^3.31.3",
     "@tiptap/extension-drag-handle": "^3.31.3",
     "@tiptap/extension-drag-handle-vue-3": "^3.31.3",

package/scripts/generate-exports.ts

@@ -14,7 +14,7 @@ const toPascalCase = (name: string) =>
     .join("")
 
 const files = (await readdir(componentsDir))
-  .filter((file) => file.endsWith(".vue"))
+  .filter((file) => file.endsWith(".vue") && !file.startsWith("_"))
   .sort()
 
 const exports = files

package/styles/main.css

@@ -2455,6 +2455,11 @@ html.dark body {
   width: 1em;
   height: 1em;
   flex-shrink: 0;
+  /* Caret toujours à l'extrémité DROITE du bouton : quand le bouton est plus
+     large que son contenu (stretch / largeur fixe type 400px), la marge auto
+     absorbe l'espace libre et colle le chevron au bord — sans toucher aux
+     boutons à taille naturelle (aucun espace libre → aucun effet). */
+  margin-left: auto;
   transition: transform 0.2s ease;
 }
 
@@ -2463,9 +2468,8 @@ html.dark body {
 }
 
 .q-btn-actions__panel {
-  position: absolute;
-  top: calc(100% + 4px);
-  z-index: 1200;
+  position: fixed;
+  z-index: 3000;
   padding: 4px;
   background-color: #fff;
   border: 1px solid rgb(0 0 0 / 0.12);
@@ -2473,14 +2477,6 @@ html.dark body {
   box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
 }
 
-.q-btn-actions--align-left .q-btn-actions__panel {
-  left: 0;
-}
-
-.q-btn-actions--align-right .q-btn-actions__panel {
-  right: 0;
-}
-
 .q-btn-actions__item {
   display: flex;
   align-items: center;
@@ -2541,11 +2537,20 @@ html.dark body {
 }
 
 .q-popup-enter-active {
-  animation: q-popup-in 0.12s ease;
+  animation: q-popup-fade-in 0.12s ease;
 }
 
 .q-popup-leave-active {
-  animation: q-popup-in 0.1s ease reverse;
+  animation: q-popup-fade-in 0.1s ease reverse;
+}
+
+@keyframes q-popup-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* ===== QImg ===== */
@@ -3954,6 +3959,117 @@ html.dark body {
   height: 2px;
 }
 
+/* ===== QBreadcrumbs ===== */
+.q-breadcrumbs {
+  --q-breadcrumbs-gutter: 8px;
+  --q-breadcrumbs-color: rgb(0 0 0 / 0.6);
+  --q-breadcrumbs-sep-color: rgb(0 0 0 / 0.42);
+  --q-breadcrumbs-active-color: var(--primary);
+
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--foreground);
+}
+
+.dark .q-breadcrumbs {
+  --q-breadcrumbs-color: rgb(255 255 255 / 0.66);
+  --q-breadcrumbs-sep-color: rgb(255 255 255 / 0.42);
+}
+
+.q-breadcrumbs__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--q-breadcrumbs-gutter);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.q-breadcrumbs--center .q-breadcrumbs__list {
+  justify-content: center;
+}
+
+.q-breadcrumbs--right .q-breadcrumbs__list {
+  justify-content: flex-end;
+}
+
+.q-breadcrumbs__item {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  color: var(--q-breadcrumbs-color);
+  transition: color 0.15s ease;
+}
+
+.q-breadcrumbs__item--last {
+  color: var(--q-breadcrumbs-active-color);
+  font-weight: 600;
+}
+
+.q-breadcrumbs__el {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  color: inherit;
+  text-decoration: none;
+  cursor: default;
+  transition: color 0.15s ease;
+}
+
+.q-breadcrumbs__el svg {
+  width: 1.15em;
+  height: 1.15em;
+  flex-shrink: 0;
+}
+
+.q-breadcrumbs__el-icon {
+  display: inline-flex;
+}
+
+a.q-breadcrumbs__el {
+  cursor: pointer;
+}
+
+a.q-breadcrumbs__el:hover {
+  color: var(--q-breadcrumbs-active-color);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.q-breadcrumbs__el:focus-visible {
+  outline: 2px solid var(--q-breadcrumbs-active-color);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.q-breadcrumbs__el--disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.q-breadcrumbs__separator {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--q-breadcrumbs-sep-color);
+  user-select: none;
+}
+
+.q-breadcrumbs__separator svg {
+  width: 1em;
+  height: 1em;
+}
+
+.q-breadcrumbs--dense {
+  font-size: 12.5px;
+}
+
+.q-breadcrumbs--dense .q-breadcrumbs__el {
+  gap: 4px;
+}
+
 /* ===== QSeparator ===== */
 .q-separator {
   border: none;