@dnax/ui 0.0.10 → 0.0.12

package/lib/fixedLayout.ts

@@ -1,11 +1,15 @@
-// fixedLayout — offset automatique des barres fixed (q-header, q-back-header)
-// et du q-page qui les suit.
+// fixedLayout — offset automatique des barres fixed (q-header, q-back-header,
+// q-footer) et du q-page qui les entoure.
 //
 // Problème : les barres fixed sortent du flux (position: fixed) → le contenu de
 // q-page passe dessous. Ce module :
 //  - q-page (mode "page") reçoit un padding-top = hauteur cumulée des barres
-//    fixed qui le précèdent (le contenu ne se retrouve plus sous le header)
+//    fixed HAUT qui le précèdent ET un padding-bottom = hauteur cumulée des
+//    barres fixed BAS qui le suivent (le contenu n'est masqué ni en haut ni en
+//    bas au scroll)
 //  - chaque barre fixed suivante (mode "bar") s'empile sous la précédente (top)
+//  - chaque barre fixed basse (mode "bar-bottom") s'empile au-dessus de la
+//    suivante (bottom)
 //
 // Les barres fixed sont cherchées dans TOUT le sous-arbre de l'enveloppe q-app
 // (pas seulement parmi les frères directs) et ordonnées par position dans le
@@ -15,7 +19,12 @@
 import { onBeforeUnmount, onMounted, watch } from "vue"
 import type { Ref } from "vue"
 
