ConfirmDialog & ConfirmPopup pt demos added

doc/confirmdialog/pt/PTDoc.vue

@@ -0,0 +1,110 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <ConfirmDialog group="pt" :pt="{ headerTitle: { class: 'text-primary' } }" />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmDialog
+    group="pt"
+    :pt="{
+        headerTitle: { class: 'text-primary' }
+    }"
+/>`,
+                options: `
+<template>
+    <ConfirmDialog
+        group="pt"
+        :pt="{
+            headerTitle: { class: 'text-primary' }
+        }"
+    />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script>
+export default {
+    methods: {
+        confirm() {
+            this.$confirm.require({
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                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>
+    <ConfirmDialog
+        group="pt"
+        :pt="{
+            headerTitle: { class: 'text-primary' }
+        }"
+    />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirm = () => {
+    confirm.require({
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        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: {
+        confirm() {
+            this.$confirm.require({
+                group: 'pt',
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
+                icon: 'pi pi-exclamation-triangle',
+                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/confirmdialog/pt/PTImage.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>

doc/confirmdialog/pt/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ConfirmDialog Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.confirmdialog',
+                    label: 'ConfirmDialog PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ConfirmDialog')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/confirmpopup/pt/PTDoc.vue

@@ -0,0 +1,117 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <ConfirmPopup
+        group="pt"
+        :pt="{
+            root: { class: 'surface-100' }
+        }"
+    />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmPopup
+    group="pt"
+    :pt="{
+        root: { class: 'surface-100' }
+    }"
+/>`,
+                options: `
+<template>
+    <ConfirmPopup
+        group="pt"
+        :pt="{
+            root: { class: 'surface-100' }
+        }"
+    />
+    <Toast />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm($event)" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        confirm(event) {
+            this.$confirm.require({
+                group: 'pt',
+                target: event.currentTarget,
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                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>
+    <ConfirmPopup
+        group="pt"
+        :pt="{
+            root: { class: 'surface-100' }
+        }"
+    />
+    <Toast />
+    <div class="card flex flex-wrap gap-2 justify-content-center">
+        <Button @click="confirm($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 confirm = (event) => {
+    confirm.require({
+        group: 'pt',
+        target: event.currentTarget,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-triangle',
+        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: {
+        confirm(event) {
+            this.$confirm.require({
+                group: 'pt',
+                target: event.currentTarget,
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                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/pt/PTImage.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>

doc/confirmpopup/pt/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ConfirmPopup Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.confirmpopup',
+                    label: 'ConfirmPopup PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('ConfirmPopup')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>

pages/confirmdialog/index.vue

@@ -5,6 +5,7 @@
         description="ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API."
         :componentDocs="docs"
         :apiDocs="['ConfirmDialog', 'ConfirmationService-UseConfirm', 'ConfirmationOptions']"
+        :ptTabComponent="ptComponent"
     />
 </template>
 
@@ -16,6 +17,8 @@ import ImportDoc from '@/doc/confirmdialog/ImportDoc.vue';
 import PositionDoc from '@/doc/confirmdialog/PositionDoc.vue';
 import StyleDoc from '@/doc/confirmdialog/StyleDoc.vue';
 import TemplateDoc from '@/doc/confirmdialog/TemplateDoc.vue';
+import PTComponent from '@/doc/confirmdialog/pt/index.vue';
+
 export default {
     data() {
         return {
@@ -55,7 +58,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };

pages/confirmpopup/index.vue

@@ -5,6 +5,7 @@
         description="ConfirmPopup displays a confirmation overlay displayed relatively to its target."
         :componentDocs="docs"
         :apiDocs="['ConfirmPopup', 'ConfirmationService-UseConfirm', 'ConfirmationOptions']"
+        :ptTabComponent="ptComponent"
     />
 </template>
 
@@ -15,6 +16,7 @@ import ConfirmationServiceDoc from '@/doc/confirmpopup/ConfirmationServiceDoc.vu
 import ImportDoc from '@/doc/confirmpopup/ImportDoc.vue';
 import StyleDoc from '@/doc/confirmpopup/StyleDoc.vue';
 import TemplateDoc from '@/doc/confirmpopup/TemplateDoc.vue';
+import PTComponent from '@/doc/confirmpopup/pt/index.vue';
 
 export default {
     data() {
@@ -50,7 +52,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };