@tekkare/romulus 0.1.155 → 0.1.157

package/dist/module.json

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

package/dist/runtime/components/BarChart.vue

@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useChartTheme } from '../composables/useChartTheme'
-import { rmBarHorizontalOption, rmBarVerticalOption, type RmSeriesInput, RM_CHART_HEIGHTS } from '../utils/chart'
+import { rmBarHorizontalOption, rmBarVerticalOption, type RmBarLabelFormatter, type RmSeriesInput, RM_CHART_HEIGHTS } from '../utils/chart'
 
 const props = withDefaults(defineProps<{
   /** Categories de l'axe : annees, libelles d'indicateur. */
@@ -15,8 +15,12 @@ const props = withDefaults(defineProps<{
   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
+  /**
+   * Etiquette de chaque barre : en bout de barre a l'horizontale, au-dessus a
+   * la verticale. Sans elle, la valeur se lit sur l'axe et dans l'infobulle,
+   * ce qui suffit des que les barres sont nombreuses.
+   */
+  labelFormatter?: RmBarLabelFormatter
 }>(), {
   horizontal: false,
   height: 'standard',
@@ -36,7 +40,14 @@ const option = computed(() =>
         decal.value,
         props.labelFormatter,
       )
-    : rmBarVerticalOption(props.categories, props.series, theme.value, palette.value.cat, decal.value),
+    : rmBarVerticalOption(
+        props.categories,
+        props.series,
+        theme.value,
+        palette.value.cat,
+        decal.value,
+        props.labelFormatter,
+      ),
 )
 </script>
 

package/dist/runtime/components/Notes.vue

@@ -54,6 +54,13 @@ export interface RmNote {
   updated?: string
   /** Icone Phosphor. Par defaut celle de la categorie. */
   icon?: string
+  /**
+   * Etiquette libre, posee apres la categorie. Elle dit d'ou la note vient
+   * plutot que ce qu'elle raconte : l'appelant s'en sert pour un public
+   * particulier (une equipe qui relit ses rattachements), pas pour le lecteur.
+   * A ne pas confondre avec `badge`, qui signe le panneau entier.
+   */
+  tag?: string
   /** Teinte de la pastille. Par defaut celle de la categorie. */
   tone?: RmNoteTone
   sections: RmNoteSection[]
@@ -294,6 +301,9 @@ function onLink(to: string) {
                 <span class="rm-notes__tag" :class="`rm-notes__tag--${noteTone(note)}`">
                   {{ categoryLabel(note) }}
                 </span>
+                <span v-if="note.tag" class="rm-notes__tag rm-notes__tag--muted">
+                  {{ note.tag }}
+                </span>
                 <span v-if="updatedLabel(note)" class="rm-notes__cell">
                   <RmIcon name="Clock" :size="13" />
                   {{ T.updated }} {{ updatedLabel(note) }}
@@ -376,5 +386,5 @@ function onLink(to: string) {
 </template>
 
 <style scoped>
-.rm-notes{align-self:stretch;flex-direction:column;font-family:var(--font-sans)}.rm-notes,.rm-notes__head{display:flex;gap:var(--space-12)}.rm-notes__head{align-items:center;justify-content:space-between}.rm-notes__title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-22);font-weight:var(--weight-bold);margin:0}.rm-notes__badge{align-items:center;background:var(--bg-hover);border-radius:var(--radius-pill);color:var(--color-secondary);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;padding:var(--space-4) var(--space-10);text-transform:uppercase}.rm-notes__desc{color:var(--text-secondary);font-size:var(--font-13);line-height:1.5;margin:0}.rm-notes__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-muted);display:flex;gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-notes__search:focus-within{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.1)}.rm-notes__search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:inherit;font-size:var(--font-13);min-width:0;outline:none}.rm-notes__search input::-moz-placeholder{color:var(--text-muted)}.rm-notes__search input::placeholder{color:var(--text-muted)}.rm-notes__chips{display:flex;flex-wrap:wrap;gap:var(--space-6)}.rm-notes__chip{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-12);gap:var(--space-4);padding:5px var(--space-10)}.rm-notes__chip:hover{background:var(--bg-surface-3)}.rm-notes__chip--on{background:var(--bg-hover);border-color:var(--color-violet-pale);color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-notes__chip-count{font-variant-numeric:tabular-nums;opacity:.8}.rm-notes__list,.rm-notes__note{display:flex;flex-direction:column;gap:var(--space-8)}.rm-notes__note{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-16);transition:border-color var(--duration-fast) var(--ease-out)}.rm-notes__note:hover{border-color:var(--color-violet-pale)}.rm-notes__note--open{border-color:var(--color-secondary)}.rm-notes__note-head,.rm-notes__note-id{align-items:flex-start;display:flex;gap:var(--space-12)}.rm-notes__note-id{background:none;border:none;cursor:pointer;flex:1;font-family:inherit;min-width:0;padding:0;text-align:left}.rm-notes__note-icon{align-items:center;border-radius:var(--radius-lg);display:flex;flex-shrink:0;height:36px;justify-content:center;width:36px}.rm-notes__note-icon--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-notes__note-icon--info{background:var(--color-info-bg);color:var(--color-info)}.rm-notes__note-icon--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-notes__note-icon--success{background:var(--color-success-bg);color:var(--color-success)}.rm-notes__note-icon--neutral{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__note-text{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}.rm-notes__note-title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-16);font-weight:var(--weight-bold)}.rm-notes__note-meta{align-items:center;color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--font-11);gap:var(--space-8)}.rm-notes__cell{align-items:center;display:inline-flex;gap:var(--space-4)}.rm-notes__tag{border-radius:var(--radius-pill);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.04em;padding:var(--space-2) var(--space-6);text-transform:uppercase}.rm-notes__tag--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-notes__tag--info{background:var(--color-info-bg);color:var(--color-info)}.rm-notes__tag--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-notes__tag--success{background:var(--color-success-bg);color:var(--color-success)}.rm-notes__tag--neutral{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__caret{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.rm-notes__caret:hover{background:var(--bg-surface-3)}.rm-notes__summary{color:var(--text-secondary);font-size:var(--font-13);line-height:1.6;margin:0}.rm-notes__body{border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:var(--space-16);padding-top:var(--space-12)}.rm-notes__section{display:flex;flex-direction:column;gap:var(--space-8)}.rm-notes__eyebrow{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;text-transform:uppercase}.rm-notes__p,.rm-notes__ul{color:var(--text-secondary);font-size:var(--font-13);line-height:1.65;margin:0}.rm-notes__ul{padding-left:var(--space-20)}.rm-notes__ul--terms{list-style:none;padding-left:0}.rm-notes__p b,.rm-notes__ul b{color:var(--text-primary)}.rm-notes__example{background:var(--bg-surface-3);border-left:3px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--font-12);margin:0;padding:var(--space-8) var(--space-12)}.rm-notes__link{align-items:center;color:var(--color-primary);cursor:pointer;display:inline-flex;font-size:var(--font-13);font-weight:var(--weight-semibold);gap:var(--space-4);text-decoration:underline;text-underline-offset:3px}
+.rm-notes{align-self:stretch;flex-direction:column;font-family:var(--font-sans)}.rm-notes,.rm-notes__head{display:flex;gap:var(--space-12)}.rm-notes__head{align-items:center;justify-content:space-between}.rm-notes__title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-22);font-weight:var(--weight-bold);margin:0}.rm-notes__badge{align-items:center;background:var(--bg-hover);border-radius:var(--radius-pill);color:var(--color-secondary);display:inline-flex;font-size:var(--font-10);font-weight:var(--weight-bold);gap:var(--space-4);letter-spacing:.06em;padding:var(--space-4) var(--space-10);text-transform:uppercase}.rm-notes__desc{color:var(--text-secondary);font-size:var(--font-13);line-height:1.5;margin:0}.rm-notes__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-muted);display:flex;gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-notes__search:focus-within{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.1)}.rm-notes__search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:inherit;font-size:var(--font-13);min-width:0;outline:none}.rm-notes__search input::-moz-placeholder{color:var(--text-muted)}.rm-notes__search input::placeholder{color:var(--text-muted)}.rm-notes__chips{display:flex;flex-wrap:wrap;gap:var(--space-6)}.rm-notes__chip{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-12);gap:var(--space-4);padding:5px var(--space-10)}.rm-notes__chip:hover{background:var(--bg-surface-3)}.rm-notes__chip--on{background:var(--bg-hover);border-color:var(--color-violet-pale);color:var(--color-primary);font-weight:var(--weight-semibold)}.rm-notes__chip-count{font-variant-numeric:tabular-nums;opacity:.8}.rm-notes__list,.rm-notes__note{display:flex;flex-direction:column;gap:var(--space-8)}.rm-notes__note{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-16);transition:border-color var(--duration-fast) var(--ease-out)}.rm-notes__note:hover{border-color:var(--color-violet-pale)}.rm-notes__note--open{border-color:var(--color-secondary)}.rm-notes__note-head,.rm-notes__note-id{align-items:flex-start;display:flex;gap:var(--space-12)}.rm-notes__note-id{background:none;border:none;cursor:pointer;flex:1;font-family:inherit;min-width:0;padding:0;text-align:left}.rm-notes__note-icon{align-items:center;border-radius:var(--radius-lg);display:flex;flex-shrink:0;height:36px;justify-content:center;width:36px}.rm-notes__note-icon--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-notes__note-icon--info{background:var(--color-info-bg);color:var(--color-info)}.rm-notes__note-icon--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-notes__note-icon--success{background:var(--color-success-bg);color:var(--color-success)}.rm-notes__note-icon--neutral{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__note-text{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}.rm-notes__note-title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-16);font-weight:var(--weight-bold)}.rm-notes__note-meta{align-items:center;color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--font-11);gap:var(--space-8)}.rm-notes__cell{align-items:center;display:inline-flex;gap:var(--space-4)}.rm-notes__tag{border-radius:var(--radius-pill);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.04em;padding:var(--space-2) var(--space-6);text-transform:uppercase}.rm-notes__tag--muted{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__tag--primary{background:var(--bg-hover);color:var(--color-secondary)}.rm-notes__tag--info{background:var(--color-info-bg);color:var(--color-info)}.rm-notes__tag--warning{background:var(--color-warning-bg);color:var(--color-warning)}.rm-notes__tag--success{background:var(--color-success-bg);color:var(--color-success)}.rm-notes__tag--neutral{background:var(--bg-surface-2);color:var(--text-secondary)}.rm-notes__caret{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.rm-notes__caret:hover{background:var(--bg-surface-3)}.rm-notes__summary{color:var(--text-secondary);font-size:var(--font-13);line-height:1.6;margin:0}.rm-notes__body{border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:var(--space-16);padding-top:var(--space-12)}.rm-notes__section{display:flex;flex-direction:column;gap:var(--space-8)}.rm-notes__eyebrow{color:var(--text-muted);font-size:var(--font-10);font-weight:var(--weight-bold);letter-spacing:.08em;margin:0;text-transform:uppercase}.rm-notes__p,.rm-notes__ul{color:var(--text-secondary);font-size:var(--font-13);line-height:1.65;margin:0}.rm-notes__ul{padding-left:var(--space-20)}.rm-notes__ul--terms{list-style:none;padding-left:0}.rm-notes__p b,.rm-notes__ul b{color:var(--text-primary)}.rm-notes__example{background:var(--bg-surface-3);border-left:3px solid var(--color-primary);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--font-12);margin:0;padding:var(--space-8) var(--space-12)}.rm-notes__link{align-items:center;color:var(--color-primary);cursor:pointer;display:inline-flex;font-size:var(--font-13);font-weight:var(--weight-semibold);gap:var(--space-4);text-decoration:underline;text-underline-offset:3px}
 </style>

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

@@ -177,7 +177,13 @@ export interface RmSeriesInput {
     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): {
+/**
+ * Etiquette d'une barre. L'index est donne parce que la valeur seule ne suffit
+ * pas toujours : une part se lit contre un total que l'appelant tient a cote
+ * (« 1 240 (18 %) »), et c'est l'index qui la retrouve.
+ */
+export type RmBarLabelFormatter = (value: number, index: number) => string;
+export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter): {
     tooltip: {
         trigger: string;
         backgroundColor: string;
@@ -282,6 +288,17 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
             color: string;
             borderRadius: number[];
         };
+        label: {
+            show: boolean;
+            position: string;
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+            formatter: (p: {
+                value: number;
+                dataIndex: number;
+            }) => string;
+        } | undefined;
     }[];
     backgroundColor: string;
     animation: boolean;
@@ -296,7 +313,7 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
     };
 };
 /** 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): {
+export declare function rmBarHorizontalOption(labels: string[], values: (number | null)[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter): {
     grid: {
         left: number;
         right: number;
@@ -356,6 +373,7 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
             fontFamily: string;
             formatter: ((p: {
                 value: number;
+                dataIndex: number;
             }) => string) | undefined;
         };
     }[];

package/dist/runtime/utils/chart.js

@@ -140,7 +140,7 @@ const axisCommon = (theme) => ({
   axisLine: { lineStyle: { color: theme.axisLine } },
   splitLine: { lineStyle: { color: theme.splitLine } }
 });
-export function rmBarVerticalOption(categories, series, theme, palette, decal = false) {
+export function rmBarVerticalOption(categories, series, theme, palette, decal = false, formatter) {
   return {
     ...rmBaseOption(theme, decal),
     tooltip: { ...rmBaseOption(theme, decal).tooltip, trigger: rmTooltipTrigger(series.length) },
@@ -155,7 +155,17 @@ export function rmBarVerticalOption(categories, series, theme, palette, decal =
       name: s.name,
       stack: s.stack,
       data: s.data,
-      itemStyle: { color: s.color ?? rmSeriesColor(palette, i), borderRadius: [3, 3, 0, 0] }
+      itemStyle: { color: s.color ?? rmSeriesColor(palette, i), borderRadius: [3, 3, 0, 0] },
+      // L'etiquette ne se pose que si l'appelant la demande : sur une serie
+      // longue elle se chevaucherait, et l'axe dit deja la valeur.
+      label: formatter ? {
+        show: true,
+        position: "top",
+        fontSize: 11,
+        color: theme.mutedColor,
+        fontFamily: FONT,
+        formatter: (p) => formatter(p.value, p.dataIndex)
+      } : void 0
     }))
   };
 }
@@ -178,7 +188,7 @@ export function rmBarHorizontalOption(labels, values, theme, palette, decal = fa
         fontSize: 11,
         color: theme.mutedColor,
         fontFamily: FONT,
-        formatter: formatter ? (p) => formatter(p.value) : void 0
+        formatter: formatter ? (p) => formatter(p.value, p.dataIndex) : void 0
       }
     }]
   };

package/package.json

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