@dnax/ui 0.0.43 → 0.0.45

package/components/QDatePicker.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
 // QDatePicker — sélecteur de date type DatePicker shadcn-vue, API Quasar :
 // <q-date-picker v-model="date" mode="sheet" label="Échéance" clearable outlined />
-// Modes : inline (calendrier en place) | modal (centré) | sheet (bottom sheet) | dialog (plein écran).
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+// Modes : inline (calendrier en place) | popover (panneau ancré sous le champ) |
+// modal (centré) | sheet (bottom sheet) | dialog (plein écran).
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
 import { useOverlayBack } from "../lib/overlayBack"
+import { placePopover, type PopoverPlacement } from "../lib/datePicker"
 import QDateCalendar from "./internal/QDateCalendar.vue"
 
 interface Props {
   /** Date sélectionnée */
   modelValue?: Date | null
   /** Mode d'affichage */
-  mode?: "inline" | "sheet" | "modal" | "dialog"
+  mode?: "inline" | "popover" | "sheet" | "modal" | "dialog"
   label?: string
   stackLabel?: boolean
   hint?: string
@@ -37,10 +39,14 @@ interface Props {
   disabledDates?: (d: Date) => boolean
   /** Premier jour de la semaine : 0 = dimanche, 1 = lundi (défaut) */
   firstDayOfWeek?: number
-  /** Largeur du panneau (modal/sheet) */
+  /** Largeur du panneau (popover/sheet/modal) */
   width?: string
-  /** Titre du panneau */
+  /** Titre du panneau (modes à voile : sheet/modal/dialog) */
   title?: string
+  /** Raccourci « Today » sous le calendrier (tous les modes) */
+  todayBtn?: boolean
+  /** En-tête : libellé cliquable ouvrant le choix du mois (tous les modes) */
+  monthDropdown?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -58,6 +64,8 @@ const props = withDefaults(defineProps<Props>(), {
   firstDayOfWeek: 1,
   width: "",
   title: "",
+  todayBtn: false,
+  monthDropdown: false,
 })
 
 const emit = defineEmits<{
@@ -67,14 +75,22 @@ const emit = defineEmits<{
   clear: []
 }>()
 
+/** Champ déclencheur (tout sauf `inline`) */
 const isPanelMode = computed(() => props.mode !== "inline")
+/** Panneau ancré au champ : ni voile, ni blocage du scroll, ni retour navigateur */
+const isPopover = computed(() => props.mode === "popover")
+/** Modes à voile sombre (sheet/modal/dialog) */
+const isOverlayMode = computed(
+  () => props.mode === "sheet" || props.mode === "modal" || props.mode === "dialog",
+)
 
 const open = ref(false)
 const rootEl = ref<HTMLElement | null>(null)
 const sheetRef = ref<HTMLElement | null>(null)
 
-// « Retour » navigateur → ferme le panneau (sheet/modal/dialog) au lieu de naviguer
-const panelOpen = computed(() => isPanelMode.value && open.value)
+// « Retour » navigateur → ferme le panneau au voile (sheet/modal/dialog) au lieu de
+// naviguer. Le popover, lui, reste un menu : clic extérieur / Échap suffisent.
+const panelOpen = computed(() => isOverlayMode.value && open.value)
 useOverlayBack(panelOpen, () => closePopup(), "QDatePicker")
 
 // — Affichage du champ —
@@ -129,6 +145,51 @@ const sheetStyle = computed<Record<string, string> | undefined>(() =>
   props.width ? { width: props.width, maxWidth: props.width } : undefined,
 )
 
+// — Popover : panneau ancré au champ, position calculée en `fixed` (téléporté) —
+// Le calcul vit dans un helper pur (`lib/datePicker.ts`) : ici on ne fait que
+// mesurer les rectangles et sérialiser le résultat.
+const popoverPlacement = ref<PopoverPlacement | null>(null)
+// Conserve le dernier emplacement à la fermeture : l'animation de sortie en dépend.
+const popoverStyle = computed<Record<string, string>>(() => {
+  const p = popoverPlacement.value
+  if (!p) return { visibility: "hidden" }
+  return {
+    top: p.top === null ? "auto" : `${p.top}px`,
+    bottom: p.bottom === null ? "auto" : `${p.bottom}px`,
+    left: `${p.left}px`,
+    "--q-date-picker-caret": `${p.caret}px`,
+  }
+})
+
+/** Le panneau borne sa hauteur à l'espace visible ; la liste scrolle au-delà. */
+const popoverPanelStyle = computed<Record<string, string | undefined>>(() => ({
+  ...sheetStyle.value,
+  maxHeight: popoverPlacement.value ? `${popoverPlacement.value.maxHeight}px` : undefined,
+}))
+
+const positionPopover = () => {
+  const el = rootEl.value
+  if (!el || typeof window === "undefined") return
+
+  // Ancre = bas du CHAMP : `.q-field__bottom` réserve ~24px même vide, ce qui
+  // éloignerait le panneau. Quand un hint / une erreur est affiché, on prend la
+  // racine pour ne pas recouvrir le texte (même règle que le popup de QSelect).
+  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()
+
+  popoverPlacement.value = placePopover({
+    anchor: { top: anchor.top, bottom: anchor.bottom, left: anchor.left, width: anchor.width },
+    viewport: { width: window.innerWidth, height: window.innerHeight },
+    // Largeur mesurée après rendu (le champ `width` peut être en %, vw…)
+    panelWidth: sheetRef.value?.getBoundingClientRect().width,
+  })
+}
+
+const onViewportChange = () => {
+  if (open.value && isPopover.value) positionPopover()
+}
+
 // — Fermetures : clic extérieur (hors panneau téléporté), Échap, scroll lock —
 const onDocMousedown = (e: MouseEvent) => {
   const target = e.target as Node
@@ -141,10 +202,15 @@ const onDocKeydown = (e: KeyboardEvent) => {
   if (e.key === "Escape" && open.value) closePopup()
 }
 
-watch(open, (v) => {
-  if (typeof document !== "undefined" && isPanelMode.value) {
+watch(open, async (v) => {
+  // Le voile bloque le scroll de la page ; le popover le laisse vivre.
+  if (typeof document !== "undefined" && isOverlayMode.value) {
     document.body.style.overflow = v ? "hidden" : ""
   }
+  if (v && isPopover.value) {
+    await nextTick()
+    positionPopover()
+  }
 })
 
 onMounted(() => {
@@ -153,12 +219,17 @@ onMounted(() => {
     // sinon l'événement avant `document` → calendrier jamais fermé au clic extérieur.
     document.addEventListener("mousedown", onDocMousedown, true)
     document.addEventListener("keydown", onDocKeydown)
+    // Le champ peut bouger (scroll) ou la fenêtre changer de taille : on repositionne
+    window.addEventListener("scroll", onViewportChange, true)
+    window.addEventListener("resize", onViewportChange)
   }
 })
 onBeforeUnmount(() => {
   if (typeof document !== "undefined") {
     document.removeEventListener("mousedown", onDocMousedown, true)
     document.removeEventListener("keydown", onDocKeydown)
+    window.removeEventListener("scroll", onViewportChange, true)
+    window.removeEventListener("resize", onViewportChange)
     document.body.style.overflow = ""
   }
 })
@@ -174,6 +245,8 @@ onBeforeUnmount(() => {
         :max-date="maxDate"
         :disabled-dates="disabledDates"
         :first-day-of-week="firstDayOfWeek"
+        :today-btn="todayBtn"
+        :month-dropdown="monthDropdown"
         @select="onSelect"
       />
     </div>
@@ -203,11 +276,15 @@ onBeforeUnmount(() => {
       </div>
 
       <Teleport to="body">
-        <Transition name="q-date-modal">
+        <Transition :name="isPopover ? 'q-date-popover' : 'q-date-modal'">
           <div
             v-if="open"
             class="q-date-picker__overlay"
-            :class="`q-date-picker__overlay--${mode}`"
+            :class="[
+              `q-date-picker__overlay--${mode}`,
+              isPopover && popoverPlacement?.direction === 'up' && 'q-date-picker__overlay--popover-up',
+            ]"
+            :style="isPopover ? popoverStyle : undefined"
             role="presentation"
             @mousedown.self="closePopup"
           >
@@ -215,12 +292,14 @@ onBeforeUnmount(() => {
               ref="sheetRef"
               class="q-date-picker__sheet"
               :class="`q-date-picker__sheet--${mode}`"
-              :style="sheetStyle"
+              :style="isPopover ? popoverPanelStyle : sheetStyle"
               role="dialog"
-              aria-modal="true"
+              :aria-modal="isOverlayMode ? 'true' : undefined"
               :aria-label="sheetTitle"
             >
-              <div class="q-date-picker__sheet-header">
+              <!-- En-tête (titre + fermeture) réservé aux modes à voile : un popover
+                   n'a ni titre ni bouton de fermeture, il se ferme au clic extérieur. -->
+              <div v-if="isOverlayMode" class="q-date-picker__sheet-header">
                 <span class="q-date-picker__sheet-title">{{ sheetTitle }}</span>
                 <button
                   type="button"
@@ -238,6 +317,8 @@ onBeforeUnmount(() => {
                   :max-date="maxDate"
                   :disabled-dates="disabledDates"
                   :first-day-of-week="firstDayOfWeek"
+                  :today-btn="todayBtn"
+                  :month-dropdown="monthDropdown"
                   @select="onSelect"
                 />
               </div>

package/components/QFooter.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 // QFooter — barre basse (safe-area bottom appliquée par styles/main.css : .q-app .q-footer)
-import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue"
 import { useFixedBarOffset } from "../lib/fixedLayout"
+import { qLayoutKey } from "../lib/layout"
 
 interface Props {
   /** Fixe la barre en bas de l'écran (sort du flux) */
   fixed?: boolean
+  /** Colle la barre en bas pendant le scroll (automatique dans un QLayout avec une lettre majuscule) */
+  sticky?: boolean
   /** Ombre portée vers le haut */
   elevated?: boolean
   /** Masqué au scroll vers le bas, réaffiché au scroll vers le haut */
@@ -22,6 +25,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   fixed: false,
+  sticky: false,
   elevated: false,
   reveal: false,
   bordered: false,
@@ -30,6 +34,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const rootEl = ref<HTMLElement | null>(null)
 
+// Placement dans un QLayout (facultatif) : cellule « f » du `view`, et sticky imposé
+// par la casse de la lettre (F).
+const layout = inject(qLayoutKey, null)
+const zone = computed(() => layout?.zones.value.footer)
+const isSticky = computed(() => props.sticky || !!zone.value?.fixed)
+const layoutStyle = computed<Record<string, string | undefined>>(() => ({
+  gridArea: zone.value?.area,
+}))
+
 // Empilement : bottom = hauteur cumulée des footers fixed suivants (si fixed)
 useFixedBarOffset(rootEl, "bar-bottom", () => props.fixed)
 
@@ -68,6 +81,7 @@ onBeforeUnmount(() => {
     class="q-footer"
     :class="{
       'q-footer--fixed': fixed,
+      'q-footer--sticky': isSticky,
       'q-footer--elevated': props.elevated,
       'q-footer--bordered': props.bordered,
       'q-footer--reveal': props.reveal,
@@ -76,7 +90,7 @@ onBeforeUnmount(() => {
       'q-footer--glass': props.glass,
       'q-footer--no-padding': props.noPadding,
     }"
-    :style="translucentStyle"
+    :style="[translucentStyle, layoutStyle]"
     v-bind="$attrs"
   >
     <slot />

package/components/QHeader.vue

@@ -3,12 +3,15 @@
 // Safe-area top/left/right appliquées toujours (styles/main.css).
 // Quand plusieurs barres fixed sont empilées (q-back-header + q-header), chaque
 // barre se décale sous la précédente automatiquement.
-import { computed, ref } from "vue"
+import { computed, inject, ref } from "vue"
 import { useFixedBarOffset } from "../lib/fixedLayout"
+import { qLayoutKey } from "../lib/layout"
 
 interface Props {
   /** Fixe la barre en haut de l'écran (sort du flux) */
   fixed?: boolean
+  /** Colle la barre en haut pendant le scroll du document (automatique dans un QLayout avec une lettre majuscule) */
+  sticky?: boolean
   /** Fond translucide (frosted glass) : true = 70%, ou valeur % ("70") */
   translucent?: boolean | number
   /** Glassmorphism marqué : fond très translucide + flou fort + bordure claire */
@@ -17,10 +20,20 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   fixed: false,
+  sticky: false,
 })
 
 const rootEl = ref<HTMLElement | null>(null)
 
+// Placement dans un QLayout (facultatif) : cellule « h » du `view`, et sticky imposé
+// par la casse de la lettre (H) — la barre reste alors close dans sa cellule.
+const layout = inject(qLayoutKey, null)
+const zone = computed(() => layout?.zones.value.header)
+const isSticky = computed(() => props.sticky || !!zone.value?.fixed)
+const layoutStyle = computed<Record<string, string | undefined>>(() => ({
+  gridArea: zone.value?.area,
+}))
+
 // Empilement : top = hauteur cumulée des barres fixed précédentes (si fixed)
 useFixedBarOffset(rootEl, "bar", () => props.fixed)
 
@@ -37,10 +50,11 @@ const translucentStyle = computed<Record<string, string> | undefined>(() =>
     class="q-header"
     :class="{
       'q-header--fixed': fixed,
+      'q-header--sticky': isSticky,
       'q-header--translucent': translucent === true || typeof translucent === 'number',
       'q-header--glass': glass,
     }"
-    :style="translucentStyle"
+    :style="[translucentStyle, layoutStyle]"
     v-bind="$attrs"
   >
     <slot />

package/components/QLayout.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+// QLayout — matrice 3×3 pilotée par le prop `view` (modèle Quasar). Les enfants
+// **directs** se placent eux-mêmes : q-header en cellule « h », q-footer en « f »,
+// q-sidebar en « l » / « r », et tout le reste — donc le contenu — en cellule « p ».
+//
+//   <q-layout view="hHh LpR fFf">
+//     <q-header>…</q-header>
+//     <q-sidebar side="left" show-if-above>…</q-sidebar>
+//     <q-page>…</q-page>        ← un SEUL enfant de contenu
+//     <q-footer>…</q-footer>
+//   </q-layout>
+//
+// Majuscule = la zone reste en place au scroll (`position: sticky`), minuscule =
+// elle défile avec la page. L'analyse de `view` vit dans `lib/layout.ts` (pure) ;
+// ici : le rendu de la grille et la mesure.
+//
+// Deux différences assumées avec Quasar : le scroll reste celui du **document**
+// (pas de scroll interne, donc `QFooter reveal`, `QSidebar` statique et les
+// safe-areas continuent de fonctionner), et un header sticky est **clos dans sa
+// cellule** — il ne peut pas passer au-dessus du drawer voisin.
+//
+// Les hauteurs des barres sont mesurées en continu et publiées en variables CSS
+// (`--q-layout-header-h` / `--q-layout-footer-h` / `--q-layout-viewport-h`) : les
+// drawers sticky s'y accrochent sans glisser sous le header, et la hauteur de
+// référence suit le mode (fenêtre, ou conteneur en mode `container`).
+import { computed, onBeforeUnmount, onMounted, provide, ref, toRef, watch } from "vue"
+import type { StyleValue } from "vue"
+import { DEFAULT_LAYOUT_VIEW, parseView, qLayoutKey } from "../lib/layout"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Matrice 3×3 : 3 groupes de 3 lettres (l, h, r, f, p, ou .) + casse = la zone reste en place */
+  view?: string
+  /** Layout conteneur (comme Quasar) : ne gère pas la fenêtre, une hauteur explicite est requise */
+  container?: boolean
+  /** Classe(s) additionnelle(s) */
+  class?: string
+  /** Styles CSS additionnels */
+  style?: StyleValue
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  view: DEFAULT_LAYOUT_VIEW,
+  container: false,
+  class: "",
+  style: undefined,
+})
+
+const parsed = computed(() => parseView(props.view))
+
+// Une `view` invalide n'est jamais fatale : la vue par défaut s'applique et, en dev,
+// la raison est affichée (l'analyse est pure, le composant ne fait que rapporter).
+watch(
+  parsed,
+  (v) => {
+    if (v.error) console.warn(`[q-layout] ${v.error} — vue par défaut appliquée`)
+  },
+  { immediate: true },
+)
+
+// Les enfants (q-header, q-footer, q-sidebar) lisent leur cellule ici.
+provide(qLayoutKey, { zones: computed(() => parsed.value.zones), container: toRef(props, "container") })
+
+const rootEl = ref<HTMLElement | null>(null)
+
+// — Mesure des barres : hauteur cumulée des headers/footers enfants directs —
+let ro: ResizeObserver | null = null
+let mo: MutationObserver | null = null
+
+const bars = (): HTMLElement[] =>
+  Array.from(rootEl.value?.children ?? []).filter(
+    (el): el is HTMLElement =>
+      el instanceof HTMLElement && el.matches(".q-header, .q-back-header, .q-footer"),
+  )
+
+const measure = () => {
+  const root = rootEl.value
+  if (!root || typeof window === "undefined") return
+  let header = 0
+  let footer = 0
+  for (const bar of bars()) {
+    if (bar.matches(".q-footer")) footer += bar.offsetHeight
+    else header += bar.offsetHeight
+  }
+  // Hauteur de référence des zones sticky : la fenêtre, ou le conteneur (mode `container`)
+  const viewport = props.container ? root.clientHeight : window.innerHeight
+  root.style.setProperty("--q-layout-header-h", `${header}px`)
+  root.style.setProperty("--q-layout-footer-h", `${footer}px`)
+  root.style.setProperty("--q-layout-viewport-h", `${viewport}px`)
+}
+
+// Les barres peuvent être rendues conditionnellement (v-if) → on ré-observe.
+const observe = () => {
+  ro?.disconnect()
+  if (typeof ResizeObserver === "undefined") return
+  ro = new ResizeObserver(measure)
+  bars().forEach((bar) => ro!.observe(bar))
+  // En mode conteneur la hauteur de référence est celle du conteneur : on la suit
+  if (props.container && rootEl.value) ro.observe(rootEl.value)
+}
+
+onMounted(() => {
+  measure()
+  observe()
+  if (typeof MutationObserver !== "undefined" && rootEl.value) {
+    mo = new MutationObserver(() => {
+      observe()
+      measure()
+    })
+    mo.observe(rootEl.value, { childList: true })
+  }
+  window.addEventListener("resize", measure)
+})
+
+onBeforeUnmount(() => {
+  ro?.disconnect()
+  mo?.disconnect()
+  window.removeEventListener("resize", measure)
+})
+
+// Cellules de la grille (`grid-template-areas` + cellule par défaut du contenu).
+const rootStyle = computed<Record<string, string>>(() => ({
+  "--q-layout-areas": parsed.value.gridTemplateAreas,
+  "--q-layout-page-area": parsed.value.zones.page.area ?? "p",
+}))
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="q-layout"
+    :class="cn(container && 'q-layout--container', props.class)"
+    :style="[rootStyle, props.style]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/components/QSidebar.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 // QSidebar — panneau latéral type Sidebar shadcn-vue, API QDrawer Quasar :
-// <q-sidebar v-model="open" side="left" width="260px" bordered show-if-above breakpoint="1023">
+// <q-sidebar v-model="open" side="left" width="260px" bordered show-if-above :breakpoint="1023">
 // Fournit le contexte (toggle) aux QSidebarTrigger enfants.
 import type { InjectionKey, Ref } from "vue"
 
@@ -14,10 +14,11 @@ export const qSidebarKey: InjectionKey<SidebarContext> = Symbol("q-sidebar")
 </script>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from "vue"
+import { computed, inject, onBeforeUnmount, onMounted, provide, ref, watch } from "vue"
 import type { StyleValue } from "vue"
 import { cn } from "../lib/utils"
 import { useOverlayBack } from "../lib/overlayBack"
+import { qLayoutKey } from "../lib/layout"
 
 interface Props {
   /** Ouvert (v-model) — mode offcanvas ; ignoré en mode statique */
@@ -97,6 +98,13 @@ const toggle = () => setOpen(!open.value)
 
 provide<SidebarContext>(qSidebarKey, { open, setOpen, toggle })
 
+// — Placement dans un QLayout (facultatif) —
+// En mode statique le panneau occupe sa cellule (« l » / « r » du `view`) et devient
+// sticky si la lettre est en majuscule ; en offcanvas il est `fixed` (recouvrant),
+// donc sa place dans la grille ne compte plus.
+const layout = inject(qLayoutKey, null)
+const layoutZone = computed(() => layout?.zones.value[props.side])
+
 // « Retour » navigateur → ferme la sidebar (mode offcanvas uniquement)
 const overlayOpen = computed(() => !isStatic.value && open.value)
 useOverlayBack(overlayOpen, () => setOpen(false), "QSidebar")
@@ -131,7 +139,8 @@ const rootClasses = computed(() =>
     isStatic.value ? "q-sidebar--static" : "q-sidebar--offcanvas",
     !isStatic.value && open.value && "q-sidebar--open",
     props.side === "right" && "q-sidebar--right",
-    props.sticky && "q-sidebar--sticky",
+    // sticky : prop explicite, ou imposé par la casse de la lettre dans un QLayout
+    (props.sticky || !!layoutZone.value?.fixed) && "q-sidebar--sticky",
     props.bordered && "q-sidebar--bordered",
     props.elevated && "q-sidebar--elevated",
     props.dark && "q-sidebar--dark",
@@ -143,6 +152,14 @@ const rootStyle = computed<Record<string, string>>(() => {
   const style: Record<string, string> = { "--q-sidebar-w": props.width }
   if (props.height) style.height = props.height
   if (props.maxHeight) style.maxHeight = props.maxHeight
+  // Cellule de la grille QLayout (mode statique : en offcanvas le panneau est fixed)
+  const zone = layoutZone.value
+  if (isStatic.value && zone?.area) style.gridArea = zone.area
+  // Sticky : ne s'accroche qu'aux barres qui le surplombent (rangée 0 = au-dessus de lui)
+  if (isStatic.value && zone?.fixed) {
+    if (zone.cells.some(([row]) => row === 0)) style["--q-sidebar-sticky-top"] = "0px"
+    if (zone.cells.some(([row]) => row === 2)) style["--q-sidebar-sticky-bottom"] = "0px"
+  }
   return style
 })