@dnax/ui 0.0.1

package/components/QCardActions.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// QCardActions — API Quasar : <q-card-actions align="right" vertical>
+// À utiliser dans le slot "actions" de QCard (ou n'importe où).
+interface Props {
+  /** Alignement des actions */
+  align?: "left" | "center" | "right" | "between" | "around" | "evenly" | "stretch"
+  /** Empile verticalement */
+  vertical?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  align: "stretch",
+  vertical: false,
+})
+</script>
+
+<template>
+  <div
+    class="q-card__actions"
+    :class="[
+      `q-card__actions--${props.align}`,
+      props.vertical && 'q-card__actions--vertical',
+    ]"
+  >
+    <slot />
+  </div>
+</template>

package/components/QCardContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+// QCardContent — bloc de contenu (équivalent QCardSection) : padding + alignement optionnel.
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Espacement autour (défaut 20px) */
+  padding?: string
+  /** Alignement du texte */
+  align?: "left" | "center" | "right"
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  align: "left",
+})
+
+const classes = computed(() => cn("q-card-content", `q-card-content--align-${props.align}`, props.class))
+
+const style = computed<Record<string, string> | undefined>(() =>
+  props.padding ? { padding: props.padding } : undefined,
+)
+</script>
+
+<template>
+  <div class="q-card-content" :class="classes" :style="style">
+    <slot />
+  </div>
+</template>

package/components/QCarousel.vue

@@ -0,0 +1,115 @@
+<script lang="ts">
+// QCarousel — carrousel type Carousel shadcn-vue, construit sur Embla.
+// <q-carousel :opts="…" :plugins="…" orientation="horizontal|vertical" @init-api="…">
+// + QCarouselContent / QCarouselItem / QCarouselPrevious / QCarouselNext
+import type { EmblaCarouselType, EmblaPluginType } from "embla-carousel"
+import type { InjectionKey, Ref } from "vue"
+
+export interface CarouselContext {
+  orientation: Readonly<Ref<"horizontal" | "vertical">>
+  emblaRef: Ref<HTMLElement | undefined>
+  api: Readonly<Ref<EmblaCarouselType | undefined>>
+  canScrollPrev: Readonly<Ref<boolean>>
+  canScrollNext: Readonly<Ref<boolean>>
+  selectedIndex: Readonly<Ref<number>>
+  scrollSnaps: Readonly<Ref<number[]>>
+  scrollPrev: () => void
+  scrollNext: () => void
+}
+
+export const qCarouselKey: InjectionKey<CarouselContext> = Symbol("q-carousel")
+
+export type CarouselApi = EmblaCarouselType
+</script>
+
+<script setup lang="ts">
+import { computed, provide, ref, watch } from "vue"
+import type { EmblaOptionsType } from "embla-carousel"
+import useEmblaCarousel from "embla-carousel-vue"
+
+interface Props {
+  /** Options Embla (align, loop, startIndex, …) */
+  opts?: EmblaOptionsType
+  /** Plugins Embla (ex. embla-carousel-autoplay) */
+  plugins?: EmblaPluginType[]
+  /** Orientation du carrousel */
+  orientation?: "horizontal" | "vertical"
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  orientation: "horizontal",
+  plugins: () => [],
+})
+
+const emit = defineEmits<{ initApi: [api: EmblaCarouselType] }>()
+
+const orientation = computed(() => props.orientation)
+
+const emblaOptions = computed<EmblaOptionsType>(() => ({
+  align: "start",
+  ...props.opts,
+  axis: orientation.value === "vertical" ? "y" : "x",
+}))
+
+const emblaPlugins = computed(() => props.plugins)
+
+const [emblaRef, emblaApi] = useEmblaCarousel(emblaOptions, emblaPlugins)
+
+const canScrollPrev = ref(false)
+const canScrollNext = ref(false)
+const selectedIndex = ref(0)
+const scrollSnaps = ref<number[]>([])
+
+const onSelect = () => {
+  const api = emblaApi.value
+  if (!api) return
+  canScrollPrev.value = api.canScrollPrev()
+  canScrollNext.value = api.canScrollNext()
+  selectedIndex.value = api.selectedScrollSnap()
+  scrollSnaps.value = api.scrollSnapList()
+}
+
+watch(
+  emblaApi,
+  (api) => {
+    if (!api) return
+    onSelect()
+    api.on("select", onSelect)
+    api.on("reInit", onSelect)
+    emit("initApi", api)
+  },
+  { flush: "post" },
+)
+
+const scrollPrev = () => emblaApi.value?.scrollPrev()
+const scrollNext = () => emblaApi.value?.scrollNext()
+
+provide<CarouselContext>(qCarouselKey, {
+  orientation,
+  emblaRef,
+  api: emblaApi,
+  canScrollPrev,
+  canScrollNext,
+  selectedIndex,
+  scrollSnaps,
+  scrollPrev,
+  scrollNext,
+})
+</script>
+
+<template>
+  <div
+    class="q-carousel"
+    :class="orientation === 'vertical' && 'q-carousel--vertical'"
+  >
+    <slot
+      :api="emblaApi"
+      :can-scroll-prev="canScrollPrev"
+      :can-scroll-next="canScrollNext"
+      :scroll-prev="scrollPrev"
+      :scroll-next="scrollNext"
+      :selected-index="selectedIndex"
+      :scroll-snaps="scrollSnaps"
+    />
+  </div>
+</template>

