Page MenuHomePhorge
Files F2485292

ToastMessage.vue
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

ToastMessage.vue
View Options

<template>
<div :class="toastClassName()" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header" :class="className()">
<svg-icon icon="circle-info" v-if="data.type == 'info'"></svg-icon>
<svg-icon icon="circle-check" v-else-if="data.type == 'success'"></svg-icon>
<svg-icon icon="circle-exclamation" v-else-if="data.type == 'error'"></svg-icon>
<svg-icon icon="circle-exclamation" v-else-if="data.type == 'warning'"></svg-icon>
<svg-icon :icon="data.icon" v-else-if="data.type == 'custom' && data.icon"></svg-icon>
<strong>{{ data.title || $t('msg.' + data.type) }}</strong>
<btn class="btn-close btn-close-white" data-bs-dismiss="toast" :aria-label="$t('btn.close')"></btn>
</div>
<div v-if="data.body" v-html="data.body" class="toast-body"></div>
<div v-else class="toast-body">{{ data.msg }}</div>
<div v-if="'progress' in data" class="toast-progress">
<div class="toast-progress-bar" :style="'width: ' + data.progress + '%'"></div>
</div>
</div>
</template>
<script>
import { Toast } from 'bootstrap'
import { library } from '@fortawesome/fontawesome-svg-core'
library.add(
require('@fortawesome/free-solid-svg-icons/faCircleCheck').definition,
require('@fortawesome/free-solid-svg-icons/faCircleInfo').definition,
require('@fortawesome/free-solid-svg-icons/faCircleExclamation').definition,
)
export default {
props: {
data: { type: Object, default: () => {} }
},
mounted() {
this.$el.addEventListener('hidden.bs.toast', () => {
(this.$el).remove()
this.$destroy()
})
this.$el.addEventListener('shown.bs.toast', () => {
if (this.data.onShow) {
this.data.onShow(this.$el)
}
})
new Toast(this.$el, {
animation: true,
autohide: this.data.timeout > 0,
delay: this.data.timeout
}).show()
},
methods: {
className() {
switch (this.data.type) {
case 'error':
return 'text-danger'
case 'warning':
case 'info':
case 'success':
return 'text-' + this.data.type
case 'custom':
return this.data.titleClassName || ''
}
},
delete() {
new Toast(this.$el).dispose()
},
toastClassName() {
return 'toast hide toast-' + this.data.type
+ (this.data.className ? ' ' + this.data.className : '')
},
updateProgress(percent) {
$(this.$el).find('.toast-progress-bar').css('width', percent + '%')
}
}
}
</script>

File Metadata

Mime Type
text/html
Expires
Fri, Nov 21, 11:53 AM (1 d, 21 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
387499
Default Alt Text
ToastMessage.vue (2 KB)

Event Timeline