@dnax/ui 0.0.1

package/components/QCollapse.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+// QCollapse — API Quasar (pattern QExpansionItem) : <q-collapse v-model label="…" icon-left="…" icon-right="…" caption dense>
+// Équivalent du Collapsible shadcn-vue : animation de hauteur via CSS grid (0fr → 1fr).
+import { computed, nextTick, onMounted, ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+
+let collapseSeq = 0
+
+interface Props {
+  /** État ouvert (v-model) ; si absent, état interne initialisé par defaultOpened */
+  modelValue?: boolean
+  /** Ouvert par défaut (mode non contrôlé) */
+  defaultOpened?: boolean
+  /** Texte du header */
+  label?: string
+  /** Sous-titre du header */
+  caption?: string
+  /** Icône Iconify à gauche du label */
+  iconLeft?: string
+  /** Icône Iconify à droite du label (avant le chevron) */
+  iconRight?: string
+  /** Icône Iconify du chevron (défaut : lucide:chevron-down) */
+  expandIcon?: string
+  headerClass?: string
+  /** Hauteur réduite */
+  dense?: boolean
+  /** Désactivé */
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultOpened: false,
+  dense: false,
+  disable: false,
+  headerClass: "",
+})
+
+const emit = defineEmits<{ "update:modelValue": [value: boolean] }>()
+
+const uid = `q-collapse-${collapseSeq++}`
+
+const internalOpen = ref(props.defaultOpened)
+const open = computed({
+  get: () => props.modelValue ?? internalOpen.value,
+  set: (v) => {
+    internalOpen.value = v
+    emit("update:modelValue", v)
+  },
+})
+
+const toggle = () => {
+  if (props.disable) return
+  open.value = !open.value
+}
+
+const headerClasses = computed(() =>
+  cn(
+    "q-collapse__header",
+    props.dense && "q-collapse__header--dense",
+    props.disable && "q-collapse__header--disabled",
+    props.headerClass,
+  ),
+)
+
+// — Contenu repliable : hauteur mesurée (pattern shadcn/reka-ui) —
+const rootEl = ref<HTMLElement | null>(null)
+const innerEl = ref<HTMLElement | null>(null)
+const contentHeight = ref(0)
+const measured = ref(false)
+
+const measure = () => {
+  const inner = innerEl.value
+  if (inner) {
+    contentHeight.value = inner.scrollHeight
+    measured.value = true
+  }
+}
+
+const contentStyle = computed<Record<string, string> | undefined>(() => {
+  if (!open.value) return { height: "0px" }
+  return measured.value ? { height: `${contentHeight.value}px` } : undefined
+})
+
+watch(open, async (v) => {
+  if (v) {
+    await nextTick()
+    measure()
+  }
+})
+
+const onTransitionEnd = () => {
+  if (open.value && rootEl.value) rootEl.value.style.height = "auto"
+}
+
+onMounted(measure)
+</script>
+
+<template>
+  <div class="q-collapse">
+    <button
+      type="button"
+      class="q-collapse__header"
+      :class="headerClasses"
+      :aria-expanded="open ? 'true' : 'false'"
+      :aria-controls="uid"
+      :disabled="disable"
+      @click="toggle"
+    >
+      <span class="q-collapse__header-inner">
+        <slot name="header">
+          <Icon :icon="iconLeft" v-if="iconLeft" class="q-collapse__lead-icon" aria-hidden="true" />
+          <span class="q-collapse__titles">
+            <span v-if="label" class="q-collapse__label">{{ label }}</span>
+            <span v-if="caption" class="q-collapse__caption">{{ caption }}</span>
+          </span>
+          <Icon :icon="iconRight" v-if="iconRight" class="q-collapse__icon-right" aria-hidden="true" />
+        </slot>
+      </span>
+      <Icon
+        :icon="expandIcon || icons.chevronDown"
+        class="q-collapse__expand"
+        :class="{ 'q-collapse__expand--rotated': open }"
+        aria-hidden="true"
+      />
+    </button>
+    <div
+      ref="rootEl"
+      :id="uid"
+      class="q-collapse__content"
+      :class="{ 'q-collapse__content--open': open }"
+      :style="contentStyle"
+      @transitionend="onTransitionEnd"
+    >
+      <div ref="innerEl" class="q-collapse__inner">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/components/QConfigProvider.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+// QConfigProvider — API Quasar : <q-config-provider :theme="{ colors: { primary: '#ff0000' }, componentProps: { QBtn: { radius: 'md' } } }">
+// Fournit les couleurs du thème à tout le sous-arbre via des variables CSS locales
+// (foreground calculé automatiquement), des props par défaut par composant,
+// et rend automatiquement la pile de dialogues programmatiques ($q.dialog)
+// via QDialogProvider — rien à monter de plus.
+import { computed, inject, onBeforeUnmount, onMounted, provide, ref, watch } from "vue"
+import type { StyleValue } from "vue"
+import QDialogProvider from "./QDialogProvider.vue"
+import QNotifyProvider from "./QNotifyProvider.vue"
+import QLoadingProvider from "./QLoadingProvider.vue"
+import QBottomSheetProvider from "./QBottomSheetProvider.vue"
+import QImagePreviewProvider from "./QImagePreviewProvider.vue"
+import { qConfigKey, qProvidersKey } from "../lib/config"
+import type { QConfigContext, QTheme, ThemeMode } from "../lib/config"
+import { isRadiusScale, RADIUS_VALUES } from "../lib/useComponentProps"
+
+interface Props {
+  /**
+   * Thème : objet { mode, colors, componentProps } ou raccourci
+   * "light" | "dark" | "system" (mode seul).
+   * Ex. : <q-config-provider theme="dark" /> ou
+   * :theme="{ mode: 'dark', colors: { primary: '#ff0000' }, componentProps: { QBtn: { radius: 'md' } } }"
+   */
+  theme?: QTheme | ThemeMode
+  /** Rend un div conteneur ; sinon fournit le thème sans élément DOM */
+  render?: boolean
+  /** Classe(s) additionnelle(s) sur le conteneur */
+  class?: string
+  /** Styles CSS additionnels fusionnés au style du conteneur */
+  style?: StyleValue
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  theme: () => ({}),
+  render: true,
+  class: "",
+  style: undefined,
+})
+
+// Imbrication : le thème du parent est fusionné (le plus proche gagne)
+const parent = inject(qConfigKey, null)
+
+/** Normalise la prop theme : string (mode) ou objet */
+const normalizeTheme = (t: QTheme | ThemeMode | undefined): QTheme =>
+  typeof t === "string" ? { mode: t } : (t ?? {})
+
+/** Fusionne deux maps de componentProps : par composant, le plus proche gagne par prop. */
+const mergeComponentProps = (
+  a?: Record<string, Record<string, unknown>>,
+  b?: Record<string, Record<string, unknown>>,
+): Record<string, Record<string, unknown>> => {
+  const base = a ?? {}
+  const self = b ?? {}
+  const keys = new Set([...Object.keys(base), ...Object.keys(self)])
+  const out: Record<string, Record<string, unknown>> = {}
+  for (const key of keys) {
+    out[key] = { ...base[key], ...self[key] }
+  }
+  return out
+}
+
+const mergedTheme = computed<QTheme>(() => {
+  const self = normalizeTheme(props.theme)
+  const parentTheme = parent?.theme.value
+  return {
+    mode: self.mode ?? parentTheme?.mode ?? "system",
+    colors: { ...parentTheme?.colors, ...self.colors },
+    componentProps: mergeComponentProps(parentTheme?.componentProps, self.componentProps),
+  }
+})
+
+// — Mode clair/sombre —
+const systemDark = ref(false)
+let mql: MediaQueryList | null = null
+const updateSystem = () => {
+  systemDark.value = mql?.matches ?? false
+}
+
+onMounted(() => {
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    mql = window.matchMedia("(prefers-color-scheme: dark)")
+    updateSystem()
+    mql.addEventListener("change", updateSystem)
+  }
+})
+onBeforeUnmount(() => {
+  mql?.removeEventListener("change", updateSystem)
+})
+
+/** Mode effectif : light | dark | system résolu */
+const isDark = computed<boolean>(() => {
+  const mode = mergedTheme.value.mode
+  if (mode === "dark") return true
+  if (mode === "light") return false
+  return systemDark.value
+})
+
+// Applique .dark sur le conteneur ET sur <html> (les overlays téléportés au body
+// — dialog, sheets — doivent aussi passer en sombre)
+watch(
+  isDark,
+  (dark) => {
+    if (typeof document !== "undefined") {
+      document.documentElement.classList.toggle("dark", dark)
+    }
+  },
+  { immediate: true },
+)
+
+provide<QConfigContext>(qConfigKey, { theme: mergedTheme, isDark })
+
+// Providers intégrés ($q.dialog + $q.notify) : rendus UNE fois par le
+// QConfigProvider le plus externe (les imbriqués ne re-rendent pas → pas de doublons)
+const hasProviders = inject(qProvidersKey, false)
+provide(qProvidersKey, true)
+const isProvidersRoot = computed(() => !hasProviders)
+
+/** Calcule un foreground lisible (blanc ou sombre) pour un fond donné. */
+const textColorFor = (bg: string): string => {
+  let hex = bg.trim().replace(/^#/, "")
+  if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("")
+  if (!/^[0-9a-f]{6}$/i.test(hex)) return "#ffffff"
+  const r = parseInt(hex.slice(0, 2), 16)
+  const g = parseInt(hex.slice(2, 4), 16)
+  const b = parseInt(hex.slice(4, 6), 16)
+  const luminance = 0.299 * r + 0.587 * g + 0.114 * b
+  return luminance > 150 ? "#1d1d1d" : "#ffffff"
+}
+
+const themeStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {
+    "color-scheme": isDark.value ? "dark" : "light",
+  }
+  for (const [token, value] of Object.entries(mergedTheme.value.colors ?? {})) {
+    if (!value) continue
+    style[`--${token}`] = value
+    style[`--${token}-foreground`] = textColorFor(value)
+  }
+  // Arrondi global : composantProps.default.radius → --q-radius hérité par TOUS
+  // les composants dont le CSS utilise var(--q-radius). Une prop/override
+  // spécifique (useRadius) pose son propre --q-radius inline et prime.
+  const global = mergedTheme.value.componentProps?.default?.radius
+  if (isRadiusScale(global)) style["--q-radius"] = RADIUS_VALUES[global]
+  return style
+})
+</script>
+
+<template>
+  <q-dialog-provider v-if="isProvidersRoot">
+    <q-bottom-sheet-provider />
+    <q-notify-provider />
+    <q-loading-provider />
+    <q-image-preview-provider />
+    <div v-if="render" class="q-config-provider" :class="[props.class, { dark: isDark }]" :style="[themeStyle, props.style]">
+      <slot />
+    </div>
+    <slot v-else />
+  </q-dialog-provider>
+  <div v-else-if="render" class="q-config-provider" :class="[props.class, { dark: isDark }]" :style="[themeStyle, props.style]">
+    <slot />
+  </div>
+  <slot v-else />
+</template>

