@dnax/ui 0.0.1

package/components/QBottomSheet.vue

@@ -0,0 +1,177 @@
+<script lang="ts">
+// QBottomSheet — bottom sheet type Drawer shadcn-vue (vaul), style Quasar :
+// <q-bottom-sheet v-model="open"> + slot trigger / QBottomSheetHeader / QBottomSheetFooter
+// Drag vers le bas pour fermer, backdrop, Échap, safe-area bottom.
+import type { InjectionKey, Ref } from "vue"
+
+export interface BottomSheetContext {
+  open: Readonly<Ref<boolean>>
+  setOpen: (v: boolean) => void
+}
+
+export const qBottomSheetKey: InjectionKey<BottomSheetContext> = Symbol("q-bottom-sheet")
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from "vue"
+import { cn } from "../lib/utils"
+import { useOverlayBack } from "../lib/overlayBack"
+
+interface Props {
+  /** Ouvert (v-model) */
+  modelValue?: boolean
+  /** Ne se ferme ni au backdrop ni à Échap */
+  persistent?: boolean
+  /** Largeur max du panneau */
+  width?: string
+  /** Hauteur du panneau (sinon max-height 90vh) */
+  height?: string
+  /** Arrondi des coins hauts : true | false | valeur CSS */
+  rounded?: boolean | string
+  dark?: boolean
+  /** Fond translucide (frosted glass) : true = 70%, ou valeur % */
+  translucent?: boolean | number
+  /** Seuil de drag (px) au-delà duquel on ferme */
+  dragThreshold?: number
+  /** Style du panneau (variables de thème pour les contenus téléportés) */
+  contentStyle?: Record<string, string>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  persistent: false,
+  width: "640px",
+  rounded: true,
+  dark: false,
+  dragThreshold: 80,
+})
+
+const emit = defineEmits<{ "update:modelValue": [value: boolean] }>()
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v),
+})
+
+provide<BottomSheetContext>(qBottomSheetKey, {
+  open,
+  setOpen: (v) => {
+    open.value = v
+  },
+})
+
+// « Retour » navigateur → ferme le bottom sheet au lieu de naviguer
+useOverlayBack(open, () => { open.value = false }, "QBottomSheet")
+
+// Échap + verrouillage du scroll du body
+const onDocKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Escape" && open.value && !props.persistent) open.value = false
+}
+
+watch(open, (v) => {
+  if (typeof document !== "undefined") document.body.style.overflow = v ? "hidden" : ""
+})
+
+onMounted(() => {
+  if (typeof document !== "undefined") document.addEventListener("keydown", onDocKeydown)
+})
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") {
+    document.removeEventListener("keydown", onDocKeydown)
+    document.body.style.overflow = ""
+  }
+})
+
+// — Drag to dismiss (pattern vaul) —
+const panelRef = ref<HTMLElement | null>(null)
+const dragging = ref(false)
+let startY = 0
+let currentDy = 0
+
+const onHandleDown = (e: PointerEvent) => {
+  ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+  startY = e.clientY
+  currentDy = 0
+  dragging.value = true
+}
+
+const onHandleMove = (e: PointerEvent) => {
+  if (!dragging.value) return
+  currentDy = Math.max(0, e.clientY - startY)
+  if (panelRef.value) panelRef.value.style.transform = `translateY(${currentDy}px)`
+}
+
+const onHandleUp = () => {
+  if (!dragging.value) return
+  dragging.value = false
+  if (currentDy > props.dragThreshold) open.value = false
+  else if (panelRef.value) panelRef.value.style.transform = ""
+  currentDy = 0
+}
+
+const panelStyle = computed<Record<string, string>>(() => ({
+  maxWidth: props.width,
+  ...(props.height ? { height: props.height } : {}),
+}))
+
+const radiusStyle = computed<Record<string, string> | undefined>(() => {
+  if (props.rounded === false) return { borderRadius: "0" }
+  if (typeof props.rounded === "string") return { borderRadius: props.rounded }
+  return undefined
+})
+
+const panelClasses = computed(() =>
+  cn(
+    "q-bottom-sheet__panel",
+    props.rounded === false && "q-bottom-sheet__panel--square",
+    props.dark && "q-bottom-sheet__panel--dark",
+    (props.translucent === true || typeof props.translucent === "number") && "q-bottom-sheet__panel--translucent",
+    dragging.value && "q-bottom-sheet__panel--dragging",
+  ),
+)
+
+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>
+  <span v-if="$slots.trigger" class="q-bottom-sheet__trigger" @click="open = true">
+    <slot name="trigger" />
+  </span>
+
+  <Teleport to="body">
+    <Transition name="q-bs">
+      <div
+        v-if="open"
+        class="q-bottom-sheet__overlay"
+        @click="!persistent && (open = false)"
+      >
+        <div
+          ref="panelRef"
+          class="q-bottom-sheet__panel"
+          :class="panelClasses"
+          :style="[panelStyle, radiusStyle, translucentStyle, props.contentStyle]"
+          role="dialog"
+          aria-modal="true"
+          @click.stop
+        >
+          <div
+            class="q-bottom-sheet__handle"
+            @pointerdown="onHandleDown"
+            @pointermove="onHandleMove"
+            @pointerup="onHandleUp"
+            @pointercancel="onHandleUp"
+          >
+            <span class="q-bottom-sheet__handle-bar" />
+          </div>
+          <div class="q-bottom-sheet__body">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/components/QBottomSheetFooter.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// QBottomSheetFooter — zone d'actions en bas du panneau (équivalent DrawerFooter).
+</script>
+
+<template>
+  <div class="q-bottom-sheet__footer">
+    <slot />
+  </div>
+</template>