package/components/QCarouselContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// QCarouselContent — le viewport scrollable + la piste flex (équivalent CarouselContent).
+// L'emblaRef est appliqué sur le viewport (racine de mesure Embla).
+import { inject } from "vue"
+import { qCarouselKey } from "./QCarousel.vue"
+
+const carousel = inject(qCarouselKey, null)
+</script>
+
+<template>
+  <div
+    :ref="carousel?.emblaRef"
+    class="q-carousel__viewport"
+    :class="{ 'q-carousel__viewport--vertical': carousel?.orientation.value === 'vertical' }"
+  >
+    <div
+      class="q-carousel__container"
+      :class="{ 'q-carousel__container--vertical': carousel?.orientation.value === 'vertical' }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/components/QCarouselItem.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// QCarouselItem — slide du carrousel (équivalent CarouselItem).
+// basis-full par défaut ; passer une classe (basis-1/2, md:basis-1/3…) pour la taille.
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+
+const classes = computed(() => cn("q-carousel__item", props.class))
+</script>
+
+<template>
+  <div class="q-carousel__item" :class="classes">
+    <slot />
+  </div>
+</template>

package/components/QCarouselNav.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// QCarouselPrevious / QCarouselNext — boutons de navigation (équivalent CarouselPrevious/Next).
+import { computed, inject } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { qCarouselKey } from "./QCarousel.vue"
+
+interface Props {
+  /** "prev" ou "next" */
+  direction: "prev" | "next"
+  label?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: "",
+})
+
+const carousel = inject(qCarouselKey, null)
+
+const isVertical = computed(() => carousel?.orientation.value === "vertical")
+const disabled = computed(() =>
+  props.direction === "prev" ? !carousel?.canScrollPrev.value : !carousel?.canScrollNext.value,
+)
+
+const onClick = () => {
+  if (props.direction === "prev") carousel?.scrollPrev()
+  else carousel?.scrollNext()
+}
+
+const icon = computed(() => {
+  if (props.direction === "prev") return isVertical.value ? icons.chevronUp : icons.chevronLeft
+  return isVertical.value ? icons.chevronDown : icons.chevronRight
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    class="q-carousel__nav"
+    :class="[
+      props.direction === 'prev' ? 'q-carousel__nav--prev' : 'q-carousel__nav--next',
+      isVertical && 'q-carousel__nav--vertical',
+      disabled && 'q-carousel__nav--disabled',
+    ]"
+    :disabled="disabled"
+    :aria-label="label || (direction === 'prev' ? 'Slide précédente' : 'Slide suivante')"
+    @click="onClick"
+  >
+    <Icon :icon="icon" aria-hidden="true" />
+  </button>
+</template>

package/components/QCheckbox.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+// QCheckbox — API Quasar : <q-checkbox v-model="val" label="Option" color="secondary" dense left-label keep-color />
+// Modèle : booléen | indéterminé (indeterminateValue) | tableau (avec prop val).
+import { computed, useSlots } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+import { colorValue } from "../lib/colors"
+
+interface Props {
+  modelValue?: unknown
+  /** Valeur ajoutée/retirée quand le modèle est un tableau */
+  val?: unknown
+  trueValue?: unknown
+  falseValue?: unknown
+  /** Valeur représentant l'état indéterminé (défaut : null) */
+  indeterminateValue?: unknown
+  /** Icônes Iconify des états (défauts : lucide:check, lucide:minus) */
+  checkedIcon?: string
+  uncheckedIcon?: string
+  indeterminateIcon?: string
+  /** Couleur (token ou hex) */
+  color?: string
+  /** Applique la couleur aussi à l'état décoché */
+  keepColor?: boolean
+  dense?: boolean
+  dark?: boolean
+  disable?: boolean
+  readonly?: boolean
+  label?: string
+  /** Label à gauche du contrôle */
+  leftLabel?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: "primary",
+  keepColor: false,
+  dense: false,
+  dark: false,
+  disable: false,
+  readonly: false,
+  leftLabel: false,
+})
+
+// Defaults manuels (withDefaults ne gère pas les defaults sur props typées unknown)
+const trueValue = computed(() => props.trueValue ?? true)
+const falseValue = computed(() => props.falseValue ?? false)
+const indeterminateValue = computed(() => props.indeterminateValue ?? null)
+
+const emit = defineEmits<{
+  "update:modelValue": [value: unknown]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  keyup: [event: KeyboardEvent]
+  keydown: [event: KeyboardEvent]
+}>()
+
+const isArrayModel = computed(() => Array.isArray(props.modelValue))
+
+const isChecked = computed(() =>
+  isArrayModel.value
+    ? (props.modelValue as unknown[]).includes(props.val)
+    : props.modelValue === trueValue.value,
+)
+
+const isIndeterminate = computed(
+  () => !isArrayModel.value && props.modelValue === indeterminateValue.value,
+)
+
+const isDisabled = computed(() => props.disable || props.readonly)
+
+const toggle = () => {
+  if (isDisabled.value) return
+  if (isArrayModel.value) {
+    const list = props.modelValue as unknown[]
+    emit(
+      "update:modelValue",
+      isChecked.value ? list.filter((v) => v !== props.val) : [...list, props.val],
+    )
+  }
+  else {
+    // indéterminé → coché (comportement Quasar)
+    emit("update:modelValue", isChecked.value ? falseValue.value : trueValue.value)
+  }
+}
+
+const boxStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  const color = colorValue(props.color)
+  if (isChecked.value || isIndeterminate.value) {
+    style.backgroundColor = color
+    style.borderColor = color // pas de contour noir autour du fond coloré
+  }
+  else if (props.keepColor) style.borderColor = color
+  return style
+})
+
+const rootClasses = computed(() =>
+  cn(
+    "q-checkbox",
+    props.dense && "q-checkbox--dense",
+    props.dark && "q-checkbox--dark",
+    props.disable && "q-checkbox--disabled",
+  ),
+)
+
+const slots = useSlots()
+
+const ariaChecked = computed(() =>
+  isIndeterminate.value ? "mixed" : isChecked.value ? "true" : "false",
+)
+
+const hasLabel = computed(() => props.label !== undefined || !!slots.default)
+</script>
+
+<template>
+  <button
+    type="button"
+    role="checkbox"
+    :aria-checked="ariaChecked"
+    :disabled="isDisabled"
+    class="q-checkbox"
+    :class="rootClasses"
+    @click="toggle"
+    @focus="(e) => emit('focus', e)"
+    @blur="(e) => emit('blur', e)"
+    @keyup="(e) => emit('keyup', e)"
+    @keydown="(e) => emit('keydown', e)"
+  >
+    <span v-if="leftLabel && hasLabel" class="q-checkbox__label">
+      <slot>{{ label }}</slot>
+    </span>
+    <span class="q-checkbox__box" :style="boxStyle" aria-hidden="true">
+      <Icon
+        :icon="indeterminateIcon || icons.minus"
+        v-if="isIndeterminate"
+        class="q-checkbox__icon"
+      />
+      <Icon :icon="checkedIcon || icons.check" v-else-if="isChecked" class="q-checkbox__icon" />
+      <Icon :icon="uncheckedIcon" v-else-if="uncheckedIcon" class="q-checkbox__icon" />
+    </span>
+    <span v-if="!leftLabel && hasLabel" class="q-checkbox__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </button>
+</template>

