@dnax/ui 0.0.1

package/components/QItem.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// QItem — API Quasar : <q-item clickable active active-class="…" dense disable>
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Clic + hover (cursor pointer) */
+  clickable?: boolean
+  /** Hauteur réduite */
+  dense?: boolean
+  /** État actif */
+  active?: boolean
+  /** Classe ajoutée quand actif */
+  activeClass?: string
+  /** Désactivé */
+  disable?: boolean
+  tabindex?: string | number
+  /** Élément rendu (div par défaut) */
+  tag?: string
+  /** Indentation (multiples de 8px) */
+  insetLevel?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  clickable: false,
+  dense: false,
+  active: false,
+  activeClass: "",
+  disable: false,
+  tag: "div",
+  insetLevel: 0,
+})
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+const itemClasses = cn(
+  "q-item",
+  props.clickable && "q-item--clickable",
+  props.dense && "q-item--dense",
+  props.active && "q-item--active",
+  props.active && props.activeClass,
+  props.disable && "q-item--disabled",
+)
+
+const itemStyle = props.insetLevel > 0 ? { paddingLeft: `${8 + props.insetLevel * 8}px` } : {}
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="q-item"
+    :class="itemClasses"
+    :style="itemStyle"
+    :tabindex="clickable ? (tabindex ?? 0) : undefined"
+    role="listitem"
+    :aria-disabled="disable || undefined"
+    @click="(e: MouseEvent) => { if (!disable) emit('click', e) }"
+  >
+    <slot />
+  </component>
+</template>

package/components/QItemSection.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// QItemSection — API Quasar : <q-item-section avatar side top no-wrap>
+// Sections d'un QItem : principale (flex:1), side (droite), avatar, thumbnail.
+import { cn } from "../lib/utils"
+import { colorValue } from "../lib/colors"
+
+interface Props {
+  /** Zone avatar (largeur fixe, pas de stretch) */
+  avatar?: boolean
+  /** Zone vignette/image */
+  thumbnail?: boolean
+  /** Alignée à droite (actions…) */
+  side?: boolean
+  /** Alignée en haut */
+  top?: boolean
+  /** Pas de retour à la ligne */
+  noWrap?: boolean
+  /** Couleur du texte (token ou hex) */
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  avatar: false,
+  thumbnail: false,
+  side: false,
+  top: false,
+  noWrap: false,
+  color: "",
+})
+
+const sectionClasses = cn(
+  "q-item__section",
+  props.avatar && "q-item__section--avatar",
+  props.thumbnail && "q-item__section--thumbnail",
+  props.side && "q-item__section--side",
+  props.top && "q-item__section--top",
+  props.noWrap && "q-item__section--no-wrap",
+)
+
+const sectionStyle = props.color ? { color: colorValue(props.color) } : {}
+</script>
+
+<template>
+  <div class="q-item__section" :class="sectionClasses" :style="sectionStyle">
+    <slot />
+  </div>
+</template>

package/components/QLinearProgress.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+// QLinearProgress — barre de progression linéaire : <q-linear-progress value="0.7" color="secondary" stripe />
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+import { colorValue } from "../lib/colors"
+
+interface Props {
+  /** Valeur (entre min et max, défaut 0-1) */
+  value?: number
+  min?: number
+  max?: number
+  /** Couleur de la barre (token ou hex) */
+  color?: string
+  /** Couleur de la piste */
+  trackColor?: string
+  /** Épaisseur (défaut 4px) */
+  size?: string
+  rounded?: boolean
+  /** Rayures animées */
+  stripe?: boolean
+  /** Sens inverse (remplit depuis la droite) */
+  reverse?: boolean
+  /** Mode indéterminé (bande qui traverse) */
+  indeterminate?: boolean
+  /** Mode recherche (bande qui traverse en sens inverse) */
+  query?: boolean
+  dark?: boolean
+  /** Sans transition sur width */
+  instantFeedback?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0,
+  min: 0,
+  max: 1,
+  color: "primary",
+  trackColor: "",
+  size: "4px",
+  rounded: false,
+  stripe: false,
+  reverse: false,
+  indeterminate: false,
+  query: false,
+  dark: false,
+  instantFeedback: false,
+})
+
+const ratio = computed(() => {
+  const span = props.max - props.min
+  if (span <= 0) return 0
+  return Math.min(1, Math.max(0, (props.value - props.min) / span))
+})
+
+const trackStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = { height: props.size }
+  if (props.trackColor) style.backgroundColor = colorValue(props.trackColor)
+  return style
+})
+
+const fillStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = { backgroundColor: colorValue(props.color) }
+  if (!props.indeterminate && !props.query) {
+    style.width = `${ratio.value * 100}%`
+  }
+  return style
+})
+
+const classes = computed(() =>
+  cn(
+    "q-linear-progress",
+    props.rounded && "q-linear-progress--rounded",
+    props.dark && "q-linear-progress--dark",
+    props.stripe && "q-linear-progress--stripe",
+    props.reverse && "q-linear-progress--reverse",
+    props.indeterminate && "q-linear-progress--indeterminate",
+    props.query && "q-linear-progress--query",
+    props.instantFeedback && "q-linear-progress--instant",
+  ),
+)
+</script>
+
+<template>
+  <div
+    class="q-linear-progress"
+    :class="classes"
+    :style="trackStyle"
+    role="progressbar"
+    :aria-valuenow="value"
+    :aria-valuemin="min"
+    :aria-valuemax="max"
+  >
+    <div class="q-linear-progress__fill" :style="fillStyle" />
+  </div>
+</template>

