@dnax/ui 0.0.36 → 0.0.38

package/components/QBtnActions.vue

@@ -44,11 +44,13 @@ export type DropdownPosition =
 
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue"
+import type { StyleValue } 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 { cn } from "../lib/utils"
 import QBtn from "./QBtn.vue"
 
 interface Props {
@@ -71,8 +73,23 @@ interface Props {
   position?: DropdownPosition
   /** Distance entre le panneau et le déclencheur, en px (défaut : 4) */
   offset?: number
-  /** Largeur minimale du menu (ex. "200px") */
+  /** Largeur minimale du menu (ex. "200px") — sert aussi de plancher quand `fit` est actif */
   menuWidth?: string
+  /**
+   * Le panneau fait AU MOINS la largeur du déclencheur (défaut : true).
+   * Sémantique Quasar `QMenu.fit` : c'est un plancher, pas une largeur exacte —
+   * un item plus large (libellé long) élargit encore le panneau.
+   */
+  fit?: boolean
+  /** Classes attribuées au panneau téléporté (en plus de `q-btn-actions__panel`) */
+  contentClass?: string
+  /**
+   * Style(s) attribués au panneau téléporté — string, objet ou tableau (comme la
+   * prop `style` de Vue).
+   * PRIORITAIRE sur le style calculé (placement, min-width) : c'est la trappe de
+   * sortie pour forcer une largeur exacte ou une couleur de fond.
+   */
+  contentStyle?: StyleValue
   // — API déclencheur (transmise à QBtn) —
   color?: string
   textColor?: string
@@ -99,6 +116,9 @@ const props = withDefaults(defineProps<Props>(), {
   align: "right",
   offset: 4,
   menuWidth: "180px",
+  fit: true,
+  contentClass: "",
+  contentStyle: "",
   size: "md",
   color: "primary",
   flat: false,
@@ -124,6 +144,8 @@ 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: "" })
+/** Largeur mesurée du déclencheur — plancher du panneau quand `fit` est actif */
+const triggerWidth = ref(0)
 
 const canOpen = computed(() => !props.disable && !props.loading && props.actions.length > 0)
 
@@ -141,14 +163,27 @@ const triggerClasses = computed(() => [
 const effectiveRadius = useRadius("QBtnActions", () => props.radius)
 const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
 
+// `fit` : min-width = max(menu-width, largeur du déclencheur). `max()` est calculé
+// par le CSS → `menu-width` peut rester une longueur quelconque ("16rem", "40%").
+const panelMinWidth = computed(() => {
+  const base = props.menuWidth
+  if (!props.fit || !triggerWidth.value) return base
+  const fitted = `${Math.round(triggerWidth.value)}px`
+  return base ? `max(${base}, ${fitted})` : fitted
+})
+
 const panelStyle = computed<Record<string, string>>(() => ({
   top: `${panelPos.value.top}px`,
   left: `${panelPos.value.left}px`,
   transform: panelPos.value.transform,
-  minWidth: props.menuWidth,
+  minWidth: panelMinWidth.value,
   ...(roundedStyle.value ?? {}),
 }))
 
+// Le panneau est téléporté dans <body> : `content-class` / `content-style` sont
+// donc la seule façon de le styler depuis le composant consommateur.
+const panelClasses = computed(() => cn("q-btn-actions__panel", props.contentClass))
+
 // `position` explicite, sinon alias `align` (compat) → bottom-start / bottom-end
 const placement = computed<DropdownPosition>(
   () => props.position ?? (props.align === "left" ? "bottom-start" : "bottom-end"),
@@ -162,6 +197,7 @@ const placePanel = () => {
   const el = rootEl.value
   if (!el || typeof document === "undefined") return
   const rect = el.getBoundingClientRect()
+  triggerWidth.value = rect.width
   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
@@ -355,10 +391,10 @@ onBeforeUnmount(() => {
         <div
           v-if="open"
           ref="panelEl"
-          class="q-btn-actions__panel"
+          :class="panelClasses"
           role="menu"
           :aria-label="label ?? 'Actions'"
-          :style="panelStyle"
+          :style="[panelStyle, contentStyle]"
           @keydown="onKeydown"
         >
           <template v-for="row in menuRows" :key="row.key">

package/components/QBtnDropdown.vue

@@ -29,6 +29,7 @@ export interface DropdownItem {
 
 <script setup lang="ts">
 import { computed } from "vue"
+import type { StyleValue } from "vue"
 import QBtnActions, { type DropdownPosition } from "./QBtnActions.vue"
 import type { RadiusProp } from "../lib/useComponentProps"
 
@@ -52,8 +53,21 @@ interface Props {
   position?: DropdownPosition
   /** Distance entre le panneau et le déclencheur, en px (défaut : 4) */
   offset?: number
-  /** Largeur minimale du menu (ex. "220px") */
+  /** Largeur minimale du menu (ex. "220px") — sert aussi de plancher quand `fit` est actif */
   menuWidth?: string
+  /**
+   * Le panneau fait AU MOINS la largeur du déclencheur (défaut : true).
+   * Sémantique Quasar `QMenu.fit` : c'est un plancher, pas une largeur exacte —
+   * un item plus large (libellé long) élargit encore le panneau.
+   */
+  fit?: boolean
+  /** Classes attribuées au panneau du menu (téléporté dans `<body>`) */
+  contentClass?: string
+  /**
+   * Style(s) attribués au panneau du menu — string, objet ou tableau (comme la
+   * prop `style` de Vue). PRIORITAIRE sur le style calculé (placement, min-width).
+   */
+  contentStyle?: StyleValue
   // — API déclencheur (transmise à QBtn) —
   color?: string
   textColor?: string
@@ -114,6 +128,9 @@ const onSelectAction = (value: any) => emit("select", value)
     :position="position"
     :offset="offset"
     :menu-width="menuWidth"
+    :fit="fit"
+    :content-class="contentClass"
+    :content-style="contentStyle"
     :color="color"
     :text-color="textColor"
     :size="size"

package/components/QSelect.vue

@@ -1,6 +1,26 @@
 <script lang="ts">
 // QSelect — options spécifiques par mode d'ouverture.
 // sheetOptions / modalOptions / inlineOptions : style, classes, hauteur, arrondi, placeholder de recherche.
+
+/**
+ * Placement du popup `inline` (même vocabulaire que `DropdownPosition` de QBtnActions) :
+ *
+ * - `"auto"` — suit la place disponible : sous le champ, bascule au-dessus s'il n'y
+ *   a pas la place. Le popup fait la largeur du champ.
+ * - `"top"` / `"bottom"` — force le côté (pas de bascule). Le popup fait la largeur
+ *   du champ.
+ * - suffixe `"-start"` / `"-end"` — ancre le popup sur le bord GAUCHE / DROIT du
+ *   champ ; il prend alors sa largeur naturelle (ou `inline-options.width`), donc il
+ *   peut être plus étroit ou plus large que le champ.
+ *
+ * Les placements latéraux de `DropdownPosition` (`left`, `right`) ne sont pas repris :
+ * un popup de sélection s'ouvre toujours au-dessus ou au-dessous de son champ.
+ */
+export type SelectPopupPosition =
+  | "auto"
+  | "bottom" | "bottom-start" | "bottom-end"
+  | "top" | "top-start" | "top-end"
+
 export interface QSelectModeOptions {
   /** Largeur du panneau/popup (remplace width) */
   width?: string
@@ -10,6 +30,10 @@ export interface QSelectModeOptions {
   class?: string
   /** Hauteur de la liste scrollable (remplace height) */
   height?: string
+  /** Écart champ ↔ popup (mode inline) — remplace la prop `offset` */
+  offset?: number
+  /** Placement du popup (mode inline) — remplace la prop `position` */
+  position?: SelectPopupPosition
   /** Arrondi du panneau (remplace rounded) */
   rounded?: boolean | string | { tl?: string | number; tr?: string | number; br?: string | number; bl?: string | number }
   /** Placeholder du champ de recherche pour ce mode */
@@ -95,6 +119,18 @@ interface Props {
   height?: string
   /** Arrondi du panneau : true (défaut du mode) | false (carré) | valeur CSS | objet { tl, tr, br, bl } */
   rounded?: boolean | string | { tl?: string | number; tr?: string | number; br?: string | number; bl?: string | number }
+  /**
+   * Écart entre le champ et le popup inline, en px (défaut : 8).
+   * Réduit automatiquement (jusqu'à 0) si la place manque sous/au-dessus du champ.
+   * Surchargeable par mode : `inline-options="{ offset: 8 }"`.
+   */
+  offset?: number
+  /**
+   * Placement du popup inline — voir `SelectPopupPosition`. Défaut : `"auto"`
+   * (bascule automatique selon la place disponible).
+   * Surchargeable par mode : `inline-options="{ position: 'top' }"`.
+   */
+  position?: SelectPopupPosition
   /** Options spécifiques au mode sheet (style, class, height, rounded, width, searchPlaceholder) */
   sheetOptions?: QSelectModeOptions
   /** Options spécifiques au mode modal */
@@ -125,6 +161,8 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   noOptionsLabel: "No options to display",
   mode: "inline",
+  offset: 8,
+  position: "auto",
 })
 
 const emit = defineEmits<{
@@ -170,6 +208,104 @@ const modeOptions = computed<QSelectModeOptions | undefined>(() => {
   return undefined
 })
 
+// — Popup inline : direction, écart et hauteur max calculés selon l'espace visible —
+// Ouvre vers le bas ; s'il n'y a pas la place (POPUP_MIN_SPACE) et qu'au-dessus il y
+// a davantage de place, il bascule au-dessus du champ. L'écart avec le champ
+// (`offset`, 8px par défaut) se réduit quand la place manque (jusqu'à 0) et la
+// hauteur max est bornée à l'espace disponible : le popup ne dépasse jamais le bord
+// de la fenêtre.
+/** Espace vertical visé pour la liste : en dessous, on cherche de la place ailleurs */
+const POPUP_MIN_SPACE = 96
+/** Plafond historique de la liste scrollable */
+const POPUP_MAX_HEIGHT = 240
+/** Marge conservée avec les bords de la fenêtre */
+const VIEWPORT_MARGIN = 8
+
+const popupDirection = ref<"down" | "up">("down")
+const popupMaxHeight = ref(POPUP_MAX_HEIGHT)
+/** Décalages en px par rapport à la RACINE (bloc conteneur du popup) — null avant mesure */
+const popupTop = ref<number | null>(null)
+const popupBottom = ref<number | null>(null)
+
+/** Écart champ ↔ popup : `inline-options.offset` prioritaire sur la prop `offset` */
+const popupOffset = computed(() => modeOptions.value?.offset ?? props.offset)
+
+/** Placement demandé : `inline-options.position` prioritaire sur la prop `position` */
+const popupPlacement = computed<SelectPopupPosition>(
+  () => modeOptions.value?.position ?? props.position,
+)
+
+const positionPopup = () => {
+  const el = rootEl.value
+  if (!el || typeof window === "undefined") return
+  const rect = el.getBoundingClientRect()
+
+  // Ancre = bas du CHAMP, pas bas de la racine : `.q-field__bottom` réserve
+  // ~24px (min-height 20px + padding-top 4px) même quand il est vide, ce qui
+  // éloignait le popup du champ. Quand un hint / une erreur est affiché, on
+  // garde le bas de la racine pour ne pas recouvrir le texte.
+  const control = el.querySelector<HTMLElement>(".q-field__control")
+  const hasBottomText = !!el.querySelector(".q-field__hint, .q-field__error")
+  const anchor = (!hasBottomText && control ? control : el).getBoundingClientRect()
+
+  const below = window.innerHeight - anchor.bottom - VIEWPORT_MARGIN
+  const above = anchor.top - VIEWPORT_MARGIN
+
+  // `auto` : sous le champ, bascule au-dessus s'il n'y a pas la place (et qu'il y en
+  // a plus au-dessus). `top` / `bottom` forcent le côté, sans bascule.
+  const placement = popupPlacement.value
+  const down =
+    placement === "auto"
+      ? below >= POPUP_MIN_SPACE || below >= above
+      : !placement.startsWith("top")
+  const available = Math.max(down ? below : above, 0)
+
+  // Écart réduit quand la place manque, pour laisser le maximum à la liste
+  const gap = Math.max(0, Math.min(popupOffset.value, available - POPUP_MIN_SPACE))
+
+  popupDirection.value = down ? "down" : "up"
+  popupMaxHeight.value = Math.max(0, Math.min(POPUP_MAX_HEIGHT, available - gap))
+  popupTop.value = Math.round(anchor.bottom - rect.top + gap)
+  popupBottom.value = Math.round(rect.bottom - anchor.top + gap)
+}
+
+const popupStyle = computed<Record<string, string>>(() => {
+  const up = popupDirection.value === "up"
+  const fallback = `calc(100% + ${popupOffset.value}px)`
+  const style: Record<string, string> = {
+    top: up ? "auto" : popupTop.value === null ? fallback : `${popupTop.value}px`,
+    bottom: up ? (popupBottom.value === null ? fallback : `${popupBottom.value}px`) : "auto",
+    maxHeight: `${Math.round(popupMaxHeight.value)}px`,
+  }
+
+  // Ancre horizontale : par défaut le popup couvre la largeur du champ. Les suffixes
+  // `-start` / `-end` (ou un `inline-options.width` explicite) l'ancrent sur un bord —
+  // l'effet est visible dès que le popup n'a pas la largeur du champ.
+  const placement = popupPlacement.value
+  const width = modeOptions.value?.width
+  const anchored = placement !== "auto" && placement.includes("-")
+  if (anchored || width) {
+    const alignEnd = placement.endsWith("-end")
+    style.left = alignEnd ? "auto" : "0"
+    style.right = alignEnd ? "0" : "auto"
+    style.width = width ?? "100%"
+  } else {
+    style.left = "0"
+    style.right = "0"
+  }
+
+  return style
+})
+
+// Le champ peut bouger (scroll) ou la fenêtre changer de taille : on recalcule
+const onPopupViewportChange = () => {
+  if (open.value && props.mode === "inline") positionPopup()
+}
+
+// Un changement de `position` / `offset` (prop ou options de mode) pendant que le
+// popup est ouvert doit le replacer tout de suite (ex. sélecteur de placement).
+watch([popupPlacement, popupOffset], onPopupViewportChange)
+
 // — Options normalisées : les primitives (string/number) deviennent { value, label } —
 const isObjectOption = (o: any): boolean => o !== null && typeof o === "object"
 
@@ -446,11 +582,23 @@ const onDocKeydown = (e: KeyboardEvent) => {
   if (e.key === "Escape" && open.value && props.mode !== "inline") closePopup()
 }
 
-// Verrouille le scroll du body quand un panneau modal est ouvert
+// Verrouille le scroll du body quand un panneau modal est ouvert ;
+// en mode inline, (re)calcule la direction/écart/hauteur du popup à l'ouverture
+// et suit les changements de viewport tant qu'il est ouvert.
 watch(open, (v) => {
   if (typeof document !== "undefined" && props.mode !== "inline") {
     document.body.style.overflow = v ? "hidden" : ""
   }
+
+  if (typeof window === "undefined") return
+  if (v && props.mode === "inline") {
+    positionPopup()
+    window.addEventListener("resize", onPopupViewportChange)
+    window.addEventListener("scroll", onPopupViewportChange, true)
+  } else {
+    window.removeEventListener("resize", onPopupViewportChange)
+    window.removeEventListener("scroll", onPopupViewportChange, true)
+  }
 })
 
 onMounted(() => {
@@ -465,6 +613,10 @@ onBeforeUnmount(() => {
     document.removeEventListener("keydown", onDocKeydown)
     document.body.style.overflow = ""
   }
+  if (typeof window !== "undefined") {
+    window.removeEventListener("resize", onPopupViewportChange)
+    window.removeEventListener("scroll", onPopupViewportChange, true)
+  }
 })
 
 // — Styles du panneau (props globales fusionnées avec les options du mode) —
@@ -602,8 +754,8 @@ const sheetClass = computed(() => [`q-select__sheet--${props.mode}`, modeOptions
       v-if="open && mode === 'inline'"
       ref="popupRef"
       class="q-select__popup"
-      :class="inlineOptions?.class"
-      :style="inlineOptions?.style"
+      :class="[inlineOptions?.class, popupDirection === 'up' && 'q-select__popup--up']"
+      :style="[popupStyle, inlineOptions?.style]"
       role="listbox"
       @mousedown.prevent
     >

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/styles/main.css

@@ -264,6 +264,25 @@ html.dark body {
   color: rgb(255 255 255 / 0.65);
 }
 
+/* Icônes de champ en dark : icône gauche + chevrons (select, autocomplete) +
+   loupe de recherche des listes déroulantes. Ces icônes ont une couleur NOIRE
+   codée en dur (`rgb(0 0 0 / …)` sur `.q-field__icon`, `.q-select__arrow`,
+   `.q-autocomplete__arrow`, `.q-select__search-icon`) : sans cette surcharge
+   elles restaient noires sur fond sombre → illisibles. */
+.dark .q-field__icon,
+.dark .q-select__arrow,
+.dark .q-autocomplete__arrow,
+.dark .q-select__search-icon,
+.dark .q-autocomplete__search-icon {
+  color: var(--foreground);
+}
+
+/* État vide des listes déroulantes en dark (texte noir codé en dur) */
+.dark .q-select__empty,
+.dark .q-autocomplete__empty {
+  color: rgb(255 255 255 / 0.65);
+}
+
 .dark .q-input .q-field__native::placeholder,
 .dark .q-input-tag__native::placeholder,
 .dark .q-input-otp__box::placeholder,
@@ -4709,7 +4728,7 @@ a.q-breadcrumbs__el:hover {
 
 .q-select__popup {
   position: absolute;
-  top: calc(100% + 4px);
+  top: calc(100% + 8px);
   left: 0;
   right: 0;
   z-index: 1000;
@@ -4723,6 +4742,24 @@ a.q-breadcrumbs__el:hover {
   animation: q-popup-in 0.12s ease;
 }
 
+/* Bascule au-dessus du champ (pas assez de place en dessous) : l'animation
+   vient d'en bas. `top`/`bottom`/`max-height` sont posés en inline par le script
+   (`positionPopup()`), selon l'espace visible. */
+.q-select__popup--up {
+  animation-name: q-popup-in-up;
+}
+
+@keyframes q-popup-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* — champ de recherche séparé (useSearch), affiché avant la liste — */
 .q-select__search {
   display: flex;