Refactor #3832 Refactor #3833 - For Message

api-generator/components/message.js

@@ -31,6 +31,17 @@ const MessageProps = [
     }
 ];
 
+const MessageSlots = [
+    {
+        name: 'messageicon',
+        description: 'Custom message icon template.'
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    }
+];
+
 const MessageEvents = [
     {
         name: 'close',
@@ -50,6 +61,7 @@ module.exports = {
         name: 'Message',
         description: 'Messages is used to display inline messages with various severities.',
         props: MessageProps,
+        slots: MessageSlots,
         events: MessageEvents
     }
 };

components/lib/message/Message.d.ts

@@ -40,7 +40,6 @@ export interface MessageProps {
     icon?: string | undefined;
     /**
      * Icon to display in the message close button.
-     * @defaultValue pi pi-times
      */
     closeIcon?: string | undefined;
     /**
@@ -57,6 +56,14 @@ export interface MessageSlots {
      * Default custom slot.
      */
     default(): VNode[];
+    /**
+     * Custom message icon template.
+     */
+    messageicon(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
 }
 
 /**

components/lib/message/Message.vue

@@ -2,12 +2,16 @@
     <transition name="p-message" appear>
         <div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
             <div class="p-message-wrapper">
-                <span :class="iconClass"></span>
+                <slot name="messageicon">
+                    <component :is="icon ? 'i' : iconComponent" :class="['p-message-icon', icon]"></component>
+                </slot>
                 <div class="p-message-text">
                     <slot></slot>
                 </div>
                 <button v-if="closable" v-ripple class="p-message-close p-link" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="closeButtonProps">
-                    <i :class="['p-message-close-icon', closeIcon]" />
+                    <slot name="closeicon">
+                        <component :is="closeIcon ? 'i' : 'TimesIcon'" :class="['p-message-close-icon', closeIcon]"></component>
+                    </slot>
                 </button>
             </div>
         </div>
@@ -16,6 +20,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: 'Message',
@@ -39,11 +48,11 @@ export default {
         },
         icon: {
             type: String,
-            default: null
+            default: undefined
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         closeButtonProps: {
             type: null,
@@ -58,7 +67,7 @@ export default {
     },
     mounted() {
         if (!this.sticky) {
-            this.x();
+            this.closeAfterDelay();
         }
     },
     methods: {
@@ -66,7 +75,7 @@ export default {
             this.visible = false;
             this.$emit('close', event);
         },
-        x() {
+        closeAfterDelay() {
             setTimeout(() => {
                 this.visible = false;
             }, this.life);
@@ -76,18 +85,13 @@ export default {
         containerClass() {
             return 'p-message p-component p-message-' + this.severity;
         },
-        iconClass() {
+        iconComponent() {
-            return [
+            return {
-                'p-message-icon pi',
+                info: InfoCircleIcon,
-                this.icon
+                success: CheckIcon,
-                    ? this.icon
+                warn: ExclamationTriangleIcon,
-                    : {
+                error: TimesCircleIcon
-                          'pi-info-circle': this.severity === 'info',
+            }[this.severity];
-                          'pi-check': this.severity === 'success',
-                          'pi-exclamation-triangle': this.severity === 'warn',
-                          'pi-times-circle': this.severity === 'error'
-                      }
-            ];
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
@@ -95,6 +99,13 @@ export default {
     },
     directives: {
         ripple: Ripple
+    },
+    components: {
+        TimesIcon,
+        InfoCircleIcon,
+        CheckIcon,
+        ExclamationTriangleIcon,
+        TimesCircleIcon
     }
 };
 </script>