@dnax/ui 0.0.1

package/lib/loading.ts

@@ -0,0 +1,75 @@
+// $q.loading — overlay de chargement plein écran façon Quasar
+// (https://quasar.dev/quasar-plugins/loading) : $q.loading.show(opts) / hide() / isActive.
+import { reactive, ref } from "vue"
+import type { Ref } from "vue"
+
+export interface LoadingOptions {
+  /** Message sous le spinner */
+  message?: string
+  /** Taille du spinner en px (défaut : 48) */
+  spinnerSize?: number
+  /** Couleur du spinner : token (primary…) ou hex (défaut : primary) */
+  spinnerColor?: string
+  /** Couleur du message (défaut : #1d1d1d) */
+  messageColor?: string
+  /** Fond de l'overlay (défaut : rgb(0 0 0 / 0.3)) */
+  backgroundColor?: string
+  /** Délai avant affichage en ms (défaut : 0) */
+  delay?: number
+  /** show()/hide() comptés — hide() ne cache que quand tous les show sont retirés */
+  group?: boolean
+  /** Icône Iconify affichée à la place du spinner (ex. : "lucide:loader-circle") */
+  icon?: string
+  /** Couleur de l'icône (défaut : spinnerColor) */
+  iconColor?: string
+  /** Garde la carte (fond blanc + ombre) même avec une icône (défaut : transparent) */
+  boxed?: boolean
+}
+
+export interface QLoadingPlugin {
+  show: (options?: LoadingOptions) => void
+  hide: () => void
+  /** true tant que le loading est affiché */
+  isActive: Ref<boolean>
+}
+
+const visible = ref(false)
+const opts = reactive<Required<Pick<LoadingOptions, "spinnerSize" | "spinnerColor" | "messageColor" | "backgroundColor" | "delay" | "group">> & LoadingOptions>({
+  spinnerSize: 48,
+  spinnerColor: "primary",
+  messageColor: "#1d1d1d",
+  backgroundColor: "rgb(0 0 0 / 0.3)",
+  delay: 0,
+  group: false,
+  icon: undefined,
+  iconColor: undefined,
+  boxed: false,
+})
+
+let groupCount = 0
+let timer: ReturnType<typeof setTimeout> | undefined
+
+function show(options?: LoadingOptions) {
+  if (options) Object.assign(opts, options)
+  if (opts.group) groupCount++
+  if (timer) clearTimeout(timer)
+  timer = setTimeout(() => {
+    visible.value = true
+  }, opts.delay ?? 0)
+}
+
+function hide() {
+  if (opts.group) {
+    groupCount = Math.max(0, groupCount - 1)
+    if (groupCount > 0) return
+  }
+  if (timer) clearTimeout(timer)
+  visible.value = false
+}
+
+export const loading: QLoadingPlugin & { _opts: typeof opts } = {
+  show,
+  hide,
+  isActive: visible,
+  _opts: opts,
+}

package/lib/overlayBack.ts

