@dnax/ui 0.0.1

package/components/QSpinner.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+// QSpinner — indicateur de chargement : <q-spinner size="30px" color="primary" :thickness="4" type="tail" />
+// Variantes SVG (type) : tail (défaut), oval, bars, dots, grid, rings, puff, audio.
+import { computed } from "vue"
+import { colorValue } from "../lib/colors"
+
+type SpinnerType =
+  | "tail"
+  | "oval"
+  | "bars"
+  | "dots"
+  | "grid"
+  | "rings"
+  | "puff"
+  | "audio"
+  | "ios"
+  | "radio"
+  | "gear"
+  | "gears"
+  | "cube"
+
+interface Props {
+  /** Variante : tail (défaut) | oval | bars | dots | grid | rings | puff | audio | ios | radio | gear | gears | cube */
+  type?: SpinnerType
+  /** Taille (px ou chaîne CSS) — défaut 32px */
+  size?: string | number
+  /** Couleur (token ou hex) — défaut primary */
+  color?: string
+  /** Épaisseur du trait (SVG stroke-width) — défaut 4 */
+  thickness?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "tail",
+  size: 32,
+  color: "primary",
+  thickness: 4,
+})
+
+const rootStyle = computed<Record<string, string>>(() => ({
+  width: typeof props.size === "number" ? props.size + "px" : props.size,
+  height: typeof props.size === "number" ? props.size + "px" : props.size,
+  color: colorValue(props.color),
+}))
+</script>
+
+<template>
+  <span class="q-spinner" :class="`q-spinner--${type}`" :style="rootStyle" role="status" aria-label="Loading">
+    <!-- Tail : piste + arc qui tourne -->
+    <svg v-if="type === 'tail'" viewBox="0 0 44 44" class="q-spinner__svg">
+      <circle cx="22" cy="22" r="17" fill="none" stroke="currentColor" :stroke-width="thickness" opacity="0.25" />
+      <path
+        d="M22 5 a17 17 0 0 1 17 17"
+        fill="none"
+        stroke="currentColor"
+        :stroke-width="thickness"
+        stroke-linecap="round"
+        class="q-spinner__arc"
+      />
+    </svg>
+
+    <!-- Oval : cercle hachuré qui tourne -->
+    <svg v-else-if="type === 'oval'" viewBox="0 0 44 44" class="q-spinner__svg">
+      <circle
+        cx="22"
+        cy="22"
+        r="16"
+        fill="none"
+        stroke="currentColor"
+        :stroke-width="thickness"
+        stroke-linecap="round"
+        stroke-dasharray="55 120"
+        class="q-spinner__oval"
+      />
+    </svg>
+
+    <!-- Bars : 5 barres qui ondulent -->
+    <svg v-else-if="type === 'bars'" viewBox="0 0 44 44" class="q-spinner__svg q-spinner__svg--wide">
+      <rect v-for="(y, i) in [18, 12, 6, 12, 18]" :key="i" :x="2 + i * 9" :y="y" width="5" :height="44 - y * 2" rx="2.5" fill="currentColor" class="q-spinner__bar" :class="`q-spinner__bar--${i + 1}`" />
+    </svg>
+
+    <!-- Dots : 3 points qui rebondissent -->
+    <svg v-else-if="type === 'dots'" viewBox="0 0 80 24" class="q-spinner__svg q-spinner__svg--wide">
+      <circle v-for="i in 3" :key="i" :cx="10 + (i - 1) * 30" cy="12" r="6" fill="currentColor" class="q-spinner__dot" :class="`q-spinner__dot--${i}`" />
+    </svg>
+
+    <!-- Grid : 3×3 points pulsants -->
+    <svg v-else-if="type === 'grid'" viewBox="0 0 44 44" class="q-spinner__svg">
+      <circle
+        v-for="i in 9"
+        :key="i"
+        :cx="8 + ((i - 1) % 3) * 14"
+        :cy="8 + Math.floor((i - 1) / 3) * 14"
+        r="4.5"
+        fill="currentColor"
+        class="q-spinner__cell"
+        :class="`q-spinner__cell--${i}`"
+      />
+    </svg>
+
+    <!-- Rings : deux anneaux contrarotatifs -->
+    <svg v-else-if="type === 'rings'" viewBox="0 0 44 44" class="q-spinner__svg">
+      <circle cx="22" cy="22" r="17" fill="none" stroke="currentColor" :stroke-width="thickness" opacity="0.35" class="q-spinner__ring" />
+      <circle cx="22" cy="22" r="10" fill="none" stroke="currentColor" :stroke-width="thickness" stroke-linecap="round" class="q-spinner__ring q-spinner__ring--2" />
+    </svg>
+
+    <!-- Puff : point qui pulse -->
+    <svg v-else-if="type === 'puff'" viewBox="0 0 44 44" class="q-spinner__svg">
+      <circle cx="22" cy="22" r="14" fill="currentColor" class="q-spinner__puff" />
+    </svg>
+
+    <!-- Audio : égaliseur -->
+    <svg v-else-if="type === 'audio'" viewBox="0 0 28 44" class="q-spinner__svg q-spinner__svg--wide">
+      <rect v-for="(y, i) in [14, 6, 10]" :key="i" :x="2 + i * 9" :y="y" width="5" :height="44 - y * 2" rx="2.5" fill="currentColor" class="q-spinner__eq" :class="`q-spinner__eq--${i + 1}`" />
+    </svg>
+
+    <!-- Ios : 12 segments qui s'estompent en séquence -->
+    <svg v-else-if="type === 'ios'" viewBox="0 0 44 44" class="q-spinner__svg">
+      <g v-for="i in 12" :key="i" :transform="`rotate(${(i - 1) * 30} 22 22)`">
+        <line x1="22" y1="7" x2="22" y2="11" stroke="currentColor" :stroke-width="2.5" stroke-linecap="round" class="q-spinner__seg" :class="`q-spinner__seg--${i}`" />
+      </g>
+    </svg>
+
+    <!-- Radio : point + ondes qui se propagent -->
+    <svg v-else-if="type === 'radio'" viewBox="0 0 44 44" class="q-spinner__svg">
+      <circle cx="22" cy="22" r="4" fill="currentColor" class="q-spinner__radio-dot" />
+      <circle cx="22" cy="22" r="4" fill="none" stroke="currentColor" :stroke-width="2.5" class="q-spinner__radio-ring" />
+      <circle cx="22" cy="22" r="4" fill="none" stroke="currentColor" :stroke-width="2.5" class="q-spinner__radio-ring q-spinner__radio-ring--2" />
+    </svg>
+
+    <!-- Gear : un seul engrenage -->
+    <svg v-else-if="type === 'gear'" viewBox="0 0 44 44" class="q-spinner__svg">
+      <g transform="translate(22 22)">
+        <g class="q-spinner__cog">
+          <circle r="9.5" fill="none" stroke="currentColor" :stroke-width="9" />
+          <g v-for="i in 8" :key="i" :transform="`rotate(${(i - 1) * 45})`">
+            <rect x="-1.5" y="-15" width="3" height="8" rx="1.2" fill="currentColor" />
+          </g>
+        </g>
+      </g>
+    </svg>
+
+    <!-- Gears : deux engrenages contrarotatifs -->
+    <svg v-else-if="type === 'gears'" viewBox="0 0 44 44" class="q-spinner__svg">
+      <g transform="translate(15 22)">
+        <g class="q-spinner__cog">
+          <circle r="9.5" fill="none" stroke="currentColor" :stroke-width="9" />
+          <g v-for="i in 8" :key="i" :transform="`rotate(${(i - 1) * 45})`">
+            <rect x="-1.5" y="-15" width="3" height="8" rx="1.2" fill="currentColor" />
+          </g>
+        </g>
+      </g>
+      <g transform="translate(31 15) scale(0.55)">
+        <g class="q-spinner__cog q-spinner__cog--2">
+          <circle r="9.5" fill="none" stroke="currentColor" :stroke-width="9" />
+          <g v-for="i in 8" :key="i" :transform="`rotate(${(i - 1) * 45})`">
+            <rect x="-1.5" y="-15" width="3" height="8" rx="1.2" fill="currentColor" />
+          </g>
+        </g>
+      </g>
+    </svg>
+
+    <!-- Cube : cube isométrique qui tourne -->
+    <svg v-else viewBox="0 0 44 44" class="q-spinner__svg">
+      <g class="q-spinner__cube">
+        <path d="M22 4 L40 14 L22 24 L4 14 Z" fill="currentColor" opacity="0.9" />
+        <path d="M4 14 L22 24 L22 42 L4 32 Z" fill="currentColor" opacity="0.55" />
+        <path d="M40 14 L22 24 L22 42 L40 32 Z" fill="currentColor" opacity="0.3" />
+      </g>
+    </svg>
+  </span>
+</template>

