39 lines
854 B
Vue
Executable file
39 lines
854 B
Vue
Executable file
<template>
|
|
<div :data-blinking="isBlinking" class="overflow-hidden text-6 py-2" :class="$style.root">
|
|
<div v-if="message.trim().length === 0" class="text-gray-400">
|
|
Keine Nachricht vorhanden.
|
|
</div>
|
|
<template v-else>{{ message }}</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style module>
|
|
.root {
|
|
&[data-blinking="true"] {
|
|
animation: alternate infinite 500ms ease-in-out pulse;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
from {
|
|
@apply bg-red-900;
|
|
}
|
|
|
|
to {
|
|
@apply bg-transparent;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import { state } from "@/state"
|
|
import { toRef, watch } from "vue"
|
|
import { autoResetRef } from "@vueuse/core"
|
|
|
|
const message = toRef(state, "message")
|
|
const isBlinking = autoResetRef(false, 10 * 1000)
|
|
|
|
watch(message, () => {
|
|
isBlinking.value = message.value !== ""
|
|
})
|
|
</script>
|