@dnax/ui 0.0.63 → 0.0.65

package/components/QDatePicker.vue

@@ -9,6 +9,8 @@ import { icons } from "../lib/icons"
 import { cn } from "../lib/utils"
 import { useOverlayBack } from "../lib/overlayBack"
 import { placePopover, type PopoverPlacement } from "../lib/datePicker"
+import { useConfigLang } from "../lib/useComponentProps"
+import { dateLabels, dateLocale } from "../lib/dateI18n"
 import QDateCalendar from "./internal/QDateCalendar.vue"
 
 interface Props {
@@ -43,7 +45,7 @@ interface Props {
   width?: string
   /** Titre du panneau (modes à voile : sheet/modal/dialog) */
   title?: string
-  /** Raccourci « Today » sous le calendrier (tous les modes) */
+  /** Raccourci « aujourd'hui » sous le calendrier (tous les modes) */
   todayBtn?: boolean
   /** En-tête : libellé cliquable ouvrant le choix du mois (tous les modes) */
   monthDropdown?: boolean
@@ -75,6 +77,11 @@ const emit = defineEmits<{
   clear: []
 }>()
 
+// Langue de l'app (`QConfigProvider lang`) : format d'affichage et libellés.
+const configLang = useConfigLang()
+const locale = computed(() => dateLocale(configLang.value))
+const labels = computed(() => dateLabels(configLang.value))
+
 /** Champ déclencheur (tout sauf `inline`) */
 const isPanelMode = computed(() => props.mode !== "inline")
 /** Panneau ancré au champ : ni voile, ni blocage du scroll, ni retour navigateur */
@@ -98,7 +105,7 @@ const formatFn = computed(
   () =>
     props.format ??
     ((d: Date) =>
-      new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "short", year: "numeric" }).format(d)),
+      new Intl.DateTimeFormat(locale.value, { day: "2-digit", month: "short", year: "numeric" }).format(d)),
 )
 
 const displayText = computed(() => (props.modelValue ? formatFn.value(props.modelValue) : ""))
@@ -139,7 +146,7 @@ const closePopup = () => {
   open.value = false
 }
 
