2022-09-06 12:03:37 +00:00
|
|
|
<template>
|
2023-05-25 21:53:07 +00:00
|
|
|
<div :class="cx('container')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('container')">
|
2023-07-06 12:13:28 +00:00
|
|
|
<div :class="[cx('content'), message.contentStyleClass]" v-bind="ptm('content')">
|
2023-04-14 12:03:58 +00:00
|
|
|
<template v-if="!templates.message">
|
2023-06-20 08:39:17 +00:00
|
|
|
<component :is="templates.icon ? templates.icon : iconComponent && iconComponent.name ? iconComponent : 'span'" :class="cx('icon')" v-bind="ptm('icon')" />
|
2023-05-25 21:53:07 +00:00
|
|
|
<div :class="cx('text')" v-bind="ptm('text')">
|
|
|
|
<span :class="cx('summary')" v-bind="ptm('summary')">{{ message.summary }}</span>
|
|
|
|
<div :class="cx('detail')" v-bind="ptm('detail')">{{ message.detail }}</div>
|
2022-09-06 12:03:37 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
2023-04-24 17:08:51 +00:00
|
|
|
<component v-else :is="templates.message" :message="message"></component>
|
2023-04-28 13:39:19 +00:00
|
|
|
<div v-if="message.closable !== false" v-bind="ptm('buttonContainer')">
|
2023-07-19 11:34:12 +00:00
|
|
|
<button v-ripple :class="cx('closeButton')" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('button'), ...ptm('closeButton') }">
|
|
|
|
<component :is="templates.closeicon || 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="{ ...ptm('buttonIcon'), ...ptm('closeIcon') }" />
|
2022-12-08 11:04:25 +00:00
|
|
|
</button>
|
|
|
|
</div>
|
2022-09-06 12:03:37 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2023-06-20 08:39:17 +00:00
|
|
|
import BaseComponent from 'primevue/basecomponent';
|
2023-04-18 12:53:43 +00:00
|
|
|
import CheckIcon from 'primevue/icons/check';
|
|
|
|
import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
|
|
|
|
import InfoCircleIcon from 'primevue/icons/infocircle';
|
|
|
|
import TimesIcon from 'primevue/icons/times';
|
|
|
|
import TimesCircleIcon from 'primevue/icons/timescircle';
|
2023-04-14 06:18:22 +00:00
|
|
|
import Ripple from 'primevue/ripple';
|
|
|
|
|
2022-09-06 12:03:37 +00:00
|
|
|
export default {
|
|
|
|
name: 'ToastMessage',
|
2023-05-30 12:28:04 +00:00
|
|
|
extends: BaseComponent,
|
2022-09-06 12:03:37 +00:00
|
|
|
emits: ['close'],
|
|
|
|
closeTimeout: null,
|
2023-05-29 11:35:09 +00:00
|
|
|
props: {
|
|
|
|
message: {
|
|
|
|
type: null,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
templates: {
|
|
|
|
type: Object,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
closeIcon: {
|
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
infoIcon: {
|
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
warnIcon: {
|
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
errorIcon: {
|
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
successIcon: {
|
|
|
|
type: String,
|
|
|
|
default: null
|
|
|
|
},
|
|
|
|
closeButtonProps: {
|
|
|
|
type: null,
|
|
|
|
default: null
|
|
|
|
}
|
|
|
|
},
|
2022-09-06 12:03:37 +00:00
|
|
|
mounted() {
|
|
|
|
if (this.message.life) {
|
|
|
|
this.closeTimeout = setTimeout(() => {
|
2023-03-07 12:36:38 +00:00
|
|
|
this.close({ message: this.message, type: 'life-end' });
|
2022-09-14 11:26:01 +00:00
|
|
|
}, this.message.life);
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
beforeUnmount() {
|
|
|
|
this.clearCloseTimeout();
|
|
|
|
},
|
|
|
|
methods: {
|
2023-03-07 12:36:38 +00:00
|
|
|
close(params) {
|
|
|
|
this.$emit('close', params);
|
2022-09-06 12:03:37 +00:00
|
|
|
},
|
|
|
|
onCloseClick() {
|
|
|
|
this.clearCloseTimeout();
|
2023-03-07 12:36:38 +00:00
|
|
|
this.close({ message: this.message, type: 'close' });
|
2022-09-06 12:03:37 +00:00
|
|
|
},
|
|
|
|
clearCloseTimeout() {
|
|
|
|
if (this.closeTimeout) {
|
|
|
|
clearTimeout(this.closeTimeout);
|
|
|
|
this.closeTimeout = null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2023-04-11 21:25:24 +00:00
|
|
|
iconComponent() {
|
|
|
|
return {
|
2023-04-14 12:03:58 +00:00
|
|
|
info: !this.infoIcon && InfoCircleIcon,
|
|
|
|
success: !this.successIcon && CheckIcon,
|
|
|
|
warn: !this.warnIcon && ExclamationTriangleIcon,
|
|
|
|
error: !this.errorIcon && TimesCircleIcon
|
2023-04-11 21:25:24 +00:00
|
|
|
}[this.message.severity];
|
2022-12-08 11:04:25 +00:00
|
|
|
},
|
|
|
|
closeAriaLabel() {
|
|
|
|
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
},
|
2023-04-11 21:25:24 +00:00
|
|
|
components: {
|
2023-04-14 12:03:58 +00:00
|
|
|
TimesIcon: TimesIcon,
|
|
|
|
InfoCircleIcon: InfoCircleIcon,
|
|
|
|
CheckIcon: CheckIcon,
|
|
|
|
ExclamationTriangleIcon: ExclamationTriangleIcon,
|
|
|
|
TimesCircleIcon: TimesCircleIcon
|
2023-04-11 21:25:24 +00:00
|
|
|
},
|
2022-09-06 12:03:37 +00:00
|
|
|
directives: {
|
2022-09-14 11:26:01 +00:00
|
|
|
ripple: Ripple
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
2022-09-14 11:26:01 +00:00
|
|
|
};
|
2022-09-06 12:03:37 +00:00
|
|
|
</script>
|