@tekkare/romulus 0.1.141 → 0.1.143

package/dist/module.json

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

package/dist/runtime/components/FilterBar.vue

@@ -1,12 +1,15 @@
 <!--
   Barre de filtres d'une page de liste.
 
-  Au repos, une barre fine collee sous le bandeau de page (RmPageHeader) : le
-  selecteur de vue si la page en publie un (useRmFilterBarView), une puce
-  « Filtres » et la recherche, rien d'autre. La puce ouvre en accordeon le
-  panneau qui contient tous les filtres ; c'est la que vivent « Sauvegarder un
-  scope » et « Effacer les filtres ». Le nombre de filtres actifs reste visible
-  puce.
+  Au repos, une barre fine collee sous le bandeau de page (RmPageHeader) : la
+  puce « Filtres », puis le selecteur de vue si la page en publie un
+  (useRmFilterBarView), puis la recherche, rien d'autre. « Filtres » ouvre en
+  tete parce que c'est le geste de tous les jours ; la vue se lit ensuite,
+  comme le perimetre sous lequel les filtres s'appliquent.
+
+  La puce ouvre en accordeon le panneau qui contient tous les filtres ; c'est
+  la que vivent « Sauvegarder un scope » et « Effacer les filtres ». Le nombre
+  de filtres actifs reste visible puce.
 
   Slots : #CardTitle (libelle de la puce si `customTitle`), #Rail (sur la
   barre, a cote de la puce : le reglage qu'on change tout le temps et qui ne
@@ -165,9 +168,17 @@ onBeforeUnmount(() => {
     :style="{ top: `${stickyTop}px`, '--rm-fbar-advanced-w': `${advancedWidth}px` }"
   >
     <div class="rm-fbar__row">
-      <!-- Emplacement de la pastille de vue, en tete de rangee : c'est le
-           perimetre sous lequel tout le reste se lit. Le cadre de l'app l'y
-           pose par un Teleport, la barre n'a pas a connaitre les vues. -->
+      <button type="button" class="rm-fbar__toggle" :class="{ 'is-active': open }" @click="toggle('filters')">
+        <RmIcon name="Funnel" :size="16" />
+        <span v-if="customTitle"><slot name="CardTitle" /></span>
+        <span v-else>{{ t.title }}</span>
+        <span v-if="filtersAmount" class="rm-fbar__badge">{{ filtersAmount }}</span>
+      </button>
+
+      <!-- Emplacement de la pastille de vue, juste apres « Filtres » : le
+           geste de tous les jours ouvre la barre, la vue dit sous quel
+           perimetre il se lit. Le cadre de l'app l'y pose par un Teleport, la
+           barre n'a pas a connaitre les vues. -->
       <div id="rm_fbar_views" class="rm-fbar__views">
         <slot name="Views" />
       </div>
@@ -181,13 +192,6 @@ onBeforeUnmount(() => {
         />
       </div>
 
-      <button type="button" class="rm-fbar__toggle" :class="{ 'is-active': open }" @click="toggle('filters')">
-        <RmIcon name="Funnel" :size="16" />
-        <span v-if="customTitle"><slot name="CardTitle" /></span>
-        <span v-else>{{ t.title }}</span>
-        <span v-if="filtersAmount" class="rm-fbar__badge">{{ filtersAmount }}</span>
-      </button>
-
       <button
         v-if="hasCustomize"
         type="button"

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

@@ -94,6 +94,7 @@ export declare function rmBaseOption(theme: RmChartTheme, decal?: boolean): {
         borderWidth: number;
     };
 };
+export declare const rmTooltipTrigger: (count: number) => "axis" | "item";
 export declare function rmLegend(theme: RmChartTheme, count: number, position?: 'top' | 'bottom'): {
     pageIconSize?: number | undefined;
     pageIconColor?: string | undefined;
@@ -177,6 +178,17 @@ export interface RmSeriesInput {
 }
 /** Bar chart vertical, une ou plusieurs series, empilable. */
 export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean): {
+    tooltip: {
+        trigger: string;
+        backgroundColor: string;
+        textStyle: {
+            color: string;
+            fontFamily: string;
+            fontSize: number;
+        };
+        borderColor: string;
+        borderWidth: number;
+    };
     legend: {
         pageIconSize?: number | undefined;
         pageIconColor?: string | undefined;
@@ -282,17 +294,6 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
     textStyle: {
         fontFamily: string;
     };
-    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): {
@@ -422,17 +423,7 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
     valueFormatter?: (value: number) => string;
 }): {
     tooltip: {
-        trigger: string;
-        backgroundColor: string;
-        textStyle: {
-            color: string;
-            fontFamily: string;
-            fontSize: number;
-        };
-        borderColor: string;
-        borderWidth: number;
-    } | {
-        valueFormatter: (value: unknown) => string;
+        valueFormatter?: ((value: unknown) => string) | undefined;
         trigger: string;
         backgroundColor: string;
         textStyle: {

package/dist/runtime/utils/chart.js

@@ -90,6 +90,8 @@ export function rmBaseOption(theme, decal = false) {
     }
   };
 }
+const TOOLTIP_AXIS_MIN_SERIES = 10;
+export const rmTooltipTrigger = (count) => count < TOOLTIP_AXIS_MIN_SERIES ? "item" : "axis";
 const LEGEND_MAX_INLINE = 6;
 const LEGEND_NAME_MAX = 38;
 const LEGEND_NAME_TAIL = 12;
@@ -141,6 +143,7 @@ const axisCommon = (theme) => ({
 export function rmBarVerticalOption(categories, series, theme, palette, decal = false) {
   return {
     ...rmBaseOption(theme, decal),
+    tooltip: { ...rmBaseOption(theme, decal).tooltip, trigger: rmTooltipTrigger(series.length) },
     legend: series.length > 1 ? rmLegend(theme, series.length) : void 0,
     // La legende passee sous le graphe prend sa place dans la gouttiere basse,
     // sinon elle recouvre les libelles de l'axe des abscisses.
@@ -205,10 +208,11 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
   const base = rmBaseOption(theme, decal);
   return {
     ...base,
-    tooltip: valueFormatter ? {
+    tooltip: {
       ...base.tooltip,
-      valueFormatter: (value) => typeof value === "number" ? format(value) : ""
-    } : base.tooltip,
+      trigger: rmTooltipTrigger(series.length),
+      ...valueFormatter ? { valueFormatter: (value) => typeof value === "number" ? format(value) : "" } : {}
+    },
     // Legende obligatoire en double axe : sans elle, rien ne dit quelle courbe
     // se lit sur quel axe.
     legend: series.length > 1 || dual ? rmLegend(theme, series.length, legendPosition) : void 0,

package/package.json

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