Refactor #3833 - Update for Toast

pull/3868/head
Tuğçe Küçükoğlu 2023-04-14 09:18:22 +03:00
parent 8971e01d1d
commit c889db7793
2 changed files with 7 additions and 6 deletions

View File

@ -3,8 +3,8 @@
<div ref="container" :class="containerClass" v-bind="$attrs"> <div ref="container" :class="containerClass" v-bind="$attrs">
<transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave"> <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave">
<ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" :template="$slots.message" :closeIcon="closeIcon" :icon="msg.icon || icon" :closeButtonProps="closeButtonProps" @close="remove($event)"> <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" :template="$slots.message" :closeIcon="closeIcon" :icon="msg.icon || icon" :closeButtonProps="closeButtonProps" @close="remove($event)">
<template #closeIcon> <template #closeicon>
<slot name="closeIcon" /> <slot name="closeicon" />
</template> </template>
<template #icon> <template #icon>
<slot name="icon" /> <slot name="icon" />

View File

@ -13,7 +13,7 @@
<component v-else :is="template" :message="message"></component> <component v-else :is="template" :message="message"></component>
<div v-if="message.closable !== false"> <div v-if="message.closable !== false">
<button v-ripple class="p-toast-icon-close p-link" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="closeButtonProps"> <button v-ripple class="p-toast-icon-close p-link" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="closeButtonProps">
<slot name="closeIcon"> <slot name="closeicon">
<component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-toast-icon-close-icon', closeIcon]"></component> <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-toast-icon-close-icon', closeIcon]"></component>
</slot> </slot>
</button> </button>
@ -23,12 +23,13 @@
</template> </template>
<script> <script>
import Ripple from 'primevue/ripple';
import TimesIcon from 'primevue/icon/times';
import InfoCircleIcon from 'primevue/icon/infocircle';
import CheckIcon from 'primevue/icon/check'; import CheckIcon from 'primevue/icon/check';
import ExclamationTriangleIcon from 'primevue/icon/exclamationtriangle'; import ExclamationTriangleIcon from 'primevue/icon/exclamationtriangle';
import InfoCircleIcon from 'primevue/icon/infocircle';
import TimesIcon from 'primevue/icon/times';
import TimesCircleIcon from 'primevue/icon/timescircle'; import TimesCircleIcon from 'primevue/icon/timescircle';
import Ripple from 'primevue/ripple';
export default { export default {
name: 'ToastMessage', name: 'ToastMessage',
emits: ['close'], emits: ['close'],