@tekkare/romulus 0.1.166 → 0.1.168

package/dist/module.json

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

package/dist/runtime/components/ChoroplethMap.vue

@@ -0,0 +1,248 @@
+<!--
+  RmChoroplethMap - une valeur par region, peinte sur la carte d'un pays.
+
+  Le pays est une donnee (`geography`), pas un composant : d'un pays a l'autre
+  seul le trace changeait. Le trace est charge a la demande, jeu par jeu (cf.
+  internal/geo), parce que tous ensemble ils pesent plus lourd que le reste du
+  paquet.
+
+  L'echelle de couleur est la palette sequentielle du design system
+  (`palette.seq`), donc elle suit le mode nuit et la palette daltonienne. Une
+  region sans valeur n'est pas peinte en clair : elle est peinte dans une
+  surface neutre, hors echelle, parce que « pas de donnee » et « valeur
+  basse » ne sont pas la meme chose.
+
+  ORIGINE AURIGA
+  --------------
+  Remplace les dix-sept composants `argMapsXxx` (un par pays) et leurs
+  `oneRegionXx` (un par region), qui partageaient le meme script a la ligne
+  pres.
+
+  | Auriga                  | Romulus         | Note                          |
+  |-------------------------|-----------------|-------------------------------|
+  | `<argMapsUs>`, `<argMapsGermany>`, ... | `geography="us"`, `"de"`, ... | un composant, le pays en donnee |
+  | `have-custom-title`     | slot `#title`   | la presence du slot suffit, la prop disait la meme chose une seconde fois |
+  | slot `#Tooltip`         | slot `#tooltip` | meme donnee (`{ name, value }`) |
+  | slot `#Subcontent`      | slot `#footer`  |                               |
+  | `hide-drom-tom`         | `compact`       | le nom ne parlait que de la France |
+  | `@openSource`           | `@source`       |                               |
+  | echelle de 10 couleurs ecrites en dur | `palette.seq` | suit le mode nuit et la palette daltonienne |
+  | `results`               | -               | prop morte : aucune carte ne la lisait |
+-->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { RM_GEOGRAPHIES, type RmGeoShape } from '../internal/geo'
+import { useChartTheme } from '../composables/useChartTheme'
+
+export interface RmChoroplethValue {
+  /** Nom de la region, tel que la geographie la nomme. */
+  name: string
+  value: number | null | undefined
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** Le pays dessine : `fr-regions`, `fr-departements`, `us`, `de`, `kr`. */
+    geography: string
+    data?: RmChoroplethValue[]
+    title?: string | null
+    /** Source citee sous le titre. */
+    source?: string | null
+    /**
+     * Inverse la lecture de l'echelle : la valeur basse est la plus foncee.
+     * Pour un indicateur ou peu vaut mieux (une couverture manquante).
+     */
+    reverseColors?: boolean
+    /** Resserre le cadrage sur la partie continentale. */
+    compact?: boolean
+    /** Hauteur du dessin, en pixels. */
+    height?: number
+    lang?: 'fr' | 'en'
+  }>(),
+  {
+    data: () => [],
+    title: null,
+    source: null,
+    reverseColors: false,
+    compact: false,
+    height: 500,
+    lang: 'fr',
+  },
+)
+
+const emit = defineEmits<{
+  /** La source citee est cliquee. */
+  source: []
+  /** Une region est cliquee. */
+  select: [name: string]
+}>()
+
+const { palette } = useChartTheme()
+
+const shapes = ref<Record<string, RmGeoShape>>({})
+const loading = ref(true)
+
+const geography = computed(() => RM_GEOGRAPHIES[props.geography])
+
+watch(
+  () => props.geography,
+  async (key) => {
+    const geo = RM_GEOGRAPHIES[key]
+    shapes.value = {}
+    if (!geo) {
+      loading.value = false
+      return
+    }
+    loading.value = true
+    shapes.value = await geo.load()
+    loading.value = false
+  },
+  { immediate: true },
+)
+
+const viewBox = computed(() =>
+  (props.compact ? geography.value?.compactViewBox : null) ?? geography.value?.viewBox ?? '0 0 100 100',
+)
+
+const values = computed(() =>
+  props.data.filter(d => d.value !== null && d.value !== undefined).map(d => Number(d.value)),
+)
+
+const bounds = computed(() => {
+  if (!values.value.length) return null
+  return { min: Math.min(...values.value), max: Math.max(...values.value) }
+})
+
+/**
+ * Cinq tranches d'egale largeur. Auriga en peignait dix, ecrites en dur :
+ * au-dela, deux tranches voisines ne se distinguent plus et la legende promet
+ * une precision que l'oeil ne lit pas.
+ *
+ * La premiere teinte de la palette sequentielle est ecartee : elle est presque
+ * blanche, et la region la plus basse se lisait alors comme une region sans
+ * donnee, qui est la seule chose que cette carte ne doit pas confondre.
+ */
+const ramp = computed(() => {
+  const seq = palette.value.seq.slice(1)
+  return props.reverseColors ? [...seq].reverse() : seq
+})
+
+const byName = computed(() => {
+  const out = new Map<string, number | null>()
+  for (const entry of props.data) {
+    out.set(entry.name, entry.value === null || entry.value === undefined ? null : Number(entry.value))
+  }
+  return out
+})
+
+/** Hors echelle : une region sans valeur ne se lit pas comme une valeur basse. */
+const NO_DATA = 'var(--bg-surface-3)'
+
+function colorOf(name: string) {
+  const value = byName.value.get(name)
+  if (value === null || value === undefined || !bounds.value) return NO_DATA
+  const { min, max } = bounds.value
+  if (max === min) return ramp.value[ramp.value.length - 1]!
+  const step = (value - min) / (max - min)
+  const index = Math.min(ramp.value.length - 1, Math.floor(step * ramp.value.length))
+  return ramp.value[index]!
+}
+
+const hovered = ref<string | null>(null)
+const pointer = ref({ x: 0, y: 0 })
+
+function onEnter(name: string, event: MouseEvent) {
+  hovered.value = name
+  onMove(event)
+}
+
+function onMove(event: MouseEvent) {
+  const host = (event.currentTarget as SVGElement)?.ownerSVGElement?.parentElement
+  const box = host?.getBoundingClientRect()
+  pointer.value = {
+    x: event.clientX - (box?.left ?? 0),
+    y: event.clientY - (box?.top ?? 0),
+  }
+}
+
+function onLeave() {
+  hovered.value = null
+}
+
+onBeforeUnmount(() => {
+  hovered.value = null
+})
+
+const hoveredValue = computed(() =>
+  hovered.value === null ? null : (byName.value.get(hovered.value) ?? null),
+)
+
+const T = computed(() =>
+  props.lang === 'en'
+    ? { noData: 'No data', source: 'Source' }
+    : { noData: 'Pas de donnée', source: 'Source' },
+)
+
+/** Dégradé de la légende, dans l'ordre de lecture de l'échelle. */
+const legendGradient = computed(() => `linear-gradient(90deg, ${ramp.value.join(', ')})`)
+
+const fmt = computed(() => new Intl.NumberFormat(props.lang === 'en' ? 'en-US' : 'fr-FR'))
+</script>
+
+<template>
+  <div class="rm-choro">
+    <div class="rm-choro__head">
+      <slot name="title">
+        <p v-if="title" class="rm-choro__title">{{ title }}</p>
+      </slot>
+      <button v-if="source" type="button" class="rm-choro__source" @click="emit('source')">
+        {{ T.source }} : {{ source }}
+      </button>
+    </div>
+
+    <div class="rm-choro__plot" :style="{ height: `${height}px` }">
+      <RmSkeleton v-if="loading" height="100%" />
+      <svg v-else class="rm-choro__svg" :viewBox="viewBox" preserveAspectRatio="xMidYMid meet">
+        <path
+          v-for="(shape, name) in shapes"
+          :key="name"
+          :d="shape.path"
+          :fill="colorOf(String(name))"
+          :stroke="colorOf(String(name)) === NO_DATA ? 'var(--border-default)' : colorOf(String(name))"
+          stroke-width="1"
+          class="rm-choro__shape"
+          :class="{ 'rm-choro__shape--dimmed': hovered !== null && hovered !== name }"
+          @mouseenter="onEnter(String(name), $event)"
+          @mousemove="onMove"
+          @mouseleave="onLeave"
+          @click="emit('select', String(name))"
+        />
+      </svg>
+
+      <div
+        v-if="hovered !== null"
+        class="rm-choro__tip"
+        :style="{ top: `${pointer.y}px`, left: `${pointer.x}px` }"
+      >
+        <p class="rm-choro__tip_name">{{ hovered }}</p>
+        <slot name="tooltip" :value="{ name: hovered, value: hoveredValue }">
+          <p class="rm-choro__tip_value">
+            {{ hoveredValue === null ? T.noData : fmt.format(hoveredValue) }}
+          </p>
+        </slot>
+      </div>
+    </div>
+
+    <div v-if="bounds" class="rm-choro__legend">
+      <span>{{ fmt.format(Math.floor(bounds.min)) }}</span>
+      <span class="rm-choro__legend_bar" :style="{ background: legendGradient }" />
+      <span>{{ fmt.format(Math.ceil(bounds.max)) }}</span>
+    </div>
+
+    <slot name="footer" />
+  </div>
+</template>
+
+<style scoped>
+.rm-choro{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xl);gap:var(--space-16);padding:var(--space-24)}.rm-choro,.rm-choro__head{display:flex;flex-direction:column}.rm-choro__head{gap:var(--space-4)}.rm-choro__title{color:var(--text-primary);font-family:var(--font-serif);font-size:var(--font-18,18px);font-weight:700;margin:0}.rm-choro__source{align-self:flex-start;background:none;border:0;color:var(--text-muted);cursor:pointer;font-size:var(--font-12,12px);padding:0;text-decoration:underline}.rm-choro__plot{position:relative}.rm-choro__svg{height:100%;width:100%}.rm-choro__shape{cursor:pointer;transition:opacity var(--duration-fast) var(--ease-in-out)}.rm-choro__shape--dimmed{opacity:.45}.rm-choro__tip{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);max-width:260px;padding:var(--space-8) var(--space-12);pointer-events:none;position:absolute;transform:translate(-50%,calc(-100% - 12px));z-index:2}.rm-choro__tip_name{color:var(--text-primary);font-size:var(--font-14,14px);font-weight:700;margin:0}.rm-choro__tip_value{color:var(--text-secondary);font-size:var(--font-14,14px);margin:0}.rm-choro__legend{align-items:center;color:var(--text-muted);display:flex;font-size:var(--font-12,12px);gap:var(--space-8)}.rm-choro__legend_bar{border-radius:4px;flex:1;height:8px}
+</style>

