@dnax/ui 0.0.1

package/components/QRating.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+// QRating — notation par étoiles : <q-rating v-model="note" :max="5" color="warning" size="lg" />
+// Étoiles remplies jusqu'à la valeur, hover (bureau), dimming des non sélectionnées (no-dimming pour le désactiver).
+import { computed, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { colorValue } from "../lib/colors"
+
+const SIZE_MAP: Record<string, string> = { sm: "18px", md: "22px", lg: "30px", xl: "36px" }
+
+interface Props {
+  /** Note actuelle */
+  modelValue?: number
+  /** Nombre d'étoiles (défaut 5) */
+  max?: number
+  /** Icône Iconify de l'étoile (défaut : lucide:star) */
+  icon?: string
+  /** Couleur (token ou hex) — défaut warning (ambre) */
+  color?: string
+  /** Couleur du texte (remplace color) */
+  textColor?: string
+  /** Taille : sm | md | lg | xl ou valeur CSS */
+  size?: string
+  /** Pas d'assombrissement des étoiles non sélectionnées */
+  noDimming?: boolean
+  /** Lecture seule (pas d'interaction) */
+  readonly?: boolean
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  max: 5,
+  icon: icons.star,
+  color: "warning",
+  textColor: "",
+  size: "md",
+  noDimming: false,
+  readonly: false,
+  disable: false,
+})
+
+const emit = defineEmits<{ "update:modelValue": [value: number] }>()
+
+const isDisabled = computed(() => props.readonly || props.disable)
+const hoverValue = ref(0)
+
+const displayValue = computed(() => (hoverValue.value > 0 ? hoverValue.value : props.modelValue))
+
+const iconStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  style.width = SIZE_MAP[props.size] ?? props.size
+  style.height = SIZE_MAP[props.size] ?? props.size
+  style.color = props.textColor ? colorValue(props.textColor) : colorValue(props.color)
+  return style
+})
+
+const isOn = (n: number) => displayValue.value >= n
+const isDimmed = (n: number) => !props.noDimming && !isOn(n)
+
+const setRating = (n: number) => {
+  if (isDisabled.value) return
+  emit("update:modelValue", n)
+}
+
+const setHover = (n: number) => {
+  if (!isDisabled.value) hoverValue.value = n
+}
+</script>
+
+<template>
+  <div
+    class="q-rating"
+    :class="{ 'q-rating--disabled': isDisabled }"
+    role="radiogroup"
+    :aria-label="`Évaluation sur ${max}`"
+  >
+    <button
+      v-for="n in max"
+      :key="n"
+      type="button"
+      role="radio"
+      class="q-rating__star"
+      :class="{
+        'q-rating__star--on': isOn(n),
+        'q-rating__star--dimmed': isDimmed(n),
+      }"
+      :aria-label="`${n} étoile${n > 1 ? 's' : ''} sur ${max}`"
+      :aria-checked="n === modelValue ? 'true' : 'false'"
+      :disabled="isDisabled"
+      @mouseenter="setHover(n)"
+      @mouseleave="setHover(0)"
+      @focus="setHover(n)"
+      @blur="setHover(0)"
+      @click="setRating(n)"
+    >
+      <Icon
+        :icon="icon"
+        :style="iconStyle"
+        :fill="isOn(n) ? 'currentColor' : 'none'"
+        aria-hidden="true"
+      />
+    </button>
+  </div>
+</template>

