PTViewer added to Menu components I

apps/showcase/doc/breadcrumb/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/breadcrumb.jpg" />
-    </div>
-</template>

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

@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Breadcrumb :home="home" :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home'
+            },
+            items: [{ label: 'Electronics' }, { label: 'Computer', icon: 'pi pi-desktop' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Breadcrumb'),
+                    key: 'Breadcrumb'
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/doc/breadcrumb/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.breadcrumb',

apps/showcase/doc/contextmenu/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/contextmenu.jpg" />
-    </div>
-</template>

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

@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <img id="logo" alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature2.jpg" class="w-full md:w-[20rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
+        <ContextMenu ref="menu" appendTo="#logo" :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'Copy', icon: 'pi pi-copy' },
+                { label: 'Rename', icon: 'pi pi-file-edit' }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('ContextMenu'),
+                    key: 'ContextMenu'
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/doc/contextmenu/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.contextmenu',

apps/showcase/doc/dock/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/dock.jpg" />
-    </div>
-</template>

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

@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <div class="relative w-full h-[400px]">
+            <Dock :model="items">
+                <template #itemicon="{ item }">
+                    <img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
+                </template>
+            </Dock>
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Finder',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+                },
+                {
+                    label: 'App Store',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+                },
+                {
+                    label: 'Photos',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+                },
+                {
+                    label: 'Trash',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Dock'),
+                    key: 'Dock'
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/doc/dock/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.dock',

apps/showcase/doc/menu/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/menu.jpg" />
-    </div>
-</template>

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

@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Menu :model="items" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Documents',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-plus'
+                        },
+                        {
+                            label: 'Search',
+                            icon: 'pi pi-search'
+                        }
+                    ]
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Profile',
+                    items: [
+                        {
+                            label: 'Settings',
+                            icon: 'pi pi-cog'
+                        },
+                        {
+                            label: 'Logout',
+                            icon: 'pi pi-sign-out'
+                        }
+                    ]
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Menu'),
+                    key: 'Menu'
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/doc/menu/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.menu',