@tekkare/romulus 0.1.134 → 0.1.136

package/dist/module.json

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

package/dist/runtime/components/CardActions.vue

@@ -23,7 +23,7 @@
 -->
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-import type { RmExportPayload } from '../utils/export'
+import type { RmExportPayload, RmExportSource } from '../utils/export'
 import { rmCardCharts, rmCardOf } from '../utils/cardData'
 import { useRmCardActions } from '../composables/useRmCardActions'
 
@@ -34,6 +34,12 @@ const props = withDefaults(defineProps<{
   link?: string
   /** Nom du fichier et de l'onglet. A defaut, le titre lu dans la carte. */
   name?: string
+  /**
+   * Source citee par le pied de la carte. Dernier recours : la page
+   * (`payload.sources`) puis le cadre (`provideRmExportDefaults`) passent
+   * devant, parce qu'eux lisent le referentiel et sa date de mise a jour.
+   */
+  sources?: RmExportSource[]
   /**
    * Ce que la page a de mieux que le rendu de la carte : ses onglets complets
    * (`sheets`), mais aussi ses chiffres cles, ses sources, son sous-titre. Ce
@@ -54,6 +60,7 @@ const props = withDefaults(defineProps<{
   lang: 'fr',
   link: undefined,
   name: undefined,
+  sources: undefined,
   payload: undefined,
   visual: undefined,
 })
@@ -168,6 +175,7 @@ async function act(action: 'png' | 'svg' | 'csv' | 'xlsx' | 'link') {
       lang: props.lang,
       name: props.name,
       link: props.link,
+      sources: props.sources,
       payload: props.payload,
     })
     if (action === 'link') {

package/dist/runtime/components/ChartCard.vue

@@ -11,6 +11,7 @@
 -->
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { RmExportPayload } from '../utils/export'
 import { rmDate } from '../utils/format'
 
 const props = withDefaults(defineProps<{
@@ -37,6 +38,12 @@ const props = withDefaults(defineProps<{
    * qui est le bon lien pour une carte d'analyse : elle vit dans sa page.
    */
   link?: string
+  /**
+   * Ce que la page a de mieux que le rendu de la carte pour son export :
+   * onglets complets, sources, sous-titre (cf. RmCardActions). En fonction
+   * des qu'une liste monte la carte plusieurs fois.
+   */
+  payload?: Partial<RmExportPayload> | (() => Partial<RmExportPayload> | null | undefined | Promise<Partial<RmExportPayload> | null | undefined>)
   /**
    * Etat de la donnee. Les trois variantes se posent dans le CORPS ; la tete
    * et le pied restent stables, pour que le titre et la source restent sous
@@ -56,6 +63,7 @@ const props = withDefaults(defineProps<{
   extra: undefined,
   actions: true,
   link: undefined,
+  payload: undefined,
   state: 'ready',
   retryLabel: '',
   emptyActionLabel: '',
@@ -135,6 +143,8 @@ const verifiedText = computed(() => {
         :lang="lang"
         :link="link"
         :name="context ? `${title} (${context})` : title"
+        :sources="[{ name: source, date: verifiedText }]"
+        :payload="payload"
         @export-png="emit('exportPng')"
         @export-svg="emit('exportSvg')"
         @export-csv="emit('exportCsv')"

package/dist/runtime/components/ExportButton.vue

@@ -42,6 +42,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useRmExport } from '../composables/useRmExport'
+import { rmExportDefaults } from '../composables/useRmExportDefaults'
 import type { RmExportKpi, RmExportSheet, RmExportSource } from '../utils/export'
 
 const props = withDefaults(
@@ -151,13 +152,18 @@ async function write() {
     if (held.length) await Promise.all(held)
 
     const { run } = useRmExport()
+    // Sans sources declarees, celles du cadre : la page les cite deja dans
+    // son panneau « Sources », le classeur ne doit pas sortir sans.
+    const defaults = rmExportDefaults()
     const result = await run(
       {
         format: 'xlsx',
         range: 'all',
         sections: [],
         columns: [],
-        options: [],
+        // Sans ce drapeau la page de garde taisait les sources, meme
+        // fournies : le generateur ne les imprime que si on les demande.
+        options: ['sources'],
         fileName: stampedName.value,
         layout: '',
         schedule: 'once',
@@ -168,7 +174,7 @@ async function write() {
         title: props.title || buttonLabel.value,
         subtitle: props.subtitle,
         kpi: props.kpi,
-        sources: props.sources,
+        sources: props.sources.length ? props.sources : defaults.sources,
         sheets: props.sheets,
         limit: props.limit,
       },

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

@@ -12,7 +12,7 @@
  * d'une declaration de la page : c'est ce qui rend le menu utilisable sur les
  * cartes deja ecrites, sans les rouvrir une par une.
  */
-import type { RmExportPayload } from '../utils/export.js';
+import type { RmExportPayload, RmExportSource } from '../utils/export.js';
 /** Les actions qu'une carte propose. `link` copie, il ne telecharge pas. */
 export type RmCardAction = 'png' | 'svg' | 'csv' | 'xlsx' | 'link';
 export type RmCardPayload = Partial<RmExportPayload>;
@@ -24,6 +24,13 @@ export interface RmCardActionContext {
     name?: string;
     /** Lien copie par « Copier le lien direct ». A defaut, l'URL courante. */
     link?: string;
+    /**
+     * Ce que le pied de la carte dit de sa source. Ne sert que si ni la page
+     * (`payload`) ni le cadre (`provideRmExportDefaults`) n'ont mieux : le cadre
+     * lit le referentiel des sources, le pied d'une carte peut n'en porter
+     * qu'un libelle.
+     */
+    sources?: RmExportSource[];
     /**
      * Ce que la page a de mieux que le rendu a l'ecran : ses onglets complets,
      * ses chiffres cles, ses sources, son sous-titre. Ce qui est pose ici

package/dist/runtime/composables/useRmCardActions.js

@@ -1,5 +1,6 @@
 import { rmCardCharts, rmCardSheets, rmCardTitle } from "../utils/cardData.js";
 import { useRmExport } from "./useRmExport.js";
+import { rmExportDefaults } from "./useRmExportDefaults.js";
 const FILE_NAME_MAX = 60;
 function fileNameOf(label) {
   const flat = label.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-+|-+$/g, "");
@@ -42,15 +43,19 @@ export function useRmCardActions() {
   async function runCardAction(action, context) {
     const { card, lang = "fr" } = context;
     const provided = await (typeof context.payload === "function" ? context.payload() : context.payload) ?? {};
+    const defaults = rmExportDefaults();
     const title = context.name || provided.title || rmCardTitle(card) || "Export";
+    const sources = provided.sources?.length ? provided.sources : defaults.sources?.length ? defaults.sources : context.sources;
     const format = action === "link" ? "link" : action;
     const sheets = action === "png" || action === "svg" ? [] : provided.sheets?.length ? provided.sheets : await rmCardSheets(card, title, lang);
     return run(configOf(format, fileNameOf(title)), {
+      ...defaults,
       title,
       charts: rmCardCharts(card).map((el) => ({ title, el })),
       permalink: absolute(context.link),
       ...provided,
-      sheets
+      sheets,
+      sources
     }, lang);
   }
   async function toggleCardFullscreen(card) {

package/dist/runtime/composables/useRmExport.js

@@ -11,6 +11,29 @@ function longDate(lang) {
     day: "numeric"
   });
 }
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}/;
+function sourceDate(source, lang) {
+  if (!source.date) return null;
+  if (typeof source.date === "string" && !ISO_DATE.test(source.date)) return source.date;
+  const parsed = new Date(source.date);
+  if (Number.isNaN(parsed.getTime())) return String(source.date);
+  return parsed.toLocaleDateString(lang === "en" ? "en-US" : "fr-FR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+}
+function sourceLabel(source, lang) {
+  const date = sourceDate(source, lang);
+  return date ? `${source.name} (${date})` : source.name;
+}
+function sourcesOf(config, payload) {
+  const wanted = config.sections.includes("sources") || config.options.includes("sources");
+  return wanted ? payload.sources ?? [] : [];
+}
+function escapeXml(text) {
+  return text.replace(/[<>&"']/g, (char) => ({ "<": "&lt;", ">": "&gt;", "&": "&amp;", '"': "&quot;", "'": "&apos;" })[char] ?? char);
+}
 function rowsOf(sheet, limit) {
   return limit && sheet.data.length > limit ? sheet.data.slice(0, limit) : sheet.data;
 }
@@ -187,15 +210,11 @@ export function useRmExport() {
         (filter) => line(`${filter.label} : ${filter.value}`, { fontSize: 16, color: "#b2b2b2" })
       );
     }
-    const withSources = config.sections.includes("sources") || config.options.includes("sources");
-    if (payload.sources?.length && withSources) {
+    const sources = sourcesOf(config, payload);
+    if (sources.length) {
       rows.push(filler());
-      payload.sources.forEach((source) => {
-        const date = source.date ? new Date(source.date).toLocaleDateString(lang === "en" ? "en-US" : "fr-FR", {
-          year: "numeric",
-          month: "long",
-          day: "numeric"
-        }) : null;
+      sources.forEach((source) => {
+        const date = sourceDate(source, lang);
         const update = date ? lang === "en" ? ` - Last update: ${date}` : ` - Derni\xE8re mise \xE0 jour : ${date}` : "";
         line(`${source.emoji ? `${source.emoji} ` : ""}Source : ${source.name}${update}`, { fontSize: 18 });
       });
@@ -237,6 +256,16 @@ export function useRmExport() {
       );
       blocks.push(lines.join("\n"));
     });
+    const sources = sourcesOf(config, payload);
+    if (sources.length) {
+      blocks.push(
+        sources.map((source) => {
+          const date = sourceDate(source, lang);
+          const update = date ? lang === "en" ? ` - Last update: ${date}` : ` - Derni\xE8re mise \xE0 jour : ${date}` : "";
+          return `# Source : ${source.name}${update}`;
+        }).join("\n")
+      );
+    }
     const fileName = `${config.fileName}.csv`;
     const blob = new Blob([`\uFEFF${blocks.join("\n\n")}
 `], { type: "text/csv;charset=utf-8" });
@@ -247,7 +276,8 @@ export function useRmExport() {
     if (!charts.length) throw new Error(lang === "en" ? "No chart on this page" : "Aucun graphique sur cette page");
     const scale = 2;
     const pad = 24;
-    const head = config.options.includes("logo") ? 72 : 0;
+    const sources = sourcesOf(config, payload);
+    const head = config.options.includes("logo") ? sources.length ? 88 : 72 : 0;
     const parts = charts.map((svg) => serialize(svg));
     const width = Math.max(...parts.map((part) => part.width)) + pad * 2;
     const height = parts.reduce((total, part) => total + part.height + pad, pad) + head;
@@ -265,6 +295,9 @@ export function useRmExport() {
       context.fillStyle = "#6C6C8A";
       context.font = "12px Figtree, Helvetica, sans-serif";
       context.fillText(`${payload.title} \xB7 ${BRAND_LINE} \xB7 ${longDate(lang)}`, pad, 52);
+      if (sources.length) {
+        context.fillText(`Source${sources.length > 1 ? "s" : ""} : ${sources.map((source) => sourceLabel(source, lang)).join(" \xB7 ")}`, pad, 68);
+      }
     }
     let y = head + pad;
     for (const part of parts) {
@@ -282,7 +315,8 @@ export function useRmExport() {
     const charts = (payload.charts ?? []).map((chart) => svgOf(chart.el)).filter(Boolean);
     if (!charts.length) throw new Error(lang === "en" ? "No chart on this page" : "Aucun graphique sur cette page");
     const pad = 24;
-    const head = config.options.includes("logo") ? 72 : 0;
+    const sources = sourcesOf(config, payload);
+    const head = config.options.includes("logo") ? sources.length ? 88 : 72 : 0;
     const parts = charts.map((svg) => serialize(svg));
     const width = Math.max(...parts.map((part) => part.width)) + pad * 2;
     const height = parts.reduce((total, part) => total + part.height + pad, pad) + head;
@@ -292,7 +326,7 @@ export function useRmExport() {
       y += part.height + pad;
       return markup2;
     }).join("\n");
-    const header = head ? `<text x="${pad}" y="32" font-family="Figtree, Helvetica, sans-serif" font-size="20" font-weight="bold" fill="#1A1A2E">${BRAND_TITLE}</text><text x="${pad}" y="52" font-family="Figtree, Helvetica, sans-serif" font-size="12" fill="#6C6C8A">${payload.title} \xB7 ${BRAND_LINE} \xB7 ${longDate(lang)}</text>` : "";
+    const header = head ? `<text x="${pad}" y="32" font-family="Figtree, Helvetica, sans-serif" font-size="20" font-weight="bold" fill="#1A1A2E">${BRAND_TITLE}</text><text x="${pad}" y="52" font-family="Figtree, Helvetica, sans-serif" font-size="12" fill="#6C6C8A">${escapeXml(`${payload.title} \xB7 ${BRAND_LINE} \xB7 ${longDate(lang)}`)}</text>` + (sources.length ? `<text x="${pad}" y="68" font-family="Figtree, Helvetica, sans-serif" font-size="12" fill="#6C6C8A">${escapeXml(`Source${sources.length > 1 ? "s" : ""} : ${sources.map((source) => sourceLabel(source, lang)).join(" \xB7 ")}`)}</text>` : "") : "";
     const markup = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><rect width="${width}" height="${height}" fill="#FFFFFF"/>${header}${nested}</svg>`;
     const fileName = `${config.fileName}.svg`;
     const blob = new Blob([markup], { type: "image/svg+xml;charset=utf-8" });
@@ -651,12 +685,12 @@ export function useRmExport() {
         y = doc.lastAutoTable?.finalY ?? margin;
       });
     }
-    const withSources = config.sections.includes("sources") || config.options.includes("sources");
-    if (payload.sources?.length && withSources) {
+    const sources = sourcesOf(config, payload);
+    if (sources.length) {
       doc.setTextColor(...grey);
       doc.setFont("helvetica", "normal");
       doc.setFontSize(8);
-      const names = payload.sources.map((source) => `${source.name}${source.date ? ` (${new Date(source.date).toLocaleDateString(lang === "en" ? "en-US" : "fr-FR", { year: "numeric", month: "long", day: "numeric" })})` : ""}`).join(" \xB7 ");
+      const names = sources.map((source) => sourceLabel(source, lang)).join(" \xB7 ");
       const lines = doc.splitTextToSize(printable(`Sources : ${names}`), inner);
       doc.text(lines, margin, Math.min(y + 8, doc.internal.pageSize.getHeight() - margin));
     }

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

@@ -0,0 +1,9 @@
+import type { RmExportPayload } from '../utils/export.js';
+export type RmExportDefaultsBuild = () => Partial<RmExportPayload> | null | undefined;
+/**
+ * Pose les defauts de la page affichee. A appeler dans le `setup` du cadre
+ * (layout) : ils sont retires quand ce cadre est demonte.
+ */
+export declare function provideRmExportDefaults(build: RmExportDefaultsBuild): void;
+/** Les defauts courants, relus a chaque export : ils suivent la navigation. */
+export declare function rmExportDefaults(): Partial<RmExportPayload>;

package/dist/runtime/composables/useRmExportDefaults.js

@@ -0,0 +1,13 @@
+import { getCurrentScope, onScopeDispose, shallowRef } from "vue";
+const registry = shallowRef(null);
+export function provideRmExportDefaults(build) {
+  registry.value = build;
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      if (registry.value === build) registry.value = null;
+    });
+  }
+}
+export function rmExportDefaults() {
+  return registry.value?.() ?? {};
+}

package/package.json

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