PtViewer demos added

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()}"]`;

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

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>

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',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.divider',

apps/showcase/doc/galleria/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/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>

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',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.galleria',

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

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>

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',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.progressbar',

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',
+                    id: 'pt.viewer',
-                    label: 'Wireframe',
+                    label: 'Viewer',
-                    component: PTImage
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.timeline',

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'
                 }
             });
         },