Refactor #3832 Refactor #3833 - For Toast

api-generator/components/toast.js

@@ -60,6 +60,14 @@ const ToastSlots = [
     {
         name: 'message',
         description: 'Custom content for the toast message'
+    },
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
     }
 ];
 

components/lib/toast/Toast.d.ts

@@ -95,29 +95,12 @@ export interface ToastProps {
     breakpoints?: ToastBreakpointsType;
     /**
      * Icon to display in the toast close button.
-     * @defaultValue pi pi-times
      */
     closeIcon?: string | undefined;
     /**
-     * Icon to display in the toast with info severity.
+     * Icon to display in the toast.
-     * @defaultValue pi pi-info-circle
      */
-    infoIcon?: string | undefined;
+    icon?: string | undefined;
-    /**
-     * Icon to display in the toast with warn severity.
-     * @defaultValue pi pi-exclamation-triangle
-     */
-    warnIcon?: string | undefined;
-    /**
-     * Icon to display in the toast with error severity.
-     * @defaultValue pi pi-times
-     */
-    errorIcon?: string | undefined;
-    /**
-     * Icon to display in the toast with success severity.
-     * @defaultValue pi pi-check
-     */
-    successIcon?: string | undefined;
     /**
      * Uses to pass all properties of the HTMLButtonElement to the close button.
      */
@@ -138,6 +121,14 @@ export interface ToastSlots {
          */
         message: any;
     }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
 }
 
 /**

components/lib/toast/Toast.vue

@@ -2,19 +2,14 @@
     <Portal>
         <div ref="container" :class="containerClass" v-bind="$attrs">
             <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave">
-                <ToastMessage
+                <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)">
-                    v-for="msg of messages"
+                    <template #closeIcon>
-                    :key="msg.id"
+                        <slot name="closeIcon" />
-                    :message="msg"
+                    </template>
-                    :template="$slots.message"
+                    <template #icon>
-                    :closeIcon="closeIcon"
+                        <slot name="icon" />
-                    :infoIcon="infoIcon"
+                    </template>
-                    :warnIcon="warnIcon"
+                </ToastMessage>
-                    :errorIcon="errorIcon"
-                    :successIcon="successIcon"
-                    :closeButtonProps="closeButtonProps"
-                    @close="remove($event)"
-                />
             </transition-group>
         </div>
     </Portal>
@@ -55,23 +50,11 @@ export default {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
-        infoIcon: {
+        icon: {
             type: String,
-            default: 'pi pi-info-circle'
+            default: undefined
-        },
-        warnIcon: {
-            type: String,
-            default: 'pi pi-exclamation-triangle'
-        },
-        errorIcon: {
-            type: String,
-            default: 'pi pi-times'
-        },
-        successIcon: {
-            type: String,
-            default: 'pi pi-check'
         },
         closeButtonProps: {
             type: null,

components/lib/toast/ToastMessage.vue

@@ -2,7 +2,9 @@
     <div :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="p-toast-message-content" :class="message.contentStyleClass">
             <template v-if="!template">
-                <span :class="iconClass"></span>
+                <slot name="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>
@@ -11,7 +13,9 @@
             <component v-else :is="template" :message="message"></component>
             <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">
-                    <span :class="['p-toast-icon-close-icon', closeIcon]" />
+                    <slot name="closeIcon">
+                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-toast-icon-close-icon', closeIcon]"></component>
+                    </slot>
                 </button>
             </div>
         </div>
@@ -20,7 +24,11 @@
 
 <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 ExclamationTriangleIcon from 'primevue/icon/exclamationtriangle';
+import TimesCircleIcon from 'primevue/icon/timescircle';
 export default {
     name: 'ToastMessage',
     emits: ['close'],
@@ -35,23 +43,11 @@ export default {
         },
         closeIcon: {
             type: String,
-            default: null
+            default: undefined
         },
-        infoIcon: {
+        icon: {
             type: String,
-            default: null
+            default: undefined
-        },
-        warnIcon: {
-            type: String,
-            default: null
-        },
-        errorIcon: {
-            type: String,
-            default: null
-        },
-        successIcon: {
-            type: String,
-            default: null
         },
         closeButtonProps: {
             type: null,
@@ -97,21 +93,25 @@ export default {
                 }
             ];
         },
-        iconClass() {
+        iconComponent() {
-            return [
+            return {
-                'p-toast-message-icon',
+                info: InfoCircleIcon,
-                {
+                success: CheckIcon,
-                    [this.infoIcon]: this.message.severity === 'info',
+                warn: ExclamationTriangleIcon,
-                    [this.warnIcon]: this.message.severity === 'warn',
+                error: TimesCircleIcon
-                    [this.errorIcon]: this.message.severity === 'error',
+            }[this.message.severity];
-                    [this.successIcon]: this.message.severity === 'success'
-                }
-            ];
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
+    components: {
+        TimesIcon,
+        InfoCircleIcon,
+        CheckIcon,
+        ExclamationTriangleIcon,
+        TimesCircleIcon
+    },
     directives: {
         ripple: Ripple
     }