@tekkare/romulus 0.1.207 → 0.1.209

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.206",
+  "version": "0.1.208",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/DashboardGrid.vue

@@ -0,0 +1,330 @@
+<!--
+  RmDashboardGrid - une grille de tuiles que l'on deplace et redimensionne,
+  a la maniere des tableaux de bord PostHog ou Grafana.
+
+  La grille ne sait rien du contenu : elle place des cellules (`layout`) et
+  rend chaque tuile par le slot `#item`. Le calcul (chevauchements, tassement
+  vers le haut) vit dans utils/dashboardGrid, pur et teste a part ; ce
+  composant ne fait que traduire pixels et cellules.
+
+  Pendant un geste, la grille montre le resultat sans l'emettre : la tuile
+  tenue suit le pointeur, une empreinte montre ou elle tombera, les autres
+  s'ecartent. `update:layout` ne part qu'au lacher, une fois : l'app enregistre
+  un geste, pas chaque pixel.
+
+  On saisit une tuile par sa poignee, ou par toute zone que l'app marque de
+  `data-rm-dash-drag` (l'en-tete d'une carte, par exemple). Un bouton, un lien
+  ou un champ dans cette zone restent cliquables : un appui ne devient un
+  deplacement qu'au-dela de quelques pixels.
+
+  Clavier : la poignee est un bouton. Les fleches deplacent la tuile d'une
+  cellule, Maj + fleches la redimensionnent, et la nouvelle place est lue
+  (region `aria-live`). Sans ca, la disposition serait reservee a la souris.
+
+  En dessous de `stackBelow` pixels de large, les tuiles s'empilent en une
+  colonne dans l'ordre de lecture (haut puis gauche) et l'edition se coupe :
+  deplacer une tuile sur une colonne de telephone n'a pas de sens.
+-->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { rmGridCompact, rmGridMove, type RmGridItem } from '../utils/dashboardGrid'
+
+const props = withDefaults(defineProps<{
+  /** Les tuiles et leurs cellules. Seules les cles de RmGridItem sont lues. */
+  layout: RmGridItem[]
+  /** Mode edition : poignees, deplacement, redimensionnement. */
+  editable?: boolean
+  cols?: number
+  /** Hauteur d'une ligne de grille, en pixels. */
+  rowHeight?: number
+  /** Ecart entre deux tuiles, en pixels. */
+  gap?: number
+  /** Largeur en dessous de laquelle les tuiles s'empilent. */
+  stackBelow?: number
+  /** Libelle d'une tuile pour la poignee et l'annonce : son titre, en general. */
+  itemLabel?: (id: string) => string
+  lang?: 'fr' | 'en'
+}>(), {
+  editable: false,
+  cols: 12,
+  rowHeight: 80,
+  gap: 16,
+  stackBelow: 640,
+  itemLabel: undefined,
+  lang: 'fr',
+})
+
+const emit = defineEmits<{
+  'update:layout': [layout: RmGridItem[]]
+}>()
+
+defineSlots<{
+  item(props: { item: RmGridItem; editing: boolean }): unknown
+}>()
+
+const T = computed(() => props.lang === 'en'
+  ? {
+      grip: (name: string) => `Move ${name}. Arrow keys move, Shift and arrow keys resize.`,
+      resize: 'Resize',
+      at: (i: RmGridItem) => `Column ${i.x + 1}, row ${i.y + 1}, ${i.w} wide, ${i.h} high`,
+    }
+  : {
+      grip: (name: string) => `Déplacer ${name}. Les flèches déplacent, Maj et flèches redimensionnent.`,
+      resize: 'Redimensionner',
+      at: (i: RmGridItem) => `Colonne ${i.x + 1}, ligne ${i.y + 1}, largeur ${i.w}, hauteur ${i.h}`,
+    })
+
+const root = ref<HTMLElement>()
+const width = ref(0)
+let observer: ResizeObserver | undefined
+
+onMounted(() => {
+  if (!root.value) return
+  width.value = root.value.clientWidth
+  observer = new ResizeObserver(([entry]) => { width.value = entry!.contentRect.width })
+  observer.observe(root.value)
+})
+
+const stacked = computed(() => width.value > 0 && width.value < props.stackBelow)
+const editing = computed(() => props.editable && !stacked.value)
+const colWidth = computed(() => (width.value - props.gap * (props.cols - 1)) / props.cols)
+const stepX = computed(() => colWidth.value + props.gap)
+const stepY = computed(() => props.rowHeight + props.gap)
+
+const base = computed(() => rmGridCompact(props.layout.map(pick), props.cols))
+
+function pick(item: RmGridItem): RmGridItem {
+  const { id, x, y, w, h, minW, minH } = item
+  return { id, x, y, w, h, minW, minH }
+}
+
+// --- Geste en cours ------------------------------------------------------
+
+interface Gesture {
+  id: string
+  mode: 'move' | 'resize'
+  startX: number
+  startY: number
+  origin: RmGridItem
+  /** Decalage du pointeur, en pixels. */
+  dx: number
+  dy: number
+  started: boolean
+  pointerId: number
+}
+
+const gesture = ref<Gesture | null>(null)
+
+/** La cellule visee par le geste. */
+const target = computed(() => {
+  const g = gesture.value
+  if (!g?.started) return null
+  const o = g.origin
+  if (g.mode === 'move') {
+    return { x: Math.round(o.x + g.dx / stepX.value), y: Math.max(0, Math.round(o.y + g.dy / stepY.value)) }
+  }
+  return {
+    w: Math.max(1, Math.round(o.w + g.dx / stepX.value)),
+    h: Math.max(1, Math.round(o.h + g.dy / stepY.value)),
+  }
+})
+
+const preview = computed(() =>
+  target.value && gesture.value ? rmGridMove(base.value, props.cols, gesture.value.id, target.value) : base.value,
+)
+
+const shown = computed(() =>
+  stacked.value ? [...preview.value].sort((a, b) => a.y - b.y || a.x - b.x) : preview.value,
+)
+
+const height = computed(() => {
+  const rows = preview.value.reduce((bottom, item) => Math.max(bottom, item.y + item.h), 0)
+  return rows ? rows * stepY.value - props.gap : 0
+})
+
+function rect(item: RmGridItem) {
+  return {
+    left: item.x * stepX.value,
+    top: item.y * stepY.value,
+    width: item.w * stepX.value - props.gap,
+    height: item.h * stepY.value - props.gap,
+  }
+}
+
+function px(box: { left: number; top: number; width: number; height: number }) {
+  return {
+    transform: `translate(${box.left}px, ${box.top}px)`,
+    width: `${box.width}px`,
+    height: `${box.height}px`,
+  }
+}
+
+function itemStyle(item: RmGridItem) {
+  // Empilees, les tuiles gardent leur hauteur au minimum mais suivent leur contenu.
+  if (stacked.value) return { minHeight: `${item.h * stepY.value - props.gap}px` }
+  const g = gesture.value
+  if (g?.started && g.id === item.id) {
+    // La tuile tenue suit le pointeur, depuis sa place d'origine.
+    const box = rect(g.origin)
+    if (g.mode === 'move') return px({ ...box, left: box.left + g.dx, top: box.top + g.dy })
+    return px({ ...box, width: Math.max(colWidth.value, box.width + g.dx), height: Math.max(props.rowHeight, box.height + g.dy) })
+  }
+  return px(rect(item))
+}
+
+const placeholder = computed(() => {
+  const g = gesture.value
+  if (!g?.started) return null
+  const item = preview.value.find((i) => i.id === g.id)
+  return item ? px(rect(item)) : null
+})
+
+/** Ce qui reste cliquable meme dans une zone de saisie. */
+const INTERACTIVE = 'a, input, select, textarea, [contenteditable], [data-rm-dash-nodrag], button:not(.rm-dash__grip)'
+const THRESHOLD = 4
+
+function onPointerDown(event: PointerEvent, item: RmGridItem, mode: 'move' | 'resize') {
+  if (!editing.value || event.button !== 0) return
+  const el = event.target as HTMLElement
+  if (mode === 'move') {
+    if (!el.closest('.rm-dash__grip, [data-rm-dash-drag]')) return
+    if (el.closest(INTERACTIVE)) return
+  }
+  gesture.value = {
+    id: item.id,
+    mode,
+    startX: event.clientX,
+    startY: event.clientY,
+    origin: { ...item },
+    dx: 0,
+    dy: 0,
+    started: mode === 'resize',
+    pointerId: event.pointerId,
+  }
+  window.addEventListener('pointermove', onPointerMove)
+  window.addEventListener('pointerup', onPointerUp)
+  window.addEventListener('pointercancel', cancel)
+  window.addEventListener('keydown', onEscape)
+  if (mode === 'resize') event.preventDefault()
+}
+
+function onPointerMove(event: PointerEvent) {
+  const g = gesture.value
+  if (!g || event.pointerId !== g.pointerId) return
+  g.dx = event.clientX - g.startX
+  g.dy = event.clientY - g.startY
+  if (!g.started && Math.hypot(g.dx, g.dy) > THRESHOLD) {
+    g.started = true
+    // Plus de selection de texte pendant que l'on tient la tuile.
+    window.getSelection()?.removeAllRanges()
+  }
+  if (g.started) event.preventDefault()
+}
+
+function onPointerUp() {
+  const g = gesture.value
+  const result = g?.started && target.value ? preview.value : null
+  stop()
+  if (g && result) commit(result, g.id)
+}
+
+function onEscape(event: KeyboardEvent) {
+  if (event.key === 'Escape') cancel()
+}
+
+function cancel() {
+  stop()
+}
+
+function stop() {
+  gesture.value = null
+  window.removeEventListener('pointermove', onPointerMove)
+  window.removeEventListener('pointerup', onPointerUp)
+  window.removeEventListener('pointercancel', cancel)
+  window.removeEventListener('keydown', onEscape)
+}
+
+onBeforeUnmount(() => {
+  stop()
+  observer?.disconnect()
+})
+
+// --- Clavier ---------------------------------------------------------------
+
+const announce = ref('')
+
+const KEYS: Record<string, [number, number]> = {
+  ArrowLeft: [-1, 0],
+  ArrowRight: [1, 0],
+  ArrowUp: [0, -1],
+  ArrowDown: [0, 1],
+}
+
+function onKey(event: KeyboardEvent, item: RmGridItem) {
+  const step = KEYS[event.key]
+  if (!step) return
+  event.preventDefault()
+  const [dx, dy] = step
+  const patch = event.shiftKey
+    ? { w: Math.max(1, item.w + dx), h: Math.max(1, item.h + dy) }
+    : { x: item.x + dx, y: Math.max(0, item.y + dy) }
+  commit(rmGridMove(base.value, props.cols, item.id, patch), item.id)
+}
+
+function commit(next: RmGridItem[], id: string) {
+  const changed = next.some((item) => {
+    const before = base.value.find((b) => b.id === item.id)
+    return !before || before.x !== item.x || before.y !== item.y || before.w !== item.w || before.h !== item.h
+  })
+  const moved = next.find((item) => item.id === id)
+  if (moved) announce.value = T.value.at(moved)
+  if (changed) emit('update:layout', next)
+}
+
+function label(id: string) {
+  return props.itemLabel?.(id) ?? id
+}
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="rm-dash"
+    :class="{ 'rm-dash--stacked': stacked, 'rm-dash--editing': editing, 'rm-dash--moving': gesture?.started }"
+    :style="stacked ? undefined : { height: `${height}px` }"
+  >
+    <div v-if="placeholder" class="rm-dash__placeholder" :style="placeholder" aria-hidden="true" />
+    <div
+      v-for="item in shown"
+      :key="item.id"
+      class="rm-dash__item"
+      :class="{ 'rm-dash__item--held': gesture?.started && gesture.id === item.id }"
+      :style="width ? itemStyle(item) : undefined"
+      @pointerdown="onPointerDown($event, item, 'move')"
+    >
+      <slot name="item" :item="item" :editing="editing" />
+      <template v-if="editing">
+        <button
+          type="button"
+          class="rm-dash__grip"
+          :aria-label="T.grip(label(item.id))"
+          :title="T.grip(label(item.id))"
+          @keydown="onKey($event, item)"
+        >
+          <RmIcon name="DotsSix" :size="16" weight="bold" />
+        </button>
+        <span
+          class="rm-dash__resize"
+          :title="T.resize"
+          aria-hidden="true"
+          @pointerdown.stop="onPointerDown($event, item, 'resize')"
+        />
+      </template>
+    </div>
+    <p class="rm-dash__live" aria-live="polite">{{ announce }}</p>
+  </div>
+</template>
+
+<style scoped>
+.rm-dash{position:relative;width:100%}.rm-dash__item{display:flex;flex-direction:column;left:0;min-width:0;position:absolute;top:0;transition:transform var(--duration-base) var(--ease-out),width var(--duration-base) var(--ease-out),height var(--duration-base) var(--ease-out)}.rm-dash__item>:deep(:first-child){flex:1;min-height:0}.rm-dash--stacked{display:flex;flex-direction:column;gap:var(--space-16)}.rm-dash--stacked .rm-dash__item{position:relative;transform:none}.rm-dash__item--held{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);cursor:grabbing;transition:none;z-index:3}.rm-dash--moving{-webkit-user-select:none;-moz-user-select:none;user-select:none}.rm-dash--editing :deep([data-rm-dash-drag]){cursor:grab;touch-action:none}.rm-dash__placeholder{background:color-mix(in srgb,var(--color-primary) 8%,transparent);border:2px dashed var(--color-primary);border-radius:var(--radius-lg);left:0;position:absolute;top:0;transition:transform var(--duration-fast) var(--ease-out),width var(--duration-fast) var(--ease-out),height var(--duration-fast) var(--ease-out);z-index:0}.rm-dash__grip{align-items:center;background:var(--bg-surface-2);border-radius:999px;color:var(--text-muted);cursor:grab;display:inline-flex;height:16px;justify-content:center;left:50%;padding:0;position:absolute;top:4px;touch-action:none;transform:translateX(-50%);width:36px;z-index:2}.rm-dash__grip:hover{color:var(--text-primary)}.rm-dash__grip:focus-visible{box-shadow:var(--shadow-focus);color:var(--text-primary);outline:none}.rm-dash__resize{background:linear-gradient(135deg,transparent 55%,var(--text-muted) 55%,var(--text-muted) 62%,transparent 62%),linear-gradient(135deg,transparent 75%,var(--text-muted) 75%,var(--text-muted) 82%,transparent 82%);bottom:2px;cursor:nwse-resize;height:14px;position:absolute;right:2px;touch-action:none;width:14px;z-index:2}.rm-dash__live{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (prefers-reduced-motion:reduce){.rm-dash__item,.rm-dash__placeholder{transition:none}}
+</style>

package/dist/runtime/components/Segmented.vue

@@ -70,7 +70,15 @@ const items = computed<RmSegmentedOption[]>(() =>
 const activeIndex = computed(() => items.value.findIndex(item => item.value === model.value))
 
 const root = ref<HTMLElement | null>(null)
-const segments = ref<HTMLElement[]>([])
+/**
+ * Les segments se relisent dans le DOM, dans son ordre. Un tableau de refs
+ * pose sur un v-for ne garantit pas l'ordre des options : quand elles
+ * changent (un autre jeu de choix pour le meme rail), le nouvel element etait
+ * ajoute en fin de tableau et le pave se posait sous le mauvais segment.
+ */
+function segments(): HTMLElement[] {
+  return root.value ? Array.from(root.value.querySelectorAll<HTMLElement>(':scope > .rm-seg__option')) : []
+}
 
 /**
  * Le pave n'existe pas tant qu'il n'a pas ete mesure : sans ca il apparait un
@@ -80,7 +88,7 @@ const segments = ref<HTMLElement[]>([])
 const thumb = ref<Record<string, string> | null>(null)
 
 function measure() {
-  const element = segments.value[activeIndex.value]
+  const element = segments()[activeIndex.value]
   if (!element || !root.value) {
     thumb.value = null
     return
@@ -129,7 +137,7 @@ function observeAll() {
   if (!observer) return
   observer.disconnect()
   if (root.value) observer.observe(root.value)
-  segments.value.forEach(element => element && observer!.observe(element))
+  segments().forEach(element => observer!.observe(element))
 }
 
 onMounted(() => {
@@ -150,7 +158,9 @@ onBeforeUnmount(() => {
   observer = null
 })
 
-watch(() => [model.value, items.value.length, props.block], () => {
+// Les valeurs, pas seulement leur nombre : un autre jeu de trois options
+// garde la meme longueur et doit tout de meme deplacer le pave.
+watch(() => [model.value, items.value.map(item => `${item.value}:${item.label}`).join('|'), props.block], () => {
   remeasure()
   nextTick(observeAll)
 })
@@ -173,7 +183,6 @@ watch(() => [model.value, items.value.length, props.block], () => {
     <button
       v-for="(item, index) in items"
       :key="item.value"
-      ref="segments"
       class="rm-seg__option"
       :class="{
         'rm-seg__option--active': index === activeIndex,

package/dist/runtime/utils/dashboardGrid.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Calcul de la grille de RmDashboardGrid : des tuiles posees en cellules
+ * (colonnes fixes, lignes infinies), sans chevauchement, tassees vers le haut.
+ *
+ * Pur et sans DOM : le composant ne fait que convertir pixels et cellules. La
+ * regle est celle des tableaux de bord PostHog ou Grafana : une tuile deplacee
+ * prend la place visee, celles qu'elle touche descendent, puis tout remonte
+ * dans les trous. Un trou ne survit jamais a un geste.
+ */
+export interface RmGridItem {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    minW?: number;
+    minH?: number;
+}
+/** Une tuile ramenee dans la grille : taille entre son minimum et `cols`, x dans les bornes. */
+export declare function rmGridClamp(item: RmGridItem, cols: number): RmGridItem;
+/**
+ * Tasse la grille vers le haut et defait les chevauchements.
+ *
+ * `pinned` garde sa place pendant un geste : c'est la tuile que l'on tient, les
+ * autres s'ecartent pour elle. Rend les tuiles dans l'ordre recu.
+ */
+export declare function rmGridCompact(items: RmGridItem[], cols: number, pinned?: string): RmGridItem[];
+/**
+ * La grille apres avoir pose `id` en `patch` (position et/ou taille) : la
+ * tuile prend la place visee, les autres s'ecartent, puis tout se tasse.
+ */
+export declare function rmGridMove(items: RmGridItem[], cols: number, id: string, patch: Partial<Pick<RmGridItem, 'x' | 'y' | 'w' | 'h'>>): RmGridItem[];
+/** La premiere ligne libre sous toutes les tuiles : la ou poser une tuile ajoutee. */
+export declare function rmGridBottom(items: RmGridItem[]): number;

package/dist/runtime/utils/dashboardGrid.js

@@ -0,0 +1,32 @@
+function collide(a, b) {
+  return a.id !== b.id && a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
+}
+export function rmGridClamp(item, cols) {
+  const w = Math.min(cols, Math.max(item.minW ?? 1, Math.round(item.w)));
+  const h = Math.max(item.minH ?? 1, Math.round(item.h));
+  const x = Math.min(cols - w, Math.max(0, Math.round(item.x)));
+  return { ...item, x, y: Math.max(0, Math.round(item.y)), w, h };
+}
+export function rmGridCompact(items, cols, pinned) {
+  const clamped = items.map((item) => rmGridClamp(item, cols));
+  const placed = clamped.filter((item) => item.id === pinned);
+  const rest = clamped.filter((item) => item.id !== pinned).sort((a, b) => a.y - b.y || a.x - b.x);
+  for (const item of rest) {
+    while (item.y > 0 && !placed.some((other) => collide({ ...item, y: item.y - 1 }, other))) item.y--;
+    let hit = placed.find((other) => collide(item, other));
+    while (hit) {
+      item.y = hit.y + hit.h;
+      hit = placed.find((other) => collide(item, other));
+    }
+    placed.push(item);
+  }
+  const byId = new Map(placed.map((item) => [item.id, item]));
+  return clamped.map((item) => byId.get(item.id));
+}
+export function rmGridMove(items, cols, id, patch) {
+  const moved = items.map((item) => item.id === id ? { ...item, ...patch } : item);
+  return rmGridCompact(rmGridCompact(moved, cols, id), cols);
+}
+export function rmGridBottom(items) {
+  return items.reduce((bottom, item) => Math.max(bottom, item.y + item.h), 0);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.207",
+  "version": "0.1.209",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",