@tekkare/romulus 0.1.38 → 0.1.40

package/dist/runtime/components/HybridTable.vue

@@ -1,71 +1,136 @@
+<!--
+  Tableau a barres : un classement ou chaque ligne porte sa part sous forme de
+  barre, derriere son libelle, et sa valeur chiffree a droite.
+
+  Remplace `arg-hybrid-chart` d'Auriga, avec le meme contrat de lecture : la
+  barre la plus longue vaut la plus grande part, la valeur garde son pourcentage
+  entre parentheses, et un bouton deplie le reste du classement quand `limit`
+  coupe la liste.
+
+  La barre n'est pas un graphe : c'est un tableau, lisible au lecteur d'ecran
+  ligne a ligne, ou la barre n'est qu'un fond. C'est ce qui la distingue de
+  RmBarChart, qui peint un SVG.
+-->
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-/**
- * HybridTable — a table with inline horizontal bars behind values.
- * Each row shows a label, a value, and a bar proportional to the max value.
- */
+import { rmNumber } from '../utils/format'
 
-export interface HybridTableRow {
+export interface RmHybridRow {
   label: string
   value: number
+  /** Part en pourcent, deja calculee (0-100). Affichee entre parentheses. */
+  percentage?: number | string
+  /** Colonnes de fin de ligne, alignees a droite apres la valeur. */
+  extra?: (string | number)[]
 }
 
 const props = withDefaults(defineProps<{
-  rows: HybridTableRow[]
-  title?: string
-  color?: string
-  maxVisible?: number
-  valueFormatter?: (val: number) => string
+  rows: RmHybridRow[]
+  /**
+   * En-tetes de colonnes : le libelle, la valeur, puis un titre par colonne
+   * `extra`. Vide : le tableau n'a pas de tete.
+   */
+  columns?: string[]
+  /**
+   * Couleur de la barre. Un chiffre de 1 a 6 prend la couleur categorielle du
+   * theme (`--chart-cat-N`), qui suit le mode nuit et les modes daltoniens ;
+   * une chaine passe telle quelle, pour une couleur imposee par la page.
+   */
+  accent?: number | string
+  /** Nombre de lignes visibles au repos. 0 : tout le classement. */
+  limit?: number
+  /** Langue du bouton de depliage. Le reste du texte vient de la page. */
+  lang?: 'fr' | 'en'
+  /** Formatage de la valeur. Par defaut le format francais (rmNumber). */
+  valueFormatter?: (value: number) => string
 }>(), {
-  title: undefined,
-  color: '#4164EE',
-  maxVisible: 10,
-  valueFormatter: (val: number) => val.toLocaleString(),
+  columns: () => [],
+  accent: 1,
+  limit: 0,
+  lang: 'fr',
+  valueFormatter: rmNumber,
 })
 
+const emit = defineEmits<{ showState: [value: boolean] }>()
+
 const showAll = ref(false)
 
-const maxValue = computed(() => Math.max(...props.rows.map(r => r.value), 1))
+const barColor = computed(() =>
+  typeof props.accent === 'number' ? `var(--chart-cat-${props.accent})` : props.accent,
+)
+
+const visibleRows = computed(() =>
+  props.limit && !showAll.value ? props.rows.slice(0, props.limit) : props.rows,
+)
 
-const visibleRows = computed(() => {
-  if (showAll.value) return props.rows
-  return props.rows.slice(0, props.maxVisible)
+const hasMore = computed(() => Boolean(props.limit) && props.rows.length > props.limit)
+
+/**
+ * La barre se lit en relatif : la plus grande part occupe toute la largeur,
+ * les autres se mesurent contre elle. Une barre proportionnelle a la part
+ * absolue serait illisible des que le premier du classement pese 3 %.
+ */
+const reference = computed(() => {
+  const shares = props.rows.map(share)
+  return Math.max(...shares, 0) || 1
 })
 
-const hasMore = computed(() => props.rows.length > props.maxVisible)
+function share(row: RmHybridRow) {
+  if (row.percentage !== undefined && row.percentage !== null && row.percentage !== '') {
+    return Number(row.percentage)
+  }
+  // Sans part fournie, la valeur se rapporte au total affiche.
+  const total = props.rows.reduce((sum, r) => sum + r.value, 0)
+  return total ? (row.value * 100) / total : 0
+}
+
+function barWidth(row: RmHybridRow) {
+  return `${Math.min((share(row) * 100) / reference.value, 100)}%`
+}
+
+function toggle() {
+  showAll.value = !showAll.value
+  emit('showState', showAll.value)
+}
 </script>
 
 <template>
-  <div class="hybrid-table">
-    <h3 v-if="title" class="hybrid-table__title">{{ title }}</h3>
-
-    <div class="hybrid-table__list">
-      <div
-        v-for="(row, idx) in visibleRows"
-        :key="idx"
-        class="hybrid-table__row"
-      >
-        <span class="hybrid-table__label">{{ row.label }}</span>
-        <div class="hybrid-table__bar-wrapper">
-          <div
-            class="hybrid-table__bar"
-            :style="{ width: `${(row.value / maxValue) * 100}%`, backgroundColor: color }"
-          />
-        </div>
-        <span class="hybrid-table__value">{{ valueFormatter(row.value) }}</span>
-      </div>
-    </div>
+  <div class="rm-hybrid">
+    <table class="rm-hybrid__table">
+      <thead v-if="columns.length" class="rm-hybrid__head">
+        <tr>
+          <th v-for="(column, index) in columns" :key="index" class="rm-hybrid__th">
+            {{ column }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, index) in visibleRows" :key="index" class="rm-hybrid__row">
+          <th scope="row" class="rm-hybrid__label_cell">
+            <span class="rm-hybrid__bar" :style="{ background: barColor, width: barWidth(row) }" />
+            <span class="rm-hybrid__label" :title="row.label">{{ row.label }}</span>
+          </th>
+          <td class="rm-hybrid__value">
+            {{ valueFormatter(row.value) }}
+            <span v-if="row.percentage !== undefined && row.percentage !== null" class="rm-hybrid__share">
+              ({{ row.percentage }} %)
+            </span>
+          </td>
+          <td v-for="(cell, cellIndex) in row.extra ?? []" :key="cellIndex" class="rm-hybrid__value">
+            {{ cell }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
-    <button
-      v-if="hasMore"
-      class="hybrid-table__toggle"
-      @click="showAll = !showAll"
-    >
-      {{ showAll ? 'Show less' : `Show all (${rows.length})` }}
-    </button>
+    <div v-if="hasMore" class="rm-hybrid__footer">
+      <RmButton variant="outline" size="sm" :prefix-icon="showAll ? 'CornersIn' : 'CornersOut'" @click="toggle">
+        {{ showAll ? (lang === 'fr' ? 'Voir moins' : 'Show less') : (lang === 'fr' ? 'Voir plus' : 'Show more') }}
+      </RmButton>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.hybrid-table{font-family:var(--r-font-family)}.hybrid-table__title{color:var(--r-color-gray-700);font-size:14px;font-weight:600;margin:0 0 12px}.hybrid-table__list{display:flex;flex-direction:column;gap:6px}.hybrid-table__row{align-items:center;display:flex;gap:12px;padding:6px 0}.hybrid-table__label{color:var(--r-color-gray-700);flex-shrink:0;font-size:13px;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hybrid-table__bar-wrapper{background:var(--r-color-gray-50);border-radius:4px;flex:1;height:20px;overflow:hidden}.hybrid-table__bar{border-radius:4px;height:100%;min-width:2px;transition:width .4s ease}.hybrid-table__value{color:var(--r-color-gray-900);flex-shrink:0;font-size:13px;font-weight:600;min-width:50px;text-align:right}.hybrid-table__toggle{background:none;border:none;color:#4164ee;cursor:pointer;font-family:var(--r-font-family);font-size:13px;margin-top:8px;padding:0;text-decoration:underline}.hybrid-table__toggle:hover{color:#3451d4}
+.rm-hybrid{font-family:var(--font-sans);width:100%}.rm-hybrid__table{border-collapse:collapse;table-layout:auto;width:100%}.rm-hybrid__th{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-normal);line-height:14px;padding:4px 10px;text-align:right;white-space:nowrap}.rm-hybrid__th:first-child{padding-left:0;text-align:left}.rm-hybrid__th:last-child{padding-right:0}.rm-hybrid__row{height:34px}.rm-hybrid__label_cell{font-weight:var(--weight-normal);padding:0;position:relative;text-align:left;width:100%}.rm-hybrid__bar{border-radius:var(--radius-sm);bottom:2px;left:0;opacity:.14;position:absolute;top:2px}.rm-hybrid__label{display:block;overflow:hidden;padding:6px 10px 6px 8px;position:relative;text-overflow:ellipsis}.rm-hybrid__label,.rm-hybrid__value{color:var(--text-primary);font-size:var(--font-13);white-space:nowrap}.rm-hybrid__value{font-variant-numeric:tabular-nums;font-weight:var(--weight-medium);padding:6px 10px;text-align:right}.rm-hybrid__value:last-child{padding-right:0}.rm-hybrid__share{color:var(--text-muted);font-weight:var(--weight-normal);margin-left:2px}.rm-hybrid__footer{display:flex;justify-content:center;margin-top:16px}
 </style>

package/dist/runtime/components/Kpi.vue

@@ -59,5 +59,8 @@ const trendText = computed(() =>
       <span v-if="trendLabel">{{ trendLabel }}</span>
     </p>
     <p v-if="note" class="kpi-foot">{{ note }}</p>
+    <!-- Complement de tuile : une repartition, une mini-courbe. Le contenu
+         projete reste sous le pied, pour ne pas repousser la valeur. -->
+    <div v-if="$slots.default" class="kpi-extra"><slot /></div>
   </div>
 </template>

package/dist/runtime/components/NumberInput.vue

@@ -0,0 +1,93 @@
+<!--
+  Champ numerique borne, pour les filtres qui prennent un nombre plutot qu'une
+  liste : un "Top N", un seuil, un nombre de mois.
+
+  Remplace `arg-number-input` d'Auriga. Meme hauteur et meme rayon que la puce
+  de filtre (RmFilterDropdown) : les deux se rangent sur la meme rangee.
+
+  La valeur est toujours ramenee dans les bornes, y compris a la frappe : un
+  filtre qui laisse saisir 5000 quand la donnee s'arrete a 100 renvoie une page
+  vide sans rien dire.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Libelle du champ, au-dessus. Vide : aucun libelle. */
+  label?: string
+  /** Borne basse. */
+  min?: number
+  /** Borne haute. */
+  max?: number
+  /** Pas des boutons moins et plus. */
+  step?: number
+}>(), {
+  label: undefined,
+  min: 0,
+  max: Number.MAX_SAFE_INTEGER,
+  step: 1,
+})
+
+const model = defineModel<number>({ default: 0 })
+
+const atMin = computed(() => model.value <= props.min)
+const atMax = computed(() => model.value >= props.max)
+
+function clamp(value: number) {
+  if (Number.isNaN(value)) return props.min
+  return Math.min(Math.max(value, props.min), props.max)
+}
+
+function nudge(delta: number) {
+  model.value = clamp(model.value + delta)
+}
+
+function onInput(event: Event) {
+  const input = event.target as HTMLInputElement
+  const next = clamp(Number(input.value))
+  model.value = next
+  // Le champ affiche ce qui est retenu : sans ca, une saisie hors bornes reste
+  // a l'ecran alors que la page filtre sur autre chose.
+  if (String(next) !== input.value) input.value = String(next)
+}
+</script>
+
+<template>
+  <div class="rm-number">
+    <label v-if="label" class="rm-number__label">{{ label }}</label>
+    <div class="rm-number__box">
+      <button
+        type="button"
+        class="rm-number__step"
+        :disabled="atMin"
+        :aria-label="`Diminuer${label ? ' ' + label : ''}`"
+        @click="nudge(-step)"
+      >
+        <RmIcon name="Minus" :size="14" />
+      </button>
+      <input
+        class="rm-number__input"
+        type="number"
+        :value="model"
+        :min="min"
+        :max="max"
+        :step="step"
+        :aria-label="label"
+        @input="onInput"
+      />
+      <button
+        type="button"
+        class="rm-number__step"
+        :disabled="atMax"
+        :aria-label="`Augmenter${label ? ' ' + label : ''}`"
+        @click="nudge(step)"
+      >
+        <RmIcon name="Plus" :size="14" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-number{display:flex;flex-direction:column;font-family:var(--font-sans);gap:6px}.rm-number__label{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-medium)}.rm-number__box{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;box-sizing:border-box;display:flex;height:32px;overflow:hidden;width:193px}.rm-number__step{align-items:center;background:none;border:none;color:var(--text-secondary);cursor:pointer;display:flex;flex:none;height:100%;justify-content:center;transition:background var(--duration-fast) var(--ease-in-out);width:32px}.rm-number__step:hover:not(:disabled){background:var(--bg-hover)}.rm-number__step:disabled{color:var(--text-muted);cursor:not-allowed;opacity:.5}.rm-number__input{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;background:none;border:none;color:var(--text-primary);flex:1;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);height:100%;min-width:0;outline:none;text-align:center}.rm-number__input::-webkit-inner-spin-button,.rm-number__input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
+</style>

package/dist/runtime/components/PageHeader.vue

@@ -5,22 +5,40 @@
   se colle en haut de la colonne de contenu quand elle defile ; la barre de
   filtres (RmFilterBar) se cale sous lui en suivant son id `rm_page_header`.
 
-  Slots : #title (a la place de la prop), #actions (a droite du titre).
+  Il porte aussi les onglets de la page, sous le titre : c'etait la derniere
+  raison de garder `arg-header` dans les apps. Le dessin est celui des onglets
+  du bandeau de cadre (RmAppHeader) : libelle souligne quand il est actif.
+
+  Slots : #title (a la place de la prop), #actions (a droite du titre),
+  defaut (sous la rangee du titre, avant les onglets).
 -->
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
+import type { RmHeaderTab } from './AppHeader.vue'
 
 withDefaults(
   defineProps<{
     title?: string | null
+    /**
+     * Sur-titre, au-dessus du titre : le domaine dont la page traite
+     * ("Retail & Hospital Drugs"). Le titre seul ne dit pas toujours de quel
+     * jeu de donnees il parle.
+     */
+    eyebrow?: string | null
     /** Fleche de retour a gauche du titre. */
     haveReturn?: boolean
     /** Destination du retour ; sans valeur, l'historique. */
     backTo?: string | null
+    /** Onglets de la page. La page dit lequel est actif et ecoute `tab`. */
+    tabs?: RmHeaderTab[]
+    /** Nom du groupe d'onglets pour les lecteurs d'ecran. */
+    tabsLabel?: string
   }>(),
-  { title: null, haveReturn: false, backTo: null },
+  { title: null, eyebrow: null, haveReturn: false, backTo: null, tabs: () => [], tabsLabel: undefined },
 )
 
+const emit = defineEmits<{ tab: [key: string] }>()
+
 const router = useRouter()
 </script>
 
@@ -36,15 +54,31 @@ const router = useRouter()
         </button>
       </template>
 
-      <h1 v-if="title" class="rm-page-header__title">{{ title }}</h1>
-      <div v-else class="rm-page-header__title"><slot name="title" /></div>
+      <div class="rm-page-header__heading">
+        <p v-if="eyebrow" class="rm-page-header__eyebrow">{{ eyebrow }}</p>
+        <h1 v-if="title" class="rm-page-header__title">{{ title }}</h1>
+        <div v-else class="rm-page-header__title"><slot name="title" /></div>
+      </div>
 
       <div v-if="$slots.actions" class="rm-page-header__actions"><slot name="actions" /></div>
     </div>
     <slot />
+
+    <div v-if="tabs.length" class="rm-page-header__tabs" role="tablist" :aria-label="tabsLabel">
+      <button
+        v-for="tab in tabs"
+        :key="tab.key"
+        class="rm-page-header__tab"
+        :class="{ 'rm-page-header__tab--active': tab.active }"
+        type="button"
+        role="tab"
+        :aria-selected="tab.active ? 'true' : 'false'"
+        @click="emit('tab', tab.key)"
+      >{{ tab.label }}</button>
+    </div>
   </header>
 </template>
 
 <style scoped>
-.rm-page-header{backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:12px;padding:16px 32px 12px;position:sticky;top:0;width:100%;z-index:95}.rm-page-header__row{align-items:center;align-self:stretch;display:flex;gap:16px}.rm-page-header__back{background:transparent;border:none;color:inherit;cursor:pointer;display:inline-flex;padding:0}.rm-page-header__title{flex-grow:2;font-size:23px;font-weight:900;line-height:normal;margin:0;min-width:0}.rm-page-header__title :deep(h1),.rm-page-header__title :deep(h2),.rm-page-header__title :deep(p){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-page-header__actions{align-items:center;display:flex;flex:0 0 auto;gap:16px}
+.rm-page-header{backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:12px;padding:16px 32px 12px;position:sticky;top:0;width:100%;z-index:95}.rm-page-header__row{align-items:center;align-self:stretch;display:flex;gap:16px}.rm-page-header__back{background:transparent;border:none;color:inherit;cursor:pointer;display:inline-flex;padding:0}.rm-page-header__heading{flex-grow:2;min-width:0}.rm-page-header__eyebrow{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-medium);margin:0 0 2px}.rm-page-header__title{flex-grow:2;font-size:23px;font-weight:900;line-height:normal;margin:0;min-width:0}.rm-page-header__title :deep(h1),.rm-page-header__title :deep(h2),.rm-page-header__title :deep(p){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-page-header__actions{align-items:center;display:flex;flex:0 0 auto;gap:16px}.rm-page-header__tabs{display:flex;gap:8px;margin-bottom:-13px;overflow-x:auto}.rm-page-header__tab{background:none;border:none;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;color:var(--text-muted);cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;line-height:1.6;padding:8px 16px 10px;transition:background-color .3s,color .15s;white-space:nowrap}.rm-page-header__tab:hover{color:var(--color-primary)}.rm-page-header__tab--active{background:color-mix(in srgb,var(--color-primary) 6%,transparent);border-bottom-color:var(--color-primary);color:var(--color-primary);font-weight:600}
 </style>

package/dist/runtime/components/RailPanel.vue

@@ -11,6 +11,10 @@
 
   L'en-tete reprend la rangee de 56px du bandeau pour que le titre du panneau
   s'aligne sur le fil d'Ariane, a la ligne pres.
+
+  Un voile flou et grise couvre le reste du cadre pendant l'ouverture, barre
+  laterale comprise : le panneau est ce qu'on lit, pas ce qu'on lisait. Un
+  clic sur le voile referme le panneau, comme un tiroir.
 -->
 <script setup lang="ts">
 withDefaults(defineProps<{
@@ -30,6 +34,16 @@ const emit = defineEmits<{ close: [] }>()
 </script>
 
 <template>
+  <!-- Voile : le panneau ouvert prend la main, le reste du cadre passe en
+       flou grise. Un element a part plutot qu'un `filter` sur le contenu,
+       qui creerait un bloc conteneur et decrocherait les bandeaux collants
+       des pages. Il prend les clics et referme le panneau : c'est le geste
+       attendu de tout ce qui voile la page. Le clavier, lui, garde le bouton
+       de fermeture de l'en-tete, seul element expose. -->
+  <Transition name="rm-panel-veil">
+    <div v-if="open" class="rm-panel__veil" aria-hidden="true" @click="emit('close')" />
+  </Transition>
+
   <Transition name="rm-panel">
     <aside v-if="open" class="rm-panel" :style="{ '--rm-panel-w': width }">
       <div class="rm-panel__header">

package/dist/runtime/components/SidebarLeft.vue

@@ -77,15 +77,46 @@ const collapsibles = computed(() =>
   props.sections.filter(s => s.label && s.collapsible !== false),
 )
 
-/** Section ouverte : celle qui contient le chemin courant, sinon la premiere. */
-const sectionOf = (path?: string) =>
-  collapsibles.value.find(s => s.items.some(i => i.to === path))?.key
-  ?? collapsibles.value[0]?.key
-  ?? null
+/** Chemin comparable : sans query ni slash final. */
+const trim = (path: string) => (path.split('?')[0] || '').replace(/\/+$/, '') || '/'
+
+/**
+ * Section ouverte : celle qui porte la page courante, sinon la premiere.
+ *
+ * L'entree marquee `active` decide d'abord. C'est l'app qui la calcule, et
+ * elle en sait plus que nous : son `to` passe par `localePath`, donc prefixe
+ * de la locale et parfois suivi d'un slash, quand `activePath` est brut. Une
+ * egalite stricte entre les deux ne tombait jamais juste et toutes les pages
+ * repliaient la premiere section.
+ *
+ * A defaut de drapeau, le chemin sert de recours : egalite d'abord, puis
+ * prefixe, pour qu'une sous-page (« /prices/jo ») ouvre la section de son
+ * entree.
+ */
+const sectionOf = (path?: string) => {
+  const byActive = collapsibles.value.find(s => s.items.some(i => i.active))
+  if (byActive) return byActive.key
+
+  const here = path ? trim(path) : null
+  if (here) {
+    const byPath = collapsibles.value.find(s =>
+      s.items.some((i) => {
+        if (!i.to) return false
+        const to = trim(i.to)
+        return here === to || here.startsWith(`${to}/`)
+      }),
+    )
+    if (byPath) return byPath.key
+  }
+
+  return collapsibles.value[0]?.key ?? null
+}
 
 const openSection = ref<string | null>(sectionOf(props.activePath))
-watch(() => props.activePath, (path) => {
-  const key = sectionOf(path)
+// La cible se deduit des sections autant que du chemin : les deux arrivent
+// ensemble a la navigation, et les droits d'acces peuvent recomposer la liste
+// en cours de route.
+watch(() => sectionOf(props.activePath), (key) => {
   if (key && key !== openSection.value) openSection.value = key
 })
 

package/dist/runtime/components/SidebarRight.vue

@@ -20,6 +20,12 @@ export interface RmRailTile {
   label: string
   /** Icone Phosphor, nom en kebab-case sans le prefixe `ph-`. */
   icon: string
+  /**
+   * Pastille de comptage posee sur la tuile (nombre de sources de la page,
+   * par exemple). Rien n'est dessine a zero ou sans valeur : une pastille
+   * vide dirait qu'il y a quelque chose a voir.
+   */
+  count?: number
 }
 
 export interface RmRailLocale {
@@ -87,11 +93,14 @@ const second = computed(() =>
       class="rm-rail__item"
       :class="{ 'rm-rail__item--active': active === tile.key }"
       type="button"
-      :title="tile.label"
+      :title="tile.count ? `${tile.label} (${tile.count})` : tile.label"
       :aria-pressed="active === tile.key"
       @click="emit('select', tile.key)"
     >
-      <span class="rm-rail__tile"><i :class="`ph ph-${tile.icon}`" /></span>
+      <span class="rm-rail__tile">
+        <i :class="`ph ph-${tile.icon}`" />
+        <span v-if="tile.count" class="rm-rail__badge">{{ tile.count > 99 ? '99+' : tile.count }}</span>
+      </span>
       <span class="rm-rail__caption">{{ tile.label }}</span>
     </button>
 

package/dist/runtime/components/SimpleBar.vue

@@ -1,86 +1,77 @@
+<!--
+  Barre de repartition : une barre empilee, puis la legende ligne a ligne avec
+  la valeur et la part de chaque poste.
+
+  Remplace `arg-simple-chart` d'Auriga. Pas de moteur de graphe : quelques
+  divs, ce qui la rend utilisable a l'interieur d'une tuile KPI ou d'une carte
+  etroite, la ou un ECharts serait disproportionne.
+-->
 <script setup lang="ts">
 import { computed } from 'vue'
-/**
- * SimpleBar — lightweight horizontal bar chart without ApexCharts.
- * Pure CSS, no dependencies. Great for small inline visualizations.
- */
+import { useChartTheme } from '../composables/useChartTheme'
+import { rmNumber } from '../utils/format'
 
-export interface SimpleBarItem {
+export interface RmSimpleBarItem {
   label: string
   value: number
+  /** Couleur imposee. Sans elle, la couleur categorielle du rang. */
   color?: string
 }
 
 const props = withDefaults(defineProps<{
-  items: SimpleBarItem[]
+  items: RmSimpleBarItem[]
   title?: string
-  showValues?: boolean
-  showPercent?: boolean
+  /** Hauteur de la barre empilee, en pixels. */
   height?: number
+  /** Masque la legende : la barre seule, quand la place manque. */
+  hideLegend?: boolean
+  /** Formatage des valeurs de la legende. */
+  valueFormatter?: (value: number) => string
 }>(), {
   title: undefined,
-  showValues: true,
-  showPercent: false,
-  height: 24,
+  height: 8,
+  hideLegend: false,
+  valueFormatter: rmNumber,
 })
 
-const { PALETTE } = useChartTheme()
+const { palette } = useChartTheme()
+
+const total = computed(() => props.items.reduce((sum, item) => sum + item.value, 0))
+
+function colorOf(item: RmSimpleBarItem, index: number) {
+  return item.color ?? palette.value.cat[index % palette.value.cat.length]
+}
 
-const total = computed(() => props.items.reduce((sum, i) => sum + i.value, 0))
-const maxValue = computed(() => Math.max(...props.items.map(i => i.value), 1))
+function shareOf(item: RmSimpleBarItem) {
+  return total.value ? (item.value * 100) / total.value : 0
+}
 </script>
 
 <template>
-  <div class="simple-bar">
-    <h3 v-if="title" class="simple-bar__title">{{ title }}</h3>
+  <div class="rm-simple-bar">
+    <p v-if="title" class="rm-simple-bar__title">{{ title }}</p>
 
-    <!-- Stacked bar -->
-    <div v-if="showPercent" class="simple-bar__stacked" :style="{ height: `${height}px` }">
+    <div class="rm-simple-bar__track" :style="{ height: `${height}px` }">
       <div
-        v-for="(item, idx) in items"
-        :key="idx"
-        class="simple-bar__segment"
-        :style="{
-          width: `${(item.value / total) * 100}%`,
-          backgroundColor: item.color ?? PALETTE[idx % PALETTE.length],
-        }"
+        v-for="(item, index) in items"
+        :key="index"
+        class="rm-simple-bar__segment"
+        :style="{ width: `${shareOf(item)}%`, background: colorOf(item, index) }"
+        :title="`${item.label} : ${valueFormatter(item.value)}`"
       />
     </div>
 
-    <!-- Individual bars -->
-    <div class="simple-bar__list">
-      <div
-        v-for="(item, idx) in items"
-        :key="idx"
-        class="simple-bar__item"
-      >
-        <div class="simple-bar__item-header">
-          <span
-            class="simple-bar__dot"
-            :style="{ backgroundColor: item.color ?? PALETTE[idx % PALETTE.length] }"
-          />
-          <span class="simple-bar__label">{{ item.label }}</span>
-          <span v-if="showValues" class="simple-bar__value">
-            {{ item.value.toLocaleString() }}
-            <span v-if="showPercent" class="simple-bar__pct">
-              ({{ total > 0 ? ((item.value / total) * 100).toFixed(1) : 0 }}%)
-            </span>
-          </span>
-        </div>
-        <div v-if="!showPercent" class="simple-bar__track" :style="{ height: `${height}px` }">
-          <div
-            class="simple-bar__fill"
-            :style="{
-              width: `${(item.value / maxValue) * 100}%`,
-              backgroundColor: item.color ?? PALETTE[idx % PALETTE.length],
-            }"
-          />
-        </div>
-      </div>
-    </div>
+    <ul v-if="!hideLegend" class="rm-simple-bar__legend">
+      <li v-for="(item, index) in items" :key="index" class="rm-simple-bar__row">
+        <span class="rm-simple-bar__dot" :style="{ background: colorOf(item, index) }" />
+        <span class="rm-simple-bar__label">{{ item.label }}</span>
+        <span class="rm-simple-bar__value">{{ valueFormatter(item.value) }}</span>
+        <span class="rm-simple-bar__share">({{ shareOf(item).toFixed(1).replace('.', ',') }} %)</span>
+      </li>
+    </ul>
   </div>
 </template>
 
 <style scoped>
-.simple-bar{font-family:var(--r-font-family)}.simple-bar__title{color:var(--r-color-gray-700);font-size:14px;font-weight:600;margin:0 0 12px}.simple-bar__stacked{border-radius:6px;display:flex;margin-bottom:12px;overflow:hidden}.simple-bar__segment{min-width:2px;transition:width .4s ease}.simple-bar__segment:first-child{border-radius:6px 0 0 6px}.simple-bar__segment:last-child{border-radius:0 6px 6px 0}.simple-bar__list{display:flex;flex-direction:column;gap:8px}.simple-bar__item-header{align-items:center;display:flex;gap:8px;margin-bottom:4px}.simple-bar__dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.simple-bar__label{color:var(--r-color-gray-700);flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.simple-bar__value{color:var(--r-color-gray-900);flex-shrink:0;font-size:13px;font-weight:600}.simple-bar__pct{color:var(--r-color-gray-400);font-weight:400}.simple-bar__track{background:var(--r-color-gray-50);border-radius:4px;overflow:hidden}.simple-bar__fill{border-radius:4px;height:100%;min-width:2px;transition:width .4s ease}
+.rm-simple-bar{font-family:var(--font-sans)}.rm-simple-bar__title{color:var(--text-muted);font-size:var(--font-12);font-weight:var(--weight-medium);margin:0 0 8px}.rm-simple-bar__track{background:var(--bg-surface-2);border-radius:999px;display:flex;overflow:hidden}.rm-simple-bar__segment{height:100%}.rm-simple-bar__legend{list-style:none;margin:10px 0 0;padding:0}.rm-simple-bar__row{align-items:center;display:flex;font-size:var(--font-12);gap:6px;padding:3px 0}.rm-simple-bar__dot{border-radius:2px;flex:none;height:8px;width:8px}.rm-simple-bar__label{color:var(--text-secondary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-simple-bar__value{color:var(--text-primary);font-variant-numeric:tabular-nums;font-weight:var(--weight-medium)}.rm-simple-bar__share{color:var(--text-muted)}
 </style>

package/dist/runtime/components/Table.vue

@@ -148,7 +148,7 @@ const sortedRows = computed(() => {
             :class="col.align && `rm-table__td--${col.align}`"
           >
             <slot :name="col.key" :value="getCellValue(row, col.key)" :row="row" :index="idx">
-              {{ getCellValue(row, col.key) ?? '—' }}
+              {{ getCellValue(row, col.key) ?? '-' }}
             </slot>
           </td>
         </tr>