@dnax/ui 0.0.64 → 0.0.66

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

@@ -102,6 +102,17 @@ describe("classes de style (composant ↔ CSS)", () => {
     ],
     ["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",
+    ],
+    ["components/QTable.vue", "q-table__rows-field", ".q-table__rows-field"],
   ]
 
   for (const [file, className, selector] of CONTRACTS) {
@@ -129,6 +140,41 @@ 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("pagination de QTable", () => {
+  it("le sélecteur « lignes par page » est un QSelect, pas un `<select>` natif", async () => {
+    const vue = await Bun.file(new URL("../components/QTable.vue", import.meta.url)).text()
+    expect({ usesQSelect: vue.includes("<q-select") }).toEqual({ usesQSelect: true })
+    expect({ nativeSelect: /<select\b/.test(vue) }).toEqual({ nativeSelect: false })
+  })
+
+  it("la liste vient de la prop publique `rows-per-page-options` (aucun tableau dérivé)", async () => {
+    const vue = await Bun.file(new URL("../components/QTable.vue", import.meta.url)).text()
+    expect({ fromProp: vue.includes(':options="rowsPerPageOptions"') }).toEqual({ fromProp: true })
+    expect({ derived: vue.includes("rowsPerPageChoices") }).toEqual({ derived: false })
+  })
+})
+
 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/wakeLock.test.ts

@@ -0,0 +1,219 @@
+// $q.wakeLock — Screen Wake Lock : logique pure + fabrique testable hors navigateur.
+import { describe, expect, it } from "bun:test"
+import {
+  createWakeLock,
+  isDocumentVisible,
+  isWakeLockCapable,
+  shouldReacquire,
+} from "./wakeLock"
+
+class FakeSentinel {
+  released = false
+  releaseCalls = 0
+  private listeners = new Set<() => void>()
+
+  async release() {
+    this.releaseCalls++
+    this.released = true
+    for (const cb of [...this.listeners]) cb()
+  }
+
+  addEventListener(_type: "release", cb: () => void) {
+    this.listeners.add(cb)
+  }
+
+  removeEventListener(_type: "release", cb: () => void) {
+    this.listeners.delete(cb)
+  }
+
+  /** Simule le relâchement décidé par le navigateur (page masquée, veille…). */
+  autoRelease() {
+    this.released = true
+    for (const cb of [...this.listeners]) cb()
+  }
+}
+
+function fakeApi(options: { fail?: Error } = {}) {
+  const sentinels: FakeSentinel[] = []
+  return {
+    calls: 0,
+    sentinels,
+    async request(_type: "screen") {
+      this.calls++
+      if (options.fail) throw options.fail
+      const s = new FakeSentinel()
+      sentinels.push(s)
+      return s
+    },
+  }
+}
+
+function fakeVisibility(state = "visible") {
+  const listeners = new Set<() => void>()
+  return {
+    visibilityState: state as string,
+    addEventListener(_type: "visibilitychange", cb: () => void) {
+      listeners.add(cb)
+    },
+    removeEventListener(_type: "visibilitychange", cb: () => void) {
+      listeners.delete(cb)
+    },
+    set(next: string) {
+      this.visibilityState = next
+      for (const cb of [...listeners]) cb()
+    },
+    count() {
+      return listeners.size
+    },
+  }
+}
+
+function client(options: Partial<Parameters<typeof createWakeLock>[0]> = {}) {
+  return createWakeLock({
+    server: false,
+    deferCapability: false,
+    api: fakeApi(),
+    visibility: fakeVisibility(),
+    ...options,
+  })
+}
+
+describe("isWakeLockCapable", () => {
+  it("exige une API avec request()", () => {
+    expect(isWakeLockCapable(null)).toBe(false)
+    expect(isWakeLockCapable(undefined)).toBe(false)
+    expect(isWakeLockCapable({} as never)).toBe(false)
+    expect(isWakeLockCapable({ request: async () => new FakeSentinel() })).toBe(true)
+  })
+})
+
+describe("isDocumentVisible", () => {
+  it("visible sauf `visibilityState: 'hidden'` (et sans document injecté)", () => {
+    expect(isDocumentVisible(null)).toBe(true)
+    expect(isDocumentVisible({ addEventListener() {} })).toBe(true)
+    expect(
+      isDocumentVisible({ visibilityState: "visible", addEventListener() {} }),
+    ).toBe(true)
+    expect(
+      isDocumentVisible({ visibilityState: "hidden", addEventListener() {} }),
+    ).toBe(false)
+  })
+})
+
+describe("shouldReacquire", () => {
+  it("uniquement si demandé, visible et rien de tenu", () => {
+    expect(shouldReacquire(true, true, false)).toBe(true)
+    expect(shouldReacquire(false, true, false)).toBe(false)
+    expect(shouldReacquire(true, false, false)).toBe(false)
+    expect(shouldReacquire(true, true, true)).toBe(false)
+  })
+})
+
+describe("createWakeLock", () => {
+  it("au serveur : méthodes sans effet, rien de capable ni d'actif", async () => {
+    const lock = createWakeLock({ server: true })
+    expect(lock.isCapable).toBe(false)
+    expect(lock.isActive).toBe(false)
+    await expect(lock.request()).resolves.toBeUndefined()
+    await expect(lock.release()).resolves.toBeUndefined()
+  })
+
+  it("sans API : `Not capable`", async () => {
+    const lock = client({ api: null })
+    expect(lock.isCapable).toBe(false)
+    await expect(lock.request()).rejects.toThrow("Not capable")
+    expect(lock.isActive).toBe(false)
+  })
+
+  it("request() acquiert le verrou, une seule fois (idempotent)", async () => {
+    const api = fakeApi()
+    const lock = client({ api })
+
+    await lock.request()
+    expect(lock.isActive).toBe(true)
+    expect(api.calls).toBe(1)
+
+    await lock.request()
+    expect(api.calls).toBe(1)
+    expect(lock.isActive).toBe(true)
+  })
+
+  it("release() rend la main au système", async () => {
+    const api = fakeApi()
+    const lock = client({ api })
+
+    await lock.request()
+    await lock.release()
+
+    expect(lock.isActive).toBe(false)
+    expect(api.sentinels[0]!.releaseCalls).toBe(1)
+
+    // Une nouvelle demande fonctionne.
+    await lock.request()
+    expect(api.calls).toBe(2)
+    expect(lock.isActive).toBe(true)
+  })
+
+  it("le navigateur relâche → isActive retombe, et le verrou est redemandé au retour", async () => {
+    const api = fakeApi()
+    const visibility = fakeVisibility("visible")
+    const lock = client({ api, visibility })
+
+    await lock.request()
+    expect(lock.isActive).toBe(true)
+
+    // Onglet masqué : le navigateur relâche de lui-même.
+    visibility.set("hidden")
+    api.sentinels[0]!.autoRelease()
+    expect(lock.isActive).toBe(false)
+    expect(api.calls).toBe(1)
+
+    // Retour de visibilité : la demande mémorisée est rejouée.
+    visibility.set("visible")
+    await Promise.resolve()
+    expect(api.calls).toBe(2)
+    expect(lock.isActive).toBe(true)
+  })
+
+  it("après release(), plus aucune redemande au changement de visibilité", async () => {
+    const api = fakeApi()
+    const visibility = fakeVisibility("visible")
+    const lock = client({ api, visibility })
+
+    await lock.request()
+    await lock.release()
+
+    visibility.set("hidden")
+    visibility.set("visible")
+    await Promise.resolve()
+
+    expect(api.calls).toBe(1)
+    expect(lock.isActive).toBe(false)
+  })
+
+  it("le refus du navigateur est propagé (échec doux côté appelant)", async () => {
+    const api = fakeApi({ fail: new Error("denied") })
+    const lock = client({ api })
+
+    await expect(lock.request()).rejects.toThrow("denied")
+    expect(lock.isActive).toBe(false)
+  })
+
+  it("destroy() détache l'écouteur de visibilité", async () => {
+    const visibility = fakeVisibility()
+    const lock = client({ visibility })
+
+    expect(visibility.count()).toBe(1)
+    lock.destroy()
+    expect(visibility.count()).toBe(0)
+  })
+
+  it("isCapable n'est révélé qu'après hydratation (report d'un tick)", async () => {
+    const api = fakeApi()
+    const lock = createWakeLock({ server: false, api, visibility: null })
+
+    expect(lock.isCapable).toBe(false)
+    await new Promise((resolve) => setTimeout(resolve, 1))
+    expect(lock.isCapable).toBe(true)
+  })
+})