package/components/QSplitter.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+// QSplitter — API Quasar : <q-splitter v-model="ratio" horizontal :limits="[20, 80]" unit="%">
+// Équivalent du Resizable shadcn-vue : panneaux flex + handle draggable (pointer) + clavier.
+import { computed, ref } from "vue"
+import { cn } from "../lib/utils"
+
+interface Props {
+  /** Ratio de division : % (0-100) ou px selon unit */
+  modelValue?: number
+  /** Division horizontale (sinon verticale) */
+  horizontal?: boolean
+  /** Limites [min, max] du panneau avant, en % (défaut [0, 50]) */
+  limits?: [number, number]
+  /** Inverse les deux panneaux */
+  reverse?: boolean
+  /** Unité de modelValue */
+  unit?: "%" | "px"
+  disable?: boolean
+  separatorClass?: string
+  separatorStyle?: string
+  beforeClass?: string
+  beforeStyle?: string
+  afterClass?: string
+  afterStyle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 50,
+  horizontal: false,
+  limits: () => [0, 50],
+  reverse: false,
+  unit: "%",
+  disable: false,
+  separatorClass: "",
+  separatorStyle: "",
+  beforeClass: "",
+  beforeStyle: "",
+  afterClass: "",
+  afterStyle: "",
+})
+
+const emit = defineEmits<{ "update:modelValue": [value: number] }>()
+
+const containerRef = ref<HTMLElement | null>(null)
+const dragging = ref(false)
+
+// — Drag du handle —
+const onPointerDown = (e: PointerEvent) => {
+  if (props.disable) return
+  dragging.value = true
+  ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+}
+
+const onPointerMove = (e: PointerEvent) => {
+  if (!dragging.value || props.disable) return
+  const rect = containerRef.value?.getBoundingClientRect()
+  if (!rect) return
+  const total = props.horizontal ? rect.height : rect.width
+  if (total <= 0) return
+  const pos = props.horizontal ? e.clientY - rect.top : e.clientX - rect.left
+  const pct = Math.max(props.limits[0], Math.min(props.limits[1], (pos / total) * 100))
+  emit("update:modelValue", props.unit === "%" ? pct : (pct / 100) * total)
+}
+
+const onPointerUp = () => {
+  dragging.value = false
+}
+
+// — Clavier sur le handle (ARIA) —
+const onKeydown = (e: KeyboardEvent) => {
+  if (props.disable) return
+  const dir =
+    props.horizontal
+      ? (e.key === "ArrowUp" ? 1 : e.key === "ArrowDown" ? -1 : 0)
+      : (e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0)
+  if (dir === 0) return
+  e.preventDefault()
+  const step = e.shiftKey ? 10 : 1
+  const current = props.modelValue ?? 50
+  const rect = containerRef.value?.getBoundingClientRect()
+  const total = rect ? (props.horizontal ? rect.height : rect.width) : 100
+  const currentPct = props.unit === "%" ? current : (current / total) * 100
+  const nextPct = Math.max(props.limits[0], Math.min(props.limits[1], currentPct + dir * step))
+  emit("update:modelValue", props.unit === "%" ? nextPct : (nextPct / 100) * total)
+}
+
+const beforeStyle = computed<Record<string, string>>(() => {
+  const v = props.modelValue ?? 50
+  return { flex: `0 0 ${v}${props.unit}` }
+})
+
+const rootClasses = computed(() =>
+  cn(
+    "q-splitter",
+    props.horizontal && "q-splitter--horizontal",
+    props.reverse && "q-splitter--reverse",
+    props.disable && "q-splitter--disabled",
+  ),
+)
+
+const separatorClasses = computed(() =>
+  cn(
+    "q-splitter__separator",
+    dragging.value && "q-splitter__separator--dragging",
+    props.separatorClass,
+  ),
+)
+</script>
+
+<template>
+  <div ref="containerRef" class="q-splitter" :class="rootClasses">
+    <div
+      class="q-splitter__before"
+      :class="beforeClass"
+      :style="[beforeStyle, props.beforeStyle]"
+    >
+      <slot name="before" />
+    </div>
+
+    <div
+      class="q-splitter__separator"
+      :class="separatorClasses"
+      :style="separatorStyle"
+      role="separator"
+      :aria-orientation="horizontal ? 'horizontal' : 'vertical'"
+      :aria-valuenow="Math.round(modelValue ?? 50)"
+      :aria-valuemin="limits[0]"
+      :aria-valuemax="limits[1]"
+      tabindex="0"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @pointercancel="onPointerUp"
+      @keydown="onKeydown"
+    >
+      <slot name="separator">
+        <span class="q-splitter__handle" />
+      </slot>
+    </div>
+
+    <div class="q-splitter__after" :class="afterClass" :style="afterStyle">
+      <slot name="after" />
+    </div>
+  </div>
+</template>

package/components/QSticky.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+// QSticky — colle du contenu au haut (ou bas) du viewport pendant le scroll :
+// <q-sticky :offset-top="16"><q-btn … /></q-sticky>.
+// Le composant garde sa place dans le flux (placeholder de même taille) et passe
+// en position:fixed quand il atteint l'offset ; avec `container`, il reste
+// à l'intérieur de ce conteneur (transform borné au bord bas/haut).
+// Events : @scroll="{ scrollTop, isFixed }" et @change="isFixed".
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue"
+
+type QStickyPosition = "top" | "bottom"
+
+interface Props {
+  /** Offset depuis le haut du viewport quand le composant est collé, en px (défaut 0) */
+  offsetTop?: number
+  /** Offset depuis le bas du viewport quand le composant est collé, en px (défaut 0) */
+  offsetBottom?: number
+  /** Position de collage : "top" | "bottom" (défaut top) */
+  position?: QStickyPosition
+  /** Conteneur optionnel : le composant reste à l'intérieur (s'arrête au bord du conteneur) */
+  container?: Element | null
+  /** z-index quand collé (défaut 99) */
+  zIndex?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  offsetTop: 0,
+  offsetBottom: 0,
+  position: "top",
+  container: null,
+  zIndex: 99,
+})
+
+const emit = defineEmits<{
+  scroll: [payload: { scrollTop: number; isFixed: boolean }]
+  change: [isFixed: boolean]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+
+const state = reactive({
+  fixed: false,
+  width: 0, // largeur mesurée
+  height: 0, // hauteur mesurée
+  transform: 0, // correction pour rester dans le conteneur
+})
+const isReset = ref(false)
+
+const offset = computed(() =>
+  props.position === "top" ? props.offsetTop : props.offsetBottom,
+)
+
+const isHidden = () => !root.value || root.value.offsetParent === null
+
+/** Conteneur de scroll réel le plus proche (overflow scrollable), sinon window */
+const findScrollParent = (el: HTMLElement | null): HTMLElement | Window => {
+  let node = el?.parentElement ?? null
+  while (node) {
+    const overflowY = getComputedStyle(node).overflowY
+    if (
+      /(auto|scroll|overlay)/.test(overflowY) &&
+      node.scrollHeight > node.clientHeight
+    ) {
+      return node
+    }
+    node = node.parentElement
+  }
+  return window
+}
+
+let scrollParent: HTMLElement | Window = window
+
+const scrollTop = () =>
+  scrollParent === window
+    ? window.scrollY || document.documentElement.scrollTop
+    : (scrollParent as HTMLElement).scrollTop
+
+const onScroll = () => {
+  if (!root.value || isHidden()) return
+
+  const { container, position } = props
+  const rootRect = root.value.getBoundingClientRect()
+
+  state.width = rootRect.width
+  state.height = rootRect.height
+
+  if (position === "top") {
+    if (container) {
+      const containerRect = container.getBoundingClientRect()
+      const difference = containerRect.bottom - offset.value - state.height
+      state.fixed = offset.value > rootRect.top && containerRect.bottom > 0
+      state.transform = difference < 0 ? difference : 0
+    } else {
+      state.fixed = offset.value > rootRect.top
+    }
+  } else {
+    const clientHeight = document.documentElement.clientHeight
+    if (container) {
+      const containerRect = container.getBoundingClientRect()
+      const difference =
+        clientHeight - containerRect.top - offset.value - state.height
+      state.fixed =
+        clientHeight - offset.value < rootRect.bottom &&
+        clientHeight > containerRect.top
+      state.transform = difference < 0 ? -difference : 0
+    } else {
+      state.fixed = clientHeight - offset.value < rootRect.bottom
+    }
+  }
+
+  emit("scroll", { scrollTop: scrollTop(), isFixed: state.fixed })
+}
+
+watch(
+  () => state.fixed,
+  (value) => emit("change", value),
+)
+
+/** Re-mesure après un resize quand le composant est collé */
+const onResize = () => {
+  if (!root.value || isHidden() || !state.fixed) return
+  isReset.value = true
+  nextTick(() => {
+    if (!root.value) return
+    const r = root.value.getBoundingClientRect()
+    state.width = r.width
+    state.height = r.height
+    isReset.value = false
+  })
+}
+
+onMounted(() => {
+  if (root.value) {
+    scrollParent = findScrollParent(root.value)
+    scrollParent.addEventListener("scroll", onScroll, { passive: true })
+    window.addEventListener("resize", onResize)
+    onScroll()
+  }
+})
+
+onBeforeUnmount(() => {
+  scrollParent.removeEventListener("scroll", onScroll)
+  window.removeEventListener("resize", onResize)
+})
+
+// Placeholder : conserve la place du contenu dans le flux quand il est collé
+const rootStyle = computed(() => {
+  if (isReset.value || !state.fixed) return undefined
+  return { width: `${state.width}px`, height: `${state.height}px` }
+})
+
+const stickyStyle = computed(() => {
+  if (!state.fixed || isReset.value) return undefined
+  const style: Record<string, string> = {
+    width: `${state.width}px`,
+    height: `${state.height}px`,
+    [props.position]: `${offset.value}px`,
+    "--q-sticky-z-index": String(props.zIndex),
+  }
+  if (state.transform) style.transform = `translate3d(0, ${state.transform}px, 0)`
+  return style
+})
+</script>
+
+<template>
+  <div ref="root" class="q-sticky" :style="rootStyle">
+    <div
+      class="q-sticky__content"
+      :class="{ 'q-sticky__content--fixed': state.fixed && !isReset }"
+      :style="stickyStyle"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.q-sticky__content--fixed {
+  position: fixed;
+  z-index: var(--q-sticky-z-index, 99);
+}
+</style>