@tekkare/romulus 0.1.11 → 0.1.13

package/dist/runtime/components/NavBar.vue

@@ -0,0 +1,147 @@
+<!--
+  RmNavBar - la barre laterale du design system : identite, recherche, sections
+  de navigation, pied avec utilisateur et sortie.
+
+  Markup et classes reprises de `app-shell.html` (`.sidebar`, `.sidebar-top`,
+  `.sidebar-search`, `.nav-group`, `.nav-section`, `.nav-item`,
+  `.sidebar-footer`). Les icones utilisent la police Phosphor via
+  `<i class="ph ph-...">`, comme le design system : les regles de taille
+  d'oip.css ciblent cet element, un SVG ne les recevrait pas.
+
+  Les sections sont un accordeon exclusif : huit vues ne tiennent pas
+  depliees. L'etat vit ici, pas dans chaque section.
+-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+export interface RmNavItem {
+  label: string
+  /** Icone Phosphor, nom en kebab-case sans le prefixe `ph-`. */
+  icon: string
+  to: string
+}
+export interface RmNavSection {
+  key: string
+  label: string
+  items: RmNavItem[]
+}
+
+const props = withDefaults(defineProps<{
+  /** Nom court affiche a cote du logo. */
+  name: string
+  /** Sous-titre du logo. */
+  subtitle?: string
+  sections: RmNavSection[]
+  /** Chemin actif, pour marquer l'item courant. */
+  activePath?: string
+  collapsed?: boolean
+  searchPlaceholder?: string
+  /** Bloc utilisateur du pied. Masque si absent. */
+  user?: { initials: string, name: string, org?: string }
+  /** Lien de sortie du pied. */
+  exitLabel?: string
+  exitHref?: string
+}>(), {
+  subtitle: undefined,
+  activePath: undefined,
+  collapsed: false,
+  searchPlaceholder: 'Rechercher...',
+  user: undefined,
+  exitLabel: undefined,
+  exitHref: undefined,
+})
+
+const emit = defineEmits<{
+  toggle: []
+  navigate: [to: string]
+  search: [term: string]
+}>()
+
+// Section ouverte : celle qui contient le chemin actif, sinon la premiere.
+const sectionOf = (path?: string) =>
+  props.sections.find(s => s.items.some(i => i.to === path))?.key ?? props.sections[0]?.key ?? null
+
+const openSection = ref<string | null>(sectionOf(props.activePath))
+watch(() => props.activePath, (path) => {
+  const key = sectionOf(path)
+  if (key && key !== openSection.value) openSection.value = key
+})
+
+const term = ref('')
+watch(term, v => emit('search', v))
+
+const initials = computed(() => props.user?.initials ?? '')
+</script>
+
+<template>
+  <aside class="sidebar">
+    <div class="sidebar-top">
+      <div class="logo-block">
+        <div class="logo-mark">{{ name.charAt(0) }}</div>
+        <div>
+          <div class="logo-text">{{ name }}</div>
+          <div v-if="subtitle" class="logo-sub">{{ subtitle }}</div>
+        </div>
+      </div>
+      <button
+        class="topbar-toggle"
+        type="button"
+        :aria-label="collapsed ? 'Déplier la barre latérale' : 'Replier la barre latérale'"
+        :aria-expanded="!collapsed"
+        @click="emit('toggle')"
+      >
+        <i class="ph ph-sidebar-simple" />
+      </button>
+    </div>
+
+    <div class="sidebar-search">
+      <i class="ph ph-magnifying-glass" />
+      <input v-model="term" type="text" :placeholder="searchPlaceholder" aria-label="Rechercher dans la navigation">
+      <kbd>⌘K</kbd>
+    </div>
+
+    <div v-for="section in sections" :key="section.key" class="nav-group">
+      <div class="nav-section">
+        <button
+          class="nav-section-header"
+          type="button"
+          :aria-expanded="openSection === section.key"
+          @click="openSection = openSection === section.key ? null : section.key"
+        >
+          <span class="label">{{ section.label }}</span>
+          <span class="chev"><i class="ph ph-caret-down" /></span>
+        </button>
+        <div v-show="openSection === section.key" class="nav-items">
+          <a
+            v-for="item in section.items"
+            :key="item.to"
+            class="nav-item"
+            :class="{ active: item.to === activePath }"
+            :href="item.to"
+            :data-tip="collapsed ? item.label : undefined"
+            @click.prevent="emit('navigate', item.to)"
+          >
+            <span class="icn"><i :class="`ph ph-${item.icon}`" /></span>
+            <span class="lbl">{{ item.label }}</span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="sidebar-footer">
+      <div v-if="user" class="sb-user">
+        <div class="sb-user-avatar">{{ initials }}</div>
+        <div class="sb-user-info">
+          <div class="sb-user-name">{{ user.name }}</div>
+          <div v-if="user.org" class="sb-user-org">{{ user.org }}</div>
+        </div>
+      </div>
+      <div class="sb-actions">
+        <slot name="footer-actions" />
+        <a v-if="exitHref" class="primary" :href="exitHref">
+          <i class="ph ph-arrow-up-right" /> {{ exitLabel ?? 'Sortir' }}
+        </a>
+      </div>
+    </div>
+  </aside>
+</template>

package/dist/runtime/components/SimpleBar.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+/**
+ * SimpleBar — lightweight horizontal bar chart without ApexCharts.
+ * Pure CSS, no dependencies. Great for small inline visualizations.
+ */
+
+export interface SimpleBarItem {
+  label: string
+  value: number
+  color?: string
+}
+
+const props = withDefaults(defineProps<{
+  items: SimpleBarItem[]
+  title?: string
+  showValues?: boolean
+  showPercent?: boolean
+  height?: number
+}>(), {
+  title: undefined,
+  showValues: true,
+  showPercent: false,
+  height: 24,
+})
+
+const { PALETTE } = useChartTheme()
+
+const total = computed(() => props.items.reduce((sum, i) => sum + i.value, 0))
+const maxValue = computed(() => Math.max(...props.items.map(i => i.value), 1))
+</script>
+
+<template>
+  <div class="simple-bar">
+    <h3 v-if="title" class="simple-bar__title">{{ title }}</h3>
+
+    <!-- Stacked bar -->
+    <div v-if="showPercent" class="simple-bar__stacked" :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],
+        }"
+      />
+    </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>
+  </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}
+</style>

package/dist/runtime/components/Table.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { PhCaretUp, PhCaretDown } from '@phosphor-icons/vue'
+
+export interface RmTableColumn {
+  key: string
+  label: string
+  sortable?: boolean
+  align?: 'left' | 'center' | 'right'
+  width?: string
+}
+
+export interface RmTableProps {
+  columns: RmTableColumn[]
+  rows: Record<string, any>[]
+  sortField?: string
+  sortOrder?: 'asc' | 'desc'
+  striped?: boolean
+  hoverable?: boolean
+  stickyHeader?: boolean
+  maxHeight?: string
+  loading?: boolean
+  emptyText?: string
+}
+
+const props = withDefaults(defineProps<RmTableProps>(), {
+  sortField: '',
+  sortOrder: 'asc',
+  striped: true,
+  hoverable: true,
+  stickyHeader: true,
+  maxHeight: '500px',
+  loading: false,
+  emptyText: 'No data',
+})
+
+const emit = defineEmits<{
+  sort: [field: string, order: 'asc' | 'desc']
+  rowClick: [row: Record<string, any>, index: number]
+}>()
+
+const currentSort = ref(props.sortField)
+const currentOrder = ref<'asc' | 'desc'>(props.sortOrder)
+
+function toggleSort(col: RmTableColumn) {
+  if (!col.sortable) return
+
+  if (currentSort.value === col.key) {
+    currentOrder.value = currentOrder.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    currentSort.value = col.key
+    currentOrder.value = 'asc'
+  }
+
+  emit('sort', currentSort.value, currentOrder.value)
+}
+
+function getCellValue(row: Record<string, any>, key: string): any {
+  return key.split('.').reduce((obj, k) => obj?.[k], row)
+}
+
+const sortedRows = computed(() => {
+  if (!currentSort.value) return props.rows
+
+  return [...props.rows].sort((a, b) => {
+    const aVal = getCellValue(a, currentSort.value) ?? ''
+    const bVal = getCellValue(b, currentSort.value) ?? ''
+
+    const aStr = Array.isArray(aVal) ? aVal.join(', ') : String(aVal)
+    const bStr = Array.isArray(bVal) ? bVal.join(', ') : String(bVal)
+
+    const aNum = Number(aStr)
+    const bNum = Number(bStr)
+    const isNumeric = !isNaN(aNum) && !isNaN(bNum) && aStr !== '' && bStr !== ''
+
+    const cmp = isNumeric ? aNum - bNum : aStr.localeCompare(bStr)
+    return currentOrder.value === 'asc' ? cmp : -cmp
+  })
+})
+</script>
+
+<template>
+  <div class="rm-table-wrapper" :style="maxHeight !== 'auto' && stickyHeader ? { maxHeight } : undefined">
+    <table class="rm-table">
+      <thead class="rm-table__head" :class="{ 'rm-table__head--sticky': stickyHeader }">
+        <tr>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            class="rm-table__th"
+            :class="[
+              col.align && `rm-table__th--${col.align}`,
+              col.sortable && 'rm-table__th--sortable',
+            ]"
+            :style="col.width ? { width: col.width } : undefined"
+            @click="toggleSort(col)"
+          >
+            <span class="rm-table__th-content">
+              {{ col.label }}
+              <span v-if="col.sortable" class="rm-table__sort">
+                <PhCaretUp
+                  :size="10"
+                  :weight="currentSort === col.key && currentOrder === 'asc' ? 'bold' : 'regular'"
+                  :class="{ 'rm-table__sort--active': currentSort === col.key && currentOrder === 'asc' }"
+                />
+                <PhCaretDown
+                  :size="10"
+                  :weight="currentSort === col.key && currentOrder === 'desc' ? 'bold' : 'regular'"
+                  :class="{ 'rm-table__sort--active': currentSort === col.key && currentOrder === 'desc' }"
+                />
+              </span>
+            </span>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody v-if="loading">
+        <tr v-for="i in 5" :key="i">
+          <td v-for="col in columns" :key="col.key" class="rm-table__td">
+            <div class="rm-table__skeleton" />
+          </td>
+        </tr>
+      </tbody>
+
+      <tbody v-else-if="sortedRows.length === 0">
+        <tr>
+          <td :colspan="columns.length" class="rm-table__empty">
+            {{ emptyText }}
+          </td>
+        </tr>
+      </tbody>
+
+      <tbody v-else>
+        <tr
+          v-for="(row, idx) in sortedRows"
+          :key="idx"
+          class="rm-table__row"
+          :class="{
+            'rm-table__row--striped': striped && idx % 2 === 1,
+            'rm-table__row--hoverable': hoverable,
+          }"
+          @click="emit('rowClick', row, idx)"
+        >
+          <td
+            v-for="col in columns"
+            :key="col.key"
+            class="rm-table__td"
+            :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) ?? '—' }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.rm-table-wrapper{background:#fff;border:1px solid #dbdef0;border-radius:8px;flex:1;overflow:auto}.rm-table{border-collapse:collapse;font-family:var(--r-font-family);font-size:var(--r-text-sm);width:100%}.rm-table__head{background:var(--r-color-gray-50)}.rm-table__head--sticky{position:sticky;top:0;z-index:2}.rm-table__th{border-bottom:1px solid #dbdef0;color:var(--r-color-gray-500);font-size:12px;font-weight:600;letter-spacing:.3px;padding:10px 16px;text-align:left;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.rm-table__th--center{text-align:center}.rm-table__th--right{text-align:right}.rm-table__th--sortable{cursor:pointer}.rm-table__th--sortable:hover{color:var(--r-color-gray-700)}.rm-table__th-content{align-items:center;display:inline-flex;gap:4px}.rm-table__sort{color:var(--r-color-gray-300);display:inline-flex;flex-direction:column;gap:-2px}.rm-table__sort--active{color:#4164ee}.rm-table__td{border-bottom:1px solid var(--r-color-gray-100);color:var(--r-color-gray-700);padding:10px 16px;vertical-align:top}.rm-table__td--center{text-align:center}.rm-table__td--right{text-align:right}.rm-table__row:last-child .rm-table__td{border-bottom:none}.rm-table__row--striped{background-color:var(--r-color-gray-50)}.rm-table__row--hoverable:hover{background-color:rgba(65,100,238,.06);cursor:pointer}.rm-table__empty{color:var(--r-color-gray-400);font-style:italic;padding:32px 16px;text-align:center}.rm-table__skeleton{animation:rm-table-shimmer 1.5s infinite;background:linear-gradient(90deg,#eee 25%,#e0e0e0 50%,#eee 75%);background-size:200% 100%;border-radius:4px;height:14px;width:80%}@keyframes rm-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}
+</style>

package/dist/runtime/components/ToolStrip.vue

@@ -0,0 +1,73 @@
+<!--
+  RmToolStrip - le strip d'actions fixe a droite. C'est une barre a part
+  entiere, pas un panneau replie dans le contenu : tuiles verticales toujours
+  visibles, panneau qui se superpose au clic.
+
+  Markup et classes de `app-shell.html` (`.rsidebar`, `.rstrip-top`,
+  `.rstrip-collapsed`, `.strip-icon`, `.strip-label`, `.strip-badge`).
+  Le skill recommande de conserver les tuiles Sources et Acces par defaut.
+-->
+<script setup lang="ts">
+export interface RmStripTile {
+  key: string
+  label: string
+  /** Icone Phosphor, nom en kebab-case sans le prefixe `ph-`. */
+  icon: string
+  /** Compteur affiche en pastille. Un zero n'est pas affiche. */
+  badge?: number | string
+  /** Point d'attention, sans compteur. */
+  dot?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  tiles: RmStripTile[]
+  /** Tuile dont le panneau est ouvert. */
+  active?: string | null
+  open?: boolean
+}>(), { active: null, open: false })
+
+const emit = defineEmits<{
+  select: [key: string]
+  toggle: []
+}>()
+</script>
+
+<template>
+  <aside class="rsidebar">
+    <div class="rstrip-top">
+      <button
+        class="topbar-toggle"
+        type="button"
+        aria-label="Panneau d'actions"
+        :aria-expanded="open"
+        @click="emit('toggle')"
+      >
+        <i class="ph ph-sidebar-simple" />
+      </button>
+    </div>
+
+    <div class="rstrip-collapsed">
+      <button
+        v-for="tile in tiles"
+        :key="tile.key"
+        class="strip-icon"
+        :class="{ active: active === tile.key }"
+        type="button"
+        :data-open-section="tile.key"
+        :aria-pressed="active === tile.key"
+        @click="emit('select', tile.key)"
+      >
+        <i :class="`ph ph-${tile.icon}`" />
+        <span class="strip-label">{{ tile.label }}</span>
+        <span v-if="tile.badge" class="strip-badge">{{ tile.badge }}</span>
+        <span v-else-if="tile.dot" class="dot" />
+      </button>
+    </div>
+
+    <slot />
+  </aside>
+</template>
+
+<style scoped>
+.strip-icon,.topbar-toggle{font:inherit;text-align:center}
+</style>

package/dist/runtime/components/TopBar.vue

@@ -0,0 +1,46 @@
+<!--
+  RmTopBar - l'en-tete d'analyse : titre de page et onglets de sous-vues.
+
+  Classes de `app-shell.html` (`.topbar`, `.pane-title`, `.ptabs`, `.ptab`).
+  Regle du skill : la sidebar porte les grands chapitres, ces onglets portent
+  les sous-analyses du chapitre actif. Ne pas melanger les deux.
+-->
+<script setup lang="ts">
+export interface RmPaneTab {
+  key: string
+  label: string
+}
+
+withDefaults(defineProps<{
+  title: string
+  tabs?: RmPaneTab[]
+  active?: string | null
+}>(), { tabs: () => [], active: null })
+
+const emit = defineEmits<{ select: [key: string] }>()
+</script>
+
+<template>
+  <div class="topbar">
+    <h1 class="pane-title">{{ title }}</h1>
+    <div v-if="tabs.length" class="ptabs" role="tablist">
+      <button
+        v-for="tab in tabs"
+        :key="tab.key"
+        class="ptab"
+        :class="{ active: active === tab.key }"
+        type="button"
+        role="tab"
+        :aria-selected="active === tab.key"
+        @click="emit('select', tab.key)"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ptab{font:inherit}
+</style>

