@dnax/ui 0.0.1

package/components/QSeparator.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// QSeparator — API Quasar : <q-separator vertical inset spaced dark>
+// Équivalent du Separator shadcn-vue (reka-ui) : div role="separator".
+interface Props {
+  /** Séparateur vertical (sinon horizontal) */
+  vertical?: boolean
+  /** Marge intérieure (16px) */
+  inset?: boolean
+  /** Espacement (8px) autour */
+  spaced?: boolean
+  /** Thème sombre */
+  dark?: boolean
+  /** Décoration pure : pas de rôle ARIA (role="none") */
+  decorative?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  vertical: false,
+  inset: false,
+  spaced: false,
+  dark: false,
+  decorative: false,
+})
+</script>
+
+<template>
+  <div
+    class="q-separator"
+    :class="{
+      'q-separator--horizontal': !props.vertical,
+      'q-separator--vertical': props.vertical,
+      'q-separator--inset': props.inset,
+      'q-separator--spaced': props.spaced,
+      'q-separator--dark': props.dark,
+    }"
+    :role="props.decorative ? 'none' : 'separator'"
+    :aria-orientation="props.vertical ? 'vertical' : 'horizontal'"
+  />
+</template>

package/components/QSidebar.vue

@@ -0,0 +1,153 @@
+<script lang="ts">
+// QSidebar — panneau latéral type Sidebar shadcn-vue, API QDrawer Quasar :
+// <q-sidebar v-model="open" side="left" width="260px" bordered show-if-above breakpoint="1023">
+// Fournit le contexte (toggle) aux QSidebarTrigger enfants.
+import type { InjectionKey, Ref } from "vue"
+
+export interface SidebarContext {
+  open: Readonly<Ref<boolean>>
+  setOpen: (v: boolean) => void
+  toggle: () => void
+}
+
+export const qSidebarKey: InjectionKey<SidebarContext> = Symbol("q-sidebar")
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, provide, ref } from "vue"
+import type { StyleValue } from "vue"
+import { cn } from "../lib/utils"
+import { useOverlayBack } from "../lib/overlayBack"
+
+interface Props {
+  /** Ouvert (v-model) — mode offcanvas ; ignoré en mode statique */
+  modelValue?: boolean
+  /** Côté : left | right */
+  side?: "left" | "right"
+  /** Largeur (défaut 260px) */
+  width?: string
+  /** Hauteur du panneau (ex. "calc(100vh - 64px)", "80vh") — sinon pleine hauteur */
+  height?: string
+  /** Hauteur max — le contenu scrolle (ex. "70vh") */
+  maxHeight?: string
+  /** Bordure côté intérieur */
+  bordered?: boolean
+  /** Ombre portée */
+  elevated?: boolean
+  /** Thème sombre */
+  dark?: boolean
+  /** Toujours visible au-delà du breakpoint (mode statique) */
+  showIfAbove?: boolean
+  /** Mode statique : reste collé en haut pendant le scroll de la page (position: sticky) */
+  sticky?: boolean
+  /** Breakpoint de bascule statique/offcanvas (px) */
+  breakpoint?: number
+  /** Styles CSS additionnels appliqués au panneau */
+  style?: StyleValue
+  /** Classe(s) additionnelle(s) appliquée(s) au panneau */
+  class?: string
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: true,
+  side: "left",
+  width: "260px",
+  height: "",
+  maxHeight: "",
+  bordered: false,
+  elevated: false,
+  dark: false,
+  showIfAbove: false,
+  sticky: false,
+  breakpoint: 1023,
+  style: undefined,
+  class: "",
+  disable: false,
+})
+
+const emit = defineEmits<{ "update:modelValue": [value: boolean] }>()
+
+// — Mode statique (viewport >= breakpoint && show-if-above) —
+const isAbove = ref(false)
+let mql: MediaQueryList | null = null
+
+const updateMql = () => {
+  isAbove.value = mql?.matches ?? false
+}
+
+onMounted(() => {
+  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    mql = window.matchMedia(`(min-width: ${props.breakpoint}px)`)
+    updateMql()
+    mql.addEventListener("change", updateMql)
+  }
+})
+onBeforeUnmount(() => {
+  mql?.removeEventListener("change", updateMql)
+})
+
+const isStatic = computed(() => props.showIfAbove && isAbove.value && !props.disable)
+const open = computed(() => (isStatic.value ? true : (props.modelValue ?? true)))
+
+const setOpen = (v: boolean) => {
+  if (!isStatic.value) emit("update:modelValue", v)
+}
+const toggle = () => setOpen(!open.value)
+
+provide<SidebarContext>(qSidebarKey, { open, setOpen, toggle })
+
+// « Retour » navigateur → ferme la sidebar (mode offcanvas uniquement)
+const overlayOpen = computed(() => !isStatic.value && open.value)
+useOverlayBack(overlayOpen, () => setOpen(false), "QSidebar")
+
+// Échap ferme en offcanvas
+const onDocKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Escape" && !isStatic.value && open.value) setOpen(false)
+}
+
+onMounted(() => {
+  if (typeof document !== "undefined") document.addEventListener("keydown", onDocKeydown)
+})
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") document.removeEventListener("keydown", onDocKeydown)
+})
+
+const rootClasses = computed(() =>
+  cn(
+    "q-sidebar",
+    isStatic.value ? "q-sidebar--static" : "q-sidebar--offcanvas",
+    !isStatic.value && open.value && "q-sidebar--open",
+    props.side === "right" && "q-sidebar--right",
+    props.sticky && "q-sidebar--sticky",
+    props.bordered && "q-sidebar--bordered",
+    props.elevated && "q-sidebar--elevated",
+    props.dark && "q-sidebar--dark",
+    props.class,
+  ),
+)
+
+const rootStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = { "--q-sidebar-w": props.width }
+  if (props.height) style.height = props.height
+  if (props.maxHeight) style.maxHeight = props.maxHeight
+  return style
+})
+</script>
+
+<template>
+  <aside
+    class="q-sidebar"
+    :class="rootClasses"
+    :style="[rootStyle, props.style]"
+    :aria-hidden="!isStatic && !open ? 'true' : undefined"
+  >
+    <slot />
+  </aside>
+  <div
+    v-if="!isStatic && open && !disable"
+    class="q-sidebar__backdrop"
+    aria-hidden="true"
+    @click="setOpen(false)"
+  />
+</template>

