@dnax/ui 0.0.34 → 0.0.36

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

@@ -7,8 +7,8 @@
 // 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") */
@@ -26,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">
@@ -48,8 +62,15 @@ interface Props {
   noCaret?: boolean
   /** Icône de la flèche déroulante */
   dropdownIcon?: string
-  /** Alignement du menu : bord gauche du bouton ("left") ou bord droit ("right") */
+  /** 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) —
@@ -64,6 +85,7 @@ interface Props {
   round?: boolean
   square?: boolean
   noCaps?: boolean
+  /** Pleine largeur : la racine `.q-btn-actions` s'étend sur 100 % (le déclencheur suit) */
   stretch?: boolean
   loading?: boolean
   disable?: boolean
@@ -75,6 +97,7 @@ const props = withDefaults(defineProps<Props>(), {
   noCaret: false,
   dropdownIcon: "lucide:chevron-down",
   align: "right",
+  offset: 4,
   menuWidth: "180px",
   size: "md",
   color: "primary",
@@ -126,17 +149,68 @@ const panelStyle = computed<Record<string, string>>(() => ({
   ...(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()
-  if (props.align === "left") {
-    panelPos.value = { top: rect.bottom + 4, left: rect.left, transform: "none" }
+  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 {
-    // bord droit du panneau aligné sur le bord droit du bouton
-    panelPos.value = { top: rect.bottom + 4, left: rect.right, transform: "translateX(-100%)" }
+    // 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})`,
   }
 }
 
@@ -213,6 +287,21 @@ 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)
 })
@@ -223,7 +312,12 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="rootEl" class="q-btn-actions" :class="dark && 'dark'" @keydown="onKeydown">
+  <div
+    ref="rootEl"
+    class="q-btn-actions"
+    :class="[dark && 'dark', stretch && 'q-btn-actions--stretch']"
+    @keydown="onKeydown"
+  >
     <QBtn
       class="q-btn-actions__trigger"
       :class="triggerClasses"
@@ -267,24 +361,24 @@ onBeforeUnmount(() => {
           :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" />
+          <template v-for="row in menuRows" :key="row.key">
+            <div v-if="row.type === 'separator'" class="q-btn-actions__separator" role="separator" />
             <button
-              v-if="!isSeparatorOnly(action)"
+              v-else
               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)"
+              :class="{ 'q-btn-actions__item--disabled': row.action.disable }"
+              :disabled="row.action.disable"
+              :style="itemStyle(row.action)"
+              @click="onSelect(row.action)"
             >
-              <Icon :icon="action.icon" v-if="action.icon" class="q-btn-actions__item-icon" aria-hidden="true" />
+              <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">{{ action.label }}</span>
-                <span v-if="action.description" class="q-btn-actions__item-desc">{{ action.description }}</span>
+                <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 :icon="action.iconRight" v-if="action.iconRight" class="q-btn-actions__item-icon" aria-hidden="true" />
+              <Icon v-if="row.action.iconRight" :icon="row.action.iconRight" class="q-btn-actions__item-icon" aria-hidden="true" />
             </button>
           </template>
         </div>

package/components/QBtnDropdown.vue

@@ -0,0 +1,134 @@
+<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
+  /** Pleine largeur : la racine `.q-btn-actions` s'étend sur 100 % (le déclencheur suit) */
+  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>