@@ -0,0 +1,124 @@
+// overlayBack — ferme l'overlay ouvert quand l'utilisateur appuie sur « retour »
+// (bouton back du navigateur, geste iOS, bouton back Android via Capacitor).
+//
+// Le principe : chaque composant overlay (dialog, bottom sheet, action sheet,
+// image preview, sidebar, select/date/country en mode sheet/modal/dialog…)
+// s'enregistre dans une pile LIFO tant qu'il est ouvert, via le composable
+// useOverlayBack(). Un handler global écoute popstate en phase de capture (avant
+// le listener de vue-router) : si un overlay est ouvert, il restaure l'URL
+// courante (history.pushState) et ferme l'overlay au lieu de naviguer.
+//
+// Installation automatique côté Nuxt (module) ou manuelle :
+//   import { installOverlayBackHandler } from "@dnax/ui"
+//   installOverlayBackHandler() // ou avec un router : installOverlayBackHandler(router)
+import { onBeforeUnmount, watch } from "vue"
+import type { Ref } from "vue"
+import type { Router } from "vue-router"
+
+export interface OverlayHandle {
+  /** Ferme l'overlay (set v-model=false, close(), dismiss()…) */
+  close: () => void
+  /** Nom de l'overlay pour le debug (ex. "QDialog") */
+  label?: string
+}
+
+// — Pile LIFO des overlays ouverts (module-level, client-side) —
+const overlayStack: OverlayHandle[] = []
+
+/** Enregistre un overlay ouvert — retourne un unregister */
+export function registerOverlay(handle: OverlayHandle): () => void {
+  overlayStack.push(handle)
+  return () => unregisterOverlay(handle)
+}
+
+export function unregisterOverlay(handle: OverlayHandle) {
+  const idx = overlayStack.indexOf(handle)
+  if (idx !== -1) overlayStack.splice(idx, 1)
+}
+
+export function hasOpenOverlays(): boolean {
+  return overlayStack.length > 0
+}
+
+/** Ferme le dernier overlay ouvert (le plus haut de la pile) */
+export function closeTopmostOverlay(): boolean {
+  const top = overlayStack[overlayStack.length - 1]
+  if (!top) return false
+  top.close()
+  return true
+}
+
+/**
+ * Composable pour les composants overlay : s'enregistre dans la pile quand
+ * `open` devient vrai, se désenregistre quand il se ferme ou à l'unmount.
+ *
+ *   useOverlayBack(open, () => { open.value = false }, "QDialog")
+ */
+export function useOverlayBack(
+  open: Ref<boolean>,
+  close: () => void,
+  label?: string,
+) {
+  let unregister: (() => void) | null = null
+
+  const sync = (v: boolean) => {
+    if (v) {
+      unregister?.()
+      unregister = registerOverlay({ close, label })
+    }
+    else {
+      unregister?.()
+      unregister = null
+    }
+  }
+
+  watch(open, sync, { immediate: true })
+  onBeforeUnmount(() => unregister?.())
+}
+
+// — Handler global « retour » (popstate) —
+let installed = false
+
+/**
+ * Installe le handler qui ferme l'overlay ouvert sur « retour ».
+ * - Sans router : restaure l'URL courante (pushState) pour annuler le back.
+ * - Avec router : en plus, une garde beforeEach bloque la navigation quand le
+ *   popstate a été consommé par un overlay.
+ *
+ * Idempotent (un seul handler par session). Retourne une fonction de désinstallation.
+ */
+export function installOverlayBackHandler(router?: Router): () => void {
+  if (typeof window === "undefined" || installed) return () => {}
+
+  let consumedPop = false
+
+  const onPopState = () => {
+    if (!hasOpenOverlays()) return
+    // Annule le back du navigateur : on re-pousse l'URL courante avant que le
+    // listener (bubble) de vue-router ne lise la nouvelle URL → navigation no-op.
+    consumedPop = true
+    history.pushState(null, "", window.location.href)
+    closeTopmostOverlay()
+  }
+  // Phase de capture : s'exécute avant le listener bubble du router.
+  window.addEventListener("popstate", onPopState, true)
+
+  let removeGuard = () => {}
+  if (router) {
+    removeGuard = router.beforeEach(() => {
+      if (consumedPop) {
+        consumedPop = false
+        return false // navigation annulée (l'URL a déjà été restaurée)
+      }
+      return true
+    })
+  }
+
+  installed = true
+
+  return () => {
+    window.removeEventListener("popstate", onPopState, true)
+    removeGuard()
+    installed = false
+  }
+}

package/lib/platform.ts