package/components/QChip.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+// QChip — API Quasar : <q-chip label="Chip" icon="…" removable color="secondary" outline square dense>
+// removable → bouton de retrait qui émet "remove"
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+import { colorValue, foregroundFor } from "../lib/colors"
+
+interface Props {
+  /** Texte */
+  label?: string
+  /** Icône Iconify à gauche (ex. : "lucide:star") */
+  icon?: string
+  /** Icône Iconify à droite */
+  iconRight?: string
+  /** Icône Iconify du bouton de retrait (défaut : lucide:x) */
+  iconRemove?: string
+  /** Affiche le bouton de retrait */
+  removable?: boolean
+  /** Contour seul */
+  outline?: boolean
+  /** Coins droits */
+  square?: boolean
+  /** Hauteur réduite */
+  dense?: boolean
+  /** Couleur de fond (token ou hex) */
+  color?: string
+  /** Couleur du texte (token ou hex) */
+  textColor?: string
+  /** Désactivé */
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: "primary",
+  textColor: "",
+  removable: false,
+  outline: false,
+  square: false,
+  dense: false,
+  disable: false,
+})
+
+const emit = defineEmits<{ remove: []; click: [event: MouseEvent] }>()
+
+const chipStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  style["--q-chip-bg"] = colorValue(props.color)
+  style["--q-chip-fg"] = props.textColor ? colorValue(props.textColor) : foregroundFor(props.color)
+  return style
+})
+
+const chipClasses = computed(() =>
+  cn(
+    "q-chip",
+    props.outline && "q-chip--outline",
+    props.square && "q-chip--square",
+    props.dense && "q-chip--dense",
+    props.disable && "q-chip--disabled",
+  ),
+)
+
+const onClick = (e: MouseEvent) => {
+  if (props.disable) return
+  emit("click", e)
+}
+
+const onRemove = () => {
+  if (props.disable) return
+  emit("remove")
+}
+</script>
+
+<template>
+  <div class="q-chip" :class="chipClasses" :style="chipStyle" @click="onClick">
+    <Icon :icon="icon" v-if="icon" class="q-chip__icon" aria-hidden="true" />
+    <span v-if="label" class="q-chip__label">{{ label }}</span>
+    <slot v-else />
+    <Icon :icon="iconRight" v-if="iconRight" class="q-chip__icon q-chip__icon--right" aria-hidden="true" />
+    <button
+      v-if="removable"
+      class="q-chip__remove"
+      type="button"
+      aria-label="Retirer"
+      @click.stop="onRemove"
+    >
+      <Icon :icon="iconRemove || icons.x" />
+    </button>
+  </div>
+</template>

