@dnax/ui 0.0.1

package/components/QVideo.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+// QVideo — lecteur vidéo basé sur le framework HTML de Video.js v10 (@videojs/html) :
+// <q-video src="movie.mp4" poster="…" ratio="16/9" />
+// Custom elements composables : <video-player> > <video-skin> > media element.
+// Le média est choisi selon la source : <video> (mp4/webm/ogg), <youtube-video>
+// (YouTube), <hlsjs-video> (.m3u8) — mux-video est aussi enregistré (prêt à l'emploi).
+// Les modules sont chargés uniquement côté client (SSR safe — customElements).
+// Events : @ready (media element), @play, @pause, @ended, @timeupdate, @loadedmetadata, @volumechange.
+// Méthodes exposées : play / pause / togglePlay / seek / getCurrentTime / getDuration / setVolume / setMuted / isPlaying.
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import "@videojs/html/video/skin.css"
+
+interface Props {
+  /** URL de la vidéo (mp4, webm, ogg, HLS .m3u8, YouTube…) */
+  src?: string
+  /** Image d'affiche avant lecture */
+  poster?: string
+  /** Image de remplacement affichée tant que la vidéo n'est pas chargée (ou slot #placeholder) */
+  placeholder?: string
+  /** Texte alternatif de l'image placeholder (défaut "Video placeholder") */
+  placeholderAlt?: string
+  /** Affiche les contrôles (défaut true). Le skin par défaut gère ses contrôles
+   *  (état visible/masqué pendant la lecture). */
+  controls?: boolean
+  /** Démarre la lecture automatiquement (souvent combiné avec muted) */
+  autoplay?: boolean
+  /** Boucle à la fin */
+  loop?: boolean
+  /** Muet */
+  muted?: boolean
+  /** Chargement : "auto" | "metadata" (défaut) | "none" */
+  preload?: string
+  /** Ratio d'affichage : "16/9" (défaut), "4/3", "1/1", "none" (hauteur auto) */
+  ratio?: string
+  /** Largeur max du lecteur (défaut 100%) */
+  width?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  src: "",
+  poster: "",
+  placeholder: "",
+  placeholderAlt: "Video placeholder",
+  controls: true,
+  autoplay: false,
+  loop: false,
+  muted: false,
+  preload: "metadata",
+  ratio: "16/9",
+  width: "",
+})
+
+const emit = defineEmits<{
+  ready: [media: any]
+  play: []
+  pause: []
+  ended: []
+  timeupdate: [payload: { currentTime: number; duration: number }]
+  loadedmetadata: [payload: { duration: number }]
+  volumechange: [payload: { muted: boolean; volume: number }]
+}>()
+
+/** URL YouTube (watch, shorts, embed, youtu.be) */
+const isYoutube = computed(() =>
+  /(youtube\.com\/(watch\?v=|shorts\/|embed\/)|youtu\.be\/)/.test(props.src),
+)
+/** Flux HLS (.m3u8) → media element hlsjs-video */
+const isHls = computed(() => /\.m3u8(\?|$)/.test(props.src))
+
+const mediaEl = ref<HTMLElement | null>(null)
+const playing = ref(false)
+/** true dès que le média a chargé ses métadonnées (ou qu'il joue) → masque le placeholder */
+const metaLoaded = ref(false)
+
+const media = (): any => mediaEl.value
+
+const onPlay = () => {
+  metaLoaded.value = true
+  playing.value = true
+  emit("play")
+}
+const onPause = () => {
+  playing.value = false
+  emit("pause")
+}
+const onEnded = () => emit("ended")
+const onTimeupdate = () =>
+  emit("timeupdate", { currentTime: media()?.currentTime ?? 0, duration: media()?.duration ?? 0 })
+const onLoadedmetadata = () => {
+  metaLoaded.value = true
+  emit("loadedmetadata", { duration: media()?.duration ?? 0 })
+}
+const onVolumechange = () =>
+  emit("volumechange", { muted: media()?.muted ?? false, volume: media()?.volume ?? 1 })
+
+const listeners: Array<[string, EventListener]> = [
+  ["play", onPlay],
+  ["pause", onPause],
+  ["ended", onEnded],
+  ["timeupdate", onTimeupdate],
+  ["loadedmetadata", onLoadedmetadata],
+  ["volumechange", onVolumechange],
+]
+
+const attach = (el: HTMLElement) => {
+  for (const [type, fn] of listeners) el.addEventListener(type, fn)
+}
+
+const detach = (el: HTMLElement | null) => {
+  if (!el) return
+  for (const [type, fn] of listeners) el.removeEventListener(type, fn)
+}
+
+// Attache les listeners dès que le media element existe (et à chaque changement de
+// type de média) — sinon loadedmetadata est émis avant l'init et le placeholder
+// resterait affiché, bloquant les contrôles.
+watch(mediaEl, (el, old) => {
+  detach(old ?? null)
+  if (el) attach(el)
+}, { immediate: true })
+
+// Clic sur le placeholder : masque-le et lance la lecture
+const onPlaceholderClick = () => {
+  metaLoaded.value = true
+  play()
+}
+
+onMounted(async () => {
+  // Charge le framework HTML (custom elements) — uniquement côté client
+  await Promise.all([
+    import("@videojs/html/video/player" as string),
+    import("@videojs/html/video/skin" as string),
+    import("@videojs/html/media/mux-video" as string),
+    import("@videojs/html/media/youtube-video" as string),
+    import("@videojs/html/media/hlsjs-video" as string),
+  ])
+  if (typeof customElements !== "undefined") {
+    await customElements.whenDefined("video-player")
+  }
+  emit("ready", mediaEl.value)
+})
+
+onBeforeUnmount(() => detach(mediaEl.value ?? null))
+
+// — Méthodes exposées —
+const play = () => media()?.play()
+const pause = () => media()?.pause()
+const togglePlay = () => {
+  const el = media()
+  if (!el) return
+  if (el.paused) el.play()
+  else el.pause()
+}
+const seek = (t: number) => {
+  if (media()) media().currentTime = t
+}
+const getCurrentTime = () => media()?.currentTime ?? 0
+const getDuration = () => media()?.duration ?? 0
+const setVolume = (v: number) => {
+  if (media()) media().volume = v
+}
+const setMuted = (m: boolean) => {
+  if (media()) media().muted = m
+}
+const isPlaying = () => playing.value
+
+defineExpose({
+  play,
+  pause,
+  togglePlay,
+  seek,
+  getCurrentTime,
+  getDuration,
+  setVolume,
+  setMuted,
+  isPlaying,
+})
+
+const wrapperStyle = (): Record<string, string> => {
+  const style: Record<string, string> = {}
+  if (props.width) style.maxWidth = props.width
+  if (props.ratio !== "none") style.aspectRatio = props.ratio.replace("/", " / ")
+  else style.aspectRatio = "auto"
+  return style
+}
+</script>
+
+<template>
+  <div class="q-video" :style="wrapperStyle()">
+    <!-- Custom elements @videojs/html : player > skin > media -->
+    <video-player class="q-video__player">
+      <video-skin>
+        <video
+          v-if="!isYoutube && !isHls"
+          ref="mediaEl"
+          :src="src"
+          :poster="poster"
+          :autoplay="autoplay"
+          :loop="loop"
+          :muted="muted"
+          :preload="preload"
+          playsinline
+        />
+        <youtube-video
+          v-else-if="isYoutube"
+          ref="mediaEl"
+          :src="src"
+          :poster="poster"
+          :autoplay="autoplay"
+          :loop="loop"
+          :muted="muted"
+          playsinline
+        />
+        <hlsjs-video
+          v-else
+          ref="mediaEl"
+          :src="src"
+          :poster="poster"
+          :autoplay="autoplay"
+          :loop="loop"
+          :muted="muted"
+          playsinline
+        />
+      </video-skin>
+    </video-player>
+
+    <!-- Placeholder tant que la vidéo n'est pas chargée (clic = lecture) -->
+    <div
+      v-if="!metaLoaded && (placeholder || $slots.placeholder)"
+      class="q-video__placeholder"
+      role="button"
+      :aria-label="placeholderAlt"
+      @click="onPlaceholderClick"
+    >
+      <img v-if="placeholder" :src="placeholder" :alt="placeholderAlt" />
+      <slot name="placeholder" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.q-video {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--q-radius, 12px);
+  background: #000;
+}
+/* Avant l'upgrade des custom elements : display block + remplir le cadre */
+.q-video video-player,
+.q-video video-skin,
+.q-video video,
+.q-video youtube-video,
+.q-video hlsjs-video {
+  display: block;
+}
+.q-video video-player,
+.q-video video-skin {
+  position: absolute;
+  inset: 0;
+  width: 100% !important;
+  height: 100% !important;
+}
+.q-video video,
+.q-video youtube-video,
+.q-video hlsjs-video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Placeholder de chargement : image ou contenu, cliquable pour lancer la lecture */
+.q-video__placeholder {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  cursor: pointer;
+  background: #000;
+}
+.q-video__placeholder img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>

