@tekkare/romulus 0.1.182 → 0.1.184

package/dist/module.json

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

package/dist/runtime/components/FilterTree.vue

@@ -15,6 +15,12 @@
  * composant recursif : la recherche et le pliage se calculent sur une seule
  * liste, et une taxonomie de plusieurs milliers de codes ne monte pas autant
  * d'instances de composant qu'elle a de noeuds.
+ *
+ * Trois gestes sur une ligne, et un seul coche : le caret ouvre, le LIBELLE
+ * ouvre aussi quand le noeud a des enfants (il coche quand c'est une feuille),
+ * la CASE coche. Lire une branche et la retenir sont deux intentions
+ * differentes : les confondre faisait partir des milliers de codes dans
+ * l'analyse au premier clic sur un nom.
  */
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { PhCaretDown, PhCaretRight, PhCheck, PhMagnifyingGlass, PhMinus } from '@phosphor-icons/vue'
@@ -183,9 +189,21 @@ watch(selected, resetDraft, { immediate: true, deep: true })
  * parent coche pouvait survivre au decochage d'un de ses enfants et la
  * selection affirmait couvrir une branche entiere qu'elle ne couvrait plus.
  */
+/**
+ * Les noeuds a enfants, du plus profond au moins profond.
+ *
+ * Calcule une fois par arbre : `settle` repartait sinon d'un tri de tout
+ * l'index a CHAQUE clic, soit seize mille entrees triees pour cocher une case
+ * sur les nomenclatures de la LPP ou de la CIM.
+ */
+const settleOrder = computed(() =>
+  [...index.value.values()]
+    .filter(entry => entry.node.children?.length)
+    .sort((a, b) => b.depth - a.depth),
+)
+
 function settle() {
-  const entries = [...index.value.values()].sort((a, b) => b.depth - a.depth)
-  entries.forEach(({ node }) => {
+  settleOrder.value.forEach(({ node }) => {
     if (!node.children?.length) return
     const all = node.children.every(child => draft.value.has(child.value))
     if (all) draft.value.add(node.value)
@@ -445,7 +463,17 @@ function onClickOutside(event: Event) {
           </button>
           <span v-else class="rm-ftree-caret rm-ftree-caret--none" />
 
-          <button type="button" class="rm-ftree-label" @click="toggle(row.node.value)">
+          <!-- La case coche, et elle seule. Elle est sortie du libelle : cocher
+               une categorie emporte toute sa branche, et ce geste ne peut pas
+               etre celui qu'on fait pour lire ce qu'elle contient. -->
+          <button
+            type="button"
+            class="rm-ftree-check"
+            role="checkbox"
+            :aria-checked="row.state === 'on' ? 'true' : row.state === 'partial' ? 'mixed' : 'false'"
+            :aria-label="row.node.label"
+            @click.stop="toggle(row.node.value)"
+          >
             <span
               class="rm-ftree-box"
               :class="{
@@ -456,6 +484,19 @@ function onClickOutside(event: Event) {
               <PhCheck v-if="row.state === 'on'" :size="10" weight="bold" />
               <PhMinus v-else-if="row.state === 'partial'" :size="10" weight="bold" />
             </span>
+          </button>
+
+          <!-- Le libelle d'un noeud a enfants ouvre sa branche, comme le
+               caret : c'est le geste qu'on fait pour descendre dans une
+               taxonomie, et il selectionnait jusqu'ici des milliers de codes
+               au passage. Sur une feuille, il n'y a rien a ouvrir : il coche,
+               comme le libelle d'une case a cocher. -->
+          <button
+            type="button"
+            class="rm-ftree-label"
+            :aria-expanded="row.leaf ? undefined : row.open"
+            @click="row.leaf ? toggle(row.node.value) : toggleExpand(row.node.value)"
+          >
             <span v-if="row.node.code" class="rm-ftree-code">{{ row.node.code }}</span>
             <span class="rm-ftree-text">{{ row.node.label }}</span>
             <span v-if="row.node.count !== undefined" class="rm-ftree-count">{{ row.node.count }}</span>
@@ -478,5 +519,5 @@ function onClickOutside(event: Event) {
 </template>
 
 <style scoped>
-.rm-ftree-wrap{position:relative}.rm-ftree-wrap--inline{display:flex;flex-direction:column;height:100%;min-height:0}.rm-ftree-pill{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:var(--space-8);height:32px;max-width:320px;padding:0 var(--space-8);transition:border-color var(--duration-fast) var(--ease-in-out);white-space:nowrap}.rm-ftree-pill--active{border-color:var(--color-primary);box-shadow:0 0 8px 0 rgba(var(--brand-rgb),.1)}.rm-ftree-pill__icon{color:var(--color-secondary);flex-shrink:0}.rm-ftree-pill__label{overflow:hidden;text-overflow:ellipsis}.rm-ftree-pill__label b{color:var(--text-primary);font-weight:var(--weight-semibold)}.rm-ftree-pill__more{align-items:center;background:var(--bg-surface-2);border-radius:100px;color:var(--text-secondary);display:inline-flex;flex-shrink:0;font-size:var(--font-11);font-weight:var(--weight-semibold);height:18px;padding:0 6px}.rm-ftree-pill__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.rm-ftree-pill__caret--open{transform:rotate(180deg)}.rm-ftree-panel{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;display:flex;flex-direction:column;min-height:0}.rm-ftree-wrap:not(.rm-ftree-wrap--inline) .rm-ftree-panel{box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08),0 2px 4px rgba(var(--shadow-rgb),.04);left:0;max-width:460px;min-width:380px;position:absolute;top:calc(100% + 4px);z-index:50}.rm-ftree-wrap--inline .rm-ftree-panel{flex:1}.rm-ftree-search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-muted);display:flex;flex-shrink:0;gap:var(--space-6);margin:var(--space-8);padding:var(--space-8)}.rm-ftree-search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:var(--font-14);min-width:0;outline:none}.rm-ftree-list{flex:1;max-height:340px;min-height:0;overflow-y:auto;padding:0 var(--space-4) var(--space-4)}.rm-ftree-wrap--inline .rm-ftree-list{max-height:none}.rm-ftree-empty{color:var(--text-muted);font-family:var(--font-sans);font-size:var(--font-14);margin:0;padding:var(--space-10) var(--space-8)}.rm-ftree-row{align-items:center;border-radius:4px;display:flex}.rm-ftree-row--on{background:rgba(var(--brand-rgb),.06)}.rm-ftree-caret{align-items:center;background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;width:22px}.rm-ftree-caret:hover{color:var(--text-primary)}.rm-ftree-caret--none{cursor:default}.rm-ftree-label{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;flex:1;font-family:var(--font-sans);font-size:var(--font-14);gap:var(--space-8);min-width:0;padding:var(--space-6) var(--space-8);text-align:left}.rm-ftree-label:hover{background:var(--bg-surface-2)}.rm-ftree-box{align-items:center;border:1.5px solid var(--border-default);border-radius:3px;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.rm-ftree-box--on,.rm-ftree-box--partial{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-ftree-box--partial{background:var(--bg-surface);color:var(--color-primary)}.rm-ftree-code{color:var(--color-secondary);flex-shrink:0;font-family:var(--font-mono);font-size:var(--font-12);font-weight:var(--weight-semibold)}.rm-ftree-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-ftree-count{color:var(--text-muted);flex-shrink:0;font-size:var(--font-12);font-variant-numeric:tabular-nums}.rm-ftree-foot{align-items:center;border-top:1px solid var(--border-soft);display:flex;flex-shrink:0;gap:var(--space-8);justify-content:space-between;padding:var(--space-8) var(--space-12)}.rm-ftree-clear{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-13);padding:0;text-decoration:underline}.rm-ftree-clear:hover{color:var(--text-primary)}.rm-ftree-apply{background:var(--color-primary);border:none;border-radius:6px;color:var(--color-text-inverse);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-13);font-weight:var(--weight-semibold);height:30px;padding:0 var(--space-16)}.rm-ftree-apply:hover{filter:brightness(1.05)}
+.rm-ftree-wrap{position:relative}.rm-ftree-wrap--inline{display:flex;flex-direction:column;height:100%;min-height:0}.rm-ftree-pill{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-secondary);cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:var(--font-14);font-weight:var(--weight-medium);gap:var(--space-8);height:32px;max-width:320px;padding:0 var(--space-8);transition:border-color var(--duration-fast) var(--ease-in-out);white-space:nowrap}.rm-ftree-pill--active{border-color:var(--color-primary);box-shadow:0 0 8px 0 rgba(var(--brand-rgb),.1)}.rm-ftree-pill__icon{color:var(--color-secondary);flex-shrink:0}.rm-ftree-pill__label{overflow:hidden;text-overflow:ellipsis}.rm-ftree-pill__label b{color:var(--text-primary);font-weight:var(--weight-semibold)}.rm-ftree-pill__more{align-items:center;background:var(--bg-surface-2);border-radius:100px;color:var(--text-secondary);display:inline-flex;flex-shrink:0;font-size:var(--font-11);font-weight:var(--weight-semibold);height:18px;padding:0 6px}.rm-ftree-pill__caret{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-in-out)}.rm-ftree-pill__caret--open{transform:rotate(180deg)}.rm-ftree-panel{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;display:flex;flex-direction:column;min-height:0}.rm-ftree-wrap:not(.rm-ftree-wrap--inline) .rm-ftree-panel{box-shadow:0 4px 12px rgba(var(--shadow-rgb),.08),0 2px 4px rgba(var(--shadow-rgb),.04);left:0;max-width:460px;min-width:380px;position:absolute;top:calc(100% + 4px);z-index:50}.rm-ftree-wrap--inline .rm-ftree-panel{flex:1}.rm-ftree-search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:6px;color:var(--text-muted);display:flex;flex-shrink:0;gap:var(--space-6);margin:var(--space-8);padding:var(--space-8)}.rm-ftree-search input{background:none;border:none;color:var(--text-primary);flex:1;font-family:var(--font-sans);font-size:var(--font-14);min-width:0;outline:none}.rm-ftree-list{flex:1;max-height:340px;min-height:0;overflow-y:auto;padding:0 var(--space-4) var(--space-4)}.rm-ftree-wrap--inline .rm-ftree-list{max-height:none}.rm-ftree-empty{color:var(--text-muted);font-family:var(--font-sans);font-size:var(--font-14);margin:0;padding:var(--space-10) var(--space-8)}.rm-ftree-row{align-items:center;border-radius:4px;display:flex}.rm-ftree-row--on{background:rgba(var(--brand-rgb),.06)}.rm-ftree-caret{align-items:center;background:none;border:none;color:var(--text-muted);cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;width:22px}.rm-ftree-caret:hover{color:var(--text-primary)}.rm-ftree-caret--none{cursor:default}.rm-ftree-check{align-items:center;background:none;border:none;border-radius:4px;cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;width:28px}.rm-ftree-check:hover .rm-ftree-box{border-color:var(--color-primary)}.rm-ftree-label{align-items:center;background:none;border:none;border-radius:4px;color:var(--text-secondary);cursor:pointer;display:flex;flex:1;font-family:var(--font-sans);font-size:var(--font-14);gap:var(--space-8);min-width:0;padding:var(--space-6) var(--space-8);text-align:left}.rm-ftree-label:hover{background:var(--bg-surface-2)}.rm-ftree-box{align-items:center;border:1.5px solid var(--border-default);border-radius:3px;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--duration-fast) var(--ease-in-out);width:16px}.rm-ftree-box--on,.rm-ftree-box--partial{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-ftree-box--partial{background:var(--bg-surface);color:var(--color-primary)}.rm-ftree-code{color:var(--color-secondary);flex-shrink:0;font-family:var(--font-mono);font-size:var(--font-12);font-weight:var(--weight-semibold)}.rm-ftree-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-ftree-count{color:var(--text-muted);flex-shrink:0;font-size:var(--font-12);font-variant-numeric:tabular-nums}.rm-ftree-foot{align-items:center;border-top:1px solid var(--border-soft);display:flex;flex-shrink:0;gap:var(--space-8);justify-content:space-between;padding:var(--space-8) var(--space-12)}.rm-ftree-clear{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-13);padding:0;text-decoration:underline}.rm-ftree-clear:hover{color:var(--text-primary)}.rm-ftree-apply{background:var(--color-primary);border:none;border-radius:6px;color:var(--color-text-inverse);cursor:pointer;font-family:var(--font-sans);font-size:var(--font-13);font-weight:var(--weight-semibold);height:30px;padding:0 var(--space-16)}.rm-ftree-apply:hover{filter:brightness(1.05)}
 </style>

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

@@ -163,9 +163,9 @@ export declare function rmLegend(theme: RmChartTheme, count: number, position?:
  * echelle de comparaison entre deux courbes.
  */
 /**
- * `formatter` s'applique AUSSI a la graduation, pas seulement a l'infobulle :
- * un axe qui affiche 400 000 000 la ou l'infobulle dit 400 M donne deux
- * lectures du meme nombre sur le meme graphe.
+ * `formatter` s'applique a la graduation. L'infobulle, elle, garde toujours
+ * le nombre entier (`rmNumber`) meme quand l'axe est abrege : au survol, le
+ * lecteur veut la valeur exacte, la ou l'axe n'a que la place pour "18,8 M".
  */
 /**
  * Couleur d'une serie a l'indice `index`.

package/dist/runtime/utils/chart.js

@@ -1,3 +1,4 @@
+import { rmNumber } from "./format.js";
 export const RM_PALETTES = {
   default: {
     cat: ["#2100AD", "#00D4A8", "#F59E0B", "#4164EE", "#EC4899", "#6B3FFF"],
@@ -227,6 +228,7 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
   const dual = series.some((s) => s.axis === 1);
   const bottomLegend = legendPosition === "bottom";
   const format = (value) => valueFormatter ? valueFormatter(value) : String(value);
+  const tooltipFormat = (value) => valueFormatter ? rmNumber(value) : String(value);
   const values = series.flatMap((s) => s.data).filter((v) => typeof v === "number");
   const floorAtZero = startAtZero && values.length > 0 && Math.min(...values) >= 0;
   const base = rmBaseOption(theme, decal);
@@ -239,7 +241,7 @@ export function rmLineOption(categories, series, theme, palette, options = {}) {
     tooltip: {
       ...base.tooltip,
       trigger: rmTooltipTrigger(series.length),
-      ...valueFormatter ? { valueFormatter: (value) => typeof value === "number" ? format(value) : "" } : {}
+      ...valueFormatter ? { valueFormatter: (value) => typeof value === "number" ? tooltipFormat(value) : "" } : {}
     },
     // Legende obligatoire en double axe : sans elle, rien ne dit quelle courbe
     // se lit sur quel axe.

package/package.json

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