@dnax/ui 0.0.1

package/components/QAutocomplete.vue

@@ -0,0 +1,316 @@
+<script setup lang="ts">
+// QAutocomplete — Combobox type shadcn-vue, API Quasar (QSelect use-input) :
+// <q-autocomplete v-model="val" :options="opts" option-value="id" option-label="name" clearable dense outlined />
+// Filtre client par défaut ; @filter → mode serveur (le parent met à jour :options).
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, 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 {
+  /** Valeur sélectionnée */
+  modelValue?: any
+  /** Options candidates */
+  options?: any[]
+  /** Propriété ou fonction donnant la valeur d'une option (défaut "value") */
+  optionValue?: string | ((opt: any) => any)
+  /** Propriété ou fonction donnant le label d'une option (défaut "label") */
+  optionLabel?: string | ((opt: any) => any)
+  /** Texte saisi (v-model:input-value) */
+  inputValue?: string
+  label?: string
+  stackLabel?: boolean
+  hint?: string
+  error?: boolean
+  errorMessage?: string
+  placeholder?: string
+  /** Variantes de champ (mêmes styles que QInput) */
+  outlined?: boolean
+  filled?: boolean
+  borderless?: boolean
+  /** Coins arrondis : true = pilule, ou échelle xs|sm|md|lg (none = carré) */
+  radius?: RadiusProp
+  dense?: boolean
+  clearable?: boolean
+  disable?: boolean
+  readonly?: boolean
+  loading?: boolean
+  noOptionsLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  options: () => [],
+  optionValue: "value",
+  optionLabel: "label",
+  stackLabel: false,
+  error: false,
+  outlined: false,
+  filled: false,
+  borderless: false,
+  dense: false,
+  clearable: false,
+  disable: false,
+  readonly: false,
+  loading: false,
+  noOptionsLabel: "No options to display",
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: any]
+  "update:inputValue": [value: string]
+  filter: [value: string, update: (fn: () => void) => void]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  clear: []
+}>()
+
+defineSlots<{
+  default?: (props: Record<string, any>) => any // option : { option, index, selected, active }
+  noOptions?: () => any
+  error?: () => any
+  hint?: () => any
+}>()
+
+const instance = getCurrentInstance()
+const hasFilter = computed(() => !!instance?.vnode.props?.onFilter)
+
+const rootEl = ref<HTMLElement | null>(null)
+const popupRef = ref<HTMLElement | null>(null)
+const focused = ref(false)
+const open = ref(false)
+const query = ref(props.inputValue ?? "")
+const activeIndex = ref(0)
+
+// — Valeurs des options —
+const getValue = (opt: any): any =>
+  typeof props.optionValue === "function" ? props.optionValue(opt) : opt?.[props.optionValue]
+
+const getLabel = (opt: any): string => {
+  const v = typeof props.optionLabel === "function" ? props.optionLabel(opt) : opt?.[props.optionLabel]
+  return v === undefined || v === null ? "" : String(v)
+}
+
+const selectedLabel = computed(() => {
+  if (props.modelValue === undefined || props.modelValue === null) return ""
+  const opt = props.options.find((o) => getValue(o) === props.modelValue)
+  return opt ? getLabel(opt) : String(props.modelValue)
+})
+
+// — Filtre client (sauté en mode serveur @filter) —
+const filtered = computed(() => {
+  if (hasFilter.value) return props.options
+  const q = query.value.trim().toLowerCase()
+  if (!q) return props.options
+  return props.options.filter((o) => getLabel(o).toLowerCase().includes(q))
+})
+
+// — Affichage du champ —
+const inputDisplay = computed(() => (query.value !== "" ? query.value : selectedLabel.value))
+
+const floatActive = computed(
+  () => focused.value || query.value !== "" || props.modelValue !== undefined || props.stackLabel,
+)
+
+const fieldClasses = computed(() =>
+  cn(
+    "q-autocomplete 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",
+  ),
+)
+
+// radius : prop explicite > composantProps.QAutocomplete > composantProps.default
+const effectiveRadius = useRadius("QAutocomplete", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+// — Interactions —
+const openPopup = () => {
+  if (props.disable || props.readonly) return
+  activeIndex.value = 0
+  open.value = true
+}
+
+const onInput = (e: Event) => {
+  const v = (e.target as HTMLInputElement).value
+  query.value = v
+  if (v !== selectedLabel.value) emit("update:modelValue", undefined)
+  emit("update:inputValue", v)
+  activeIndex.value = 0
+  open.value = true
+  if (hasFilter.value) emit("filter", v, (fn) => fn())
+}
+
+const onSelect = (opt: any) => {
+  const label = getLabel(opt)
+  emit("update:modelValue", getValue(opt))
+  emit("update:inputValue", label)
+  query.value = label
+  open.value = false
+}
+
+const onClear = () => {
+  emit("update:modelValue", undefined)
+  emit("update:inputValue", "")
+  query.value = ""
+  emit("clear")
+}
+
+const isSelected = (opt: any) => getValue(opt) === props.modelValue
+
+// À la perte de focus : si le texte saisi ne correspond exactement à aucune
+// option (insensible à la casse), on le supprime — le champ redevient vide.
+const commit = () => {
+  const q = query.value.trim()
+  if (!q) return
+  const label = q.toLowerCase()
+  const matches = props.options.some((o) => getLabel(o).toLowerCase() === label)
+  if (!matches) {
+    query.value = ""
+    emit("update:inputValue", "")
+  }
+}
+
+const onFocus = (e: FocusEvent) => {
+  focused.value = true
+  openPopup()
+  emit("focus", e)
+}
+
+const onBlur = (e: FocusEvent) => {
+  focused.value = false
+  open.value = false
+  commit()
+  emit("blur", e)
+}
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (!open.value) {
+    if (e.key === "ArrowDown" || e.key === "Enter") {
+      e.preventDefault()
+      openPopup()
+    }
+    return
+  }
+  if (e.key === "ArrowDown") {
+    e.preventDefault()
+    if (filtered.value.length) activeIndex.value = (activeIndex.value + 1) % filtered.value.length
+  }
+  else if (e.key === "ArrowUp") {
+    e.preventDefault()
+    if (filtered.value.length) {
+      activeIndex.value = (activeIndex.value - 1 + filtered.value.length) % filtered.value.length
+    }
+  }
+  else if (e.key === "Enter") {
+    e.preventDefault()
+    const opt = filtered.value[activeIndex.value]
+    if (opt) onSelect(opt)
+  }
+  else if (e.key === "Escape") {
+    e.preventDefault()
+    open.value = false
+  }
+}
+
+// Item actif visible au scroll
+watch(activeIndex, async () => {
+  await nextTick()
+  const items = popupRef.value?.querySelectorAll(".q-autocomplete__item")
+  const el = items?.[activeIndex.value] as HTMLElement | undefined
+  el?.scrollIntoView({ block: "nearest" })
+})
+
+// Fermeture au clic extérieur
+const onDocMousedown = (e: MouseEvent) => {
+  if (rootEl.value && !rootEl.value.contains(e.target as Node)) open.value = false
+}
+
+onMounted(() => {
+  if (typeof document !== "undefined") document.addEventListener("mousedown", onDocMousedown)
+})
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") document.removeEventListener("mousedown", onDocMousedown)
+})
+</script>
+
+<template>
+  <div ref="rootEl" class="q-autocomplete" :class="fieldClasses" :style="roundedStyle">
+    <label v-if="label" class="q-field__label-stack">{{ label }}</label>
+    <div class="q-field__control">
+      <input
+        class="q-field__native"
+        :value="inputDisplay"
+        :placeholder="placeholder"
+        :disabled="disable || undefined"
+        :readonly="readonly || undefined"
+        role="combobox"
+        :aria-expanded="open ? 'true' : 'false'"
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeydown"
+      />
+      <span v-if="loading" class="q-spinner-ring q-autocomplete__spinner" aria-hidden="true" />
+      <button
+        v-if="clearable && modelValue !== undefined && !disable"
+        class="q-field__clear"
+        type="button"
+        aria-label="Effacer"
+        @click="onClear"
+      >
+        <Icon :icon="icons.x" aria-hidden="true" />
+      </button>
+    </div>
+    <div v-if="error" class="q-field__bottom">
+      <div class="q-field__error">
+        <slot name="error">{{ errorMessage }}</slot>
+      </div>
+    </div>
+    <div v-else-if="hint || $slots.hint" class="q-field__bottom">
+      <div class="q-field__hint">
+        <slot name="hint">{{ hint }}</slot>
+      </div>
+    </div>
+
+    <div
+      v-if="open"
+      ref="popupRef"
+      class="q-autocomplete__popup"
+      role="listbox"
+      @mousedown.prevent
+    >
+      <template v-if="filtered.length">
+        <div
+          v-for="(opt, i) in filtered"
+          :key="String(getValue(opt))"
+          role="option"
+          :aria-selected="i === activeIndex ? 'true' : 'false'"
+          class="q-autocomplete__item"
+          :class="{
+            'q-autocomplete__item--active': i === activeIndex,
+            'q-autocomplete__item--selected': isSelected(opt),
+          }"
+          @mouseenter="activeIndex = i"
+          @mousedown.prevent="onSelect(opt)"
+        >
+          <slot :option="opt" :index="i" :selected="isSelected(opt)" :active="i === activeIndex">
+            <span class="q-autocomplete__label">{{ getLabel(opt) }}</span>
+          </slot>
+        </div>
+      </template>
+      <div v-else class="q-autocomplete__empty">
+        <slot name="noOptions">{{ noOptionsLabel }}</slot>
+      </div>
+    </div>
+  </div>
+</template>