@@ -0,0 +1,146 @@
+// $q.platform — détection de plateforme (API groupée sous `is`)
+// + breakpoints réactifs (VueUse useBreakpoints, tailles Quasar).
+import { useBreakpoints } from "@vueuse/core"
+
+export interface QPlatformIs {
+  /** appareil mobile (web) */
+  mobile: boolean
+  tablet: boolean
+  desktop: boolean
+  /** mobile ET Capacitor/Cordova (app native) */
+  nativeMobile: boolean
+  ios: boolean
+  android: boolean
+  iphone: boolean
+  ipad: boolean
+  ipod: boolean
+  mac: boolean
+  win: boolean
+  linux: boolean
+  chrome: boolean
+  edge: boolean
+  firefox: boolean
+  opera: boolean
+  safari: boolean
+  ie: boolean
+  cordova: boolean
+  capacitor: boolean
+  electron: boolean
+  touch: boolean
+  mouse: boolean
+}
+
+export interface QPlatform {
+  userAgent: string
+  /** navigator.platform ("iPhone", "Linux armv81", …) */
+  platform: string
+  isServer: boolean
+  isClient: boolean
+  /** booléens de détection groupés : $q.platform.is.mobile, is.ios, … */
+  is: QPlatformIs
+  within: { iframe: boolean }
+}
+
+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,
+      within: { iframe: false },
+    }
+  }
+
+  const ua = navigator.userAgent
+  const nav = navigator as Navigator & { maxTouchPoints?: number; platform?: string }
+  const platform = nav.platform ?? ""
+
+  const ios = /iphone|ipad|ipod/i.test(ua)
+  const iphone = /iphone/i.test(ua)
+  const ipod = /ipod/i.test(ua)
+  // 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 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 is: QPlatformIs = {
+    mobile,
+    tablet,
+    desktop: !mobileUA && !tablet,
+    nativeMobile: false, // affiné après (Capacitor/Cordova)
+    ios,
+    android,
+    iphone,
+    ipad,
+    ipod,
+    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),
+    firefox: /firefox|fxios/i.test(ua),
+    opera: /opr|opera/i.test(ua),
+    safari: /safari/i.test(ua) && !/chrome|crios|edg|opr/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?.(),
+    electron: /electron/i.test(ua),
+    touch,
+    mouse: typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches,
+  }
+
+  // nativeMobile : mobile + Capacitor/Cordova
+  is.nativeMobile = is.mobile && (is.capacitor || is.cordova)
+
+  return {
+    userAgent: ua,
+    platform,
+    isServer: false,
+    isClient: true,
+    is,
+    within: { iframe: window.self !== window.top },
+  }
+}
+
+/** Détection statique par session (l'UA ne change pas) — SSR-safe */
+export const platform: QPlatform = detect()
+
+// — Breakpoints réactifs (tailles Quasar) —
+const QUASAR_BREAKPOINTS = { xs: 0, sm: 600, md: 1024, lg: 1440, xl: 1920 }
+
+export const breakpoints = useBreakpoints(QUASAR_BREAKPOINTS)
+
+export const qBreakpoints = {
+  /** ref réactives : true quand la largeur ≥ le seuil */
+  isXs: breakpoints.xs,
+  isSm: breakpoints.sm,
+  isMd: breakpoints.md,
+  isLg: breakpoints.lg,
+  isXl: breakpoints.xl,
+  /** comparaisons */
+  isBelowSm: breakpoints.isSmaller("sm"),
+  isBelowMd: breakpoints.isSmaller("md"),
+  isBelowLg: breakpoints.isSmaller("lg"),
+  isBelowXl: breakpoints.isSmaller("xl"),
+  isAboveSm: breakpoints.isGreaterOrEqual("sm"),
+  isAboveMd: breakpoints.isGreaterOrEqual("md"),
+  isAboveLg: breakpoints.isGreaterOrEqual("lg"),
+  isAboveXl: breakpoints.isGreaterOrEqual("xl"),
+  between: breakpoints.between.bind(breakpoints),
+  /** largeur de fenêtre (pixels) */
+  width: breakpoints.current,
+}

package/lib/primitive.ts

@@ -0,0 +1,25 @@
+import { cloneVNode, defineComponent, h, mergeProps } from "vue"
+import type { PropType } from "vue"
+
+/**
+ * Rendu polymorphe façon reka-ui Primitive : `as` (élément/composant) ou
+ * `as-child` (fusion des attributs/classes sur l'enfant du slot par défaut).
+ * Les classes/listeners passent par les attrs et sont fusionnés.
+ */
+export const QPrimitive = defineComponent({
+  name: "QPrimitive",
+  props: {
+    as: { type: [String, Object] as PropType<string | object>, default: "div" },
+    asChild: Boolean,
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const children = slots.default?.()
+      if (props.asChild && children && children.length > 0) {
+        const node = children[0]!
+        return cloneVNode(node, mergeProps(node.props ?? {}, attrs))
+      }
+      return h(props.as as never, { ...attrs }, children)
+    }
+  },
+})

package/lib/q.ts

