Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/ToastMessage.vue
<template> | <template> | ||||
<div :class="toastClassName()" role="alert" aria-live="assertive" aria-atomic="true"> | <div :class="toastClassName()" role="alert" aria-live="assertive" aria-atomic="true"> | ||||
<div class="toast-header" :class="className()"> | <div class="toast-header" :class="className()"> | ||||
<svg-icon icon="info-circle" v-if="data.type == 'info'"></svg-icon> | <svg-icon icon="circle-info" v-if="data.type == 'info'"></svg-icon> | ||||
<svg-icon icon="check-circle" v-else-if="data.type == 'success'"></svg-icon> | <svg-icon icon="circle-check" v-else-if="data.type == 'success'"></svg-icon> | ||||
<svg-icon icon="exclamation-circle" v-else-if="data.type == 'error'"></svg-icon> | <svg-icon icon="circle-exclamation" v-else-if="data.type == 'error'"></svg-icon> | ||||
<svg-icon icon="exclamation-circle" v-else-if="data.type == 'warning'"></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> | <svg-icon :icon="data.icon" v-else-if="data.type == 'custom' && data.icon"></svg-icon> | ||||
<strong>{{ data.title || $t('msg.' + data.type) }}</strong> | <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> | <btn class="btn-close btn-close-white" data-bs-dismiss="toast" :aria-label="$t('btn.close')"></btn> | ||||
</div> | </div> | ||||
<div v-if="data.body" v-html="data.body" class="toast-body"></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-else class="toast-body">{{ data.msg }}</div> | ||||
<div v-if="'progress' in data" class="toast-progress"> | <div v-if="'progress' in data" class="toast-progress"> | ||||
<div class="toast-progress-bar" :style="'width: ' + data.progress + '%'"></div> | <div class="toast-progress-bar" :style="'width: ' + data.progress + '%'"></div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { Toast } from 'bootstrap' | 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 { | export default { | ||||
props: { | props: { | ||||
data: { type: Object, default: () => {} } | data: { type: Object, default: () => {} } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.$el.addEventListener('hidden.bs.toast', () => { | this.$el.addEventListener('hidden.bs.toast', () => { | ||||
(this.$el).remove() | (this.$el).remove() | ||||
this.$destroy() | this.$destroy() | ||||
Show All 40 Lines |