package/components/QAvatar.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+// QAvatar — avatar : <q-avatar src="…" alt="Jean Dupont" color="primary" size="lg" />
+// Image avec fallback automatique (initiales depuis alt, icône, ou slot) en cas d'erreur.
+import { computed, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { colorValue, foregroundFor } from "../lib/colors"
+
+const SIZE_MAP: Record<string, string> = { xs: "24px", sm: "32px", md: "48px", lg: "64px", xl: "96px" }
+
+interface Props {
+  /** URL de l'image */
+  src?: string
+  /** Texte alternatif (utilisé pour les initiales du fallback) */
+  alt?: string
+  /** Icône Iconify affichée en fallback (ex. : "lucide:user") */
+  icon?: string
+  /** Taille : xs | sm | md | lg | xl ou valeur CSS */
+  size?: string
+  /** Taille de la police (défaut : 40% de la taille) */
+  fontSize?: string
+  /** Couleur de fond (token ou hex) */
+  color?: string
+  /** Couleur du texte/icône */
+  textColor?: string
+  /** Coins légèrement arrondis (au lieu du cercle) */
+  rounded?: boolean
+  /** Coins droits */
+  square?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "md",
+  color: "",
+  textColor: "",
+  rounded: false,
+  square: false,
+})
+
+const imgOk = ref(true)
+
+const avatarSize = computed(() => SIZE_MAP[props.size] ?? props.size)
+
+const avatarStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {
+    "--q-avatar-size": avatarSize.value,
+  }
+  if (props.color) {
+    style.backgroundColor = colorValue(props.color)
+    style.color = props.textColor ? colorValue(props.textColor) : foregroundFor(props.color)
+  }
+  if (props.fontSize) style.fontSize = props.fontSize
+  return style
+})
+
+// Initiales depuis alt ("Jean Dupont" → "JD")
+const initials = computed(() => {
+  if (!props.alt) return ""
+  const words = props.alt.trim().split(/\s+/).filter(Boolean)
+  if (words.length === 0) return ""
+  if (words.length === 1) return words[0]!.slice(0, 2).toUpperCase()
+  return (words[0]![0]! + words[words.length - 1]![0]!).toUpperCase()
+})
+
+const onError = () => {
+  imgOk.value = false
+}
+</script>
+
+<template>
+  <div
+    class="q-avatar"
+    :class="{
+      'q-avatar--rounded': rounded,
+      'q-avatar--square': square,
+    }"
+    :style="avatarStyle"
+    role="img"
+    :aria-label="alt || undefined"
+  >
+    <img
+      v-if="src && imgOk"
+      class="q-avatar__img"
+      :src="src"
+      :alt="alt || ''"
+      @error="onError"
+    />
+    <div v-else class="q-avatar__fallback">
+      <Icon :icon="icon" v-if="icon" aria-hidden="true" />
+      <slot v-else>{{ initials }}</slot>
+    </div>
+  </div>
+</template>

