From 27ac7ac76ec9ed22615ae2812db9ea029c431f3d Mon Sep 17 00:00:00 2001
From: Bahadir Sofuoglu <bahadirsofuoglu@gmail.com>
Date: Wed, 24 Aug 2022 17:51:56 +0300
Subject: [PATCH] Message slot added to confirmdialog component

---
 .../confirmdialog/ConfirmDialog.vue           |  8 +-
 src/views/confirmdialog/ConfirmDialogDemo.vue | 27 ++++++
 src/views/confirmdialog/ConfirmDialogDoc.vue  | 87 ++++++++++++++++++-
 3 files changed, 118 insertions(+), 4 deletions(-)

diff --git a/src/components/confirmdialog/ConfirmDialog.vue b/src/components/confirmdialog/ConfirmDialog.vue
index 3744b11d9..1cf5ebd20 100644
--- a/src/components/confirmdialog/ConfirmDialog.vue
+++ b/src/components/confirmdialog/ConfirmDialog.vue
@@ -1,8 +1,12 @@
 <template>
     <CDialog v-model:visible="visible" :modal="true" :header="header" :blockScroll="blockScroll" :position="position" class="p-confirm-dialog"
         :breakpoints="breakpoints" :closeOnEscape="closeOnEscape">
-        <i :class="iconClass" />
-        <span class="p-confirm-dialog-message">{{message}}</span>
+        <template v-if="!$slots.message">
+            <i :class="iconClass" />
+            <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" />
diff --git a/src/views/confirmdialog/ConfirmDialogDemo.vue b/src/views/confirmdialog/ConfirmDialogDemo.vue
index c849f4f69..9d72867a2 100644
--- a/src/views/confirmdialog/ConfirmDialogDemo.vue
+++ b/src/views/confirmdialog/ConfirmDialogDemo.vue
@@ -10,6 +10,14 @@
 
         <div class="content-section implementation">
             <ConfirmDialog></ConfirmDialog>
+            <ConfirmDialog group="templating">
+                <template #message="slotProps">
+                    <div class="flex p-4">
+                        <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
+                        <p class="pl-2">{{slotProps.message.message}}</p>
+                    </div>
+                </template>
+            </ConfirmDialog>
             <ConfirmDialog group="positionDialog"></ConfirmDialog>
 
             <div class="card">
@@ -17,6 +25,9 @@
                 <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
                 <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
 
+                <h5>Templating</h5>
+                <Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+
                 <h5>Position</h5>
                 <div class="grid flex-column">
                     <div class="col">
@@ -87,6 +98,22 @@ export default {
                     this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
                 }
             });
+        },
+        showTemplate() {
+            this.$confirm.require({
+                group: 'templating',
+                header: 'Terms and Conditions',
+                message: 'Do you accept that?',
+                icon: 'pi pi-question-circle',
+                acceptIcon: 'pi pi-check',
+                rejectIcon: 'pi pi-times',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
         }
     },
     components: {
diff --git a/src/views/confirmdialog/ConfirmDialogDoc.vue b/src/views/confirmdialog/ConfirmDialogDoc.vue
index fc981bfa4..b28028cd3 100644
--- a/src/views/confirmdialog/ConfirmDialogDoc.vue
+++ b/src/views/confirmdialog/ConfirmDialogDoc.vue
@@ -299,6 +299,14 @@ export default {
     <div>
         <Toast />
         <ConfirmDialog></ConfirmDialog>
+        <ConfirmDialog group="templating">
+                <template #message="slotProps">
+                    <div class="flex p-4">
+                        <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
+                        <p class="pl-2">{{slotProps.message.message}}</p>
+                    </div>
+                </template>
+        </ConfirmDialog>
         <ConfirmDialog group="positionDialog"></ConfirmDialog>
 
         <div class="card">
@@ -306,6 +314,9 @@ export default {
             <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
             <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
 
+            <h5>Templating</h5>
+                <Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+
             <h5>Position</h5>
             <div class="grid flex-column">
                 <div class="p-col">
@@ -371,6 +382,22 @@ export default {
                     this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
                 }
             });
+        },
+        showTemplate() {
+            this.$confirm.require({
+                group: 'templating',
+                header: 'Terms and Conditions',
+                message: 'Do you accept that?',
+                icon: 'pi pi-question-circle',
+                acceptIcon: 'pi pi-check',
+                rejectIcon: 'pi pi-times',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
         }
     }
 }
@@ -384,6 +411,14 @@ export default {
     <div>
         <Toast />
         <ConfirmDialog></ConfirmDialog>
+        <ConfirmDialog group="templating">
+                <template #message="slotProps">
+                    <div class="flex p-4">
+                        <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
+                        <p class="pl-2">{{slotProps.message.message}}</p>
+                    </div>
+                </template>
+        </ConfirmDialog>
         <ConfirmDialog group="positionDialog"></ConfirmDialog>
 
         <div class="card">
@@ -391,6 +426,9 @@ export default {
             <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
             <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
 
+            <h5>Templating</h5>
+                <Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+
             <h5>Position</h5>
             <div class="grid flex-column">
                 <div class="p-col">
@@ -467,7 +505,24 @@ export default defineComponent({
             });
         }
 
-        return { confirm1, confirm2, confirmPosition };
+        const showTemplate = () => {
+            confirm.require({
+                group: 'templating',
+                header: 'Terms and Conditions',
+                message: 'Do you accept that?',
+                icon: 'pi pi-question-circle',
+                acceptIcon: 'pi pi-check',
+                rejectIcon: 'pi pi-times',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        }
+
+        return { confirm1, confirm2, confirmPosition, showTemplate };
     }
 });
 <\\/script>
@@ -482,6 +537,14 @@ export default defineComponent({
                     content: `<div id="app">
             <p-toast></p-toast>
             <p-confirmdialog></p-confirmdialog>
+            <p-confirmdialog group="templating">
+                <template #message="slotProps">
+                    <div class="flex p-4">
+                        <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
+                        <p class="pl-2">{{slotProps.message.message}}</p>
+                    </div>
+                </template>
+            </p-confirmdialog>
             <p-confirmdialog group="positionDialog"></p-confirmdialog>
 
             <div class="card">
@@ -489,6 +552,9 @@ export default defineComponent({
                 <p-button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></p-button>
                 <p-button @click="confirm2()" icon="pi pi-times" label="Delete"></p-button>
 
+                <h5>Templating</h5>
+                <p-button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></p-button>
+
                 <h5>Position</h5>
                 <div class="grid flex-column">
                     <div class="p-col">
@@ -564,7 +630,24 @@ export default defineComponent({
                     });
                 }
 
-                return { confirm1, confirm2, confirmPosition };
+                const showTemplate = () => {
+                    confirm.require({
+                        group: 'templating',
+                        header: 'Terms and Conditions',
+                        message: 'Do you accept that?',
+                        icon: 'pi pi-question-circle',
+                        acceptIcon: 'pi pi-check',
+                        rejectIcon: 'pi pi-times',
+                        accept: () => {
+                            this.$toast.add({severity:'info',         summary:'Confirmed', detail:'You have accepted',         life: 3000});
+                        },
+                        reject: () => {
+                            this.$toast.add({severity:'error',         summary:'Rejected', detail:'You have rejected',         life: 3000});
+                        }
+                    });
+                }
+
+                return { confirm1, confirm2, confirmPosition, showTemplate };
             },
             components: {
                 "p-confirmdialog": primevue.confirmdialog,