PTViewer added to Media components I

apps/showcase/doc/carousel/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/carousel/pt/PTViewer.vue

@@ -0,0 +1,86 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Carousel :value="products" :numVisible="1" :numScroll="1" :responsiveOptions="responsiveOptions" class="!w-3/4 !p-2">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
+                        <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2" />
+                        </span>
+                    </div>
+                </div>
+            </template>
+        </Carousel>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            responsiveOptions: [
+                {
+                    breakpoint: '1400px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '1199px',
+                    numVisible: 3,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '767px',
+                    numVisible: 2,
+                    numScroll: 1
+                },
+                {
+                    breakpoint: '575px',
+                    numVisible: 1,
+                    numScroll: 1
+                }
+            ],
+            docs: [
+                {
+                    data: getPTOptions('Carousel'),
+                    key: 'Carousel'
+                }
+            ]
+        };
+    },
+    mounted() {
+        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
+    },
+    methods: {
+        getSeverity(status) {
+            switch (status) {
+                case 'INSTOCK':
+                    return 'success';
+
+                case 'LOWSTOCK':
+                    return 'warn';
+
+                case 'OUTOFSTOCK':
+                    return 'danger';
+
+                default:
+                    return null;
+            }
+        }
+    }
+};
+</script>

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

apps/showcase/doc/image/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/image/pt/PTViewer.vue

@@ -0,0 +1,23 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('Image'),
+                    key: 'Image'
+                }
+            ]
+        };
+    }
+};
+</script>

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