@dnax/ui 0.0.1

package/components/QHeader.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// QHeader — barre haute. fixed = position: fixed en haut (opt-in).
+// Safe-area top/left/right appliquées toujours (styles/main.css).
+import { computed } from "vue"
+
+interface Props {
+  /** Fixe la barre en haut de l'écran (sort du flux) */
+  fixed?: boolean
+  /** Fond translucide (frosted glass) : true = 70%, ou valeur % ("70") */
+  translucent?: boolean | number
+  /** Glassmorphism marqué : fond très translucide + flou fort + bordure claire */
+  glass?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fixed: false,
+})
+
+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,
+)
+</script>
+
+<template>
+  <div
+    class="q-header"
+    :class="{
+      'q-header--fixed': fixed,
+      'q-header--translucent': translucent === true || typeof translucent === 'number',
+      'q-header--glass': glass,
+    }"
+    :style="translucentStyle"
+  >
+    <slot />
+  </div>
+</template>

package/components/QIcon.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// QIcon — API Quasar : <q-icon name="lucide:star" size="24px" color="primary" left right>
+// name : icône Iconify par son nom (https://iconify.design/docs/icon-components/vue/)
+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: "16px", md: "24px", lg: "32px", xl: "48px" }
+
+interface Props {
+  /** Icône Iconify (ex. : "lucide:star") */
+  name?: string
+  /** Taille : sm|md|lg|xl ou valeur CSS ("1.5rem", "20px") */
+  size?: string
+  /** Couleur (token ou hex) */
+  color?: string
+  /** Marge à droite */
+  left?: boolean
+  /** Marge à gauche */
+  right?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "md",
+  color: "",
+  left: false,
+  right: false,
+})
+
+const iconStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  const size = SIZE_MAP[props.size] ?? props.size
+  style.width = size
+  style.height = size
+  if (props.color) style.color = colorValue(props.color)
+  return style
+})
+
+const iconClasses = computed(() => cn("q-icon", props.left && "q-icon--left", props.right && "q-icon--right"))
+</script>
+
+<template>
+  <Icon
+    v-if="name"
+    :icon="name"
+    class="q-icon"
+    :class="iconClasses"
+    :style="iconStyle"
+    aria-hidden="true"
+  />
+  <slot v-else />
+</template>