package/components/QCircularProgress.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+// QCircularProgress — anneau de progression : <q-circular-progress :value="0.7" size="64px" show-value />
+// SVG stroke-dasharray ; valeur centrée optionnelle (prop, slot ou #value).
+import { computed } from "vue"
+import { colorValue } from "../lib/colors"
+
+const SIZE_MAP: Record<string, string> = { xs: "32px", sm: "48px", md: "64px", lg: "96px", xl: "128px" }
+
+interface Props {
+  /** Valeur (entre min et max, défaut 0-1) */
+  value?: number
+  min?: number
+  max?: number
+  /** Diamètre : xs→xl ou valeur CSS */
+  size?: string
+  /** Épaisseur de l'anneau (px) */
+  thickness?: number
+  /** Couleur de l'anneau (token ou hex) */
+  color?: string
+  /** Couleur de la piste (défaut : gris clair) */
+  trackColor?: string
+  /** Affiche la valeur centrée */
+  showValue?: boolean
+  /** Sens inverse */
+  reverse?: boolean
+  /** Mode indéterminé (rotation) */
+  indeterminate?: boolean
+  dark?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0,
+  min: 0,
+  max: 1,
+  size: "md",
+  thickness: 6,
+  color: "primary",
+  trackColor: "",
+  showValue: false,
+  reverse: false,
+  indeterminate: false,
+  dark: false,
+})
+
+const ratio = computed(() => {
+  const span = props.max - props.min
+  if (span <= 0) return 0
+  return Math.min(1, Math.max(0, (props.value - props.min) / span))
+})
+
+const diameter = computed(() => SIZE_MAP[props.size] ?? props.size)
+
+// SVG : r = (diamètre - épaisseur) / 2 ; circonférence = 2πr
+const r = computed(() => {
+  const d = parseFloat(diameter.value) || 64
+  return (d - props.thickness) / 2
+})
+
+const circumference = computed(() => 2 * Math.PI * r.value)
+
+const dashOffset = computed(() => circumference.value * (1 - ratio.value))
+
+const stroke = computed(() => colorValue(props.color))
+
+const rootStyle = computed<Record<string, string>>(() => ({
+  width: diameter.value,
+  height: diameter.value,
+}))
+
+const valueStyle = computed<Record<string, string>>(() => ({
+  color: props.color ? colorValue(props.color) : "",
+  fontSize: `calc(${diameter.value} * 0.25)`,
+}))
+
+const displayValue = computed(() => Math.round(ratio.value * 100))
+</script>
+
+<template>
+  <div
+    class="q-circular-progress"
+    :class="{
+      'q-circular-progress--dark': dark,
+      'q-circular-progress--indeterminate': indeterminate,
+    }"
+    :style="rootStyle"
+    role="progressbar"
+    :aria-valuenow="value"
+    :aria-valuemin="min"
+    :aria-valuemax="max"
+  >
+    <svg class="q-circular-progress__svg" :width="diameter" :height="diameter" viewBox="0 0 100 100">
+      <!-- piste -->
+      <circle
+        cx="50"
+        cy="50"
+        :r="50 - props.thickness"
+        class="q-circular-progress__track"
+        :class="{ 'q-circular-progress__track--dark': dark }"
+        fill="none"
+        :stroke="trackColor ? colorValue(trackColor) : undefined"
+        :stroke-width="thickness"
+      />
+      <!-- anneau de progression -->
+      <circle
+        cx="50"
+        cy="50"
+        :r="50 - props.thickness"
+        class="q-circular-progress__bar"
+        fill="none"
+        :stroke="stroke"
+        :stroke-width="thickness"
+        stroke-linecap="round"
+        :stroke-dasharray="circumference"
+        :stroke-dashoffset="reverse ? -dashOffset : dashOffset"
+        :transform="`rotate(-90 50 50)`"
+      />
+    </svg>
+    <div v-if="showValue && !indeterminate" class="q-circular-progress__value" :style="valueStyle">
+      <slot name="value">{{ displayValue }}%</slot>
+    </div>
+  </div>
+</template>