package/components/QVirtualScroll.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+// QVirtualScroll — API Quasar : <q-virtual-scroll :items="rows" item-key="id" virtual-scroll-slice-size="12" />
+// Ne rend que la fenêtre visible (+ marges) ; hauteurs réelles mesurées par ResizeObserver
+// (slot scoped : { item, index, ref }) — le consommateur bind :ref sur son élément.
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+
+interface Props {
+  /** Données à afficher */
+  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
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  itemKey: "id",
+  virtualScrollSliceSize: 14,
+  virtualScrollSliceRatioBefore: 1,
+  virtualScrollSliceRatioAfter: 1,
+  virtualScrollItemSize: 24,
+  virtualScrollStickySizeStart: 0,
+  virtualScrollStickySizeEnd: 0,
+})
+
+defineSlots<{
+  default?: (props: { item: any; index: number; ref: (el: Element | null) => void }) => any
+  before?: () => any
+  after?: () => any
+}>()
+
+const itemSize = () => props.virtualScrollItemSize
+const sliceBefore = computed(() => Math.ceil(props.virtualScrollSliceSize * props.virtualScrollSliceRatioBefore))
+const sliceAfter = computed(() => Math.ceil(props.virtualScrollSliceSize * props.virtualScrollSliceRatioAfter))
+
+const scrollTop = ref(0)
+
+// — Hauteurs mesurées par index (celles non mesurées → taille estimée) —
+const itemSizes = new Map<number, number>()
+const observers = new Map<number, ResizeObserver>()
+const refFns = new Map<number, (el: Element | null) => void>()
+
+// Préfixe cumulé des offsets (reconstruit quand les tailles changent, pas au scroll)
+let prefix: number[] = [0]
+let total = 0
+let rafPending = false
+
+const rebuildPrefix = () => {
+  let acc = 0
+  prefix = new Array(props.items.length + 1)
+  prefix[0] = 0
+  for (let i = 0; i < props.items.length; i++) {
+    acc += itemSizes.get(i) ?? itemSize()
+    prefix[i + 1] = acc
+  }
+  total = acc
+}
+
+const scheduleRebuild = () => {
+  if (rafPending) return
+  rafPending = true
+  requestAnimationFrame(() => {
+    rafPending = false
+    rebuildPrefix()
+  })
+}
+
+const observeItem = (index: number, el: Element | null) => {
+  if (el === null) {
+    observers.get(index)?.disconnect()
+    observers.delete(index)
+    return
+  }
+  if (observers.has(index)) return
+  const ro = new ResizeObserver(() => {
+    const h = el.getBoundingClientRect().height
+    if (h > 0 && itemSizes.get(index) !== h) {
+      itemSizes.set(index, h)
+      scheduleRebuild()
+    }
+  })
+  ro.observe(el)
+  observers.set(index, ro)
+  const h = el.getBoundingClientRect().height
+  if (h > 0) {
+    itemSizes.set(index, h)
+    scheduleRebuild()
+  }
+}
+
+/** Fonction de ref stable par index (évite de re-créer la closure à chaque rendu) */
+const itemRef = (index: number) => {
+  let fn = refFns.get(index)
+  if (!fn) {
+    fn = (el) => observeItem(index, el)
+    refFns.set(index, fn)
+  }
+  return fn
+}
+
+const clearObservers = () => {
+  for (const ro of observers.values()) ro.disconnect()
+  observers.clear()
+  refFns.clear()
+}
+
+// — Fenêtrage —
+const findFirst = (pos: number): number => {
+  let lo = 0
+  let hi = prefix.length - 1
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1
+    if (prefix[mid]! <= pos) lo = mid
+    else hi = mid - 1
+  }
+  return lo
+}
+
+const start = computed(() => {
+  if (props.items.length === 0) return 0
+  return Math.max(0, findFirst(scrollTop.value) - sliceBefore.value)
+})
+
+const end = computed(() =>
+  Math.min(props.items.length, start.value + props.virtualScrollSliceSize + sliceAfter.value),
+)
+
+const renderedItems = computed(() => props.items.slice(start.value, end.value))
+
+const offsetOf = (index: number) => prefix[index] ?? 0
+
+const sliceY = computed(() => props.virtualScrollStickySizeStart + offsetOf(start.value))
+const spacerH = computed(
+  () => props.virtualScrollStickySizeStart + total + props.virtualScrollStickySizeEnd,
+)
+
+const onScroll = (e: Event) => {
+  scrollTop.value = (e.target as HTMLElement).scrollTop
+}
+
+const getKey = (item: any): string | number | symbol | undefined => {
+  if (typeof props.itemKey === "function") return props.itemKey(item) as string | number | symbol
+  if (props.itemKey) return (item?.[props.itemKey] ?? undefined) as string | number | symbol | undefined
+  return item?.id ?? item?.key
+}
+
+watch(
+  () => props.items,
+  (val, old) => {
+    if (val !== old) {
+      itemSizes.clear()
+      clearObservers()
+    }
+    rebuildPrefix()
+  },
+  { immediate: true },
+)
+
+watch(() => props.virtualScrollItemSize, rebuildPrefix)
+
+onMounted(() => rebuildPrefix())
+onBeforeUnmount(clearObservers)
+</script>
+
+<template>
+  <div class="q-virtual-scroll" @scroll.passive="onScroll">
+    <div class="q-virtual-scroll__content">
+      <slot name="before" />
+      <div class="q-virtual-scroll__spacer" :style="{ height: `${spacerH}px` }">
+        <div class="q-virtual-scroll__slice" :style="{ transform: `translateY(${sliceY}px)` }">
+          <template v-for="(item, off) in renderedItems" :key="getKey(item)">
+            <slot :item="item" :index="start + off" :ref="itemRef(start + off)" />
+          </template>
+        </div>
+      </div>
+      <slot name="after" />
+    </div>
+  </div>
+</template>

