PTViewer added to overlay components

apps/showcase/doc/confirmpopup/pt/PTImage.vue

@@ -1,8 +0,0 @@
-<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/confirmpopup.jpg" />
-    </div>
-</template>

apps/showcase/doc/confirmpopup/pt/PTViewer.vue

@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <ConfirmPopup group="ptviewer"></ConfirmPopup>
+        <Button ref="btn" @click="confirm1($event)" label="Open Popup" outlined></Button>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('ConfirmPopup'),
+                    key: 'ConfirmPopup'
+                }
+            ]
+        };
+    },
+    methods: {
+        confirm1(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                rejectProps: {
+                    label: 'Cancel',
+                    severity: 'secondary',
+                    outlined: true
+                },
+                acceptProps: {
+                    label: 'Save'
+                },
+                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>

apps/showcase/doc/confirmpopup/pt/index.vue

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.confirmpopup',

apps/showcase/doc/dialog/pt/PTImage.vue

@@ -1,8 +0,0 @@
-<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/dialog.jpg" />
-    </div>
-</template>

apps/showcase/doc/dialog/pt/PTViewer.vue

@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Dialog v-model:visible="visible" appendTo="#doc-ptviewer" header="Edit Profile" maximizable pt:mask="!relative" :draggable="false" class="!my-auto" :style="{ width: '25rem' }">
+            <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
+            <div class="flex items-center gap-4 mb-4">
+                <label for="username" class="font-semibold w-24">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex items-center gap-4 mb-8">
+                <label for="email" class="font-semibold w-24">Email</label>
+                <InputText id="email" class="flex-auto" autocomplete="off" />
+            </div>
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <Button type="button" label="Cancel" severity="secondary"></Button>
+                    <Button type="button" label="Save"></Button>
+                </div>
+            </template>
+        </Dialog>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            visible: true,
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Dialog'),
+                    key: 'Dialog'
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/doc/dialog/pt/index.vue

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.dialog',

apps/showcase/doc/dynamicdialog/pt/PTImage.vue

@@ -1,8 +0,0 @@
-<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/dialog.jpg" />
-    </div>
-</template>

apps/showcase/doc/dynamicdialog/pt/PTViewer.vue

@@ -0,0 +1,5 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>For more information visit <PrimeVueNuxtLink to="/dialog/#pt.viewer">Dialog PT</PrimeVueNuxtLink>.</p>
+    </DocSectionText>
+</template>

apps/showcase/doc/dynamicdialog/pt/index.vue

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.dynamicdialog',

apps/showcase/doc/popover/pt/PTImage.vue

@@ -1,8 +0,0 @@
-<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/overlaypanel.jpg" />
-    </div>
-</template>

apps/showcase/doc/popover/pt/PTViewer.vue

@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Button ref="btn" type="button" icon="pi pi-share-alt" label="Share" @click="toggle" />
+        <Popover ref="op" appendTo="self">
+            <div class="flex flex-col gap-4 w-[25rem]">
+                <div>
+                    <span class="font-medium block mb-2">Share this document</span>
+                    <InputGroup>
+                        <InputText value="https://primevue.org/12323ff26t2g243g423g234gg52hy25XADXAG3" readonly class="w-[25rem]"></InputText>
+                        <InputGroupAddon>
+                            <i class="pi pi-copy"></i>
+                        </InputGroupAddon>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium block mb-2">Invite Member</span>
+                    <InputGroup>
+                        <InputText disabled></InputText>
+                        <Button label="Invite" icon="pi pi-users"></Button>
+                    </InputGroup>
+                </div>
+                <div>
+                    <span class="font-medium block mb-2">Team Members</span>
+                    <ul class="list-none p-0 m-0 flex flex-col gap-4">
+                        <li v-for="member in members" :key="member.name" class="flex items-center gap-2">
+                            <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
+                            <div>
+                                <span class="font-medium">{{ member.name }}</span>
+                                <div class="text-sm text-surface-500 dark:text-surface-400">{{ member.email }}</div>
+                            </div>
+                            <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400 ml-auto text-sm">
+                                <span>{{ member.role }}</span>
+                                <i class="pi pi-angle-down"></i>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </Popover>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            members: [
+                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Popover'),
+                    key: 'Popover'
+                }
+            ]
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.op.show(event);
+        }
+    }
+};
+</script>

apps/showcase/doc/popover/pt/index.vue

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.popover',

apps/showcase/doc/tooltip/pt/PTImage.vue

@@ -1,8 +0,0 @@
-<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>

apps/showcase/doc/tooltip/pt/PTViewer.vue

@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Button v-tooltip="{ value: 'Confirm to proceed', hideDelay: 300000 }" severity="secondary" label="Tooltip" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Tooltip'),
+                    key: 'Tooltip'
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/doc/tooltip/pt/index.vue

@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.tooltip',