@tekkare/romulus 0.1.154 → 0.1.156

package/dist/module.json

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

package/dist/runtime/components/AppHeader.vue

@@ -68,6 +68,12 @@ export interface RmHeaderTab {
    * paquet de lignes.
    */
   count?: number | string
+  /**
+   * Phrase d'aide, montree au survol et annoncee par le titre accessible :
+   * ce que l'onglet contient quand son libelle ne suffit pas (« Diagnostics
+   * enregistres lors du sejour »). Absente, l'onglet n'en porte pas.
+   */
+  hint?: string
 }
 
 withDefaults(defineProps<{

package/dist/runtime/components/BarChart.vue

@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useChartTheme } from '../composables/useChartTheme'
-import { rmBarHorizontalOption, rmBarVerticalOption, type RmSeriesInput, RM_CHART_HEIGHTS } from '../utils/chart'
+import { rmBarHorizontalOption, rmBarVerticalOption, type RmBarLabelFormatter, type RmSeriesInput, RM_CHART_HEIGHTS } from '../utils/chart'
 
 const props = withDefaults(defineProps<{
   /** Categories de l'axe : annees, libelles d'indicateur. */
@@ -15,8 +15,12 @@ const props = withDefaults(defineProps<{
   horizontal?: boolean
   height?: keyof typeof RM_CHART_HEIGHTS | number
   description?: string
-  /** Formatage de la valeur en bout de barre (horizontal uniquement). */
-  labelFormatter?: (value: number) => string
+  /**
+   * Etiquette de chaque barre : en bout de barre a l'horizontale, au-dessus a
+   * la verticale. Sans elle, la valeur se lit sur l'axe et dans l'infobulle,
+   * ce qui suffit des que les barres sont nombreuses.
+   */
+  labelFormatter?: RmBarLabelFormatter
 }>(), {
   horizontal: false,
   height: 'standard',
@@ -36,7 +40,14 @@ const option = computed(() =>
         decal.value,
         props.labelFormatter,
       )
-    : rmBarVerticalOption(props.categories, props.series, theme.value, palette.value.cat, decal.value),
+    : rmBarVerticalOption(
+        props.categories,
+        props.series,
+        theme.value,
+        palette.value.cat,
+        decal.value,
+        props.labelFormatter,
+      ),
 )
 </script>
 

package/dist/runtime/components/DropdownSelect.vue

@@ -55,6 +55,13 @@ const props = withDefaults(defineProps<{
   filterSearch?: boolean
   /** Le panneau se ferme des qu'une valeur est prise. */
   closeOnClick?: boolean
+  /**
+   * Options montrees mais non selectionnables. Elles restent dans la liste a
+   * dessein : une mesure absente d'un jeu (un montant sur un perimetre qui
+   * n'en porte pas) se lit mieux grisee que disparue, sinon le lecteur croit
+   * l'avoir mal cherchee.
+   */
+  disabledOptions?: string[]
   lang?: 'fr' | 'en'
 }>(), {
   search: true,
@@ -66,6 +73,7 @@ const props = withDefaults(defineProps<{
   searchPlaceholder: undefined,
   filterSearch: true,
   closeOnClick: true,
+  disabledOptions: () => [],
   lang: 'fr',
 })
 
@@ -91,6 +99,11 @@ const activeIndex = ref(-1)
 const rootRef = ref<HTMLElement>()
 const searchRef = ref<HTMLInputElement>()
 
+/** Cette option est-elle montree sans etre prenable ? */
+function isDisabled(option: string): boolean {
+  return props.disabledOptions.includes(option)
+}
+
 const visibleOptions = computed(() => {
   const needle = searchTerm.value.trim().toLowerCase()
   if (!needle || !props.filterSearch) return props.options
@@ -165,6 +178,7 @@ async function toggle() {
 }
 
 function pick(option: string) {
+  if (isDisabled(option)) return
   selected.value = option
   emit('change', option)
   if (props.closeOnClick) close()
@@ -256,9 +270,14 @@ onUnmounted(() => {
           :key="option"
           role="option"
           class="rm-dsel__option"
-          :class="{ 'is-selected': option === selected, 'is-active': index === activeIndex }"
+          :class="{
+            'is-selected': option === selected,
+            'is-active': index === activeIndex && !isDisabled(option),
+            'is-disabled': isDisabled(option),
+          }"
           :aria-selected="option === selected"
-          @click="pick(option)"
+          :aria-disabled="isDisabled(option) || undefined"
+          @click="isDisabled(option) ? undefined : pick(option)"
           @mousemove="activeIndex = index"
         >
           <component
@@ -274,5 +293,5 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.rm-dsel{align-items:stretch;display:flex;flex-direction:column;gap:var(--space-4);position:relative;width:196px}.rm-dsel__label{color:var(--text-secondary);font-size:var(--font-12,12px);line-height:14px}.rm-dsel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:var(--space-4);line-height:16px;padding:var(--space-12);text-align:left;width:100%}.rm-dsel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-dsel__field.is-open{border-color:var(--color-primary)}.rm-dsel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-dsel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-dsel__value-slot{display:block;flex:1;min-width:0}.rm-dsel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-dsel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-dsel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-dsel__panel{background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;display:flex;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:420px;min-width:max(230px,100%);padding:var(--space-16);position:absolute;top:100%;z-index:12}.rm-dsel__panel--up{bottom:100%;margin-bottom:8px;margin-top:0;top:auto}.rm-dsel__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:flex;gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-dsel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-dsel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input:focus-visible{outline:none}.rm-dsel__loading{display:flex;flex-direction:column;gap:var(--space-10);padding-top:var(--space-8)}.rm-dsel__sr{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.rm-dsel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:var(--space-16);text-align:center}.rm-dsel__list{display:flex;flex-direction:column;list-style:none;margin:0;min-height:10px;overflow-y:auto;padding:0}.rm-dsel__list:not(:only-child){margin-top:16px}.rm-dsel__option{align-items:center;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;font-size:var(--font-14,14px);gap:var(--space-8);line-height:160%;margin:4px 0;min-height:24px;padding:var(--space-2) var(--space-4)}.rm-dsel__option :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__option.is-active{background:rgba(var(--brand-rgb),.05)}.rm-dsel__option.is-selected{font-weight:700}.rm-dsel__option.is-active :deep(svg),.rm-dsel__option.is-selected :deep(svg){color:var(--color-primary)}
+.rm-dsel{align-items:stretch;display:flex;flex-direction:column;gap:var(--space-4);position:relative;width:196px}.rm-dsel__label{color:var(--text-secondary);font-size:var(--font-12,12px);line-height:14px}.rm-dsel__field{align-items:center;background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-md,8px);box-sizing:border-box;color:var(--text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-14,14px);font-weight:700;gap:var(--space-4);line-height:16px;padding:var(--space-12);text-align:left;width:100%}.rm-dsel__field:hover:not(.is-disabled){border-color:rgba(var(--brand-rgb),.3)}.rm-dsel__field.is-open{border-color:var(--color-primary)}.rm-dsel__field.is-disabled{background:var(--bg-surface-2);color:var(--text-muted);cursor:not-allowed}.rm-dsel__field:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.rm-dsel__value-slot{display:block;flex:1;min-width:0}.rm-dsel__value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rm-dsel__value.is-empty{color:var(--text-muted);font-style:italic;font-weight:400}.rm-dsel__field :deep(svg){color:var(--text-secondary);flex-shrink:0}.rm-dsel__panel{background:var(--bg-surface);border:1.5px solid var(--border-default);border-radius:var(--radius-lg,12px);box-shadow:var(--r-shadow-lg,0 8px 24px rgba(0,0,0,.12));box-sizing:border-box;display:flex;flex-direction:column;left:0;margin-top:8px;max-height:500px;max-width:420px;min-width:max(230px,100%);padding:var(--space-16);position:absolute;top:100%;z-index:12}.rm-dsel__panel--up{bottom:100%;margin-bottom:8px;margin-top:0;top:auto}.rm-dsel__search{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md,8px);display:flex;gap:var(--space-8);padding:var(--space-8) var(--space-12)}.rm-dsel__search :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__search-input{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-14,14px);width:100%}.rm-dsel__search-input::-moz-placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input::placeholder{color:var(--text-muted);font-size:var(--font-12,12px)}.rm-dsel__search-input:focus-visible{outline:none}.rm-dsel__loading{display:flex;flex-direction:column;gap:var(--space-10);padding-top:var(--space-8)}.rm-dsel__sr{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.rm-dsel__state{color:var(--text-secondary);font-size:var(--font-14,14px);font-style:italic;padding-top:var(--space-16);text-align:center}.rm-dsel__list{display:flex;flex-direction:column;list-style:none;margin:0;min-height:10px;overflow-y:auto;padding:0}.rm-dsel__list:not(:only-child){margin-top:16px}.rm-dsel__option.is-disabled{color:var(--text-muted);cursor:not-allowed}.rm-dsel__option{align-items:center;border-radius:var(--radius-sm,4px);cursor:pointer;display:flex;font-size:var(--font-14,14px);gap:var(--space-8);line-height:160%;margin:4px 0;min-height:24px;padding:var(--space-2) var(--space-4)}.rm-dsel__option :deep(svg){color:var(--text-muted);flex-shrink:0}.rm-dsel__option.is-active{background:rgba(var(--brand-rgb),.05)}.rm-dsel__option.is-selected{font-weight:700}.rm-dsel__option.is-active :deep(svg),.rm-dsel__option.is-selected :deep(svg){color:var(--color-primary)}
 </style>

package/dist/runtime/components/PageHeader.vue

@@ -14,6 +14,7 @@
   | `tabs: string[]`           | `tabs: RmHeaderTab[]`        | `{ key, label, active }` |
   | `index_menu` (a partir de 1) | `active` porte par l'onglet | cote fr_drugs_app, `app/utils/headerTabs.ts` fait le pont |
   | `@updateMenu` / `@update:Menu` | `@tab`                   | rend la cle, pas l'indice |
+  | `header-tooltips: string[]` | `hint` porte par l'onglet | Auriga prenait un tableau parallele a celui des onglets, ou un trou se lisait `null` : l'aide vit desormais sur l'onglet qu'elle decrit |
   | `sur-titre dans #Title`    | `eyebrow`                    | ATTENTION : le slot `#title` impose sa police et sa taille, un petit libelle pose dedans ressort en serif 32 px |
 
   Il porte aussi les onglets de la page, sous le titre : c'etait la derniere
@@ -84,6 +85,7 @@ const router = useRouter()
         type="button"
         role="tab"
         :aria-selected="tab.active ? 'true' : 'false'"
+        :title="tab.hint || undefined"
         @click="emit('tab', tab.key)"
       >
         {{ tab.label }}

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

@@ -177,7 +177,13 @@ export interface RmSeriesInput {
     axis?: 0 | 1;
 }
 /** Bar chart vertical, une ou plusieurs series, empilable. */
-export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean): {
+/**
+ * Etiquette d'une barre. L'index est donne parce que la valeur seule ne suffit
+ * pas toujours : une part se lit contre un total que l'appelant tient a cote
+ * (« 1 240 (18 %) »), et c'est l'index qui la retrouve.
+ */
+export type RmBarLabelFormatter = (value: number, index: number) => string;
+export declare function rmBarVerticalOption(categories: (string | number)[], series: RmSeriesInput[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter): {
     tooltip: {
         trigger: string;
         backgroundColor: string;
@@ -282,6 +288,17 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
             color: string;
             borderRadius: number[];
         };
+        label: {
+            show: boolean;
+            position: string;
+            fontSize: number;
+            color: string;
+            fontFamily: string;
+            formatter: (p: {
+                value: number;
+                dataIndex: number;
+            }) => string;
+        } | undefined;
     }[];
     backgroundColor: string;
     animation: boolean;
@@ -296,7 +313,7 @@ export declare function rmBarVerticalOption(categories: (string | number)[], ser
     };
 };
 /** Bar chart horizontal, avec valeur affichee en bout de barre. */
-export declare function rmBarHorizontalOption(labels: string[], values: (number | null)[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: (value: number) => string): {
+export declare function rmBarHorizontalOption(labels: string[], values: (number | null)[], theme: RmChartTheme, palette: string[], decal?: boolean, formatter?: RmBarLabelFormatter): {
     grid: {
         left: number;
         right: number;
@@ -356,6 +373,7 @@ export declare function rmBarHorizontalOption(labels: string[], values: (number
             fontFamily: string;
             formatter: ((p: {
                 value: number;
+                dataIndex: number;
             }) => string) | undefined;
         };
     }[];

package/dist/runtime/utils/chart.js

@@ -140,7 +140,7 @@ const axisCommon = (theme) => ({
   axisLine: { lineStyle: { color: theme.axisLine } },
   splitLine: { lineStyle: { color: theme.splitLine } }
 });
-export function rmBarVerticalOption(categories, series, theme, palette, decal = false) {
+export function rmBarVerticalOption(categories, series, theme, palette, decal = false, formatter) {
   return {
     ...rmBaseOption(theme, decal),
     tooltip: { ...rmBaseOption(theme, decal).tooltip, trigger: rmTooltipTrigger(series.length) },
@@ -155,7 +155,17 @@ export function rmBarVerticalOption(categories, series, theme, palette, decal =
       name: s.name,
       stack: s.stack,
       data: s.data,
-      itemStyle: { color: s.color ?? rmSeriesColor(palette, i), borderRadius: [3, 3, 0, 0] }
+      itemStyle: { color: s.color ?? rmSeriesColor(palette, i), borderRadius: [3, 3, 0, 0] },
+      // L'etiquette ne se pose que si l'appelant la demande : sur une serie
+      // longue elle se chevaucherait, et l'axe dit deja la valeur.
+      label: formatter ? {
+        show: true,
+        position: "top",
+        fontSize: 11,
+        color: theme.mutedColor,
+        fontFamily: FONT,
+        formatter: (p) => formatter(p.value, p.dataIndex)
+      } : void 0
     }))
   };
 }
@@ -178,7 +188,7 @@ export function rmBarHorizontalOption(labels, values, theme, palette, decal = fa
         fontSize: 11,
         color: theme.mutedColor,
         fontFamily: FONT,
-        formatter: formatter ? (p) => formatter(p.value) : void 0
+        formatter: formatter ? (p) => formatter(p.value, p.dataIndex) : void 0
       }
     }]
   };

package/package.json

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