package/components/QSidebarContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// QSidebarContent — zone centrale scrollable du QSidebar (équivalent SidebarContent).
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div class="q-sidebar__content" :class="props.class">
+    <slot />
+  </div>
+</template>

package/components/QSidebarFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// QSidebarFooter — zone basse du QSidebar (équivalent SidebarFooter).
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div class="q-sidebar__footer" :class="props.class">
+    <slot />
+  </div>
+</template>

package/components/QSidebarHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// QSidebarHeader — zone haute du QSidebar (équivalent SidebarHeader).
+interface Props {
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div class="q-sidebar__header" :class="props.class">
+    <slot />
+  </div>
+</template>

package/components/QSidebarMenu.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// QSidebarMenu — liste de navigation (équivalent SidebarMenu).
+</script>
+
+<template>
+  <ul class="q-sidebar__menu">
+    <slot />
+  </ul>
+</template>

package/components/QSidebarMenuButton.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+// QSidebarMenuButton — bouton/lien de menu (équivalent SidebarMenuButton).
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { cn } from "../lib/utils"
+
+interface Props {
+  label?: string
+  /** Icône Iconify (ex. : "lucide:settings") */
+  icon?: string
+  /** Lien natif (<a>) ; sinon bouton */
+  href?: string
+  /** État actif */
+  active?: boolean
+  activeClass?: string
+  disable?: boolean
+  /** Badge affiché à droite */
+  badge?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  active: false,
+  activeClass: "",
+  disable: false,
+})
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+const buttonClasses = computed(() =>
+  cn(
+    "q-sidebar__menu-button",
+    props.active && "q-sidebar__menu-button--active",
+    props.active && props.activeClass,
+    props.disable && "q-sidebar__menu-button--disabled",
+  ),
+)
+
+const onClick = (e: MouseEvent) => {
+  if (props.disable) return
+  emit("click", e)
+}
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'button'"
+    :href="href || undefined"
+    :disabled="href ? undefined : disable"
+    class="q-sidebar__menu-button"
+    :class="buttonClasses"
+    :aria-current="active ? 'page' : undefined"
+    @click="onClick"
+  >
+    <Icon :icon="icon" v-if="icon" class="q-sidebar__menu-button-icon" aria-hidden="true" />
+    <span v-if="label" class="q-sidebar__menu-button-label">{{ label }}</span>
+    <slot v-else />
+    <span v-if="badge !== undefined" class="q-sidebar__menu-badge">{{ badge }}</span>
+  </component>
+</template>

