Refactor #4433 - Message

api-generator/components/message.js

@@ -57,6 +57,10 @@ const MessageSlots = [
     {
         name: 'closeicon',
         description: 'Custom close icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
     }
 ];
 

components/lib/message/Message.d.ts

@@ -188,6 +188,16 @@ export interface MessageSlots {
          */
         class: any;
     }): VNode[];
+    /**
+     * Custom container slot.
+     * @param {Object} scope - container slot's params.
+     */
+    container(scope: {
+        /**
+         * Close message function.
+         */
+        onClose: () => void;
+    }): VNode[];
 }
 
 /**

components/lib/message/Message.vue

@@ -1,7 +1,8 @@
 <template>
     <transition name="p-message" appear v-bind="ptm('transition')">
         <div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')" data-pc-name="message">
-            <div :class="cx('wrapper')" v-bind="ptm('wrapper')">
+            <slot v-if="$slots.container" name="container" :onClose="close"></slot>
+            <div v-else :class="cx('wrapper')" v-bind="ptm('wrapper')">
                 <slot name="messageicon" class="p-message-icon">
                     <component :is="icon ? 'span' : iconComponent" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></component>
                 </slot>