@tekkare/romulus 0.1.150 → 0.1.151

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.149",
+  "version": "0.1.150",
   "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/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.151",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",