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 || title() }}</strong> | <strong>{{ data.title || $t('msg.' + data.type) }}</strong> | ||||
<button type="button" class="close" data-dismiss="toast" aria-label="Close"> | <button type="button" class="close" data-dismiss="toast" :aria-label="$t('btn.close')"> | ||||
<span aria-hidden="true">×</span> | <span aria-hidden="true">×</span> | ||||
</button> | </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> | ||||
Show All 28 Lines | export default { | ||||
case 'warning': | case 'warning': | ||||
case 'info': | case 'info': | ||||
case 'success': | case 'success': | ||||
return 'text-' + this.data.type | return 'text-' + this.data.type | ||||
case 'custom': | case 'custom': | ||||
return this.data.titleClassName || '' | return this.data.titleClassName || '' | ||||
} | } | ||||
}, | }, | ||||
title() { | |||||
const type = this.data.type | |||||
switch (type) { | |||||
case 'info': | |||||
return 'Information'; | |||||
case 'error': | |||||
case 'warning': | |||||
case 'success': | |||||
return type.charAt(0).toUpperCase() + type.slice(1) | |||||
} | |||||
return '' | |||||
}, | |||||
toastClassName() { | toastClassName() { | ||||
return 'toast hide toast-' + this.data.type | return 'toast hide toast-' + this.data.type | ||||
+ (this.data.className ? ' ' + this.data.className : '') | + (this.data.className ? ' ' + this.data.className : '') | ||||
} | } | ||||
} | } | ||||
} | } | ||||
</script> | </script> |