OverlayPanel & Sidebar pt demos added

doc/overlaypanel/pt/PTDoc.vue

@@ -0,0 +1,84 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+
+        <OverlayPanel ref="op" :pt="{ root: { class: 'surface-ground' } }">
+            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+        </OverlayPanel>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+
+<OverlayPanel ref="op"
+    :pt="{
+        root: { class: 'surface-ground' }
+    }"
+>
+    <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+</OverlayPanel>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+
+        <OverlayPanel ref="op"
+            :pt="{
+                root: { class: 'surface-ground' }
+            }"
+        >
+            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+        </OverlayPanel>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        toggle(event) {
+            this.$refs.op.toggle(event);
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
+
+        <OverlayPanel ref="op"
+            :pt="{
+                root: { class: 'surface-ground' }
+            }"
+        >
+            <img src="https://primefaces.org/cdn/primevue/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+        </OverlayPanel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const op = ref();
+const toggle = (event) => {
+    op.value.toggle(event);
+}
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.op.toggle(event);
+        }
+    }
+};
+</script>

doc/overlaypanel/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/overlaypanel/pt/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>OverlayPanel 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.overlaypanel',
+                    label: 'OverlayPanel PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('OverlayPanel')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/sidebar/pt/PTDoc.vue

@@ -0,0 +1,77 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Sidebar v-model:visible="visible" :pt="{ root: { class: 'w-25rem' } }">
+            <h2>Sidebar</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Sidebar>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Sidebar v-model:visible="visible"
+    :pt="{
+        root: { class: 'w-25rem' }
+    }
+>
+    <h2>Sidebar</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</Sidebar>
+<Button icon="pi pi-arrow-right" @click="visible = true" />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Sidebar v-model:visible="visible"
+            :pt="{
+                root: { class: 'w-25rem' }
+            }
+        >
+            <h2>Sidebar</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Sidebar>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Sidebar v-model:visible="visible"
+            :pt="{
+                root: { class: 'w-25rem' }
+            }
+        >
+            <h2>Sidebar</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        </Sidebar>
+        <Button icon="pi pi-arrow-right" @click="visible = true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/sidebar/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/sidebar/pt/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Sidebar 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.sidebar',
+                    label: 'Sidebar PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Sidebar')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>

pages/overlaypanel/index.vue

@@ -1,5 +1,12 @@
 <template>
-    <DocComponent title="Vue Popover Component" header="OverlayPanel" description="OverlayPanel, also known as Popover, is a container component that can overlay other components on page." :componentDocs="docs" :apiDocs="['OverlayPanel']" />
+    <DocComponent
+        title="Vue Popover Component"
+        header="OverlayPanel"
+        description="OverlayPanel, also known as Popover, is a container component that can overlay other components on page."
+        :componentDocs="docs"
+        :apiDocs="['OverlayPanel']"
+        :ptTabComponent="ptComponent"
+    />
 </template>
 
 <script>
@@ -8,6 +15,7 @@ import BasicDoc from '@/doc/overlaypanel/BasicDoc';
 import DataTableDoc from '@/doc/overlaypanel/DataTableDoc';
 import ImportDoc from '@/doc/overlaypanel/ImportDoc';
 import StyleDoc from '@/doc/overlaypanel/StyleDoc';
+import PTComponent from '@/doc/overlaypanel/pt/index.vue';
 
 export default {
     data() {
@@ -38,7 +46,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };

pages/sidebar/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Sidebar Component" header="Sidebar" description="Sidebar, also known as Drawer, is a container component displayed as an overlay." :componentDocs="docs" :apiDocs="['Sidebar']" />
+    <DocComponent title="Vue Sidebar Component" header="Sidebar" description="Sidebar, also known as Drawer, is a container component displayed as an overlay." :componentDocs="docs" :apiDocs="['Sidebar']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -11,6 +11,7 @@ import PositionDoc from '@/doc/sidebar/PositionDoc';
 import SizeDoc from '@/doc/sidebar/SizeDoc';
 import StyleDoc from '@/doc/sidebar/StyleDoc';
 import TemplateDoc from '@/doc/sidebar/TemplateDoc';
+import PTComponent from '@/doc/sidebar/pt/index.vue';
 
 export default {
     data() {
@@ -56,7 +57,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };