@tekkare/romulus 0.1.7 → 0.1.9

package/dist/module.d.mts

@@ -3,9 +3,27 @@ import * as _nuxt_schema from '@nuxt/schema';
 interface RomulusModuleOptions {
     /**
      * Prefix for all Romulus components.
-     * @default 'R'
+     * @default 'Rm'
      */
     prefix?: string;
+    /**
+     * Injecte `base.css`, un reset global (`* { margin: 0 }`, `button { border: none }`,
+     * `a { text-decoration: none }`, couleur et fond sur `html`/`body`).
+     *
+     * A passer a `false` dans une app qui cohabite avec un autre socle CSS
+     * (Auriga, une feuille maison) : le reset y repeindrait toutes les pages
+     * existantes, pas seulement celles qui utilisent Romulus.
+     * @default true
+     */
+    baseStyles?: boolean;
+    /**
+     * Injecte `utilities.css`. Les classes ne sont pas prefixees (`.row`,
+     * `.column`, `.block`, `.border`, `.absolute`...) et entrent donc en
+     * collision avec le CSS d'une app existante. A passer a `false` en
+     * cohabitation ; les tokens et les composants restent disponibles.
+     * @default true
+     */
+    utilities?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<RomulusModuleOptions, RomulusModuleOptions, false>;
 

package/dist/module.d.ts

@@ -3,9 +3,27 @@ import * as _nuxt_schema from '@nuxt/schema';
 interface RomulusModuleOptions {
     /**
      * Prefix for all Romulus components.
-     * @default 'R'
+     * @default 'Rm'
      */
     prefix?: string;
+    /**
+     * Injecte `base.css`, un reset global (`* { margin: 0 }`, `button { border: none }`,
+     * `a { text-decoration: none }`, couleur et fond sur `html`/`body`).
+     *
+     * A passer a `false` dans une app qui cohabite avec un autre socle CSS
+     * (Auriga, une feuille maison) : le reset y repeindrait toutes les pages
+     * existantes, pas seulement celles qui utilisent Romulus.
+     * @default true
+     */
+    baseStyles?: boolean;
+    /**
+     * Injecte `utilities.css`. Les classes ne sont pas prefixees (`.row`,
+     * `.column`, `.block`, `.border`, `.absolute`...) et entrent donc en
+     * collision avec le CSS d'une app existante. A passer a `false` en
+     * cohabitation ; les tokens et les composants restent disponibles.
+     * @default true
+     */
+    utilities?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<RomulusModuleOptions, RomulusModuleOptions, false>;
 

package/dist/module.json

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

package/dist/module.mjs

@@ -10,15 +10,19 @@ const module = defineNuxtModule({
     }
   },
   defaults: {
-    prefix: "Rm"
+    prefix: "Rm",
+    baseStyles: true,
+    utilities: true
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
     nuxt.options.css.push(resolve(runtimeDir, "assets/styles/tokens.css"));
-    nuxt.options.css.push(resolve(runtimeDir, "assets/styles/base.css"));
+    if (options.baseStyles)
+      nuxt.options.css.push(resolve(runtimeDir, "assets/styles/base.css"));
     nuxt.options.css.push(resolve(runtimeDir, "assets/styles/components.css"));
-    nuxt.options.css.push(resolve(runtimeDir, "assets/styles/utilities.css"));
+    if (options.utilities)
+      nuxt.options.css.push(resolve(runtimeDir, "assets/styles/utilities.css"));
     await addComponentsDir({
       path: resolve(runtimeDir, "components"),
       prefix: options.prefix

package/dist/runtime/assets/styles/utilities.css

@@ -1 +1 @@
-.row{display:flex;flex-direction:row}.column{display:flex;flex-direction:column}.row-reverse{display:flex;flex-direction:row-reverse}.column-reverse{display:flex;flex-direction:column-reverse}.x-start{justify-content:flex-start}.x-center{justify-content:center}.x-end{justify-content:flex-end}.x-between{justify-content:space-between}.x-around{justify-content:space-around}.x-evenly{justify-content:space-evenly}.y-start{align-items:flex-start}.y-center{align-items:center}.y-end{align-items:flex-end}.y-between{align-content:space-between}.y-stretch{align-items:stretch}.y-baseline{align-items:baseline}.wrap{flex-wrap:wrap}.nowrap{flex-wrap:nowrap}.grow{flex-grow:1}.grow-0{flex-grow:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.self-start{align-self:flex-start}.self-center{align-self:center}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.w-full{width:100%}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.min-w-0{min-width:0}.h-full{height:100%}.h-auto{height:auto}.h-screen{height:100vh}.min-h-0{min-height:0}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-16{gap:16px}.gap-18{gap:18px}.gap-20{gap:20px}.gap-22{gap:22px}.gap-24{gap:24px}.gap-26{gap:26px}.gap-28{gap:28px}.gap-30{gap:30px}.gap-32{gap:32px}.gap-34{gap:34px}.gap-36{gap:36px}.gap-38{gap:38px}.gap-40{gap:40px}.gap-42{gap:42px}.gap-44{gap:44px}.gap-46{gap:46px}.gap-48{gap:48px}.gap-50{gap:50px}.gap-52{gap:52px}.gap-54{gap:54px}.gap-56{gap:56px}.gap-58{gap:58px}.gap-60{gap:60px}.gap-62{gap:62px}.gap-64{gap:64px}.gap-66{gap:66px}.gap-68{gap:68px}.gap-70{gap:70px}.gap-72{gap:72px}.gap-74{gap:74px}.gap-76{gap:76px}.gap-78{gap:78px}.gap-80{gap:80px}.p-0{padding:0}.p-4{padding:4px}.p-8{padding:8px}.p-12{padding:12px}.p-16{padding:16px}.p-20{padding:20px}.p-24{padding:24px}.p-32{padding:32px}.p-40{padding:40px}.p-48{padding:48px}.px-4{padding-left:4px;padding-right:4px}.px-8{padding-left:8px;padding-right:8px}.px-12{padding-left:12px;padding-right:12px}.px-16{padding-left:16px;padding-right:16px}.px-20{padding-left:20px;padding-right:20px}.px-24{padding-left:24px;padding-right:24px}.px-32{padding-left:32px;padding-right:32px}.py-4{padding-bottom:4px;padding-top:4px}.py-8{padding-bottom:8px;padding-top:8px}.py-12{padding-bottom:12px;padding-top:12px}.py-16{padding-bottom:16px;padding-top:16px}.py-20{padding-bottom:20px;padding-top:20px}.py-24{padding-bottom:24px;padding-top:24px}.py-32{padding-bottom:32px;padding-top:32px}.m-0{margin:0}.m-auto{margin:auto}.mx-auto{margin-right:auto}.ml-auto,.mx-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}.border{border:1px solid var(--r-color-gray-200)}.border-t{border-top:1px solid var(--r-color-gray-200)}.border-b{border-bottom:1px solid var(--r-color-gray-200)}.border-l{border-left:1px solid var(--r-color-gray-200)}.border-r{border-right:1px solid var(--r-color-gray-200)}.border-none{border:none}.rounded-sm{border-radius:var(--r-radius-sm)}.rounded-md{border-radius:var(--r-radius-md)}.rounded-lg{border-radius:var(--r-radius-lg)}.rounded-xl{border-radius:var(--r-radius-xl)}.rounded-full{border-radius:var(--r-radius-full)}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}
+.row{display:flex;flex-direction:row}.column{display:flex;flex-direction:column}.row-reverse{display:flex;flex-direction:row-reverse}.column-reverse{display:flex;flex-direction:column-reverse}.x-start{justify-content:flex-start}.x-center{justify-content:center}.x-end{justify-content:flex-end}.x-between{justify-content:space-between}.x-around{justify-content:space-around}.x-evenly{justify-content:space-evenly}.y-start{align-items:flex-start}.y-center{align-items:center}.y-end{align-items:flex-end}.y-between{align-content:space-between}.y-stretch{align-items:stretch}.y-baseline{align-items:baseline}.wrap{flex-wrap:wrap}.nowrap{flex-wrap:nowrap}.grow{flex-grow:1}.grow-0{flex-grow:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.self-start{align-self:flex-start}.self-center{align-self:center}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.w-full{width:100%}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.min-w-0{min-width:0}.h-full{height:100%}.h-auto{height:auto}.h-screen{height:100vh}.min-h-0{min-height:0}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.block{display:block}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.gap-12{gap:var(--space-12)}.gap-16{gap:var(--space-16)}.gap-20{gap:var(--space-20)}.gap-24{gap:var(--space-24)}.gap-32{gap:var(--space-32)}.gap-40{gap:var(--space-40)}.gap-48{gap:var(--space-48)}.p-0{padding:0}.p-2{padding:var(--space-2)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.p-12{padding:var(--space-12)}.p-16{padding:var(--space-16)}.p-20{padding:var(--space-20)}.p-24{padding:var(--space-24)}.p-32{padding:var(--space-32)}.p-40{padding:var(--space-40)}.p-48{padding:var(--space-48)}.px-2{padding-left:var(--space-2);padding-right:var(--space-2)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}.px-8{padding-left:var(--space-8);padding-right:var(--space-8)}.px-12{padding-left:var(--space-12);padding-right:var(--space-12)}.px-16{padding-left:var(--space-16);padding-right:var(--space-16)}.px-20{padding-left:var(--space-20);padding-right:var(--space-20)}.px-24{padding-left:var(--space-24);padding-right:var(--space-24)}.px-32{padding-left:var(--space-32);padding-right:var(--space-32)}.px-40{padding-left:var(--space-40);padding-right:var(--space-40)}.px-48{padding-left:var(--space-48);padding-right:var(--space-48)}.py-2{padding-bottom:var(--space-2);padding-top:var(--space-2)}.py-4{padding-bottom:var(--space-4);padding-top:var(--space-4)}.py-6{padding-bottom:var(--space-6);padding-top:var(--space-6)}.py-8{padding-bottom:var(--space-8);padding-top:var(--space-8)}.py-12{padding-bottom:var(--space-12);padding-top:var(--space-12)}.py-16{padding-bottom:var(--space-16);padding-top:var(--space-16)}.py-20{padding-bottom:var(--space-20);padding-top:var(--space-20)}.py-24{padding-bottom:var(--space-24);padding-top:var(--space-24)}.py-32{padding-bottom:var(--space-32);padding-top:var(--space-32)}.py-40{padding-bottom:var(--space-40);padding-top:var(--space-40)}.py-48{padding-bottom:var(--space-48);padding-top:var(--space-48)}.m-0{margin:0}.m-auto{margin:auto}.mx-auto{margin-right:auto}.ml-auto,.mx-auto{margin-left:auto}.mr-auto{margin-right:auto}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}.border{border:1px solid var(--border-default)}.border-t{border-top:1px solid var(--border-default)}.border-b{border-bottom:1px solid var(--border-default)}.border-l{border-left:1px solid var(--border-default)}.border-r{border-right:1px solid var(--border-default)}.border-none{border:none}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-pill)}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}

package/dist/runtime/components/BarChart.vue

@@ -0,0 +1,45 @@
+<!--
+  RmBarChart - bar chart vertical (une ou plusieurs series, empilable) ou
+  horizontal. Option construite par utils/chart, palette et theme resolus par
+  useChartTheme, donc mode nuit et modes daltoniens suivis automatiquement.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useChartTheme } from '../composables/useChartTheme'
+import { rmBarHorizontalOption, rmBarVerticalOption, type RmSeriesInput, RM_CHART_HEIGHTS } from '../utils/chart'
+
+const props = withDefaults(defineProps<{
+  /** Categories de l'axe : annees, libelles d'indicateur. */
+  categories: (string | number)[]
+  series: RmSeriesInput[]
+  horizontal?: boolean
+  height?: keyof typeof RM_CHART_HEIGHTS | number
+  description?: string
+  /** Formatage de la valeur en bout de barre (horizontal uniquement). */
+  labelFormatter?: (value: number) => string
+}>(), {
+  horizontal: false,
+  height: 'standard',
+  description: undefined,
+  labelFormatter: undefined,
+})
+
+const { theme, palette, decal } = useChartTheme()
+
+const option = computed(() =>
+  props.horizontal
+    ? rmBarHorizontalOption(
+        props.categories.map(String),
+        props.series[0]?.data ?? [],
+        theme.value,
+        palette.value.cat,
+        decal.value,
+        props.labelFormatter,
+      )
+    : rmBarVerticalOption(props.categories, props.series, theme.value, palette.value.cat, decal.value),
+)
+</script>
+
+<template>
+  <RmChart :option="option" :height="height" :description="description" />
+</template>

package/dist/runtime/components/Chart.vue

@@ -0,0 +1,75 @@
+<!--
+  RmChart - enveloppe ECharts bas niveau. Les composants RmBarChart,
+  RmLineChart, RmDonutChart et RmSparklineChart construisent leur `option` et
+  la passent ici ; une page peut aussi fournir une option brute pour un type
+  non couvert.
+
+  Renderer SVG impose, comme dans le design system : net en HiDPI, et
+  exportable en vectoriel depuis le menu de la chart-card.
+-->
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { RM_CHART_HEIGHTS } from '../utils/chart'
+
+const props = withDefaults(defineProps<{
+  /** Option ECharts complete. */
+  option: Record<string, unknown>
+  /** Hauteur : un palier normalise du design system, ou un nombre de pixels. */
+  height?: keyof typeof RM_CHART_HEIGHTS | number
+  /**
+   * Description textuelle du graphe pour les lecteurs d'ecran. ECharts genere
+   * un resume automatique, mais il enonce des series et des valeurs brutes :
+   * une phrase de lecture vaut mieux. Le survol n'etant jamais le seul acces
+   * a l'information, la donnee cle doit de toute facon rester dans le texte
+   * de l'ecran.
+   */
+  description?: string
+}>(), {
+  height: 'standard',
+  description: undefined,
+})
+
+const el = ref<HTMLElement | null>(null)
+const chart = shallowRef<{ setOption: (o: unknown, n?: boolean) => void, resize: () => void, dispose: () => void } | null>(null)
+let observer: ResizeObserver | null = null
+
+const heightPx = () =>
+  typeof props.height === 'number' ? props.height : RM_CHART_HEIGHTS[props.height]
+
+onMounted(async () => {
+  if (!el.value) return
+  const echarts = await import('echarts')
+  chart.value = echarts.init(el.value, undefined, { renderer: 'svg' })
+  chart.value.setOption(props.option)
+
+  // ResizeObserver plutot qu'un listener global sur window : un graphe dans un
+  // panneau repliable ou une grille change de taille sans que la fenetre bouge.
+  observer = new ResizeObserver(() => chart.value?.resize())
+  observer.observe(el.value)
+})
+
+// `true` en second argument : on remplace l'option au lieu de la fusionner.
+// Sans ca, retirer une serie la laisse affichee, parce qu'ECharts fusionne
+// par defaut et ne sait pas qu'elle a disparu.
+watch(() => props.option, (next) => chart.value?.setOption(next, true), { deep: true })
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  observer = null
+  chart.value?.dispose()
+  chart.value = null
+})
+
+defineExpose({ instance: chart })
+</script>
+
+<template>
+  <figure class="rm-chart">
+    <div ref="el" class="echart" :style="{ height: `${heightPx()}px` }" role="img" :aria-label="description" />
+    <figcaption v-if="description" class="sr-only">{{ description }}</figcaption>
+  </figure>
+</template>
+
+<style scoped>
+.rm-chart{margin:0}.echart{width:100%}
+</style>