package/components/QBottomSheetHeader.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// QBottomSheetHeader — header du panneau : titre + description + bouton fermer (équivalent DrawerHeader/DrawerTitle).
+import { inject } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { qBottomSheetKey } from "./QBottomSheet.vue"
+
+interface Props {
+  title?: string
+  description?: string
+}
+
+const props = defineProps<Props>()
+const sheet = inject(qBottomSheetKey, null)
+</script>
+
+<template>
+  <div class="q-bottom-sheet__header">
+    <div class="q-bottom-sheet__header-text">
+      <h2 v-if="title" class="q-bottom-sheet__title">{{ title }}</h2>
+      <slot name="title" />
+      <p v-if="description" class="q-bottom-sheet__description">{{ description }}</p>
+      <slot name="description" />
+    </div>
+    <button
+      type="button"
+      class="q-bottom-sheet__close"
+      aria-label="Fermer"
+      @click="sheet?.setOpen(false)"
+    >
+      <Icon :icon="icons.x" aria-hidden="true" />
+    </button>
+    <slot />
+  </div>
+</template>

package/components/QBottomSheetProvider.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+// QBottomSheetProvider — rend la pile de bottom sheets programmatiques ($q.bottomSheet).
+// Intégré dans QConfigProvider (rendu automatiquement par le plus externe),
+// utilisable aussi en autonome : <q-bottom-sheet-provider><slot /></q-bottom-sheet-provider>.
+import { computed, inject } from "vue"
+import { bottomSheetStack, closeBottomSheet } from "../lib/q"
+import type { BottomSheetController } from "../lib/q"
+import { qConfigKey } from "../lib/config"
+import { themeVarsStyle } from "../lib/themeVars"
+
+const sheets = bottomSheetStack
+
+const config = inject(qConfigKey, null)
+
+// Téléporté au body : on repose les tokens du thème sur le panneau
+const sheetThemeStyle = themeVarsStyle(computed(() => config?.theme.value ?? {}))
+
+const handleOk = (ctrl: BottomSheetController, data?: unknown) => {
+  ctrl._resolvers.ok?.(data)
+  closeBottomSheet(ctrl)
+}
+const handleCancel = (ctrl: BottomSheetController) => {
+  ctrl._resolvers.cancel?.()
+  closeBottomSheet(ctrl)
+}
+const handleDismiss = (ctrl: BottomSheetController) => {
+  ctrl._resolvers.dismiss?.()
+  closeBottomSheet(ctrl)
+}
+</script>
+
+<template>
+  <slot />
+  <q-bottom-sheet
+    v-for="(sheet, idx) in sheets"
+    :key="idx"
+    :model-value="true"
+    :persistent="sheet._opts.persistent"
+    :width="sheet._opts.width"
+    :height="sheet._opts.height"
+    :rounded="sheet._opts.rounded"
+    :dark="sheet._opts.dark"
+    :translucent="sheet._opts.translucent"
+    :drag-threshold="sheet._opts.dragThreshold"
+    :content-style="sheetThemeStyle"
+    @update:model-value="(v: boolean) => !v && handleDismiss(sheet)"
+  >
+    <q-bottom-sheet-header
+      v-if="sheet._opts.title || sheet._opts.description"
+      :title="sheet._opts.title"
+      :description="sheet._opts.description"
+    />
+    <component
+      :is="sheet._opts.component"
+      v-bind="sheet._opts.componentProps"
+      @ok="(data?: unknown) => handleOk(sheet, data)"
+      @cancel="handleCancel(sheet)"
+      @dismiss="handleDismiss(sheet)"
+      @close="handleDismiss(sheet)"
+    />
+  </q-bottom-sheet>
+</template>

