PTViewer added to Misc components

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

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

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

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

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

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

@@ -0,0 +1,59 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocPTViewer :docs="ptViewerDoc">
+        <div>
+            <p>Enter "<strong>date</strong>" to display the current date, "<strong>greet {0}</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
+            <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" aria-label="PrimeVue Terminal Service" />
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import TerminalService from 'primevue/terminalservice';
+
+export default {
+    data() {
+        return {
+            ptViewerDoc: [
+                {
+                    data: getPTOptions('Terminal'),
+                    key: 'Terminal'
+                }
+            ]
+        };
+    },
+    mounted() {
+        TerminalService.on('command', this.commandHandler);
+    },
+    beforeUnmount() {
+        TerminalService.off('command', this.commandHandler);
+    },
+    methods: {
+        commandHandler(text) {
+            let response;
+            let argsIndex = text.indexOf(' ');
+            let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+            switch (command) {
+                case 'date':
+                    response = 'Today is ' + new Date().toDateString();
+                    break;
+
+                case 'greet':
+                    response = 'Hola ' + text.substring(argsIndex + 1);
+                    break;
+
+                case 'random':
+                    response = Math.floor(Math.random() * 100);
+                    break;
+
+                default:
+                    response = 'Unknown command: ' + command;
+            }
+
+            TerminalService.emit('response', response);
+        }
+    }
+};
+</script>

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