package/components/QBackHeader.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// QBackHeader — barre de retour : <q-back-header title="Détails" fixed @back="router.back()" />
+// Bouton retour + titre + actions à droite ; safe-area top intégrée.
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Titre de la page */
+  title?: string
+  /** Affiche le bouton retour */
+  showBack?: boolean
+  /** Icône Iconify du bouton retour (défaut : lucide:chevron-left) */
+  backIcon?: string
+  /** Libellé accessible du bouton retour */
+  backLabel?: string
+  /** Barre fixée en haut de l'écran */
+  fixed?: boolean
+  /** Thème sombre */
+  dark?: boolean
+  /** Fond translucide (frosted glass) : true = 70%, ou valeur % */
+  translucent?: boolean | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showBack: true,
+  backLabel: "Retour",
+  fixed: false,
+  dark: false,
+})
+
+const emit = defineEmits<{ back: [] }>()
+
+const translucentStyle = computed<Record<string, string> | undefined>(() =>
+  props.translucent === true || typeof props.translucent === "number"
+    ? { "--q-translucent-opacity": `${typeof props.translucent === "number" ? props.translucent : 70}%` }
+    : undefined,
+)
+
+const headerClasses = computed(() =>
+  cn(
+    "q-back-header",
+    props.fixed && "q-back-header--fixed",
+    props.dark && "q-back-header--dark",
+    (props.translucent === true || typeof props.translucent === "number") && "q-back-header--translucent",
+  ),
+)
+</script>
+
+<template>
+  <header class="q-back-header" :class="headerClasses" :style="translucentStyle">
+    <button
+      v-if="showBack"
+      type="button"
+      class="q-back-header__back"
+      :aria-label="backLabel"
+      @click="emit('back')"
+    >
+      <Icon :icon="backIcon || icons.chevronLeft" aria-hidden="true" />
+    </button>
+    <div class="q-back-header__title">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <div class="q-back-header__actions">
+      <slot />
+    </div>
+  </header>
+</template>

