PTViewer added to Data components III

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

apps/showcase/doc/organizationchart/pt/PTViewer.vue

@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <OrganizationChart :value="data" collapsible>
+            <template #default="slotProps">
+                <span>{{ slotProps.node.label }}</span>
+            </template>
+        </OrganizationChart>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            data: {
+                label: 'Argentina',
+                children: [
+                    {
+                        label: 'Argentina',
+                        children: [
+                            {
+                                label: 'Argentina'
+                            },
+                            {
+                                label: 'Croatia'
+                            }
+                        ]
+                    },
+                    {
+                        label: 'France',
+                        children: [
+                            {
+                                label: 'France'
+                            },
+                            {
+                                label: 'Morocco'
+                            }
+                        ]
+                    }
+                ]
+            },
+            docs: [
+                {
+                    data: getPTOptions('OrganizationChart'),
+                    key: 'OrganizationChart'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

apps/showcase/doc/timeline/pt/PTViewer.vue

@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <Timeline :value="events">
+            <template #opposite="slotProps">
+                <small class="text-surface-500 dark:text-surface-400">{{ slotProps.item.date }}</small>
+            </template>
+            <template #content="slotProps">
+                {{ slotProps.item.status }}
+            </template>
+        </Timeline>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            events: [
+                { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
+                { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+                { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+                { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Timeline'),
+                    key: 'Timeline'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

apps/showcase/doc/virtualscroller/pt/PTViewer.vue

@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            items: null,
+            docs: [
+                {
+                    data: getPTOptions('VirtualScroller'),
+                    key: 'VirtualScroller'
+                }
+            ]
+        };
+    },
+    mounted() {
+        this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
+    }
+};
+</script>

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