antares/src/renderer/components/BaseToast.vue

80 lines
1.8 KiB
Vue
Raw Normal View History

2020-05-11 18:05:34 +02:00
<template>
<div
:style="{display: isVisible ? 'flex' : 'none'}"
class="toast mt-2"
:class="toastStatus.className"
>
<span class="p-vcentered text-left"><i class="mdi mdi-24px mr-1" :class="toastStatus.iconName" /> {{ message }}</span>
2020-05-11 18:05:34 +02:00
<button class="btn btn-clear" @click="hideToast" />
</div>
</template>
<script>
export default {
name: 'BaseToast',
props: {
message: {
type: String,
default: ''
},
status: {
type: String,
default: ''
}
},
data () {
return {
isVisible: false
};
},
computed: {
toastStatus () {
let className = '';
let iconName = '';
2020-05-11 18:05:34 +02:00
switch (this.status) {
case 'success':
className = 'toast-success';
iconName = 'mdi-check';
2020-05-11 18:05:34 +02:00
break;
case 'error':
className = 'toast-error';
iconName = 'mdi-alert-rhombus';
2020-05-11 18:05:34 +02:00
break;
case 'warning':
className = 'toast-warning';
iconName = 'mdi-alert';
2020-05-11 18:05:34 +02:00
break;
case 'primary':
className = 'toast-primary';
iconName = 'mdi-information-outline';
2020-05-11 18:05:34 +02:00
break;
}
return { className, iconName };
2020-05-11 18:05:34 +02:00
}
},
watch: {
message: function () {
if (this.message)
this.isVisible = true;
else
this.isVisible = false;
}
},
methods: {
hideToast () {
this.isVisible = false;
2020-05-15 17:52:59 +02:00
this.$emit('close');
2020-05-11 18:05:34 +02:00
}
}
};
</script>
<style scoped>
2020-07-31 18:16:28 +02:00
.toast {
display: flex;
justify-content: space-between;
user-select: text;
word-break: break-all;
}
2020-05-11 18:05:34 +02:00
</style>