Merge branch 'master' of https://github.com/primefaces/primevue

apps/showcase/assets/menu/menu.json

@@ -451,14 +451,6 @@
                             "name": "MeterGroup",
                             "to": "/metergroup"
                         },
-                        {
-                            "name": "ScrollTop",
-                            "to": "/scrolltop"
-                        },
-                        {
-                            "name": "Skeleton",
-                            "to": "/skeleton"
-                        },
                         {
                             "name": "ProgressBar",
                             "to": "/progressbar"
@@ -467,6 +459,14 @@
                             "name": "ProgressSpinner",
                             "to": "/progressspinner"
                         },
+                        {
+                            "name": "ScrollTop",
+                            "to": "/scrolltop"
+                        },
+                        {
+                            "name": "Skeleton",
+                            "to": "/skeleton"
+                        },
                         {
                             "name": "Ripple",
                             "to": "/ripple"

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

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

@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <AutoComplete v-model="value" dropdown :suggestions="items" @complete="search" appendTo="self" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: '',
+            items: [],
+            docs: [
+                {
+                    data: getPTOptions('AutoComplete'),
+                    key: 'AutoComplete'
+                }
+            ]
+        };
+    },
+    methods: {
+        search(event) {
+            let _items = [...Array(10).keys()];
+
+            this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items;
+        }
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,98 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            countries: [
+                {
+                    name: 'Australia',
+                    code: 'AU',
+                    states: [
+                        {
+                            name: 'New South Wales',
+                            cities: [
+                                { cname: 'Sydney', code: 'A-SY' },
+                                { cname: 'Newcastle', code: 'A-NE' },
+                                { cname: 'Wollongong', code: 'A-WO' }
+                            ]
+                        },
+                        {
+                            name: 'Queensland',
+                            cities: [
+                                { cname: 'Brisbane', code: 'A-BR' },
+                                { cname: 'Townsville', code: 'A-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'Canada',
+                    code: 'CA',
+                    states: [
+                        {
+                            name: 'Quebec',
+                            cities: [
+                                { cname: 'Montreal', code: 'C-MO' },
+                                { cname: 'Quebec City', code: 'C-QU' }
+                            ]
+                        },
+                        {
+                            name: 'Ontario',
+                            cities: [
+                                { cname: 'Ottawa', code: 'C-OT' },
+                                { cname: 'Toronto', code: 'C-TO' }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    name: 'United States',
+                    code: 'US',
+                    states: [
+                        {
+                            name: 'California',
+                            cities: [
+                                { cname: 'Los Angeles', code: 'US-LA' },
+                                { cname: 'San Diego', code: 'US-SD' },
+                                { cname: 'San Francisco', code: 'US-SF' }
+                            ]
+                        },
+                        {
+                            name: 'Florida',
+                            cities: [
+                                { cname: 'Jacksonville', code: 'US-JA' },
+                                { cname: 'Miami', code: 'US-MI' },
+                                { cname: 'Tampa', code: 'US-TA' },
+                                { cname: 'Orlando', code: 'US-OR' }
+                            ]
+                        },
+                        {
+                            name: 'Texas',
+                            cities: [
+                                { cname: 'Austin', code: 'US-AU' },
+                                { cname: 'Dallas', code: 'US-DA' },
+                                { cname: 'Houston', code: 'US-HO' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('CascadeSelect'),
+                    key: 'CascadeSelect'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Checkbox v-model="checked" :binary="true" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            checked: false,
+            docs: [
+                {
+                    data: getPTOptions('Checkbox'),
+                    key: 'Checkbox'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <ColorPicker v-model="color" inline />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            color: null,
+            docs: [
+                {
+                    data: getPTOptions('ColorPicker'),
+                    key: 'ColorPicker'
+                }
+            ]
+        };
+    }
+};
+</script>

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

apps/showcase/doc/confirmdialog/pt/index.vue

@@ -21,6 +21,7 @@ export default {
                     id: 'pt.image',
                     label: 'Wireframe',
                     component: PTImage
+                    label: 'Viewer',
                 },
                 {
                     id: 'pt.doc.confirmdialog',

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <DatePicker v-model="date" showIcon fluid iconDisplay="input" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            date: null,
+            docs: [
+                {
+                    data: getPTOptions('DatePicker'),
+                    key: 'DatePicker'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Editor v-model="value" editorStyle="height: 320px" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('Editor'),
+                    key: 'Editor'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <FloatLabel>
+            <InputText id="username" v-model="value" autocomplete="off" />
+            <label for="username">Username</label>
+        </FloatLabel>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('FloatLabel'),
+                    key: 'FloatLabel'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="value" placeholder="Search" />
+        </IconField>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('IconField'),
+                    key: 'IconField'
+                },
+                {
+                    data: getPTOptions('InputIcon'),
+                    key: 'InputIcon'
+                }
+            ]
+        };
+    }
+};
+</script>

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

apps/showcase/doc/iconfield/theming/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/iconfield/theming/pt/index.vue

@@ -1,35 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>IconField Pass Through</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
-                },
-                {
-                    id: 'pt.doc.iconfield',
-                    label: 'IconField PT Options',
-                    component: DocApiTable,
-                    data: getPTOptions('IconField')
-                }
-            ]
-        };
-    }
-};
-</script>

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

@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <IftaLabel>
+            <InputText id="username" v-model="value" autocomplete="off" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('IftaLabel'),
+                    key: 'IftaLabel'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <InputGroup>
+            <InputGroupAddon>$</InputGroupAddon>
+            <InputNumber v-model="value" placeholder="Price" />
+            <InputGroupAddon>.00</InputGroupAddon>
+        </InputGroup>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('InputGroup'),
+                    key: 'InputGroup'
+                },
+                {
+                    data: getPTOptions('InputGroupAddon'),
+                    key: 'InputGroupAddon'
+                }
+            ]
+        };
+    }
+};
+</script>

apps/showcase/doc/inputgroup/pt/index.vue

@@ -12,16 +12,16 @@
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
 // import PtDoc from './PTDoc.vue';
-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.inputgroup',

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('InputMask'),
+                    key: 'InputMask'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <InputNumber v-model="value" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: 20,
+            docs: [
+                {
+                    data: getPTOptions('InputNumber'),
+                    key: 'InputNumber'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <InputOtp v-model="value" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('InputOtp'),
+                    key: 'InputOtp'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <InputText v-model="value" placeholder="Username" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('InputText'),
+                    key: 'InputText'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Knob v-model="value" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: 0,
+            docs: [
+                {
+                    data: getPTOptions('Knob'),
+                    key: 'Knob'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Listbox v-model="selectedCity" filter checkmark :highlightOnSelect="false" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" class="w-full md:w-56" listStyle="max-height:250px">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </Listbox>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ],
+            docs: [
+                {
+                    data: getPTOptions('Listbox'),
+                    key: 'Listbox'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </MultiSelect>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            selectedCities: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ],
+            docs: [
+                {
+                    data: getPTOptions('MultiSelect'),
+                    key: 'MultiSelect'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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/password/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/password.jpg" />
-    </div>
-</template>

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Password v-model="value" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('Password'),
+                    key: 'Password'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <RadioButton v-model="value" value="1" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('RadioButton'),
+                    key: 'RadioButton'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Rating v-model="value" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('Rating'),
+                    key: 'Rating'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Select v-model="selectedCity" filter :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
+            <template #optiongroup="slotProps">
+                <div class="flex items-center">
+                    <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
+                    <div>{{ slotProps.option.label }}</div>
+                </div>
+            </template>
+        </Select>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            selectedCity: null,
+            groupedCities: [
+                {
+                    label: 'Germany',
+                    code: 'DE',
+                    items: [
+                        { label: 'Berlin', value: 'Berlin' },
+                        { label: 'Frankfurt', value: 'Frankfurt' },
+                        { label: 'Hamburg', value: 'Hamburg' },
+                        { label: 'Munich', value: 'Munich' }
+                    ]
+                },
+                {
+                    label: 'USA',
+                    code: 'US',
+                    items: [
+                        { label: 'Chicago', value: 'Chicago' },
+                        { label: 'Los Angeles', value: 'Los Angeles' },
+                        { label: 'New York', value: 'New York' },
+                        { label: 'San Francisco', value: 'San Francisco' }
+                    ]
+                },
+                {
+                    label: 'Japan',
+                    code: 'JP',
+                    items: [
+                        { label: 'Kyoto', value: 'Kyoto' },
+                        { label: 'Osaka', value: 'Osaka' },
+                        { label: 'Tokyo', value: 'Tokyo' },
+                        { label: 'Yokohama', value: 'Yokohama' }
+                    ]
+                }
+            ],
+            docs: [
+                {
+                    data: getPTOptions('Select'),
+                    key: 'Select'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,25 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <SelectButton v-model="value" :options="options" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: 'One-Way',
+            options: ['One-Way', 'Return'],
+            docs: [
+                {
+                    data: getPTOptions('SelectButton'),
+                    key: 'SelectButton'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Slider v-model="value" class="w-56" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('Slider'),
+                    key: 'Slider'
+                }
+            ]
+        };
+    }
+};
+</script>

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

apps/showcase/doc/steps/AccessibilityDoc.vue

@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            Steps component uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the current step
-            item defines <i>aria-current</i> as "step".
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Moves focus to the next step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Moves focus to the previous step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first step if readonly is not enabled.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last step if readonly is not enabled.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>

apps/showcase/doc/steps/BasicDoc.vue

@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps requires a collection of menuitems as its <i>model</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ],
-            code: {
-                basic: `
-<Steps :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Personal Info'
-    },
-    {
-        label: 'Reservation'
-    },
-    {
-        label: 'Review'
-    }
-]);
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

apps/showcase/doc/steps/ControlledDoc.vue

@@ -1,108 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps can be controlled programmatically using <i>activeStep</i> property.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex mb-8 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-        <Steps v-model:activeStep="active" :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ],
-            code: {
-                basic: `
-<div class="flex mb-2 gap-2 justify-end">
-    <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-    <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-    <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-</div>
-<Steps v-model:activeStep="active" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-        <Steps v-model:activeStep="active" :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-        <Steps v-model:activeStep="active" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const active = ref(0);
-
-const items = ref([
-    {
-        label: 'Personal Info'
-    },
-    {
-        label: 'Reservation'
-    },
-    {
-        label: 'Review'
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

apps/showcase/doc/steps/ImportDoc.vue

@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import Steps from 'primevue/steps';
-`
-            }
-        };
-    }
-};
-</script>

apps/showcase/doc/steps/LinearDoc.vue

@@ -1,85 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps is linear by default to enforce completion of a previus step to proceed, set <i>readonly</i> as false for non-linear mode.</p>
-    </DocSectionText>
-    <div class="card">
-        <Steps :model="items" :readonly="false" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ],
-            code: {
-                basic: `
-<Steps :model="items" :readonly="false" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <Steps :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Personal Info'
-                },
-                {
-                    label: 'Reservation'
-                },
-                {
-                    label: 'Review'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Steps :model="items" :readonly="false" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Personal Info'
-    },
-    {
-        label: 'Reservation'
-    },
-    {
-        label: 'Review'
-    }
-]);
-
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

apps/showcase/doc/steps/TemplateDoc.vue

@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Steps offers item customization with the <i>item</i> template that receives the item instance from the model as a parameter.</p>
-    </DocSectionText>
-    <div class="card">
-        <Steps :model="items" class="custom-steps" :readonly="false">
-            <template #item="{ item, active }">
-                <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-                    <i :class="[item.icon, '!text-xl']" />
-                </span>
-            </template>
-        </Steps>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    icon: 'pi pi-user'
-                },
-                {
-                    icon: 'pi pi-calendar'
-                },
-                {
-                    icon: 'pi pi-check'
-                }
-            ],
-            code: {
-                basic: `
-<Steps :model="items" class="custom-steps" :readonly="false">
-    <template #item="{ item, active }">
-        <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-            <i :class="[item.icon, '!text-xl']" />
-        </span>
-    </template>
-</Steps>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Steps :model="items" class="custom-steps" :readonly="false">
-            <template #item="{ item, active }">
-                <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-                    <i :class="[item.icon, '!text-xl']" />
-                </span>
-            </template>
-        </Steps>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    icon: 'pi pi-user'
-                },
-                {
-                    icon: 'pi pi-calendar'
-                },
-                {
-                    icon: 'pi pi-check'
-                }
-            ]
-        }
-    }
-}
-<\/script>
-
-<style lang="scss" scoped>
-::v-deep(.custom-steps) {
-    .p-steps-item:before {
-        margin-top: 0;
-        border-color: var(--p-primary-color);
-    }
-}
-<\/style>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <Steps :model="items" class="custom-steps" :readonly="false">
-            <template #item="{ item, active }">
-                <span :class="['inline-flex justify-center items-center rounded-full border-primary border h-12 w-12 z-10 cursor-pointer', { 'bg-primary text-primary-contrast': active, 'bg-surface-0 dark:bg-surface-900 text-primary': !active }]">
-                    <i :class="[item.icon, '!text-xl']" />
-                </span>
-            </template>
-        </Steps>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        icon: 'pi pi-user'
-    },
-    {
-        icon: 'pi pi-calendar'
-    },
-    {
-        icon: 'pi pi-check'
-    }
-]);
-
-<\/script>
-
-<style lang="scss" scoped>
-::v-deep(.custom-steps) {
-    .p-steps-item:before {
-        margin-top: 0;
-        border-color: var(--p-primary-color);
-    }
-}
-<\/style>
-`
-            }
-        };
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-::v-deep(.custom-steps) {
-    .p-steps-item:before {
-        margin-top: 0;
-        border-color: var(--p-primary-color);
-    }
-}
-</style>

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

apps/showcase/doc/steps/pt/index.vue

@@ -1,35 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>Steps Pass Through</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
-                },
-                {
-                    id: 'pt.doc.steps',
-                    label: 'Steps PT Options',
-                    component: DocApiTable,
-                    data: getPTOptions('Steps')
-                }
-            ]
-        };
-    }
-};
-</script>

apps/showcase/doc/steps/theming/TailwindDoc.vue

@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
-            PrimeVue components with Tailwind CSS.
-        </p>
-    </DocSectionText>
-</template>

apps/showcase/doc/steps/theming/index.vue

@@ -1,56 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>Steps Theming</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
-import TailwindDoc from './TailwindDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'theming.styled',
-                    label: 'Styled',
-                    children: [
-                        {
-                            id: 'theming.classes',
-                            label: 'CSS Classes',
-                            description: 'List of class names used in the styled mode.',
-                            component: DocApiTable,
-                            data: getStyleOptions('Steps')
-                        },
-                        {
-                            id: 'theming.tokens',
-                            label: 'Design Tokens',
-                            description: 'List of design tokens used in a preset.',
-                            component: DocApiTable,
-                            data: getTokenOptions('Steps')
-                        }
-                    ]
-                },
-                {
-                    id: 'theming.unstyled',
-                    label: 'Unstyled',
-                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
-                    children: [
-                        {
-                            id: 'theming.tailwind',
-                            label: 'Tailwind',
-                            component: TailwindDoc
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-</script>

apps/showcase/doc/tabmenu/AccessibilityDoc.vue

@@ -1,65 +0,0 @@
-<template>
-    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
-        <h3>Screen Reader</h3>
-        <p>
-            TabMenu component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role whereas anchor elements have a
-            <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
-        </p>
-
-        <h3>Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>tab</i>
-                        </td>
-                        <td>Adds focus to the active tab header when focus moves in to the component, if there is already a focused tab header moves the focus out of the component based on the page tab sequence.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Activates the focused tab header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Activates the focused tab header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>right arrow</i>
-                        </td>
-                        <td>Moves focus to the next header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>left arrow</i>
-                        </td>
-                        <td>Moves focus to the previous header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>home</i>
-                        </td>
-                        <td>Moves focus to the first header.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>end</i>
-                        </td>
-                        <td>Moves focus to the last header.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </DocSectionText>
-</template>

apps/showcase/doc/tabmenu/BasicDoc.vue

@@ -1,69 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TabMenu requires a collection of menuitems as its <i>model</i>.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { label: 'Dashboard', icon: 'pi pi-home' },
-    { label: 'Transactions', icon: 'pi pi-chart-line' },
-    { label: 'Products', icon: 'pi pi-list' },
-    { label: 'Messages', icon: 'pi pi-inbox' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

apps/showcase/doc/tabmenu/CommandDoc.vue

@@ -1,147 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Dashboard',
-                    icon: 'pi pi-home',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Transactions',
-                    icon: 'pi pi-chart-line',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Products',
-                    icon: 'pi pi-list',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Messages',
-                    icon: 'pi pi-inbox',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
-                    }
-                }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items" />
-<Toast />
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                {
-                    label: 'Dashboard',
-                    icon: 'pi pi-home',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Transactions',
-                    icon: 'pi pi-chart-line',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Products',
-                    icon: 'pi pi-list',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
-                    }
-                },
-                {
-                    label: 'Messages',
-                    icon: 'pi pi-inbox',
-                    command: () => {
-                        this.$toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
-                    }
-                }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items" />
-        <Toast />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useToast } from "primevue/usetoast";
-
-const toast = useToast();
-
-const items = ref([
-    {
-        label: 'Dashboard',
-        icon: 'pi pi-home',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
-        }
-    },
-    {
-        label: 'Transactions',
-        icon: 'pi pi-chart-line',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
-        }
-    },
-    {
-        label: 'Products',
-        icon: 'pi pi-list',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
-        }
-    },
-    {
-        label: 'Messages',
-        icon: 'pi pi-inbox',
-        command: () => {
-            toast.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
-        }
-    }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