package/components/QReorder.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+// QReorder — liste réordonnable par glisser-déposer :
+// <q-reorder v-model="items" row-key="id"> <template #item="{ item, index }">…</template> </q-reorder>
+// Drag sur toute la ligne (ou seulement la poignée avec `handle`), clavier ↑/↓, pointer events.
+import { computed, nextTick, ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Items (v-model) — l'ordre est mis à jour au drop */
+  modelValue?: any[]
+  /** Clé stable par item pour les animations (string ou fonction) — défaut : l'index */
+  rowKey?: string | ((item: any) => any)
+  /** Le drag ne démarre que depuis la poignée (sinon toute la ligne) */
+  handle?: boolean
+  disable?: boolean
+  itemClass?: string
+  handleClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  handle: false,
+  disable: false,
+  itemClass: "",
+  handleClass: "",
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: any[]]
+  /** Émis quand un item change de position : { from, to } */
+  reorder: [payload: { from: number; to: number }]
+}>()
+
+const list = ref<any[]>([...props.modelValue])
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (v && v !== list.value) list.value = [...v]
+  },
+)
+
+const keyOf = (item: any, index: number) => {
+  if (!props.rowKey) return typeof item === "object" && item !== null ? index : item
+  return typeof props.rowKey === "function" ? props.rowKey(item) : item?.[props.rowKey]
+}
+
+// — Drag (pointer events sur window) —
+const containerEl = ref<HTMLElement | null>(null)
+const itemEls = ref<(HTMLElement | null)[]>([])
+const heights = ref<number[]>([])
+
+const draggingIndex = ref<number | null>(null)
+const pointerIndex = ref<number | null>(null)
+const startY = ref(0)
+const dragDy = ref(0)
+
+let cleanup: (() => void) | null = null
+
+const interactive = (target: EventTarget | null) =>
+  target instanceof Element && !!target.closest("button, input, select, textarea, a, [contenteditable]")
+
+const onPointerDown = (i: number, e: PointerEvent) => {
+  if (props.disable) return
+  if (props.handle && !(e.target as Element).closest(".q-reorder__handle")) return
+  if (!props.handle && interactive(e.target)) return
+  e.preventDefault()
+  heights.value = itemEls.value.map((el) => el?.offsetHeight ?? 0)
+  draggingIndex.value = i
+  pointerIndex.value = i
+  startY.value = e.clientY
+  dragDy.value = 0
+
+  const onMove = (ev: PointerEvent) => {
+    dragDy.value = ev.clientY - startY.value
+    const el = document.elementFromPoint(ev.clientX, ev.clientY) as HTMLElement | null
+    const row = el?.closest?.(".q-reorder__item") as HTMLElement | null
+    const idx = row ? Number(row.dataset.index) : -1
+    if (!Number.isNaN(idx) && idx >= 0) pointerIndex.value = idx
+  }
+  const onUp = () => {
+    commit()
+    if (cleanup) cleanup()
+  }
+  window.addEventListener("pointermove", onMove)
+  window.addEventListener("pointerup", onUp)
+  window.addEventListener("pointercancel", onUp)
+  cleanup = () => {
+    window.removeEventListener("pointermove", onMove)
+    window.removeEventListener("pointerup", onUp)
+    window.removeEventListener("pointercancel", onUp)
+    cleanup = null
+  }
+}
+
+const commit = () => {
+  const from = draggingIndex.value
+  const to = pointerIndex.value
+  draggingIndex.value = null
+  pointerIndex.value = null
+  dragDy.value = 0
+  if (from === null || to === null || from === to) return
+  const next = [...list.value]
+  const [moved] = next.splice(from, 1)
+  next.splice(to, 0, moved)
+  list.value = next
+  emit("update:modelValue", next)
+  emit("reorder", { from, to })
+}
+
+const itemStyle = (i: number): Record<string, string> | undefined => {
+  if (draggingIndex.value === null) return undefined
+  if (i === draggingIndex.value) {
+    return { transform: `translateY(${dragDy.value}px)`, transition: "none" }
+  }
+  const h = heights.value[draggingIndex.value] ?? 0
+  if (pointerIndex.value !== null && pointerIndex.value > draggingIndex.value && i > draggingIndex.value && i <= pointerIndex.value)
+    return { transform: `translateY(-${h}px)` }
+  if (pointerIndex.value !== null && pointerIndex.value < draggingIndex.value && i >= pointerIndex.value && i < draggingIndex.value)
+    return { transform: `translateY(${h}px)` }
+  return undefined
+}
+
+// — Clavier : ↑ / ↓ déplace l'item —
+const move = (from: number, to: number) => {
+  if (props.disable) return
+  to = Math.max(0, Math.min(list.value.length - 1, to))
+  if (to === from) return
+  const next = [...list.value]
+  const [m] = next.splice(from, 1)
+  next.splice(to, 0, m)
+  list.value = next
+  emit("update:modelValue", next)
+  emit("reorder", { from, to })
+  nextTick(() => itemEls.value[to]?.focus())
+}
+
+const onKeydown = (i: number, e: KeyboardEvent) => {
+  if (e.key === "ArrowUp") {
+    e.preventDefault()
+    move(i, i - 1)
+  } else if (e.key === "ArrowDown") {
+    e.preventDefault()
+    move(i, i + 1)
+  }
+}
+
+const rootClasses = computed(() =>
+  cn("q-reorder", props.disable && "q-reorder--disabled"),
+)
+</script>
+
+<template>
+  <div ref="containerEl" class="q-reorder" :class="rootClasses" role="list">
+    <div
+      v-for="(item, i) in list"
+      :key="keyOf(item, i)"
+      :ref="(el) => (itemEls[i] = el as HTMLElement | null)"
+      class="q-reorder__item"
+      :class="[
+        itemClass,
+        i === draggingIndex && 'q-reorder__item--dragging',
+        !handle && 'q-reorder__item--drag-all',
+      ]"
+      :data-index="i"
+      :style="itemStyle(i)"
+      role="listitem"
+      :tabindex="disable ? -1 : 0"
+      :aria-grabbed="i === draggingIndex || undefined"
+      @pointerdown="onPointerDown(i, $event)"
+      @keydown="onKeydown(i, $event)"
+    >
+      <div class="q-reorder__content">
+        <slot name="item" :item="item" :index="i" :dragging="i === draggingIndex">
+          <span class="q-reorder__label">{{ String(item) }}</span>
+        </slot>
+      </div>
+
+      <span
+        class="q-reorder__handle"
+        :class="handleClass"
+        aria-hidden="true"
+      >
+        <slot name="handle" :index="i" :dragging="i === draggingIndex">
+          <Icon :icon="icons.gripVertical" class="q-reorder__grip" />
+        </slot>
+      </span>
+    </div>
+  </div>
+</template>

package/components/QRollingText.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+// QRollingText — compteur à rouleaux (type machine à sous) :
+// <q-rolling-text :start-num="0" :target-num="123" />.
+// Chaque chiffre défile verticalement de start-num vers target-num (2 tours complets
+// entre les deux), avec un effet cascade via stop-order. API inspirée de Vant
+// RollingText : start-num / target-num / text-list / duration / direction /
+// auto-start / stop-order / height + méthodes exposées start() / reset().
+import { computed, ref, watch } from "vue"
+
+type RollingTextDirection = "up" | "down"
+type RollingTextStopOrder = "ltr" | "rtl"
+
+interface Props {
+  /** Valeur de départ affichée avant l'animation (défaut 0) */
+  startNum?: number
+  /** Valeur cible — les rouleaux s'arrêtent sur celle-ci */
+  targetNum?: number
+  /** Texte personnalisé : tableau de chaînes de MÊME longueur — le rouleau défile du premier au dernier élément */
+  textList?: string[]
+  /** Durée de l'animation, en secondes (défaut 2) */
+  duration?: number
+  /** Sens de défilement : "up" compte en montant, "down" en descendant (défaut down) */
+  direction?: RollingTextDirection
+  /** Démarre l'animation automatiquement au montage (défaut true) */
+  autoStart?: boolean
+  /** Ordre d'arrêt des rouleaux : "ltr" (rang de gauche d'abord) | "rtl" (unités d'abord) */
+  stopOrder?: RollingTextStopOrder
+  /** Hauteur d'un chiffre, en px (défaut 40) */
+  height?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  startNum: 0,
+  targetNum: 0,
+  textList: () => [],
+  duration: 2,
+  direction: "down",
+  autoStart: true,
+  stopOrder: "ltr",
+  height: 40,
+})
+
+/** Nombre de tours complets entre le chiffre de départ et la cible */
+const CIRCLE_NUM = 2
+
+const isCustom = computed(() => props.textList.length > 0)
+
+/** Nombre de colonnes (chiffres) affichées */
+const itemLength = computed(() => {
+  if (isCustom.value) return props.textList[0]?.length ?? 0
+  return String(Math.max(props.startNum, props.targetNum)).length
+})
+
+const targetNumArr = computed(() => {
+  if (isCustom.value) return new Array(itemLength.value).fill("")
+  return String(props.targetNum).padStart(itemLength.value, "0").split("")
+})
+
+const startNumArr = computed(() =>
+  String(props.startNum).padStart(itemLength.value, "0").split(""),
+)
+
+/** Colonne i : la liste des figures qui défilent sous la fenêtre */
+const columns = computed<(string | number)[][]>(() => {
+  const cols: (string | number)[][] = []
+  for (let i = 0; i < itemLength.value; i++) {
+    if (isCustom.value) {
+      const arr: (string | number)[] = []
+      for (let k = 0; k < props.textList.length; k++) {
+        arr.push(props.textList[k]?.[i] ?? "")
+      }
+      cols.push(arr)
+    } else {
+      const start = Number(startNumArr.value[i])
+      const target = Number(targetNumArr.value[i])
+      const arr: (string | number)[] = []
+      for (let n = start; n <= 9; n++) arr.push(n)
+      for (let c = 0; c < CIRCLE_NUM; c++) for (let n = 0; n <= 9; n++) arr.push(n)
+      for (let n = 0; n <= target; n++) arr.push(n)
+      cols.push(arr)
+    }
+  }
+  // Sens "down" : figures inversées — le rouleau démarre pré-translaté et descend vers la cible
+  return props.direction === "down" ? cols.map((c) => c.slice().reverse()) : cols
+})
+
+const rolling = ref(props.autoStart)
+
+/** Démarre (ou relance) l'animation */
+const start = () => {
+  rolling.value = true
+}
+
+/** Réinitialise l'animation, puis la relance si auto-start */
+const reset = () => {
+  rolling.value = false
+  if (props.autoStart) requestAnimationFrame(() => start())
+}
+
+defineExpose({ start, reset })
+
+watch(
+  () => props.autoStart,
+  (v) => {
+    if (v) start()
+  },
+)
+
+/** Délai de démarrage par colonne (effet cascade) */
+const getDelay = (i: number, len: number) =>
+  props.stopOrder === "ltr" ? 0.2 * i : 0.2 * (len - 1 - i)
+
+const digitStyle = computed(() => ({ lineHeight: `${props.height}px` }))
+
+const itemStyle = (i: number) => {
+  const col = columns.value[i] ?? []
+  return {
+    height: `${props.height}px`,
+    "--q-translate": `-${props.height * Math.max(0, col.length - 1)}px`,
+    "--q-duration": `${props.duration}s`,
+    "--q-delay": `${getDelay(i, itemLength.value)}s`,
+  } as Record<string, string>
+}
+</script>
+
+<template>
+  <div class="q-rolling-text" :class="`q-rolling-text--${direction}`">
+    <div
+      v-for="(col, i) in columns"
+      :key="i"
+      class="q-rolling-text__item"
+      :style="itemStyle(i)"
+    >
+      <div
+        class="q-rolling-text__box"
+        :class="{ 'q-rolling-text__box--animate': rolling }"
+      >
+        <div
+          v-for="(digit, j) in col"
+          :key="j"
+          class="q-rolling-text__digit"
+          :style="digitStyle"
+        >
+          <slot
+            name="digit"
+            :value="digit"
+            :index="i"
+            :total="columns.length"
+            :active="j === col.length - 1"
+          >
+            {{ digit }}
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.q-rolling-text {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--q-rolling-text-color, var(--foreground));
+  font-size: var(--q-rolling-text-font-size, 18px);
+}
+
+.q-rolling-text__item {
+  overflow: hidden;
+  width: var(--q-rolling-text-item-width, 1.2em);
+  border-radius: var(--q-rolling-text-item-border-radius, 6px);
+  background: var(--q-rolling-text-background, transparent);
+}
+.q-rolling-text__item + .q-rolling-text__item {
+  margin-left: var(--q-rolling-text-gap, 2px);
+}
+
+.q-rolling-text__box {
+  overflow: hidden;
+}
+.q-rolling-text__box--animate {
+  animation: q-rolling-up var(--q-duration, 2s) ease-in-out var(--q-delay, 0s) both;
+}
+
+/* Sens "down" : rouleau pré-positionné en bas, il remonte vers la cible */
+.q-rolling-text--down .q-rolling-text__box {
+  transform: translateY(var(--q-translate, 0px));
+}
+.q-rolling-text--down .q-rolling-text__box--animate {
+  animation-name: q-rolling-down;
+}
+
+.q-rolling-text__digit {
+  text-align: center;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+@keyframes q-rolling-up {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(var(--q-translate, 0px));
+  }
+}
+@keyframes q-rolling-down {
+  from {
+    transform: translateY(var(--q-translate, 0px));
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .q-rolling-text__box--animate {
+    animation: none;
+    transform: translateY(var(--q-translate, 0px));
+  }
+  .q-rolling-text--down .q-rolling-text__box--animate {
+    transform: translateY(0);
+  }
+}
+</style>

package/components/QRow.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// QRow — alias sémantique de QGrid (même API) : <q-row gap="12px"><q-col :span="6">…
+import QGrid from "./QGrid.vue"
+
+// Même interface que QGrid (dupliquée — pas d'import de type cross-SFC, qui exige fs)
+interface Props {
+  cols?: number
+  gap?: string | number
+  rowGap?: string | number
+  columnGap?: string | number
+  colsSm?: number
+  colsMd?: number
+  colsLg?: number
+  colsXl?: number
+  align?: "start" | "center" | "end" | "stretch"
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <q-grid v-bind="$props"><slot /></q-grid>
+</template>

package/components/QSafeArea.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// QSafeArea — applique les safe-area insets (encoche, barre d'accueil) sur les côtés demandés.
+// <q-safe-area top bottom>…</q-safe-area> — padding = env(safe-area-inset-*), fallback constant() (iOS 11.0-11.2).
+interface Props {
+  /** padding-top = env(safe-area-inset-top) */
+  top?: boolean
+  /** padding-right = env(safe-area-inset-right) */
+  right?: boolean
+  /** padding-bottom = env(safe-area-inset-bottom) */
+  bottom?: boolean
+  /** padding-left = env(safe-area-inset-left) */
+  left?: boolean
+  /** Applique les 4 insets (équivalent top + right + bottom + left) */
+  all?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  top: false,
+  right: false,
+  bottom: false,
+  left: false,
+  all: false,
+})
+</script>
+
+<template>
+  <div
+    class="q-safe-area"
+    :class="{
+      'q-safe-area--top': props.all || props.top,
+      'q-safe-area--right': props.all || props.right,
+      'q-safe-area--bottom': props.all || props.bottom,
+      'q-safe-area--left': props.all || props.left,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/components/QScrollArea.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+// QScrollArea — API Quasar : <q-scroll-area visible :thumb-style="…" :content-style="…" delay="350">
+// Zone scrollable avec barre de défilement personnalisée (native masquée, thumb draggable).
+import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+import { cn } from "../lib/utils"
+
+interface Props {
+  barStyle?: string
+  barClass?: string
+  thumbStyle?: string
+  thumbClass?: string
+  contentStyle?: string
+  contentClass?: string
+  /** Toujours afficher la barre */
+  visible?: boolean
+  /** Délai de masquage après scroll (ms) */
+  delay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  delay: 350,
+})
+
+const contentRef = ref<HTMLElement | null>(null)
+const viewportH = ref(0)
+const scrollH = ref(0)
+const scrollTop = ref(0)
+const thumbH = ref(0)
+const show = ref(false)
+const dragging = ref(false)
+let hideTimer: ReturnType<typeof setTimeout> | null = null
+
+const scrollable = computed(() => scrollH.value > viewportH.value + 1)
+
+const measure = () => {
+  const c = contentRef.value
+  if (!c) return
+  viewportH.value = c.clientHeight
+  scrollH.value = c.scrollHeight
+  thumbH.value = Math.max(24, (viewportH.value / scrollH.value) * viewportH.value)
+  scrollTop.value = c.scrollTop
+}
+
+const onScroll = () => {
+  const c = contentRef.value
+  if (c) scrollTop.value = c.scrollTop
+  show.value = true
+  if (hideTimer) clearTimeout(hideTimer)
+  hideTimer = setTimeout(() => {
+    if (!dragging.value) show.value = false
+  }, props.delay)
+}
+
+const thumbTop = computed(() =>
+  scrollH.value > 0 ? (scrollTop.value / scrollH.value) * viewportH.value : 0,
+)
+
+const barVisible = computed(() => show.value || props.visible || dragging.value)
+
+// Drag du thumb
+const onThumbDown = (e: PointerEvent) => {
+  const c = contentRef.value
+  if (!c) return
+  dragging.value = true
+  const startY = e.clientY
+  const startTop = c.scrollTop
+  const onMove = (ev: PointerEvent) => {
+    const dy = ev.clientY - startY
+    c.scrollTop = startTop + (dy / viewportH.value) * scrollH.value
+    scrollTop.value = c.scrollTop
+  }
+  const onUp = () => {
+    dragging.value = false
+    window.removeEventListener("pointermove", onMove)
+    window.removeEventListener("pointerup", onUp)
+  }
+  window.addEventListener("pointermove", onMove)
+  window.addEventListener("pointerup", onUp)
+}
+
+onMounted(() => {
+  measure()
+  if (typeof window !== "undefined") window.addEventListener("resize", measure)
+})
+onBeforeUnmount(() => {
+  if (typeof window !== "undefined") window.removeEventListener("resize", measure)
+  if (hideTimer) clearTimeout(hideTimer)
+})
+</script>
+
+<template>
+  <div class="q-scroll-area">
+    <div
+      ref="contentRef"
+      class="q-scroll-area__content"
+      :class="contentClass"
+      :style="contentStyle"
+      @scroll="onScroll"
+    >
+      <slot />
+    </div>
+    <div
+      v-if="scrollable"
+      class="q-scroll-area__bar"
+      :class="cn(barClass, barVisible && 'q-scroll-area__bar--visible')"
+      :style="barStyle"
+      aria-hidden="true"
+    >
+      <div
+        class="q-scroll-area__thumb"
+        :class="thumbClass"
+        :style="[{ height: `${thumbH}px`, transform: `translateY(${thumbTop}px)` }, thumbStyle]"
+        @pointerdown="onThumbDown"
+      />
+    </div>
+  </div>
+</template>