@dnax/ui 0.0.1

package/components/QImg.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+// QImg — API Quasar : <q-img src="…" ratio="16/9" contain position="50% 50%" spinner-color loading />
+// Slots : default (overlay), loading (spinner par défaut), error
+// Placeholder : placeholder-src (image basse résolution affichée pendant le chargement)
+import { computed, ref, watch } from "vue"
+import { cn } from "../lib/utils"
+import { colorValue } from "../lib/colors"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+
+interface Props {
+  src?: string
+  alt?: string
+  /** Ratio d'affichage ("16/9", "4/3", "1", nombre) */
+  ratio?: string | number
+  /** object-fit: contain (sinon cover) */
+  contain?: boolean
+  /** Position de l'image ("50% 50%") */
+  position?: string
+  /** Force l'état chargement (spinner) */
+  loading?: boolean
+  spinnerColor?: string
+  spinnerSize?: string
+  /** Image placeholder (basse résolution) affichée pendant le chargement */
+  placeholderSrc?: string
+  /** Coins arrondis : true = pilule, ou échelle xs|sm|md|lg (none = carré) */
+  radius?: RadiusProp
+  imgClass?: string
+  imgStyle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: "50% 50%",
+  loading: false,
+  spinnerColor: "",
+  spinnerSize: "",
+  placeholderSrc: "",
+  imgClass: "",
+  imgStyle: "",
+})
+
+const emit = defineEmits<{ load: [event: Event]; error: [event: Event] }>()
+
+const imgLoading = ref(false)
+const imgError = ref(false)
+
+// Dès que src change : retour en état chargement (le @load remettra à false)
+watch(
+  () => props.src,
+  (s) => {
+    imgLoading.value = !!s
+    imgError.value = false
+  },
+  { immediate: true },
+)
+
+const containerStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  if (props.ratio !== undefined) {
+    style.aspectRatio = String(props.ratio).replace("/", " / ")
+  }
+  return style
+})
+
+const spinnerStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  if (props.spinnerColor) style.color = colorValue(props.spinnerColor)
+  if (props.spinnerSize) {
+    style.width = props.spinnerSize
+    style.height = props.spinnerSize
+  }
+  return style
+})
+
+const imageClasses = computed(() =>
+  cn("q-img__image", props.contain && "q-img__image--contain", props.imgClass),
+)
+
+// radius : prop explicite > composantProps.QImg > composantProps.default → --q-radius
+const effectiveRadius = useRadius("QImg", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+const imageStyle = computed(() => `${props.imgStyle}; object-position: ${props.position}`)
+
+// L'image est prête (chargée) → fondu
+const ready = computed(() => !imgLoading.value && !imgError.value)
+
+const onLoad = (e: Event) => {
+  imgLoading.value = false
+  imgError.value = false
+  emit("load", e)
+}
+
+const onError = (e: Event) => {
+  imgLoading.value = false
+  imgError.value = true
+  emit("error", e)
+}
+
+const showLoading = computed(() => props.loading || imgLoading.value)
+</script>
+
+<template>
+  <div class="q-img" :style="[containerStyle, roundedStyle]">
+    <!-- Placeholder basse résolution pendant le chargement -->
+    <img
+      v-if="placeholderSrc && imgLoading && !imgError"
+      :src="placeholderSrc"
+      alt=""
+      aria-hidden="true"
+      class="q-img__placeholder"
+      :class="props.contain && 'q-img__image--contain'"
+    />
+
+    <img
+      v-if="src"
+      :src="src"
+      :alt="alt"
+      class="q-img__image"
+      :class="[imageClasses, ready && 'q-img__image--ready']"
+      :style="imageStyle"
+      loading="lazy"
+      @load="onLoad"
+      @error="onError"
+    />
+
+    <!-- Loading / erreur -->
+    <div v-if="showLoading" class="q-img__state">
+      <slot name="loading">
+        <span class="q-spinner-ring" :style="spinnerStyle" aria-hidden="true" />
+      </slot>
+    </div>
+    <div v-else-if="imgError" class="q-img__state">
+      <slot name="error" />
+    </div>
+
+    <!-- Overlay -->
+    <div class="q-img__overlay">
+      <slot />
+    </div>
+  </div>
+</template>

package/components/QInfiniteScroll.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+// QInfiniteScroll — API Quasar : <q-infinite-scroll :offset="250" @load="onLoad" animated>
+// Charge plus de contenu quand on approche du bas (scroll fenêtre ou conteneur scrollable).
+// Le handler reçoit (index, done) — appeler done() quand le chargement est fini.
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue"
+
+interface Props {
+  /** Distance (px) du bas avant de déclencher le chargement (défaut : 250) */
+  offset?: number
+  /** Désactive le chargement */
+  disable?: boolean
+  /** Anime l'arrivée des nouveaux items (fondu + glissement vers le haut) */
+  animated?: boolean
+  /** Masque l'indicateur de chargement (scroll silencieux — TikTok/Instagram) */
+  hideLoading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  offset: 250,
+  disable: false,
+  animated: false,
+  hideLoading: false,
+})
+
+const emit = defineEmits<{
+  load: [index: number, done: () => void]
+}>()
+
+const rootEl = ref<HTMLElement | null>(null)
+const loading = ref(false)
+let loadIndex = 0
+
+// Conteneur scrollable le plus proche (ou la fenêtre)
+const scrollContainer = ref<HTMLElement | Window | null>(null)
+
+const findScrollContainer = (el: HTMLElement | null): HTMLElement | Window | null => {
+  let node: HTMLElement | null = el?.parentElement ?? null
+  while (node) {
+    if (/(auto|scroll)/.test(getComputedStyle(node).overflowY)) return node
+    node = node.parentElement
+  }
+  return typeof window !== "undefined" ? window : null
+}
+
+const load = () => {
+  if (props.disable || loading.value) return
+  loading.value = true
+  loadIndex += 1
+  emit("load", loadIndex, () => {
+    loading.value = false
+    nextTick(check)
+  })
+}
+
+const check = () => {
+  if (props.disable || loading.value) return
+  const el = rootEl.value
+  const sc = scrollContainer.value
+  if (!el || !sc) return
+  const rect = el.getBoundingClientRect()
+  if (sc === window) {
+    if (rect.bottom <= window.innerHeight + props.offset) load()
+  }
+  else {
+    const scRect = (sc as HTMLElement).getBoundingClientRect()
+    if (rect.bottom <= scRect.bottom + props.offset) load()
+  }
+}
+
+let resizeObserver: ResizeObserver | undefined
+
+onMounted(() => {
+  scrollContainer.value = findScrollContainer(rootEl.value)
+  if (typeof window !== "undefined") {
+    // capture : capte aussi le scroll des conteneurs internes
+    window.addEventListener("scroll", check, true)
+    window.addEventListener("resize", check)
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(check)
+      if (rootEl.value) resizeObserver.observe(rootEl.value)
+    }
+  }
+  check()
+})
+
+onBeforeUnmount(() => {
+  if (typeof window !== "undefined") {
+    window.removeEventListener("scroll", check, true)
+    window.removeEventListener("resize", check)
+    resizeObserver?.disconnect()
+  }
+})
+
+const classes = computed(() => ({
+  "q-infinite-scroll--animated": props.animated,
+}))
+</script>
+
+<template>
+  <div ref="rootEl" class="q-infinite-scroll" :class="classes">
+    <slot />
+    <div v-if="loading && !hideLoading" class="q-infinite-scroll__loading" role="status" aria-live="polite">
+      <slot name="loading">
+        <span class="q-spinner-ring" aria-hidden="true" />
+        <span class="q-infinite-scroll__loading-label">Loading more…</span>
+      </slot>
+    </div>
+  </div>
+</template>