package/dist/runtime/components/Textarea.vue

@@ -0,0 +1,72 @@
+<!--
+  Champ de texte multiligne.
+
+  Jumeau de RmInput : meme etiquette, meme message d'erreur, meme dessin de
+  bordure et de focus. Seule la hauteur change, et elle est reglable en lignes
+  plutot qu'en pixels — une description de trois lignes ne se decrit pas en
+  `72px`, et la valeur suivrait mal un changement de graisse de texte.
+
+  ORIGINE AURIGA
+  --------------
+  Remplace le `<textarea>` nu que les apps posaient a cote d'un `arg-input`,
+  avec leur propre feuille de style : il ne suivait ni le mode nuit ni les
+  jetons de bordure, et divergeait d'une app a l'autre.
+
+  `resize` vaut `vertical` par defaut : l'horizontal deborde des colonnes de
+  formulaire et casse la grille.
+-->
+<script setup lang="ts">
+export interface RTextareaProps {
+  /** The v-model value */
+  modelValue?: string
+  /** Label text displayed above the field */
+  label?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Error message to display */
+  error?: string
+  /** Whether the field is disabled */
+  disabled?: boolean
+  /** Whether the field is required */
+  required?: boolean
+  /** Visible height, in lines of text */
+  rows?: number
+  /** Whether the user may resize the field */
+  resize?: 'none' | 'vertical'
+}
+
+withDefaults(defineProps<RTextareaProps>(), {
+  modelValue: '',
+  disabled: false,
+  required: false,
+  rows: 4,
+  resize: 'vertical',
+})
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>
+
+<template>
+  <div class="r-textarea-wrapper">
+    <label v-if="label" class="r-textarea-label">
+      {{ label }}
+      <span v-if="required" class="r-textarea-required">*</span>
+    </label>
+    <textarea
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="required"
+      :rows="rows"
+      :class="['r-textarea', `r-textarea--resize-${resize}`, { 'r-textarea--error': error }]"
+      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+    />
+    <p v-if="error" class="r-textarea-error">{{ error }}</p>
+  </div>
+</template>
+
+<style scoped>
+.r-textarea-wrapper{display:flex;flex-direction:column;gap:var(--space-4)}.r-textarea-label{color:var(--text-secondary);font-size:var(--font-14);font-weight:var(--weight-medium)}.r-textarea-required{color:var(--color-danger);margin-left:2px}.r-textarea{background-color:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-sizing:border-box;color:var(--text-primary);font-family:inherit;font-size:var(--font-14);line-height:1.5;padding:var(--space-8) var(--space-12);transition:border-color var(--duration-fast) var(--ease-in-out),box-shadow var(--duration-fast) var(--ease-in-out);width:100%}.r-textarea--resize-none{resize:none}.r-textarea--resize-vertical{resize:vertical}.r-textarea::-moz-placeholder{color:var(--text-muted)}.r-textarea::placeholder{color:var(--text-muted)}.r-textarea:hover:not(:disabled){border-color:var(--text-muted)}.r-textarea:focus{border-color:var(--color-healthcare);box-shadow:0 0 0 3px var(--bg-hover);outline:none}.r-textarea:disabled{background-color:var(--bg-surface-2);cursor:not-allowed;opacity:.5}.r-textarea--error,.r-textarea--error:focus{border-color:var(--color-danger)}.r-textarea--error:focus{box-shadow:0 0 0 3px rgba(239,68,68,.15)}.r-textarea-error{color:var(--color-danger);font-size:var(--font-12);margin-top:var(--space-4)}
+</style>