-const sheetTitle = computed(() => props.title || props.label || "Sélectionner une date")
+const sheetTitle = computed(() => props.title || props.label || labels.value.selectDate)
 
 const sheetStyle = computed<Record<string, string> | undefined>(() =>
   props.width ? { width: props.width, maxWidth: props.width } : undefined,
@@ -263,7 +270,7 @@ onBeforeUnmount(() => {
           v-if="clearable && modelValue && !disable && !readonly"
           class="q-field__clear"
           type="button"
-          aria-label="Effacer"
+          :aria-label="labels.clear"
           @click.stop="onClear"
         >
           <Icon :icon="icons.x" aria-hidden="true" />
@@ -304,7 +311,7 @@ onBeforeUnmount(() => {
                 <button
                   type="button"
                   class="q-date-picker__sheet-close"
-                  :aria-label="`Fermer ${sheetTitle}`"
+                  :aria-label="`${labels.close} ${sheetTitle}`"
                   @click="closePopup"
                 >
                   <Icon :icon="icons.x" aria-hidden="true" />

package/components/QTabs.vue

@@ -25,9 +25,12 @@ export const qTabsKey: InjectionKey<QTabContext> = Symbol("q-tabs")
 
 <script setup lang="ts">
 import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch } from "vue"
+import { Icon } from "@iconify/vue"
 import { cva } from "class-variance-authority"
 import { cn } from "../lib/utils"
 import { colorValue } from "../lib/colors"
+import { icons } from "../lib/icons"
+import { tabArrowState, tabArrowStep } from "../lib/tabs"
 
 const tabsVariants = cva("q-tabs", {
   variants: {
@@ -70,6 +73,12 @@ interface Props {
   switchIndicatorPosition?: boolean | "top" | "bottom"
   /** Tabs en colonne (verticales) */
   vertical?: boolean
+  /**
+   * **Flèches de défilement** quand les tabs débordent (comportement Quasar, défaut `true`) :
+   * le contenu devient défilable et deux boutons apparaissent aux extrémités débordantes.
+   * `false` → aucun défilement (les tabs débordent, comme avant).
+   */
+  showArrows?: boolean
   /** Ne pas s'étendre (usage dans un QToolbar) */
   shrink?: boolean
   /** S'étendre sur l'axe croisé du parent flex */
@@ -106,6 +115,7 @@ const props = withDefaults(defineProps<Props>(), {
   noCaps: false,
   switchIndicatorPosition: undefined,
   vertical: false,
+  showArrows: true,
   shrink: false,
   stretch: false,
   contentClass: "",
@@ -148,10 +158,39 @@ const tabRegs = shallowRef<QTabRegistration[]>([])
 const tick = ref(0)
 const rootEl = ref<HTMLElement | null>(null)
 
-// Recalcule la position de l'indicateur après chaque changement de DOM
+// — Flèches de défilement (`show-arrows`, comportement Quasar) —
+const contentEl = ref<HTMLElement | null>(null)
+const canScrollStart = ref(false)
+const canScrollEnd = ref(false)
+let contentObserver: ResizeObserver | null = null
+
+/** Met à jour la visibilité des flèches depuis les mesures de défilement (axe courant). */
+const updateArrows = () => {
+  const el = contentEl.value
+  if (!el) return
+  const state = props.vertical
+    ? tabArrowState(el.scrollTop, el.clientHeight, el.scrollHeight)
+    : tabArrowState(el.scrollLeft, el.clientWidth, el.scrollWidth)
+  canScrollStart.value = state.canStart
+  canScrollEnd.value = state.canEnd
+}
+
+/** Fait défiler d'un cran (≈ 60 % de la zone visible) — fluide. */
+const scrollArrows = (dir: -1 | 1) => {
+  const el = contentEl.value
+  if (!el) return
+  const delta = tabArrowStep(props.vertical ? el.clientHeight : el.clientWidth) * dir
+  el.scrollBy(props.vertical ? { top: delta, behavior: "smooth" } : { left: delta, behavior: "smooth" })
+}
+
+/** Débordement réel → les deux flèches existent (celle du côté bloqué est **désactivée**). */
+const scrollable = computed(() => canScrollStart.value || canScrollEnd.value)
+
+// Recalcule la position de l'indicateur (et les flèches) après chaque changement de DOM
 const measure = async () => {
   await nextTick()
   tick.value++
+  updateArrows()
 }
 
 // collapse-inactive : le label s'étend/retombe via une transition max-width
@@ -169,10 +208,18 @@ onMounted(() => {
   measure()
   if (typeof window !== "undefined") window.addEventListener("resize", measure)
   rootEl.value?.addEventListener("transitionend", onCollapseEnd)
+  // Le conteneur peut changer de largeur sans resize fenêtre (sidebar, flex…) : les
+  // flèches doivent suivre le débordement réel.
+  if (typeof ResizeObserver !== "undefined" && contentEl.value) {
+    contentObserver = new ResizeObserver(updateArrows)
+    contentObserver.observe(contentEl.value)
+  }
 })
 onBeforeUnmount(() => {
   if (typeof window !== "undefined") window.removeEventListener("resize", measure)
   rootEl.value?.removeEventListener("transitionend", onCollapseEnd)
+  contentObserver?.disconnect()
+  contentObserver = null
 })
 
 const context: QTabContext = {
@@ -240,6 +287,11 @@ const tabsClasses = computed(() =>
     props.animated && "q-tabs--animated",
     props.animated && `q-tabs--anim-${props.transition}`,
     props.collapseInactive && "q-tabs--collapse-inactive",
+    props.showArrows && "q-tabs--arrows",
+    // Fondu des bords : uniquement du côté où il reste du contenu à révéler (le CSS
+    // n'utilise qu'un masque alpha → rendu identique en thème clair et sombre).
+    props.showArrows && canScrollStart.value && "q-tabs--scroll-start",
+    props.showArrows && canScrollEnd.value && "q-tabs--scroll-end",
   ),
 )
 </script>
@@ -253,9 +305,34 @@ const tabsClasses = computed(() =>
     role="tablist"
     :aria-orientation="vertical ? 'vertical' : 'horizontal'"
   >
-    <div class="q-tabs__content" :class="contentClass">
+    <button
+      v-if="showArrows && scrollable"
+      type="button"
+      class="q-tabs__arrow q-tabs__arrow--start"
+      :disabled="!canScrollStart"
+      :aria-label="vertical ? 'Defiler les onglets vers le haut' : 'Defiler les onglets vers la gauche'"
+      @click="scrollArrows(-1)"
+    >
+      <Icon :icon="vertical ? icons.chevronUp : icons.chevronLeft" aria-hidden="true" />
+    </button>
+    <div
+      ref="contentEl"
+      class="q-tabs__content"
+      :class="contentClass"
+      @scroll="updateArrows"
+    >
       <slot />
       <div class="q-tabs__indicator" :style="indicatorStyle" aria-hidden="true" />
     </div>
+    <button
+      v-if="showArrows && scrollable"
+      type="button"
+      class="q-tabs__arrow q-tabs__arrow--end"
+      :disabled="!canScrollEnd"
+      :aria-label="vertical ? 'Defiler les onglets vers le bas' : 'Defiler les onglets vers la droite'"
+      @click="scrollArrows(1)"
+    >
+      <Icon :icon="vertical ? icons.chevronDown : icons.chevronRight" aria-hidden="true" />
+    </button>
   </div>
 </template>

package/components/internal/QDateCalendar.vue

@@ -4,6 +4,14 @@ import { computed, ref, watch } from "vue"
 import { Icon } from "@iconify/vue"
 import { icons } from "../../lib/icons"
 import { cn } from "../../lib/utils"
+import { useConfigLang } from "../../lib/useComponentProps"
+import {
+  dateLabels,
+  dateLocale,
+  monthShortNames,
+  monthYearLabel,
+  weekdayShortNames,
+} from "../../lib/dateI18n"
 
 interface Props {
   modelValue?: Date | null
@@ -15,7 +23,7 @@ interface Props {
   disabledDates?: (d: Date) => boolean
   /** Premier jour de la semaine : 0 = dimanche, 1 = lundi (défaut) */
   firstDayOfWeek?: number
-  /** Raccourci « Today » sous la grille */
+  /** Libellé du raccourci « aujourd'hui » (texte selon `lang`) */
   todayBtn?: boolean
   /** En-tête : libellé cliquable ouvrant le choix du mois (et de l'année) */
   monthDropdown?: boolean
@@ -30,6 +38,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{ select: [date: Date] }>()
 
+// Langue de l'app (`QConfigProvider lang`) : mois, jours et libellés suivent.
+const configLang = useConfigLang()
+const locale = computed(() => dateLocale(configLang.value))
+const labels = computed(() => dateLabels(configLang.value))
+
 const today = new Date()
 const viewYear = ref(props.modelValue?.getFullYear() ?? today.getFullYear())
 const viewMonth = ref(props.modelValue?.getMonth() ?? today.getMonth())
@@ -51,10 +64,7 @@ const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDat
 const sameDay = (a: Date, b: Date) =>
   a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
 
-const weekdayLabels = computed(() => {
-  const names = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"] as const
-  return Array.from({ length: 7 }, (_, i) => names[(props.firstDayOfWeek + i) % 7])
-})
+const weekdayLabels = computed(() => weekdayShortNames(locale.value, props.firstDayOfWeek))
 
 const weeks = computed<(Date | null)[][]>(() => {
   const y = viewYear.value
@@ -70,18 +80,10 @@ const weeks = computed<(Date | null)[][]>(() => {
   return result
 })
 
-const monthLabel = computed(() =>
-  new Intl.DateTimeFormat(undefined, { month: "long", year: "numeric" }).format(
-    new Date(viewYear.value, viewMonth.value, 1),
-  ),
-)
+const monthLabel = computed(() => monthYearLabel(locale.value, viewYear.value, viewMonth.value))
 
-/** Noms courts des 12 mois, dans la langue du navigateur (comme `monthLabel`) */
-const monthNames = computed(() =>
-  Array.from({ length: 12 }, (_, i) =>
-    new Intl.DateTimeFormat(undefined, { month: "short" }).format(new Date(2000, i, 1)),
-  ),
-)
+/** Noms courts des 12 mois, dans la langue de l'app (comme `monthLabel`) */
+const monthNames = computed(() => monthShortNames(locale.value))
 
 const prevMonth = () => {
   if (viewMonth.value === 0) {
@@ -126,7 +128,7 @@ const onSelectDate = (d: Date) => {
   emit("select", d)
 }
 
-/** Raccourci « Today » : désactivé quand aujourd'hui est hors bornes / désactivé */
+/** Raccourci « aujourd'hui » : désactivé quand aujourd'hui est hors bornes / désactivé */
 const todaySelectable = computed(() => !isDisabled(startOfDay(new Date())))
 
 const selectToday = () => {
@@ -141,7 +143,7 @@ const selectToday = () => {
       <button
         type="button"
         class="q-date-calendar__nav-btn"
-        aria-label="Mois précédent"
+        :aria-label="labels.prevMonth"
         @click="prevMonth"
       >
         <Icon :icon="icons.chevronLeft" aria-hidden="true" />
@@ -152,7 +154,7 @@ const selectToday = () => {
         class="q-date-calendar__nav-label q-date-calendar__nav-label--button"
         :class="{ 'q-date-calendar__nav-label--open': monthPickerOpen }"
         :aria-expanded="monthPickerOpen"
-        aria-label="Choisir le mois"
+        :aria-label="labels.chooseMonth"
         @click="monthPickerOpen = !monthPickerOpen"
       >
         <span class="q-date-calendar__nav-text">{{ monthLabel }}</span>
@@ -162,7 +164,7 @@ const selectToday = () => {
       <button
         type="button"
         class="q-date-calendar__nav-btn"
-        aria-label="Mois suivant"
+        :aria-label="labels.nextMonth"
         @click="nextMonth"
       >
         <Icon :icon="icons.chevronRight" aria-hidden="true" />
@@ -175,7 +177,7 @@ const selectToday = () => {
         <button
           type="button"
           class="q-date-calendar__nav-btn"
-          aria-label="Année précédente"
+          :aria-label="labels.prevYear"
           @click="prevYear"
         >
           <Icon :icon="icons.chevronLeft" aria-hidden="true" />
@@ -184,7 +186,7 @@ const selectToday = () => {
         <button
           type="button"
           class="q-date-calendar__nav-btn"
-          aria-label="Année suivante"
+          :aria-label="labels.nextYear"
           @click="nextYear"
         >
           <Icon :icon="icons.chevronRight" aria-hidden="true" />
@@ -239,7 +241,7 @@ const selectToday = () => {
         :disabled="!todaySelectable"
         @click="selectToday"
       >
-        Today
+        {{ labels.today }}
       </button>
     </div>
   </div>

package/index.ts

@@ -164,6 +164,22 @@ export { screen } from "./lib/screen"
 export type { QScreen } from "./lib/screen"
 export { loading } from "./lib/loading"
 export type { LoadingOptions, QLoadingPlugin } from "./lib/loading"
+export { network, createNetwork, resolveOnline, onlineAfterEvent } from "./lib/network"
+export type { QNetwork, NetworkEvent, NetworkOptions, NetworkEventTarget, NetworkNavigator } from "./lib/network"
+export {
+  wakeLock,
+  createWakeLock,
+  isWakeLockCapable,
+  isDocumentVisible,
+  shouldReacquire,
+} from "./lib/wakeLock"
+export type {
+  QWakeLock,
+  WakeLockOptions,
+  WakeLockApiLike,
+  WakeLockSentinelLike,
+  WakeLockVisibilityLike,
+} from "./lib/wakeLock"
 export { localStorage, sessionStorage } from "./lib/storage"
 export type { QWebStorage } from "./lib/storage"
 export {

package/lib/dateI18n.test.ts

@@ -0,0 +1,91 @@
+// Libellés / locale des composants de date — pilotés par le `lang` du provider.
+import { describe, expect, it } from "bun:test"
+import {
+  dateLabels,
+  dateLocale,
+  monthShortNames,
+  monthYearLabel,
+  weekdayShortNames,
+} from "./dateI18n"
+
+describe("dateLocale", () => {
+  it("mappe la langue de l'app sur une locale BCP 47 déterministe", () => {
+    expect(dateLocale("fr")).toBe("fr-FR")
+    expect(dateLocale("en")).toBe("en-US")
+  })
+})
+
+describe("dateLabels", () => {
+  it("« Today » devient « Aujourd'hui » en français", () => {
+    expect(dateLabels("fr").today).toBe("Aujourd'hui")
+    expect(dateLabels("en").today).toBe("Today")
+  })
+
+  it("couvre les libellés du panneau et de la navigation", () => {
+    expect(dateLabels("fr").selectDate).toBe("Sélectionner une date")
+    expect(dateLabels("fr").clear).toBe("Effacer")
+    expect(dateLabels("fr").close).toBe("Fermer")
+    expect(dateLabels("fr").prevMonth).toBe("Mois précédent")
+    expect(dateLabels("fr").nextMonth).toBe("Mois suivant")
+    expect(dateLabels("en").selectDate).toBe("Select a date")
+  })
+
+  it("retombe sur l'anglais pour une langue inconnue (JS non typé)", () => {
+    expect(dateLabels("de" as never).today).toBe("Today")
+  })
+})
+
+describe("weekdayShortNames", () => {
+  it("suit la locale demandée, pas celle du navigateur", () => {
+    expect(weekdayShortNames("fr-FR", 1)[0]).toMatch(/^lun/i)
+    expect(weekdayShortNames("en-US", 1)[0]).toMatch(/^mon/i)
+  })
+
+  it("commence par le jour demandé (0 = dimanche)", () => {
+    const monday = weekdayShortNames("en-US", 1)
+    const sunday = weekdayShortNames("en-US", 0)
+    expect(sunday[0]).toMatch(/^sun/i)
+    expect(sunday[0]).toBe(monday[6])
+    expect(sunday[6]).toBe(monday[5])
+  })
+
+  it("rend 7 jours sans point final ni minuscule initiale", () => {
+    const names = weekdayShortNames("fr-FR")
+    expect(names).toHaveLength(7)
+    for (const name of names) {
+      expect(name.endsWith(".")).toBe(false)
+      expect(name[0]).toBe(name[0]!.toUpperCase())
+    }
+  })
+})
+
+describe("monthShortNames", () => {
+  it("rend les 12 mois dans la langue demandée", () => {
+    const fr = monthShortNames("fr-FR")
+    const en = monthShortNames("en-US")
+    expect(fr).toHaveLength(12)
+    expect(en).toEqual([
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
+    ])
+    expect(fr[0]).toMatch(/^janv/i)
+    expect(fr[11]).toMatch(/^déc/i)
+  })
+})
+
+describe("monthYearLabel", () => {
+  it("en-tête long dans la langue demandée", () => {
+    expect(monthYearLabel("en-US", 2026, 0)).toBe("January 2026")
+    expect(monthYearLabel("fr-FR", 2026, 0)).toContain("janvier 2026")
+  })
+})

package/lib/dateI18n.ts

@@ -0,0 +1,85 @@
+// Libellés et locale des composants de date (QDatePicker / QDateCalendar).
+//
+// La langue vient du `QConfigProvider` (`lang`, défaut "en") et arrive ici via
+// `useConfigLang()`. On ne s'appuie **pas** sur la locale du navigateur : le rendu
+// doit être déterministe (serveur ↔ client) et suivre la langue choisie dans l'app.
+import type { QAppLang } from "./config"
+
+/** Clés d'interface des composants de date. */
+export type DateUiKey =
+  | "today"
+  | "prevMonth"
+  | "nextMonth"
+  | "chooseMonth"
+  | "prevYear"
+  | "nextYear"
+  | "selectDate"
+  | "clear"
+  | "close"
+
+const DATE_UI: Record<QAppLang, Record<DateUiKey, string>> = {
+  en: {
+    today: "Today",
+    prevMonth: "Previous month",
+    nextMonth: "Next month",
+    chooseMonth: "Choose month",
+    prevYear: "Previous year",
+    nextYear: "Next year",
+    selectDate: "Select a date",
+    clear: "Clear",
+    close: "Close",
+  },
+  fr: {
+    today: "Aujourd'hui",
+    prevMonth: "Mois précédent",
+    nextMonth: "Mois suivant",
+    chooseMonth: "Choisir le mois",
+    prevYear: "Année précédente",
+    nextYear: "Année suivante",
+    selectDate: "Sélectionner une date",
+    clear: "Effacer",
+    close: "Fermer",
+  },
+}
+
+/** Locale BCP 47 associée à la langue de l'app (déterministe, contrairement à `undefined`). */
+export function dateLocale(lang: QAppLang): string {
+  return lang === "fr" ? "fr-FR" : "en-US"
+}
+
+/** Libellés d'interface des composants de date. */
+export function dateLabels(lang: QAppLang): Record<DateUiKey, string> {
+  return DATE_UI[lang] ?? DATE_UI.en
+}
+
+/** Abréviation : initiale en majuscule, sans point final (`dim.` → `Dim`). */
+function shortName(value: string): string {
+  const clean = value.replace(/[.,]+$/, "").trim()
+  return clean.charAt(0).toUpperCase() + clean.slice(1)
+}
+
+/**
+ * Jours de la semaine abrégés, en commençant par `firstDayOfWeek`
+ * (0 = dimanche, 1 = lundi).
+ */
+export function weekdayShortNames(locale: string, firstDayOfWeek = 1): string[] {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" })
+  // 2024-01-07 est un dimanche — référence stable, indépendante de la date du jour.
+  const names = Array.from({ length: 7 }, (_, i) =>
+    shortName(fmt.format(new Date(2024, 0, 7 + i))),
+  )
+  const start = ((firstDayOfWeek % 7) + 7) % 7
+  return Array.from({ length: 7 }, (_, i) => names[(start + i) % 7]!)
+}
+
+/** Mois abrégés, dans l'ordre de l'année (`Janv.` / `Jan`). */
+export function monthShortNames(locale: string): string[] {
+  const fmt = new Intl.DateTimeFormat(locale, { month: "short" })
+  return Array.from({ length: 12 }, (_, i) => shortName(fmt.format(new Date(2024, i, 1))))
+}
+
+/** En-tête du calendrier : « janvier 2026 » / « January 2026 ». */
+export function monthYearLabel(locale: string, year: number, month: number): string {
+  return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" })
+    .format(new Date(year, month, 1))
+}