@dnax/ui 0.0.1

package/components/QDatePicker.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+// QDatePicker — sélecteur de date type DatePicker shadcn-vue, API Quasar :
+// <q-date-picker v-model="date" mode="sheet" label="Échéance" clearable outlined />
+// Modes : inline (calendrier en place) | modal (centré) | sheet (bottom sheet) | dialog (plein écran).
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { cn } from "../lib/utils"
+import { useOverlayBack } from "../lib/overlayBack"
+import QDateCalendar from "./internal/QDateCalendar.vue"
+
+interface Props {
+  /** Date sélectionnée */
+  modelValue?: Date | null
+  /** Mode d'affichage */
+  mode?: "inline" | "sheet" | "modal" | "dialog"
+  label?: string
+  stackLabel?: boolean
+  hint?: string
+  error?: boolean
+  errorMessage?: string
+  placeholder?: string
+  outlined?: boolean
+  filled?: boolean
+  borderless?: boolean
+  dense?: boolean
+  clearable?: boolean
+  disable?: boolean
+  readonly?: boolean
+  /** Formateur d'affichage de la date sélectionnée */
+  format?: (d: Date) => string
+  /** 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
+  /** Largeur du panneau (modal/sheet) */
+  width?: string
+  /** Titre du panneau */
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  mode: "inline",
+  stackLabel: false,
+  error: false,
+  outlined: false,
+  filled: false,
+  borderless: false,
+  dense: false,
+  clearable: false,
+  disable: false,
+  readonly: false,
+  firstDayOfWeek: 1,
+  width: "",
+  title: "",
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: Date | null]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  clear: []
+}>()
+
+const isPanelMode = computed(() => props.mode !== "inline")
+
+const open = ref(false)
+const rootEl = ref<HTMLElement | null>(null)
+const sheetRef = ref<HTMLElement | null>(null)
+
+// « Retour » navigateur → ferme le panneau (sheet/modal/dialog) au lieu de naviguer
+const panelOpen = computed(() => isPanelMode.value && open.value)
+useOverlayBack(panelOpen, () => closePopup(), "QDatePicker")
+
+// — Affichage du champ —
+const formatFn = computed(
+  () =>
+    props.format ??
+    ((d: Date) =>
+      new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "short", year: "numeric" }).format(d)),
+)
+
+const displayText = computed(() => (props.modelValue ? formatFn.value(props.modelValue) : ""))
+
+const floatActive = computed(
+  () => open.value || props.modelValue !== null || props.stackLabel,
+)
+
+const fieldClasses = computed(() =>
+  cn(
+    "q-date-picker q-input",
+    props.outlined && "q-field--outlined",
+    props.filled && "q-field--filled",
+    props.borderless && "q-field--borderless",
+    props.dense && "q-field--dense",
+    props.error && "q-field--error",
+    props.disable && "q-field--disabled",
+    floatActive.value && "q-field--float",
+  ),
+)
+
+const onSelect = (d: Date) => {
+  emit("update:modelValue", d)
+  if (isPanelMode.value) open.value = false
+}
+
+const onClear = () => {
+  emit("update:modelValue", null)
+  emit("clear")
+}
+
+const openPopup = () => {
+  if (props.disable || props.readonly) return
+  open.value = true
+}
+
+const closePopup = () => {
+  open.value = false
+}
+
+const sheetTitle = computed(() => props.title || props.label || "Sélectionner une date")
+
+const sheetStyle = computed<Record<string, string> | undefined>(() =>
+  props.width ? { width: props.width, maxWidth: props.width } : undefined,
+)
+
+// — Fermetures : clic extérieur (hors panneau téléporté), Échap, scroll lock —
+const onDocMousedown = (e: MouseEvent) => {
+  const target = e.target as Node
+  if (rootEl.value?.contains(target)) return
+  if (sheetRef.value?.contains(target)) return
+  closePopup()
+}
+
+const onDocKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Escape" && open.value) closePopup()
+}
+
+watch(open, (v) => {
+  if (typeof document !== "undefined" && isPanelMode.value) {
+    document.body.style.overflow = v ? "hidden" : ""
+  }
+})
+
+onMounted(() => {
+  if (typeof document !== "undefined") {
+    document.addEventListener("mousedown", onDocMousedown)
+    document.addEventListener("keydown", onDocKeydown)
+  }
+})
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") {
+    document.removeEventListener("mousedown", onDocMousedown)
+    document.removeEventListener("keydown", onDocKeydown)
+    document.body.style.overflow = ""
+  }
+})
+</script>
+
+<template>
+  <div ref="rootEl" :class="isPanelMode ? fieldClasses : 'q-date-picker'">
+    <!-- Mode inline : calendrier en place -->
+    <div v-if="mode === 'inline'">
+      <q-date-calendar
+        :model-value="modelValue"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :disabled-dates="disabledDates"
+        :first-day-of-week="firstDayOfWeek"
+        @select="onSelect"
+      />
+    </div>
+
+    <!-- Modes panneau : champ déclencheur -->
+    <template v-else>
+      <label v-if="label" class="q-field__label-stack">{{ label }}</label>
+      <div class="q-field__control" @click="openPopup">
+        <Icon :icon="icons.calendarDays" class="q-date-picker__field-icon" aria-hidden="true" />
+        <span class="q-select__display" :class="{ 'q-select__display--placeholder': !displayText }">
+          {{ displayText || placeholder }}
+        </span>
+        <button
+          v-if="clearable && modelValue && !disable && !readonly"
+          class="q-field__clear"
+          type="button"
+          aria-label="Effacer"
+          @click.stop="onClear"
+        >
+          <Icon :icon="icons.x" aria-hidden="true" />
+        </button>
+        <ChevronDown class="q-select__arrow" :class="{ 'q-select__arrow--rotated': open }" aria-hidden="true" />
+      </div>
+      <div v-if="error" class="q-field__bottom">
+        <div class="q-field__error">{{ errorMessage }}</div>
+      </div>
+      <div v-else-if="hint" class="q-field__bottom">
+        <div class="q-field__hint">{{ hint }}</div>
+      </div>
+
+      <Teleport to="body">
+        <Transition name="q-date-modal">
+          <div
+            v-if="open"
+            class="q-date-picker__overlay"
+            :class="`q-date-picker__overlay--${mode}`"
+            role="presentation"
+            @mousedown.self="closePopup"
+          >
+            <div
+              ref="sheetRef"
+              class="q-date-picker__sheet"
+              :class="`q-date-picker__sheet--${mode}`"
+              :style="sheetStyle"
+              role="dialog"
+              aria-modal="true"
+              :aria-label="sheetTitle"
+            >
+              <div class="q-date-picker__sheet-header">
+                <span class="q-date-picker__sheet-title">{{ sheetTitle }}</span>
+                <button
+                  type="button"
+                  class="q-date-picker__sheet-close"
+                  :aria-label="`Fermer ${sheetTitle}`"
+                  @click="closePopup"
+                >
+                  <Icon :icon="icons.x" aria-hidden="true" />
+                </button>
+              </div>
+              <div class="q-date-picker__sheet-body">
+                <q-date-calendar
+                  :model-value="modelValue"
+                  :min-date="minDate"
+                  :max-date="maxDate"
+                  :disabled-dates="disabledDates"
+                  :first-day-of-week="firstDayOfWeek"
+                  @select="onSelect"
+                />
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+    </template>
+  </div>
+</template>

