@dnax/ui 0.0.63 → 0.0.64

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,36 @@ 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" })
+}
+
+// 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 +205,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 +284,7 @@ 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",
   ),
 )
 </script>
@@ -253,9 +298,32 @@ const tabsClasses = computed(() =>
     role="tablist"
     :aria-orientation="vertical ? 'vertical' : 'horizontal'"
   >
-    <div class="q-tabs__content" :class="contentClass">
+    <button
+      v-if="showArrows && canScrollStart"
+      type="button"
+      class="q-tabs__arrow q-tabs__arrow--start"
+      :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 && canScrollEnd"
+      type="button"
+      class="q-tabs__arrow q-tabs__arrow--end"
+      :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/lib/styleTokens.test.ts

@@ -101,6 +101,7 @@ 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"],
   ]
 
   for (const [file, className, selector] of CONTRACTS) {

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))
+}

package/package.json

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

package/styles/main.css

@@ -831,6 +831,62 @@ html.dark body {
   align-items: stretch;
 }
 
+/* Flèches de défilement (`show-arrows`, comportement Quasar) : le contenu devient
+   défilable (barre de défilement masquée, le défilement est piloté par les flèches). */
+.q-tabs--arrows .q-tabs__content {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.q-tabs--arrows .q-tabs__content::-webkit-scrollbar {
+  display: none;
+}
+
+.q-tabs--vertical.q-tabs--arrows .q-tabs__content {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.q-tabs__arrow {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  transition:
+    opacity 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.q-tabs__arrow:hover {
+  opacity: 1;
+  background-color: rgb(0 0 0 / 0.04);
+}
+
+/* Thème sombre : le hover noir 4 % est invisible (cf. convention des hovers sombres). */
+.dark .q-tabs__arrow:hover {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
+.q-tabs__arrow svg {
+  width: 16px;
+  height: 16px;
+}
+
+.q-tabs--vertical .q-tabs__arrow {
+  width: 100%;
+  height: 24px;
+}
+
 .q-tabs--dense {
   --q-tabs-h: 32px;
 }
@@ -841,10 +897,14 @@ html.dark body {
 
 .q-tabs--center .q-tabs__content {
   justify-content: center;
+  /* `safe` : en cas de débordement, retombe sur `flex-start` au lieu de rendre le
+     début inaccessible au défilement (bug classique du flex centré + overflow). */
+  justify-content: safe center;
 }
 
 .q-tabs--right .q-tabs__content {
   justify-content: flex-end;
+  justify-content: safe flex-end;
 }
 
 .q-tabs--justify .q-tab {