@dnax/ui 0.0.1

package/components/QInputOtp.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+// QInputOtp — saisie de code à usage unique : <q-input-otp v-model="code" length="6" numeric />
+// Une case par caractère, avance automatique, Backspace/Delete, flèches, collage,
+// masquage (password), complétion émise via @complete.
+import { computed, ref, watch } from "vue"
+import { cn } from "../lib/utils"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+
+type OtpSize = "sm" | "md" | "lg"
+
+interface Props {
+  /** Code (v-model) — chaîne, longueur ≤ length */
+  modelValue?: string
+  /** Nombre de cases (défaut : 6) */
+  length?: number
+  /** Label affiché au-dessus du champ */
+  label?: string
+  hint?: string
+  error?: boolean
+  errorMessage?: string
+  /** Variantes de champ (même vocabulaire que q-input) */
+  outlined?: boolean
+  filled?: boolean
+  borderless?: boolean
+  /** Hauteur réduite */
+  dense?: boolean
+  disable?: boolean
+  readonly?: boolean
+  /** Restreint la saisie aux chiffres (inputmode numeric sur mobile) */
+  numeric?: boolean
+  /** Masque les caractères (type password) */
+  password?: boolean
+  /** Taille des cases : sm | md | lg */
+  size?: OtpSize
+  /** Séparateur affiché entre les groupes (ex. "-") */
+  separator?: string
+  /** Nombre de cases par groupe (défaut : length → aucun séparateur) */
+  groupEvery?: number
+  /** Focus sur la première case au montage */
+  autofocus?: boolean
+  /** Coins arrondis : true = pilule, ou échelle xs|sm|md|lg (none = carré) */
+  radius?: RadiusProp
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  length: 6,
+  outlined: false,
+  filled: false,
+  borderless: false,
+  dense: false,
+  disable: false,
+  readonly: false,
+  numeric: false,
+  password: false,
+  size: "md",
+  separator: "",
+  groupEvery: 0,
+  autofocus: false,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string]
+  complete: [value: string]
+  focus: [event: FocusEvent, index: number]
+  blur: [event: FocusEvent, index: number]
+}>()
+
+const value = computed(() => props.modelValue ?? "")
+const boxes = computed(() => Array.from({ length: props.length }, (_, i) => i))
+const inputs = ref<(HTMLInputElement | null)[]>([])
+
+const boxChar = (i: number) => value.value[i] ?? ""
+const charType = computed(() => (props.password ? "password" : "text"))
+
+// — Focus —
+const focusBox = (i: number) => {
+  const el = inputs.value[i]
+  el?.focus()
+  el?.select()
+}
+
+const onBoxFocus = (i: number, e: FocusEvent) => {
+  ;(e.target as HTMLInputElement).select()
+  emit("focus", e, i)
+}
+
+// — Saisie —
+const isValidChar = (ch: string) => (props.numeric ? /[0-9]/.test(ch) : ch !== " ")
+
+const write = (i: number, chars: string[]) => {
+  const arr = value.value.split("")
+  for (let k = 0; k < chars.length && i + k < props.length; k++) {
+    if (!isValidChar(chars[k]!)) continue
+    arr[i + k] = chars[k]!
+  }
+  emit("update:modelValue", arr.join(""))
+  return Math.min(i + chars.length - 1, props.length - 1)
+}
+
+const onInput = (i: number, e: Event) => {
+  const el = e.target as HTMLInputElement
+  const text = el.value
+  el.value = "" // valeur pilotée : on remplit nous-mêmes
+  if (props.disable || props.readonly) return
+  if (!text) return
+  if (text.length > 1) {
+    // collage ou saisie multiple : remplit depuis la case i
+    const chars = text.replace(/\s/g, "").split("")
+    const last = write(i, chars)
+    focusBox(last)
+    return
+  }
+  const ch = text[0]!
+  if (!isValidChar(ch)) return
+  write(i, [ch])
+  if (i < props.length - 1) focusBox(i + 1)
+}
+
+const onPaste = (i: number, e: ClipboardEvent) => {
+  if (props.disable || props.readonly) return
+  e.preventDefault()
+  const text = e.clipboardData?.getData("text") ?? ""
+  const chars = text.replace(/\s/g, "").split("")
+  const last = write(i, chars)
+  focusBox(last)
+}
+
+// — Clavier —
+const onKeydown = (i: number, e: KeyboardEvent) => {
+  if (props.disable || props.readonly) return
+  if (e.key === "Backspace") {
+    e.preventDefault()
+    if (boxChar(i)) {
+      const arr = value.value.split("")
+      arr[i] = ""
+      emit("update:modelValue", arr.join(""))
+    } else if (i > 0) {
+      const arr = value.value.split("")
+      arr[i - 1] = ""
+      emit("update:modelValue", arr.join(""))
+      focusBox(i - 1)
+    }
+    return
+  }
+  if (e.key === "Delete") {
+    e.preventDefault()
+    if (boxChar(i)) {
+      const arr = value.value.split("")
+      arr[i] = ""
+      emit("update:modelValue", arr.join(""))
+    }
+    return
+  }
+  if (e.key === "ArrowLeft" && i > 0) {
+    e.preventDefault()
+    focusBox(i - 1)
+    return
+  }
+  if (e.key === "ArrowRight" && i < props.length - 1) {
+    e.preventDefault()
+    focusBox(i + 1)
+    return
+  }
+  // Retaper le même caractère : l'événement input ne se déclenche pas
+  // (valeur identique) → on avance quand même.
+  if (e.key.length === 1 && isValidChar(e.key) && boxChar(i) === e.key) {
+    focusBox(i + 1)
+  }
+}
+
+// — Complétion —
+watch(
+  value,
+  (v) => {
+    if (v.length === props.length && props.length > 0) emit("complete", v)
+  },
+)
+
+// — Styles —
+const effectiveRadius = useRadius("QInputOtp", () => props.radius)
+
+const rootClasses = computed(() =>
+  cn(
+    "q-input-otp",
+    props.outlined && "q-field--outlined",
+    props.filled && "q-field--filled",
+    props.borderless && "q-field--borderless",
+    props.dense && "q-field--dense",
+    props.error && "q-field--error",
+    props.disable && "q-field--disabled",
+  ),
+)
+
+const boxClasses = (i: number) =>
+  cn(
+    "q-input-otp__box",
+    `q-input-otp__box--${props.size}`,
+    boxChar(i) && "q-input-otp__box--filled",
+    props.error && "q-input-otp__box--error",
+  )
+
+const showSeparator = (i: number) =>
+  props.separator && props.groupEvery > 0 && i > 0 && i % props.groupEvery === 0
+</script>
+
+<template>
+  <div class="q-input-otp" :class="rootClasses" :style="radiusStyle(effectiveRadius)">
+    <label v-if="label" class="q-field__label-stack">{{ label }}</label>
+    <div class="q-input-otp__boxes">
+      <template v-for="i in boxes" :key="i">
+        <span v-if="showSeparator(i)" class="q-input-otp__separator">{{ separator }}</span>
+        <input
+          :ref="(el) => (inputs[i] = el as HTMLInputElement | null)"
+          :class="boxClasses(i)"
+          :value="boxChar(i)"
+          :type="charType"
+          :inputmode="numeric ? 'numeric' : undefined"
+          :autocomplete="'one-time-code'"
+          :disabled="disable || undefined"
+          :readonly="readonly || undefined"
+          :tabindex="disable || readonly ? -1 : 0"
+          :aria-label="label ? label + ', character ' + (i + 1) : 'Character ' + (i + 1)"
+          @focus="onBoxFocus(i, $event)"
+          @blur="(e) => emit('blur', e, i)"
+          @input="onInput(i, $event)"
+          @keydown="onKeydown(i, $event)"
+          @paste="onPaste(i, $event)"
+        />
+      </template>
+    </div>
+    <div class="q-field__bottom">
+      <div v-if="error" class="q-field__error">{{ errorMessage }}</div>
+      <div v-else-if="hint" class="q-field__hint">{{ hint }}</div>
+    </div>
+  </div>
+</template>

