@dnax/ui 0.0.44 → 0.0.45

package/components/QApp.vue

@@ -1,8 +1,15 @@
+<script setup lang="ts">
+// QApp — conteneur racine de l'application : une div + le slot, en colonne flex sur
+// toute la largeur et une hauteur d'écran. C'est le pendant **pur CSS** de
+// `flex h-screen w-full` (cf. `styles/main.css` : `display: flex; flex-direction: column;
+// width: 100%; height: 100dvh`) — les classes sont aussi posées sur la div pour les
+// apps Tailwind.
+// Les barres (`fixed` ou non) et leurs offsets sont résolus dans son sous-arbre par
+// `lib/fixedLayout.ts`, d'où le `<slot />` qui doit rester son unique enfant.
+</script>
+
 <template>
-<div class="q-app">
-  <slot></slot>
-</div>
+  <div class="q-app flex h-screen w-full" v-bind="$attrs">
+    <slot />
+  </div>
 </template>
-<script setup>
-
-</script>

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
 })
 

package/index.ts

@@ -74,6 +74,7 @@ export { default as QInteract } from "./components/QInteract.vue"
 export { default as QIntersection } from "./components/QIntersection.vue"
 export { default as QItem } from "./components/QItem.vue"
 export { default as QItemSection } from "./components/QItemSection.vue"
+export { default as QLayout } from "./components/QLayout.vue"
 export { default as QLinearProgress } from "./components/QLinearProgress.vue"
 export { default as QList } from "./components/QList.vue"
 export { default as QLoading } from "./components/QLoading.vue"
@@ -135,7 +136,6 @@ export { default as QTiptap } from "./components/QTiptap.vue"
 export { default as QToolbar } from "./components/QToolbar.vue"
 export { default as QTooltip } from "./components/QTooltip.vue"
 export { default as QUploader } from "./components/QUploader.vue"
-export { default as QVideo } from "./components/QVideo.vue"
 export { default as QVirtualScroll } from "./components/QVirtualScroll.vue"
 
 export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent, useBottomSheetPluginComponent } from "./lib/q"
@@ -173,6 +173,8 @@ export type {
   PopoverPlacement,
   PopoverViewport,
 } from "./lib/datePicker"
+export { DEFAULT_LAYOUT_VIEW, parseView, qLayoutKey } from "./lib/layout"
+export type { LayoutView, LayoutZone, LayoutZonePlacement, QLayoutContext } from "./lib/layout"
 export { vRipple } from "./lib/ripple"
 export type { RippleOptions, RippleValue } from "./lib/ripple"
 export { chartToECharts, channelValue, pickFromEvent, tableModel, textValue } from "./lib/chart"

package/lib/layout.test.ts

