@tekkare/romulus 0.1.45 → 0.1.47

package/dist/module.json

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

package/dist/runtime/components/FilterComplex.vue

@@ -18,17 +18,58 @@ const props = withDefaults(defineProps<{
   icon?: Component
   label: string
   options: FilterComplexOption[]
+  /** Langue du chrome du panneau : titres, recherches, actions. */
+  lang?: 'fr' | 'en'
+  /**
+   * La recherche est servie par l'appelant : la liste des options arrive
+   * deja filtree et le filtre local est retire. Indispensable des que le
+   * referentiel ne tient pas dans `options` (une recherche locale sur les
+   * cent premieres valeurs laisse croire que le reste n'existe pas).
+   */
+  remote?: boolean
 }>(), {
   icon: undefined,
+  lang: 'en',
+  remote: false,
 })
 
 const selected = defineModel<string[]>({ default: () => [] })
+/**
+ * Texte saisi dans la colonne « ajouter ». Expose pour que l'appelant puisse
+ * aller chercher les options correspondantes, cf. `remote`.
+ */
+const addSearch = defineModel<string>('search', { default: '' })
 
 const isOpen = ref(false)
 const wrapperRef = ref<HTMLElement>()
-const addSearch = ref('')
 const delSearch = ref('')
 
+/** Le chrome du panneau, dans les deux langues. */
+const WORDS = {
+  fr: {
+    custom: 'Sélection libre',
+    searchAdd: 'Rechercher pour ajouter...',
+    addAll: 'Tout ajouter',
+    current: 'Sélection en cours',
+    clear: 'Effacer',
+    searchSelection: 'Rechercher dans la sélection...',
+    noResult: 'Aucun résultat',
+    noSelection: 'Aucune sélection',
+  },
+  en: {
+    custom: 'Custom selection',
+    searchAdd: 'Search to add...',
+    addAll: 'Add all',
+    current: 'Current selection',
+    clear: 'Clear',
+    searchSelection: 'Search selection...',
+    noResult: 'No results',
+    noSelection: 'No selection',
+  },
+} as const
+
+const t = computed(() => WORDS[props.lang])
+
 const isActive = computed(() => selected.value.length > 0)
 
 const availableOptions = computed(() => {
@@ -36,14 +77,22 @@ const availableOptions = computed(() => {
 })
 
 const filteredAvailable = computed(() => {
-  if (!addSearch.value) return availableOptions.value
+  if (props.remote || !addSearch.value) return availableOptions.value
   const q = addSearch.value.toLowerCase()
   return availableOptions.value.filter(o => o.label.toLowerCase().includes(q))
 })
 
-const selectedOptions = computed(() => {
-  return props.options.filter(o => selected.value.includes(o.value))
-})
+/**
+ * La selection se lit sur `selected`, pas sur `options` : une valeur choisie
+ * puis sortie de la liste (recherche suivante, referentiel pagine) doit rester
+ * visible et retirable, sinon elle filtre l'analyse sans plus apparaitre
+ * nulle part.
+ */
+const selectedOptions = computed(() =>
+  selected.value.map(
+    value => props.options.find(o => o.value === value) ?? { label: value, value },
+  ),
+)
 
 const filteredSelected = computed(() => {
   if (!delSearch.value) return selectedOptions.value
@@ -110,14 +159,14 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
       <div v-if="isOpen" class="filter-complex__panel" @click.stop>
         <!-- Left: Add -->
         <div class="filter-complex__left">
-          <h3 class="filter-complex__title">Custom selection</h3>
+          <h3 class="filter-complex__title">{{ t.custom }}</h3>
 
           <div class="filter-complex__search">
             <PhMagnifyingGlass :size="14" color="var(--text-muted)" />
             <input
               v-model="addSearch"
               type="text"
-              placeholder="Search to add..."
+              :placeholder="t.searchAdd"
               class="filter-complex__search-input"
             >
             <PhX
@@ -133,7 +182,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
             class="filter-complex__action filter-complex__action--add"
             @click="addAll"
           >
-            Add all ({{ filteredAvailable.length }})
+            {{ t.addAll }} ({{ filteredAvailable.length }})
           </button>
 
           <div class="filter-complex__list">
@@ -147,7 +196,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
               <PhPlusCircle :size="16" class="filter-complex__item-icon filter-complex__item-icon--add" />
             </button>
             <p v-if="filteredAvailable.length === 0" class="filter-complex__empty">
-              No results
+              {{ t.noResult }}
             </p>
           </div>
         </div>
@@ -155,13 +204,13 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
         <!-- Right: Selection -->
         <div class="filter-complex__right">
           <div class="filter-complex__right-header">
-            <h3 class="filter-complex__title">Current selection</h3>
+            <h3 class="filter-complex__title">{{ t.current }}</h3>
             <button
               v-if="selected.length > 0"
               class="filter-complex__action filter-complex__action--clear"
               @click="clearAll"
             >
-              Clear
+              {{ t.clear }}
             </button>
           </div>
 
@@ -170,7 +219,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
             <input
               v-model="delSearch"
               type="text"
-              placeholder="Search selection..."
+              :placeholder="t.searchSelection"
               class="filter-complex__search-input"
             >
             <PhX
@@ -192,7 +241,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
               <PhMinusCircle :size="16" class="filter-complex__item-icon filter-complex__item-icon--remove" />
             </button>
             <p v-if="selected.length === 0" class="filter-complex__empty">
-              No selection
+              {{ t.noSelection }}
             </p>
           </div>
         </div>

package/dist/runtime/components/LineChart.vue

@@ -27,7 +27,9 @@ const props = withDefaults(defineProps<{
   axisLabels?: [string, string]
   /**
    * Etiquette chaque point de sa valeur, en pastille de la couleur de la
-   * serie. A reserver aux series courtes, sinon les pastilles se chevauchent.
+   * serie. Laisse libre, elle se pose tant que le graphe reste aere (peu de
+   * courbes ET peu de points) et se retire au-dela, ou les pastilles se
+   * chevauchent. `true` ou `false` tranche a la place de la regle.
    */
   valueLabels?: boolean
   /**
@@ -55,7 +57,7 @@ const props = withDefaults(defineProps<{
   step: false,
   smooth: true,
   axisLabels: undefined,
-  valueLabels: false,
+  valueLabels: undefined,
   hideValueAxis: false,
   legendPosition: 'bottom',
   startAtZero: false,

package/dist/runtime/components/TableCard.vue

@@ -18,5 +18,5 @@
 </template>
 
 <style scoped>
-.rm-table-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xs);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);gap:24px;padding:24px;width:100%}.rm-table-card__header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between}.rm-table-card__header :deep(.rm-table-card__title){font-size:var(--font-18);font-weight:800;margin:0}.rm-table-card__header :deep(.rm-table-card__caption){color:var(--text-secondary);font-size:var(--font-12);margin:0;white-space:nowrap}
+.rm-table-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xs);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;font-family:var(--font-sans);overflow:hidden;padding:0;width:100%}.rm-table-card__header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;padding:24px}.rm-table-card__header :deep(.rm-table-card__title){font-size:var(--font-18);font-weight:800;margin:0}.rm-table-card__header :deep(.rm-table-card__caption){color:var(--text-secondary);font-size:var(--font-12);margin:0;white-space:nowrap}.rm-table-card :deep(.rm-table-wrapper){background:transparent;border:none;border-radius:0}.rm-table-card__header+:deep(.rm-table-wrapper){border-top:1px solid var(--border-default)}.rm-table-card>:deep(:not(.rm-table-wrapper):not(.rm-table-card__header)){padding:16px 24px}
 </style>

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

@@ -320,8 +320,8 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
     axisLabels?: [string, string];
     /**
      * Etiquette la valeur de chaque point, en pastille de la couleur de sa
-     * serie. Reserve aux series courtes : au-dela d'une quinzaine de points
-     * les pastilles se chevauchent et deviennent illisibles.
+     * serie. Non precise : automatique tant que le graphe reste aere (voir
+     * LABEL_MAX_SERIES et LABEL_MAX_POINTS).
      */
     valueLabels?: boolean;
     /**
@@ -527,7 +527,12 @@ export declare function rmLineOption(categories: (string | number)[], series: Rm
         type: string;
         name: string | undefined;
         yAxisIndex: 0 | 1 | undefined;
-        data: (number | null)[];
+        data: (number | {
+            value: number;
+            label: {
+                offset: number[];
+            };
+        } | null)[];
         smooth: boolean;
         step: string | undefined;
         symbol: string;
@@ -669,3 +674,33 @@ export declare function rmSparklineOption(values: (number | null)[], color: stri
         };
     }[];
 };
+/**
+ * Met un graphe de series en tableau : une ligne par serie, une colonne par
+ * categorie.
+ *
+ * Un graphe donne la forme, pas les chiffres : on y lit une tendance, on n'y
+ * releve pas une valeur. Le tableau qui l'accompagne rend la donnee lisible au
+ * chiffre pres, copiable, et accessible au lecteur d'ecran, que le SVG du
+ * graphe ne porte pas.
+ *
+ * Les valeurs restent des NOMBRES : le tri de RmTable compare alors des
+ * nombres, et la page formate a l'affichage par un slot de colonne. Formater
+ * ici donnerait un tri alphabetique sur des chaines a espaces insecables.
+ */
+export declare function rmSeriesTable(categories: (string | number)[], series: RmSeriesInput[], options?: {
+    label?: string;
+    key?: string;
+}): {
+    columns: ({
+        key: string;
+        label: string;
+        sortable: boolean;
+        align: "right";
+    } | {
+        key: string;
+        label: string;
+        sortable: boolean;
+    })[];
+    rows: Record<string, unknown>[];
+    valueKeys: string[];
+};

package/dist/runtime/utils/chart.js

@@ -166,12 +166,15 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
     smooth = true,
     decal = false,
     axisLabels,
-    valueLabels = false,
+    valueLabels,
     hideValueAxis = false,
     legendPosition = "bottom",
     startAtZero = false,
     valueFormatter
   } = options;
+  const LABEL_MAX_SERIES = 5;
+  const LABEL_MAX_POINTS = 8;
+  const labelled = valueLabels ?? (series.length <= LABEL_MAX_SERIES && categories.length <= LABEL_MAX_POINTS);
   const AREA_MAX_SERIES = 5;
   const filled = area ?? series.length <= AREA_MAX_SERIES;
   const dual = series.some((s) => s.axis === 1);
@@ -202,7 +205,7 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
       right: dual ? 56 : 32,
       // Les pastilles du point le plus haut depassent la courbe : sans marge
       // supplementaire en haut, ECharts les rogne.
-      top: dual ? 40 : valueLabels ? 32 : 24,
+      top: dual ? 40 : labelled ? 32 : 24,
       bottom: bottomLegend ? 56 : 36,
       containLabel: true
     },
@@ -219,18 +222,25 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
         type: "line",
         name: s.name,
         yAxisIndex: dual ? s.axis ?? 0 : void 0,
-        data: s.data,
+        /*
+          Les points des deux bords sont poses SUR le cadre : leur pastille,
+          centree, mord sur la graduation a gauche et sort de la carte a
+          droite. On la decale vers l'interieur, elle reste rattachee a son
+          point par la proximite.
+        */
+        data: labelled ? s.data.map((value, position) => {
+          const edge = position === 0 ? 1 : position === s.data.length - 1 ? -1 : 0;
+          if (!edge || value === null || value === void 0) return value;
+          return { value, label: { offset: [edge * 16, 0] } };
+        }) : s.data,
         smooth: step ? false : smooth,
         step: step ? "end" : void 0,
         symbol: "circle",
-        // La pastille de valeur marque deja le point, le symbole ferait un
-        // second marqueur au meme endroit. On l'annule par sa taille et non
-        // par `symbol: 'none'` : ECharts accroche les etiquettes aux
-        // symboles, les supprimer supprime aussi les etiquettes.
         // Le point est la cible de survol : trop petit, l'infobulle se derobe
-        // et les series courtes n'ont plus de reperes lisibles.
-        symbolSize: valueLabels ? 0 : 8,
-        label: valueLabels ? {
+        // et les series courtes n'ont plus de reperes lisibles. Il reste
+        // visible sous la pastille de valeur, qui se pose au-dessus de lui.
+        symbolSize: 8,
+        label: labelled ? {
           show: true,
           position: "top",
           distance: 6,
@@ -298,3 +308,24 @@ export function rmSparklineOption(values, color) {
     }]
   };
 }
+export function rmSeriesTable(categories, series, options = {}) {
+  const { label = "S\xE9rie", key = "series" } = options;
+  const valueKeys = categories.map(String);
+  const columns = [
+    { key, label, sortable: true },
+    ...valueKeys.map((category) => ({
+      key: category,
+      label: category,
+      sortable: true,
+      align: "right"
+    }))
+  ];
+  const rows = series.map((entry, index) => {
+    const row = { [key]: entry.name ?? `#${index + 1}` };
+    valueKeys.forEach((category, position) => {
+      row[category] = entry.data[position] ?? null;
+    });
+    return row;
+  });
+  return { columns, rows, valueKeys };
+}

package/package.json

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