package/components/QImagePicker.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+// QImagePicker — API Quasar : <q-image-picker v-model="files" multiple label="Photos" max-file-size="5242880" />
+// Sélection d'images via input file masqué, avec aperçu en grille (object URLs),
+// suppression par tuile et validation (type, taille, nombre).
+import { computed, onBeforeUnmount, reactive, ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Fichier(s) sélectionné(s) — File (simple) ou File[] (multiple) */
+  modelValue?: File | File[] | null
+  /** Autorise plusieurs fichiers */
+  multiple?: boolean
+  /** Types acceptés (mêmes règles qu'un input file) */
+  accept?: string
+  /** Taille max en octets (0 = illimité) */
+  maxFileSize?: number
+  /** Nombre max de fichiers (0 = illimité) */
+  maxFiles?: number
+  /** Label du champ */
+  label?: string
+  /** Texte de la tuile d'ajout (défaut : "Ajouter une image" / "Ajouter des images") */
+  addLabel?: string
+  /** Aide affichée sous la grille */
+  hint?: string
+  /** État d'erreur externe */
+  error?: boolean
+  /** Message d'erreur (surcharge l'erreur interne de validation) */
+  errorMessage?: string
+  disable?: boolean
+  readonly?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  multiple: false,
+  accept: "image/*",
+  maxFileSize: 0,
+  maxFiles: 0,
+  label: "",
+  addLabel: "",
+  hint: "",
+  error: false,
+  errorMessage: "",
+  disable: false,
+  readonly: false,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: File | File[] | null]
+  add: [file: File]
+  remove: [file: File]
+  rejected: [file: File, reason: "size" | "type" | "count"]
+}>()
+
+const files = computed<File[]>(() => {
+  const v = props.modelValue
+  if (v == null) return []
+  return Array.isArray(v) ? v : [v]
+})
+
+// — Aperçus : un object URL par fichier, révoqué à la suppression / au remplacement —
+const previewUrls = reactive(new Map<File, string>())
+
+const previewUrl = (file: File): string => {
+  if (!previewUrls.has(file)) previewUrls.set(file, URL.createObjectURL(file))
+  return previewUrls.get(file)!
+}
+
+const revoke = (file: File) => {
+  const url = previewUrls.get(file)
+  if (url) {
+    URL.revokeObjectURL(url)
+    previewUrls.delete(file)
+  }
+}
+
+// modelValue remplacé de l'extérieur → nettoie les aperçus des fichiers disparus
+watch(files, (current) => {
+  for (const file of [...previewUrls.keys()]) {
+    if (!current.includes(file)) revoke(file)
+  }
+})
+
+onBeforeUnmount(() => {
+  for (const file of [...previewUrls.keys()]) revoke(file)
+})
+
+// — Validation —
+const acceptsFile = (file: File): boolean => {
+  const accept = props.accept.trim()
+  if (!accept) return true
+  const patterns = accept
+    .split(",")
+    .map((p) => p.trim().toLowerCase())
+    .filter(Boolean)
+  if (patterns.length === 0) return true
+  const name = file.name.toLowerCase()
+  return patterns.some((p) => {
+    if (p === "image/*") return file.type.startsWith("image/")
+    if (p === "video/*") return file.type.startsWith("video/")
+    if (p === "audio/*") return file.type.startsWith("audio/")
+    if (p.startsWith(".")) return name.endsWith(p)
+    if (p.includes("/")) return file.type.toLowerCase() === p
+    return false
+  })
+}
+
+const formatMaxSize = () => {
+  const bytes = props.maxFileSize
+  if (bytes >= 1024 * 1024) return `${Math.round(bytes / (1024 * 1024))} Mo`
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} Ko`
+  return `${bytes} octets`
+}
+
+const internalError = ref("")
+
+const showError = computed(() => props.error || internalError.value !== "")
+const effectiveErrorMessage = computed(() => props.errorMessage || internalError.value)
+
+// — Sélection —
+const inputEl = ref<HTMLInputElement | null>(null)
+
+const pick = () => {
+  if (props.disable || props.readonly) return
+  inputEl.value?.click()
+}
+
+const onInputChange = (e: Event) => {
+  const input = e.target as HTMLInputElement
+  const selected = Array.from(input.files ?? [])
+  input.value = "" // permet de re-sélectionner le même fichier
+  internalError.value = ""
+  if (selected.length > 0) addFiles(selected)
+}
+
+const addFiles = (incoming: File[]) => {
+  const current = files.value
+  const valid: File[] = []
+  const rejections: { file: File; reason: "size" | "type" | "count" }[] = []
+
+  for (const file of incoming) {
+    if (props.maxFileSize > 0 && file.size > props.maxFileSize) {
+      rejections.push({ file, reason: "size" })
+      continue
+    }
+    if (!acceptsFile(file)) {
+      rejections.push({ file, reason: "type" })
+      continue
+    }
+    valid.push(file)
+  }
+
+  const quota = props.maxFiles > 0 ? props.maxFiles : Infinity
+  const remaining = quota === Infinity ? Infinity : Math.max(0, quota - current.length)
+  const accepted = remaining === Infinity ? valid : valid.slice(0, remaining)
+  const overflow = remaining === Infinity ? [] : valid.slice(remaining)
+  for (const file of overflow) rejections.push({ file, reason: "count" })
+
+  if (accepted.length > 0) {
+    const next = props.multiple ? [...current, ...accepted] : accepted[0]!
+    emit("update:modelValue", next)
+    for (const file of accepted) emit("add", file)
+  }
+
+  if (rejections.length > 0) {
+    const reasons = [...new Set(rejections.map((r) => r.reason))]
+    const parts: string[] = []
+    if (reasons.includes("size")) parts.push(`Fichier trop lourd (max ${formatMaxSize()})`)
+    if (reasons.includes("type")) parts.push("Type de fichier non accepté")
+    if (reasons.includes("count")) parts.push(`Nombre maximum : ${props.maxFiles}`)
+    internalError.value = parts.join(" · ")
+    for (const r of rejections) emit("rejected", r.file, r.reason)
+  }
+}
+
+const removeFile = (file: File) => {
+  if (props.disable || props.readonly) return
+  revoke(file)
+  const next = files.value.filter((f) => f !== file)
+  emit("update:modelValue", props.multiple ? next : (next[0] ?? null))
+  emit("remove", file)
+}
+
+const canAdd = computed(() => {
+  if (props.disable || props.readonly) return false
+  if (!props.multiple && files.value.length > 0) return true // remplacement
+  if (props.maxFiles > 0 && files.value.length >= props.maxFiles) return false
+  return true
+})
+
+const defaultAddLabel = computed(() =>
+  props.addLabel || (props.multiple ? "Ajouter des images" : "Ajouter une image"),
+)
+
+const containerClasses = computed(() => cn("q-image-picker", props.disable && "q-field--disabled"))
+</script>
+
+<template>
+  <div class="q-image-picker" :class="containerClasses">
+    <label v-if="label" class="q-field__label-stack">{{ label }}</label>
+
+    <div class="q-image-picker__grid">
+      <div v-for="file in files" :key="previewUrl(file)" class="q-image-picker__item">
+        <img class="q-image-picker__thumb" :src="previewUrl(file)" :alt="file.name" />
+        <button
+          v-if="!disable && !readonly"
+          type="button"
+          class="q-image-picker__remove"
+          aria-label="Retirer l'image"
+          @click="removeFile(file)"
+        >
+          <Icon :icon="icons.x" aria-hidden="true" />
+        </button>
+      </div>
+
+      <button
+        v-if="canAdd"
+        type="button"
+        class="q-image-picker__add"
+        :disabled="disable"
+        @click="pick"
+      >
+        <Icon :icon="icons.imagePlus" class="q-image-picker__add-icon" />
+        <span v-if="defaultAddLabel" class="q-image-picker__add-label">{{ defaultAddLabel }}</span>
+      </button>
+    </div>
+
+    <div class="q-field__bottom">
+      <div v-if="showError" class="q-field__error">
+        <slot name="error">{{ effectiveErrorMessage }}</slot>
+      </div>
+      <div v-else-if="hint || $slots.hint" class="q-field__hint">
+        <slot name="hint">{{ hint }}</slot>
+      </div>
+    </div>
+
+    <input
+      ref="inputEl"
+      type="file"
+      class="q-image-picker__input"
+      :accept="accept"
+      :multiple="multiple"
+      @change="onInputChange"
+    />
+  </div>
+</template>

package/components/QImagePreview.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+// QImagePreview — visionneuse plein écran : <q-image-preview v-model="open" :images="urls" v-model:index="i" transition="up" close-btn />
+// Navigation par carrousel (QSwiper) : swipe horizontal, flèches, clavier.
+// Swipe vers le bas pour fermer, × / Échap / clic sur le fond aussi.
+import { computed, onBeforeUnmount, ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { useOverlayBack } from "../lib/overlayBack"
+import QSwiper from "./QSwiper.vue"
+import QSwiperSlide from "./QSwiperSlide.vue"
+
+type PreviewTransition = "fade" | "up" | "down" | "zoom"
+
+interface Props {
+  /** Ouvert (v-model) */
+  modelValue?: boolean
+  /** URLs d'images — string[] ou { src, title? }[] */
+  images?: (string | { src: string; title?: string })[]
+  /** Image courante (v-model:index) */
+  index?: number
+  /** Transition d'ouverture : fade | up | down | zoom (défaut fade) */
+  transition?: PreviewTransition
+  /** Affiche un bouton fermer (×) */
+  closeBtn?: boolean
+  /** Affiche le compteur "n / N" (défaut true) */
+  counter?: boolean
+  /** Fermer en cliquant sur le fond (défaut true) */
+  closeOnBackdrop?: boolean
+  /** Fermer en glissant vers le bas (défaut true) */
+  closeOnSwipeDown?: boolean
+  /** Boutons précédent/suivant (défaut true) */
+  nav?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  images: () => [],
+  index: 0,
+  transition: "fade",
+  closeBtn: false,
+  counter: true,
+  closeOnBackdrop: true,
+  closeOnSwipeDown: true,
+  nav: true,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+  "update:index": [value: number]
+  /** Émis quand la visionneuse se ferme (swipe bas, backdrop, ×, Escape, v-model=false) */
+  dismiss: []
+}>()
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v),
+})
+const idx = computed(() => Math.min(Math.max(props.index, 0), Math.max(0, props.images.length - 1)))
+
+// « Retour » navigateur → ferme la visionneuse au lieu de naviguer
+useOverlayBack(open, () => { open.value = false }, "QImagePreview")
+
+const srcOf = (item: string | { src: string; title?: string }) =>
+  typeof item === "string" ? item : item.src
+
+// — Carrousel (QSwiper) —
+const swiperInst = ref<any>(null)
+const onSwiper = (s: any) => {
+  swiperInst.value = s
+}
+const onSlideChange = (s: any) => {
+  if (s && typeof s.realIndex === "number") emit("update:index", s.realIndex)
+}
+watch(
+  () => props.index,
+  (v) => {
+    if (swiperInst.value && typeof v === "number") swiperInst.value.slideTo(idx.value, 0)
+  },
+)
+
+const prev = () => {
+  const s = swiperInst.value
+  if (!s || props.images.length < 2) return
+  if (s.activeIndex === 0) s.slideTo(props.images.length - 1)
+  else s.slidePrev()
+}
+const next = () => {
+  const s = swiperInst.value
+  if (!s || props.images.length < 2) return
+  if (s.activeIndex === props.images.length - 1) s.slideTo(0)
+  else s.slideNext()
+}
+const close = () => {
+  open.value = false
+}
+
+// — Swipe vers le bas pour fermer (geste vertical ; l'horizontal est géré par le carrousel) —
+const panelTransform = ref("")
+let startX = 0
+let startY = 0
+let verticalDrag = false
+let moved = false
+let cleanup: (() => void) | null = null
+
+const onWrapperDown = (e: PointerEvent) => {
+  startX = e.clientX
+  startY = e.clientY
+  verticalDrag = false
+  moved = false
+
+  const onMove = (ev: PointerEvent) => {
+    const dx = ev.clientX - startX
+    const dy = ev.clientY - startY
+    if (Math.abs(dx) + Math.abs(dy) > 8) moved = true
+    if (!verticalDrag) {
+      if (dy > 0 && Math.abs(dy) > Math.abs(dx)) verticalDrag = true
+      else return // drag horizontal → laissé au carrousel
+    }
+    panelTransform.value = `translate3d(0, ${Math.max(0, dy) * 0.35}px, 0)`
+  }
+  const onUp = (ev: PointerEvent) => {
+    const dy = ev.clientY - startY
+    panelTransform.value = ""
+    if (verticalDrag && dy > 80 && props.closeOnSwipeDown) close()
+    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 onSlideClick = () => {
+  if (moved) return // ignore après un swipe
+  if (props.closeOnBackdrop) close()
+}
+
+// — Clavier (Escape, flèches) quand ouvert —
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Escape") close()
+  else if (e.key === "ArrowLeft") prev()
+  else if (e.key === "ArrowRight") next()
+}
+
+watch(open, (v) => {
+  if (v) {
+    window.addEventListener("keydown", onKeydown)
+    document.body.style.overflow = "hidden"
+  } else {
+    window.removeEventListener("keydown", onKeydown)
+    document.body.style.overflow = ""
+    emit("dismiss")
+  }
+})
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", onKeydown)
+  document.body.style.overflow = ""
+  if (cleanup) cleanup()
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition :name="`q-image-preview-${transition}`">
+      <div
+        v-if="open"
+        class="q-image-preview"
+        :style="panelTransform ? { transform: panelTransform, transition: 'none' } : undefined"
+        @pointerdown="onWrapperDown"
+      >
+        <q-swiper
+          :initial-slide="idx"
+          :slides-per-view="1"
+          class="q-image-preview__swiper"
+          @swiper="onSwiper"
+          @slide-change="onSlideChange"
+        >
+          <q-swiper-slide v-for="(img, i) in images" :key="i">
+            <div class="q-image-preview__slide" @click="onSlideClick">
+              <img :src="srcOf(img)" :alt="'Image ' + (i + 1)" draggable="false" />
+            </div>
+          </q-swiper-slide>
+        </q-swiper>
+
+        <button
+          v-if="closeBtn"
+          type="button"
+          class="q-image-preview__btn q-image-preview__close"
+          :aria-label="'Fermer'"
+          @click="close"
+        >
+          <Icon :icon="icons.x" />
+        </button>
+
+        <template v-if="nav && images.length > 1">
+          <button
+            type="button"
+            class="q-image-preview__btn q-image-preview__nav q-image-preview__nav--prev"
+            :aria-label="'Précédente'"
+            @click="prev"
+          >
+            <Icon :icon="icons.chevronLeft" />
+          </button>
+          <button
+            type="button"
+            class="q-image-preview__btn q-image-preview__nav q-image-preview__nav--next"
+            :aria-label="'Suivante'"
+            @click="next"
+          >
+            <Icon :icon="icons.chevronRight" />
+          </button>
+        </template>
+
+        <div v-if="counter && images.length" class="q-image-preview__counter">
+          {{ idx + 1 }} / {{ images.length }}
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/components/QImagePreviewProvider.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// QImagePreviewProvider — rend la pile de visionneuses programmatiques ($q.imagePreview).
+// Intégré dans QConfigProvider (rendu automatiquement par le plus externe),
+// mais utilisable aussi en autonome : <q-image-preview-provider><slot /></q-image-preview-provider>.
+// Chaque entrée de la pile est rendue dans un <q-image-preview> ; quand la
+// visionneuse se ferme, l'entrée est retirée de la pile (onDismiss appelé).
+import { imagePreviewStack, closeImagePreview } from "../lib/q"
+import type { ImagePreviewController } from "../lib/q"
+
+const stack = imagePreviewStack
+
+const handleDismiss = (ctrl: ImagePreviewController) => {
+  ctrl._opts.onDismiss?.()
+  closeImagePreview(ctrl)
+}
+</script>
+
+<template>
+  <slot />
+  <q-image-preview
+    v-for="(entry, idx) in stack"
+    :key="idx"
+    :model-value="true"
+    :images="entry._opts.images"
+    :index="entry._opts.index ?? 0"
+    :transition="entry._opts.transition ?? 'fade'"
+    :close-btn="entry._opts.closeBtn"
+    :counter="entry._opts.counter"
+    :close-on-backdrop="entry._opts.closeOnBackdrop"
+    :close-on-swipe-down="entry._opts.closeOnSwipeDown"
+    :nav="entry._opts.nav"
+    @update:model-value="(v: boolean) => !v && handleDismiss(entry)"
+    @update:index="(i: number) => (entry._opts.index = i)"
+  />
+</template>