@dnax/ui 0.0.1

package/components/QPage.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// QPage — zone de contenu. Prop `virtual` : active le virtual scroll
+// (rendu fenêtré via QVirtualScroll) quand on a beaucoup d'items.
+import QVirtualScroll from "./QVirtualScroll.vue"
+
+interface Props {
+  /** Active le virtual scroll (rendu fenêtré des items) */
+  virtual?: boolean
+  /** Données à afficher (requis si virtual) */
+  items?: any[]
+  /** Clé d'item : string (propriété) ou fonction */
+  itemKey?: string | ((item: any) => unknown)
+  /** Nombre d'items rendus autour de la zone visible */
+  virtualScrollSliceSize?: number
+  /** Ratio d'items rendus avant la zone visible */
+  virtualScrollSliceRatioBefore?: number
+  /** Ratio d'items rendus après la zone visible */
+  virtualScrollSliceRatioAfter?: number
+  /** Taille moyenne d'un item en px (estimation initiale) */
+  virtualScrollItemSize?: number
+  /** Espace réservé en haut (contenu sticky) */
+  virtualScrollStickySizeStart?: number
+  /** Espace réservé en bas (contenu sticky) */
+  virtualScrollStickySizeEnd?: number
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <q-virtual-scroll
+    v-if="virtual"
+    class="q-page"
+    :items="items"
+    :item-key="itemKey"
+    :virtual-scroll-slice-size="virtualScrollSliceSize"
+    :virtual-scroll-slice-ratio-before="virtualScrollSliceRatioBefore"
+    :virtual-scroll-slice-ratio-after="virtualScrollSliceRatioAfter"
+    :virtual-scroll-item-size="virtualScrollItemSize"
+    :virtual-scroll-sticky-size-start="virtualScrollStickySizeStart"
+    :virtual-scroll-sticky-size-end="virtualScrollStickySizeEnd"
+  >
+    <template #default="scope">
+      <slot v-bind="scope" />
+    </template>
+    <template #before>
+      <slot name="before" />
+    </template>
+    <template #after>
+      <slot name="after" />
+    </template>
+  </q-virtual-scroll>
+  <div v-else class="q-page">
+    <slot />
+  </div>
+</template>

package/components/QPagination.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+// QPagination — pagination : <q-pagination v-model="page" :max="10" boundary-links direction-links active-color="secondary" />
+// Fenêtre de pages avec ellipses, premier/dernier et précédent/suivant optionnels.
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+import { colorValue, foregroundFor } from "../lib/colors"
+
+const SIZE_MAP: Record<string, string> = { xs: "24px", sm: "28px", md: "32px", lg: "40px", xl: "48px" }
+
+interface Props {
+  /** Page courante (v-model) */
+  modelValue?: number
+  /** Première page (défaut 1) */
+  min?: number
+  /** Dernière page */
+  max: number
+  /** Nombre max de boutons de pages (0 = illimité) */
+  maxPages?: number
+  /** Boutons première/dernière */
+  boundaryLinks?: boolean
+  /** Boutons précédent/suivant */
+  directionLinks?: boolean
+  /** Icônes Iconify des boutons (défauts lucide) */
+  iconFirst?: string
+  iconPrev?: string
+  iconNext?: string
+  iconLast?: string
+  /** Couleur de la page active (token ou hex) */
+  activeColor?: string
+  /** Couleur des autres pages (token ou hex) */
+  color?: string
+  /** Taille : xs | sm | md | lg | xl ou valeur CSS */
+  size?: string
+  /** Affiche … pour les trous */
+  ellipses?: boolean
+  /** Variantes de boutons */
+  flat?: boolean
+  outline?: boolean
+  unelevated?: boolean
+  rounded?: boolean
+  square?: boolean
+  dense?: boolean
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 1,
+  min: 1,
+  maxPages: 0,
+  boundaryLinks: false,
+  directionLinks: false,
+  size: "md",
+  ellipses: true,
+  activeColor: "primary",
+  color: "",
+  flat: false,
+  outline: false,
+  unelevated: false,
+  rounded: false,
+  square: false,
+  dense: false,
+  disable: false,
+})
+
+const emit = defineEmits<{ "update:modelValue": [value: number] }>()
+
+const total = computed(() => Math.max(props.min, props.max))
+const clampedPage = computed(() => Math.min(Math.max(props.modelValue, props.min), total.value))
+
+const setPage = (p: number) => {
+  if (props.disable) return
+  emit("update:modelValue", Math.min(Math.max(p, props.min), total.value))
+}
+
+// — Fenêtre de pages avec ellipses —
+const pages = computed<(number | "ellipsis")[]>(() => {
+  const totalPages = total.value
+  if (totalPages <= 1) return [1]
+  const maxPages = props.maxPages
+  if (maxPages <= 0 || totalPages <= maxPages + 2) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1)
+  }
+  const cur = clampedPage.value
+  let start = Math.max(1, cur - Math.floor((maxPages - 1) / 2))
+  const end = Math.min(totalPages, start + maxPages - 1)
+  start = Math.max(1, end - maxPages + 1)
+
+  const list: (number | "ellipsis")[] = []
+  if (start > 2) list.push(1, "ellipsis")
+  else if (start === 2) list.push(1)
+  for (let i = start; i <= end; i++) list.push(i)
+  if (end < totalPages - 1) list.push("ellipsis", totalPages)
+  else if (end === totalPages - 1) list.push(totalPages)
+  return list
+})
+
+const btnClasses = computed(() =>
+  cn(
+    "q-pagination__btn",
+    props.flat && "q-pagination__btn--flat",
+    props.outline && "q-pagination__btn--outline",
+    props.unelevated && "q-pagination__btn--unelevated",
+    props.rounded && "q-pagination__btn--rounded",
+    props.square && "q-pagination__btn--square",
+    props.dense && "q-pagination__btn--dense",
+  ),
+)
+
+const btnSize = computed<Record<string, string>>(() => {
+  const s = SIZE_MAP[props.size] ?? props.size
+  return { minWidth: s, height: s }
+})
+
+const activeStyle = computed<Record<string, string>>(() => ({
+  backgroundColor: colorValue(props.activeColor),
+  color: foregroundFor(props.activeColor),
+  borderColor: "transparent",
+}))
+
+const colorStyle = computed<Record<string, string> | undefined>(() =>
+  props.color ? { color: colorValue(props.color) } : undefined,
+)
+</script>
+
+<template>
+  <div class="q-pagination" :class="{ 'q-pagination--disabled': disable }" role="navigation" aria-label="Pagination">
+    <button
+      v-if="boundaryLinks"
+      type="button"
+      class="q-pagination__btn"
+      :class="btnClasses"
+      :style="[btnSize, colorStyle]"
+      :disabled="disable || clampedPage <= min"
+      aria-label="Première page"
+      @click="setPage(min)"
+    >
+      <Icon :icon="iconFirst || icons.chevronsLeft" aria-hidden="true" />
+    </button>
+    <button
+      v-if="directionLinks"
+      type="button"
+      class="q-pagination__btn"
+      :class="btnClasses"
+      :style="[btnSize, colorStyle]"
+      :disabled="disable || clampedPage <= min"
+      aria-label="Page précédente"
+      @click="setPage(clampedPage - 1)"
+    >
+      <Icon :icon="iconPrev || icons.chevronLeft" aria-hidden="true" />
+    </button>
+
+    <button
+      v-for="(p, i) in pages"
+      :key="i"
+      type="button"
+      class="q-pagination__btn"
+      :class="[btnClasses, p === clampedPage && 'q-pagination__btn--active']"
+      :style="[btnSize, p === clampedPage ? activeStyle : colorStyle]"
+      :disabled="disable || p === 'ellipsis'"
+      :aria-label="p === 'ellipsis' ? 'Pages intermédiaires' : `Page ${p}`"
+      :aria-current="p === clampedPage ? 'page' : undefined"
+      @click="p !== 'ellipsis' && setPage(p)"
+    >
+      <span v-if="p === 'ellipsis'" class="q-pagination__ellipsis" aria-hidden="true">…</span>
+      <span v-else>{{ p }}</span>
+    </button>
+
+    <button
+      v-if="directionLinks"
+      type="button"
+      class="q-pagination__btn"
+      :class="btnClasses"
+      :style="[btnSize, colorStyle]"
+      :disabled="disable || clampedPage >= total"
+      aria-label="Page suivante"
+      @click="setPage(clampedPage + 1)"
+    >
+      <Icon :icon="iconNext || icons.chevronRight" aria-hidden="true" />
+    </button>
+    <button
+      v-if="boundaryLinks"
+      type="button"
+      class="q-pagination__btn"
+      :class="btnClasses"
+      :style="[btnSize, colorStyle]"
+      :disabled="disable || clampedPage >= total"
+      aria-label="Dernière page"
+      @click="setPage(total)"
+    >
+      <Icon :icon="iconLast || icons.chevronsRight" aria-hidden="true" />
+    </button>
+  </div>
+</template>