package/components/QInputPassword.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+// QInputPassword — champ mot de passe avec toggle afficher/masquer (œil / œil barré).
+// Wrapper de QInput : toutes les props passent à travers, le type est piloté en interne.
+import { computed, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import QInput from "./QInput.vue"
+import { useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+
+interface Props {
+  modelValue?: string | number | null
+  label?: string
+  /** Label fixé au-dessus du champ */
+  stackLabel?: boolean
+  hint?: string
+  error?: boolean
+  errorMessage?: string
+  counter?: boolean
+  maxlength?: number
+  prefix?: string
+  suffix?: string
+  clearable?: boolean
+  outlined?: boolean
+  filled?: boolean
+  borderless?: boolean
+  dense?: boolean
+  disable?: boolean
+  readonly?: boolean
+  placeholder?: string
+  autocomplete?: string
+  /** Coins arrondis : true = pilule, ou échelle xs|sm|md|lg (none = carré) */
+  radius?: RadiusProp
+}
+
+const props = defineProps<Props>()
+
+const show = ref(false)
+
+// radius : prop explicite > composantProps.QInputPassword > composantProps.default
+const effectiveRadius = useRadius("QInputPassword", () => props.radius)
+
+const inputType = computed<"password" | "text">(() => (show.value ? "text" : "password"))
+
+const toggleLabel = computed(() =>
+  show.value ? "Masquer le mot de passe" : "Afficher le mot de passe",
+)
+</script>
+
+<template>
+  <q-input v-bind="{ ...$props, ...$attrs }" :radius="effectiveRadius" :type="inputType">
+    <template #append>
+      <button
+        v-if="!disable && !readonly"
+        type="button"
+        class="q-input-password__toggle"
+        :aria-label="toggleLabel"
+        @click="show = !show"
+      >
+        <Icon :icon="show ? icons.eye : icons.eyeOff" aria-hidden="true" />
+      </button>
+    </template>
+    <template v-if="$slots.prepend" #prepend><slot name="prepend" /></template>
+    <template v-if="$slots.hint" #hint><slot name="hint" /></template>
+    <template v-if="$slots.error" #error><slot name="error" /></template>
+  </q-input>
+</template>

package/components/QInputTag.vue

@@ -0,0 +1,281 @@
+<script setup lang="ts">
+// QInputTag — champ de tags : <q-input-tag v-model="tags" label="Emails" outlined />
+// Entrée/virgule ajoute · Backspace/Delete retire · flèches pour naviguer entre les
+// tags · double-clic (ou Entrée) pour éditer un tag · collage multi-tags (séparateurs).
+import { computed, nextTick, ref } 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 {
+  /** Tags (v-model) */
+  modelValue?: string[]
+  /** Label affiché au-dessus du champ */
+  label?: string
+  placeholder?: string
+  hint?: string
+  error?: boolean
+  errorMessage?: string
+  /** 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
+  disable?: boolean
+  readonly?: boolean
+  /** Nombre max de tags (0 = illimité) */
+  maxTags?: number
+  /** Séparateurs de collage (défaut : virgule, point-virgule, retour ligne) */
+  separators?: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  outlined: false,
+  filled: false,
+  borderless: false,
+  dense: false,
+  disable: false,
+  readonly: false,
+  maxTags: 0,
+  separators: () => [",", ";", "\n"],
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string[]]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  add: [tag: string]
+  remove: [tag: string]
+}>()
+
+const inputEl = ref<HTMLInputElement | null>(null)
+const editInputEl = ref<HTMLInputElement | null>(null)
+const controlEl = ref<HTMLElement | null>(null)
+const text = ref("")
+const focusedTag = ref<number | null>(null)
+const editing = ref<{ index: number; value: string } | null>(null)
+
+const tags = computed(() => props.modelValue ?? [])
+
+// — Ajout / retrait —
+const addTag = (raw: string) => {
+  const t = raw.trim()
+  if (!t) return
+  if (props.maxTags > 0 && tags.value.length >= props.maxTags) return
+  if (tags.value.includes(t)) return
+  emit("update:modelValue", [...tags.value, t])
+  emit("add", t)
+}
+
+const addText = () => {
+  const t = text.value.trim()
+  text.value = ""
+  if (t) addTag(t)
+}
+
+const removeAt = (index: number) => {
+  const t = tags.value[index]
+  if (t === undefined) return
+  const next = [...tags.value]
+  next.splice(index, 1)
+  emit("update:modelValue", next)
+  emit("remove", t)
+  if (focusedTag.value === index) focusedTag.value = null
+  inputEl.value?.focus()
+}
+
+// — Saisie —
+const onInputKeydown = (e: KeyboardEvent) => {
+  if (props.disable || props.readonly) return
+  if (e.key === "Enter" || e.key === ",") {
+    e.preventDefault()
+    addText()
+  }
+  else if (e.key === "Backspace" && text.value === "" && tags.value.length) {
+    e.preventDefault()
+    removeAt(tags.value.length - 1)
+  }
+  else if (e.key === "ArrowLeft" && text.value === "" && tags.value.length) {
+    const el = e.target as HTMLInputElement
+    if (el.selectionStart === 0) {
+      e.preventDefault()
+      focusChip(tags.value.length - 1)
+    }
+  }
+}
+
+// Collage : divise par les séparateurs → plusieurs tags
+const onPaste = (e: ClipboardEvent) => {
+  if (props.disable || props.readonly) return
+  const raw = e.clipboardData?.getData("text") ?? ""
+  const esc = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+  const parts = raw.split(new RegExp(props.separators.map(esc).join("|")))
+  if (parts.length > 1) {
+    e.preventDefault()
+    for (const p of parts) addTag(p)
+  }
+}
+
+// — Navigation & édition des tags —
+const focusChip = (index: number) => {
+  const chips = controlEl.value?.querySelectorAll<HTMLElement>(".q-input-tag__chip")
+  const el = chips?.[index]
+  if (el) {
+    el.focus()
+    focusedTag.value = index
+  }
+  else {
+    inputEl.value?.focus()
+    focusedTag.value = null
+  }
+}
+
+const tagKeydown = (index: number, e: KeyboardEvent) => {
+  if (e.key === "Backspace" || e.key === "Delete") {
+    e.preventDefault()
+    removeAt(index)
+  }
+  else if (e.key === "ArrowRight") {
+    e.preventDefault()
+    focusChip(index + 1)
+  }
+  else if (e.key === "ArrowLeft") {
+    e.preventDefault()
+    if (index === 0) inputEl.value?.focus()
+    else focusChip(index - 1)
+  }
+  else if (e.key === "Enter" || e.key === "F2") {
+    e.preventDefault()
+    startEdit(index)
+  }
+}
+
+const startEdit = (index: number) => {
+  editing.value = { index, value: tags.value[index] ?? "" }
+  nextTick(() => {
+    editInputEl.value?.focus()
+    editInputEl.value?.select()
+  })
+}
+
+const commitEdit = () => {
+  if (!editing.value) return
+  const { index, value } = editing.value
+  editing.value = null
+  const next = [...tags.value]
+  const t = value.trim()
+  if (!t) {
+    next.splice(index, 1)
+    emit("update:modelValue", next)
+    emit("remove", tags.value[index]!)
+  }
+  else if (t !== next[index]) {
+    next[index] = t
+    emit("update:modelValue", next)
+  }
+  inputEl.value?.focus()
+}
+
+const cancelEdit = () => {
+  editing.value = null
+  inputEl.value?.focus()
+}
+
+const editKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Enter") {
+    e.preventDefault()
+    commitEdit()
+  }
+  else if (e.key === "Escape") {
+    e.preventDefault()
+    cancelEdit()
+  }
+}
+
+// — Radius & styles de champ —
+const effectiveRadius = useRadius("QInputTag", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+const fieldClasses = computed(() =>
+  cn(
+    "q-input-tag",
+    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",
+  ),
+)
+</script>
+
+<template>
+  <div class="q-input-tag" :class="fieldClasses" :style="roundedStyle">
+    <label v-if="label" class="q-field__label-stack">{{ label }}</label>
+    <div ref="controlEl" class="q-field__control q-input-tag__control" @click="inputEl?.focus()">
+      <template v-for="(t, i) in tags" :key="`${t}-${i}`">
+        <span
+          v-if="editing?.index !== i"
+          class="q-input-tag__chip"
+          :class="{ 'q-input-tag__chip--focused': focusedTag === i }"
+          role="button"
+          :tabindex="disable || readonly ? -1 : 0"
+          @click.stop="focusedTag = i"
+          @dblclick.stop="startEdit(i)"
+          @keydown="(e) => tagKeydown(i, e)"
+          @focus="focusedTag = i"
+          @blur="focusedTag = null"
+        >
+          <span class="q-input-tag__chip-label">{{ t }}</span>
+          <button
+            v-if="!disable && !readonly"
+            type="button"
+            class="q-input-tag__chip-remove"
+            :aria-label="`Retirer ${t}`"
+            @click.stop="removeAt(i)"
+          >
+            <Icon :icon="icons.x" aria-hidden="true" />
+          </button>
+        </span>
+        <input
+          v-else
+          ref="editInputEl"
+          class="q-input-tag__edit"
+          :value="editing.value"
+          @input="editing.value = ($event.target as HTMLInputElement).value"
+          @keydown="editKeydown"
+          @blur="commitEdit"
+        />
+      </template>
+      <input
+        ref="inputEl"
+        class="q-field__native q-input-tag__native"
+        :value="text"
+        :placeholder="tags.length ? undefined : placeholder"
+        :disabled="disable || undefined"
+        :readonly="readonly || undefined"
+        @input="text = ($event.target as HTMLInputElement).value"
+        @keydown="onInputKeydown"
+        @paste="onPaste"
+        @focus="(e) => emit('focus', e)"
+        @blur="(e) => {
+          if (text.trim()) addText()
+          emit('blur', e)
+        }"
+      />
+    </div>
+    <div class="q-field__bottom">
+      <div v-if="error" class="q-field__error">{{ errorMessage }}</div>
+      <div v-else-if="hint" class="q-field__hint">{{ hint }}</div>
+    </div>
+  </div>
+</template>

package/components/QIntersection.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+// QIntersection — révèle son contenu quand il entre dans le viewport (API Quasar) :
+// <q-intersection transition="fade" once @show="…">
+// IntersectionObserver + transition d'apparition (fade, scale, slide-*, flip…).
+// Props : once, threshold, root-margin, margin, root, disable, intersected (v-model).
+import { onBeforeUnmount, onMounted, ref, watch } from "vue"
+
+interface Props {
+  /** État d'intersection (v-model) — reflète si le contenu est visible */
+  modelValue?: boolean
+  /** Ne déclenche l'intersection qu'une fois (défaut true) */
+  once?: boolean
+  /** Transition d'apparition : "fade" (défaut) | "scale" | "slide-up" | "slide-down" |
+   *  "slide-left" | "slide-right" | "flip" | "none"/"" (aucune) — ou nom custom
+   *  (classes `q-intersection-{nom}-enter-active`…) */
+  transition?: string
+  /** Seuil de visibilité : 0 = un pixel visible, 1 = entièrement visible */
+  threshold?: number
+  /** rootMargin de l'IntersectionObserver (ex. "50px 0px") */
+  rootMargin?: string
+  /** Marge autour de l'élément (agrandit la zone de détection) */
+  margin?: string
+  /** Désactive l'observation (le contenu reste visible) */
+  disable?: boolean
+  /** Racine de l'observation (défaut : viewport) */
+  root?: Element | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  once: true,
+  transition: "fade",
+  threshold: 0,
+  rootMargin: "",
+  margin: "",
+  disable: false,
+  root: null,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+  show: []
+  hide: []
+}>()
+
+const rootEl = ref<HTMLElement | null>(null)
+const visible = ref(props.modelValue)
+let observer: IntersectionObserver | null = null
+let done = false
+
+const setVisible = (v: boolean) => {
+  if (visible.value === v) return
+  visible.value = v
+  emit("update:modelValue", v)
+  if (v) emit("show")
+  else emit("hide")
+}
+
+const onIntersect: IntersectionObserverCallback = ([entry]) => {
+  if (props.disable || !entry) return
+  if (entry.isIntersecting) {
+    setVisible(true)
+    if (props.once) {
+      done = true
+      observer?.disconnect()
+    }
+  } else if (!props.once) {
+    setVisible(false)
+  }
+}
+
+const createObserver = () => {
+  if (props.disable) return
+  if (typeof IntersectionObserver === "undefined" || !rootEl.value) {
+    // Environnement sans IntersectionObserver (SSR/vieux) : contenu visible
+    setVisible(true)
+    return
+  }
+  observer = new IntersectionObserver(onIntersect, {
+    threshold: props.threshold,
+    rootMargin: props.rootMargin || undefined,
+    root: props.root ?? null,
+  })
+  observer.observe(rootEl.value)
+}
+
+onMounted(() => {
+  if (!done) createObserver()
+})
+
+watch(
+  () => props.disable,
+  (d) => {
+    if (d) observer?.disconnect()
+    else if (!done) createObserver()
+  },
+)
+
+onBeforeUnmount(() => observer?.disconnect())
+</script>
+
+<template>
+  <div ref="rootEl" class="q-intersection" :style="margin ? { margin } : undefined">
+    <slot v-if="!visible && $slots.loading" name="loading" />
+    <!-- v-show (contenu toujours rendu) : le slot expose { active } pour
+         conditionner l'intérieur selon l'état d'intersection -->
+    <Transition
+      v-if="transition && transition !== 'none'"
+      :name="`q-intersection-${transition}`"
+    >
+      <div v-show="visible" class="q-intersection__content">
+        <slot :active="visible" />
+      </div>
+    </Transition>
+    <div v-else v-show="visible" class="q-intersection__content">
+      <slot :active="visible" />
+    </div>
+  </div>
+</template>