package/components/QCol.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+// QCol — cellule de la grille : <q-col :span="6" :span-md="4" :offset="1">
+// Responsive : span-sm/md/lg/xl et offset-* écrasent la valeur de base au breakpoint.
+import { computed } from "vue"
+import { useGridBreakpoints } from "../lib/breakpoints"
+
+type ColSpan = number | "auto"
+
+interface Props {
+  /** Colonnes occupées (1..12, ou "auto") — valeur de base (mobile) */
+  span?: ColSpan
+  /** Décalage en colonnes */
+  offset?: number
+  spanSm?: ColSpan
+  spanMd?: ColSpan
+  spanLg?: ColSpan
+  spanXl?: ColSpan
+  offsetSm?: number
+  offsetMd?: number
+  offsetLg?: number
+  offsetXl?: number
+  alignSelf?: "start" | "center" | "end" | "stretch"
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  span: "auto",
+  alignSelf: "stretch",
+})
+
+const bp = useGridBreakpoints()
+
+const classes = computed(() => ({
+  ...(props.span !== "auto" ? { [`q-col--span-${props.span}`]: true } : {}),
+  ...(props.offset ? { [`q-col--offset-${props.offset}`]: true } : {}),
+  ...(bp.value.sm && props.spanSm !== undefined && props.spanSm !== "auto" ? { [`q-col--span-sm-${props.spanSm}`]: true } : {}),
+  ...(bp.value.sm && props.offsetSm ? { [`q-col--offset-sm-${props.offsetSm}`]: true } : {}),
+  ...(bp.value.md && props.spanMd !== undefined && props.spanMd !== "auto" ? { [`q-col--span-md-${props.spanMd}`]: true } : {}),
+  ...(bp.value.md && props.offsetMd ? { [`q-col--offset-md-${props.offsetMd}`]: true } : {}),
+  ...(bp.value.lg && props.spanLg !== undefined && props.spanLg !== "auto" ? { [`q-col--span-lg-${props.spanLg}`]: true } : {}),
+  ...(bp.value.lg && props.offsetLg ? { [`q-col--offset-lg-${props.offsetLg}`]: true } : {}),
+  ...(bp.value.xl && props.spanXl !== undefined && props.spanXl !== "auto" ? { [`q-col--span-xl-${props.spanXl}`]: true } : {}),
+  ...(bp.value.xl && props.offsetXl ? { [`q-col--offset-xl-${props.offsetXl}`]: true } : {}),
+}))
+
+const style = computed(() => (props.alignSelf !== "stretch" ? { alignSelf: props.alignSelf } : undefined))
+</script>
+
+<template>
+  <div class="q-col" :class="classes" :style="style">
+    <slot />
+  </div>
+</template>