@tekkare/romulus 0.1.11 → 0.1.13

package/dist/runtime/utils/chart.js

@@ -90,6 +90,16 @@ export function rmBaseOption(theme, decal = false) {
     }
   };
 }
+const valueAxis = (theme, label) => ({
+  type: "value",
+  name: label,
+  nameLocation: "end",
+  nameGap: 12,
+  nameTextStyle: { fontSize: 10, color: theme.dimmedColor, fontFamily: FONT, align: "left" },
+  axisLabel: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT },
+  axisLine: { lineStyle: { color: theme.axisLine } },
+  splitLine: { lineStyle: { color: theme.splitLine } }
+});
 const axisCommon = (theme) => ({
   axisLabel: { fontSize: 11, color: theme.mutedColor, fontFamily: FONT },
   axisLine: { lineStyle: { color: theme.axisLine } },
@@ -135,17 +145,27 @@ export function rmBarHorizontalOption(labels, values, theme, palette, decal = fa
   };
 }
 export function rmLineOption(categories, series, theme, palette, options = {}) {
-  const { area = false, step = false, smooth = true, decal = false } = options;
+  const { area = false, step = false, smooth = true, decal = false, axisLabels } = options;
+  const dual = series.some((s) => s.axis === 1);
   return {
     ...rmBaseOption(theme, decal),
-    legend: series.length > 1 ? { top: 0, textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } } : void 0,
+    // Legende obligatoire en double axe : sans elle, rien ne dit quelle courbe
+    // se lit sur quel axe.
+    legend: series.length > 1 || dual ? { top: 0, textStyle: { color: theme.mutedColor, fontSize: 11, fontFamily: FONT } } : void 0,
+    grid: { left: 48, right: dual ? 56 : 16, top: dual ? 40 : 24, bottom: 36, containLabel: true },
     xAxis: { type: "category", data: categories, ...axisCommon(theme), splitLine: { show: false }, boundaryGap: false },
-    yAxis: { type: "value", ...axisCommon(theme) },
+    yAxis: dual ? [
+      valueAxis(theme, axisLabels?.[0]),
+      // Le second axe ne rejoue pas la grille : deux grilles superposees
+      // rendent le fond illisible.
+      { ...valueAxis(theme, axisLabels?.[1]), splitLine: { show: false } }
+    ] : valueAxis(theme, axisLabels?.[0]),
     series: series.map((s, i) => {
       const color = s.color ?? palette[i % palette.length];
       return {
         type: "line",
         name: s.name,
+        yAxisIndex: dual ? s.axis ?? 0 : void 0,
         data: s.data,
         smooth: step ? false : smooth,
         step: step ? "end" : void 0,

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

@@ -0,0 +1,24 @@
+/**
+ * Applique un changement d'etat sans transition.
+ *
+ * Chrome ne reevalue pas une propriete sous `transition` quand sa valeur vient
+ * d'un `var()` modifie par un changement de classe sur un ancetre. La
+ * propriete garde son ancienne valeur indefiniment, pas seulement le temps de
+ * l'animation. Deux cas verifies dans ce paquet :
+ *
+ * - `border-color: var(--border-default)` sur `.chart-card` : 2,5 s apres le
+ *   passage en mode nuit, la bordure affichait encore la couleur du jour ;
+ * - `width: var(--sidebar-w)` sur `.sidebar` : le token passait bien a 333px
+ *   et la largeur calculee restait a 220px. Replier la barre laterale ne
+ *   faisait donc rien du tout.
+ *
+ * On neutralise les transitions, on applique le changement, on force un
+ * recalcul de style synchrone, puis on les reactive. Tout est synchrone
+ * volontairement : une version a base de `requestAnimationFrame` ne fonctionne
+ * pas dans un onglet en arriere-plan, ou aucune frame n'est produite. Teste
+ * dans un panneau masque : la bascule n'avait alors aucun effet.
+ *
+ * Consequence assumee : la bascule est instantanee, sans animation. Une
+ * transition qui n'aboutit pas vaut moins qu'un etat correct.
+ */
+export declare function rmWithoutTransitions(mutate: () => void): void;

package/dist/runtime/utils/transitionGuard.js

@@ -0,0 +1,14 @@
+export function rmWithoutTransitions(mutate) {
+  if (typeof document === "undefined") {
+    mutate();
+    return;
+  }
+  const { body } = document;
+  body.classList.add("rm-switching");
+  try {
+    mutate();
+    void body.offsetWidth;
+  } finally {
+    body.classList.remove("rm-switching");
+  }
+}

package/package.json

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