Updated ConfirmPopup demos

components/lib/confirmdialog/ConfirmDialog.vue

@@ -55,7 +55,6 @@ import BaseConfirmDialog from './BaseConfirmDialog.vue';
 export default {
     name: 'ConfirmDialog',
     extends: BaseConfirmDialog,
-
     confirmListener: null,
     closeListener: null,
     data() {

components/lib/confirmpopup/style/ConfirmPopupStyle.js

@@ -86,8 +86,8 @@ const classes = {
     icon: ({ instance }) => ['p-confirm-popup-icon', instance.confirmation ? instance.confirmation.icon : null],
     message: 'p-confirm-popup-message',
     footer: 'p-confirm-popup-footer',
-    rejectButton: ({ instance }) => ['p-confirm-popup-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
+    rejectButton: ({ instance }) => ['p-confirm-popup-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-sm p-button-text' : null],
-    acceptButton: 'p-confirm-popup-accept'
+    acceptButton: ({ instance }) => ['p-confirm-popup-accept', instance.confirmation && !instance.confirmation.acceptClass ? 'p-button-sm' : null]
 };
 
 export default BaseStyle.extend({

doc/confirmpopup/AccessibilityDoc.vue

@@ -6,7 +6,7 @@
             <i>aria-modal</i> is added since focus is kept within the popup.
         </p>
         <p>
-            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
+            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmPopup adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
             trigger and the dialog is defined.
         </p>
         <DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />

doc/confirmpopup/BasicDoc.vue

@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
+        <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
     </DocSectionText>
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,10 +17,8 @@ export default {
             code: {
                 basic: `
 <ConfirmPopup></ConfirmPopup>
-<div class="card flex flex-wrap gap-2 justify-content-center">
 <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-    <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
+<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
-</div>
 `,
                 options: `
 <template>
@@ -28,7 +26,7 @@ export default {
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
 </template>
 
@@ -53,7 +51,7 @@ export default {
                 target: event.currentTarget,
                 message: 'Do you want to delete this record?',
                 icon: 'pi pi-info-circle',
-                acceptClass: 'p-button-danger',
+                acceptClass: 'p-button-danger p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },
@@ -72,7 +70,7 @@ export default {
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
 </template>
 
@@ -102,7 +100,7 @@ const confirm2 = (event) => {
         target: event.currentTarget,
         message: 'Do you want to delete this record?',
         icon: 'pi pi-info-circle',
-        acceptClass: 'p-button-danger',
+        acceptClass: 'p-button-danger p-button-sm',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
         },
@@ -135,7 +133,7 @@ const confirm2 = (event) => {
                 target: event.currentTarget,
                 message: 'Do you want to delete this record?',
                 icon: 'pi pi-info-circle',
-                acceptClass: 'p-button-danger',
+                acceptClass: 'p-button-danger p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },

doc/confirmpopup/ConfirmationServiceDoc.vue

@@ -4,7 +4,7 @@
     </DocSectionText>
     <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     <div class="doc-section-description">
-        <p><i>$confirm</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useConfirm</i> function for Composition API.</p>
+        <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
     </div>
     <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>

doc/confirmpopup/HeadlessDoc.vue

@@ -0,0 +1,140 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <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 }">
+            <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>
+                </div>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmPopup group="headless">
+    <template #container="{ message, onAccept, onReject }">
+        <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>
+            </div>
+        </div>
+    </template>
+</ConfirmPopup>
+<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+`,
+                options: `
+<template>
+    <Toast />
+    <ConfirmPopup group="headless">
+        <template #container="{ message, onAccept, onReject }">
+            <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>
+                </div>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        requireConfirmation(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                group: 'headless',
+                message: 'Are you sure? You cannot undo this.',
+                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 });
+                }
+            });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <Toast />
+    <ConfirmPopup group="headless">
+        <template #container="{ message, onAccept, onReject }">
+            <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>
+                </div>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const requireConfirmation = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        group: 'headless',
+        message: 'Are you sure? You cannot undo this.',
+        accept: () => {
+            toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+        },
+        reject: () => {
+            toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
+        }
+    });
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        requireConfirmation(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                group: 'headless',
+                message: 'Are you sure? You cannot undo this.',
+                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 });
+                }
+            });
+        }
+    }
+};
+</script>

doc/confirmpopup/TemplateDoc.vue

@@ -1,17 +1,17 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
+        <p>Templating allows customizing the message content.</p>
     </DocSectionText>
-    <ConfirmPopup group="demo">
+    <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
+    <div class="card flex justify-content-center">
-        <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
+        <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,31 +22,29 @@ export default {
         return {
             code: {
                 basic: `
-<ConfirmPopup group="demo">
+<ConfirmPopup group="templating">
     <template #message="slotProps">
-        <div class="flex p-4">
+        <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
-            <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
+            <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
-            <p class="pl-2">{{ slotProps.message.message }}</p>
+            <p>{{ slotProps.message.message }}</p>
         </div>
     </template>
 </ConfirmPopup>
-<div class="card flex flex-wrap gap-2 justify-content-center">
+<Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
-    <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
-</div>
 `,
                 options: `
 <template>
     <Toast />
-    <ConfirmPopup group="demo">
+    <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
+    <div class="card flex justify-content-center">
-        <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
+        <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
     </div>
 </template>
 
@@ -56,11 +54,13 @@ export default {
         showTemplate(event) {
             this.$confirm.require({
                 target: event.currentTarget,
-                group: 'demo',
+                group: 'templating',
-                message: 'Do you accept that?',
+                message: 'Please confirm to proceed moving forward.',
-                icon: 'pi pi-question-circle',
+                icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
+                rejectClass: 'p-button-sm',
+                acceptClass: 'p-button-outlined p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -76,16 +76,16 @@ export default {
                 composition: `
 <template>
     <Toast />
-    <ConfirmPopup group="demo">
+    <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
+    <div class="card flex justify-content-center">
-        <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
+        <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
     </div>
 </template>
 
@@ -99,11 +99,13 @@ const toast = useToast();
 const showTemplate = (event) => {
     confirm.require({
         target: event.currentTarget,
-        group: 'demo',
+        group: 'templating',
-        message: 'Do you accept that?',
+        message: 'Please confirm to proceed moving forward.',
-        icon: 'pi pi-question-circle',
+        icon: 'pi pi-exclamation-circle',
         acceptIcon: 'pi pi-check',
         rejectIcon: 'pi pi-times',
+        rejectClass: 'p-button-sm',
+        acceptClass: 'p-button-outlined p-button-sm',
         accept: () => {
             toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
         },
@@ -121,11 +123,13 @@ const showTemplate = (event) => {
         showTemplate(event) {
             this.$confirm.require({
                 target: event.currentTarget,
-                group: 'demo',
+                group: 'templating',
-                message: 'Do you accept that?',
+                message: 'Please confirm to proceed moving forward.',
-                icon: 'pi pi-question-circle',
+                icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
+                rejectClass: 'p-button-sm',
+                acceptClass: 'p-button-outlined p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },

pages/confirmpopup/index.vue

@@ -14,6 +14,7 @@
 import AccessibilityDoc from '@/doc/confirmpopup/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/confirmpopup/BasicDoc.vue';
 import ConfirmationServiceDoc from '@/doc/confirmpopup/ConfirmationServiceDoc.vue';
+import HeadlessDoc from '@/doc/confirmpopup/HeadlessDoc.vue';
 import ImportDoc from '@/doc/confirmpopup/ImportDoc.vue';
 import TemplateDoc from '@/doc/confirmpopup/TemplateDoc.vue';
 import PTComponent from '@/doc/confirmpopup/pt/index.vue';
@@ -30,7 +31,7 @@ export default {
                 },
                 {
                     id: 'confirmation-service',
-                    label: 'Confirmation Service',
+                    label: 'Service',
                     component: ConfirmationServiceDoc
                 },
                 {
@@ -43,6 +44,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',