package/components/QList.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// QList — API Quasar : <q-list bordered dense separator dark padding>
+interface Props {
+  /** Bordure fine */
+  bordered?: boolean
+  /** Hauteur réduite des items */
+  dense?: boolean
+  /** Séparateurs entre items */
+  separator?: boolean
+  /** Thème sombre */
+  dark?: boolean
+  /** Padding plus important */
+  padding?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  bordered: false,
+  dense: false,
+  separator: false,
+  dark: false,
+  padding: false,
+})
+</script>
+
+<template>
+  <div
+    class="q-list"
+    :class="{
+      'q-list--bordered': props.bordered,
+      'q-list--dense': props.dense,
+      'q-list--separator': props.separator,
+      'q-list--dark': props.dark,
+      'q-list--padding': props.padding,
+    }"
+    role="list"
+  >
+    <slot />
+  </div>
+</template>

package/components/QLoading.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+// QLoading — overlay de chargement plein écran déclaratif : <q-loading v-model="busy" message="…" icon="…" />
+// Alternative au plugin $q.loading (mêmes options visuelles) — piloté par v-model.
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { colorValue } from "../lib/colors"
+import { useOverlayBack } from "../lib/overlayBack"
+
+interface Props {
+  /** Affiche/masque l'overlay (v-model) */
+  modelValue?: boolean
+  /** Message sous le spinner */
+  message?: string
+  /** Taille du spinner en px (défaut : 48) */
+  spinnerSize?: number
+  /** Couleur du spinner : token (primary…) ou hex (défaut : primary) */
+  spinnerColor?: string
+  /** Couleur du message (défaut : #1d1d1d) */
+  messageColor?: string
+  /** Fond de l'overlay (défaut : rgb(0 0 0 / 0.3)) */
+  backgroundColor?: string
+  /** Icône Iconify affichée à la place du spinner (ex. : "lucide:loader-circle") */
+  icon?: string
+  /** Couleur de l'icône (défaut : spinnerColor) */
+  iconColor?: string
+  /** Garde la carte (fond blanc + ombre) même avec une icône (défaut : transparent) */
+  boxed?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  spinnerSize: 48,
+  spinnerColor: "primary",
+  messageColor: "#1d1d1d",
+  backgroundColor: "rgb(0 0 0 / 0.3)",
+  icon: "",
+  iconColor: "",
+  boxed: false,
+})
+
+const emit = defineEmits<{ "update:modelValue": [value: boolean] }>()
+
+// « Retour » navigateur → ferme l'overlay de chargement au lieu de naviguer
+const open = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v),
+})
+useOverlayBack(open, () => { open.value = false }, "QLoading")
+
+const spinnerStyle = computed(() => ({
+  width: `${props.spinnerSize}px`,
+  height: `${props.spinnerSize}px`,
+  borderWidth: `${Math.max(2, Math.round(props.spinnerSize / 8))}px`,
+  color: colorValue(props.spinnerColor),
+}))
+
+const iconStyle = computed(() => ({
+  width: `${props.spinnerSize}px`,
+  height: `${props.spinnerSize}px`,
+  color: colorValue(props.iconColor || props.spinnerColor),
+}))
+
+const messageStyle = computed(() => ({ color: colorValue(props.messageColor) }))
+const overlayStyle = computed(() => ({ backgroundColor: props.backgroundColor }))
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="modelValue" class="q-loading" :style="overlayStyle" role="status" aria-live="polite">
+      <div class="q-loading__box" :class="{ 'q-loading__box--icon': icon && !boxed }">
+        <span v-if="!icon" class="q-loading__spinner" :style="spinnerStyle" aria-hidden="true" />
+        <Icon v-else :icon="icon" class="q-loading__icon" :style="iconStyle" aria-hidden="true" />
+        <div v-if="message" class="q-loading__message" :style="messageStyle">{{ message }}</div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/components/QLoadingProvider.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// QLoadingProvider — overlay de chargement plein écran ($q.loading).
+// Intégré dans QConfigProvider (rendu automatiquement par le plus externe),
+// utilisable aussi en autonome : <q-loading-provider>.
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { colorValue } from "../lib/colors"
+import { loading } from "../lib/loading"
+
+const visible = loading.isActive
+const opts = loading._opts
+
+const spinnerStyle = computed(() => ({
+  width: `${opts.spinnerSize}px`,
+  height: `${opts.spinnerSize}px`,
+  borderWidth: `${Math.max(2, Math.round((opts.spinnerSize ?? 48) / 8))}px`,
+  color: colorValue(opts.spinnerColor ?? "primary"),
+}))
+
+const iconStyle = computed(() => ({
+  width: `${opts.spinnerSize}px`,
+  height: `${opts.spinnerSize}px`,
+  color: colorValue(opts.iconColor ?? opts.spinnerColor ?? "primary"),
+}))
+
+const messageStyle = computed(() => ({ color: colorValue(opts.messageColor ?? "#1d1d1d") }))
+const overlayStyle = computed(() => ({ backgroundColor: opts.backgroundColor }))
+</script>
+
+<template>
+  <slot />
+  <div v-if="visible" class="q-loading" :style="overlayStyle" role="status" aria-live="polite">
+    <div class="q-loading__box" :class="{ 'q-loading__box--icon': opts.icon && !opts.boxed }">
+      <span v-if="!opts.icon" class="q-loading__spinner" :style="spinnerStyle" aria-hidden="true" />
+      <Icon :icon="opts.icon" v-else class="q-loading__icon" :style="iconStyle" aria-hidden="true" />
+      <div v-if="opts.message" class="q-loading__message" :style="messageStyle">
+        {{ opts.message }}
+      </div>
+    </div>
+  </div>
+</template>

package/components/QMarquee.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// QMarquee — bandeau défilant infini : <q-marquee :text="…" :pause-on-hover="true" />.
+// Deux copies du contenu (track animé translateX -50%) pour une boucle parfaite.
+// Props : text (ou slot), direction (left|right), duration (s), gap, pause-on-hover.
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Texte (sinon slot par défaut, rendu 2× pour la boucle) */
+  text?: string
+  /** Sens de défilement : "left" (vers la gauche) | "right" */
+  direction?: "left" | "right"
+  /** Durée d'un cycle complet, en secondes (défaut 20) */
+  duration?: number
+  /** Espace entre les deux copies (défaut 24px) */
+  gap?: string
+  /** Met en pause au survol */
+  pauseOnHover?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: "",
+  direction: "left",
+  duration: 20,
+  gap: "24px",
+  pauseOnHover: false,
+})
+
+const marqueeStyle = computed<Record<string, string>>(() => ({
+  "--q-marquee-duration": `${props.duration}s`,
+  "--q-marquee-gap": props.gap,
+}))
+
+const marqueeClasses = computed(() =>
+  cn(
+    "q-marquee",
+    props.direction === "right" && "q-marquee--reverse",
+    props.pauseOnHover && "q-marquee--pause-on-hover",
+    props.class,
+  ),
+)
+</script>
+
+<template>
+  <div class="q-marquee" :class="marqueeClasses" :style="marqueeStyle">
+    <div class="q-marquee__track">
+      <div class="q-marquee__copy">
+        <slot>{{ text }}</slot>
+      </div>
+      <div class="q-marquee__copy" aria-hidden="true">
+        <slot>{{ text }}</slot>
+      </div>
+    </div>
+  </div>
+</template>

