From 19324e94ffc243df1b5152fe3d0f649e58ba423b Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 19 Sep 2024 10:36:09 +0300
Subject: [PATCH] PtViewer demos added

---
 apps/showcase/components/doc/DocPTViewer.vue  |  1 +
 apps/showcase/doc/divider/pt/PTImage.vue      |  8 ----
 apps/showcase/doc/divider/pt/PTViewer.vue     | 41 +++++++++++++++++
 apps/showcase/doc/divider/pt/index.vue        |  8 ++--
 apps/showcase/doc/galleria/pt/PTImage.vue     |  8 ----
 apps/showcase/doc/galleria/pt/PTViewer.vue    | 45 +++++++++++++++++++
 apps/showcase/doc/galleria/pt/index.vue       |  8 ++--
 apps/showcase/doc/progressbar/pt/PTImage.vue  |  8 ----
 apps/showcase/doc/progressbar/pt/PTViewer.vue | 25 +++++++++++
 apps/showcase/doc/progressbar/pt/index.vue    |  8 ++--
 apps/showcase/doc/timeline/pt/index.vue       |  8 ++--
 .../primevue/src/galleria/GalleriaContent.vue |  3 +-
 12 files changed, 130 insertions(+), 41 deletions(-)
 delete mode 100644 apps/showcase/doc/divider/pt/PTImage.vue
 create mode 100644 apps/showcase/doc/divider/pt/PTViewer.vue
 delete mode 100644 apps/showcase/doc/galleria/pt/PTImage.vue
 create mode 100644 apps/showcase/doc/galleria/pt/PTViewer.vue
 delete mode 100644 apps/showcase/doc/progressbar/pt/PTImage.vue
 create mode 100644 apps/showcase/doc/progressbar/pt/PTViewer.vue

diff --git a/apps/showcase/components/doc/DocPTViewer.vue b/apps/showcase/components/doc/DocPTViewer.vue
index 1fa39d55b..d1e3ac2d4 100644
--- a/apps/showcase/components/doc/DocPTViewer.vue
+++ b/apps/showcase/components/doc/DocPTViewer.vue
@@ -35,6 +35,7 @@ export default {
 
             if (componentName === 'ConfirmDialog') cmpName = 'Dialog';
             else if (componentName === 'ScrollTop') cmpName = 'Button';
+            else if (componentName === 'Galleria') cmpName = 'GalleriaContent';
 
             if (item.label === 'root') selector = `[data-pc-name="${cmpName.toLowerCase()}"]`;
             else if (item.label.startsWith('pc')) selector = `[data-pc-name="${item.label.toLowerCase()}"]`;
diff --git a/apps/showcase/doc/divider/pt/PTImage.vue b/apps/showcase/doc/divider/pt/PTImage.vue
deleted file mode 100644
index 7a6c733d7..000000000
--- a/apps/showcase/doc/divider/pt/PTImage.vue
+++ /dev/null
@@ -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/divider.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/divider/pt/PTViewer.vue b/apps/showcase/doc/divider/pt/PTViewer.vue
new file mode 100644
index 000000000..cfe43251c
--- /dev/null
+++ b/apps/showcase/doc/divider/pt/PTViewer.vue
@@ -0,0 +1,41 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <div>
+            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores debitis praesentium aliquam.</p>
+
+            <Divider align="left" type="solid">
+                <b>Left</b>
+            </Divider>
+
+            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem doloremque laudantium.</p>
+
+            <Divider align="center" type="dotted">
+                <b>Center</b>
+            </Divider>
+
+            <p>Temporibus autem quibusdam et aut officiis debitis aut rerum saepe eveniet ut et voluptates.</p>
+
+            <Divider align="right" type="dashed">
+                <b>Right</b>
+            </Divider>
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('Divider'),
+                    key: 'Divider'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/divider/pt/index.vue b/apps/showcase/doc/divider/pt/index.vue
index 4a494a4d0..0bbd1c2fc 100644
--- a/apps/showcase/doc/divider/pt/index.vue
+++ b/apps/showcase/doc/divider/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',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.divider',
diff --git a/apps/showcase/doc/galleria/pt/PTImage.vue b/apps/showcase/doc/galleria/pt/PTImage.vue
deleted file mode 100644
index 9ac50d6b4..000000000
--- a/apps/showcase/doc/galleria/pt/PTImage.vue
+++ /dev/null
@@ -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>
diff --git a/apps/showcase/doc/galleria/pt/PTViewer.vue b/apps/showcase/doc/galleria/pt/PTViewer.vue
new file mode 100644
index 000000000..082fb9b0b
--- /dev/null
+++ b/apps/showcase/doc/galleria/pt/PTViewer.vue
@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+            </template>
+        </Galleria>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import { PhotoService } from '@/service/PhotoService';
+
+export default {
+    data() {
+        return {
+            images: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1300px',
+                    numVisible: 4
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1
+                }
+            ],
+            docs: [
+                {
+                    data: getPTOptions('Galleria'),
+                    key: 'Galleria'
+                }
+            ]
+        };
+    },
+    mounted() {
+        PhotoService.getImages().then((data) => (this.images = data));
+    }
+};
+</script>
diff --git a/apps/showcase/doc/galleria/pt/index.vue b/apps/showcase/doc/galleria/pt/index.vue
index 6539e8602..df9ac3a87 100644
--- a/apps/showcase/doc/galleria/pt/index.vue
+++ b/apps/showcase/doc/galleria/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',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.galleria',
diff --git a/apps/showcase/doc/progressbar/pt/PTImage.vue b/apps/showcase/doc/progressbar/pt/PTImage.vue
deleted file mode 100644
index 0424ab608..000000000
--- a/apps/showcase/doc/progressbar/pt/PTImage.vue
+++ /dev/null
@@ -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/progressbar.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/progressbar/pt/PTViewer.vue b/apps/showcase/doc/progressbar/pt/PTViewer.vue
new file mode 100644
index 000000000..bd3c64d95
--- /dev/null
+++ b/apps/showcase/doc/progressbar/pt/PTViewer.vue
@@ -0,0 +1,25 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <div class="w-full">
+            <ProgressBar :value="50"></ProgressBar>
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('ProgressBar'),
+                    key: 'ProgressBar'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/progressbar/pt/index.vue b/apps/showcase/doc/progressbar/pt/index.vue
index 14452a734..d6b4e0aed 100644
--- a/apps/showcase/doc/progressbar/pt/index.vue
+++ b/apps/showcase/doc/progressbar/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',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.progressbar',
diff --git a/apps/showcase/doc/timeline/pt/index.vue b/apps/showcase/doc/timeline/pt/index.vue
index 2146e1dc8..691e8157c 100644
--- a/apps/showcase/doc/timeline/pt/index.vue
+++ b/apps/showcase/doc/timeline/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',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.timeline',
diff --git a/packages/primevue/src/galleria/GalleriaContent.vue b/packages/primevue/src/galleria/GalleriaContent.vue
index c91ccb84a..2ed3f7b78 100755
--- a/packages/primevue/src/galleria/GalleriaContent.vue
+++ b/packages/primevue/src/galleria/GalleriaContent.vue
@@ -118,7 +118,8 @@ export default {
                 props: {
                     ...this.$attrs,
                     pt: this.pt,
-                    unstyled: this.unstyled
+                    unstyled: this.unstyled,
+                    'data-pc-name': 'galleria'
                 }
             });
         },