package/components/QDialog.vue

@@ -0,0 +1,163 @@
+<script lang="ts">
+// QDialog — modale type Dialog shadcn-vue (reka-ui), API Quasar.
+// <q-dialog v-model="open" persistent position="bottom"> + QDialogTrigger/Header/Footer
+import type { InjectionKey } from "vue"
+
+export interface DialogContext {
+  setOpen: (v: boolean) => void
+}
+
+export const qDialogKey: InjectionKey<DialogContext> = Symbol("q-dialog")
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, provide, watch } from "vue"
+import type { StyleValue } from "vue"
+import { cn } from "../lib/utils"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+import { useOverlayBack } from "../lib/overlayBack"
+
+type DialogPosition = "standard" | "top" | "right" | "bottom" | "left"
+
+interface Props {
+  /** Ouvert (v-model) */
+  modelValue?: boolean
+  /** Ne se ferme ni au backdrop ni à Échap */
+  persistent?: boolean
+  /** Plein écran */
+  maximized?: boolean
+  /** Position : standard (centré) | top | right | bottom | left */
+  position?: DialogPosition
+  /** Coins droits */
+  square?: boolean
+  /** Coins arrondis : true = md, ou échelle xs|sm|md|lg (none = carré) */
+  radius?: RadiusProp
+  fullWidth?: boolean
+  fullHeight?: boolean
+  contentClass?: string
+  /** Style(s) du panneau — string, objet ou tableau (comme la prop style de Vue) */
+  contentStyle?: StyleValue
+  noBackdropDismiss?: boolean
+  noEscDismiss?: boolean
+  /** Animation : fade | zoom | slide-up | slide-down | slide-left | slide-right (sinon basée sur position) */
+  transition?: "fade" | "zoom" | "slide-up" | "slide-down" | "slide-left" | "slide-right"
+  /** Durée des transitions d'entrée/sortie en ms (défaut CSS : ~200ms entrée, ~150ms sortie) */
+  transitionDuration?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  persistent: false,
+  maximized: false,
+  position: "standard",
+  square: false,
+  fullWidth: false,
+  fullHeight: false,
+  contentClass: "",
+  contentStyle: "",
+  noBackdropDismiss: false,
+  noEscDismiss: false,
+  transitionDuration: undefined,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean]
+  show: []
+  hide: []
+}>()
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v),
+})
+
+provide<DialogContext>(qDialogKey, {
+  setOpen: (v) => {
+    open.value = v
+  },
+})
+
+// Échap + verrouillage du scroll du body
+const onDocKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Escape" && open.value && !props.persistent && !props.noEscDismiss) {
+    open.value = false
+  }
+}
+
+// « Retour » navigateur → ferme le dialog au lieu de naviguer
+useOverlayBack(open, () => { open.value = false }, "QDialog")
+
+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 = ""
+  }
+})
+
+const overlayClasses = computed(() => cn("q-dialog__overlay", `q-dialog__overlay--${props.position}`))
+
+// radius : prop explicite > composantProps.QDialog.radius ; échelle → --q-radius
+const effectiveRadius = useRadius("QDialog", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+const contentClasses = computed(() =>
+  cn(
+    "q-dialog__content",
+    `q-dialog__content--${props.position}`,
+    props.maximized && "q-dialog__content--maximized",
+    props.square && "q-dialog__content--square",
+    props.fullWidth && "q-dialog__content--full-width",
+    props.fullHeight && "q-dialog__content--full-height",
+    props.contentClass,
+  ),
+)
+
+// Nom de la transition : custom (prop) ou défaut basé sur position
+const transitionName = computed(() =>
+  props.transition ? `q-dialog-${props.transition}` : "q-dialog",
+)
+
+// Durée des transitions (enter/leave) via variables CSS sur l'overlay
+const durationStyle = computed<StyleValue>(() =>
+  props.transitionDuration
+    ? {
+        "--q-dialog-duration-enter": `${props.transitionDuration}ms`,
+        "--q-dialog-duration-leave": `${props.transitionDuration}ms`,
+      }
+    : {},
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition :name="transitionName" @after-enter="emit('show')" @after-leave="emit('hide')">
+      <div
+        v-if="open"
+        class="q-dialog__overlay"
+        :class="overlayClasses"
+        :style="durationStyle"
+        @mousedown.self="!persistent && !noBackdropDismiss && (open = false)"
+      >
+        <div
+          v-if="open"
+          class="q-dialog__content"
+          :class="contentClasses"
+          :style="[contentStyle, roundedStyle]"
+          role="dialog"
+          aria-modal="true"
+          @mousedown.stop
+        >
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/components/QDialogFooter.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// QDialogFooter — zone d'actions en bas de la modale (équivalent DialogFooter).
+</script>
+
+<template>
+  <div class="q-dialog__footer">
+    <slot />
+  </div>
+</template>

package/components/QDialogHeader.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// QDialogHeader — header de la modale : titre + description + bouton fermer (équivalent DialogHeader/Title/Close).
+import { inject } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { qDialogKey } from "./QDialog.vue"
+
+interface Props {
+  title?: string
+  description?: string
+  /** Bouton fermer */
+  showClose?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showClose: true,
+})
+
+const dialog = inject(qDialogKey, null)
+</script>
+
+<template>
+  <div class="q-dialog__header">
+    <div class="q-dialog__header-text">
+      <h2 v-if="title" class="q-dialog__title">{{ title }}</h2>
+      <slot name="title" />
+      <p v-if="description" class="q-dialog__description">{{ description }}</p>
+      <slot name="description" />
+    </div>
+    <button
+      v-if="showClose"
+      type="button"
+      class="q-dialog__close"
+      aria-label="Fermer"
+      @click="dialog?.setOpen(false)"
+    >
+      <Icon :icon="icons.x" aria-hidden="true" />
+    </button>
+    <slot />
+  </div>
+</template>

package/components/QDialogProvider.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+// QDialogProvider — rend la pile de dialogues programmatiques ($q.dialog).
+// Intégré dans QConfigProvider (rendu automatiquement par le plus externe),
+// mais utilisable aussi en autonome : <q-dialog-provider><slot /></q-dialog-provider>.
+// Chaque entrée de la pile est rendue dans un <q-dialog> ; quand le composant
+// émet ok / cancel / dismiss / close, le résolveur correspondant est appelé
+// puis l'entrée est retirée de la pile.
+import { computed, inject } from "vue"
+import { dialogStack, closeDialog } from "../lib/q"
+import type { DialogController } from "../lib/q"
+import { qConfigKey } from "../lib/config"
+import { themeVarsStyle } from "../lib/themeVars"
+
+const dialogs = dialogStack
+
+const config = inject(qConfigKey, null)
+
+// Les dialogs sont téléportés au body (QDialog) : on repose les tokens du thème
+// sur leur contenu pour qu'ils héritent des couleurs/radius du provider.
+const dialogThemeStyle = themeVarsStyle(computed(() => config?.theme.value ?? {}))
+
+const contentStyle = (ctrl: DialogController) =>
+  typeof ctrl._opts.fullscreen === "string" ? { width: ctrl._opts.fullscreen } : undefined
+
+const handleOk = (ctrl: DialogController, data?: unknown) => {
+  ctrl._resolvers.ok?.(data)
+  closeDialog(ctrl)
+}
+const handleCancel = (ctrl: DialogController) => {
+  ctrl._resolvers.cancel?.()
+  closeDialog(ctrl)
+}
+const handleDismiss = (ctrl: DialogController) => {
+  ctrl._resolvers.dismiss?.()
+  closeDialog(ctrl)
+}
+</script>
+
+<template>
+  <slot />
+  <q-dialog
+    v-for="(dialog, idx) in dialogs"
+    :key="idx"
+    :model-value="true"
+    :maximized="dialog._opts.fullscreen === true"
+    :content-style="[contentStyle(dialog), dialogThemeStyle]"
+    :content-class="dialog._opts.class"
+    :persistent="dialog._opts.persistent"
+    @update:model-value="(v: boolean) => !v && handleDismiss(dialog)"
+  >
+    <q-dialog-header
+      v-if="dialog._opts.title || dialog._opts.description"
+      :title="dialog._opts.title"
+      :description="dialog._opts.description"
+    />
+    <component
+      :is="dialog._opts.component"
+      v-bind="dialog._opts.componentProps"
+      @ok="(data?: unknown) => handleOk(dialog, data)"
+      @cancel="handleCancel(dialog)"
+      @dismiss="handleDismiss(dialog)"
+      @close="handleDismiss(dialog)"
+    />
+  </q-dialog>
+</template>

package/components/QDialogTrigger.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// QDialogTrigger — bouton d'ouverture (équivalent DialogTrigger).
+import { inject } from "vue"
+import { qDialogKey } from "./QDialog.vue"
+
+interface Props {
+  label?: string
+}
+
+const props = defineProps<Props>()
+const dialog = inject(qDialogKey, null)
+</script>
+
+<template>
+  <button type="button" class="q-dialog__trigger" @click="dialog?.setOpen(true)">
+    <slot>{{ label }}</slot>
+  </button>
+</template>

package/components/QFab.vue

@@ -0,0 +1,80 @@
+<script lang="ts">
+// QFab — bouton d'action flottant (FAB) avec actions dépliables, API Quasar.
+import type { InjectionKey } from "vue"
+
+export interface QFabContext {
+  close: () => void
+}
+
+export const qFabKey: InjectionKey<QFabContext> = Symbol("q-fab")
+</script>
+
+<script setup lang="ts">
+import { computed, provide, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { colorValue, foregroundFor } from "../lib/colors"
+
+type FabPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right"
+
+interface Props {
+  /** Ouvert (v-model) */
+  modelValue?: boolean
+  /** Position du FAB à l'écran */
+  position?: FabPosition
+  /** Icône Iconify du bouton principal (défaut : lucide:plus — rotation 45° à l'ouverture) */
+  icon?: string
+  /** Couleur du bouton principal (token ou hex) */
+  color?: string
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  position: "bottom-right",
+  icon: icons.plus,
+  color: "primary",
+  disable: false,
+})
+
+const emit = defineEmits<{ "update:modelValue": [value: boolean] }>()
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (v) => emit("update:modelValue", v),
+})
+
+const toggle = () => {
+  if (!props.disable) open.value = !open.value
+}
+
+provide<QFabContext>(qFabKey, {
+  close: () => {
+    open.value = false
+  },
+})
+
+const mainStyle = computed<Record<string, string>>(() => ({
+  backgroundColor: colorValue(props.color),
+  color: foregroundFor(props.color),
+}))
+</script>
+
+<template>
+  <div class="q-fab" :class="[`q-fab--${position}`, open && 'q-fab--open']">
+    <div class="q-fab__actions" role="menu">
+      <slot />
+    </div>
+    <button
+      type="button"
+      class="q-fab__main"
+      :style="mainStyle"
+      :aria-expanded="open ? 'true' : 'false'"
+      :aria-label="open ? 'Fermer les actions' : 'Ouvrir les actions'"
+      :disabled="disable"
+      @click="toggle"
+    >
+      <Icon :icon="icon" aria-hidden="true" />
+    </button>
+  </div>
+</template>

