Terminal pt demo added

doc/terminal/BasicDoc.vue

@@ -14,6 +14,7 @@
 
 <script>
 import TerminalService from 'primevue/terminalservice';
+
 export default {
     data() {
         return {

doc/terminal/pt/PTDoc.vue

@@ -0,0 +1,182 @@
+<template>
+    <DocSectionText v-bind="$attrs" :level="2" />
+    <div class="card">
+        <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 $"
+            :pt="{
+                root: { class: 'surface-900 text-white' },
+                command: { class: 'text-blue-500' },
+                prompt: { class: 'text-yellow-500' },
+                response: { class: 'text-purple-500' }
+            }"
+        />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+import TerminalService from 'primevue/terminalservice';
+
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Terminal
+    welcomeMessage="Welcome to PrimeVue"
+    prompt="primevue $"
+    :pt="{
+        root: { class: 'surface-900 text-white' },
+        command: { class: 'text-blue-500' },
+        prompt: { class: 'text-yellow-500' },
+        response: { class: 'text-purple-500' }
+    }"
+/>`,
+                options: `
+<template>
+    <div>
+        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
+        <Terminal
+            welcomeMessage="Welcome to PrimeVue"
+            prompt="primevue $"
+            :pt="{
+                root: { class: 'surface-900 text-white' },
+                command: { class: 'text-blue-500' },
+                prompt: { class: 'text-yellow-500' },
+                response: { class: 'text-purple-500' }
+            }"
+        />
+    </div>
+</template>
+
+<script>
+import TerminalService from "primevue/terminalservice";
+
+export default {
+    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);
+        }
+    },
+    mounted() {
+        TerminalService.on('command', this.commandHandler);
+    },
+    beforeUnmount() {
+        TerminalService.off('command', this.commandHandler);
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div>
+        <p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
+        <Terminal
+            welcomeMessage="Welcome to PrimeVue"
+            prompt="primevue $"
+            :pt="{
+                root: { class: 'surface-900 text-white' },
+                command: { class: 'text-blue-500' },
+                prompt: { class: 'text-yellow-500' },
+                response: { class: 'text-purple-500' }
+            }"
+        />
+    </div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import TerminalService from "primevue/terminalservice";
+
+onMounted(() => {
+    TerminalService.on('command', commandHandler);
+})
+
+onBeforeUnmount(() => {
+    TerminalService.off('command', commandHandler);
+})
+
+const 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>`
+            }
+        };
+    },
+    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>

doc/terminal/pt/PTImage.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div>
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/terminal.jpg" />
+    </div>
+</template>

doc/terminal/pt/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Terminal Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'WireFrame',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc',
+                    label: 'Terminal Elements',
+                    component: DocApiTable,
+                    data: getPTOption('Terminal')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>

pages/terminal/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :apiDocs="['Terminal', 'TerminalService']" />
+    <DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :apiDocs="['Terminal', 'TerminalService']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/terminal/AccessibilityDoc';
 import BasicDoc from '@/doc/terminal/BasicDoc';
 import ImportDoc from '@/doc/terminal/ImportDoc';
 import StyleDoc from '@/doc/terminal/StyleDoc';
+import PTComponent from '@/doc/terminal/pt/index.vue';
 
 export default {
     data() {
@@ -32,7 +33,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };