Page MenuHomePhorge
Differential D1912 Diff 5284 src/resources/vue/Widgets/ToastMessage.vue

Changeset View

Standalone View

View Options

src/resources/vue/Widgets/ToastMessage.vue

<template> <template>
<div :class="'toast hide toast-' + data.type" role="alert" aria-live="assertive" aria-atomic="true"> <div :class="toastClassName()" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header"> <div class="toast-header" :class="className()">
<svg-icon icon="info-circle" :class="className()" v-if="data.type == 'info'"></svg-icon> <svg-icon icon="info-circle" v-if="data.type == 'info'"></svg-icon>
<svg-icon icon="check-circle" :class="className()" v-else-if="data.type == 'success'"></svg-icon> <svg-icon icon="check-circle" v-else-if="data.type == 'success'"></svg-icon>
<svg-icon icon="exclamation-circle" :class="className()" v-else-if="data.type == 'error'"></svg-icon> <svg-icon icon="exclamation-circle" v-else-if="data.type == 'error'"></svg-icon>
<svg-icon icon="exclamation-circle" :class="className()" v-else-if="data.type == 'warning'"></svg-icon> <svg-icon icon="exclamation-circle" v-else-if="data.type == 'warning'"></svg-icon>
<strong :class="className()">{{ data.title || title() }}</strong> <svg-icon :icon="data.icon" v-else-if="data.type == 'custom' && data.icon"></svg-icon>
<strong>{{ data.title || title() }}</strong>
<button type="button" class="close" data-dismiss="toast" aria-label="Close"> <button type="button" class="close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="toast-body"> <div v-if="data.body" v-html="data.body" class="toast-body"></div>
{{ data.msg }} <div v-else class="toast-body">{{ data.msg }}</div>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
data: { type: Object, default: () => {} } data: { type: Object, default: () => {} }
}, },
mounted() { mounted() {
$(this.$el).on('hidden.bs.toast', () => { $(this.$el)
.on('hidden.bs.toast', () => {
(this.$el).remove() (this.$el).remove()
this.$destroy() this.$destroy()
}) })
.on('shown.bs.toast', () => {
if (this.data.onShow) {
this.data.onShow(this.$el)
}
})
.toast({ .toast({
animation: true, animation: true,
autohide: true, autohide: this.data.timeout > 0,
delay: this.data.timeout delay: this.data.timeout
}) })
.toast('show') .toast('show')
}, },
methods: { methods: {
className() { className() {
switch (this.data.type) { switch (this.data.type) {
case 'error': case 'error':
return 'text-danger' return 'text-danger'
case 'warning': case 'warning':
case 'info': case 'info':
case 'success': case 'success':
return 'text-' + this.data.type return 'text-' + this.data.type
case 'custom':
return this.data.titleClassName || ''
} }
}, },
title() { title() {
const type = this.data.type const type = this.data.type
switch (type) { switch (type) {
case 'info': case 'info':
return 'Information'; return 'Information';
case 'error': case 'error':
case 'warning': case 'warning':
case 'success': case 'success':
return type.charAt(0).toUpperCase() + type.slice(1) return type.charAt(0).toUpperCase() + type.slice(1)
} }
return ''
},
toastClassName() {
return 'toast hide toast-' + this.data.type
+ (this.data.className ? ' ' + this.data.className : '')
} }
} }
} }
</script> </script>