package/components/QBottomSheetTrigger.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// QBottomSheetTrigger — bouton d'ouverture (équivalent DrawerTrigger), alternative au slot #trigger.
+import { inject } from "vue"
+import { qBottomSheetKey } from "./QBottomSheet.vue"
+
+interface Props {
+  label?: string
+}
+
+const props = defineProps<Props>()
+const sheet = inject(qBottomSheetKey, null)
+</script>
+
+<template>
+  <button type="button" class="q-bottom-sheet__trigger-btn" @click="sheet?.setOpen(true)">
+    <slot>{{ label }}</slot>
+  </button>
+</template>

package/components/QBtn.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+// QBtn — API Quasar : <q-btn flat dense outline rounded no-caps label="…" icon="…" />
+// Implémentation shadcn-vue : cva (variants) + cn() ; styles dans styles/main.css
+import { computed } from "vue"
+import { Icon } from "@iconify/vue"
+import { cva } from "class-variance-authority"
+import { cn } from "../lib/utils"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+
+const btnVariants = cva("q-btn", {
+  variants: {
+    size: {
+      sm: "q-btn--sm",
+      md: "q-btn--md",
+      lg: "q-btn--lg",
+      xl: "q-btn--xl",
+    },
+  },
+  defaultVariants: { size: "md" },
+})
+
+const TOKEN_COLORS = ["primary", "secondary", "accent", "dark", "positive", "negative", "info", "warning"] as const
+const SIZE_TOKENS = ["sm", "md", "lg", "xl"] as const
+
+interface Props {
+  /** Texte du bouton (sinon contenu du slot) */
+  label?: string
+  /** Icône Iconify à gauche du label (ex. : "lucide:download") */
+  icon?: string
+  /** Icône Iconify à droite du label */
+  iconRight?: string
+  /** Couleur : token (primary, secondary, negative…) ou hex (#1976d2) */
+  color?: string
+  /** Couleur du texte : token ou hex */
+  textColor?: string
+  /** Taille : token (sm|md|lg|xl) ou valeur CSS ("2rem") */
+  size?: string
+  type?: "button" | "submit" | "reset"
+  /** Rend un lien natif <a> */
+  href?: string
+  /** Fond transparent, texte coloré */
+  flat?: boolean
+  /** Fond transparent + bordure */
+  outline?: boolean
+  /** Supprime l'ombre portée */
+  unelevated?: boolean
+  /** Hauteur réduite */
+  dense?: boolean
+  /** Coins arrondis : true = pilule, ou échelle xs|sm|md|lg (none = carré) */
+  radius?: RadiusProp
+  /** Cercle parfait (bouton icône seule) */
+  round?: boolean
+  /** Coins droits */
+  square?: boolean
+  /** Désactive la mise en majuscules */
+  noCaps?: boolean
+  /** Largeur 100% */
+  stretch?: boolean
+  /** Affiche un spinner et bloque les clics */
+  loading?: boolean
+  /** Désactive le bouton */
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "button",
+  size: "md",
+  color: "primary",
+  flat: false,
+  outline: false,
+  unelevated: false,
+  dense: false,
+  round: false,
+  square: false,
+  noCaps: false,
+  stretch: false,
+  loading: false,
+  disable: false,
+})
+
+const isTokenColor = (c?: string) => !!c && (TOKEN_COLORS as readonly string[]).includes(c)
+const isSizeToken = (s?: string) => !!s && (SIZE_TOKENS as readonly string[]).includes(s)
+
+const sizeVariant = computed(() =>
+  isSizeToken(props.size) ? (props.size as "sm" | "md" | "lg" | "xl") : "md",
+)
+
+/** Taille CSS libre : passée en variable CSS --q-btn-h */
+const sizeStyle = computed<Record<string, string>>((): Record<string, string> =>
+  props.size && !isSizeToken(props.size) ? { "--q-btn-h": props.size } : {},
+)
+
+/** Couleurs hex libres : passées en variables CSS */
+const colorStyle = computed<Record<string, string>>(() => {
+  const style: Record<string, string> = {}
+  if (props.color && !isTokenColor(props.color)) style["--q-btn-bg"] = props.color
+  if (props.textColor && !isTokenColor(props.textColor)) style["--q-btn-fg"] = props.textColor
+  return style
+})
+
+const isDisabled = computed(() => props.disable || props.loading)
+
+// radius : prop explicite > composantProps.QBtn.radius ; échelle → --q-radius
+const effectiveRadius = useRadius("QBtn", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+const btnClasses = computed(() =>
+  cn(
+    btnVariants({ size: sizeVariant.value }),
+    isTokenColor(props.color) && `q-btn--${props.color}`,
+    isTokenColor(props.textColor) && `q-btn--text-${props.textColor}`,
+    props.flat && "q-btn--flat",
+    props.outline && "q-btn--outline",
+    props.unelevated && "q-btn--unelevated",
+    props.dense && "q-btn--dense",
+    effectiveRadius.value === true && "q-btn--rounded",
+    props.round && "q-btn--round",
+    props.square && "q-btn--square",
+    props.noCaps && "q-btn--no-caps",
+    props.stretch && "q-btn--stretch",
+    props.loading && "q-btn--loading",
+    isDisabled.value && "q-btn--disabled",
+  ),
+)
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'button'"
+    :href="href || undefined"
+    :type="href ? undefined : type"
+    :disabled="href ? undefined : isDisabled"
+    :aria-disabled="isDisabled || undefined"
+    :class="btnClasses"
+    :style="[sizeStyle, colorStyle, roundedStyle]"
+  >
+    <span v-if="loading" class="q-btn__spinner" aria-hidden="true" />
+    <Icon v-else-if="icon" :icon="icon" class="q-btn__icon" aria-hidden="true" />
+    <span v-if="label" class="q-btn__label">{{ label }}</span>
+    <slot />
+    <Icon v-if="iconRight && !loading" :icon="iconRight" class="q-btn__icon" aria-hidden="true" />
+  </component>
+</template>

package/components/QBtnGroup.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// QBtnGroup — API Quasar : <q-btn-group unelevated outline stretch>
+// Groupe de QBtn soudés (bords fusionnés, rayons sur les extrémités).
+interface Props {
+  /** Boutons sans ombre */
+  unelevated?: boolean
+  /** Contour de groupe */
+  outline?: boolean
+  /** Les boutons s'étendent également */
+  stretch?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  unelevated: false,
+  outline: false,
+  stretch: false,
+})
+</script>
+
+<template>
+  <div
+    class="q-btn-group"
+    :class="{
+      'q-btn-group--unelevated': props.unelevated,
+      'q-btn-group--outline': props.outline,
+      'q-btn-group--stretch': props.stretch,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/components/QBubble.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// QBubble — bulle de conversation type Bubble shadcn-vue :
+// variants default | secondary | muted | tinted | outline | ghost | destructive, align start|end.
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+import { QPrimitive } from "../lib/primitive"
+
+interface Props {
+  /** Traitement visuel */
+  variant?: "default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive"
+  /** Alignement dans la conversation */
+  align?: "start" | "end"
+  /** Élément/composant rendu */
+  as?: string
+  /** Fusion sur l'enfant du slot (bouton, lien…) */
+  asChild?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "default",
+  align: "start",
+  as: "div",
+  asChild: false,
+})
+
+const classes = computed(() =>
+  cn("q-bubble", `q-bubble--${props.variant}`, `q-bubble--align-${props.align}`, props.class),
+)
+</script>
+
+<template>
+  <QPrimitive :as="as" :as-child="asChild" :class="classes">
+    <slot />
+  </QPrimitive>
+</template>