package/components/internal/QDateCalendar.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+// QDateCalendar — calendrier interne (non exporté) utilisé par QDatePicker (inline + panneau).
+import { computed, ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../../lib/icons"
+import { cn } from "../../lib/utils"
+
+interface Props {
+  modelValue?: Date | null
+  /** Date minimale sélectionnable */
+  minDate?: Date | string
+  /** Date maximale sélectionnable */
+  maxDate?: Date | string
+  /** Désactive des dates arbitraires */
+  disabledDates?: (d: Date) => boolean
+  /** Premier jour de la semaine : 0 = dimanche, 1 = lundi (défaut) */
+  firstDayOfWeek?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  firstDayOfWeek: 1,
+})
+
+const emit = defineEmits<{ select: [date: Date] }>()
+
+const today = new Date()
+const viewYear = ref(props.modelValue?.getFullYear() ?? today.getFullYear())
+const viewMonth = ref(props.modelValue?.getMonth() ?? today.getMonth())
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (v) {
+      viewYear.value = v.getFullYear()
+      viewMonth.value = v.getMonth()
+    }
+  },
+)
+
+const toDate = (d: Date | string) => (d instanceof Date ? d : new Date(d))
+const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate())
+const sameDay = (a: Date, b: Date) =>
+  a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+
+const weekdayLabels = computed(() => {
+  const names = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"] as const
+  return Array.from({ length: 7 }, (_, i) => names[(props.firstDayOfWeek + i) % 7])
+})
+
+const weeks = computed<(Date | null)[][]>(() => {
+  const y = viewYear.value
+  const m = viewMonth.value
+  const offset = (new Date(y, m, 1).getDay() - props.firstDayOfWeek + 7) % 7
+  const dim = new Date(y, m + 1, 0).getDate()
+  const cells: (Date | null)[] = []
+  for (let i = 0; i < offset; i++) cells.push(null)
+  for (let d = 1; d <= dim; d++) cells.push(new Date(y, m, d))
+  while (cells.length % 7 !== 0) cells.push(null)
+  const result: (Date | null)[][] = []
+  for (let i = 0; i < cells.length; i += 7) result.push(cells.slice(i, i + 7))
+  return result
+})
+
+const monthLabel = computed(() =>
+  new Intl.DateTimeFormat(undefined, { month: "long", year: "numeric" }).format(
+    new Date(viewYear.value, viewMonth.value, 1),
+  ),
+)
+
+const prevMonth = () => {
+  if (viewMonth.value === 0) {
+    viewMonth.value = 11
+    viewYear.value--
+  }
+  else {
+    viewMonth.value--
+  }
+}
+
+const nextMonth = () => {
+  if (viewMonth.value === 11) {
+    viewMonth.value = 0
+    viewYear.value++
+  }
+  else {
+    viewMonth.value++
+  }
+}
+
+const isSelected = (d: Date) => !!props.modelValue && sameDay(props.modelValue, d)
+const isToday = (d: Date) => sameDay(d, new Date())
+
+const isDisabled = (d: Date) => {
+  if (props.minDate && d < startOfDay(toDate(props.minDate))) return true
+  if (props.maxDate && d > startOfDay(toDate(props.maxDate))) return true
+  return !!props.disabledDates?.(d)
+}
+
+const onSelectDate = (d: Date) => {
+  if (isDisabled(d)) return
+  emit("select", d)
+}
+</script>
+
+<template>
+  <div class="q-date-calendar">
+    <div class="q-date-calendar__nav">
+      <button
+        type="button"
+        class="q-date-calendar__nav-btn"
+        aria-label="Mois précédent"
+        @click="prevMonth"
+      >
+        <Icon :icon="icons.chevronLeft" aria-hidden="true" />
+      </button>
+      <span class="q-date-calendar__nav-label">{{ monthLabel }}</span>
+      <button
+        type="button"
+        class="q-date-calendar__nav-btn"
+        aria-label="Mois suivant"
+        @click="nextMonth"
+      >
+        <Icon :icon="icons.chevronRight" aria-hidden="true" />
+      </button>
+    </div>
+
+    <div class="q-date-calendar__weekdays">
+      <span v-for="(d, i) in weekdayLabels" :key="i" class="q-date-calendar__weekday">{{ d }}</span>
+    </div>
+
+    <div class="q-date-calendar__weeks">
+      <div v-for="(week, wi) in weeks" :key="wi" class="q-date-calendar__week">
+        <button
+          v-for="(d, di) in week"
+          :key="di"
+          type="button"
+          class="q-date-calendar__day"
+          :class="cn(
+            !d && 'q-date-calendar__day--empty',
+            !!d && isToday(d) && 'q-date-calendar__day--today',
+            !!d && isSelected(d) && 'q-date-calendar__day--selected',
+          )"
+          :disabled="!d || isDisabled(d)"
+          :aria-selected="!!d && isSelected(d) ? 'true' : 'false'"
+          @click="d && onSelectDate(d)"
+        >
+          {{ d ? d.getDate() : "" }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>