package/dist/runtime/composables/useTheme.js

@@ -1,4 +1,5 @@
 import { onMounted, readonly, ref } from "vue";
+import { rmWithoutTransitions } from "../utils/transitionGuard.js";
 const CVD_CLASSES = {
   deutera: "cvd-deutera",
   protan: "cvd-protan",
@@ -16,15 +17,7 @@ export function useRomulusTheme() {
   const compact = ref(false);
   const cvd = ref("none");
   const textScale = ref("normal");
-  function apply(mutate) {
-    if (typeof document === "undefined") return;
-    const { body } = document;
-    body.classList.add("theme-switching");
-    mutate();
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => body.classList.remove("theme-switching"));
-    });
-  }
+  const apply = rmWithoutTransitions;
   const setNight = (value) => apply(() => {
     night.value = value;
     document.body.classList.toggle("night", value);

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

@@ -100,6 +100,13 @@ export interface RmSeriesInput {
     color?: string;
     /** Cle d'empilement : deux series avec la meme cle s'empilent. */
     stack?: string;
+    /**
+     * Axe des ordonnees, 0 a gauche et 1 a droite. A n'utiliser que pour deux
+     * series d'UNITES differentes : deux axes sur la meme unite laissent croire
+     * a un ecart qui n'existe pas. Le libelle de chaque axe est alors
+     * obligatoire, sinon le lecteur ne sait pas quelle courbe lire ou.
+     */
+    axis?: 0 | 1;
 }
 /** Bar chart vertical, une ou plusieurs series, empilable. */
 export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean): {
@@ -279,6 +286,8 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
     step?: boolean;
     smooth?: boolean;
     decal?: boolean;
+    /** Libelles des deux axes, requis des qu'une serie porte `axis: 1`. */
+    axisLabels?: [string, string];
 }): {
     legend: {
         top: number;
@@ -288,6 +297,13 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
             fontFamily: string;
         };
     } | undefined;
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        containLabel: boolean;
+    };
     xAxis: {
         splitLine: {
             show: boolean;
@@ -307,6 +323,16 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
         data: (string | number)[];
     };
     yAxis: {
+        type: string;
+        name: string | undefined;
+        nameLocation: string;
+        nameGap: number;
+        nameTextStyle: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+            align: string;
+        };
         axisLabel: {
             fontSize: number;
             color: string;
@@ -322,11 +348,61 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
                 color: string;
             };
         };
+    } | ({
         type: string;
-    };
+        name: string | undefined;
+        nameLocation: string;
+        nameGap: number;
+        nameTextStyle: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+            align: string;
+        };
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+    } | {
+        splitLine: {
+            show: boolean;
+        };
+        type: string;
+        name: string | undefined;
+        nameLocation: string;
+        nameGap: number;
+        nameTextStyle: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+            align: string;
+        };
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+    })[];
     series: {
         type: string;
         name: string | undefined;
+        yAxisIndex: 0 | 1 | undefined;
         data: (number | null)[];
         smooth: boolean;
         step: string | undefined;
@@ -364,13 +440,6 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
     textStyle: {
         fontFamily: string;
     };
-    grid: {
-        left: number;
-        right: number;
-        top: number;
-        bottom: number;
-        containLabel: boolean;
-    };
     tooltip: {
         trigger: string;
         backgroundColor: string;