package/components/QContainer.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+// QContainer — conteneur centré à largeur max : <q-container max-width="1200px" fluid>
+// background-effect : "grid" (grille de carrés) | "aurora" (halos colorés animés).
+import { computed, onBeforeUnmount, onMounted, ref } from "vue"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Largeur max du contenu (défaut 1200px) */
+  maxWidth?: string | number
+  /** Supprime la largeur max (pleine largeur, padding conservé) */
+  fluid?: boolean
+  /** Padding horizontal (défaut 16px) */
+  padding?: string
+  /** Effet d'arrière-plan : "grid" | "aurora" | "star" | "falling-stars" | "flickering-grid" | "interactive-grid" | "wave" (vagues qui glissent) */
+  backgroundEffect?:
+    | "grid"
+    | "aurora"
+    | "star"
+    | "falling-stars"
+    | "flickering-grid"
+    | "interactive-grid"
+    | "wave"
+  /** Couleur des lignes de la grille (background-effect="grid") — tout format CSS */
+  gridColor?: string
+  /** Espacement entre les lignes de la grille (défaut 32px) */
+  gridSpacing?: string
+  /** Couleur des étoiles (background-effect="star") — tout format CSS */
+  starColor?: string
+  /** Espacement entre les étoiles (défaut 24px) */
+  starSpacing?: string
+  /** Taille des points d'étoile (défaut 1px) */
+  starDotSize?: string
+  /** Couleur du premier halo (background-effect="aurora", défaut cyan) */
+  auroraColor?: string
+  /** Couleur du second halo (background-effect="aurora", défaut violet) */
+  auroraColor2?: string
+  /** Couleur de la première vague (background-effect="wave", défaut bleu) */
+  waveColor?: string
+  /** Couleur de la seconde vague (background-effect="wave", défaut violet) */
+  waveColor2?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxWidth: "1200px",
+  fluid: false,
+  padding: "16px",
+})
+
+const containerStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {
+    "--q-container-max": typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth,
+    "--q-container-pad": props.padding,
+  }
+  if (props.gridColor) style["--q-grid-color"] = props.gridColor
+  if (props.gridSpacing) style["--q-grid-spacing"] = props.gridSpacing
+  if (props.starColor) style["--q-star-color"] = props.starColor
+  if (props.starSpacing) style["--q-star-spacing"] = props.starSpacing
+  if (props.starDotSize) style["--q-star-dot-size"] = props.starDotSize
+  if (props.auroraColor) style["--q-aurora-color"] = props.auroraColor
+  if (props.auroraColor2) style["--q-aurora-color-2"] = props.auroraColor2
+  if (props.waveColor) style["--q-wave-color"] = props.waveColor
+  if (props.waveColor2) style["--q-wave-color-2"] = props.waveColor2
+  return style
+})
+
+const containerClasses = computed(() =>
+  cn(
+    "q-container",
+    props.fluid && "q-container--fluid",
+    props.backgroundEffect && "q-container--bg",
+    props.class,
+  ),
+)
+
+// — Étoiles filantes : positions + minutage (durées/délais en s) —
+interface FallingStar {
+  left: string
+  delay: number
+  duration: number
+}
+
+const FALLING_STARS: FallingStar[] = [
+  { left: "8%", delay: 0, duration: 9 },
+  { left: "22%", delay: 2.5, duration: 11 },
+  { left: "35%", delay: 5, duration: 8.5 },
+  { left: "48%", delay: 1.5, duration: 10 },
+  { left: "58%", delay: 4, duration: 9.5 },
+  { left: "70%", delay: 6.5, duration: 8 },
+  { left: "82%", delay: 3, duration: 10.5 },
+  { left: "92%", delay: 7, duration: 9 },
+  { left: "15%", delay: 8, duration: 11.5 },
+  { left: "63%", delay: 9, duration: 8.5 },
+]
+
+const starStyle = (s: FallingStar): Record<string, string> => ({
+  left: s.left,
+  "--q-star-delay": `${s.delay}s`,
+  "--q-star-duration": `${s.duration}s`,
+})
+
+// — Grille qui grésille : cellules qui clignotent à des positions variées —
+interface FlickerCell {
+  left: string
+  top: string
+  delay: number
+  duration: number
+}
+
+const FLICKER_CELLS: FlickerCell[] = [
+  { left: "6%", top: "18%", delay: 0, duration: 2.4 },
+  { left: "14%", top: "62%", delay: 0.8, duration: 1.9 },
+  { left: "23%", top: "34%", delay: 1.6, duration: 2.8 },
+  { left: "31%", top: "78%", delay: 0.3, duration: 2.1 },
+  { left: "42%", top: "12%", delay: 2.2, duration: 1.7 },
+  { left: "50%", top: "48%", delay: 1.1, duration: 2.6 },
+  { left: "58%", top: "84%", delay: 0.5, duration: 2 },
+  { left: "66%", top: "28%", delay: 2.7, duration: 1.8 },
+  { left: "75%", top: "58%", delay: 1.4, duration: 2.3 },
+  { left: "83%", top: "20%", delay: 0.9, duration: 2.5 },
+  { left: "90%", top: "70%", delay: 2, duration: 1.9 },
+  { left: "36%", top: "92%", delay: 1.8, duration: 2.2 },
+]
+
+const flickerStyle = (c: FlickerCell): Record<string, string> => ({
+  left: c.left,
+  top: c.top,
+  "--q-flicker-delay": `${c.delay}s`,
+  "--q-flicker-duration": `${c.duration}s`,
+})
+
+// — Grille interactive : le glow suit la souris (vars --q-mouse-x/y sur le root) —
+const rootEl = ref<HTMLElement | null>(null)
+
+const onMouseMove = (e: MouseEvent) => {
+  if (props.backgroundEffect !== "interactive-grid" || !rootEl.value) return
+  const rect = rootEl.value.getBoundingClientRect()
+  rootEl.value.style.setProperty("--q-mouse-x", `${e.clientX - rect.left}px`)
+  rootEl.value.style.setProperty("--q-mouse-y", `${e.clientY - rect.top}px`)
+}
+
+onMounted(() => rootEl.value?.addEventListener("mousemove", onMouseMove))
+onBeforeUnmount(() => rootEl.value?.removeEventListener("mousemove", onMouseMove))
+</script>
+
+<template>
+  <div ref="rootEl" class="q-container" :class="containerClasses" :style="containerStyle">
+    <div
+      v-if="backgroundEffect"
+      class="q-container__bg"
+      :class="`q-container__bg--${backgroundEffect}`"
+      aria-hidden="true"
+    >
+      <template v-if="backgroundEffect === 'falling-stars'">
+        <span
+          v-for="(s, i) in FALLING_STARS"
+          :key="i"
+          class="q-container__star"
+          :style="starStyle(s)"
+        />
+      </template>
+      <template v-else-if="backgroundEffect === 'flickering-grid'">
+        <span
+          v-for="(c, i) in FLICKER_CELLS"
+          :key="i"
+          class="q-container__flicker"
+          :style="flickerStyle(c)"
+        />
+      </template>
+      <span
+        v-else-if="backgroundEffect === 'interactive-grid'"
+        class="q-container__glow"
+      />
+      <template v-else-if="backgroundEffect === 'wave'">
+        <svg
+          class="q-container__wave q-container__wave--1"
+          viewBox="0 0 960 128"
+          preserveAspectRatio="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M0,64 C80,100 160,28 240,64 C320,100 400,28 480,64 C560,100 640,28 720,64 C800,100 880,28 960,64"
+            fill="var(--q-wave-color)"
+          />
+        </svg>
+        <svg
+          class="q-container__wave q-container__wave--2"
+          viewBox="0 0 960 128"
+          preserveAspectRatio="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M0,64 C80,100 160,28 240,64 C320,100 400,28 480,64 C560,100 640,28 720,64 C800,100 880,28 960,64"
+            fill="var(--q-wave-color-2)"
+          />
+        </svg>
+      </template>
+    </div>
+    <slot />
+  </div>
+</template>