package/components/QFabAction.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// QFabAction — action individuelle du QFab (équivalent QFabAction Quasar).
+// Au clic : émet "click" et ferme le QFab parent.
+import { computed, inject } from "vue"
+import { Icon } from "@iconify/vue"
+import { qFabKey } from "./QFab.vue"
+import { colorValue, foregroundFor } from "../lib/colors"
+
+interface Props {
+  /** Libellé affiché à côté du bouton */
+  label?: string
+  /** Icône Iconify (ex. : "lucide:share") */
+  icon?: string
+  /** Couleur du bouton rond (token ou hex) */
+  color?: string
+  disable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: "",
+  disable: false,
+})
+
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+const fab = inject(qFabKey, null)
+
+const onClick = (e: MouseEvent) => {
+  if (props.disable) return
+  fab?.close()
+  emit("click", e)
+}
+
+const btnStyle = computed<Record<string, string> | undefined>(() =>
+  props.color
+    ? { backgroundColor: colorValue(props.color), color: foregroundFor(props.color) }
+    : undefined,
+)
+</script>
+
+<template>
+  <button type="button" class="q-fab__action" role="menuitem" :disabled="disable" @click="onClick">
+    <span v-if="label" class="q-fab__action-label">{{ label }}</span>
+    <span class="q-fab__action-btn" :style="btnStyle">
+      <Icon v-if="icon" :icon="icon" aria-hidden="true" />
+    </span>
+  </button>
+</template>