@dnax/ui 0.0.1

package/components/QSwipeCell.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+// QSwipeCell — cellule que l'on glisse horizontalement pour révéler des actions
+// (API Vant SwipeCell) : <q-swipe-cell :right-width="160"><template #right>…</template>…</q-swipe-cell>.
+// Drag vers la gauche → panneau droit, vers la droite → panneau gauche (snap à la moitié).
+// Props : left-width, right-width, disabled, name, before-close.
+// Events : open / close / click ({ name, position }). Méthodes : open, close.
+import { onBeforeUnmount, ref, watch } from "vue"
+
+type SwipePosition = "left" | "right"
+
+interface Props {
+  /** Largeur du panneau d'actions de gauche, en px (0 = aucun) */
+  leftWidth?: number
+  /** Largeur du panneau d'actions de droite, en px (0 = aucun) */
+  rightWidth?: number
+  /** Désactive le glissement */
+  disabled?: boolean
+  /** Bloque le glissement quand les actions sont affichées (on ferme par clic) */
+  lockOnOpen?: boolean
+  /** Identifiant (retourné dans les events, pour la coordination) */
+  name?: string | number
+  /** Hook avant fermeture : retourner false (ou Promise false) garde la cellule ouverte */
+  beforeClose?: (args: { name?: string | number; position: SwipePosition | "" }) => boolean | Promise<boolean>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  leftWidth: 0,
+  rightWidth: 0,
+  disabled: false,
+  lockOnOpen: false,
+  name: "",
+  beforeClose: undefined,
+})
+
+const emit = defineEmits<{
+  open: [payload: { name?: string | number; position: SwipePosition }]
+  close: [payload: { name?: string | number; position: SwipePosition }]
+  click: [payload: { name?: string | number; position: SwipePosition | "" }]
+}>()
+
+const rootEl = ref<HTMLElement | null>(null)
+const wrapperEl = ref<HTMLElement | null>(null)
+
+const offset = ref(0)
+const opened = ref<SwipePosition | "">("")
+let dragging = false
+let moved = false
+let startX = 0
+let startOffset = 0
+
+const maxLeft = () => props.leftWidth || 0
+const maxRight = () => props.rightWidth || 0
+
+/** Applique la translation au wrapper (avec transition) */
+const applyOffset = (v: number, transition = true) => {
+  offset.value = v
+  const el = wrapperEl.value
+  if (!el) return
+  if (transition) el.style.transition = "transform 0.3s ease"
+  el.style.transform = `translateX(${v}px)`
+  if (transition) {
+    setTimeout(() => el.style.removeProperty("transition"), 320)
+  }
+  const position: SwipePosition | "" = v < 0 ? "right" : v > 0 ? "left" : ""
+  if (position !== opened.value) {
+    const from = opened.value
+    opened.value = position
+    if (from) emit("close", { name: props.name, position: from })
+    if (position) emit("open", { name: props.name, position })
+  }
+}
+
+const onPointerDown = (e: PointerEvent) => {
+  if (props.disabled) return
+  // lock-on-open : quand les actions sont affichées, le glissement est bloqué
+  if (props.lockOnOpen && opened.value) return
+  dragging = true
+  moved = false
+  startX = e.clientX
+  startOffset = offset.value
+  ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  if (wrapperEl.value) wrapperEl.value.style.removeProperty("transition")
+}
+
+const onPointerMove = (e: PointerEvent) => {
+  if (!dragging) return
+  const dx = e.clientX - startX
+  if (!moved && Math.abs(dx) > 4) moved = true
+  if (!moved) return
+  const next = Math.min(maxLeft(), Math.max(-maxRight(), startOffset + dx))
+  offset.value = next // <— indispensable : le snap (pointerup) se base dessus
+  if (wrapperEl.value) wrapperEl.value.style.transform = `translateX(${next}px)`
+}
+
+const onPointerUp = () => {
+  if (!dragging) return
+  dragging = false
+  if (moved) {
+    // snap : ouvre le côté si on a dépassé la moitié, sinon revient
+    const target =
+      offset.value <= -maxRight() / 2
+        ? -maxRight()
+        : offset.value >= maxLeft() / 2
+          ? maxLeft()
+          : 0
+    applyOffset(target)
+  }
+}
+
+const close = async () => {
+  if (offset.value === 0) return
+  if (props.beforeClose) {
+    const ok = await props.beforeClose({ name: props.name, position: opened.value })
+    if (ok === false) return
+  }
+  applyOffset(0)
+}
+
+/** Fermeture forcée, sans passer par before-close (clic sur la cellule) */
+const forceClose = () => applyOffset(0)
+
+const open = (position: SwipePosition) => {
+  const w = position === "left" ? maxLeft() : maxRight()
+  if (!w) return
+  applyOffset(position === "left" ? w : -w)
+}
+
+const onClickCell = () => {
+  if (opened.value) {
+    // Le clic sur la cellule referme TOUJOURS (before-close ne s'applique qu'aux actions)
+    forceClose()
+  } else {
+    emit("click", { name: props.name, position: "" })
+  }
+}
+
+const onClickAction = (position: SwipePosition) => {
+  emit("click", { name: props.name, position })
+  close()
+}
+
+defineExpose({ open, close })
+
+// — Clic extérieur : referme la cellule ouverte (clic en dehors des actions) —
+const onDocPointerDown = (e: PointerEvent) => {
+  if (!opened.value) return
+  if (rootEl.value && !rootEl.value.contains(e.target as Node)) {
+    forceClose()
+  }
+}
+
+watch(opened, (v) => {
+  if (v) document.addEventListener("pointerdown", onDocPointerDown)
+  else document.removeEventListener("pointerdown", onDocPointerDown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener("pointerdown", onDocPointerDown)
+  if (wrapperEl.value) wrapperEl.value.style.removeProperty("transition")
+})
+</script>
+
+<template>
+  <div ref="rootEl" class="q-swipe-cell">
+    <div class="q-swipe-cell__left" :style="{ width: `${leftWidth}px` }" @click="onClickAction('left')">
+      <slot name="left" />
+    </div>
+    <div class="q-swipe-cell__right" :style="{ width: `${rightWidth}px` }" @click="onClickAction('right')">
+      <slot name="right" />
+    </div>
+    <div
+      ref="wrapperEl"
+      class="q-swipe-cell__wrapper"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @pointercancel="onPointerUp"
+      @click="onClickCell"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.q-swipe-cell {
+  position: relative;
+  overflow: hidden;
+}
+
+/* panneaux d'actions : à leur place DANS le conteneur, derrière le wrapper
+   (qui les couvre) — le glissement du wrapper les révèle */
+.q-swipe-cell__left,
+.q-swipe-cell__right {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: stretch;
+  z-index: 0;
+}
+.q-swipe-cell__left {
+  left: 0;
+}
+.q-swipe-cell__right {
+  right: 0;
+}
+
+/* contenu de la cellule : glisse horizontalement AU-DESSUS des panneaux */
+.q-swipe-cell__wrapper {
+  position: relative;
+  z-index: 1;
+  transition: transform 0.3s ease;
+  touch-action: pan-y; /* scroll vertical OK, glissement horizontal capté */
+  cursor: grab;
+}
+</style>

package/components/QSwiper.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+// QSwiper — carrousel type Swiper (API swiperjs/vue) :
+// <q-swiper :slides-per-view="2" :space-between="16" loop navigation :autoplay="{ delay: 2000 }" effect="fade">
+// Wrapper autour de swiper/vue : TOUS les paramètres Swiper passent en props/attrs
+// (slides-per-view, space-between, loop, centered-slides, navigation, pagination,
+// autoplay, effect, virtual, thumbs…), les événements via @slide-change, @swiper…
+// Tous les modules courants sont pré-enregistrés — remplaçables via :modules.
+import { Swiper } from "swiper/vue"
+import {
+  A11y,
+  Autoplay,
+  Controller,
+  EffectCards,
+  EffectCoverflow,
+  EffectCreative,
+  EffectCube,
+  EffectFade,
+  EffectFlip,
+  FreeMode,
+  Grid,
+  HashNavigation,
+  History,
+  Keyboard,
+  Manipulation,
+  Mousewheel,
+  Navigation,
+  Pagination,
+  Parallax,
+  Scrollbar,
+  Thumbs,
+  Virtual,
+  Zoom,
+} from "swiper/modules"
+
+// Styles Swiper (core + modules)
+import "swiper/css"
+import "swiper/css/a11y"
+import "swiper/css/autoplay"
+import "swiper/css/controller"
+import "swiper/css/effect-cards"
+import "swiper/css/effect-coverflow"
+import "swiper/css/effect-creative"
+import "swiper/css/effect-cube"
+import "swiper/css/effect-fade"
+import "swiper/css/effect-flip"
+import "swiper/css/free-mode"
+import "swiper/css/grid"
+import "swiper/css/hash-navigation"
+import "swiper/css/history"
+import "swiper/css/keyboard"
+import "swiper/css/manipulation"
+import "swiper/css/mousewheel"
+import "swiper/css/navigation"
+import "swiper/css/pagination"
+import "swiper/css/parallax"
+import "swiper/css/scrollbar"
+import "swiper/css/thumbs"
+import "swiper/css/virtual"
+import "swiper/css/zoom"
+
+interface Props {
+  /** Modules Swiper — défaut : tous les modules courants (navigation, pagination,
+   * autoplay, effets, virtual, thumbs…). Passez un tableau custom pour réduire le bundle. */
+  modules?: unknown[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modules: () => [
+    A11y,
+    Autoplay,
+    Controller,
+    EffectCards,
+    EffectCoverflow,
+    EffectCreative,
+    EffectCube,
+    EffectFade,
+    EffectFlip,
+    FreeMode,
+    Grid,
+    HashNavigation,
+    History,
+    Keyboard,
+    Manipulation,
+    Mousewheel,
+    Navigation,
+    Pagination,
+    Parallax,
+    Scrollbar,
+    Thumbs,
+    Virtual,
+    Zoom,
+  ],
+})
+</script>
+
+<template>
+  <div class="q-swiper">
+    <Swiper v-bind="$attrs" :modules="modules">
+      <slot />
+    </Swiper>
+  </div>
+</template>

package/components/QSwiperSlide.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// QSwiperSlide — slide de QSwiper (wrapper de SwiperSlide) :
+// <q-swiper-slide v-for="(s, i) in slides" :key="i" :virtual-index="i">
+// Reçoit les props de SwiperSlide (tag, zoom, virtualIndex) + swiperRef/swiperSlideIndex
+// injectés automatiquement par le Swiper parent. Le slot expose isActive/isVisible/isPrev/isNext.
+import { SwiperSlide } from "swiper/vue"
+
+// swiper/vue identifie les slides par type.name === "SwiperSlide" — le wrapper
+// doit conserver ce nom pour que le parent les récupère.
+defineOptions({ name: "SwiperSlide" })
+</script>
+
+<template>
+  <SwiperSlide v-bind="$attrs">
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </SwiperSlide>
+</template>

package/components/QSyntax.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+// QSyntax — bloc de code avec coloration syntaxique Shiki (https://shiki.style).
+// <q-syntax code="const a = 1" lang="ts" theme="github-dark" filename="app.ts" copy />
+// code peut venir de la prop `code` ou du slot par défaut.
+// Rendu côté client : le code brut s'affiche en fallback, puis est surligné.
+import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue"
+import { createHighlighter, type Highlighter } from "shiki"
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript"
+import { Icon } from "@iconify/vue"
+import { icons } from "../lib/icons"
+import { radiusStyle, useRadius } from "../lib/useComponentProps"
+import type { RadiusProp } from "../lib/useComponentProps"
+
+const DEFAULT_THEME = "github-dark-default"
+
+// Langages chargés par défaut (grammaires chargées à la demande par Shiki).
+// Les autres langages sont chargés via loadLanguage ; repli sur "text" si inconnu.
+const DEFAULT_LANGS = [
+  "vue", "ts", "js", "tsx", "jsx", "html", "css", "scss", "json", "jsonc",
+  "bash", "markdown", "yaml", "python", "go", "rust", "sql",
+]
+
+interface Props {
+  /** Code à afficher (sinon contenu du slot par défaut) */
+  code?: string
+  /** Langage Shiki : vue, ts, js, html, css, json, bash, markdown, yaml… */
+  lang?: string
+  /** Thème Shiki (défaut : github-dark-default) */
+  theme?: string
+  /** Nom de fichier affiché dans la barre de titre */
+  filename?: string
+  /** Bouton copier */
+  copy?: boolean
+  /** Coins arrondis : true = md, ou échelle xs|sm|md|lg (none = carré) — défaut : composantProps */
+  radius?: RadiusProp
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lang: "text",
+  theme: DEFAULT_THEME,
+  filename: "",
+  copy: false,
+})
+
+// radius : prop explicite > composantProps.QSyntax.radius > composantProps.default.radius
+const effectiveRadius = useRadius("QSyntax", () => props.radius)
+const roundedStyle = computed(() => radiusStyle(effectiveRadius.value))
+
+const slots = useSlots()
+
+// Texte du slot par défaut (si pas de prop code)
+const slotCode = computed(() => {
+  const extract = (children: unknown): string => {
+    if (typeof children === "string") return children
+    if (Array.isArray(children)) return children.map(extract).join("")
+    if (children && typeof children === "object" && "children" in children) {
+      return extract((children as { children: unknown }).children)
+    }
+    return ""
+  }
+  return (slots.default?.() ?? []).map((v) => extract(v.children)).join("")
+})
+
+const source = computed(() => props.code ?? slotCode.value)
+
+// Highlighter singleton : une seule instance pour toute l'application
+let highlighterPromise: Promise<Highlighter> | null = null
+const getHighlighter = () => {
+  highlighterPromise ??= createHighlighter({
+    themes: [DEFAULT_THEME],
+    langs: DEFAULT_LANGS,
+    engine: createJavaScriptRegexEngine(),
+  })
+  return highlighterPromise
+}
+
+const html = ref("")
+const highlighted = ref(false)
+const error = ref(false)
+
+const highlight = async () => {
+  const code = source.value
+  if (!code) {
+    html.value = ""
+    highlighted.value = false
+    return
+  }
+  try {
+    const highlighter = await getHighlighter()
+
+    // Thème custom chargé à la demande
+    let theme = props.theme
+    if (theme !== DEFAULT_THEME) {
+      try {
+        await highlighter.loadTheme(theme as never)
+      } catch {
+        theme = DEFAULT_THEME
+      }
+    }
+
+    // Langage custom chargé à la demande ; repli sur "text"
+    let lang = props.lang
+    if (lang !== "text" && !highlighter.getLoadedLanguages().includes(lang)) {
+      try {
+        await highlighter.loadLanguage(lang as never)
+      } catch {
+        lang = "text"
+      }
+    }
+
+    try {
+      html.value = highlighter.codeToHtml(code, { lang, theme })
+    } catch {
+      html.value = highlighter.codeToHtml(code, { lang, theme: DEFAULT_THEME })
+    }
+    highlighted.value = true
+    error.value = false
+  }
+  catch (e) {
+    console.error("[QSyntax]", e)
+    error.value = true
+  }
+}
+
+watch(() => [source.value, props.lang, props.theme], () => {
+  highlighted.value = false
+  highlight()
+})
+onMounted(highlight)
+
+// — Copier —
+const copied = ref(false)
+let copyTimer: ReturnType<typeof setTimeout> | undefined
+const onCopy = async () => {
+  try {
+    await navigator.clipboard.writeText(source.value)
+    copied.value = true
+    clearTimeout(copyTimer)
+    copyTimer = setTimeout(() => (copied.value = false), 1600)
+  }
+  catch {
+    /* presse-papiers indisponible */
+  }
+}
+onBeforeUnmount(() => clearTimeout(copyTimer))
+</script>
+
+<template>
+  <div class="q-syntax" :class="{ 'q-syntax--error': error }" :style="roundedStyle">
+    <div v-if="filename || copy" class="q-syntax__bar">
+      <span v-if="filename" class="q-syntax__filename">
+        <Icon :icon="icons.fileCode" aria-hidden="true" />
+        {{ filename }}
+      </span>
+      <button
+        v-if="copy"
+        type="button"
+        class="q-syntax__copy"
+        :class="{ 'q-syntax__copy--done': copied }"
+        :aria-label="copied ? 'Copied' : 'Copy code'"
+        @click="onCopy"
+      >
+        <Icon :icon="copied ? icons.check : icons.copy" aria-hidden="true" />
+        {{ copied ? "Copied" : "Copy" }}
+      </button>
+    </div>
+
+    <div v-if="highlighted" class="q-syntax__body" v-html="html" />
+    <pre v-else class="q-syntax__plain"><code>{{ source }}</code></pre>
+  </div>
+</template>