package/dist/runtime/components/ChartCard.vue

@@ -34,6 +34,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   exportPng: []
+  exportSvg: []
   exportCsv: []
   exportXlsx: []
   copyLink: []
@@ -67,7 +68,7 @@ onBeforeUnmount(() => {
   document.removeEventListener('keydown', onEscape)
 })
 
-function run(action: 'exportPng' | 'exportCsv' | 'exportXlsx' | 'copyLink' | 'fullscreen') {
+function run(action: 'exportPng' | 'exportSvg' | 'exportCsv' | 'exportXlsx' | 'copyLink' | 'fullscreen') {
   menuOpen.value = false
   emit(action)
 }
@@ -94,6 +95,9 @@ function run(action: 'exportPng' | 'exportCsv' | 'exportXlsx' | 'copyLink' | 'fu
           <button class="cc-menu-item" type="button" role="menuitem" @click="run('exportPng')">
             <RmIcon name="Image" :size="14" /> Image PNG
           </button>
+          <button class="cc-menu-item" type="button" role="menuitem" @click="run('exportSvg')">
+            <RmIcon name="VectorThree" :size="14" /> Vectoriel SVG
+          </button>
           <button class="cc-menu-item" type="button" role="menuitem" @click="run('exportCsv')">
             <RmIcon name="FileCsv" :size="14" /> Données CSV
           </button>

package/dist/runtime/components/DonutChart.vue

@@ -0,0 +1,27 @@
+<!--
+  RmDonutChart - repartition en parts. Au-dela de six parts, regrouper le
+  reste en "Autres" : la palette categorielle s'arrete a six couleurs
+  distinguables sous dyschromatopsie.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useChartTheme } from '../composables/useChartTheme'
+import { rmDonutOption, RM_CHART_HEIGHTS } from '../utils/chart'
+
+const props = withDefaults(defineProps<{
+  data: { name: string, value: number }[]
+  height?: keyof typeof RM_CHART_HEIGHTS | number
+  description?: string
+}>(), {
+  height: 'standard',
+  description: undefined,
+})
+
+const { theme, palette, decal } = useChartTheme()
+
+const option = computed(() => rmDonutOption(props.data, theme.value, palette.value.cat, decal.value))
+</script>
+
+<template>
+  <RmChart :option="option" :height="height" :description="description" />
+</template>

package/dist/runtime/components/LineChart.vue

@@ -0,0 +1,42 @@
+<!--
+  RmLineChart - courbe, aire, ou marche d'escalier (`step`) pour les series de
+  prix et de decisions discretes.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useChartTheme } from '../composables/useChartTheme'
+import { rmLineOption, type RmSeriesInput, RM_CHART_HEIGHTS } from '../utils/chart'
+
+const props = withDefaults(defineProps<{
+  categories: (string | number)[]
+  series: RmSeriesInput[]
+  /** Remplissage degrade sous la courbe. */
+  area?: boolean
+  /** Marche d'escalier : prix, taux de remboursement, decisions datees. */
+  step?: boolean
+  smooth?: boolean
+  height?: keyof typeof RM_CHART_HEIGHTS | number
+  description?: string
+}>(), {
+  area: false,
+  step: false,
+  smooth: true,
+  height: 'standard',
+  description: undefined,
+})
+
+const { theme, palette, decal } = useChartTheme()
+
+const option = computed(() =>
+  rmLineOption(props.categories, props.series, theme.value, palette.value.cat, {
+    area: props.area,
+    step: props.step,
+    smooth: props.smooth,
+    decal: decal.value,
+  }),
+)
+</script>
+
+<template>
+  <RmChart :option="option" :height="height" :description="description" />
+</template>

package/dist/runtime/components/SparklineChart.vue

@@ -0,0 +1,33 @@
+<!--
+  RmSparklineChart - micro-courbe pour une cellule de tableau ou une tuile KPI.
+  Sans axes ni tooltip : elle donne une forme, pas une valeur. La valeur doit
+  rester lisible en texte a cote, le survol n'etant jamais le seul acces a
+  l'information.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useChartTheme } from '../composables/useChartTheme'
+import { rmSparklineOption, RM_CHART_HEIGHTS } from '../utils/chart'
+
+const props = withDefaults(defineProps<{
+  values: (number | null)[]
+  /** Couleur explicite ; par defaut la primaire de la palette active. */
+  color?: string
+  height?: keyof typeof RM_CHART_HEIGHTS | number
+  description?: string
+}>(), {
+  color: undefined,
+  height: 'sparkline',
+  description: undefined,
+})
+
+// Pas de `theme` ici : une sparkline n'a ni axe ni tooltip a colorer. Le
+// basculement jour/nuit la recalcule quand meme, parce que `palette` en depend.
+const { palette } = useChartTheme()
+
+const option = computed(() => rmSparklineOption(props.values, props.color ?? palette.value.primary))
+</script>
+
+<template>
+  <RmChart :option="option" :height="height" :description="description" />
+</template>