package/components/QParallax.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+// QParallax — effet parallaxe type Quasar : <q-parallax :src="img" :height="300" :speed="0.6">
+// L'image de fond se déplace plus lentement que le scroll de la fenêtre (ou du
+// conteneur scrollable parent), en restant toujours couvrante. Content via slot.
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Image de fond (URL) */
+  src?: string
+  /** Hauteur du bloc (px ou chaîne CSS) — défaut 200 */
+  height?: number | string
+  /** Intensité du parallaxe 0.1–1 (défaut 1) */
+  speed?: number
+  /** Désactive l'effet (image statique, cover) */
+  disable?: boolean
+  contentClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  height: 200,
+  speed: 1,
+  disable: false,
+  contentClass: "",
+})
+
+const containerEl = ref<HTMLElement | null>(null)
+const mediaEl = ref<HTMLElement | null>(null)
+const mediaStyle = ref<Record<string, string>>({})
+
+let scrollParent: HTMLElement | Window | null = null
+let raf = 0
+
+const reducedMotion =
+  typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+
+const update = () => {
+  const el = containerEl.value
+  const media = mediaEl.value
+  if (!el || !media) return
+  const h = el.offsetHeight
+  const speed = Math.min(1, Math.max(0.1, props.speed))
+  const mediaH = h * (1 + 2 * 0.15 * speed) // 1.3× à speed 1
+  const travel = (mediaH - h) / 2
+
+  // Viewport visible : la fenêtre, ou le conteneur scrollable détecté
+  let vpTop = 0
+  let vpH = window.innerHeight
+  if (scrollParent && scrollParent !== window) {
+    const r = (scrollParent as HTMLElement).getBoundingClientRect()
+    vpTop = r.top
+    vpH = r.height
+  }
+  const vpCenter = vpTop + vpH / 2
+  const elCenter = el.getBoundingClientRect().top + h / 2
+  const maxDist = vpH / 2 + h / 2
+  const percent = Math.max(-1, Math.min(1, (elCenter - vpCenter) / maxDist))
+  const parallax = -(travel * percent)
+
+  mediaStyle.value = {
+    top: -travel + "px",
+    height: mediaH + "px",
+    transform:
+      props.disable || reducedMotion ? "none" : `translate3d(0, ${parallax}px, 0)`,
+  }
+}
+
+const schedule = () => {
+  if (props.disable || reducedMotion) return
+  if (raf) cancelAnimationFrame(raf)
+  raf = requestAnimationFrame(update)
+}
+
+const findScrollParent = (el: HTMLElement): HTMLElement | Window => {
+  let node = el.parentElement
+  while (node) {
+    const s = getComputedStyle(node)
+    if (/(auto|scroll|overlay)/.test(s.overflowY) && node.scrollHeight > node.clientHeight)
+      return node
+    node = node.parentElement
+  }
+  return window
+}
+
+onMounted(() => {
+  if (typeof window === "undefined") return
+  scrollParent = findScrollParent(containerEl.value!)
+  const target = scrollParent === window ? window : scrollParent
+  target.addEventListener("scroll", schedule, { passive: true })
+  window.addEventListener("resize", schedule)
+  update()
+})
+
+onBeforeUnmount(() => {
+  if (raf) cancelAnimationFrame(raf)
+  if (scrollParent) {
+    const target = scrollParent === window ? window : scrollParent
+    target.removeEventListener("scroll", schedule)
+  }
+  window.removeEventListener("resize", schedule)
+})
+
+watch(() => props.disable, update)
+
+const containerStyle = computed<Record<string, string>>(() => ({
+  height: typeof props.height === "number" ? props.height + "px" : props.height,
+}))
+</script>
+
+<template>
+  <div
+    ref="containerEl"
+    class="q-parallax"
+    :class="cn(props.disable && 'q-parallax--disabled')"
+    :style="containerStyle"
+  >
+    <div ref="mediaEl" class="q-parallax__media" :style="mediaStyle">
+      <img v-if="src" :src="src" alt="" loading="lazy" draggable="false" />
+    </div>
+    <div class="q-parallax__content" :class="contentClass">
+      <slot />
+    </div>
+  </div>
+</template>