@@ -0,0 +1,125 @@
+// Tests unitaires de l'analyse du prop `view` de QLayout (matrice 3×3).
+import { describe, expect, it } from "bun:test"
+import { DEFAULT_LAYOUT_VIEW, parseView } from "./layout"
+
+describe("parseView", () => {
+  it("applique la vue par défaut sans argument", () => {
+    const v = parseView()
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.view).toBe("hHh LpR fFf")
+    expect(v.error).toBeUndefined()
+    // Header et footer pleine largeur, drawers dans la rangée du milieu
+    expect(v.gridTemplateAreas).toBe('"h h h" "l p r" "f f f"')
+  })
+
+  it("déduit l'aire de chaque zone", () => {
+    const v = parseView("hHh LpR fFf")
+
+    expect(v.zones.header.area).toBe("h")
+    expect(v.zones.footer.area).toBe("f")
+    expect(v.zones.left.area).toBe("l")
+    expect(v.zones.right.area).toBe("r")
+    expect(v.zones.page.area).toBe("p")
+    expect(v.zones.page.cells).toEqual([[1, 1]])
+  })
+
+  it("lit la casse comme « reste en place » (majuscule) ou « défile » (minuscule)", () => {
+    const fixed = parseView("hHh LpR fFf")
+    expect(fixed.zones.header.fixed).toBe(true)
+    expect(fixed.zones.footer.fixed).toBe(true)
+    expect(fixed.zones.left.fixed).toBe(true)
+    expect(fixed.zones.right.fixed).toBe(true)
+
+    const flowing = parseView("hhh lpR fff")
+    expect(flowing.zones.header.fixed).toBe(false)
+    expect(flowing.zones.footer.fixed).toBe(false)
+    expect(flowing.zones.left.fixed).toBe(false)
+    expect(flowing.zones.right.fixed).toBe(true) // une seule majuscule suffit
+    expect(flowing.gridTemplateAreas).toBe('"h h h" "l p r" "f f f"')
+  })
+
+  it("fait démarrer le drawer gauche au-dessus du header (lhh)", () => {
+    const v = parseView("lhh LpR fff")
+
+    expect(v.gridTemplateAreas).toBe('"l h h" "l p r" "f f f"')
+    expect(v.zones.left.cells).toEqual([
+      [0, 0],
+      [1, 0],
+    ])
+    expect(v.zones.header.cells).toEqual([
+      [0, 1],
+      [0, 2],
+    ])
+  })
+
+  it("fait descendre le drawer droit jusqu'au footer (ffR)", () => {
+    const v = parseView("hhr lpR ffR")
+
+    expect(v.gridTemplateAreas).toBe('"h h r" "l p r" "f f r"')
+    expect(v.zones.right.cells).toEqual([
+      [0, 2],
+      [1, 2],
+      [2, 2],
+    ])
+    expect(v.zones.right.fixed).toBe(true)
+  })
+
+  it("accepte les cellules vides (.)", () => {
+    const v = parseView("hHh .p. fFf")
+
+    expect(v.gridTemplateAreas).toBe('"h h h" ". p ." "f f f"')
+    expect(v.zones.left.cells).toEqual([])
+    expect(v.zones.left.area).toBeUndefined()
+    expect(v.zones.right.cells).toEqual([])
+  })
+
+  it("marque la page « en place » si son p est majuscule", () => {
+    expect(parseView("hhh LPR fff").zones.page.fixed).toBe(true)
+    expect(parseView("hhh LpR fff").zones.page.fixed).toBe(false)
+  })
+
+  it("rejette une chaîne de mauvaise longueur", () => {
+    const v = parseView("hHh lpR")
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.error).toContain("3 groupes de 3 caractères")
+  })
+
+  it("rejette une lettre inconnue", () => {
+    const v = parseView("hHh xpR fFf")
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.error).toContain('lettre "x" inconnue')
+  })
+
+  it("rejette une zone hors de sa rangée", () => {
+    const v = parseView("fhf LpR fFf")
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.error).toContain("rangée 1")
+  })
+
+  it("exige une page dans la rangée du milieu", () => {
+    const v = parseView("hHh lrr fFf")
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.error).toContain('au moins un "p"')
+  })
+
+  it("rejette une zone non rectangulaire", () => {
+    // `l` en (0,0) et (2,0) sans (1,0) : grid-template-areas serait invalide
+    const v = parseView("lhr plr lfr")
+
+    expect(v.view).toBe(DEFAULT_LAYOUT_VIEW)
+    expect(v.error).toContain('zone "left"')
+  })
+
+  it("retombe toujours sur une vue utilisable", () => {
+    const v = parseView("n'importe quoi")
+
+    expect(v.error).toBeDefined()
+    expect(v.zones.page.cells).toEqual([[1, 1]])
+    expect(v.gridTemplateAreas).toBe('"h h h" "l p r" "f f f"')
+  })
+})

package/lib/layout.ts