package/components/QSidebarMenuItem.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// QSidebarMenuItem — item de menu (équivalent SidebarMenuItem).
+</script>
+
+<template>
+  <li class="q-sidebar__menu-item">
+    <slot />
+  </li>
+</template>

package/components/QSidebarTrigger.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// QSidebarTrigger — bouton bascule du QSidebar (équivalent SidebarTrigger).
+// À placer n'importe où dans le sous-arbre d'un QSidebar.
+import { inject } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { qSidebarKey } from "./QSidebar.vue"
+
+interface Props {
+  /** Libellé accessible */
+  label?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: "Ouvrir/fermer la barre latérale",
+})
+
+const sidebar = inject(qSidebarKey, null)
+</script>
+
+<template>
+  <button
+    type="button"
+    class="q-sidebar__trigger"
+    :aria-label="label"
+    @click="sidebar?.toggle()"
+  >
+    <slot>
+      <Icon :icon="icons.menu" aria-hidden="true" />
+    </slot>
+  </button>
+</template>

package/components/QSkeleton.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+// QSkeleton — API Quasar : <q-skeleton type="QBtn" animation="pulse" square dark size width height>
+// Équivalent shadcn-vue (div animée) + types composants rendus en formes CSS.
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+
+type SkeletonType =
+  | "text"
+  | "rect"
+  | "circle"
+  | "QBtn"
+  | "QAvatar"
+  | "QBadge"
+  | "QChip"
+  | "QInput"
+  | "QList"
+  | "QToolbar"
+  | "QToggle"
+  | "QCheckbox"
+  | "QRadio"
+  | "QSlider"
+
+type SkeletonAnimation = "wave" | "pulse" | "pulse-x" | "pulse-y" | "fade" | "blink" | "none"
+
+interface Props {
+  /** Forme : text, rect, circle ou un type de composant (QBtn, QInput…) */
+  type?: SkeletonType
+  animation?: SkeletonAnimation
+  /** Coins droits */
+  square?: boolean
+  /** Thème sombre */
+  dark?: boolean
+  /** Taille : circle → diamètre, text → font-size */
+  size?: string
+  width?: string
+  height?: string
+  style?: string
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+  animation: "wave",
+  square: false,
+  dark: false,
+})
+
+const isSimple = computed(
+  () => props.type === "text" || props.type === "rect" || props.type === "circle",
+)
+
+const skeletonStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  if (props.width) style.width = props.width
+  if (props.height) style.height = props.height
+  if (props.type === "circle" && props.size) {
+    style.width = props.size
+    style.height = props.size
+  }
+  else if (props.type === "text" && props.size) {
+    style.fontSize = props.size
+  }
+  return style
+})
+
+const skeletonClasses = computed(() =>
+  cn(
+    "q-skeleton",
+    `q-skeleton--${props.type}`,
+    `q-skeleton--${props.animation}`,
+    props.square && "q-skeleton--square",
+    props.dark && "q-skeleton--dark",
+    props.class,
+  ),
+)
+</script>
+
+<template>
+  <div :class="skeletonClasses" :style="[skeletonStyle, props.style]">
+    <template v-if="type === 'QBtn'">
+      <span class="q-skeleton__bar" style="width: 60%" />
+    </template>
+    <template v-else-if="type === 'QList'">
+      <span class="q-skeleton__line" />
+      <span class="q-skeleton__line" style="width: 80%" />
+      <span class="q-skeleton__line" style="width: 55%" />
+    </template>
+    <template v-else-if="type === 'QToolbar'">
+      <span class="q-skeleton__dot" />
+      <span class="q-skeleton__bar" style="width: 40%" />
+      <span class="q-skeleton__bar" style="width: 25%" />
+    </template>
+    <slot />
+  </div>
+</template>

package/components/QSlider.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+// QSlider — curseur : <q-slider v-model="val" :min="0" :max="100" step="5" label markers />
+// Drag pointer (track + thumb), clavier (flèches/Home/End), snap au step, bulle de valeur.
+import { computed, ref } from "vue"
+import { cn } from "../lib/utils"
+import { colorValue } from "../lib/colors"
+
+interface Props {
+  modelValue?: number
+  min?: number
+  max?: number
+  /** Pas de progression (défaut 1) */
+  step?: number
+  /** Le curseur saute sur les steps pendant le drag (sinon au relâchement) */
+  snap?: boolean
+  /** Bulle de valeur pendant le drag */
+  label?: boolean
+  /** Bulle toujours visible */
+  labelAlways?: boolean
+  /** Points sur les steps */
+  markers?: boolean
+  vertical?: boolean
+  reverse?: boolean
+  disable?: boolean
+  readonly?: boolean
+  color?: string
+  trackColor?: string
+  thumbColor?: string
+  dense?: boolean
+  dark?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  min: 0,
+  max: 100,
+  step: 1,
+  snap: false,
+  label: false,
+  labelAlways: false,
+  markers: false,
+  vertical: false,
+  reverse: false,
+  disable: false,
+  readonly: false,
+  color: "primary",
+  trackColor: "",
+  thumbColor: "",
+  dense: false,
+  dark: false,
+})
+
+const emit = defineEmits<{ "update:modelValue": [value: number]; change: [value: number] }>()
+
+const trackEl = ref<HTMLElement | null>(null)
+const dragging = ref(false)
+const dragValue = ref<number | null>(null)
+
+const snapped = (v: number): number => {
+  const steps = Math.round((v - props.min) / props.step)
+  return Math.min(props.max, Math.max(props.min, props.min + steps * props.step))
+}
+
+const displayValue = computed(() => {
+  if (dragging.value && !props.snap && dragValue.value !== null) return dragValue.value
+  return snapped(props.modelValue ?? 0)
+})
+
+const pct = computed(() => {
+  const span = props.max - props.min
+  if (span <= 0) return 0
+  return ((displayValue.value - props.min) / span) * 100
+})
+
+const valueFromPos = (clientX: number, clientY: number): number => {
+  const el = trackEl.value
+  if (!el) return props.modelValue ?? 0
+  const r = el.getBoundingClientRect()
+  let ratio = props.vertical
+    ? 1 - (clientY - r.top) / Math.max(1, r.height)
+    : (clientX - r.left) / Math.max(1, r.width)
+  if (props.reverse) ratio = 1 - ratio
+  ratio = Math.min(1, Math.max(0, ratio))
+  return props.min + ratio * (props.max - props.min)
+}
+
+const onPointerDown = (e: PointerEvent) => {
+  if (props.disable || props.readonly) return
+  dragging.value = true
+  ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+  const v = valueFromPos(e.clientX, e.clientY)
+  if (props.snap) emit("update:modelValue", snapped(v))
+  else dragValue.value = v
+}
+
+const onPointerMove = (e: PointerEvent) => {
+  if (!dragging.value) return
+  const v = valueFromPos(e.clientX, e.clientY)
+  if (props.snap) emit("update:modelValue", snapped(v))
+  else dragValue.value = v
+}
+
+const onPointerUp = () => {
+  if (!dragging.value) return
+  dragging.value = false
+  if (dragValue.value !== null) {
+    const v = snapped(dragValue.value)
+    dragValue.value = null
+    emit("update:modelValue", v)
+    emit("change", v)
+  }
+}
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (props.disable || props.readonly) return
+  let next: number | null = null
+  if (e.key === "ArrowRight" || e.key === "ArrowUp") next = (props.modelValue ?? 0) + props.step
+  else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = (props.modelValue ?? 0) - props.step
+  else if (e.key === "Home") next = props.min
+  else if (e.key === "End") next = props.max
+  if (next === null) return
+  e.preventDefault()
+  const v = snapped(next)
+  emit("update:modelValue", v)
+  emit("change", v)
+}
+
+// — styles calculés —
+const THUMB = 20
+
+const trackStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  if (props.trackColor) style.backgroundColor = colorValue(props.trackColor)
+  return style
+})
+
+const fillStyle = computed<Record<string, string>>(() => ({
+  backgroundColor: colorValue(props.color),
+  ...(props.vertical ? { height: `${pct.value}%` } : { width: `${pct.value}%` }),
+}))
+
+const thumbStyle = computed<Record<string, string>>(() => ({
+  borderColor: colorValue(props.thumbColor || props.color),
+  ...(props.vertical
+    ? { top: `calc(${pct.value}% - ${THUMB / 2}px)` }
+    : { left: `calc(${pct.value}% - ${THUMB / 2}px)` }),
+}))
+
+const markerPositions = computed<number[]>(() => {
+  const list: number[] = []
+  const span = props.max - props.min
+  if (span <= 0 || props.step <= 0) return list
+  for (let v = props.min; v <= props.max + 1e-9; v += props.step) {
+    list.push(((v - props.min) / span) * 100)
+  }
+  return list
+})
+
+const rootClasses = computed(() =>
+  cn(
+    "q-slider",
+    props.vertical && "q-slider--vertical",
+    props.dense && "q-slider--dense",
+    props.dark && "q-slider--dark",
+    (props.disable || props.readonly) && "q-slider--disabled",
+  ),
+)
+</script>
+
+<template>
+  <div
+    ref="trackEl"
+    class="q-slider"
+    :class="rootClasses"
+    role="slider"
+    :aria-valuemin="min"
+    :aria-valuemax="max"
+    :aria-valuenow="Math.round(displayValue)"
+    :tabindex="disable || readonly ? -1 : 0"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @keydown="onKeydown"
+  >
+    <div class="q-slider__track" :style="trackStyle">
+      <div class="q-slider__track-fill" :style="fillStyle" />
+      <div class="q-slider__thumb" :class="{ 'q-slider__thumb--dragging': dragging }" :style="thumbStyle">
+        <span
+          v-if="label && (labelAlways || dragging)"
+          class="q-slider__label"
+          :style="{ backgroundColor: colorValue(color) }"
+        >
+          {{ Math.round(displayValue) }}
+        </span>
+      </div>
+    </div>
+    <span
+      v-for="(m, i) in markerPositions"
+      :key="i"
+      class="q-slider__marker"
+      :style="vertical ? { top: `${m}%` } : { left: `${m}%` }"
+    />
+  </div>
+</template>

package/components/QSpace.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// QSpace — API Quasar : <q-space />
+// Remplit l'espace restant dans un conteneur flex (push les éléments à gauche/droite).
+</script>
+
+<template>
+  <div class="q-space" aria-hidden="true">
+    <slot />
+  </div>
+</template>