@dnax/ui 0.0.1

package/components/QTabs.vue

@@ -0,0 +1,188 @@
+<script lang="ts">
+// QTabs — API Quasar (source officielle) : <q-tabs v-model="tab" align="justify" active-color="secondary">
+// Fournit le contexte (tab actif, enregistrement) aux QTab enfants via provide/inject.
+import type { InjectionKey, Ref } from "vue"
+
+export interface QTabRegistration {
+  name: string | number
+  el: Ref<HTMLElement | null>
+}
+
+export interface QTabContext {
+  activeName: Readonly<Ref<string | number | null>>
+  setActive: (name: string | number) => void
+  register: (tab: QTabRegistration) => void
+  unregister: (name: string | number) => void
+  inlineLabel: Readonly<Ref<boolean>>
+  noCaps: Readonly<Ref<boolean>>
+  activeClass: Readonly<Ref<string | undefined>>
+}
+
+export const qTabsKey: InjectionKey<QTabContext> = Symbol("q-tabs")
+</script>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch } from "vue"
+import { cva } from "class-variance-authority"
+import { cn } from "../lib/utils"
+
+const tabsVariants = cva("q-tabs", {
+  variants: {
+    align: {
+      left: "q-tabs--left",
+      center: "q-tabs--center",
+      right: "q-tabs--right",
+      justify: "q-tabs--justify",
+    },
+    dense: { true: "q-tabs--dense" },
+  },
+  defaultVariants: { align: "center" },
+})
+
+interface Props {
+  /** Nom du tab actif */
+  modelValue?: string | number | null
+  /** Alignement des tabs (défaut Quasar : center) */
+  align?: "left" | "center" | "right" | "justify"
+  /** Couleur du tab actif (token ou hex) */
+  activeColor?: string
+  /** Couleur de fond du tab actif */
+  activeBgColor?: string
+  /** Classe ajoutée au tab actif */
+  activeClass?: string
+  /** Couleur de l'indicateur (défaut : activeColor → primary) */
+  indicatorColor?: string
+  /** Hauteur réduite */
+  dense?: boolean
+  /** Icône + label sur la même ligne */
+  inlineLabel?: boolean
+  /** Pas de majuscules sur les tabs */
+  noCaps?: boolean
+  /** Indicateur en haut au lieu du bas */
+  switchIndicator?: boolean
+  /** Tabs en colonne (verticales) */
+  vertical?: boolean
+  /** Ne pas s'étendre (usage dans un QToolbar) */
+  shrink?: boolean
+  /** S'étendre sur l'axe croisé du parent flex */
+  stretch?: boolean
+  /** Classe du contenu interne */
+  contentClass?: string
+  /** Anime les tabs au clic (appui scale + pop du tab actif) */
+  animated?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  align: "center",
+  activeColor: "",
+  activeBgColor: "",
+  activeClass: "",
+  indicatorColor: "",
+  dense: false,
+  inlineLabel: false,
+  noCaps: false,
+  switchIndicator: false,
+  vertical: false,
+  shrink: false,
+  stretch: false,
+  contentClass: "",
+  animated: false,
+})
+
+const emit = defineEmits<{ "update:modelValue": [value: string | number | null] }>()
+
+// shallowRef : on ne veut PAS que Vue dé-unwrappe les Ref contenues dans les enregistrements
+const tabRegs = shallowRef<QTabRegistration[]>([])
+const tick = ref(0)
+
+// Recalcule la position de l'indicateur après chaque changement de DOM
+const measure = async () => {
+  await nextTick()
+  tick.value++
+}
+
+watch([() => props.modelValue, tabRegs], measure)
+
+onMounted(() => {
+  measure()
+  if (typeof window !== "undefined") window.addEventListener("resize", measure)
+})
+onBeforeUnmount(() => {
+  if (typeof window !== "undefined") window.removeEventListener("resize", measure)
+})
+
+const context: QTabContext = {
+  activeName: computed(() => props.modelValue),
+  setActive: (name) => emit("update:modelValue", name),
+  register: (tab) => {
+    tabRegs.value = [...tabRegs.value, tab]
+  },
+  unregister: (name) => {
+    tabRegs.value = tabRegs.value.filter((t) => t.name !== name)
+  },
+  inlineLabel: computed(() => props.inlineLabel),
+  noCaps: computed(() => props.noCaps),
+  activeClass: computed(() => (props.activeClass ? props.activeClass : undefined)),
+}
+
+provide(qTabsKey, context)
+
+const activeTabEl = computed(
+  () => tabRegs.value.find((t) => t.name === props.modelValue)?.el.value ?? null,
+)
+
+const indicatorStyle = computed<Record<string, string>>(() => {
+  void tick.value // réactivité sur les mesures DOM
+  const el = activeTabEl.value
+  const style: Record<string, string> = {}
+  if (el) {
+    if (props.vertical) {
+      style.transform = `translateY(${el.offsetTop}px)`
+      style.height = `${el.offsetHeight}px`
+    }
+    else {
+      style.transform = `translateX(${el.offsetLeft}px)`
+      style.width = `${el.offsetWidth}px`
+    }
+  }
+  else {
+    style.opacity = "0"
+  }
+  if (props.indicatorColor) style.backgroundColor = props.indicatorColor
+  return style
+})
+
+const containerStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  if (props.activeColor) style["--q-tabs-active-color"] = props.activeColor
+  if (props.activeBgColor) style["--q-tabs-active-bg"] = props.activeBgColor
+  return style
+})
+
+const tabsClasses = computed(() =>
+  cn(
+    tabsVariants({ align: props.align, dense: props.dense }),
+    props.vertical && "q-tabs--vertical",
+    props.switchIndicator && "q-tabs--switch-indicator",
+    props.shrink && "q-tabs--shrink",
+    props.stretch && "q-tabs--stretch",
+    props.animated && "q-tabs--animated",
+  ),
+)
+</script>
+
+<template>
+  <div
+    class="q-tabs"
+    :class="tabsClasses"
+    :style="containerStyle"
+    role="tablist"
+    :aria-orientation="vertical ? 'vertical' : 'horizontal'"
+  >
+    <div class="q-tabs__content" :class="contentClass">
+      <slot />
+      <div class="q-tabs__indicator" :style="indicatorStyle" aria-hidden="true" />
+    </div>
+  </div>
+</template>