@@ -0,0 +1,181 @@
+// Analyse du prop `view` de QLayout — matrice 3×3 de la fenêtre (modèle Quasar).
+//
+// `view` = 11 caractères : 3 (rangée header) + espace + 3 (rangée milieu) + espace +
+// 3 (rangée footer). Chaque caractère dit quelle zone occupe cette cellule :
+//   l = drawer gauche, h = header, r = drawer droit, f = footer, p = page (centre),
+//   . = cellule vide.
+// La casse compte : **majuscule = la zone reste en place** au scroll (Quasar :
+// « position fixe »), **minuscule = elle défile avec la page**. Une zone qui occupe
+// plusieurs cellules les occupe forcément en rectangle (exigence de
+// `grid-template-areas`) ; `hHh lpR fFf` donne donc un header pleine largeur, un
+// drawer gauche sous le header et un drawer droit pleine hauteur.
+//
+// Aucune dépendance au DOM : le SFC pose `grid-template-areas` sur `.q-layout`, et
+// chaque enfant (q-header, q-footer, q-sidebar) lit sa cellule dans le contexte
+// injecté — d'où l'export de `qLayoutKey`.
+//
+// Modèle retenu par dnax.ui (« A ») : **scroll du document + `position: sticky`**,
+// pas le scroll interne de Quasar. Conséquence sur les lettres : la casse se voit
+// sur le header (`H` reste collé / `h` défile) et sur les drawers (`L`/`R` collés et
+// hauts de 100dvh / `l`/`r` dans le flux), alors que `F`/`f` sont **équivalents** (la
+// rangée footer est la dernière : le footer tombe en fin de page dans les deux cas) et
+// que `P` est sans effet (la page EST ce qui défile).
+
+import type { InjectionKey, Ref } from "vue"
+
+/** Zone de la matrice (une par composant concerné) */
+export type LayoutZone = "left" | "header" | "right" | "page" | "footer"
+
+/** Vue par défaut : header et footer pleine largeur, les deux drawers restent en place */
+export const DEFAULT_LAYOUT_VIEW = "hHh LpR fFf"
+
+/** Lettres acceptées par rangée — la matrice n'a de sens qu'avec ces zones-là */
+const ROW_LETTERS: readonly (readonly string[])[] = [
+  ["l", "h", "r"], // rangée header : drawer gauche, header, drawer droit
+  ["l", "p", "r"], // rangée milieu : drawer gauche, page, drawer droit
+  ["l", "f", "r"], // rangée footer : drawer gauche, footer, drawer droit
+]
+
+/** Lettre → zone */
+const LETTER_ZONE: Record<string, LayoutZone> = {
+  l: "left",
+  h: "header",
+  r: "right",
+  p: "page",
+  f: "footer",
+}
+
+/** Cellule vide (aucune zone) */
+const EMPTY_CELL = "."
+
+export interface LayoutZonePlacement {
+  /** Nom d'aire CSS à passer à `grid-area` — `undefined` si la zone n'occupe aucune cellule */
+  area?: string
+  /** La zone reste en place au scroll (au moins une de ses lettres en majuscule) */
+  fixed: boolean
+  /** Cellules occupées, `[ligne, colonne]` en base 0 */
+  cells: Array<[number, number]>
+}
+
+export interface LayoutView {
+  /** Chaîne retenue — la vue par défaut quand la chaîne fournie est invalide */
+  view: string
+  /** `grid-template-areas` prêt à poser sur `.q-layout` */
+  gridTemplateAreas: string
+  /** Placement de chaque zone */
+  zones: Record<LayoutZone, LayoutZonePlacement>
+  /** Raison du rejet de la chaîne fournie (`undefined` si elle était valide) */
+  error?: string
+}
+
+/** Contexte fourni par QLayout à ses enfants (q-header, q-footer, q-sidebar) */
+export interface QLayoutContext {
+  /** Placement de chaque zone, déduit de `view` (suit les changements de `view`) */
+  zones: Readonly<Ref<Record<LayoutZone, LayoutZonePlacement>>>
+  /** QLayout est utilisé comme conteneur (hauteur explicite requise) */
+  container: Readonly<Ref<boolean>>
+}
+
+/** Clé d'injection du contexte QLayout — lue par les composants enfants */
+export const qLayoutKey: InjectionKey<QLayoutContext> = Symbol("q-layout")
+
+const emptyZones = (): Record<LayoutZone, LayoutZonePlacement> => ({
+  left: { fixed: false, cells: [] },
+  header: { fixed: false, cells: [] },
+  right: { fixed: false, cells: [] },
+  page: { fixed: false, cells: [] },
+  footer: { fixed: false, cells: [] },
+})
+
+/** Les 3 rangées de 3 lettres d'une vue (chaîne déjà validée) */
+const rowsOf = (view: string) => view.trim().split(/\s+/) as [string, string, string]
+
+/**
+ * Construit le résultat à partir d'une vue **valide** : cellules de chaque zone,
+ * drapeau « reste en place », aires CSS.
+ */
+function build(view: string): LayoutView {
+  const rows = rowsOf(view)
+  const zones = emptyZones()
+  const areas: string[][] = []
+
+  rows.forEach((row, r) => {
+    const cells = [...row]
+    areas.push(cells.map((char) => (char === EMPTY_CELL ? EMPTY_CELL : char.toLowerCase())))
+    cells.forEach((char, c) => {
+      if (char === EMPTY_CELL) return
+      const zone = LETTER_ZONE[char.toLowerCase()]!
+      zones[zone].cells.push([r, c])
+      // Casse : au moins une majuscule → la zone reste en place
+      if (char === char.toUpperCase()) zones[zone].fixed = true
+    })
+  })
+
+  for (const zone of Object.keys(zones) as LayoutZone[]) {
+    if (zones[zone].cells.length) {
+      const [r, c] = zones[zone].cells[0]!
+      zones[zone].area = areas[r]![c]!
+    }
+  }
+
+  return {
+    view: rows.join(" "),
+    gridTemplateAreas: areas.map((row) => `"${row.join(" ")}"`).join(" "),
+    zones,
+  }
+}
+
+/** Vérifie qu'une zone occupe bien un rectangle plein (sinon `grid-template-areas` est invalide) */
+function isRectangle(cells: Array<[number, number]>): boolean {
+  const rows = cells.map(([r]) => r)
+  const cols = cells.map(([, c]) => c)
+  const height = Math.max(...rows) - Math.min(...rows) + 1
+  const width = Math.max(...cols) - Math.min(...cols) + 1
+  return new Set(rows).size === height && new Set(cols).size === width && height * width === cells.length
+}
+
+/** Vue par défaut + la raison du rejet, pour rester utilisable en production */
+const fallback = (error: string): LayoutView => ({ ...build(DEFAULT_LAYOUT_VIEW), error })
+
+/**
+ * Analyse le prop `view`. Toute chaîne invalide est **rejetée** (jamais de crash) :
+ * la vue par défaut s'applique et `error` porte la raison (affichée en dev par le SFC).
+ */
+export function parseView(view?: string): LayoutView {
+  if (!view) return build(DEFAULT_LAYOUT_VIEW)
+
+  const groups = view.trim().split(/\s+/)
+  if (groups.length !== 3 || groups.some((group) => group.length !== 3)) {
+    return fallback(
+      `view "${view}" : attendu 3 groupes de 3 caractères (ex. "${DEFAULT_LAYOUT_VIEW}")`,
+    )
+  }
+
+  const rows = groups as [string, string, string]
+  for (let r = 0; r < 3; r++) {
+    for (const char of rows[r]!) {
+      if (char === EMPTY_CELL) continue
+      const letter = char.toLowerCase()
+      if (!LETTER_ZONE[letter]) {
+        return fallback(`view "${view}" : lettre "${char}" inconnue (attendu l, h, r, f, p ou .)`)
+      }
+      if (!ROW_LETTERS[r]!.includes(letter)) {
+        return fallback(
+          `view "${view}" : "${char}" n'a pas sa place dans la rangée ${r + 1} (attendu ${ROW_LETTERS[r]!.join(", ")} ou .)`,
+        )
+      }
+    }
+  }
+
+  const parsed = build(rows.join(" "))
+  if (!parsed.zones.page.cells.length) {
+    return fallback(`view "${view}" : la rangée du milieu doit contenir au moins un "p" (page)`)
+  }
+  for (const zone of Object.keys(parsed.zones) as LayoutZone[]) {
+    const cells = parsed.zones[zone].cells
+    if (cells.length > 1 && !isRectangle(cells)) {
+      return fallback(`view "${view}" : la zone "${zone}" n'occupe pas un rectangle plein`)
+    }
+  }
+  return parsed
+}

