@tekkare/romulus 0.1.150 → 0.1.152

package/dist/module.json

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

package/dist/runtime/components/AlertForm.vue

@@ -396,6 +396,10 @@ function submit() {
 </script>
 
 <template>
+  <!-- Chaque section porte un `data-field` : les sections partagent la meme
+       classe, et une visite guidee (cf. RmTour) doit pouvoir designer
+       « Declencheurs » sans compter les fieldsets, dont le nombre change
+       avec le genre d'alerte. -->
   <form class="rm-alert-form" @submit.prevent="submit">
     <RmInput
       :model-value="title"
@@ -407,7 +411,7 @@ function submit() {
       "
     />
 
-    <fieldset v-if="!editing && canWatchView" class="rm-alert-form__group">
+    <fieldset v-if="!editing && canWatchView" class="rm-alert-form__group" data-field="kind">
       <legend class="rm-alert-form__label">{{ T.kind }}</legend>
       <p class="rm-alert-form__hint">
         {{
@@ -427,7 +431,7 @@ function submit() {
       />
     </fieldset>
 
-    <fieldset v-if="watchesProduct" class="rm-alert-form__group">
+    <fieldset v-if="watchesProduct" class="rm-alert-form__group" data-field="brands">
       <legend class="rm-alert-form__label">{{ T.brands }}</legend>
       <p class="rm-alert-form__hint">{{ T.brandsHint }}</p>
       <!-- L'intitule du filtre dit l'action, pas le titre de la section :
@@ -457,7 +461,7 @@ function submit() {
       </p>
     </fieldset>
 
-    <div v-else-if="!editing" class="rm-alert-form__view">
+    <div v-else-if="!editing" class="rm-alert-form__view" data-field="view">
       <p class="rm-alert-form__label">{{ T.view }}</p>
       <p class="rm-alert-form__hint">
         <!-- L'avertissement sur l'application ne vaut que pour une vue deja
@@ -491,7 +495,7 @@ function submit() {
       {{ watchesProduct ? `${T.brands} : ${brands.join(', ')}` : `${T.view} : ${viewTitle}` }}
     </p>
 
-    <fieldset class="rm-alert-form__group">
+    <fieldset class="rm-alert-form__group" data-field="triggers">
       <legend class="rm-alert-form__label">{{ T.triggers }}</legend>
       <p class="rm-alert-form__hint">{{ T.triggersHint }}</p>
       <RmCheckbox
@@ -512,7 +516,7 @@ function submit() {
       {{ T.productFields }}
     </p>
 
-    <fieldset v-if="watchesChanges && !watchesProduct" class="rm-alert-form__group">
+    <fieldset v-if="watchesChanges && !watchesProduct" class="rm-alert-form__group" data-field="fields">
       <legend class="rm-alert-form__label">{{ T.fields }}</legend>
       <p class="rm-alert-form__hint">{{ anyField ? T.anyFieldHint : T.fieldsHint }}</p>
       <template v-if="fields.length">
@@ -530,7 +534,7 @@ function submit() {
       <p v-else class="rm-alert-form__hint">{{ T.noFields }}</p>
     </fieldset>
 
-    <fieldset class="rm-alert-form__group">
+    <fieldset class="rm-alert-form__group" data-field="channels">
       <legend class="rm-alert-form__label">{{ T.channels }}</legend>
       <RmCheckbox :model-value="true" :label="T.inApp" disabled />
 

package/dist/runtime/components/TextHighlight.vue

@@ -0,0 +1,193 @@
+<!--
+  RmTextHighlight - un texte ou les termes cherches ressortent.
+
+  Les listes de resultats doivent montrer POURQUOI une ligne est la : sans le
+  surlignage, une indication de quarante mots trouvee sur un synonyme se lit
+  comme un faux positif. C'est la meme regle que les extraits du moteur, mais
+  rendue cote app, sur un texte que la page tient deja.
+
+  ORIGINE AURIGA
+  --------------
+  Remplace `argTextHighlight`, un composant que les apps recopiaient chez
+  elles (fr_realifedata_app2 en portait une copie a 90 appels). Le surlignage
+  y passait par `v-html` : le texte venait pourtant d'Elasticsearch, donc
+  d'une donnee, et tout `<` qu'il portait entrait tel quel dans le DOM. Ici le
+  texte n'est jamais interprete, il est decoupe en segments et seuls les
+  segments retenus passent dans un `<mark>`.
+
+  | Auriga            | Romulus    | Note                                      |
+  |-------------------|------------|-------------------------------------------|
+  | `text`            | `text`     |                                           |
+  | `queries`         | `queries`  | une chaine ou une liste ; les vides sont ignorees |
+  | `crop` + `lines` + `have-read-more` | `clamp` | un seul nombre : la coupe et le lien vont ensemble, et le lien ne sort que si le texte deborde vraiment |
+  | `id`              | -          | Auriga retrouvait son propre noeud par `document.getElementById` au montage, ce qui demandait un id unique a chaque appel et ne mesurait rien sans lui |
+  | `custom-read-more`| -          | les libelles viennent de `lang`, comme partout ailleurs |
+  | `lang: en/fr/es`  | `lang: fr/en` | l'espagnol n'existe dans aucune app du portail |
+  | `@onShowMore` / `@onShowLess` | `@toggle` | un evenement qui porte l'etat plutot que deux |
+
+  La correspondance est une SOUS-CHAINE, insensible a la casse et aux
+  accents. Auriga bornait chaque terme par `\b`, ce qui laissait « myel » sans
+  surlignage dans « myelome » alors que c'est bien lui qui a ramene la ligne,
+  et ratait tout terme accentue selon la graphie du corpus.
+-->
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Le texte a afficher. Vide, le composant ne rend rien. */
+  text?: string | null
+  /** Termes a surligner. Une chaine vaut une liste d'un terme. */
+  queries?: string | readonly string[] | null
+  /**
+   * Nombre de lignes visibles avant la coupe. A zero, le texte coule et
+   * aucun lien n'est pose.
+   */
+  clamp?: number
+  lang?: 'fr' | 'en'
+}>(), {
+  text: '',
+  queries: null,
+  clamp: 0,
+  lang: 'fr',
+})
+
+const emit = defineEmits<{ toggle: [expanded: boolean] }>()
+
+const WORDS = {
+  fr: { more: 'Lire plus', less: 'Réduire' },
+  en: { more: 'Read more', less: 'Show less' },
+} as const
+
+const words = computed(() => WORDS[props.lang])
+
+/**
+ * Minuscule et sans accent, SANS changer la longueur : c'est ce qui permet de
+ * chercher sur la forme repliee et de decouper le texte d'origine aux memes
+ * indices. Un `normalize('NFD')` sur toute la chaine, lui, ajoute les signes
+ * combinants et decale tout.
+ */
+function fold(value: string): string {
+  let out = ''
+  for (const char of value) {
+    out += char.normalize('NFD')[0]!.toLowerCase()
+  }
+  return out
+}
+
+type Segment = { text: string, hit: boolean }
+
+const segments = computed<Segment[]>(() => {
+  const text = props.text ?? ''
+  if (!text) return []
+
+  const terms = (Array.isArray(props.queries) ? props.queries : props.queries ? [props.queries] : [])
+    .map(term => String(term ?? '').trim())
+    .filter(Boolean)
+  if (!terms.length) return [{ text, hit: false }]
+
+  const hay = fold(text)
+  const spans: [number, number][] = []
+  for (const term of terms) {
+    const needle = fold(term)
+    if (!needle) continue
+    let from = 0
+    for (;;) {
+      const at = hay.indexOf(needle, from)
+      if (at === -1) break
+      spans.push([at, at + needle.length])
+      from = at + needle.length
+    }
+  }
+  if (!spans.length) return [{ text, hit: false }]
+
+  // Deux termes qui se chevauchent ne font qu'un surlignage : sans la fusion,
+  // le second couperait le premier en deux `<mark>` colles, que le lecteur
+  // voit comme deux mots.
+  spans.sort((a, b) => a[0] - b[0])
+  const merged: [number, number][] = [spans[0]!]
+  for (const [start, end] of spans.slice(1)) {
+    const last = merged[merged.length - 1]!
+    if (start <= last[1]) last[1] = Math.max(last[1], end)
+    else merged.push([start, end])
+  }
+
+  const out: Segment[] = []
+  let cursor = 0
+  for (const [start, end] of merged) {
+    if (start > cursor) out.push({ text: text.slice(cursor, start), hit: false })
+    out.push({ text: text.slice(start, end), hit: true })
+    cursor = end
+  }
+  if (cursor < text.length) out.push({ text: text.slice(cursor), hit: false })
+  return out
+})
+
+const bodyRef = ref<HTMLElement>()
+const expanded = ref(false)
+const overflows = ref(false)
+
+/**
+ * La mesure se fait dans l'etat coupe et se refait au redimensionnement : une
+ * carte elargie peut faire tenir le texte, le lien doit alors disparaitre.
+ * Une fois deplie, on ne remesure pas : l'element n'est plus coupe, la
+ * comparaison rendrait toujours faux et le lien « Reduire » s'effacerait sous
+ * le doigt.
+ */
+async function measure() {
+  if (!props.clamp || expanded.value) return
+  await nextTick()
+  const el = bodyRef.value
+  if (!el) return
+  overflows.value = el.scrollHeight > el.clientHeight
+}
+
+let observer: ResizeObserver | undefined
+
+onMounted(() => {
+  measure()
+  if (typeof ResizeObserver !== 'undefined' && bodyRef.value) {
+    observer = new ResizeObserver(() => measure())
+    observer.observe(bodyRef.value)
+  }
+})
+onBeforeUnmount(() => observer?.disconnect())
+
+// Un changement de texte remet la coupe : le paragraphe suivant n'a aucune
+// raison d'heriter du « deplie » demande sur le precedent.
+watch(() => props.text, () => {
+  expanded.value = false
+  measure()
+})
+
+function toggle() {
+  expanded.value = !expanded.value
+  emit('toggle', expanded.value)
+}
+</script>
+
+<template>
+  <div v-if="text" class="rm-thl">
+    <p
+      ref="bodyRef"
+      class="rm-thl__body"
+      :class="{ 'rm-thl__body--cut': clamp && !expanded }"
+      :style="clamp ? { '--rm-thl-lines': clamp } : undefined"
+    ><template v-for="(segment, index) in segments" :key="index"><mark
+      v-if="segment.hit"
+      class="rm-thl__hit"
+    >{{ segment.text }}</mark><template v-else>{{ segment.text }}</template></template></p>
+    <button
+      v-if="clamp && overflows"
+      type="button"
+      class="rm-thl__toggle"
+      :aria-expanded="expanded"
+      @click="toggle"
+    >
+      {{ expanded ? words.less : words.more }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.rm-thl{max-width:100%;min-width:0}.rm-thl__body{color:inherit;font-size:inherit;line-height:inherit;margin:0;overflow-wrap:break-word;word-break:break-word}.rm-thl__body--cut{display:-webkit-box;-webkit-line-clamp:var(--rm-thl-lines);line-clamp:var(--rm-thl-lines);-webkit-box-orient:vertical;overflow:hidden}.rm-thl__hit{background:color-mix(in srgb,var(--color-primary) 18%,transparent);border-radius:var(--radius-sm,4px);color:inherit;font-weight:var(--weight-semibold,600);padding:0 2px}.rm-thl__toggle{background:none;border:none;color:var(--color-primary);cursor:pointer;display:inline-block;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-semibold);margin-top:var(--space-4);padding:0}.rm-thl__toggle:hover{text-decoration:underline}
+</style>

package/dist/runtime/components/Tour.vue

@@ -152,15 +152,44 @@ function stop() {
   frame = null
 }
 
-/** La cible est amenee a l'ecran au changement d'etape, jamais apres. */
+/**
+ * La cible est amenee a l'ecran au changement d'etape, jamais apres.
+ *
+ * Le defilement est VERTICAL seulement, et fait a la main plutot que par
+ * `scrollIntoView`. Une cible du cadre (un panneau qui glisse encore, une
+ * tuile du rail) est brievement hors champ a droite, et `scrollIntoView` y
+ * repond en poussant la page de cote : le cadre se decalait, et le detourage
+ * pointait a cote pour tout le reste de la visite.
+ */
 function reveal() {
   const selector = current.value?.target
   if (!selector) return
   const node = findTarget(selector)
   if (!node) return
+
+  const rect = node.getBoundingClientRect()
+  const vh = window.innerHeight
+  // Deja lisible : ne rien bouger. Une cible plus haute que la fenetre compte
+  // comme lue des que son debut est visible.
+  if (rect.top >= 0 && (rect.bottom <= vh || rect.height >= vh)) return
+
   const still = document.body.classList.contains('reduce-motion')
     || window.matchMedia('(prefers-reduced-motion: reduce)').matches
-  node.scrollIntoView({ block: 'center', inline: 'nearest', behavior: still ? 'auto' : 'smooth' })
+  const delta = rect.top - Math.max((vh - rect.height) / 2, 0)
+
+  // Le conteneur qui defile : le corps d'un panneau ou d'une modale, sinon la
+  // fenetre. Sans cette recherche, une etape qui designe le bas d'un
+  // formulaire long ferait defiler la page derriere la modale.
+  let parent: HTMLElement | null = node.parentElement
+  while (parent) {
+    const style = getComputedStyle(parent)
+    const scrolls = /(auto|scroll)/.test(style.overflowY)
+    if (scrolls && parent.scrollHeight > parent.clientHeight + 1) break
+    parent = parent.parentElement
+  }
+
+  if (parent) parent.scrollBy({ top: delta, behavior: still ? 'auto' : 'smooth' })
+  else window.scrollBy({ top: delta, behavior: still ? 'auto' : 'smooth' })
 }
 
 function onKeydown(event: KeyboardEvent) {

package/package.json

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