Refactor #3832 Refactor #3833 - For Toast

components/lib/toast/Toast.d.ts

@@ -18,7 +18,7 @@ export interface ToastMessageOptions {
      * Severity level of the message.
      * @defaultValue info
      */
-    severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined;
+    severity?: 'success' | 'info' | 'warn' | 'error' | undefined;
     /**
      * Summary content of the message.
      */
@@ -98,9 +98,21 @@ export interface ToastProps {
      */
     closeIcon?: string | undefined;
     /**
-     * Icon to display in the toast.
+     * Icon to display in the toast with info severity.
      */
-    icon?: string | undefined;
+    infoIcon?: string | undefined;
+    /**
+     * Icon to display in the toast with warn severity.
+     */
+    warnIcon?: string | undefined;
+    /**
+     * Icon to display in the toast with error severity.
+     */
+    errorIcon?: string | undefined;
+    /**
+     * Icon to display in the toast with success severity.
+     */
+    successIcon?: string | undefined;
     /**
      * Uses to pass all properties of the HTMLButtonElement to the close button.
      */

components/lib/toast/Toast.vue

@@ -2,14 +2,19 @@
     <Portal>
         <div ref="container" :class="containerClass" v-bind="$attrs">
             <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
-                    <template #closeicon>
+                    v-for="msg of messages"
-                        <slot name="closeicon" />
+                    :key="msg.id"
-                    </template>
+                    :message="msg"
-                    <template #icon>
+                    :templates="$slots"
-                        <slot name="icon" />
+                    :closeIcon="closeIcon"
-                    </template>
+                    :infoIcon="infoIcon"
-                </ToastMessage>
+                    :warnIcon="warnIcon"
+                    :errorIcon="errorIcon"
+                    :successIcon="successIcon"
+                    :closeButtonProps="closeButtonProps"
+                    @close="remove($event)"
+                />
             </transition-group>
         </div>
     </Portal>
@@ -52,7 +57,19 @@ export default {
             type: String,
             default: undefined
         },
-        icon: {
+        infoIcon: {
+            type: String,
+            default: undefined
+        },
+        warnIcon: {
+            type: String,
+            default: undefined
+        },
+        errorIcon: {
+            type: String,
+            default: undefined
+        },
+        successIcon: {
             type: String,
             default: undefined
         },

components/lib/toast/ToastMessage.vue

@@ -1,21 +1,17 @@
 <template>
     <div :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="p-toast-message-content" :class="message.contentStyleClass">
-            <template v-if="!template">
+            <template v-if="!templates.message">
-                <slot name="icon">
+                <component :is="templates.icon ? templates.icon : iconComponent.name ? iconComponent : 'span'" :class="iconClass" class="p-toast-message-icon" />
-                    <component :is="icon ? 'span' : iconComponent" :class="['p-toast-message-icon', icon]"></component>
-                </slot>
                 <div class="p-toast-message-text">
                     <span class="p-toast-summary">{{ message.summary }}</span>
                     <div class="p-toast-detail">{{ message.detail }}</div>
                 </div>
             </template>
-            <component v-else :is="template" :message="message"></component>
+            <component v-else :is="templates.message" :message="message"></component>{{ message.closable }}
             <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">
-                    <slot name="closeicon">
+                    <component :is="templates.closeicon || 'span'" :class="['p-toast-icon-close-icon', closeIcon]" />
-                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-toast-icon-close-icon', closeIcon]"></component>
-                    </slot>
                 </button>
             </div>
         </div>
@@ -38,17 +34,29 @@ export default {
             type: null,
             default: null
         },
-        template: {
+        templates: {
-            type: null,
+            type: Object,
             default: null
         },
         closeIcon: {
             type: String,
-            default: undefined
+            default: null
         },
-        icon: {
+        infoIcon: {
             type: String,
-            default: undefined
+            default: null
+        },
+        warnIcon: {
+            type: String,
+            default: null
+        },
+        errorIcon: {
+            type: String,
+            default: null
+        },
+        successIcon: {
+            type: String,
+            default: null
         },
         closeButtonProps: {
             type: null,
@@ -96,22 +104,32 @@ export default {
         },
         iconComponent() {
             return {
-                info: InfoCircleIcon,
+                info: !this.infoIcon && InfoCircleIcon,
-                success: CheckIcon,
+                success: !this.successIcon && CheckIcon,
-                warn: ExclamationTriangleIcon,
+                warn: !this.warnIcon && ExclamationTriangleIcon,
-                error: TimesCircleIcon
+                error: !this.errorIcon && TimesCircleIcon
             }[this.message.severity];
         },
+        iconClass() {
+            return [
+                {
+                    [this.infoIcon]: this.message.severity === 'info',
+                    [this.warnIcon]: this.message.severity === 'warn',
+                    [this.errorIcon]: this.message.severity === 'error',
+                    [this.successIcon]: this.message.severity === 'success'
+                }
+            ];
+        },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
     components: {
-        TimesIcon,
+        TimesIcon: TimesIcon,
-        InfoCircleIcon,
+        InfoCircleIcon: InfoCircleIcon,
-        CheckIcon,
+        CheckIcon: CheckIcon,
-        ExclamationTriangleIcon,
+        ExclamationTriangleIcon: ExclamationTriangleIcon,
-        TimesCircleIcon
+        TimesCircleIcon: TimesCircleIcon
     },
     directives: {
         ripple: Ripple