package/module.ts

@@ -20,15 +20,6 @@ export interface DnaxUiModuleOptions {
   overlayBack?: boolean
 }
 
-/** Custom elements du framework HTML Video.js v10 (@videojs/html) — balises non-Vue */
-const VIDEOJS_CUSTOM_ELEMENTS = [
-  "video-player",
-  "video-skin",
-  "youtube-video",
-  "hlsjs-video",
-  "mux-video",
-]
-
 export default defineNuxtModule<DnaxUiModuleOptions>({
   meta: {
     name: "@dnax/ui",
@@ -43,15 +34,6 @@ export default defineNuxtModule<DnaxUiModuleOptions>({
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
 
-    // Les balises <video-player>/<youtube-video>… sont des custom elements @videojs/html,
-    // pas des composants Vue → les exclure de la résolution (évite le warn
-    // « Failed to resolve component »).
-    nuxt.options.vue.compilerOptions ??= {}
-    const existing = nuxt.options.vue.compilerOptions.isCustomElement
-    nuxt.options.vue.compilerOptions.isCustomElement = (tag: string) =>
-      VIDEOJS_CUSTOM_ELEMENTS.includes(tag) ||
-      (typeof existing === "function" ? existing(tag) : false)
-
     if (options.css) {
       const cssPath = resolve("./styles/main.css")
       if (!nuxt.options.css.includes(cssPath)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",
@@ -40,7 +40,6 @@
     "@tiptap/starter-kit": "^3.31.3",
     "@tiptap/suggestion": "^3.31.3",
     "@tiptap/vue-3": "^3.31.3",
-    "@videojs/html": "^10.0.0-beta.32",
     "@vueuse/core": "^14.4.0",
     "arktype": "^2.2.3",
     "class-variance-authority": "^0.7.1",

package/scripts/generate-exports.ts

@@ -54,6 +54,15 @@ export {
 } from "./lib/overlayBack"
 export type { OverlayHandle } from "./lib/overlayBack"
 export { markOverlayClose, closeParentOverlay, vClose } from "./lib/closeOverlay"
+export { placePopover } from "./lib/datePicker"
+export type {
+  PlacePopoverOptions,
+  PopoverAnchor,
+  PopoverPlacement,
+  PopoverViewport,
+} from "./lib/datePicker"
+export { DEFAULT_LAYOUT_VIEW, parseView, qLayoutKey } from "./lib/layout"
+export type { LayoutView, LayoutZone, LayoutZonePlacement, QLayoutContext } from "./lib/layout"
 export { vRipple } from "./lib/ripple"
 export type { RippleOptions, RippleValue } from "./lib/ripple"
 export { chartToECharts, channelValue, pickFromEvent, tableModel, textValue } from "./lib/chart"

package/styles/main.css

@@ -52,8 +52,13 @@ body {
 .q-app {
   display: flex;
   flex-direction: column; /* header en haut, contenu au milieu, footer en bas */
-  min-height: 100vh;
-  min-height: 100dvh; /* barres de navigateur dynamiques (mobile) */
+  width: 100%; /* prend toute la largeur disponible */
+  /* Équivalent PUR CSS de `flex h-screen w-full` (les classes sont aussi sur la
+     div) : le conteneur fait exactement un écran. Ce qui dépasse doit donc défiler
+     dans un enfant (`min-height: 0` + `overflow: auto`), sinon le document scrolle
+     sous les barres. */
+  height: 100vh; /* fallback vieux navigateurs */
+  height: 100dvh; /* barres de navigateur dynamiques (mobile) */
 }
 
 /* Safe-area intégrées aux règles de base (pas de conflit de cascade) */
@@ -79,6 +84,16 @@ body {
   z-index: 100;
 }
 
+/* sticky : opt-in (prop `sticky`, ou automatique dans un QLayout quand la lettre du
+   `view` est en majuscule) — la barre reste visible, le contenu défile dessous.
+   Dans un QLayout elle est close dans sa cellule : elle ne peut pas passer au-dessus
+   d'une colonne voisine (drawer, rangée du milieu). */
+.q-header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
 /* Barre d'action basse */
 /* Safe-area intégrées à la règle de base .q-footer (plus bas) */
 
@@ -105,6 +120,49 @@ body {
   padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
 }
 
+/* ===== QLayout — matrice 3×3 pilotée par `view` =====
+   Colonnes : drawer gauche / contenu / drawer droit. Rangées : header / milieu /
+   footer. `grid-template-areas` vient du prop `view` (variable CSS posée par le
+   composant). `minmax(0, 1fr)` sur la colonne du milieu = l'équivalent de
+   `min-width: 0` : un enfant large (tableau à colonnes nombreuses) ne pousse plus
+   les drawers hors de l'écran. */
+.q-layout {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-areas: var(--q-layout-areas);
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+/* Tout enfant direct sans cellule explicite (le contenu) va dans la cellule « page ».
+   q-header / q-footer / q-sidebar posent la leur en style inline — l'ordre
+   d'écriture dans le template est donc libre. */
+.q-layout > * {
+  grid-area: var(--q-layout-page-area, p);
+}
+
+/* Mode conteneur (comme Quasar) : le layout gère son propre cadre — une hauteur
+   explicite est requise et le conteneur devient la zone de scroll (les barres
+   sticky s'y accrochent, pas à la fenêtre). */
+.q-layout--container {
+  min-height: 0;
+  overflow: auto;
+}
+
+/* Drawer sticky dans un QLayout : accroché sous les barres qui le surplombent
+   seulement (les variables `--q-sidebar-sticky-*` sont posées par QSidebar d'après
+   les cellules de sa zone), sur la hauteur visible entre les deux barres — il ne
+   glisse donc jamais sous le header. */
+.q-layout > .q-sidebar--static.q-sidebar--sticky {
+  top: var(--q-sidebar-sticky-top, var(--q-layout-header-h, 0px));
+  height: calc(
+    var(--q-layout-viewport-h, 100dvh) -
+      var(--q-sidebar-sticky-top, var(--q-layout-header-h, 0px)) -
+      var(--q-sidebar-sticky-bottom, var(--q-layout-footer-h, 0px))
+  );
+}
+
 .q-toolbar {
   position: relative;
   display: flex;
@@ -653,6 +711,15 @@ html.dark body {
   z-index: 100;
 }
 
+/* sticky (prop `sticky`, ou automatique dans un QLayout avec une lettre majuscule) :
+   la rangée footer étant la dernière, elle tombe en fin de page dans les deux cas —
+   `F` ne change donc rien de visible, contrairement à `H` sur le header. */
+.q-footer--sticky {
+  position: sticky;
+  bottom: 0;
+  z-index: 100;
+}
+
 /* no-padding : horizontal collé aux bords — safe-area conservées */
 .q-footer--no-padding {
   padding: 4px 0;

package/components/QVideo.vue

@@ -1,305 +0,0 @@
-<script setup lang="ts">
-// QVideo — lecteur vidéo basé sur le framework HTML de Video.js v10 (@videojs/html) :
-// <q-video src="movie.mp4" poster="…" ratio="16/9" />
-// Custom elements composables : <video-player> > <video-skin> > media element.
-// Le média est choisi selon la source : <video> (mp4/webm/ogg), <youtube-video>
-// (YouTube), <hlsjs-video> (.m3u8) — mux-video est aussi enregistré (prêt à l'emploi).
-// Les modules sont chargés uniquement côté client (SSR safe — customElements).
-// Events : @ready (media element), @play, @pause, @ended, @timeupdate, @loadedmetadata, @volumechange.
-// Méthodes exposées : play / pause / togglePlay / seek / getCurrentTime / getDuration / setVolume / setMuted / isPlaying.
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
-// Importé en texte brut + injecté côté client : passé dans le pipeline CSS normal, ce
-// fichier tiers (build Tailwind de @videojs/html) contient du `@layer`/`@scope` natif qui
-// casse le build des apps consommatrices en Tailwind v3 (PostCSS exige le `@tailwind`
-// correspondant). L'injection runtime l'exclut de PostCSS sans perdre les styles globaux.
-import skinCss from "@videojs/html/video/skin.css?raw"
-
-interface Props {
-  /** URL de la vidéo (mp4, webm, ogg, HLS .m3u8, YouTube…) */
-  src?: string
-  /** Image d'affiche avant lecture */
-  poster?: string
-  /** Image de remplacement affichée tant que la vidéo n'est pas chargée (ou slot #placeholder) */
-  placeholder?: string
-  /** Texte alternatif de l'image placeholder (défaut "Video placeholder") */
-  placeholderAlt?: string
-  /** Affiche les contrôles (défaut true). Le skin par défaut gère ses contrôles
-   *  (état visible/masqué pendant la lecture). */
-  controls?: boolean
-  /** Démarre la lecture automatiquement (souvent combiné avec muted) */
-  autoplay?: boolean
-  /** Boucle à la fin */
-  loop?: boolean
-  /** Muet */
-  muted?: boolean
-  /** Chargement : "auto" | "metadata" (défaut) | "none" */
-  preload?: string
-  /** Ratio d'affichage : "16/9" (défaut), "4/3", "1/1", "none" (hauteur auto) */
-  ratio?: string
-  /** Largeur max du lecteur (défaut 100%) */
-  width?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  src: "",
-  poster: "",
-  placeholder: "",
-  placeholderAlt: "Video placeholder",
-  controls: true,
-  autoplay: false,
-  loop: false,
-  muted: false,
-  preload: "metadata",
-  ratio: "16/9",
-  width: "",
-})
-
-const emit = defineEmits<{
-  ready: [media: any]
-  play: []
-  pause: []
-  ended: []
-  timeupdate: [payload: { currentTime: number; duration: number }]
-  loadedmetadata: [payload: { duration: number }]
-  volumechange: [payload: { muted: boolean; volume: number }]
-}>()
-
-/** URL YouTube (watch, shorts, embed, youtu.be) */
-const isYoutube = computed(() =>
-  /(youtube\.com\/(watch\?v=|shorts\/|embed\/)|youtu\.be\/)/.test(props.src),
-)
-/** Flux HLS (.m3u8) → media element hlsjs-video */
-const isHls = computed(() => /\.m3u8(\?|$)/.test(props.src))
-
-const mediaEl = ref<HTMLElement | null>(null)
-const playing = ref(false)
-/** true dès que le média a chargé ses métadonnées (ou qu'il joue) → masque le placeholder */
-const metaLoaded = ref(false)
-
-const media = (): any => mediaEl.value
-
-const onPlay = () => {
-  metaLoaded.value = true
-  playing.value = true
-  emit("play")
-}
-const onPause = () => {
-  playing.value = false
-  emit("pause")
-}
-const onEnded = () => emit("ended")
-const onTimeupdate = () =>
-  emit("timeupdate", { currentTime: media()?.currentTime ?? 0, duration: media()?.duration ?? 0 })
-const onLoadedmetadata = () => {
-  metaLoaded.value = true
-  emit("loadedmetadata", { duration: media()?.duration ?? 0 })
-}
-const onVolumechange = () =>
-  emit("volumechange", { muted: media()?.muted ?? false, volume: media()?.volume ?? 1 })
-
-const listeners: Array<[string, EventListener]> = [
-  ["play", onPlay],
-  ["pause", onPause],
-  ["ended", onEnded],
-  ["timeupdate", onTimeupdate],
-  ["loadedmetadata", onLoadedmetadata],
-  ["volumechange", onVolumechange],
-]
-
-const attach = (el: HTMLElement) => {
-  for (const [type, fn] of listeners) el.addEventListener(type, fn)
-}
-
-const detach = (el: HTMLElement | null) => {
-  if (!el) return
-  for (const [type, fn] of listeners) el.removeEventListener(type, fn)
-}
-
-// Attache les listeners dès que le media element existe (et à chaque changement de
-// type de média) — sinon loadedmetadata est émis avant l'init et le placeholder
-// resterait affiché, bloquant les contrôles.
-watch(mediaEl, (el, old) => {
-  detach(old ?? null)
-  if (el) attach(el)
-}, { immediate: true })
-
-// Clic sur le placeholder : masque-le et lance la lecture
-const onPlaceholderClick = () => {
-  metaLoaded.value = true
-  play()
-}
-
-let skinInjected = false
-const injectSkin = () => {
-  if (skinInjected || typeof document === "undefined") return
-  skinInjected = true
-  if (document.getElementById("q-video-skin")) return
-  const style = document.createElement("style")
-  style.id = "q-video-skin"
-  style.textContent = skinCss
-  document.head.appendChild(style)
-}
-
-onMounted(async () => {
-  injectSkin()
-  // Charge le framework HTML (custom elements) — uniquement côté client
-  await Promise.all([
-    import("@videojs/html/video/player" as string),
-    import("@videojs/html/video/skin" as string),
-    import("@videojs/html/media/mux-video" as string),
-    import("@videojs/html/media/youtube-video" as string),
-    import("@videojs/html/media/hlsjs-video" as string),
-  ])
-  if (typeof customElements !== "undefined") {
-    await customElements.whenDefined("video-player")
-  }
-  emit("ready", mediaEl.value)
-})
-
-onBeforeUnmount(() => detach(mediaEl.value ?? null))
-
-// — Méthodes exposées —
-const play = () => media()?.play()
-const pause = () => media()?.pause()
-const togglePlay = () => {
-  const el = media()
-  if (!el) return
-  if (el.paused) el.play()
-  else el.pause()
-}
-const seek = (t: number) => {
-  if (media()) media().currentTime = t
-}
-const getCurrentTime = () => media()?.currentTime ?? 0
-const getDuration = () => media()?.duration ?? 0
-const setVolume = (v: number) => {
-  if (media()) media().volume = v
-}
-const setMuted = (m: boolean) => {
-  if (media()) media().muted = m
-}
-const isPlaying = () => playing.value
-
-defineExpose({
-  play,
-  pause,
-  togglePlay,
-  seek,
-  getCurrentTime,
-  getDuration,
-  setVolume,
-  setMuted,
-  isPlaying,
-})
-
-const wrapperStyle = (): Record<string, string> => {
-  const style: Record<string, string> = {}
-  if (props.width) style.maxWidth = props.width
-  if (props.ratio !== "none") style.aspectRatio = props.ratio.replace("/", " / ")
-  else style.aspectRatio = "auto"
-  return style
-}
-</script>
-
-<template>
-  <div class="q-video" :style="wrapperStyle()">
-    <!-- Custom elements @videojs/html : player > skin > media -->
-    <video-player class="q-video__player">
-      <video-skin>
-        <video
-          v-if="!isYoutube && !isHls"
-          ref="mediaEl"
-          :src="src"
-          :poster="poster"
-          :autoplay="autoplay"
-          :loop="loop"
-          :muted="muted"
-          :preload="preload"
-          playsinline
-        />
-        <youtube-video
-          v-else-if="isYoutube"
-          ref="mediaEl"
-          :src="src"
-          :poster="poster"
-          :autoplay="autoplay"
-          :loop="loop"
-          :muted="muted"
-          playsinline
-        />
-        <hlsjs-video
-          v-else
-          ref="mediaEl"
-          :src="src"
-          :poster="poster"
-          :autoplay="autoplay"
-          :loop="loop"
-          :muted="muted"
-          playsinline
-        />
-      </video-skin>
-    </video-player>
-
-    <!-- Placeholder tant que la vidéo n'est pas chargée (clic = lecture) -->
-    <div
-      v-if="!metaLoaded && (placeholder || $slots.placeholder)"
-      class="q-video__placeholder"
-      role="button"
-      :aria-label="placeholderAlt"
-      @click="onPlaceholderClick"
-    >
-      <img v-if="placeholder" :src="placeholder" :alt="placeholderAlt" />
-      <slot name="placeholder" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.q-video {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  border-radius: var(--q-radius, 12px);
-  background: #000;
-}
-/* Avant l'upgrade des custom elements : display block + remplir le cadre */
-.q-video video-player,
-.q-video video-skin,
-.q-video video,
-.q-video youtube-video,
-.q-video hlsjs-video {
-  display: block;
-}
-.q-video video-player,
-.q-video video-skin {
-  position: absolute;
-  inset: 0;
-  width: 100% !important;
-  height: 100% !important;
-}
-.q-video video,
-.q-video youtube-video,
-.q-video hlsjs-video {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-/* Placeholder de chargement : image ou contenu, cliquable pour lancer la lecture */
-.q-video__placeholder {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  cursor: pointer;
-  background: #000;
-}
-.q-video__placeholder img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-</style>