package/components/QMessageScroller.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// QMessageScroller — conteneur de la liste (équivalent MessageScroller).
+// Enfant : QMessageScrollerViewport (+ QMessageScrollerButton en absolu).
+</script>
+
+<template>
+  <div class="q-msg-scroller">
+    <slot />
+  </div>
+</template>

package/components/QMessageScrollerButton.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// QMessageScrollerButton — bouton flottant de retour au live edge (équivalent MessageScrollerButton).
+// Visible uniquement quand il reste du contenu à atteindre dans cette direction.
+import { computed, inject } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { qMessageScrollerKey } from "./QMessageScrollerProvider.vue"
+
+interface Props {
+  /** Direction du saut */
+  direction?: "start" | "end"
+  label?: string
+  behavior?: ScrollBehavior
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: "end",
+  label: "Aller au plus récent",
+  behavior: "smooth",
+})
+
+const ctx = inject(qMessageScrollerKey, null)
+
+const active = computed(() => {
+  const s = ctx?.scrollable.value
+  if (!s) return false
+  return props.direction === "end" ? s.end : s.start
+})
+
+const onClick = () => {
+  if (props.direction === "end") ctx?.scrollToEnd({ behavior: props.behavior })
+  else ctx?.scrollToStart({ behavior: props.behavior })
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="q-msg-scroller__button"
+    :class="{ 'q-msg-scroller__button--active': active }"
+    :tabindex="active ? 0 : -1"
+    :aria-hidden="active ? undefined : 'true'"
+    :aria-label="label"
+    @click="onClick"
+  >
+    <Icon :icon="direction === 'end' ? icons.chevronDown : icons.chevronUp" aria-hidden="true" />
+  </button>
+</template>

package/components/QMessageScrollerContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// QMessageScrollerContent — contenu du log (équivalent MessageScrollerContent).
+// role="log" + aria-relevant="additions" : les lecteurs d'écran annoncent les nouveaux messages.
+import { inject, ref, watch } from "vue"
+import { qMessageScrollerKey } from "./QMessageScrollerProvider.vue"
+
+interface Props {
+  /** État de streaming (aria-busy) */
+  ariaBusy?: boolean
+}
+
+const props = defineProps<Props>()
+const ctx = inject(qMessageScrollerKey, null)
+const el = ref<HTMLElement | null>(null)
+
+watch(el, (v) => {
+  if (ctx) ctx.contentEl.value = v
+}, { immediate: true })
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="q-msg-scroller__content"
+    role="log"
+    aria-relevant="additions"
+    :aria-busy="ariaBusy || undefined"
+  >
+    <slot />
+  </div>
+</template>

package/components/QMessageScrollerItem.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// QMessageScrollerItem — ligne du transcript (équivalent MessageScrollerItem).
+// message-id : ancrage/visibilité/sauts ; scroll-anchor : marque le début d'un tour.
+import { inject, onBeforeUnmount, onMounted, ref } from "vue"
+import { qMessageScrollerKey } from "./QMessageScrollerProvider.vue"
+
+let itemSeq = 0
+
+/** Presets d'animation d'entrée d'un message (portés depuis ui-thing) */
+type QMessageAnimationPreset =
+  | "fade"
+  | "slide-up"
+  | "slide-side"
+  | "pop"
+  | "spring-bounce"
+  | "blur-fade"
+  | "scale-fade"
+
+interface Props {
+  /** Identifiant stable (ancrage, visibilité, sauts) — auto-généré si absent */
+  messageId?: string
+  /** Marque cette ligne comme le début d'un tour (positionnée près du haut à l'ajout) */
+  scrollAnchor?: boolean
+  /** Animation d'entrée du message à son ajout (fade, slide-up, pop, spring-bounce…) */
+  animationPreset?: QMessageAnimationPreset
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  scrollAnchor: false,
+})
+
+const ctx = inject(qMessageScrollerKey, null)
+const el = ref<HTMLElement | null>(null)
+
+const resolvedId = props.messageId ?? `q-msg-item-${itemSeq++}`
+
+onMounted(() => ctx?.registerItem({ id: resolvedId, el, anchor: props.scrollAnchor }))
+onBeforeUnmount(() => ctx?.unregisterItem(resolvedId))
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="q-msg-scroller__item"
+    :class="animationPreset && `q-msg-anim-${animationPreset}`"
+  >
+    <slot />
+  </div>
+</template>