@tekkare/romulus 0.1.90 → 0.1.91
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
CHANGED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
RmSnackBar - message bref sur l'action qui vient d'etre lancee, pose en bas
|
|
3
|
+
de l'ecran le temps qu'elle aboutisse : « Enregistrement », puis
|
|
4
|
+
« Enregistre ».
|
|
5
|
+
|
|
6
|
+
Il ne remplace pas RmCallout, qui commente un contenu et reste tant que la
|
|
7
|
+
condition dure. Celui-ci parle d'une action, pas d'un contenu, et il part.
|
|
8
|
+
|
|
9
|
+
Il se montre et se cache par `visible` plutot que par un `v-if` de
|
|
10
|
+
l'appelant : la glissade d'entree et celle de sortie font partie de l'objet,
|
|
11
|
+
et quatre pages qui le montent ne doivent pas reecrire quatre fois la meme
|
|
12
|
+
transition. Ce qu'il ne porte pas, c'est le minuteur : la duree d'affichage
|
|
13
|
+
appartient a ce qui declenche l'action, pas au bandeau qui la raconte.
|
|
14
|
+
|
|
15
|
+
La couleur de l'icone passe par la prop `color` de RmIcon et non par une
|
|
16
|
+
classe : le style scope de ce fichier n'atteint pas le `<svg>` monte
|
|
17
|
+
derriere `<ClientOnly>`, et l'icone retomberait sur la couleur du texte.
|
|
18
|
+
-->
|
|
19
|
+
<script setup lang="ts">
|
|
20
|
+
withDefaults(
|
|
21
|
+
defineProps<{
|
|
22
|
+
/** Le message. Court : c'est une ligne, pas un paragraphe. */
|
|
23
|
+
text: string
|
|
24
|
+
/** Affiche le bandeau. A false il glisse vers le bas et se demonte. */
|
|
25
|
+
visible?: boolean
|
|
26
|
+
/** Rotative devant le texte, pour une action encore en cours. */
|
|
27
|
+
loading?: boolean
|
|
28
|
+
/** Icone Phosphor devant le texte, quand l'action est retombee. */
|
|
29
|
+
icon?: string
|
|
30
|
+
/**
|
|
31
|
+
* Couleur de l'icone. Un token du theme (`var(--color-success)`) plutot
|
|
32
|
+
* qu'un hexadecimal, sinon le mode nuit ne suit pas.
|
|
33
|
+
*/
|
|
34
|
+
iconColor?: string
|
|
35
|
+
}>(),
|
|
36
|
+
{ visible: true, loading: false, icon: '', iconColor: 'var(--color-text-inverse)' },
|
|
37
|
+
)
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<template>
|
|
41
|
+
<Transition name="rm-snackbar">
|
|
42
|
+
<!-- `status` et non `alert` : c'est le compte rendu d'une action voulue,
|
|
43
|
+
il ne doit pas couper ce que le lecteur d'ecran est en train de dire. -->
|
|
44
|
+
<div v-if="visible" class="rm-snackbar" role="status" aria-live="polite">
|
|
45
|
+
<div v-if="loading" class="rm-snackbar__spinner" />
|
|
46
|
+
<RmIcon v-else-if="icon" :name="icon" :size="20" :color="iconColor" />
|
|
47
|
+
<p class="rm-snackbar__text">{{ text }}</p>
|
|
48
|
+
</div>
|
|
49
|
+
</Transition>
|
|
50
|
+
</template>
|
|
51
|
+
|
|
52
|
+
<style scoped>
|
|
53
|
+
.rm-snackbar{align-items:center;background:#1e293b;border-radius:var(--radius-2xl);bottom:var(--space-16);box-shadow:var(--shadow-lg);display:flex;gap:var(--space-12);left:0;margin:0 auto;max-width:min(90vw,560px);padding:var(--space-12) var(--space-24);position:fixed;right:0;width:-moz-fit-content;width:fit-content;z-index:var(--z-toast)}.rm-snackbar__text{color:var(--color-text-inverse);font-family:var(--font-sans);font-size:var(--font-14);line-height:1.6;margin:0}.rm-snackbar__spinner{animation:rm-snackbar-spin .9s linear infinite;border:2px solid hsla(0,0%,100%,.25);border-radius:50%;border-top:2px solid var(--color-text-inverse);flex:none;height:20px;width:20px}@keyframes rm-snackbar-spin{to{transform:rotate(1turn)}}.rm-snackbar-enter-active,.rm-snackbar-leave-active{transition:transform var(--duration-base) cubic-bezier(.25,.46,.45,.94),opacity var(--duration-base) linear}.rm-snackbar-enter-from,.rm-snackbar-leave-to{opacity:0;transform:translateY(calc(100% + var(--space-16)))}@media (prefers-reduced-motion:reduce){.rm-snackbar-enter-active,.rm-snackbar-leave-active{transition:opacity var(--duration-fast) linear}.rm-snackbar-enter-from,.rm-snackbar-leave-to{transform:none}.rm-snackbar__spinner{animation-duration:3s}}
|
|
54
|
+
</style>
|