28 lines
651 B
Vue
28 lines
651 B
Vue
<script setup>
|
|
|
|
defineProps({
|
|
busy: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
state: {
|
|
validator(value) {
|
|
return ['success', 'warning', 'danger', 'idle', ''].includes(value);
|
|
}
|
|
},
|
|
});
|
|
|
|
function color(state) {
|
|
if (state === 'success') return '#27CE65';
|
|
else if (state === 'idle') return '#BCD0C3';
|
|
else if (state === 'warning') return '#f0ad4e';
|
|
else if (state === 'danger') return '#d9534f';
|
|
else return '#7c7c7c';
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<i class="fa" :class="{ 'fa-circle': !busy, 'fa-circle-notch fa-spin': busy, 'fa-fade': state === 'warning' }" :style="{ color: busy ? null : color(state) }"></i>
|
|
</template>
|