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="info-circle" v-if="data.type == 'info'"></svg-icon> | ||||
| <svg-icon icon="check-circle" 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" 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" v-else-if="data.type == 'warning'"></svg-icon> | <svg-icon icon="exclamation-circle" 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> | ||||
| <button type="button" class="close" data-dismiss="toast" :aria-label="$t('btn.close')"> | <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" :aria-label="$t('btn.close')"></button> | ||||
| <span aria-hidden="true">×</span> | |||||
| </button> | |||||
| </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> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import { Toast } from 'bootstrap' | |||||
| export default { | export default { | ||||
| props: { | props: { | ||||
| data: { type: Object, default: () => {} } | data: { type: Object, default: () => {} } | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| $(this.$el) | this.$el.addEventListener('hidden.bs.toast', () => { | ||||
| .on('hidden.bs.toast', () => { | |||||
| (this.$el).remove() | (this.$el).remove() | ||||
| this.$destroy() | this.$destroy() | ||||
| }) | }) | ||||
| .on('shown.bs.toast', () => { | |||||
| this.$el.addEventListener('shown.bs.toast', () => { | |||||
| if (this.data.onShow) { | if (this.data.onShow) { | ||||
| this.data.onShow(this.$el) | this.data.onShow(this.$el) | ||||
| } | } | ||||
| }) | }) | ||||
| .toast({ | |||||
| new Toast(this.$el, { | |||||
| animation: true, | animation: true, | ||||
| autohide: this.data.timeout > 0, | autohide: this.data.timeout > 0, | ||||
| delay: this.data.timeout | delay: this.data.timeout | ||||
| }) | }).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': | ||||
| Show All 13 Lines | |||||