From 8ec53fc7907ab595e65d7e89208c64568c4d181e Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 31 Oct 2023 16:03:45 +0300
Subject: [PATCH] Headless demo callback updates

---
 doc/confirmdialog/HeadlessDoc.vue | 24 ++++++++++++------------
 doc/confirmpopup/HeadlessDoc.vue  | 24 ++++++++++++------------
 doc/dialog/HeadlessDoc.vue        | 24 ++++++++++++------------
 doc/toast/HeadlessDoc.vue         | 24 ++++++++++++------------
 4 files changed, 48 insertions(+), 48 deletions(-)

diff --git a/doc/confirmdialog/HeadlessDoc.vue b/doc/confirmdialog/HeadlessDoc.vue
index 8a8e5b70c..b5feda522 100644
--- a/doc/confirmdialog/HeadlessDoc.vue
+++ b/doc/confirmdialog/HeadlessDoc.vue
@@ -3,7 +3,7 @@
         <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire confirmation UI instead of the default elements.</p>
     </DocSectionText>
     <ConfirmDialog group="headless">
-        <template #container="{ message, onAccept, onReject }">
+        <template #container="{ message, acceptCallback, rejectCallback }">
             <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
                 <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
                     <i class="pi pi-question text-5xl"></i>
@@ -11,8 +11,8 @@
                 <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
                 <p class="mb-0">{{ message.message }}</p>
                 <div class="flex align-items-center gap-2 mt-4">
-                    <Button label="Save" @click="onAccept" class="w-8rem"></Button>
-                    <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
+                    <Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
                 </div>
             </div>
         </template>
