From 69de98e7ef193771c0d691883d86ef667d1bfd6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 19 Sep 2023 14:22:25 +0300
Subject: [PATCH] Refactor #4433 - Message

---
 api-generator/components/message.js |  4 ++++
 components/lib/message/Message.d.ts | 10 ++++++++++
 components/lib/message/Message.vue  |  3 ++-
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/api-generator/components/message.js b/api-generator/components/message.js
index ba69199a6..68f553418 100644
--- a/api-generator/components/message.js
+++ b/api-generator/components/message.js
@@ -57,6 +57,10 @@ const MessageSlots = [
     {
         name: 'closeicon',
         description: 'Custom close icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
     }
 ];
 
diff --git a/components/lib/message/Message.d.ts b/components/lib/message/Message.d.ts
index f47444eff..0944aab4b 100755
--- a/components/lib/message/Message.d.ts
+++ b/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[];
 }
 
 /**
diff --git a/components/lib/message/Message.vue b/components/lib/message/Message.vue
index b76d3010f..3c59ce59d 100755
--- a/components/lib/message/Message.vue
+++ b/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>