@tekkare/romulus 0.1.149 → 0.1.150
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +1 -1
- package/dist/runtime/components/Tour.vue +26 -11
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -82,13 +82,28 @@ const GAP = 14
|
|
|
82
82
|
/** Marge minimale entre la bulle et le bord de la fenetre. */
|
|
83
83
|
const EDGE = 16
|
|
84
84
|
|
|
85
|
+
/**
|
|
86
|
+
* Le noeud vise. Une etape peut donner plusieurs selecteurs separes par une
|
|
87
|
+
* virgule : ils sont essayes DANS L'ORDRE ECRIT, du plus precis au repli.
|
|
88
|
+
* `document.querySelector` avec la meme liste rendrait le premier noeud dans
|
|
89
|
+
* l'ordre du document, donc souvent le repli — un panneau plutot que la liste
|
|
90
|
+
* qu'il contient.
|
|
91
|
+
*/
|
|
92
|
+
function findTarget(selector: string): HTMLElement | null {
|
|
93
|
+
for (const part of selector.split(',')) {
|
|
94
|
+
const node = document.querySelector(part.trim()) as HTMLElement | null
|
|
95
|
+
if (node) return node
|
|
96
|
+
}
|
|
97
|
+
return null
|
|
98
|
+
}
|
|
99
|
+
|
|
85
100
|
function measure() {
|
|
86
101
|
const selector = current.value?.target
|
|
87
102
|
if (!selector) {
|
|
88
103
|
spot.value = null
|
|
89
104
|
return
|
|
90
105
|
}
|
|
91
|
-
const node =
|
|
106
|
+
const node = findTarget(selector)
|
|
92
107
|
if (!node) {
|
|
93
108
|
spot.value = null
|
|
94
109
|
return
|
|
@@ -141,7 +156,7 @@ function stop() {
|
|
|
141
156
|
function reveal() {
|
|
142
157
|
const selector = current.value?.target
|
|
143
158
|
if (!selector) return
|
|
144
|
-
const node =
|
|
159
|
+
const node = findTarget(selector)
|
|
145
160
|
if (!node) return
|
|
146
161
|
const still = document.body.classList.contains('reduce-motion')
|
|
147
162
|
|| window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
|
@@ -323,14 +338,14 @@ function rich(text: string) {
|
|
|
323
338
|
<template>
|
|
324
339
|
<Teleport to="body">
|
|
325
340
|
<div v-if="open && current" class="rm-tour" role="dialog" aria-modal="true" :aria-label="title">
|
|
326
|
-
<!-- Le voile
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
341
|
+
<!-- Le voile est decoupe en quatre bandes autour de la cible, qui reste
|
|
342
|
+
donc visible et nette dans le trou, sans qu'on ait a deplacer son
|
|
343
|
+
noeud ni a lui poser un z-index. Une seule bande plein ecran quand
|
|
344
|
+
l'etape ne vise rien.
|
|
345
|
+
|
|
346
|
+
Il laisse passer les clics : la visite explique des gestes, elle ne
|
|
347
|
+
doit pas empecher de les faire. Quitter passe par « Quitter » ou
|
|
348
|
+
Echap, pas par un clic dans le vide. -->
|
|
334
349
|
<div
|
|
335
350
|
v-for="(part, index) in veil"
|
|
336
351
|
:key="index"
|
|
@@ -394,5 +409,5 @@ function rich(text: string) {
|
|
|
394
409
|
</template>
|
|
395
410
|
|
|
396
411
|
<style scoped>
|
|
397
|
-
.rm-tour{inset:0;position:fixed;z-index:900}.rm-tour__veil{background:rgba(15,23,42,.
|
|
412
|
+
.rm-tour{inset:0;position:fixed;z-index:900}.rm-tour__veil{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);background:rgba(15,23,42,.45)}.rm-tour__spot,.rm-tour__veil{pointer-events:none;position:fixed}.rm-tour__spot{border:2px solid var(--color-secondary);border-radius:var(--radius-lg);transition:all var(--duration-fast) var(--ease-out)}.rm-tour__card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);flex-direction:column;max-width:calc(100vw - 32px);outline:none;padding:var(--space-16);position:fixed;width:340px}.rm-tour__card,.rm-tour__head{display:flex;gap:var(--space-8)}.rm-tour__head{align-items:center;justify-content:space-between}.rm-tour__eyebrow{color:var(--color-secondary);font-size:var(--font-10);font-weight:var(--weight-semibold);letter-spacing:.08em;text-transform:uppercase}.rm-tour__close{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:flex;height:24px;justify-content:center;margin-left:auto;padding:0;width:24px}.rm-tour__close:hover{background:var(--bg-surface-3);color:var(--text-primary)}.rm-tour__close svg{height:14px;width:14px}.rm-tour__title{color:var(--text-primary);font-size:var(--font-16);font-weight:var(--weight-semibold);line-height:1.3}.rm-tour__text{color:var(--text-secondary);font-size:var(--font-13);line-height:1.55}.rm-tour__list{color:var(--text-secondary);display:flex;flex-direction:column;font-size:var(--font-12);gap:var(--space-4);line-height:1.5;margin:0;padding-left:var(--space-16)}.rm-tour__foot{align-items:center;border-top:1px solid var(--border-default);display:flex;gap:var(--space-8);margin-top:var(--space-4);padding-top:var(--space-12)}.rm-tour__count{color:var(--text-muted);font-size:var(--font-11);font-variant-numeric:tabular-nums}.rm-tour__dots{display:flex;gap:4px}.rm-tour__dot{background:var(--border-default);border-radius:var(--radius-pill);height:5px;width:5px}.rm-tour__dot--done{background:var(--color-violet-pale)}.rm-tour__dot--on{background:var(--color-secondary);width:14px}.rm-tour__actions{display:flex;gap:var(--space-6);margin-left:auto}.rm-tour__btn{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:var(--font-12);padding:5px var(--space-12)}.rm-tour__btn:hover{background:var(--bg-surface-3)}.rm-tour__btn--primary{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff;font-weight:var(--weight-semibold)}.rm-tour__btn--primary:hover{background:var(--color-secondary);filter:brightness(1.05)}
|
|
398
413
|
</style>
|