@dnax/ui 0.0.63 → 0.0.65

package/lib/network.test.ts

@@ -0,0 +1,199 @@
+// $q.network — état de connexion : logique pure + fabrique testable hors DOM.
+// (La règle projet interdit le navigateur : on injecte `navigator` et la cible d'événements.)
+import { describe, expect, it } from "bun:test"
+import { effect } from "vue"
+import { createNetwork, onlineAfterEvent, resolveOnline } from "./network"
+
+/** Fausse cible d'événements (window) + compteur d'écouteurs. */
+function fakeTarget() {
+  const listeners = new Map<string, Set<(event: { type: string }) => void>>()
+  return {
+    addEventListener(type: string, cb: (event: { type: string }) => void) {
+      if (!listeners.has(type)) listeners.set(type, new Set())
+      listeners.get(type)!.add(cb)
+    },
+    removeEventListener(type: string, cb: (event: { type: string }) => void) {
+      listeners.get(type)?.delete(cb)
+    },
+    /** Émet un événement comme le navigateur. */
+    emit(type: string) {
+      for (const cb of [...(listeners.get(type) ?? [])]) cb({ type })
+    },
+    /** Nombre d'écouteurs encore attachés pour ce type. */
+    count(type: string) {
+      return listeners.get(type)?.size ?? 0
+    },
+  }
+}
+
+describe("resolveOnline", () => {
+  it("considère « en ligne » quand l'information manque (serveur, navigateur sans API)", () => {
+    expect(resolveOnline(undefined)).toBe(true)
+    expect(resolveOnline(null)).toBe(true)
+    expect(resolveOnline({})).toBe(true)
+  })
+
+  it("suit navigator.onLine quand il est un booléen", () => {
+    expect(resolveOnline({ onLine: true })).toBe(true)
+    expect(resolveOnline({ onLine: false })).toBe(false)
+  })
+})
+
+describe("onlineAfterEvent", () => {
+  it("online → connecté, offline → déconnecté", () => {
+    expect(onlineAfterEvent("online", false)).toBe(true)
+    expect(onlineAfterEvent("offline", true)).toBe(false)
+  })
+
+  it("un autre événement ne change rien", () => {
+    expect(onlineAfterEvent("focus", false)).toBe(false)
+    expect(onlineAfterEvent("focus", true)).toBe(true)
+  })
+})
+
+describe("createNetwork", () => {
+  it("lit l'état initial dans navigator.onLine", () => {
+    const nav = { onLine: false }
+    const net = createNetwork({ navigator: nav, target: null })
+    expect(net.online).toBe(false)
+    expect(net.offline).toBe(true)
+  })
+
+  it("sans cible (SSR), aucune écoute n'est posée et l'état reste stable", () => {
+    const net = createNetwork({ navigator: null, target: null })
+    expect(net.online).toBe(true)
+  })
+
+  it("suit les événements online / offline de la cible", () => {
+    const target = fakeTarget()
+    const net = createNetwork({ navigator: { onLine: true }, target })
+
+    target.emit("offline")
+    expect(net.online).toBe(false)
+    expect(net.offline).toBe(true)
+
+    target.emit("online")
+    expect(net.online).toBe(true)
+    expect(net.offline).toBe(false)
+  })
+
+  it("est réactif : un effet est rejoué au changement (template `$q.network.online`)", () => {
+    const target = fakeTarget()
+    const net = createNetwork({ navigator: { onLine: true }, target })
+    const seen: boolean[] = []
+
+    effect(() => {
+      seen.push(net.online)
+    })
+
+    target.emit("offline")
+    target.emit("online")
+
+    expect(seen).toEqual([true, false, true])
+  })
+
+  it("ne notifie qu'un vrai changement d'état", () => {
+    const target = fakeTarget()
+    const net = createNetwork({ navigator: { onLine: true }, target })
+    let offlineCalls = 0
+    let onlineCalls = 0
+    net.on("offline", () => offlineCalls++)
+    net.on("online", () => onlineCalls++)
+
+    target.emit("offline")
+    target.emit("offline")
+    target.emit("online")
+    target.emit("online")
+
+    expect(offlineCalls).toBe(1)
+    expect(onlineCalls).toBe(1)
+  })
+
+  it("on() cible le bon événement et rend un désabonnement", () => {
+    const target = fakeTarget()
+    const net = createNetwork({ navigator: { onLine: true }, target })
+    const seen: string[] = []
+    const stopOnline = net.on("online", () => seen.push("online"))
+    net.on("offline", () => seen.push("offline"))
+
+    target.emit("offline")
+    target.emit("online")
+    stopOnline()
+    target.emit("offline")
+    target.emit("online")
+
+    expect(seen).toEqual(["offline", "online", "offline"])
+  })
+
+  it("on() ignore un type inconnu (JS non typé)", () => {
+    const target = fakeTarget()
+    const net = createNetwork({ navigator: { onLine: true }, target })
+    const stop = net.on("focus" as never, () => {
+      throw new Error("ne doit jamais être appelé")
+    })
+
+    target.emit("offline")
+    expect(typeof stop).toBe("function")
+    stop()
+  })
+
+  it("les abonnements se désabonnent", () => {
+    const target = fakeTarget()
+    const net = createNetwork({ navigator: { onLine: true }, target })
+    let calls = 0
+    const off = net.on("offline", () => calls++)
+
+    target.emit("offline")
+    off()
+    target.emit("online")
+    target.emit("offline")
+
+    expect(calls).toBe(1)
+  })
+
+  it("un abonné qui jette ne bloque pas les suivants", () => {
+    const target = fakeTarget()
+    const net = createNetwork({ navigator: { onLine: true }, target })
+    let calls = 0
+    net.on("offline", () => {
+      throw new Error("boom")
+    })
+    net.on("offline", () => calls++)
+
+    target.emit("offline")
+
+    expect(calls).toBe(1)
+  })
+
+  it("refresh() relit navigator.onLine (valeur devenue obsolète)", () => {
+    const nav = { onLine: true }
+    const net = createNetwork({ navigator: nav, target: fakeTarget() })
+
+    nav.onLine = false
+    expect(net.refresh()).toBe(false)
+    expect(net.online).toBe(false)
+
+    nav.onLine = true
+    expect(net.online).toBe(false) // pas de sondage automatique
+    expect(net.refresh()).toBe(true)
+    expect(net.online).toBe(true)
+  })
+
+  it("destroy() détache les écouteurs et vide les abonnements", () => {
+    const target = fakeTarget()
+    const net = createNetwork({ navigator: { onLine: true }, target })
+    let calls = 0
+    net.on("offline", () => calls++)
+
+    expect(target.count("online")).toBe(1)
+    expect(target.count("offline")).toBe(1)
+
+    net.destroy()
+    target.emit("offline")
+
+    expect(target.count("online")).toBe(0)
+    expect(target.count("offline")).toBe(0)
+    expect(net.online).toBe(true)
+    expect(calls).toBe(0)
+  })
+})