package/components/QBubbleContent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// QBubbleContent — contenu de la bulle (équivalent BubbleContent).
+// as-child : le conteneur (bouton/lien) reçoit le style de la bulle.
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+import { QPrimitive } from "../lib/primitive"
+
+interface Props {
+  /** Élément/composant rendu */
+  as?: string
+  /** Fusion sur l'enfant du slot */
+  asChild?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "div",
+  asChild: false,
+})
+
+const classes = computed(() => cn("q-bubble__content", props.class))
+</script>
+
+<template>
+  <QPrimitive :as="as" :as-child="asChild" :class="classes">
+    <slot />
+  </QPrimitive>
+</template>

package/components/QBubbleGroup.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// QBubbleGroup — groupe de bulles consécutives du même expéditeur (équivalent BubbleGroup).
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+import { QPrimitive } from "../lib/primitive"
+
+interface Props {
+  as?: string
+  asChild?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "div",
+  asChild: false,
+})
+
+const classes = computed(() => cn("q-bubble-group", props.class))
+</script>
+
+<template>
+  <QPrimitive :as="as" :as-child="asChild" :class="classes">
+    <slot />
+  </QPrimitive>
+</template>

package/components/QBubbleReactions.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// QBubbleReactions — réactions ancrées au bord de la bulle (équivalent BubbleReactions).
+// side : top | bottom (chevauché) ; align : start | end.
+import { computed } from "vue"
+import { cn } from "../lib/utils"
+import { QPrimitive } from "../lib/primitive"
+
+interface Props {
+  /** Côté de la bulle où ancrer les réactions */
+  side?: "top" | "bottom"
+  /** Alignement inline */
+  align?: "start" | "end"
+  /** Élément/composant rendu */
+  as?: string
+  asChild?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  side: "bottom",
+  align: "end",
+  as: "div",
+  asChild: false,
+})
+
+const classes = computed(() =>
+  cn(
+    "q-bubble__reactions",
+    props.align === "start" && "q-bubble__reactions--start",
+    props.side === "top" && "q-bubble__reactions--top",
+    props.class,
+  ),
+)
+</script>
+
+<template>
+  <QPrimitive :as="as" :as-child="asChild" :class="classes">
+    <slot />
+  </QPrimitive>
+</template>