-export const FIXED_BAR_SELECTOR = ".q-header--fixed, .q-back-header--fixed"
+/** Barres fixed en haut de l'écran */
+export const FIXED_TOP_SELECTOR = ".q-header--fixed, .q-back-header--fixed"
+/** Barres fixed en bas de l'écran */
+export const FIXED_BOTTOM_SELECTOR = ".q-footer--fixed"
+/** Toutes les barres fixed (haut + bas) */
+export const FIXED_BAR_SELECTOR = `${FIXED_TOP_SELECTOR}, ${FIXED_BOTTOM_SELECTOR}`
 
 /** Racine du layout : le .q-app le plus proche, sinon le parent direct. */
 function layoutRoot(el: HTMLElement): HTMLElement | null {
@@ -23,13 +32,13 @@ function layoutRoot(el: HTMLElement): HTMLElement | null {
 }
 
 /**
- * Hauteur cumulée des barres fixed qui précèdent `el` dans l'ordre du document,
- * sous la même enveloppe q-app. `el` lui-même (cas mode "bar") est exclu.
+ * Hauteur cumulée des barres fixed HAUT qui précèdent `el` dans l'ordre du
+ * document, sous la même enveloppe q-app. `el` lui-même (cas mode "bar") est exclu.
  */
 export function fixedBarsHeightBefore(el: HTMLElement): number {
   const root = layoutRoot(el)
   if (!root) return 0
-  const bars = Array.from(root.querySelectorAll<HTMLElement>(FIXED_BAR_SELECTOR))
+  const bars = Array.from(root.querySelectorAll<HTMLElement>(FIXED_TOP_SELECTOR))
   let total = 0
   for (const bar of bars) {
     if (bar === el) continue
@@ -41,6 +50,26 @@ export function fixedBarsHeightBefore(el: HTMLElement): number {
   return total
 }
 
+/**
+ * Hauteur cumulée des barres fixed BAS qui SUIVENT `el` dans l'ordre du
+ * document, sous la même enveloppe q-app. `el` lui-même (cas mode "bar-bottom")
+ * est exclu.
+ */
+export function fixedBarsHeightAfter(el: HTMLElement): number {
+  const root = layoutRoot(el)
+  if (!root) return 0
+  const bars = Array.from(root.querySelectorAll<HTMLElement>(FIXED_BOTTOM_SELECTOR))
+  let total = 0
+  for (const bar of bars) {
+    if (bar === el) continue
+    // DOCUMENT_POSITION_PRECEDING = la barre est APRÈS el dans le document
+    if (bar.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING) {
+      total += bar.offsetHeight
+    }
+  }
+  return total
+}
+
 /** Toutes les barres fixed sous l'enveloppe q-app (pour l'observation). */
 function fixedBarsInRoot(el: HTMLElement): HTMLElement[] {
   const root = layoutRoot(el)
@@ -49,15 +78,19 @@ function fixedBarsInRoot(el: HTMLElement): HTMLElement[] {
 }
 
 /**
- * Applique l'offset lié aux barres fixed qui précèdent `el` :
- * - mode "page" : padding-top = hauteur cumulée (q-page) + variable --q-page-offset
- * - mode "bar"  : top = hauteur cumulée (empilement des barres fixed)
+ * Applique l'offset lié aux barres fixed qui entourent `el` :
+ * - mode "page"       : padding-top = barres HAUT précédentes,
+ *                       padding-bottom = barres BAS suivantes
+ *                       (+ variables --q-page-offset / --q-page-offset-bottom)
+ * - mode "bar"        : top = hauteur cumulée (empilement des barres fixed HAUT)
+ * - mode "bar-bottom" : bottom = hauteur cumulée (empilement des footers fixed
+ *                       depuis le bas de l'écran)
  *
  * `enabled` permet de n'activer que dans certaines conditions (ex. props.fixed).
  */
 export function useFixedBarOffset(
   el: Ref<HTMLElement | null>,
-  mode: "page" | "bar",
+  mode: "page" | "bar" | "bar-bottom",
   enabled: () => boolean = () => true,
 ) {
   let ro: ResizeObserver | null = null
@@ -75,14 +108,22 @@ export function useFixedBarOffset(
   const apply = () => {
     const node = el.value
     if (!node || !enabled()) return
-    const h = fixedBarsHeightBefore(node)
     if (mode === "page") {
-      node.style.setProperty("--q-page-offset", h ? `${h}px` : "0px")
-      node.style.paddingTop = h ? `${h}px` : ""
+      const top = fixedBarsHeightBefore(node)
+      const bottom = fixedBarsHeightAfter(node)
+      node.style.setProperty("--q-page-offset", top ? `${top}px` : "0px")
+      node.style.setProperty("--q-page-offset-bottom", bottom ? `${bottom}px` : "0px")
+      node.style.paddingTop = top ? `${top}px` : ""
+      node.style.paddingBottom = bottom ? `${bottom}px` : ""
     }
-    else {
+    else if (mode === "bar") {
+      const h = fixedBarsHeightBefore(node)
       node.style.top = h ? `${h}px` : ""
     }
+    else {
+      const h = fixedBarsHeightAfter(node)
+      node.style.bottom = h ? `${h}px` : ""
+    }
   }
 
   const clear = () => {
@@ -90,11 +131,16 @@ export function useFixedBarOffset(
     if (!node) return
     if (mode === "page") {
       node.style.removeProperty("--q-page-offset")
+      node.style.removeProperty("--q-page-offset-bottom")
       node.style.paddingTop = ""
+      node.style.paddingBottom = ""
     }
-    else {
+    else if (mode === "bar") {
       node.style.top = ""
     }
+    else {
+      node.style.bottom = ""
+    }
   }
 
   onMounted(() => {

package/lib/platform.ts

@@ -1,5 +1,6 @@
 // $q.platform — détection de plateforme (API groupée sous `is`)
 // + breakpoints réactifs (VueUse useBreakpoints, tailles Quasar).
+// API alignée sur Quasar : https://quasar.dev/options/platform-detection
 import { useBreakpoints } from "@vueuse/core"
 
 export interface QPlatformIs {
@@ -9,6 +10,8 @@ export interface QPlatformIs {
   desktop: boolean
   /** mobile ET Capacitor/Cordova (app native) */
   nativeMobile: boolean
+  /** nom du wrapper natif : 'cordova' | 'capacitor' | undefined */
+  nativeMobileWrapper?: "cordova" | "capacitor"
   ios: boolean
   android: boolean
   iphone: boolean
@@ -22,12 +25,40 @@ export interface QPlatformIs {
   firefox: boolean
   opera: boolean
   safari: boolean
+  vivaldi: boolean
   ie: boolean
+  /** moteur WebKit (Safari, Chrome, Edge…) */
+  webkit: boolean
+  /** extension navigateur (BEX — Chrome/Firefox) */
+  bex: boolean
+  /** Chrome OS (Chromebook) */
+  cros: boolean
+  blackberry: boolean
+  winphone: boolean
+  /** Amazon Silk (Kindle) */
+  silk: boolean
   cordova: boolean
   capacitor: boolean
   electron: boolean
+  /** écran tactile */
   touch: boolean
+  /** pointeur précis (souris) disponible */
   mouse: boolean
+  /** nom du navigateur : 'chrome' | 'firefox' | 'safari' | … | 'generic' */
+  name: string
+  /** version complète du navigateur ('70.0.3538.110') */
+  version: string
+  /** version majeure du navigateur (70, ou -1 si inconnue) */
+  versionNumber: number
+  /** nom de l'OS : 'mac' | 'win' | 'linux' | 'ios' | 'android' | 'cros' | … */
+  platform: string
+}
+
+export interface QPlatformHas {
+  /** écran tactile capable */
+  touch: boolean
+  /** localStorage / sessionStorage disponibles */
+  webStorage: boolean
 }
 
 export interface QPlatform {
@@ -38,25 +69,111 @@ export interface QPlatform {
   isClient: boolean
   /** booléens de détection groupés : $q.platform.is.mobile, is.ios, … */
   is: QPlatformIs
+  /** capacités : has.touch, has.webStorage */
+  has: QPlatformHas
   within: { iframe: boolean }
 }
 
+function emptyIs(): QPlatformIs {
+  return {
+    mobile: false,
+    tablet: false,
+    desktop: false,
+    nativeMobile: false,
+    nativeMobileWrapper: undefined,
+    ios: false,
+    android: false,
+    iphone: false,
+    ipad: false,
+    ipod: false,
+    mac: false,
+    win: false,
+    linux: false,
+    chrome: false,
+    edge: false,
+    firefox: false,
+    opera: false,
+    safari: false,
+    vivaldi: false,
+    ie: false,
+    webkit: false,
+    bex: false,
+    cros: false,
+    blackberry: false,
+    winphone: false,
+    silk: false,
+    cordova: false,
+    capacitor: false,
+    electron: false,
+    touch: false,
+    mouse: false,
+    name: "",
+    version: "",
+    versionNumber: -1,
+    platform: "",
+  }
+}
+
+/** Nom + version du navigateur depuis l'UA (ordre = spécificité) */
+function detectBrowser(ua: string) {
+  const m = (re: RegExp) => ua.match(re)?.[1] ?? ""
+  let name = "generic"
+  let version = ""
+
+  if (/vivaldi\/([\d.]+)/i.test(ua)) {
+    name = "vivaldi"
+    version = m(/vivaldi\/([\d.]+)/i)
+  }
+  else if (/edg\/([\d.]+)/i.test(ua)) {
+    name = "edge"
+    version = m(/edg\/([\d.]+)/i)
+  }
+  else if (/edge\/([\d.]+)/i.test(ua)) {
+    name = "edge"
+    version = m(/edge\/([\d.]+)/i)
+  }
+  else if (/opr\/([\d.]+)/i.test(ua)) {
+    name = "opera"
+    version = m(/opr\/([\d.]+)/i)
+  }
+  else if (/opera\/([\d.]+)/i.test(ua)) {
+    name = "opera"
+    version = m(/opera\/([\d.]+)/i)
+  }
+  else if (/(?:chrome|crios)\/([\d.]+)/i.test(ua)) {
+    name = "chrome"
+    version = m(/(?:chrome|crios)\/([\d.]+)/i)
+  }
+  else if (/(?:firefox|fxios)\/([\d.]+)/i.test(ua)) {
+    name = "firefox"
+    version = m(/(?:firefox|fxios)\/([\d.]+)/i)
+  }
+  else if (/msie ([\d.]+)/i.test(ua)) {
+    name = "ie"
+    version = m(/msie ([\d.]+)/i)
+  }
+  else if (/trident\/.*rv:([\d.]+)/i.test(ua)) {
+    name = "ie"
+    version = m(/trident\/.*rv:([\d.]+)/i)
+  }
+  else if (/version\/([\d.]+)/i.test(ua)) {
+    name = "safari"
+    version = m(/version\/([\d.]+)/i)
+  }
+
+  const versionNumber = version ? parseInt(version.split(".")[0]!, 10) || -1 : -1
+  return { name, version, versionNumber }
+}
+
 function detect(): QPlatform {
   if (typeof window === "undefined" || typeof navigator === "undefined") {
-    const empty = Object.fromEntries(
-      [
-        "mobile", "tablet", "desktop", "nativeMobile", "ios", "android", "iphone",
-        "ipad", "ipod", "mac", "win", "linux", "chrome", "edge", "firefox",
-        "opera", "safari", "ie", "cordova", "capacitor", "electron", "touch", "mouse",
-      ].map((k) => [k, false]),
-    ) as unknown as QPlatformIs
-
     return {
       userAgent: "",
       platform: "",
       isServer: true,
       isClient: false,
-      is: empty,
+      is: emptyIs(),
+      has: { touch: false, webStorage: false },
       within: { iframe: false },
     }
   }
@@ -71,17 +188,54 @@ function detect(): QPlatform {
   // iPad modernes : MacIntel + écran tactile multi-points
   const ipad = /ipad/i.test(ua) || (/macintosh|macintel/i.test(platform) && (nav.maxTouchPoints ?? 0) > 1)
   const android = /android/i.test(ua)
+  const blackberry = /blackberry/i.test(ua)
+  const winphone = /windows phone/i.test(ua)
+  // Chromebooks : navigator.platform vaut "CrOS x86_64" (ou "Linux x86_64" ancien)
+  const cros = /cros/i.test(platform)
+  const silk = /silk/i.test(ua)
 
   const touch = "ontouchstart" in window || (nav.maxTouchPoints ?? 0) > 0
   const mobileUA = /mobile|iphone|ipod|android|windows phone|blackberry/i.test(ua)
   const tablet = ipad || (android && !mobileUA)
   const mobile = mobileUA || (tablet ? false : touch && /android|ipad|iphone/i.test(ua))
 
+  const cordova = "cordova" in window
+  const capacitor = !!(window as any).Capacitor?.isNativePlatform?.()
+  const nativeMobileWrapper: "cordova" | "capacitor" | undefined = capacitor
+    ? "capacitor"
+    : cordova
+      ? "cordova"
+      : undefined
+
+  // nom de l'OS (miroir de l'API Quasar : is.platform)
+  let osName = "generic"
+  if (android) osName = "android"
+  else if (ios) osName = "ios"
+  else if (blackberry) osName = "blackberry"
+  else if (winphone) osName = "winphone"
+  else if (cros) osName = "cros"
+  else if (silk) osName = "silk"
+  else if (/mac|iphone|ipad|ipod/i.test(ua)) osName = "mac"
+  else if (/win/i.test(ua)) osName = "win"
+  else if (/linux/i.test(platform)) osName = "linux"
+
+  let webStorage = false
+  try {
+    webStorage = typeof window.localStorage !== "undefined"
+  }
+  catch {
+    webStorage = false
+  }
+
+  const browser = detectBrowser(ua)
+  const notChromium = !/(edg|opr|vivaldi)/i.test(ua)
+
   const is: QPlatformIs = {
     mobile,
     tablet,
     desktop: !mobileUA && !tablet,
-    nativeMobile: false, // affiné après (Capacitor/Cordova)
+    nativeMobile: mobile && (capacitor || cordova),
+    nativeMobileWrapper,
     ios,
     android,
     iphone,
@@ -90,28 +244,40 @@ function detect(): QPlatform {
     mac: /mac|iphone|ipad|ipod/i.test(ua),
     win: /win/i.test(ua),
     linux: /linux/i.test(platform),
-    chrome: /chrome|crios/i.test(ua) && !/edg/i.test(ua),
-    edge: /edg/i.test(ua),
+    chrome: /chrome|crios/i.test(ua) && notChromium,
+    edge: /edg|edge/i.test(ua),
     firefox: /firefox|fxios/i.test(ua),
     opera: /opr|opera/i.test(ua),
-    safari: /safari/i.test(ua) && !/chrome|crios|edg|opr/i.test(ua),
+    safari: /safari/i.test(ua) && notChromium && !/chrome|crios/i.test(ua),
+    vivaldi: /vivaldi/i.test(ua),
     ie: /msie|trident/i.test(ua),
-    cordova: typeof window !== "undefined" && "cordova" in window,
-    capacitor: typeof window !== "undefined" && !!(window as any).Capacitor?.isNativePlatform?.(),
+    webkit: /applewebkit/i.test(ua),
+    bex:
+      typeof window !== "undefined" &&
+      !!((window as any).chrome?.runtime?.id || (globalThis as any).browser?.runtime?.id),
+    cros,
+    blackberry,
+    winphone,
+    silk,
+    cordova,
+    capacitor,
     electron: /electron/i.test(ua),
     touch,
-    mouse: typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches,
+    mouse:
+      typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches,
+    name: browser.name,
+    version: browser.version,
+    versionNumber: browser.versionNumber,
+    platform: osName,
   }
 
-  // nativeMobile : mobile + Capacitor/Cordova
-  is.nativeMobile = is.mobile && (is.capacitor || is.cordova)
-
   return {
     userAgent: ua,
     platform,
     isServer: false,
     isClient: true,
     is,
+    has: { touch, webStorage },
     within: { iframe: window.self !== window.top },
   }
 }

package/lib/q.ts

@@ -5,9 +5,9 @@
 //   app.use(QPlugin)  →  accès $q via this.$q / getCurrentInstance().proxy.$q
 // ou import direct :
 //   import { $q } from "@dnax/ui"  →  $q.dialog.open(...)
-import { ref } from "vue"
+import { inject, ref } from "vue"
 import { h } from "vue"
-import type { App, Component, Ref } from "vue"
+import type { App, Component, InjectionKey, Ref } from "vue"
 import { toast } from "vue-sonner"
 import type { ExternalToast } from "vue-sonner"
 import QNotifyToast from "../components/QNotifyToast.vue"
@@ -44,6 +44,39 @@ export interface DialogController {
   _opts: DialogOptions
 }
 
+// — Contexte plugin dialog (pattern Quasar) —
+// Le composant passé à $q.dialog.open({ component }) DOIT contenir un
+// <q-dialog v-model="open" @hide="onDialogHide"> à sa racine ; il pilote
+// l'ouverture via le composable useDialogPluginComponent().
+export interface DialogPluginContext {
+  /** Ref d'ouverture (v-model du <q-dialog> du composant) */
+  open: Ref<boolean>
+  /** Ferme en validant — le résolveur onOK est appelé */
+  onOK: (data?: unknown) => void
+  /** Ferme en annulant — le résolveur onCancel est appelé */
+  onCancel: () => void
+  /** Fermé par backdrop / Échap / × — le résolveur onDismiss est appelé */
+  onHide: () => void
+}
+
+export const qDialogPluginKey: InjectionKey<DialogPluginContext> = Symbol("q-dialog-plugin")
+
+/**
+ * Composable Quasar-style pour les composants passés à $q.dialog.open().
+ * Le composant doit rendre un <q-dialog v-model="open" @hide="onDialogHide">
+ * comme racine. Expose aussi onDialogOK / onDialogCancel pour fermer en validant
+ * ou en annulant, et onDialogHide à brancher sur @hide du q-dialog.
+ */
+export function useDialogPluginComponent() {
+  const ctx = inject(qDialogPluginKey, null)
+  return {
+    open: ctx?.open ?? ref(false),
+    onDialogHide: () => ctx?.onHide(),
+    onDialogOK: (data?: unknown) => ctx?.onOK(data),
+    onDialogCancel: () => ctx?.onCancel(),
+  }
+}
+
 // — Pile de dialogues (singleton module-level, client-side) —
 const dialogs: Ref<DialogController[]> = ref([])
 

package/package.json

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

package/scripts/generate-exports.ts

@@ -26,7 +26,7 @@ const exports = files
 
 // Exports manuels (composables / helpers) — conservés à chaque régénération
 const manualExports = `
-export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet } from "./lib/q"
+export { $q, usePlugin, useQ, QPlugin, dialogStack, closeDialog, bottomSheetStack, closeBottomSheet, useDialogPluginComponent } from "./lib/q"
 export type {
   DialogOptions,
   DialogController,