From c368c0f8df806b69363f75235a27cfc3a4c757c9 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 13:51:23 +0300
Subject: [PATCH] Refactor #4433 - ConfirmDialog

---
 api-generator/components/confirmdialog.js     |  4 ++++
 .../lib/confirmdialog/ConfirmDialog.d.ts      | 14 +++++++++++++
 .../lib/confirmdialog/ConfirmDialog.vue       | 21 ++++++++++++-------
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/api-generator/components/confirmdialog.js b/api-generator/components/confirmdialog.js
index 7e1a4df28..1dcd29cc0 100644
--- a/api-generator/components/confirmdialog.js
+++ b/api-generator/components/confirmdialog.js
@@ -47,6 +47,10 @@ const ConfirmDialogSlots = [
     {
         name: 'rejecticon',
         description: 'Custom reject icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
     }
 ];
 
diff --git a/components/lib/confirmdialog/ConfirmDialog.d.ts b/components/lib/confirmdialog/ConfirmDialog.d.ts
index 32a499de5..8e18f7a9a 100644
--- a/components/lib/confirmdialog/ConfirmDialog.d.ts
+++ b/components/lib/confirmdialog/ConfirmDialog.d.ts
@@ -211,6 +211,20 @@ export interface ConfirmDialogSlots {
      * Custom icon template.
      */
     rejecticon(): VNode[];
+    /**
+     * Custom container slot.
+     * @param {Object} scope - container slot's params.
+     */
+    container(scope: {
+        /**
+         * Message of the component
+         */
+        message: any;
+        /**
+         * Close dialog function.
+         */
+        onClose: () => void;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/confirmdialog/ConfirmDialog.vue b/components/lib/confirmdialog/ConfirmDialog.vue
index 951101edc..f39593c84 100644
--- a/components/lib/confirmdialog/ConfirmDialog.vue
+++ b/components/lib/confirmdialog/ConfirmDialog.vue
@@ -14,15 +14,20 @@
         :pt="pt"
         :unstyled="unstyled"
     >
-        <template v-if="!$slots.message">
-            <slot name="icon">
-                <component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
-                <span v-else-if="confirmation.icon" :class="cx('icon')" v-bind="ptm('icon')" />
-            </slot>
-            <span :class="cx('message')" v-bind="ptm('message')">{{ message }}</span>
+        <template v-if="$slots.container" #container="slotProps">
+            <slot name="container" :message="confirmation" :onClose="slotProps.onClose" />
         </template>
-        <component v-else :is="$slots.message" :message="confirmation"></component>
-        <template #footer>
+        <template v-if="!$slots.container">
+            <template v-if="!$slots.message">
+                <slot name="icon">
+                    <component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
+                    <span v-else-if="confirmation.icon" :class="cx('icon')" v-bind="ptm('icon')" />
+                </slot>
+                <span :class="cx('message')" v-bind="ptm('message')">{{ message }}</span>
+            </template>
+            <component v-else :is="$slots.message" :message="confirmation"></component>
+        </template>
+        <template v-if="!$slots.container" #footer>
             <CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')" data-pc-name="rejectbutton">
                 <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                     <slot name="rejecticon">