package/components/QBackTop.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+// QBackTop — API Quasar : <q-back-top :offset="300" position="bottom-right" color="primary" />
+// Bouton collé au coin de son conteneur scrollable (position: sticky dans la div parent) :
+// il reste visible pendant le scroll — contrairement à position:fixed, aucun ancêtre
+// (transform, overflow…) ne peut le faire disparaître.
+import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { colorValue, foregroundFor } from "../lib/colors"
+
+type BackTopPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right"
+
+interface Props {
+  /** Seuil de scroll (px) avant affichage (défaut : 300) */
+  offset?: number
+  /** Coin du conteneur parent où le bouton est collé */
+  position?: BackTopPosition
+  /** Icône Iconify (défaut : lucide:arrow-up) */
+  icon?: string
+  /** Couleur du bouton (token ou hex) */
+  color?: string
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  offset: 300,
+  position: "bottom-right",
+  icon: icons.arrowUp,
+  color: "primary",
+  disable: false,
+})
+
+const wrapEl = ref<HTMLElement | null>(null)
+const visible = ref(false)
+const scroller = 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 update = () => {
+  const sc = scroller.value
+  if (!sc) return
+  const top = sc === window ? window.scrollY : (sc as HTMLElement).scrollTop
+  visible.value = top > props.offset
+}
+
+const onClick = () => {
+  if (props.disable) return
+  const sc = scroller.value
+  if (!sc) return
+  if (sc === window) window.scrollTo({ top: 0, behavior: "smooth" })
+  else (sc as HTMLElement).scrollTo({ top: 0, behavior: "smooth" })
+}
+
+onMounted(() => {
+  scroller.value = findScrollContainer(wrapEl.value)
+  if (typeof window !== "undefined") {
+    window.addEventListener("scroll", update, true)
+    window.addEventListener("resize", update)
+  }
+  update()
+})
+
+onBeforeUnmount(() => {
+  if (typeof window !== "undefined") {
+    window.removeEventListener("scroll", update, true)
+    window.removeEventListener("resize", update)
+  }
+})
+
+const btnStyle = computed<Record<string, string>>(() => ({
+  backgroundColor: colorValue(props.color),
+  color: foregroundFor(props.color),
+}))
+
+const isTop = computed(() => props.position === "top-left" || props.position === "top-right")
+</script>
+
+<template>
+  <!-- Positions hautes : le bouton est rendu avant le contenu (sticky top) -->
+  <template v-if="isTop">
+    <div
+      ref="wrapEl"
+      class="q-back-top"
+      :class="[`q-back-top--${position}`, { 'q-back-top--visible': visible && !disable }]"
+    >
+      <button
+        type="button"
+        class="q-back-top__btn"
+        :style="btnStyle"
+        :aria-label="'Back to top'"
+        @click="onClick"
+      >
+        <Icon :icon="icon" aria-hidden="true" />
+      </button>
+    </div>
+    <slot />
+  </template>
+
+  <!-- Positions basses : le bouton est rendu après le contenu (sticky bottom) -->
+  <template v-else>
+    <slot />
+    <div
+      ref="wrapEl"
+      class="q-back-top"
+      :class="[`q-back-top--${position}`, { 'q-back-top--visible': visible && !disable }]"
+    >
+      <button
+        type="button"
+        class="q-back-top__btn"
+        :style="btnStyle"
+        :aria-label="'Back to top'"
+        @click="onClick"
+      >
+        <Icon :icon="icon" aria-hidden="true" />
+      </button>
+    </div>
+  </template>
+</template>