package/components/QText.vue

@@ -0,0 +1,316 @@
+<script setup lang="ts">
+// QText — texte avec troncature multi-lignes + transitions :
+// <q-text text="…" :lines="2" transition="fade" :transition-duration="400" />.
+// lines > 0 → line-clamp (… à la fin), title = texte complet au survol.
+// transition (fade, fade-up, zoom, slide-down…) : l'ancien texte sort et le
+// nouveau entre quand la prop `text` change (mode out-in).
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+
+/** Effets prédéfinis — ou n'importe quel nom custom (classes `q-text-{nom}-enter-active`…) */
+type QTextTransition =
+  | "fade"
+  | "fade-up"
+  | "fade-down"
+  | "fade-left"
+  | "fade-right"
+  | "zoom"
+  | "blur"
+  | "slide-up"
+  | "slide-down"
+  | "slide-left"
+  | "slide-right"
+  | (string & {})
+
+interface Props {
+  /** Texte (sinon slot par défaut) */
+  text?: string | number
+  /** Nombre de lignes avant troncature (1, 2, 3…) ; absent = pas de clamp */
+  lines?: number
+  /** Élément rendu (p par défaut) */
+  tag?: string
+  /** Transition jouée quand `text` change : fade, fade-up, fade-down,
+   *  fade-left, fade-right, zoom, blur, slide-up, slide-down, slide-left,
+   *  slide-right — ou un nom custom (classes `q-text-{nom}-enter-active`…) */
+  transition?: QTextTransition
+  /** Durée de la transition en ms (défaut 300) */
+  transitionDuration?: number
+  /** Respiration douce du texte : chaque mot s'estompe en boucle (stagger) */
+  breathing?: boolean
+  /** Apparition « générée » : chaque mot se révèle en séquence (blur + fondu) */
+  generate?: boolean
+  /** Sous-chaîne de `text` à surligner (marqueur qui se dessine, façon Inspira) */
+  highlight?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "p",
+  transition: "",
+  transitionDuration: 300,
+})
+
+const clampStyle = computed<Record<string, string> | undefined>(() =>
+  props.lines ? { "--q-text-lines": String(props.lines) } : undefined,
+)
+
+const transitionStyle = computed<Record<string, string> | undefined>(() =>
+  props.transition
+    ? { "--q-text-duration": `${props.transitionDuration}ms` }
+    : undefined,
+)
+
+/** Les effets slide sortent le texte du cadre → masquer le débordement */
+const overflow = computed(() => props.transition.startsWith("slide"))
+
+/** Mots du texte (prop text) pour l'effet breathing */
+const words = computed(() => String(props.text).split(" ").filter(Boolean))
+
+/** Délai de respiration par mot (cascade) */
+const wordDelay = (i: number) => ({ animationDelay: `${i * 0.12}s` })
+
+/** Parties du texte autour du mot surligné : [avant, mot, après] ou null */
+const hlParts = computed<[string, string, string] | null>(() => {
+  if (!props.highlight || props.text === undefined) return null
+  const t = String(props.text)
+  const idx = t.indexOf(props.highlight)
+  if (idx === -1) return null
+  return [t.slice(0, idx), props.highlight, t.slice(idx + props.highlight.length)]
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="q-text"
+    :class="cn(
+      lines && 'q-text--clamp',
+      transition && 'q-text--transition',
+      overflow && 'q-text--overflow',
+      props.class,
+    )"
+    :style="[clampStyle, transitionStyle]"
+    :title="lines && text !== undefined ? String(text) : undefined"
+  >
+    <Transition
+      v-if="transition"
+      :name="`q-text-${transition}`"
+      mode="out-in"
+      :duration="transitionDuration"
+    >
+      <span :key="String(text)" class="q-text__content">
+        <template v-if="hlParts">
+          <template v-for="(part, i) in hlParts" :key="i">
+            <span v-if="i === 1" class="q-text__highlight">{{ part }}</span>
+            <template v-else>{{ part }}</template>
+          </template>
+        </template>
+        <template v-else-if="generate && text !== undefined">
+          <span
+            v-for="(w, i) in words"
+            :key="i"
+            class="q-text__gen-word"
+            :style="{ animationDelay: `${i * 0.08}s` }"
+          >{{ w }}</span>
+        </template>
+        <template v-else-if="breathing && text !== undefined">
+          <span
+            v-for="(w, i) in words"
+            :key="i"
+            class="q-text__word"
+            :style="wordDelay(i)"
+          >{{ w }}</span>
+        </template>
+        <slot v-else>{{ text }}</slot>
+      </span>
+    </Transition>
+    <template v-if="!transition">
+      <template v-if="hlParts">
+        <template v-for="(part, i) in hlParts" :key="i">
+          <span v-if="i === 1" class="q-text__highlight">{{ part }}</span>
+          <template v-else>{{ part }}</template>
+        </template>
+      </template>
+      <template v-else-if="generate && text !== undefined">
+        <span
+          v-for="(w, i) in words"
+          :key="i"
+          class="q-text__gen-word"
+          :style="{ animationDelay: `${i * 0.08}s` }"
+        >{{ w }}</span>
+      </template>
+      <template v-else-if="breathing && text !== undefined">
+        <span
+          v-for="(w, i) in words"
+          :key="i"
+          class="q-text__word"
+          :style="wordDelay(i)"
+        >{{ w }}</span>
+      </template>
+      <slot v-else>{{ text }}</slot>
+    </template>
+  </component>
+</template>
+
+<style scoped>
+/* Contenu animé : inline-block pour que transform fonctionne */
+.q-text__content {
+  display: inline-block;
+}
+
+/* Les effets slide masquent le texte qui sort du cadre */
+.q-text--overflow {
+  overflow: hidden;
+}
+
+/* ─── fade ─── */
+.q-text-fade-enter-active,
+.q-text-fade-leave-active {
+  transition: opacity var(--q-text-duration, 300ms) ease;
+}
+.q-text-fade-enter-from,
+.q-text-fade-leave-to {
+  opacity: 0;
+}
+
+/* ─── fade + direction ─── */
+.q-text-fade-up-enter-active,
+.q-text-fade-up-leave-active,
+.q-text-fade-down-enter-active,
+.q-text-fade-down-leave-active,
+.q-text-fade-left-enter-active,
+.q-text-fade-left-leave-active,
+.q-text-fade-right-enter-active,
+.q-text-fade-right-leave-active {
+  transition:
+    opacity var(--q-text-duration, 300ms) ease,
+    transform var(--q-text-duration, 300ms) ease;
+}
+.q-text-fade-up-enter-from {
+  opacity: 0;
+  transform: translateY(12px);
+}
+.q-text-fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(-12px);
+}
+.q-text-fade-down-enter-from {
+  opacity: 0;
+  transform: translateY(-12px);
+}
+.q-text-fade-down-leave-to {
+  opacity: 0;
+  transform: translateY(12px);
+}
+.q-text-fade-left-enter-from {
+  opacity: 0;
+  transform: translateX(12px);
+}
+.q-text-fade-left-leave-to {
+  opacity: 0;
+  transform: translateX(-12px);
+}
+.q-text-fade-right-enter-from {
+  opacity: 0;
+  transform: translateX(-12px);
+}
+.q-text-fade-right-leave-to {
+  opacity: 0;
+  transform: translateX(12px);
+}
+
+/* ─── zoom ─── */
+.q-text-zoom-enter-active,
+.q-text-zoom-leave-active {
+  transition:
+    opacity var(--q-text-duration, 300ms) ease,
+    transform var(--q-text-duration, 300ms) ease;
+}
+.q-text-zoom-enter-from {
+  opacity: 0;
+  transform: scale(0.92);
+}
+.q-text-zoom-leave-to {
+  opacity: 0;
+  transform: scale(1.05);
+}
+
+/* ─── blur ─── */
+.q-text-blur-enter-active,
+.q-text-blur-leave-active {
+  transition:
+    opacity var(--q-text-duration, 300ms) ease,
+    filter var(--q-text-duration, 300ms) ease;
+}
+.q-text-blur-enter-from {
+  opacity: 0;
+  filter: blur(6px);
+}
+.q-text-blur-leave-to {
+  opacity: 0;
+  filter: blur(6px);
+}
+
+/* ─── slide (sans fondu, le texte glisse) ─── */
+.q-text-slide-up-enter-active,
+.q-text-slide-up-leave-active,
+.q-text-slide-down-enter-active,
+.q-text-slide-down-leave-active,
+.q-text-slide-left-enter-active,
+.q-text-slide-left-leave-active,
+.q-text-slide-right-enter-active,
+.q-text-slide-right-leave-active {
+  transition: transform var(--q-text-duration, 300ms) ease;
+}
+.q-text-slide-up-enter-from {
+  transform: translateY(100%);
+}
+.q-text-slide-up-leave-to {
+  transform: translateY(-100%);
+}
+.q-text-slide-down-enter-from {
+  transform: translateY(-100%);
+}
+.q-text-slide-down-leave-to {
+  transform: translateY(100%);
+}
+.q-text-slide-left-enter-from {
+  transform: translateX(100%);
+}
+.q-text-slide-left-leave-to {
+  transform: translateX(-100%);
+}
+.q-text-slide-right-enter-from {
+  transform: translateX(-100%);
+}
+.q-text-slide-right-leave-to {
+  transform: translateX(100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .q-text-fade-enter-active,
+  .q-text-fade-leave-active,
+  .q-text-fade-up-enter-active,
+  .q-text-fade-up-leave-active,
+  .q-text-fade-down-enter-active,
+  .q-text-fade-down-leave-active,
+  .q-text-fade-left-enter-active,
+  .q-text-fade-left-leave-active,
+  .q-text-fade-right-enter-active,
+  .q-text-fade-right-leave-active,
+  .q-text-zoom-enter-active,
+  .q-text-zoom-leave-active,
+  .q-text-blur-enter-active,
+  .q-text-blur-leave-active,
+  .q-text-slide-up-enter-active,
+  .q-text-slide-up-leave-active,
+  .q-text-slide-down-enter-active,
+  .q-text-slide-down-leave-active,
+  .q-text-slide-left-enter-active,
+  .q-text-slide-left-leave-active,
+  .q-text-slide-right-enter-active,
+  .q-text-slide-right-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/QTextCaption.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+// QTextCaption — légende superposée à une image (QImg) ou tout conteneur positionné.
+// <q-text-caption position="bottom" absolute title="…" subtitle="…" />
+// Dégradé sombre par défaut ; position bottom|top|left|right ; absolute = ancré au bord.
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+
+export type QTextCaptionPosition = "bottom" | "top" | "left" | "right"
+
+interface Props {
+  /** Bord du conteneur où la légende est ancrée */
+  position?: QTextCaptionPosition
+  /** Position absolute (sort du flux, ancré au bord du conteneur positionné) */
+  absolute?: boolean
+  /** Prend toute la largeur du conteneur */
+  fit?: boolean
+  /** Dégradé sombre derrière le texte (défaut : true) */
+  gradient?: boolean
+  /** Titre en gras */
+  title?: string
+  /** Sous-titre */
+  subtitle?: string
+  /** Respiration douce du titre/sous-titre : mots qui s'estompent en boucle */
+  breathing?: boolean
+  /** Apparition « générée » : mots révélés en séquence (blur + fondu) */
+  generate?: boolean
+  /** Sous-chaîne du titre à surligner (marqueur qui se dessine) */
+  highlight?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: "bottom",
+  absolute: false,
+  fit: false,
+  gradient: true,
+  title: "",
+  subtitle: "",
+  breathing: false,
+  generate: false,
+  highlight: "",
+})
+
+const classes = computed(() =>
+  cn(
+    "q-text-caption",
+    `q-text-caption--${props.position}`,
+    props.absolute && "q-text-caption--absolute",
+    props.fit && "q-text-caption--fit",
+    !props.gradient && "q-text-caption--flat",
+  ),
+)
+
+/** Mots d'une chaîne + délai de respiration (cascade) */
+const words = (s: string) => s.split(" ").filter(Boolean)
+const wordDelay = (i: number) => ({ animationDelay: `${i * 0.12}s` })
+
+/** Parties du titre autour du mot surligné : [avant, mot, après] ou null */
+const hlParts = computed<[string, string, string] | null>(() => {
+  if (!props.highlight || !props.title) return null
+  const idx = props.title.indexOf(props.highlight)
+  if (idx === -1) return null
+  return [
+    props.title.slice(0, idx),
+    props.highlight,
+    props.title.slice(idx + props.highlight.length),
+  ]
+})
+</script>
+
+<template>
+  <div :class="classes">
+    <slot>
+      <span v-if="title" class="q-text-caption__title">
+        <template v-if="hlParts">
+          <template v-for="(part, i) in hlParts" :key="i">
+            <span v-if="i === 1" class="q-text-caption__highlight">{{ part }}</span>
+            <template v-else>{{ part }}</template>
+          </template>
+        </template>
+        <template v-else-if="generate">
+          <span
+            v-for="(w, i) in words(title)"
+            :key="i"
+            class="q-text-caption__gen-word"
+            :style="{ animationDelay: `${i * 0.08}s` }"
+          >{{ w }}</span>
+        </template>
+        <template v-else-if="breathing">
+          <span
+            v-for="(w, i) in words(title)"
+            :key="i"
+            class="q-text-caption__word"
+            :style="wordDelay(i)"
+          >{{ w }}</span>
+        </template>
+        <template v-else>{{ title }}</template>
+      </span>
+
+      <template v-if="generate && subtitle">
+        <span class="q-text-caption__subtitle">
+          <span
+            v-for="(w, i) in words(subtitle)"
+            :key="i"
+            class="q-text-caption__gen-word"
+            :style="{ animationDelay: `${i * 0.08}s` }"
+          >{{ w }}</span>
+        </span>
+      </template>
+      <template v-else-if="breathing && subtitle">
+        <span class="q-text-caption__subtitle q-text-caption__breathe">
+          <span
+            v-for="(w, i) in words(subtitle)"
+            :key="i"
+            class="q-text-caption__word"
+            :style="wordDelay(i)"
+          >{{ w }}</span>
+        </span>
+      </template>
+      <span v-else-if="subtitle" class="q-text-caption__subtitle">{{ subtitle }}</span>
+    </slot>
+  </div>
+</template>

package/components/QToolbar.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// QToolbar — API Quasar : <q-toolbar inset shrink>
+// Barre d'actions avec padding horizontal par défaut (0 12px), min-height 50px.
+// Styles : packages/ui/styles/main.css (classe .q-toolbar)
+interface Props {
+  /** Padding gauche supplémentaire (16px) — cas : toolbar sous un drawer */
+  inset?: boolean
+  /** Réduit la toolbar à la largeur de son contenu (pas de stretch) */
+  shrink?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  inset: false,
+  shrink: false,
+})
+</script>
+
+<template>
+  <div
+    class="q-toolbar"
+    :class="{
+      'q-toolbar--inset': props.inset,
+      'q-toolbar--shrink': props.shrink,
+    }"
+  >
+    <slot />
+  </div>
+</template>