From 95ca69d45345a5ce3849f456b4a5bda03bcd2e21 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, 18 Apr 2023 14:50:19 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - ConfirmDialog & ConfirmPopup
 updates

---
 .../lib/confirmdialog/ConfirmDialog.d.ts      | 12 +++++++++++
 .../lib/confirmdialog/ConfirmDialog.vue       | 21 ++++++++++++++++---
 components/lib/confirmpopup/ConfirmPopup.d.ts | 12 +++++++++++
 components/lib/confirmpopup/ConfirmPopup.vue  | 21 ++++++++++++++++---
 4 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/components/lib/confirmdialog/ConfirmDialog.d.ts b/components/lib/confirmdialog/ConfirmDialog.d.ts
index 15866fd0f..b087d314b 100644
--- a/components/lib/confirmdialog/ConfirmDialog.d.ts
+++ b/components/lib/confirmdialog/ConfirmDialog.d.ts
@@ -62,6 +62,18 @@ export interface ConfirmDialogSlots {
      * @param {Object} scope - message slot's params.
      */
     message(scope: { message: ConfirmationOptions }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    accepticon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    rejecticon(): VNode[];
 }
 
 /**
diff --git a/components/lib/confirmdialog/ConfirmDialog.vue b/components/lib/confirmdialog/ConfirmDialog.vue
index 44ad632e0..223245cda 100644
--- a/components/lib/confirmdialog/ConfirmDialog.vue
+++ b/components/lib/confirmdialog/ConfirmDialog.vue
@@ -13,13 +13,28 @@
         @update:visible="onHide"
     >
         <template v-if="!$slots.message">
-            <i v-if="confirmation.icon" :class="iconClass" />
+            <slot name="icon">
+                <component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-dialog-icon" />
+                <span v-else-if="confirmation.icon" :class="iconClass" />
+            </slot>
             <span class="p-confirm-dialog-message">{{ message }}</span>
         </template>
         <component v-else :is="$slots.message" :message="confirmation"></component>
         <template #footer>
-            <CDButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" :autofocus="autoFocusReject" />
-            <CDButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" :autofocus="autoFocusAccept" />
+            <CDButton :label="rejectLabel" :class="rejectClass" iconPos="left" @click="reject()" :autofocus="autoFocusReject">
+                <template #icon="iconProps">
+                    <slot name="rejecticon">
+                        <span :class="[rejectIcon, iconProps.class]" />
+                    </slot>
+                </template>
+            </CDButton>
+            <CDButton :label="acceptLabel" :class="acceptClass" iconPos="left" @click="accept()" :autofocus="autoFocusAccept">
+                <template #icon="iconProps">
+                    <slot name="accepticon">
+                        <span :class="[acceptIcon, iconProps.class]" />
+                    </slot>
+                </template>
+            </CDButton>
         </template>
     </CDialog>
 </template>
diff --git a/components/lib/confirmpopup/ConfirmPopup.d.ts b/components/lib/confirmpopup/ConfirmPopup.d.ts
index 6440faf68..a002aee94 100644
--- a/components/lib/confirmpopup/ConfirmPopup.d.ts
+++ b/components/lib/confirmpopup/ConfirmPopup.d.ts
@@ -30,6 +30,18 @@ export interface ConfirmPopupSlots {
      * @param {Object} scope - message slot's params.
      */
     message(scope: { message: ConfirmationOptions }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    accepticon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    rejecticon(): VNode[];
 }
 
 /**
diff --git a/components/lib/confirmpopup/ConfirmPopup.vue b/components/lib/confirmpopup/ConfirmPopup.vue
index bf472c367..0cc76b001 100644
--- a/components/lib/confirmpopup/ConfirmPopup.vue
+++ b/components/lib/confirmpopup/ConfirmPopup.vue
@@ -4,14 +4,29 @@
             <div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="$attrs">
                 <template v-if="!$slots.message">
                     <div class="p-confirm-popup-content">
-                        <i :class="iconClass" />
+                        <slot name="icon">
+                            <component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-popup-icon" />
+                            <span v-else-if="confirmation.icon" :class="iconClass" />
+                        </slot>
                         <span class="p-confirm-popup-message">{{ confirmation.message }}</span>
                     </div>
                 </template>
                 <component v-else :is="$slots.message" :message="confirmation"></component>
                 <div class="p-confirm-popup-footer">
-                    <CPButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" />
-                    <CPButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" />
+                    <CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject">
+                        <template #icon="iconProps">
+                            <slot name="rejecticon">
+                                <span :class="[rejectIcon, iconProps.class]" />
+                            </slot>
+                        </template>
+                    </CPButton>
+                    <CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept">
+                        <template #icon="iconProps">
+                            <slot name="accepticon">
+                                <span :class="[acceptIcon, iconProps.class]" />
+                            </slot>
+                        </template>
+                    </CPButton>
                 </div>
             </div>
         </transition>