From db5336f32b540e9ba002cf8ec8f494745c015d46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 28 Apr 2023 11:56:09 +0300
Subject: [PATCH] OverlayPanel & Sidebar pt demos added

---
 doc/overlaypanel/pt/PTDoc.vue   | 84 +++++++++++++++++++++++++++++++++
 doc/overlaypanel/pt/PTImage.vue |  8 ++++
 doc/overlaypanel/pt/index.vue   | 41 ++++++++++++++++
 doc/sidebar/pt/PTDoc.vue        | 77 ++++++++++++++++++++++++++++++
 doc/sidebar/pt/PTImage.vue      |  8 ++++
 doc/sidebar/pt/index.vue        | 41 ++++++++++++++++
 pages/overlaypanel/index.vue    | 13 ++++-
 pages/sidebar/index.vue         |  6 ++-
 8 files changed, 274 insertions(+), 4 deletions(-)
 create mode 100644 doc/overlaypanel/pt/PTDoc.vue
 create mode 100644 doc/overlaypanel/pt/PTImage.vue
 create mode 100644 doc/overlaypanel/pt/index.vue
 create mode 100644 doc/sidebar/pt/PTDoc.vue
 create mode 100644 doc/sidebar/pt/PTImage.vue
 create mode 100644 doc/sidebar/pt/index.vue

diff --git a/doc/overlaypanel/pt/PTDoc.vue b/doc/overlaypanel/pt/PTDoc.vue
new file mode 100644
index 000000000..e4d49b42d
--- /dev/null
+++ b/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>
diff --git a/doc/overlaypanel/pt/PTImage.vue b/doc/overlaypanel/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/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>
diff --git a/doc/overlaypanel/pt/index.vue b/doc/overlaypanel/pt/index.vue
new file mode 100644
index 000000000..da9a6389d
--- /dev/null
+++ b/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>
diff --git a/doc/sidebar/pt/PTDoc.vue b/doc/sidebar/pt/PTDoc.vue
new file mode 100644
index 000000000..12f72c1a4
--- /dev/null
+++ b/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>
diff --git a/doc/sidebar/pt/PTImage.vue b/doc/sidebar/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/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>
diff --git a/doc/sidebar/pt/index.vue b/doc/sidebar/pt/index.vue
new file mode 100644
index 000000000..326142c7a
--- /dev/null
+++ b/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>
diff --git a/pages/overlaypanel/index.vue b/pages/overlaypanel/index.vue
index 353b59cc9..cae3e02fe 100755
--- a/pages/overlaypanel/index.vue
+++ b/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
         };
     }
 };
diff --git a/pages/sidebar/index.vue b/pages/sidebar/index.vue
index b0729aa69..bf82a479b 100755
--- a/pages/sidebar/index.vue
+++ b/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
         };
     }
 };