@dnax/ui 0.0.36 → 0.0.37

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

@@ -170,6 +170,55 @@ 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
+// en a davantage, il bascule au-dessus du champ. L'écart avec le champ 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.
+const POPUP_GAP = 4
+/** 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 popupGap = ref(POPUP_GAP)
+const popupMaxHeight = ref(POPUP_MAX_HEIGHT)
+
+const positionPopup = () => {
+  const el = rootEl.value
+  if (!el || typeof window === "undefined") return
+  const rect = el.getBoundingClientRect()
+  const below = window.innerHeight - rect.bottom - VIEWPORT_MARGIN
+  const above = rect.top - VIEWPORT_MARGIN
+
+  const down = below >= POPUP_MIN_SPACE || below >= above
+  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(POPUP_GAP, available - POPUP_MIN_SPACE))
+
+  popupDirection.value = down ? "down" : "up"
+  popupGap.value = gap
+  popupMaxHeight.value = Math.max(0, Math.min(POPUP_MAX_HEIGHT, available - gap))
+}
+
+const popupStyle = computed<Record<string, string>>(() => {
+  const edge = `calc(100% + ${popupGap.value}px)`
+  return {
+    top: popupDirection.value === "down" ? edge : "auto",
+    bottom: popupDirection.value === "up" ? edge : "auto",
+    maxHeight: `${Math.round(popupMaxHeight.value)}px`,
+  }
+})
+
+// Le champ peut bouger (scroll) ou la fenêtre changer de taille : on recalcule
+const onPopupViewportChange = () => {
+  if (open.value && props.mode === "inline") positionPopup()
+}
+
 // — Options normalisées : les primitives (string/number) deviennent { value, label } —
 const isObjectOption = (o: any): boolean => o !== null && typeof o === "object"
 
@@ -446,11 +495,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 +526,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 +667,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.37",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",

package/styles/main.css

@@ -4723,6 +4723,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;