Johannes Zellner
78 lines
1.3 KiB
Vue
78 lines
1.3 KiB
Vue
<script setup>
|
|
|
|
import { ref } from 'vue';
|
|
import { Icon } from '@cloudron/pankow';
|
|
|
|
const visible = ref(false);
|
|
const success = ref(false);
|
|
const TIMEOUT = 1500;
|
|
let timeoutId;
|
|
|
|
defineExpose({
|
|
success() {
|
|
clearTimeout(timeoutId);
|
|
|
|
success.value = true;
|
|
visible.value = true;
|
|
|
|
timeoutId = setTimeout(() => {
|
|
visible.value = false;
|
|
}, TIMEOUT);
|
|
},
|
|
error() {
|
|
clearTimeout(timeoutId);
|
|
|
|
success.value = false;
|
|
visible.value = true;
|
|
|
|
timeoutId = setTimeout(() => {
|
|
visible.value = false;
|
|
}, TIMEOUT);
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="bounce">
|
|
<div class="save-indicator" v-if="visible" :class="{ success: success, error: !success }"><Icon :icon="success ? 'fa-solid fa-check' : 'fa-solid fa-xmark'"/></div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.save-indicator {
|
|
position: absolute;
|
|
right: -10px;
|
|
}
|
|
|
|
.save-indicator.success {
|
|
color: var(--pankow-color-success);
|
|
}
|
|
|
|
.save-indicator.error {
|
|
color: var(--pankow-color-danger);
|
|
}
|
|
|
|
.bounce-enter-active {
|
|
animation: bounce-in 0.5s;
|
|
}
|
|
|
|
.bounce-leave-active {
|
|
animation: bounce-in 0.5s reverse;
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
50% {
|
|
transform: scale(1.5);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
</style>
|