package/components/QPullToRefresh.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+// QPullToRefresh — tirer pour rafraîchir : <q-pull-to-refresh @refresh="(done) => { ...; done() }">
+// Conteneur scrollable ; geste de traction quand scrollTop = 0 → indicateur + refresh.
+import { computed, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { colorValue } from "../lib/colors"
+
+interface Props {
+  /** État de rafraîchissement (v-model) */
+  modelValue?: boolean
+  /** Couleur de l'indicateur (token ou hex) */
+  color?: string
+  /** Distance (px) de traction avant déclenchement */
+  pullBack?: number
+  /** Icône Iconify de l'indicateur (défaut : lucide:refresh-cw) */
+  icon?: string
+  /** Taille de l'icône / du spinner de l'indicateur (CSS, défaut 28px) */
+  size?: string
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  color: "primary",
+  pullBack: 40,
+  size: "28px",
+  disable: false,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+  /** Appelé quand le seuil est atteint ; appeler done() pour terminer */
+  refresh: [done: () => void]
+}>()
+
+const internalRefreshing = ref(false)
+const refreshing = computed({
+  get: () => props.modelValue ?? internalRefreshing.value,
+  set: (v) => {
+    internalRefreshing.value = v
+    emit("update:modelValue", v)
+  },
+})
+
+const done = () => {
+  refreshing.value = false
+  pullDistance.value = 0
+}
+
+// — Geste de traction (Pointer Events : tactile + souris) —
+const contentRef = ref<HTMLElement | null>(null)
+const pulling = ref(false)
+const startY = ref(0)
+const pullDistance = ref(0)
+const RESISTANCE = 0.45
+
+const progress = computed(() => Math.min(1, pullDistance.value / props.pullBack))
+
+const onPointerDown = (e: PointerEvent) => {
+  if (props.disable || refreshing.value) return
+  if (contentRef.value && contentRef.value.scrollTop > 0) return
+  startY.value = e.clientY
+  pulling.value = true
+  ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+}
+
+const onPointerMove = (e: PointerEvent) => {
+  if (!pulling.value) return
+  const dy = e.clientY - startY.value
+  if (dy <= 0 || (contentRef.value && contentRef.value.scrollTop > 0)) {
+    pullDistance.value = 0
+    return
+  }
+  pullDistance.value = Math.min(props.pullBack * 3, dy * RESISTANCE)
+}
+
+const onPointerUp = () => {
+  if (!pulling.value) return
+  pulling.value = false
+  if (pullDistance.value >= props.pullBack) {
+    refreshing.value = true
+    emit("refresh", done)
+  }
+  pullDistance.value = 0
+}
+
+const indicatorY = computed(() => (refreshing.value ? 60 : pullDistance.value))
+
+const indicatorStyle = computed<Record<string, string>>(() => ({
+  transform: `translateY(${indicatorY.value}px)`,
+}))
+
+const iconStyle = computed<Record<string, string>>(() => ({
+  color: colorValue(props.color),
+  width: props.size,
+  height: props.size,
+  transform: `rotate(${progress.value * 180}deg)`,
+}))
+
+const rootClasses = computed(() => [
+  "q-pull-to-refresh",
+  pulling.value && "q-pull-to-refresh--pulling",
+  refreshing.value && "q-pull-to-refresh--refreshing",
+])
+</script>
+
+<template>
+  <div
+    ref="contentRef"
+    class="q-pull-to-refresh"
+    :class="rootClasses"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+  >
+    <div class="q-pull-to-refresh__indicator" :style="indicatorStyle">
+      <template v-if="refreshing">
+        <slot name="refreshing">
+          <span
+            class="q-spinner-ring"
+            :style="{ color: colorValue(color), width: size, height: size }"
+            aria-hidden="true"
+          />
+        </slot>
+      </template>
+      <template v-else>
+        <slot name="pulling" :position="pullDistance">
+          <Icon :icon="icon || icons.refreshCw" class="q-pull-to-refresh__icon" :style="iconStyle" aria-hidden="true" />
+        </slot>
+      </template>
+    </div>
+    <div class="q-pull-to-refresh__inner">
+      <slot />
+    </div>
+  </div>
+</template>

package/components/QRadio.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+// QRadio — API Quasar : <q-radio v-model="val" val="a" label="Option A" color="secondary" dense left-label />
+// Sélectionné quand modelValue === val (ou trueValue si pas de val).
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+import { colorValue } from "../lib/colors"
+
+interface Props {
+  modelValue?: unknown
+  /** Valeur que ce radio représente */
+  val?: unknown
+  trueValue?: unknown
+  falseValue?: unknown
+  /** Couleur (token ou hex) */
+  color?: string
+  /** Applique la couleur aussi à l'état non sélectionné */
+  keepColor?: boolean
+  dense?: boolean
+  dark?: boolean
+  disable?: boolean
+  readonly?: boolean
+  label?: string
+  /** Label à gauche du contrôle */
+  leftLabel?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: "primary",
+  keepColor: false,
+  dense: false,
+  dark: false,
+  disable: false,
+  readonly: false,
+  leftLabel: false,
+})
+
+// Defaults manuels (withDefaults ne gère pas les defaults sur props typées unknown)
+const trueValue = computed(() => props.trueValue ?? true)
+const falseValue = computed(() => props.falseValue ?? false)
+
+const emit = defineEmits<{
+  "update:modelValue": [value: unknown]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+}>()
+
+const selectedValue = computed(() => props.val ?? trueValue.value)
+const isSelected = computed(() => props.modelValue === selectedValue.value)
+const isDisabled = computed(() => props.disable || props.readonly)
+
+const select = () => {
+  if (isDisabled.value) return
+  emit("update:modelValue", selectedValue.value)
+}
+
+const circleStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  const color = colorValue(props.color)
+  if (isSelected.value || props.keepColor) style.borderColor = color
+  return style
+})
+
+const dotStyle = computed<Record<string, string>>((): Record<string, string> =>
+  isSelected.value ? { backgroundColor: colorValue(props.color) } : {},
+)
+
+const rootClasses = computed(() =>
+  cn(
+    "q-radio",
+    props.dense && "q-radio--dense",
+    props.dark && "q-radio--dark",
+    props.disable && "q-radio--disabled",
+  ),
+)
+</script>
+
+<template>
+  <button
+    type="button"
+    role="radio"
+    :aria-checked="isSelected ? 'true' : 'false'"
+    :disabled="isDisabled"
+    class="q-radio"
+    :class="rootClasses"
+    @click="select"
+    @focus="(e) => emit('focus', e)"
+    @blur="(e) => emit('blur', e)"
+  >
+    <span v-if="leftLabel && (label !== undefined || $slots.default)" class="q-radio__label">
+      <slot>{{ label }}</slot>
+    </span>
+    <span class="q-radio__circle" :style="circleStyle" aria-hidden="true">
+      <span v-if="isSelected" class="q-radio__dot" :style="dotStyle" />
+    </span>
+    <span v-if="!leftLabel && (label !== undefined || $slots.default)" class="q-radio__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </button>
+</template>