package/lib/network.ts

@@ -0,0 +1,147 @@
+// $q.network — état de la connexion réseau (API Quasar-style, SSR-safe).
+//
+// Source unique : `navigator.onLine` + événements `online` / `offline` de `window`.
+// L'objet exposé se lit **sans `.value`** (`$q.network.online`), donc directement dans
+// un template, et reste **réactif** (ses getters lisent une ref interne).
+//
+// Le serveur n'a pas d'état réseau : au SSR `online` vaut `true` (pas de bannière
+// « hors ligne » fantôme). Côté client, l'état réel de `navigator.onLine` est lu au
+// chargement du module, avant hydratation — deux rendus ne diffèrent que si l'appareil
+// est réellement hors ligne (comportement de `useOnline` de VueUse).
+//
+// La logique pure (`resolveOnline`, `onlineAfterEvent`) et la fabrique `createNetwork`
+// (cible d'événements injectable) sont testables sans DOM.
+import { reactive, ref } from "vue"
+
+/** Sous-ensemble de `navigator` utilisé (injectable pour les tests). */
+export interface NetworkNavigator {
+  onLine?: boolean
+}
+
+/** Cible des événements `online` / `offline` (`window` en production, objet factice en test). */
+export interface NetworkEventTarget {
+  addEventListener: (type: string, listener: (event: { type: string }) => void) => void
+  removeEventListener?: (type: string, listener: (event: { type: string }) => void) => void
+}
+
+export interface QNetwork {
+  /** Connecté au réseau — booléen réactif, se lit **sans `.value`** */
+  readonly online: boolean
+  /** Inversé de `online` (`v-if="$q.network.offline"`) */
+  readonly offline: boolean
+  /** Re-lit `navigator.onLine` (retour au premier plan…) et met à jour l'état */
+  refresh: () => boolean
+  /**
+   * Abonnement aux passages `"online"` / `"offline"` (transitions réelles seulement).
+   * Renvoie la fonction de désabonnement.
+   */
+  on: (type: NetworkEvent, cb: () => void) => () => void
+  /** Détache les écouteurs (instance de test / usage hors singleton) */
+  destroy: () => void
+}
+
+/** Événements réseau exposés par `$q.network.on()`. */
+export type NetworkEvent = "online" | "offline"
+
+export interface NetworkOptions {
+  /** Source de `navigator.onLine` (défaut : `navigator` global ; `null` au serveur) */
+  navigator?: NetworkNavigator | null
+  /** Cible des événements (défaut : `window` ; `null` au serveur) */
+  target?: NetworkEventTarget | null
+  /** Force la valeur initiale (sinon `resolveOnline(navigator)`) */
+  initial?: boolean
+}
+
+/**
+ * `true` par défaut : le serveur et les navigateurs sans `navigator.onLine` sont
+ * considérés **en ligne** (évite une bannière « hors ligne » au chargement SSR).
+ */
+export function resolveOnline(nav?: NetworkNavigator | null): boolean {
+  return typeof nav?.onLine === "boolean" ? nav.onLine : true
+}
+
+/** État après un événement : `online` → true, `offline` → false, autre → inchangé. */
+export function onlineAfterEvent(type: string, current: boolean): boolean {
+  if (type === "online") return true
+  if (type === "offline") return false
+  return current
+}
+
+/**
+ * Crée un objet réseau réactif. Sans `target`, aucun écouteur n'est posé (SSR) ;
+ * sans `navigator`, l'état initial vaut `true`.
+ */
+export function createNetwork(options: NetworkOptions = {}): QNetwork {
+  const nav = "navigator" in options
+    ? (options.navigator ?? null)
+    : typeof navigator !== "undefined"
+      ? navigator
+      : null
+  const target = "target" in options
+    ? (options.target ?? null)
+    : typeof window !== "undefined"
+      ? window
+      : null
+
+  const online = ref(options.initial ?? resolveOnline(nav))
+  const listeners: Record<"online" | "offline", Set<() => void>> = {
+    online: new Set(),
+    offline: new Set(),
+  }
+
+  const setOnline = (next: boolean) => {
+    if (online.value === next) return
+    online.value = next
+    for (const cb of [...listeners[next ? "online" : "offline"]]) {
+      try {
+        cb()
+      }
+      catch {
+        // Un abonné fautif ne doit pas empêcher les autres d'être notifiés.
+      }
+    }
+  }
+
+  const handleEvent = (event: { type: string }) => {
+    setOnline(onlineAfterEvent(event.type, online.value))
+  }
+
+  const refresh = () => {
+    const next = resolveOnline(nav)
+    setOnline(next)
+    return next
+  }
+
+  const on = (type: NetworkEvent, cb: () => void) => {
+    // Garde runtime : un type inconnu (JS non typé) renvoie un désabonnement inerte.
+    if (type !== "online" && type !== "offline") return () => {}
+    listeners[type].add(cb)
+    return () => {
+      listeners[type].delete(cb)
+    }
+  }
+
+  target?.addEventListener("online", handleEvent)
+  target?.addEventListener("offline", handleEvent)
+
+  return reactive({
+    /** @see QNetwork.online */
+    get online() {
+      return online.value
+    },
+    get offline() {
+      return !online.value
+    },
+    refresh,
+    on,
+    destroy: () => {
+      target?.removeEventListener?.("online", handleEvent)
+      target?.removeEventListener?.("offline", handleEvent)
+      listeners.online.clear()
+      listeners.offline.clear()
+    },
+  })
+}
+
+/** Singleton exposé sous `$q.network` (et importable directement depuis `@dnax/ui`). */
+export const network: QNetwork = createNetwork()

package/lib/q.ts

@@ -15,6 +15,8 @@ import { platform, qBreakpoints } from "./platform"
 import { screen } from "./screen"
 import { loading } from "./loading"
 import { localStorage, sessionStorage } from "./storage"
+import { network } from "./network"
+import { wakeLock } from "./wakeLock"
 
 export interface DialogOptions {
   /** Composant de dialogue (SFC importé) ou nom de composant global */
@@ -324,7 +326,8 @@ function notify(opts: NotifyOptions): NotifyController {
 }
 
 // API publique : $q.dialog / $q.bottomSheet / $q.notify / $q.imagePreview / $q.platform / $q.breakpoints / $q.screen / $q.loading
-// / $q.localStorage / $q.sessionStorage (stockage web typé)
+// / $q.localStorage / $q.sessionStorage (stockage web typé) / $q.network (connexion en ligne)
+// / $q.wakeLock (écran allumé, Screen Wake Lock API)
 // Conventions Quasar : .open() pour les piles (dialog, bottomSheet, imagePreview),
 // .show() pour notify et loading ; méthodes directes pour le stockage.
 const notifyPlugin = notify as typeof notify & { show: typeof notify }
@@ -347,6 +350,8 @@ export const $q = {
   loading,
   localStorage,
   sessionStorage,
+  network,
+  wakeLock,
 }
 
 /** Accès programmatique aux plugins ($q.dialog, $q.notify, $q.loading…) */

package/lib/styleTokens.test.ts

@@ -101,6 +101,17 @@ describe("classes de style (composant ↔ CSS)", () => {
       ".q-bottom-sheet__header-text--with-description .q-bottom-sheet__title",
     ],
     ["components/QCollapse.vue", "q-collapse--guide", ".q-collapse--guide .q-collapse__inner"],
+    ["components/QTabs.vue", "q-tabs--arrows", ".q-tabs--arrows .q-tabs__content"],
+    [
+      "components/QTabs.vue",
+      "q-tabs--scroll-start",
+      ".q-tabs--arrows.q-tabs--scroll-start .q-tabs__content",
+    ],
+    [
+      "components/QTabs.vue",
+      "q-tabs--scroll-end",
+      ".q-tabs--arrows.q-tabs--scroll-end .q-tabs__content",
+    ],
   ]
 
   for (const [file, className, selector] of CONTRACTS) {
@@ -128,6 +139,27 @@ describe("classes de style (composant ↔ CSS)", () => {
   })
 })
 