package/dist/runtime/composables/useChartTheme.d.ts

@@ -0,0 +1,7 @@
+export declare function useChartTheme(): {
+    night: import("vue").Ref<boolean, boolean>;
+    cvd: import("vue").Ref<boolean, boolean>;
+    theme: import("vue").ComputedRef<import("../utils/chart").RmChartTheme>;
+    palette: import("vue").ComputedRef<import("../utils/chart").RmPalette>;
+    decal: import("vue").ComputedRef<boolean>;
+};

package/dist/runtime/composables/useChartTheme.js

@@ -0,0 +1,27 @@
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { rmChartTheme, rmPalette } from "../utils/chart.js";
+const CVD_CLASSES = ["cvd-deutera", "cvd-protan", "cvd-trita", "cvd-mono"];
+export function useChartTheme() {
+  const night = ref(false);
+  const cvd = ref(false);
+  let observer = null;
+  function read() {
+    if (typeof document === "undefined") return;
+    const list = document.body.classList;
+    night.value = list.contains("night");
+    cvd.value = CVD_CLASSES.some((c) => list.contains(c));
+  }
+  onMounted(() => {
+    read();
+    observer = new MutationObserver(read);
+    observer.observe(document.body, { attributes: true, attributeFilter: ["class"] });
+  });
+  onBeforeUnmount(() => {
+    observer?.disconnect();
+    observer = null;
+  });
+  const theme = computed(() => rmChartTheme(night.value));
+  const palette = computed(() => rmPalette(cvd.value ? "cvdSafe" : "default", night.value));
+  const decal = computed(() => cvd.value);
+  return { night, cvd, theme, palette, decal };
+}

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