package/components/QInnerLoading.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+// QInnerLoading — overlay de chargement dans un conteneur : <q-inner-loading showing label="…" color="primary" />
+// Le parent doit être position: relative. Rendu en fondu (Transition).
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { cn } from "../lib/utils"
+import { colorValue } from "../lib/colors"
+
+const SIZE_MAP: Record<string, string> = { sm: "20px", md: "32px", lg: "48px" }
+
+interface Props {
+  /** Affiche/masque le loading */
+  showing?: boolean
+  /** Libellé sous le spinner */
+  label?: string
+  /** Taille : sm | md | lg ou valeur CSS */
+  size?: string
+  /** Couleur du spinner (token ou hex) */
+  color?: string
+  /** Icône Iconify en rotation (sinon spinner CSS) */
+  icon?: string
+  /** Fond sombre */
+  dark?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showing: false,
+  size: "md",
+  color: "primary",
+  icon: "",
+  dark: false,
+})
+
+const spinnerStyle = 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 = colorValue(props.color)
+  return style
+})
+
+const overlayClasses = computed(() => cn("q-inner-loading", props.dark && "q-inner-loading--dark"))
+</script>
+
+<template>
+  <Transition name="q-inner-loading">
+    <div
+      v-if="showing"
+      class="q-inner-loading"
+      :class="overlayClasses"
+      role="status"
+      aria-live="polite"
+    >
+      <slot>
+        <Icon
+          v-if="icon"
+          :icon="icon"
+          class="q-inner-loading__icon"
+          :style="spinnerStyle"
+          aria-hidden="true"
+        />
+        <span v-else class="q-spinner-ring" :style="spinnerStyle" aria-hidden="true" />
+        <span v-if="label" class="q-inner-loading__label">{{ label }}</span>
+      </slot>
+    </div>
+  </Transition>
+</template>