package/components/QBadge.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+// QBadge — API Quasar : <q-badge label="3" color="negative" floating multi-line transparent outline>
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+import { colorValue, foregroundFor } from "../lib/colors"
+
+interface Props {
+  /** Texte ou nombre */
+  label?: string | number
+  /** Couleur de fond (token ou hex) */
+  color?: string
+  /** Couleur du texte (token ou hex) */
+  textColor?: string
+  /** Positionné en absolu (coin supérieur droit du parent, qui doit être relative) */
+  floating?: boolean
+  /** Retour à la ligne (bordure carrée) */
+  multiLine?: boolean
+  /** Légèrement transparent */
+  transparent?: boolean
+  /** Contour seul */
+  outline?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: "primary",
+  textColor: "",
+  floating: false,
+  multiLine: false,
+  transparent: false,
+  outline: false,
+})
+
+const badgeStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  style["--q-badge-bg"] = colorValue(props.color)
+  style["--q-badge-fg"] = props.textColor ? colorValue(props.textColor) : foregroundFor(props.color)
+  return style
+})
+
+const badgeClasses = computed(() =>
+  cn(
+    "q-badge",
+    props.floating && "q-badge--floating",
+    props.multiLine && "q-badge--multi-line",
+    props.transparent && "q-badge--transparent",
+    props.outline && "q-badge--outline",
+  ),
+)
+</script>
+
+<template>
+  <span class="q-badge" :class="badgeClasses" :style="badgeStyle">
+    <slot>{{ label }}</slot>
+  </span>
+</template>