package/components/QTab.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+// QTab — API Quasar (source officielle) :
+// <q-tab name="a" icon="…" label="Accueil" alert="negative" alert-icon="…" no-caps />
+// alert : true = point de notification ; string = couleur du point (token ou hex).
+// name : auto-généré (t_1, t_2…) si absent, comme chez Quasar.
+import { computed, inject, onBeforeUnmount, onMounted, ref } from "vue"
+import { Icon } from "@iconify/vue"
+import { cn } from "../lib/utils"
+import { qTabsKey } from "./QTabs.vue"
+
+const TOKEN_COLORS = ["primary", "secondary", "accent", "dark", "positive", "negative", "info", "warning"] as const
+
+/** Token → var(--token), sinon valeur directe (hex, rgb(), nom CSS) */
+const colorValue = (c: string) =>
+  (TOKEN_COLORS as readonly string[]).includes(c) ? `var(--${c})` : c
+
+let tabSeq = 0
+
+interface Props {
+  /** Identifiant du tab (comparé au v-model du QTabs) */
+  name?: string | number
+  /** Icône Iconify (ex. : "lucide:home") */
+  icon?: string
+  /** Texte ou nombre */
+  label?: string | number
+  /** true = point de notification ; string = couleur du point */
+  alert?: boolean | string
+  /** Icône Iconify remplaçant le point de notification */
+  alertIcon?: string
+  /** Nombre de notifications — badge numérique (masqué si 0 ou absent) */
+  count?: number
+  /** Couleur du badge count — token ou hex (défaut : couleur de alert, sinon negative) */
+  countColor?: string
+  /** Seuil d'affichage : au-delà, « max+ » (défaut : 99) */
+  countMax?: number
+  /** Pas de mise en majuscules */
+  noCaps?: boolean
+  tabindex?: string | number
+  /** Désactive le tab */
+  disable?: boolean
+  /** Classe du contenu interne */
+  contentClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alert: false,
+  noCaps: false,
+  disable: false,
+  countMax: 99,
+})
+
+const emit = defineEmits<{ click: [event: MouseEvent]; keydown: [event: KeyboardEvent] }>()
+
+const tabs = inject(qTabsKey, null)
+
+const resolvedName = props.name ?? `t_${tabSeq++}`
+
+const el = ref<HTMLElement | null>(null)
+
+onMounted(() => tabs?.register({ name: resolvedName, el }))
+onBeforeUnmount(() => tabs?.unregister(resolvedName))
+
+const isActive = computed(() => tabs?.activeName.value === resolvedName)
+
+// Roving tabindex (WAI-ARIA) : seul le tab actif est dans le tab order
+const tabIndex = computed(() =>
+  props.disable ? -1 : (props.tabindex ?? (isActive.value ? 0 : -1)),
+)
+
+const alertColor = computed(() => (typeof props.alert === "string" ? props.alert : undefined))
+const alertStyle = computed<Record<string, string>>((): Record<string, string> =>
+  alertColor.value ? { backgroundColor: colorValue(alertColor.value) } : {},
+)
+const alertIconStyle = computed<Record<string, string>>((): Record<string, string> =>
+  alertColor.value ? { color: colorValue(alertColor.value) } : {},
+)
+
+// Badge numérique (notifications non lues…)
+const hasCount = computed(() => typeof props.count === "number" && props.count > 0)
+const countDisplay = computed(() => {
+  if (!hasCount.value) return ""
+  return props.count! > props.countMax ? props.countMax + "+" : String(props.count)
+})
+const countColor = computed(() =>
+  props.countColor ?? (typeof props.alert === "string" ? props.alert : "negative"),
+)
+const countStyle = computed<Record<string, string>>(() => ({
+  backgroundColor: colorValue(countColor.value),
+}))
+
+const tabClasses = computed(() =>
+  cn(
+    "q-tab",
+    isActive.value && "q-tab--active",
+    isActive.value && tabs?.activeClass.value,
+    (props.noCaps || tabs?.noCaps.value) && "q-tab--no-caps",
+    props.disable && "q-tab--disabled",
+    tabs?.inlineLabel.value && "q-tab--inline-label",
+  ),
+)
+
+const activate = () => {
+  if (!props.disable) tabs?.setActive(resolvedName)
+}
+
+const onClick = (e: MouseEvent) => {
+  activate()
+  emit("click", e)
+}
+
+// Clavier (WAI-ARIA) : Entrée/Espace active, flèches/Home/End déplacent le focus
+const onKeydown = (e: KeyboardEvent) => {
+  emit("keydown", e)
+  if (e.defaultPrevented || props.disable) return
+
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault()
+    activate()
+    return
+  }
+
+  const root = el.value?.parentElement
+  if (!root) return
+  const list = Array.from(root.querySelectorAll(".q-tab")) as HTMLElement[]
+  const index = list.indexOf(el.value as HTMLElement)
+  let target: HTMLElement | undefined
+  if (e.key === "ArrowRight") target = list[(index + 1) % list.length]
+  else if (e.key === "ArrowLeft") target = list[(index - 1 + list.length) % list.length]
+  else if (e.key === "Home") target = list[0]
+  else if (e.key === "End") target = list[list.length - 1]
+  if (target) {
+    e.preventDefault()
+    target.focus()
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="el"
+    role="tab"
+    :aria-selected="isActive ? 'true' : 'false'"
+    :aria-disabled="disable || undefined"
+    :tabindex="tabIndex"
+    class="q-tab"
+    :class="tabClasses"
+    @click="onClick"
+    @keydown="onKeydown"
+  >
+    <div class="q-tab__content" :class="contentClass">
+      <Icon :icon="icon" v-if="icon" class="q-tab__icon" aria-hidden="true" />
+      <span v-if="label !== undefined" class="q-tab__label">{{ label }}</span>
+      <slot v-else />
+      <span
+        v-if="alert && !alertIcon && !hasCount"
+        class="q-tab__alert"
+        :style="alertStyle"
+        aria-label="Notification"
+      />
+      <span
+        v-if="hasCount && !alertIcon"
+        class="q-tab__count"
+        :style="countStyle"
+        :aria-label="countDisplay + ' notifications'"
+      >{{ countDisplay }}</span>
+      <Icon
+        :icon="alertIcon"
+        v-if="alertIcon"
+        class="q-tab__alert-icon"
+        :style="alertIconStyle"
+        aria-hidden="true"
+      />
+    </div>
+  </div>
+</template>