apps/showcase/doc/tabmenu/ControlledDoc.vue

@@ -1,97 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Tabs can be controlled programmatically using <i>activeIndex</i> property.</p>
-    </DocSectionText>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-
-        <TabMenu v-model:activeIndex="active" :model="items" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ],
-            code: {
-                basic: `
-<div class="flex mb-2 gap-2 justify-end">
-    <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-    <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-    <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-</div>
-
-<TabMenu v-model:activeIndex="active" :model="items" />
-`,
-                options: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-
-        <TabMenu v-model:activeIndex="active" :model="items" />
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            active: 0,
-            items: [
-                { label: 'Dashboard', icon: 'pi pi-home' },
-                { label: 'Transactions', icon: 'pi pi-chart-line' },
-                { label: 'Products', icon: 'pi pi-list' },
-                { label: 'Messages', icon: 'pi pi-inbox' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <div class="flex mb-2 gap-2 justify-end">
-            <Button @click="active.value = 0" rounded label="1" class="w-8 h-8 p-0" :outlined="active !== 0" />
-            <Button @click="active.value = 1" rounded label="2" class="w-8 h-8 p-0" :outlined="active !== 1" />
-            <Button @click="active.value = 2" rounded label="3" class="w-8 h-8 p-0" :outlined="active !== 2" />
-        </div>
-
-        <TabMenu v-model:activeIndex="active" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const active = ref(0);
-
-const items = ref([
-    { label: 'Dashboard', icon: 'pi pi-home' },
-    { label: 'Transactions', icon: 'pi pi-chart-line' },
-    { label: 'Products', icon: 'pi pi-list' },
-    { label: 'Messages', icon: 'pi pi-inbox' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

apps/showcase/doc/tabmenu/ImportDoc.vue

@@ -1,18 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-import TabMenu from 'primevue/tabmenu';
-`
-            }
-        };
-    }
-};
-</script>

apps/showcase/doc/tabmenu/RouterDoc.vue

@@ -1,136 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ item.label }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-palette',
-                    command: () => {
-                        this.$router.push('/theming/unstyled');
-                    }
-                },
-                { label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items">
-    <template #item="{ item, props }">
-        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                <span v-bind="props.icon" />
-                <span v-bind="props.label">{{ item.label }}</span>
-            </a>
-        </router-link>
-        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-            <span v-bind="props.icon" />
-            <span v-bind="props.label">{{ item.label }}</span>
-        </a>
-    </template>
-</TabMenu>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ item.label }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
-                {
-                    label: 'Programmatic',
-                    icon: 'pi pi-palette',
-                    command: () => {
-                        this.$router.push('/theming/unstyled');
-                    }
-                },
-                { label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
-                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ item.label }}</span>
-                    </a>
-                </router-link>
-                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-bind="props.icon" />
-                    <span v-bind="props.label">{{ item.label }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' },
-    {
-        label: 'Programmatic',
-        icon: 'pi pi-palette',
-        command: () => {
-            this.$router.push('/theming/unstyled');
-        }
-    },
-    { label: 'External', icon: 'pi pi-link', url: 'https://vuejs.org/' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

apps/showcase/doc/tabmenu/TemplateDoc.vue

@@ -1,94 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>TabMenu offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
-    </DocSectionText>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-                    <img :alt="item.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${item.image}`" style="width: 32px" />
-                    <span class="font-bold">{{ item.name }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
-            ],
-            code: {
-                basic: `
-<TabMenu :model="items">
-    <template #item="{ item, props }">
-        <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-            <img :alt="item.name" :src="\`/images/avatar/\${item.image}\`" style="width: 32px" />
-            <span class="font-bold">{{ item.name }}</span>
-        </a>
-    </template>
-</TabMenu>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-                    <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
-                    <span class="font-bold">{{ item.name }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            items: [
-                { name: 'Amy Elsner', image: 'amyelsner.png' },
-                { name: 'Anna Fali', image: 'annafali.png' },
-                { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
-            ]
-        }
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TabMenu :model="items">
-            <template #item="{ item, props }">
-                <a v-ripple v-bind="props.action" class="flex items-center gap-2">
-                    <img :alt="item.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${item.image}\`" style="width: 32px" />
-                    <span class="font-bold">{{ item.name }}</span>
-                </a>
-            </template>
-        </TabMenu>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png' },
-    { name: 'Anna Fali', image: 'annafali.png' },
-    { name: 'Asiya Javayant', image: 'asiyajavayant.png' }
-]);
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>

apps/showcase/doc/tabmenu/pt/index.vue

@@ -1,35 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>TabMenu Pass Through</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
-                },
-                {
-                    id: 'pt.doc.tabmenu',
-                    label: 'TabMenu PT Options',
-                    component: DocApiTable,
-                    data: getPTOptions('TabMenu')
-                }
-            ]
-        };
-    }
-};
-</script>

apps/showcase/doc/tabmenu/theming/TailwindDoc.vue

@@ -1,8 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="doc-link">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style
-            PrimeVue components with Tailwind CSS.
-        </p>
-    </DocSectionText>
-</template>

apps/showcase/doc/tabmenu/theming/index.vue

@@ -1,56 +0,0 @@
-<template>
-    <div class="doc-main">
-        <div class="doc-intro">
-            <h1>TabMenu Theming</h1>
-        </div>
-        <DocSections :docs="docs" />
-    </div>
-    <DocSectionNav :docs="docs" />
-</template>
-
-<script>
-import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
-import TailwindDoc from './TailwindDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'theming.styled',
-                    label: 'Styled',
-                    children: [
-                        {
-                            id: 'theming.classes',
-                            label: 'CSS Classes',
-                            description: 'List of class names used in the styled mode.',
-                            component: DocApiTable,
-                            data: getStyleOptions('TabMenu')
-                        },
-                        {
-                            id: 'theming.tokens',
-                            label: 'Design Tokens',
-                            description: 'List of design tokens used in a preset.',
-                            component: DocApiTable,
-                            data: getTokenOptions('TabMenu')
-                        }
-                    ]
-                },
-                {
-                    id: 'theming.unstyled',
-                    label: 'Unstyled',
-                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
-                    children: [
-                        {
-                            id: 'theming.tailwind',
-                            label: 'Tailwind',
-                            component: TailwindDoc
-                        }
-                    ]
-                }
-            ]
-        };
-    }
-};
-</script>

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

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

@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="docs">
+        <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            value: null,
+            docs: [
+                {
+                    data: getPTOptions('Textarea'),
+                    key: 'Textarea'
+                }
+            ]
+        };
+    }
+};
+</script>

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

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>