@tekkare/romulus 0.1.46 → 0.1.48

package/dist/module.json

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

package/dist/runtime/components/FilterBar.vue

@@ -244,5 +244,5 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row{border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__advanced{align-items:center;background:none;border:none;border-left:1px solid var(--border-default);color:var(--color-primary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);height:var(--rm-fbar-field-h);padding:0 0 0 12px;position:absolute;right:14px;text-decoration-line:underline;top:0;white-space:nowrap;z-index:2}.rm-fbar__advanced.is-active,.rm-fbar__advanced:hover{color:var(--color-primary-hover,var(--color-primary));text-decoration-thickness:2px}.rm-fbar__rail{align-items:center;display:flex;flex:0 1 auto;min-width:0}.rm-fbar__rail:empty{display:none}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0;position:relative}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);padding-right:calc(var(--rm-fbar-advanced-w, 0px) + 12px);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__panel--wide{align-items:stretch;display:flex;flex-direction:column;gap:12px}.rm-fbar__filters{display:contents}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--text-secondary)}
+.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row{border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__advanced{align-items:center;background:none;border:none;border-left:1px solid var(--border-default);color:var(--color-primary);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);height:var(--rm-fbar-field-h);padding:0 0 0 12px;position:absolute;right:14px;text-decoration-line:underline;top:0;white-space:nowrap;z-index:2}.rm-fbar__advanced.is-active,.rm-fbar__advanced:hover{color:var(--color-primary-hover,var(--color-primary));text-decoration-thickness:2px}.rm-fbar__rail{align-items:center;display:flex;flex:0 1 auto;min-width:0}.rm-fbar__rail:empty{display:none}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0;position:relative}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);padding-right:calc(var(--rm-fbar-advanced-w, 0px) + 12px);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;--rm-fbar-panel-field-h:40px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__panel--wide{align-items:stretch;display:flex;flex-direction:column;gap:12px}.rm-fbar__filters{display:contents}.rm-fbar__filters :deep(.filter-chip),.rm-fbar__filters :deep(.filter-complex__trigger),.rm-fbar__filters :deep(.rm-number__box){border-radius:var(--radius-lg);height:var(--rm-fbar-panel-field-h);width:100%}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--text-secondary)}
 </style>

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/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;

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,

package/package.json

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