package/components/QCountDown.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+// QCountDown — compte à rebours : <q-count-down :time="90" format="mm:ss" @end="…" />
+// ou vers une date cible : <q-count-down :to="new Date('2026-12-31')" />
+// Format : DD | HH | mm | ss | SSS (défaut "HH:mm:ss"). Slot : données brutes + progress.
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+
+interface Props {
+  /** Durée initiale en SECONDES (ignoré si `to` est fourni) */
+  time?: number
+  /** Date cible : Date | timestamp | chaîne ISO — compte jusqu'à cette date */
+  to?: string | number | Date
+  /** Démarre automatiquement (défaut true) */
+  autoStart?: boolean
+  /** Pause / reprise (contrôle externe) */
+  pause?: boolean
+  /** Format d'affichage : DD, HH, mm, ss, SSS (défaut "HH:mm:ss") */
+  format?: string
+  /** Élément rendu (défaut span) */
+  tag?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  time: 0,
+  autoStart: true,
+  pause: false,
+  format: "HH:mm:ss",
+  tag: "span",
+})
+
+const emit = defineEmits<{ end: [] }>()
+
+const totalMs = ref(0)
+const remainingMs = ref(0)
+const endAt = ref(0)
+const running = ref(false)
+let timer: ReturnType<typeof setInterval> | null = null
+
+const computeTotal = () => {
+  if (props.to !== undefined) {
+    const t =
+      props.to instanceof Date
+        ? props.to.getTime()
+        : typeof props.to === "number"
+          ? props.to
+          : new Date(props.to).getTime()
+    totalMs.value = Math.max(0, t - Date.now())
+  } else {
+    totalMs.value = Math.max(0, props.time * 1000)
+  }
+}
+
+const stopTimer = () => {
+  if (timer) clearInterval(timer)
+  timer = null
+}
+
+const tick = () => {
+  const rem = Math.max(0, endAt.value - Date.now())
+  remainingMs.value = rem
+  if (rem <= 0) {
+    running.value = false
+    stopTimer()
+    emit("end")
+  }
+}
+
+/** Démarre (ou reprend) le compte */
+const start = () => {
+  if (props.pause || remainingMs.value <= 0 || running.value) return
+  endAt.value = Date.now() + remainingMs.value
+  stopTimer()
+  timer = setInterval(tick, 250)
+  running.value = true
+}
+
+/** Met en pause */
+const pauseTimer = () => {
+  running.value = false
+  stopTimer()
+}
+
+/** Réinitialise à la durée initiale (et relance si autoStart) */
+const reset = () => {
+  computeTotal()
+  remainingMs.value = totalMs.value
+  if (props.autoStart && !props.pause) start()
+  else running.value = false
+}
+
+/** Temps restant (ms) */
+const getRemaining = () => remainingMs.value
+/** Progression écoulée 0 → 1 */
+const getProgress = () => (totalMs.value > 0 ? 1 - remainingMs.value / totalMs.value : 0)
+
+defineExpose({ start, pause: pauseTimer, reset, getRemaining, getProgress })
+
+onMounted(() => {
+  computeTotal()
+  remainingMs.value = totalMs.value
+  if (props.autoStart && !props.pause) start()
+})
+onBeforeUnmount(stopTimer)
+
+watch(
+  () => props.pause,
+  (v) => {
+    if (v) pauseTimer()
+    else if (remainingMs.value > 0) start()
+  },
+)
+watch(
+  () => [props.time, props.to],
+  () => reset(),
+)
+
+// — Unitées + format —
+const units = computed(() => {
+  const rem = remainingMs.value
+  const days = Math.floor(rem / 86400000)
+  const hours = Math.floor((rem % 86400000) / 3600000)
+  const minutes = Math.floor((rem % 3600000) / 60000)
+  const seconds = Math.floor((rem % 60000) / 1000)
+  const ms = rem % 1000
+  return { days, hours, minutes, seconds, ms, remaining: rem }
+})
+
+const formatted = computed(() => {
+  const { days, hours, minutes, seconds, ms } = units.value
+  const totalHours = Math.floor(remainingMs.value / 3600000)
+  const h = props.format.includes("D") ? hours : totalHours
+  const pad = (n: number, len = 2) => String(n).padStart(len, "0")
+  return props.format
+    .replace(/SSS/g, pad(ms, 3))
+    .replace(/SS/g, pad(Math.floor(ms / 10), 2))
+    .replace(/S/g, String(Math.floor(ms / 100)))
+    .replace(/DD/g, pad(days))
+    .replace(/D/g, String(days))
+    .replace(/HH/g, pad(h))
+    .replace(/H/g, String(h))
+    .replace(/mm/g, pad(minutes))
+    .replace(/m/g, String(minutes))
+    .replace(/ss/g, pad(seconds))
+    .replace(/s/g, String(seconds))
+})
+
+const progress = computed(() => (totalMs.value > 0 ? 1 - remainingMs.value / totalMs.value : 0))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="q-count-down"
+    :class="{ 'q-count-down--done': remainingMs <= 0 && totalMs > 0 }"
+  >
+    <slot
+      v-bind="{ ...units, progress, running, formatted }"
+      :formatted="formatted"
+      :progress="progress"
+      :running="running"
+    >
+      {{ formatted }}
+    </slot>
+  </component>
+</template>