@@ -0,0 +1,287 @@
+// $q — plugin global style Quasar : dialogues programmatiques.
+// $q.dialog.open({ component, componentProps, ... }) pousse un dialogue dans la
+// pile (singleton) ; <q-dialog-provider> le rend et le retire à la fermeture.
+// Installation (optionnel, pattern Quasar) :
+//   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 { h } from "vue"
+import type { App, Component, Ref } from "vue"
+import { toast } from "vue-sonner"
+import type { ExternalToast } from "vue-sonner"
+import QNotifyToast from "../components/QNotifyToast.vue"
+import { platform, qBreakpoints } from "./platform"
+import { screen } from "./screen"
+import { loading } from "./loading"
+
+export interface DialogOptions {
+  /** Composant de dialogue (SFC importé) ou nom de composant global */
+  component: Component | string
+  /** Props passées au composant */
+  componentProps?: Record<string, any>
+  /** Titre affiché par QDialogHeader (optionnel — sinon le composant rend son propre header) */
+  title?: string
+  description?: string
+  /** true = plein écran ; string = largeur CSS ("90%") */
+  fullscreen?: boolean | string
+  /** Classe appliquée au contenu du dialogue (q-dialog__content) */
+  class?: string
+  /** Ne se ferme ni au backdrop ni à Échap */
+  persistent?: boolean
+}
+
+export interface DialogController {
+  onOK: (cb: (data?: any) => void | Promise<void>) => DialogController
+  onCancel: (cb: () => void | Promise<void>) => DialogController
+  onDismiss: (cb: () => void | Promise<void>) => DialogController
+  /** Résolveurs enregistrés (consommés par QDialogProvider) */
+  _resolvers: {
+    ok?: (data?: any) => void | Promise<void>
+    cancel?: () => void | Promise<void>
+    dismiss?: () => void | Promise<void>
+  }
+  _opts: DialogOptions
+}
+
+// — Pile de dialogues (singleton module-level, client-side) —
+const dialogs: Ref<DialogController[]> = ref([])
+
+function openDialog(opts: DialogOptions): DialogController {
+  const ctrl: DialogController = {
+    _resolvers: {},
+    _opts: opts,
+    onOK(cb) {
+      ctrl._resolvers.ok = cb
+      return ctrl
+    },
+    onCancel(cb) {
+      ctrl._resolvers.cancel = cb
+      return ctrl
+    },
+    onDismiss(cb) {
+      ctrl._resolvers.dismiss = cb
+      return ctrl
+    },
+  }
+  dialogs.value.push(ctrl)
+  return ctrl
+}
+
+/** Retire un dialogue de la pile (appelé par QDialogProvider à la fermeture) */
+function closeDialog(ctrl: DialogController) {
+  const idx = dialogs.value.indexOf(ctrl)
+  if (idx !== -1) dialogs.value.splice(idx, 1)
+}
+
+export interface BottomSheetOptions {
+  /** Composant à afficher (SFC importé) ou nom de composant global */
+  component: Component | string
+  /** Props passées au composant */
+  componentProps?: Record<string, any>
+  /** Titre affiché par QBottomSheetHeader (optionnel) */
+  title?: string
+  description?: string
+  /** Largeur max du panneau (défaut : 640px) */
+  width?: string
+  /** Hauteur du panneau (sinon max-height 90vh) */
+  height?: string
+  /** Arrondi des coins hauts : true | false | valeur CSS */
+  rounded?: boolean | string
+  dark?: boolean
+  /** Fond translucide (frosted glass) : true = 70%, ou valeur % */
+  translucent?: boolean | number
+  /** Ne se ferme ni au backdrop ni à Échap */
+  persistent?: boolean
+  /** Seuil de drag (px) au-delà duquel on ferme */
+  dragThreshold?: number
+}
+
+export interface BottomSheetController {
+  onOK: (cb: (data?: any) => void | Promise<void>) => BottomSheetController
+  onCancel: (cb: () => void | Promise<void>) => BottomSheetController
+  onDismiss: (cb: () => void | Promise<void>) => BottomSheetController
+  _resolvers: {
+    ok?: (data?: any) => void | Promise<void>
+    cancel?: () => void | Promise<void>
+    dismiss?: () => void | Promise<void>
+  }
+  _opts: BottomSheetOptions
+}
+
+// — Pile de bottom sheets (singleton module-level, client-side) —
+const bottomSheets: Ref<BottomSheetController[]> = ref([])
+
+function openBottomSheet(opts: BottomSheetOptions): BottomSheetController {
+  const ctrl: BottomSheetController = {
+    _resolvers: {},
+    _opts: opts,
+    onOK(cb) {
+      ctrl._resolvers.ok = cb
+      return ctrl
+    },
+    onCancel(cb) {
+      ctrl._resolvers.cancel = cb
+      return ctrl
+    },
+    onDismiss(cb) {
+      ctrl._resolvers.dismiss = cb
+      return ctrl
+    },
+  }
+  bottomSheets.value.push(ctrl)
+  return ctrl
+}
+
+function closeBottomSheet(ctrl: BottomSheetController) {
+  const idx = bottomSheets.value.indexOf(ctrl)
+  if (idx !== -1) bottomSheets.value.splice(idx, 1)
+}
+
+export interface ImagePreviewOptions {
+  /** URLs d'images — string[] ou { src, title? }[] */
+  images: (string | { src: string; title?: string })[]
+  /** Image initiale */
+  index?: number
+  /** Transition d'ouverture : fade | up | down | zoom */
+  transition?: "fade" | "up" | "down" | "zoom"
+  closeBtn?: boolean
+  counter?: boolean
+  closeOnBackdrop?: boolean
+  closeOnSwipeDown?: boolean
+  nav?: boolean
+  /** Rappel à la fermeture (comme onDismiss des dialogs) */
+  onDismiss?: () => void
+}
+
+export interface ImagePreviewController {
+  /** Va à l'image d'index donné */
+  goTo: (index: number) => void
+  _opts: ImagePreviewOptions
+}
+
+// — Pile de visionneuses (singleton module-level, client-side) —
+const imagePreviews: Ref<ImagePreviewController[]> = ref([])
+
+function openImagePreview(opts: ImagePreviewOptions): ImagePreviewController {
+  const ctrl: ImagePreviewController = {
+    _opts: opts,
+    goTo(index) {
+      ctrl._opts.index = Math.max(0, index)
+    },
+  }
+  imagePreviews.value.push(ctrl)
+  return ctrl
+}
+
+/** Retire une visionneuse de la pile (appelé par QImagePreviewProvider à la fermeture) */
+function closeImagePreview(ctrl: ImagePreviewController) {
+  const idx = imagePreviews.value.indexOf(ctrl)
+  if (idx !== -1) imagePreviews.value.splice(idx, 1)
+}
+
+export interface NotifyOptions {
+  /** Message principal */
+  message: string
+  /** Sous-texte (caption Quasar) */
+  caption?: string
+  /** Icône Iconify (ex. : "lucide:info") */
+  icon?: string
+  /** Couleur de fond : token (primary, negative…) ou hex */
+  color?: string
+  /** Type → couleur riche sonner (success, error, warning, info) */
+  type?: "default" | "success" | "error" | "warning" | "info"
+  /** Position (défaut : bottom-right, celle du QNotifyProvider) */
+  position?: ExternalToast["position"]
+  /** Durée d'affichage en ms (défaut : 4000) */
+  timeout?: number
+  /** Bouton(s) d'action — la première est affichée */
+  actions?: { label: string; handler: () => void }[]
+}
+
+export interface NotifyController {
+  /** Ferme la notification immédiatement */
+  dismiss: () => void
+}
+
+function notify(opts: NotifyOptions): NotifyController {
+  const { message, caption, icon, color, type = "default", position, timeout, actions } = opts
+  const action = actions?.[0]
+  const data: ExternalToast = {
+    description: caption,
+    duration: timeout ?? 4000,
+    position,
+    icon: icon ? h(icon) : undefined,
+  }
+
+  let id: string | number | undefined
+
+  if (color && type === "default") {
+    // Couleur Quasar custom → rendu custom (QNotifyToast)
+    id = toast.custom(QNotifyToast, {
+      ...data,
+      componentProps: {
+        message,
+        caption,
+        icon,
+        color,
+        actionLabel: action?.label,
+        onAction: action ? () => action.handler() : undefined,
+        onDismiss: () => toast.dismiss(id),
+      },
+    })
+  }
+  else {
+    const toasts = {
+      success: toast.success,
+      error: toast.error,
+      warning: toast.warning,
+      info: toast.info,
+      default: toast,
+    } as const
+    id = toasts[type](message, {
+      ...data,
+      action: action ? { label: action.label, onClick: () => action.handler() } : undefined,
+    })
+  }
+
+  return { dismiss: () => toast.dismiss(id) }
+}
+
+/** API publique : $q.dialog / $q.bottomSheet / $q.notify / $q.imagePreview / $q.platform / $q.breakpoints / $q.screen / $q.loading */
+export const $q = {
+  dialog: {
+    open: openDialog,
+  },
+  bottomSheet: {
+    open: openBottomSheet,
+  },
+  imagePreview: {
+    open: openImagePreview,
+  },
+  notify,
+  platform,
+  breakpoints: qBreakpoints,
+  screen,
+  loading,
+}
+
+/** Accès programmatique aux plugins ($q.dialog, $q.notify, $q.loading…) */
+export function usePlugin() {
+  return $q
+}
+
+/** @deprecated Utilisez usePlugin() — conservé pour rétrocompatibilité */
+export const useQ = usePlugin
+
+/** Plugin Vue : app.use(QPlugin) → this.$q / proxy.$q (pattern Quasar) */
+export const QPlugin = {
+  install(app: App) {
+    app.config.globalProperties.$q = $q
+  },
+}
+
+// — Internes consommés par QDialogProvider / QBottomSheetProvider / QImagePreviewProvider —
+export { dialogs as dialogStack, closeDialog }
+export { bottomSheets as bottomSheetStack, closeBottomSheet }
+export { imagePreviews as imagePreviewStack, closeImagePreview }