@@ -30,7 +30,7 @@ export default {
             code: {
                 basic: `
 <ConfirmDialog group="headless">
-    <template #container="{ message, onAccept, onReject }">
+    <template #container="{ message, acceptCallback, rejectCallback }">
         <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
             <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
                 <i class="pi pi-question text-5xl"></i>
@@ -38,8 +38,8 @@ export default {
             <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
             <p class="mb-0">{{ message.message }}</p>
             <div class="flex align-items-center gap-2 mt-4">
-                <Button label="Save" @click="onAccept" class="w-8rem"></Button>
-                <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
+                <Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
+                <Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
             </div>
         </div>
     </template>
@@ -49,7 +49,7 @@ export default {
                 options: `
 <template>
     <ConfirmDialog group="headless">
-        <template #container="{ message, onAccept, onReject }">
+        <template #container="{ message, acceptCallback, rejectCallback }">
             <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
                 <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
                     <i class="pi pi-question text-5xl"></i>
@@ -57,8 +57,8 @@ export default {
                 <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
                 <p class="mb-0">{{ message.message }}</p>
                 <div class="flex align-items-center gap-2 mt-4">
-                    <Button label="Save" @click="onAccept" class="w-8rem"></Button>
-                    <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
+                    <Button label="Save" @click="acceptCallback" class="w-8rem"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" class="w-8rem"></Button>
                 </div>
             </div>
         </template>
@@ -92,7 +92,7 @@ export default {
                 composition: `
 <template>
     <ConfirmDialog group="headless">
-        <template #container="{ message, onAccept, onReject }">
+        <template #container="{ message, acceptCallback, rejectCallback }">
             <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
                 <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
                     <i class="pi pi-question text-5xl"></i>
@@ -100,8 +100,8 @@ export default {
                 <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
                 <p class="mb-0">{{ message.message }}</p>
                 <div class="flex align-items-center gap-2 mt-4">
-                    <Button label="Save" @click="onAccept"></Button>
-                    <Button label="Cancel" outlined @click="onReject"></Button>
+                    <Button label="Save" @click="acceptCallback"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback"></Button>
                 </div>
             </div>
         </template>
diff --git a/doc/confirmpopup/HeadlessDoc.vue b/doc/confirmpopup/HeadlessDoc.vue
index 3c244f3eb..209483146 100644
--- a/doc/confirmpopup/HeadlessDoc.vue
+++ b/doc/confirmpopup/HeadlessDoc.vue
@@ -3,12 +3,12 @@
         <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire confirmation UI instead of the default elements.</p>
     </DocSectionText>
     <ConfirmPopup group="headless">
-        <template #container="{ message, onAccept, onReject }">
+        <template #container="{ message, acceptCallback, rejectCallback }">
             <div class="bg-gray-900 text-white border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
-                    <Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
+                    <Button label="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
                 </div>
             </div>
         </template>
@@ -26,12 +26,12 @@ export default {
             code: {
                 basic: `
 <ConfirmPopup group="headless">
-    <template #container="{ message, onAccept, onReject }">
+    <template #container="{ message, acceptCallback, rejectCallback }">
         <div class="bg-gray-900 text-white border-round p-3">
             <span>{{ message.message }}</span>
             <div class="flex align-items-center gap-2 mt-3">
-                <Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
-                <Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
+                <Button label="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
+                <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
             </div>
         </div>
     </template>
@@ -42,12 +42,12 @@ export default {
 <template>
     <Toast />
     <ConfirmPopup group="headless">
-        <template #container="{ message, onAccept, onReject }">
+        <template #container="{ message, acceptCallback, rejectCallback }">
             <div class="bg-gray-900 text-white border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
-                    <Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
+                    <Button label="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
                 </div>
             </div>
         </template>
@@ -81,12 +81,12 @@ export default {
 <template>
     <Toast />
     <ConfirmPopup group="headless">
-        <template #container="{ message, onAccept, onReject }">
+        <template #container="{ message, acceptCallback, rejectCallback }">
             <div class="bg-gray-900 text-white border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
-                    <Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
+                    <Button label="Save" @click="acceptCallback" class="p-button-sm p-button-outlined"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" class="p-button-sm p-button-text"></Button>
                 </div>
             </div>
         </template>
diff --git a/doc/dialog/HeadlessDoc.vue b/doc/dialog/HeadlessDoc.vue
index a335ce9ff..fbf912d2a 100644
--- a/doc/dialog/HeadlessDoc.vue
+++ b/doc/dialog/HeadlessDoc.vue
@@ -14,7 +14,7 @@
                 }
             }"
         >
-            <template #container="{ onClose }">
+            <template #container="{ closeCallback }">
                 <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
@@ -35,8 +35,8 @@
                         <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText>
                     </div>
                     <div class="flex align-items-center gap-2">
-                        <Button label="Sign-In" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
-                        <Button label="Cancel" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                        <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
                     </div>
                 </div>
             </template>
@@ -63,7 +63,7 @@ export default {
         }
     }"
 >
-    <template #container="{ onClose }">
+    <template #container="{ closeCallback }">
         <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                 <path d="..." fill="var(--primary-700)"/>
@@ -78,8 +78,8 @@ export default {
                 <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText>
             </div>
             <div class="flex align-items-center gap-2">
-                <Button label="Sign-In" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
-                <Button label="Cancel" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
             </div>
         </div>
     </template>
@@ -99,7 +99,7 @@ export default {
                 }
             }"
         >
-            <template #container="{ onClose }">
+            <template #container="{ closeCallback }">
                 <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
@@ -120,8 +120,8 @@ export default {
                         <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText>
                     </div>
                     <div class="flex align-items-center gap-2">
-                        <Button label="Sign-In" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
-                        <Button label="Cancel" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                        <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
                     </div>
                 </div>
             </template>
@@ -153,7 +153,7 @@ export default {
                 }
             }"
         >
-            <template #container="{ onClose }">
+            <template #container="{ closeCallback }">
                 <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
                         <path
@@ -174,8 +174,8 @@ export default {
                         <InputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText>
                     </div>
                     <div class="flex align-items-center gap-2">
-                        <Button label="Sign-In" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
-                        <Button label="Cancel" @click="onClose" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                        <Button label="Cancel" @click="closeCallback" text class="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
                     </div>
                 </div>
             </template>
diff --git a/doc/toast/HeadlessDoc.vue b/doc/toast/HeadlessDoc.vue
index 38924d474..602776f53 100644
--- a/doc/toast/HeadlessDoc.vue
+++ b/doc/toast/HeadlessDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Toast position="top-center" group="headless" @close="visible = false">
-            <template #container="{ message, onClose }">
+            <template #container="{ message, closeCallback }">
                 <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
                     <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
                     <div class="flex flex-column gap-3 w-full">
@@ -15,8 +15,8 @@
                             <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                         </div>
                         <div class="flex gap-3 mb-3">
-                            <Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
-                            <Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
+                            <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
+                            <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
                         </div>
                     </div>
                 </section>
@@ -37,7 +37,7 @@ export default {
             code: {
                 basic: `
 <Toast position="top-center" group="headless" @close="visible = false">
-    <template #container="{ message, onClose }">
+    <template #container="{ message, closeCallback }">
         <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
             <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
             <div class="flex flex-column gap-3 w-full">
@@ -48,8 +48,8 @@ export default {
                     <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                 </div>
                 <div class="flex gap-3 mb-3">
-                    <Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
-                    <Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
+                    <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
+                    <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
                 </div>
             </div>
         </section>
@@ -61,7 +61,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Toast position="top-center" group="headless" @close="visible = false">
-            <template #container="{ message, onClose }">
+            <template #container="{ message, closeCallback }">
                 <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
                     <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
                     <div class="flex flex-column gap-3 w-full">
@@ -72,8 +72,8 @@ export default {
                             <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                         </div>
                         <div class="flex gap-3 mb-3">
-                            <Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
-                            <Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
+                            <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
+                            <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
                         </div>
                     </div>
                 </section>
@@ -128,7 +128,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Toast position="top-center" group="headless" @close="visible = false">
-            <template #container="{ message, onClose }">
+            <template #container="{ message, closeCallback }">
                 <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
                     <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
                     <div class="flex flex-column gap-3 w-full">
@@ -139,8 +139,8 @@ export default {
                             <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                         </div>
                         <div class="flex gap-3 mb-3">
-                            <Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
-                            <Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
+                            <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
+                            <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
                         </div>
                     </div>
                 </section>