package/components/QCard.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+// QCard — API Quasar : <q-card elevated bordered dark square rounded="lg">
+// Pas d'ombre par défaut ; elevated l'ajoute, flat la retire explicitement.
+// Slots : default, media (zone image en haut), actions (zone actions en bas)
+import { computed } from "vue"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+
+interface Props {
+  /** Ajoute l'ombre portée (défaut : aucune) */
+  elevated?: boolean
+  /** Retire explicitement l'ombre */
+  flat?: boolean
+  /** Thème sombre */
+  dark?: boolean
+  /** Bordure fine */
+  bordered?: boolean
+  /** Coins droits */
+  square?: boolean
+  /** Coins arrondis : true = md, ou échelle xs|sm|md|lg (none = carré) */
+  radius?: RadiusProp
+  /** Glassmorphism : fond translucide + flou d'arrière-plan (backdrop-filter) */
+  glass?: boolean
+  /** Animation au survol : élévation + ombre renforcée */
+  hover?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  elevated: false,
+  flat: false,
+  dark: false,
+  bordered: false,
+  square: false,
+  glass: false,
+  hover: false,
+})
+
+// radius : prop explicite > composantProps.QCard.radius ; échelle → --q-radius
+const effectiveRadius = useRadius("QCard", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+</script>
+
+<template>
+  <div
+    class="q-card"
+    :class="{
+      'q-card--elevated': props.elevated,
+      'q-card--flat': props.flat,
+      'q-card--dark': props.dark,
+      'q-card--bordered': props.bordered,
+      'q-card--square': props.square,
+      'q-card--glass': props.glass,
+      'q-card--hover': props.hover,
+    }"
+    :style="roundedStyle"
+  >
+    <slot name="media" />
+    <slot />
+    <div v-if="$slots.actions" class="q-card__actions-slot">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>