+describe("fondu de défilement des tabs (thème-agnostique)", () => {
+  const block = blockAfter(css, ".q-tabs--arrows .q-tabs__content")
+
+  it("le fondu est un masque alpha (`#fff`), sans couleur de thème", () => {
+    // `#fff` est opaque en mode `alpha` ET `luminance` (ancien WebKit).
+    expect({ defined: block !== undefined }).toEqual({ defined: true })
+    expect({ hasMask: block!.includes("mask-image") }).toEqual({ hasMask: true })
+    expect({ opaque: block!.includes("#fff") }).toEqual({ opaque: true })
+    // Aucune couleur de surface : le fondu ne peut pas se désaligner d'un thème à l'autre.
+    expect({ themeColor: block!.includes("var(--card") }).toEqual({ themeColor: false })
+    expect({ hardcodedBlack: block!.includes("rgb(0 0 0") }).toEqual({ hardcodedBlack: false })
+  })
+
+  it("le fondu suit l'axe des tabs (horizontal → to right, vertical → to bottom)", () => {
+    const vertical = blockAfter(css, ".q-tabs--vertical.q-tabs--arrows .q-tabs__content")
+    expect({ defined: vertical !== undefined }).toEqual({ defined: true })
+    expect({ right: block!.includes("to right") }).toEqual({ right: true })
+    expect({ bottom: vertical!.includes("to bottom") }).toEqual({ bottom: true })
+  })
+})
+
 describe("mode sombre des contrôles", () => {
   it("la bordure noire du checkbox / radio décoché est corrigée en sombre", () => {
     // Base claire : bordure codée en dur (le variant `--dark` du composant la corrige, mais

package/lib/tabs.test.ts

@@ -0,0 +1,35 @@
+// Tests unitaires des flèches de défilement de QTabs (`lib/tabs.ts`).
+import { describe, expect, it } from "bun:test"
+import { tabArrowState, tabArrowStep } from "./tabs"
+
+describe("tabArrowState", () => {
+  it("pas de débordement → aucune flèche", () => {
+    expect(tabArrowState(0, 400, 400)).toEqual({ canStart: false, canEnd: false })
+  })
+
+  it("début → seule la flèche de fin", () => {
+    expect(tabArrowState(0, 400, 900)).toEqual({ canStart: false, canEnd: true })
+  })
+
+  it("milieu → les deux flèches", () => {
+    expect(tabArrowState(200, 400, 900)).toEqual({ canStart: true, canEnd: true })
+  })
+
+  it("fin → seule la flèche de début", () => {
+    expect(tabArrowState(500, 400, 900)).toEqual({ canStart: true, canEnd: false })
+  })
+
+  it("tolère l'arrondi des sous-pixels (1 px)", () => {
+    // Collé au début malgré un `scrollLeft` de 1 (arrondi)
+    expect(tabArrowState(1, 400, 900)).toEqual({ canStart: false, canEnd: true })
+    // Collé à la fin malgré un `scrollLeft` à 1 px du max
+    expect(tabArrowState(499, 400, 900)).toEqual({ canStart: true, canEnd: false })
+  })
+})
+
+describe("tabArrowStep", () => {
+  it("avance d'environ 60 % de la zone visible, avec un plancher de 80 px", () => {
+    expect(tabArrowStep(400)).toBe(240)
+    expect(tabArrowStep(100)).toBe(80) // 60 < 80 → plancher
+  })
+})

package/lib/tabs.ts

@@ -0,0 +1,38 @@
+// Flèches de défilement de QTabs (`show-arrows`, comportement Quasar) : décide si les boutons
+// de début / fin doivent apparaître, selon la position de défilement et les mesures.
+//
+// Logique **pure**, testable hors navigateur. Les navigateurs arrondissent `scrollLeft` /
+// `scrollTop` (sous-pixels, zoom) : on tolère 1 px pour ne pas faire clignoter une flèche.
+
+const EPSILON = 1
+
+export interface QTabArrowState {
+  /** On peut défiler vers le **début** (gauche / haut) */
+  canStart: boolean
+  /** On peut défiler vers la **fin** (droite / bas) */
+  canEnd: boolean
+}
+
+/**
+ * État des flèches pour un axe donné.
+ *
+ * @param position   `scrollLeft` / `scrollTop`
+ * @param clientSize `clientWidth` / `clientHeight` (partie visible)
+ * @param scrollSize `scrollWidth` / `scrollHeight` (contenu total)
+ */
+export function tabArrowState(
+  position: number,
+  clientSize: number,
+  scrollSize: number,
+): QTabArrowState {
+  const overflow = scrollSize - clientSize
+  return {
+    canStart: position > EPSILON,
+    canEnd: overflow > EPSILON && position < overflow - EPSILON,
+  }
+}
+
+/** Déplacement d'un clic sur une flèche : ~60 % de la zone visible (au moins 80 px). */
+export function tabArrowStep(clientSize: number): number {
+  return Math.max(80, Math.round(clientSize * 0.6))
+}