PTViewer added to Form components III

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/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',