package/components/QInput.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+// QInput — API Quasar : <q-input v-model="…" label="Email" outlined dense clearable counter maxlength="60" hint error error-message />
+// Variants : outlined (défaut) | filled | borderless ; le label est toujours affiché au-dessus du champ.
+import { computed, nextTick, ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+
+interface Props {
+  modelValue?: string | number | null
+  /** Type de champ (text par défaut) */
+  type?: "text" | "password" | "number" | "email" | "search" | "tel" | "url"
+  /** Label affiché au-dessus du champ */
+  label?: string
+  /** @deprecated Le label est toujours affiché au-dessus — cette prop est ignorée */
+  stackLabel?: boolean
+  /** Aide affichée sous le champ */
+  hint?: string
+  /** État d'erreur */
+  error?: boolean
+  /** Message d'erreur (affiché quand error) */
+  errorMessage?: string
+  /** Affiche le compteur (nécessite maxlength) */
+  counter?: boolean
+  maxlength?: number
+  /** Préfixe dans le champ */
+  prefix?: string
+  /** Suffixe dans le champ */
+  suffix?: string
+  /** Icône Iconify à gauche (remplacée par le slot #prepend s'il est fourni) */
+  iconLeft?: string
+  /** Icône Iconify à droite (remplacée par le slot #append s'il est fourni) */
+  iconRight?: string
+  /** Masque de saisie : # = chiffre, A = lettre, N = alphanumérique, X = quelconque (ex. "##-##-##") */
+  mask?: string
+  /** Remplit les emplacements vides par "_" (défaut : la saisie s'arrête au dernier caractère) */
+  fillMask?: boolean
+  /** Émet la valeur sans les caractères du masque (littéraux et _) */
+  unmaskedValue?: boolean
+  /** Bouton d'effacement */
+  clearable?: boolean
+  /** Bordure visible */
+  outlined?: boolean
+  /** Fond gris, soulignement */
+  filled?: boolean
+  /** Aucune bordure */
+  borderless?: boolean
+  /** Coins arrondis : true = pilule, ou échelle xs|sm|md|lg (none = carré) */
+  radius?: RadiusProp
+  /** Hauteur réduite */
+  dense?: boolean
+  /** Textarea à hauteur auto */
+  autogrow?: boolean
+  disable?: boolean
+  readonly?: boolean
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+  stackLabel: false,
+  error: false,
+  counter: false,
+  clearable: false,
+  outlined: false,
+  filled: false,
+  borderless: false,
+  dense: false,
+  autogrow: false,
+  disable: false,
+  readonly: false,
+  fillMask: false,
+  unmaskedValue: false,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  clear: []
+  keyup: [event: KeyboardEvent]
+  keydown: [event: KeyboardEvent]
+}>()
+
+const focused = ref(false)
+const nativeEl = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)
+
+// radius : prop explicite > composantProps.QInput.radius ; échelle → --q-radius
+const effectiveRadius = useRadius("QInput", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+const value = computed(() => props.modelValue ?? "")
+
+// ═════════ Masque de saisie : # chiffre, A lettre, N alphanumérique, X quelconque ═════════
+const isToken = (c: string): boolean => c === "#" || c === "A" || c === "N" || c === "X"
+
+const matchesToken = (tok: string, c: string): boolean =>
+  tok === "#"
+    ? /[0-9]/.test(c)
+    : tok === "A"
+      ? /[a-zA-Z]/.test(c)
+      : tok === "N"
+        ? /[0-9a-zA-Z]/.test(c)
+        : true
+
+/** Extrait les caractères réels (emplacements tokens) d'une valeur affichée masquée. */
+const unmask = (v: string, fill: boolean): string => {
+  if (!props.mask) return v
+  let out = ""
+  let vi = 0
+  for (const ch of props.mask) {
+    if (!isToken(ch)) {
+      if (v[vi] === ch) vi++ // littéral présent → on le consomme
+      continue // sinon : ne pas consommer, c'est un vrai caractère
+    }
+    if (vi >= v.length) break
+    const c = v[vi]!
+    vi++
+    if (fill && c === "_") continue // emplacement vide
+    out += c
+  }
+  return out
+}
+
+/** Applique le masque à une chaîne de caractères bruts (littéraux insérés, caractères invalides sautés). */
+const mask = (raw: string, fill: boolean): string => {
+  if (!props.mask) return raw
+  let out = ""
+  let ri = 0
+  for (const ch of props.mask) {
+    // Plus de caractères bruts (sans fill) → on s'arrête (pas de littéraux de fin)
+    if (ri >= raw.length && !fill) break
+    if (!isToken(ch)) {
+      out += ch
+      continue
+    }
+    while (ri < raw.length && !matchesToken(ch, raw[ri]!)) ri++
+    if (ri >= raw.length) {
+      if (fill) out += "_"
+      else break
+      continue
+    }
+    out += raw[ri]!
+    ri++
+  }
+  return out
+}
+
+/** Valeur affichée dans le champ : applique le masque au modelValue (brut si unmaskedValue). */
+const displayValue = computed(() => {
+  const v = String(props.modelValue ?? "")
+  if (!props.mask) return v
+  const raw = props.unmaskedValue ? v : unmask(v, props.fillMask)
+  return mask(raw, props.fillMask)
+})
+
+const floatActive = computed(() => focused.value || value.value !== "" || props.stackLabel)
+
+const fieldClasses = computed(() =>
+  cn(
+    "q-input",
+    props.outlined && "q-field--outlined",
+    props.filled && "q-field--filled",
+    props.borderless && "q-field--borderless",
+    effectiveRadius.value === true && "q-field--rounded",
+    props.dense && "q-field--dense",
+    props.error && "q-field--error",
+    props.disable && "q-field--disabled",
+    floatActive.value && "q-field--float",
+  ),
+)
+
+const resizeTextarea = async () => {
+  const el = nativeEl.value
+  if (el && props.autogrow) {
+    await nextTick()
+    el.style.height = "auto"
+    el.style.height = `${el.scrollHeight}px`
+  }
+}
+
+watch(value, resizeTextarea)
+
+const onInput = (e: Event) => {
+  const el = e.target as HTMLInputElement | HTMLTextAreaElement
+  const raw = el.value
+  if (!props.mask) {
+    emit("update:modelValue", raw)
+    return
+  }
+  const masked = mask(unmask(raw, props.fillMask), props.fillMask)
+  emit("update:modelValue", props.unmaskedValue ? unmask(masked, props.fillMask) : masked)
+  // Replique le texte masqué dans le champ et remet le caret à la fin
+  el.value = masked
+  const len = masked.length
+  el.setSelectionRange?.(len, len)
+}
+
+const onFocus = (e: FocusEvent) => {
+  focused.value = true
+  emit("focus", e)
+}
+
+const onBlur = (e: FocusEvent) => {
+  focused.value = false
+  emit("blur", e)
+}
+
+const onClear = () => {
+  emit("update:modelValue", "")
+  emit("clear")
+  nativeEl.value?.focus()
+}
+
+const showClear = computed(
+  () => props.clearable && !props.disable && !props.readonly && value.value !== "",
+)
+
+const inputAttrs = computed(() => ({
+  type: props.type,
+  maxlength: props.maxlength,
+  placeholder: props.placeholder,
+  disabled: props.disable || undefined,
+  readonly: props.readonly || undefined,
+}))
+</script>
+
+<template>
+  <div class="q-input" :class="fieldClasses" :style="roundedStyle">
+    <label v-if="label" class="q-field__label-stack">{{ label }}</label>
+    <div class="q-field__control">
+      <slot name="prepend">
+        <Icon v-if="iconLeft" :icon="iconLeft" class="q-field__icon" aria-hidden="true" />
+      </slot>
+      <span v-if="prefix" class="q-field__prefix">{{ prefix }}</span>
+      <textarea
+        v-if="autogrow"
+        ref="nativeEl"
+        class="q-field__native"
+        :value="displayValue"
+        rows="1"
+        v-bind="inputAttrs"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keyup="(e) => emit('keyup', e)"
+        @keydown="(e) => emit('keydown', e)"
+      />
+      <input
+        v-else
+        ref="nativeEl"
+        class="q-field__native"
+        :value="displayValue"
+        v-bind="inputAttrs"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keyup="(e) => emit('keyup', e)"
+        @keydown="(e) => emit('keydown', e)"
+      />
+      <span v-if="suffix" class="q-field__suffix">{{ suffix }}</span>
+      <button
+        v-if="showClear"
+        class="q-field__clear"
+        type="button"
+        aria-label="Effacer"
+        @click="onClear"
+      >
+        <Icon :icon="icons.x" aria-hidden="true" />
+      </button>
+      <slot name="append">
+        <Icon v-if="iconRight" :icon="iconRight" class="q-field__icon" aria-hidden="true" />
+      </slot>
+    </div>
+    <div class="q-field__bottom">
+      <div v-if="error" class="q-field__error">
+        <slot name="error">{{ errorMessage }}</slot>
+      </div>
+      <div v-else-if="hint || $slots.hint" class="q-field__hint">
+        <slot name="hint">{{ hint }}</slot>
+      </div>
+      <div v-if="counter && maxlength" class="q-field__counter">
+        {{ String(value).length }}/{{ maxlength }}
+      </div>
+    </div>
+  </div>
+</template>