@@ -0,0 +1,475 @@
+/**
+ * Theme et constructeurs d'option ECharts.
+ *
+ * Porte depuis le design system : palettes et resolveur de `reference.html`
+ * (`window.OIP_PALETTES` / `CHART_THEME`), constructeurs d'option de
+ * `references/charts.md`. ECharts v5 est la librairie standard de tous les
+ * dashboards Tekkare ; ne pas en introduire une seconde.
+ *
+ * Les couleurs sont ici en litteral et non en `var(--...)` : ECharts peint
+ * dans un canvas SVG qu'il genere lui-meme, il ne resout pas les variables
+ * CSS. C'est la seule raison acceptee d'ecrire un hex hors tokens.
+ */
+export interface RmPalette {
+    /** Palette categorielle, 6 couleurs maximum sans ordre. Au-dela, passer en sequentiel ou regrouper en "Autres". */
+    cat: string[];
+    primary: string;
+    accent: string;
+    neutral: string;
+    /** Palette sequentielle, du plus clair au plus fonce : heatmaps, choroplethes. */
+    seq: string[];
+}
+/**
+ * Les quatre palettes du design system. `cvdSafe` est la palette Okabe-Ito,
+ * validee pour les trois principaux types de dyschromatopsie ; le violet OIP
+ * y devient le bleu #0072B2 qui joue le role de couleur primaire.
+ */
+export declare const RM_PALETTES: Record<string, RmPalette>;
+/** Palettes par verticale produit, cf. references/charts.md. */
+export declare const RM_PRODUCT_PALETTES: Record<string, string[]>;
+/** Palette divergente : negatif vers neutre vers positif. */
+export declare const RM_DIVERGING: string[];
+export interface RmChartTheme {
+    night: boolean;
+    textColor: string;
+    mutedColor: string;
+    dimmedColor: string;
+    splitLine: string;
+    axisLine: string;
+    tooltipBg: string;
+    tooltipText: string;
+    tooltipBorder: string;
+    backgroundColor: string;
+}
+export declare const rmChartTheme: (night: boolean) => RmChartTheme;
+/**
+ * Resout la palette active. En mode nuit, la variante *Dark prend le relais
+ * quand elle existe : les teintes du mode jour ne contrastent pas assez sur
+ * #0E0E14 et une serie devient illisible, ce qui est un bug d'accessibilite
+ * et pas un choix esthetique.
+ */
+export declare function rmPalette(name?: string, night?: boolean): RmPalette;
+/** Hauteurs normalisees du design system. */
+export declare const RM_CHART_HEIGHTS: {
+    readonly sparkline: 48;
+    readonly kpi: 80;
+    readonly compact: 200;
+    readonly standard: 260;
+    readonly large: 320;
+    readonly full: 360;
+};
+/**
+ * Socle commun a tous les graphes. `decal` active le double encodage par
+ * motifs : sur un graphe multi-series, la couleur seule ne suffit pas, c'est
+ * une regle du design system et non une option.
+ */
+export declare function rmBaseOption(theme: RmChartTheme, decal?: boolean): {
+    backgroundColor: string;
+    animation: boolean;
+    aria: {
+        enabled: boolean;
+        decal: {
+            show: boolean;
+        };
+    };
+    textStyle: {
+        fontFamily: string;
+    };
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        containLabel: boolean;
+    };
+    tooltip: {
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+    };
+};
+export interface RmSeriesInput {
+    name?: string;
+    data: (number | null)[];
+    color?: string;
+    /** Cle d'empilement : deux series avec la meme cle s'empilent. */
+    stack?: string;
+}
+/** Bar chart vertical, une ou plusieurs series, empilable. */
+export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean): {
+    legend: {
+        top: number;
+        textStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    } | undefined;
+    xAxis: {
+        splitLine: {
+            show: boolean;
+        };
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+        data: (string | number)[];
+    };
+    yAxis: {
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+    };
+    series: {
+        type: string;
+        name: string | undefined;
+        stack: string | undefined;
+        data: (number | null)[];
+        itemStyle: {
+            color: string;
+            borderRadius: number[];
+        };
+    }[];
+    backgroundColor: string;
+    animation: boolean;
+    aria: {
+        enabled: boolean;
+        decal: {
+            show: boolean;
+        };
+    };
+    textStyle: {
+        fontFamily: string;
+    };
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        containLabel: boolean;
+    };
+    tooltip: {
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+    };
+};
+/** Bar chart horizontal, avec valeur affichee en bout de barre. */
+export declare function rmBarHorizontalOption(labels: string[], values: (number | null)[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: (value: number) => string): {
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        containLabel: boolean;
+    };
+    xAxis: {
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+    };
+    yAxis: {
+        splitLine: {
+            show: boolean;
+        };
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+        data: string[];
+    };
+    series: {
+        type: string;
+        data: (number | null)[];
+        itemStyle: {
+            color: (params: {
+                dataIndex: number;
+            }) => string;
+            borderRadius: number[];
+        };
+        label: {
+            show: boolean;
+            position: string;
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+            formatter: ((p: {
+                value: number;
+            }) => string) | undefined;
+        };
+    }[];
+    backgroundColor: string;
+    animation: boolean;
+    aria: {
+        enabled: boolean;
+        decal: {
+            show: boolean;
+        };
+    };
+    textStyle: {
+        fontFamily: string;
+    };
+    tooltip: {
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+    };
+};
+/** Line ou area chart. `step` produit la marche d'escalier des series de prix. */
+export declare function rmLineOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], options?: {
+    area?: boolean;
+    step?: boolean;
+    smooth?: boolean;
+    decal?: boolean;
+}): {
+    legend: {
+        top: number;
+        textStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    } | undefined;
+    xAxis: {
+        splitLine: {
+            show: boolean;
+        };
+        boundaryGap: boolean;
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+        data: (string | number)[];
+    };
+    yAxis: {
+        axisLabel: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+        axisLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        splitLine: {
+            lineStyle: {
+                color: string;
+            };
+        };
+        type: string;
+    };
+    series: {
+        type: string;
+        name: string | undefined;
+        data: (number | null)[];
+        smooth: boolean;
+        step: string | undefined;
+        symbol: string;
+        symbolSize: number;
+        lineStyle: {
+            color: string;
+            width: number;
+        };
+        itemStyle: {
+            color: string;
+        };
+        areaStyle: {
+            color: {
+                type: string;
+                x: number;
+                y: number;
+                x2: number;
+                y2: number;
+                colorStops: {
+                    offset: number;
+                    color: string;
+                }[];
+            };
+        } | undefined;
+    }[];
+    backgroundColor: string;
+    animation: boolean;
+    aria: {
+        enabled: boolean;
+        decal: {
+            show: boolean;
+        };
+    };
+    textStyle: {
+        fontFamily: string;
+    };
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+        containLabel: boolean;
+    };
+    tooltip: {
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+    };
+};
+/** Donut. Au-dela de 6 parts, regrouper le reste en "Autres". */
+export declare function rmDonutOption(data: {
+    name: string;
+    value: number;
+}[], theme: RmChartTheme, palette: string[], decal?: boolean): {
+    grid: undefined;
+    tooltip: {
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+    };
+    legend: {
+        bottom: number;
+        textStyle: {
+            color: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    };
+    series: {
+        type: string;
+        radius: string[];
+        center: string[];
+        data: {
+            value: number;
+            name: string;
+            itemStyle: {
+                color: string;
+            };
+        }[];
+        label: {
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+        };
+    }[];
+    backgroundColor: string;
+    animation: boolean;
+    aria: {
+        enabled: boolean;
+        decal: {
+            show: boolean;
+        };
+    };
+    textStyle: {
+        fontFamily: string;
+    };
+};
+/** Sparkline : pas d'axes, pas de tooltip, destinee a une cellule ou une tuile KPI. */
+export declare function rmSparklineOption(values: (number | null)[], color: string): {
+    backgroundColor: string;
+    animation: boolean;
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+    xAxis: {
+        type: string;
+        show: boolean;
+        data: number[];
+    };
+    yAxis: {
+        type: string;
+        show: boolean;
+    };
+    tooltip: {
+        show: boolean;
+    };
+    series: {
+        type: string;
+        data: (number | null)[];
+        smooth: boolean;
+        symbol: string;
+        lineStyle: {
+            color: string;
+            width: number;
+        };
+        areaStyle: {
+            color: string;
+        };
+    }[];
+};

package/dist/runtime/utils/chart.js

@@ -0,0 +1,209 @@
+export const RM_PALETTES = {
+  default: {
+    cat: ["#2100AD", "#00D4A8", "#F59E0B", "#4164EE", "#EC4899", "#6B3FFF"],
+    primary: "#2100AD",
+    accent: "#6B3FFF",
+    neutral: "#D6CCFF",
+    seq: ["#EEF1FE", "#D6CCFF", "#B485FF", "#8B5CF6", "#6B3FFF", "#2100AD"]
+  },
+  defaultDark: {
+    cat: ["#9B7CFF", "#3DD9B9", "#FBBF24", "#7AA0FF", "#F472B6", "#B485FF"],
+    primary: "#9B7CFF",
+    accent: "#B485FF",
+    neutral: "#4A3F70",
+    seq: ["#1A1A24", "#2D2A42", "#4A3F70", "#7C5FE6", "#9B7CFF", "#D6CCFF"]
+  },
+  cvdSafe: {
+    cat: ["#0072B2", "#E69F00", "#009E73", "#CC79A7", "#56B4E9", "#F0E442"],
+    primary: "#0072B2",
+    accent: "#E69F00",
+    neutral: "#A3C9E2",
+    seq: ["#F0F7FB", "#D5E5F0", "#A3C9E2", "#56B4E9", "#0072B2", "#003E5C"]
+  },
+  cvdSafeDark: {
+    cat: ["#4DA8E5", "#FFB84D", "#3DD9A8", "#E5A0C8", "#7DD3F5", "#F5E76A"],
+    primary: "#4DA8E5",
+    accent: "#FFB84D",
+    neutral: "#3A4A5C",
+    seq: ["#1A1A24", "#2A3A4A", "#3A5A78", "#4DA8E5", "#7DD3F5", "#B3E5FC"]
+  }
+};
+export const RM_PRODUCT_PALETTES = {
+  generic: ["#2100AD", "#4164EE", "#7B9EF5", "#B8C8F8", "#DBDEF0"],
+  healthcare: ["#4164EE", "#1A2A8F", "#00D4A8", "#7B9EF5", "#B8C8F8"],
+  pharma: ["#F7520E", "#FF8C00", "#FFD600", "#FCA982", "#DBDEF0"],
+  discovery: ["#07816F", "#2ECC71", "#56CCF2", "#0DA38D", "#DBDEF0"]
+};
+export const RM_DIVERGING = ["#E53535", "#FCA5A5", "#F9F9FA", "#86EFAC", "#16A34A"];
+const THEME_DAY = {
+  night: false,
+  textColor: "#1E293B",
+  mutedColor: "#525670",
+  dimmedColor: "#878CA6",
+  splitLine: "#F0F1F7",
+  axisLine: "#DBDEF0",
+  tooltipBg: "#1E293B",
+  tooltipText: "#FFFFFF",
+  tooltipBorder: "#344159",
+  backgroundColor: "transparent"
+};
+const THEME_NIGHT = {
+  night: true,
+  textColor: "#E5E7F0",
+  mutedColor: "#B8BCD0",
+  dimmedColor: "#7B8099",
+  splitLine: "#2F2F40",
+  axisLine: "#3A3A4E",
+  tooltipBg: "#232330",
+  tooltipText: "#E5E7F0",
+  tooltipBorder: "#3A3A4E",
+  backgroundColor: "transparent"
+};
+export const rmChartTheme = (night) => night ? THEME_NIGHT : THEME_DAY;
+export function rmPalette(name = "default", night = false) {
+  const dark = `${name}Dark`;
+  if (night && RM_PALETTES[dark]) return RM_PALETTES[dark];
+  return RM_PALETTES[name] ?? RM_PALETTES.default;
+}
+export const RM_CHART_HEIGHTS = {
+  sparkline: 48,
+  kpi: 80,
+  compact: 200,
+  standard: 260,
+  large: 320,
+  full: 360
+};
+const FONT = "Figtree, system-ui, sans-serif";
+export function rmBaseOption(theme, decal = false) {
+  return {
+    backgroundColor: theme.backgroundColor,
+    animation: true,
+    aria: { enabled: true, decal: { show: decal } },
+    textStyle: { fontFamily: FONT },
+    grid: { left: 48, right: 16, top: 24, bottom: 36, containLabel: true },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: theme.tooltipBg,
+      textStyle: { color: theme.tooltipText, fontFamily: FONT, fontSize: 12 },
+      borderColor: theme.tooltipBorder,
+      borderWidth: 1
+    }
+  };
+}
+const axisCommon = (theme) => ({
+  axisLabel: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT },
+  axisLine: { lineStyle: { color: theme.axisLine } },
+  splitLine: { lineStyle: { color: theme.splitLine } }
+});
+export function rmBarVerticalOption(categories, series, theme, palette, decal = false) {
+  return {
+    ...rmBaseOption(theme, decal),
+    legend: series.length > 1 ? { top: 0, textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } } : void 0,
+    xAxis: { type: "category", data: categories, ...axisCommon(theme), splitLine: { show: false } },
+    yAxis: { type: "value", ...axisCommon(theme) },
+    series: series.map((s, i) => ({
+      type: "bar",
+      name: s.name,
+      stack: s.stack,
+      data: s.data,
+      itemStyle: { color: s.color ?? palette[i % palette.length], borderRadius: [3, 3, 0, 0] }
+    }))
+  };
+}
+export function rmBarHorizontalOption(labels, values, theme, palette, decal = false, formatter) {
+  return {
+    ...rmBaseOption(theme, decal),
+    grid: { left: 140, right: 60, top: 16, bottom: 24, containLabel: true },
+    xAxis: { type: "value", ...axisCommon(theme) },
+    yAxis: { type: "category", data: labels, ...axisCommon(theme), splitLine: { show: false } },
+    series: [{
+      type: "bar",
+      data: values,
+      itemStyle: {
+        color: (params) => palette[params.dataIndex % palette.length],
+        borderRadius: [0, 3, 3, 0]
+      },
+      label: {
+        show: true,
+        position: "right",
+        fontSize: 11,
+        color: theme.mutedColor,
+        fontFamily: FONT,
+        formatter: formatter ? (p) => formatter(p.value) : void 0
+      }
+    }]
+  };
+}
+export function rmLineOption(categories, series, theme, palette, options = {}) {
+  const { area = false, step = false, smooth = true, decal = false } = options;
+  return {
+    ...rmBaseOption(theme, decal),
+    legend: series.length > 1 ? { top: 0, textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } } : void 0,
+    xAxis: { type: "category", data: categories, ...axisCommon(theme), splitLine: { show: false }, boundaryGap: false },
+    yAxis: { type: "value", ...axisCommon(theme) },
+    series: series.map((s, i) => {
+      const color = s.color ?? palette[i % palette.length];
+      return {
+        type: "line",
+        name: s.name,
+        data: s.data,
+        smooth: step ? false : smooth,
+        step: step ? "end" : void 0,
+        symbol: "circle",
+        symbolSize: 5,
+        lineStyle: { color, width: 2.5 },
+        itemStyle: { color },
+        areaStyle: area ? {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: `${color}30` },
+              { offset: 1, color: `${color}00` }
+            ]
+          }
+        } : void 0
+      };
+    })
+  };
+}
+export function rmDonutOption(data, theme, palette, decal = false) {
+  return {
+    ...rmBaseOption(theme, decal),
+    grid: void 0,
+    tooltip: { ...rmBaseOption(theme, decal).tooltip, trigger: "item" },
+    legend: { bottom: 0, textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } },
+    series: [{
+      type: "pie",
+      radius: ["45%", "70%"],
+      center: ["50%", "46%"],
+      data: data.map((d, i) => ({
+        value: d.value,
+        name: d.name,
+        itemStyle: { color: palette[i % palette.length] }
+      })),
+      label: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT }
+    }]
+  };
+}
+export function rmSparklineOption(values, color) {
+  return {
+    backgroundColor: "transparent",
+    animation: true,
+    grid: { left: 0, right: 0, top: 2, bottom: 2 },
+    xAxis: { type: "category", show: false, data: values.map((_, i) => i) },
+    yAxis: { type: "value", show: false },
+    tooltip: { show: false },
+    series: [{
+      type: "line",
+      data: values,
+      smooth: true,
+      symbol: "none",
+      lineStyle: { color, width: 1.5 },
+      areaStyle: { color: `${color}20` }
+    }]
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",
@@ -27,7 +27,8 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.16.0",
-    "@phosphor-icons/vue": "^2.2.1"
+    "@phosphor-icons/vue": "^2.2.1",
+    "echarts": "^5.6.0"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.4",