Merged new Docs and Demos

doc/terminal/BasicDoc.vue

@@ -0,0 +1,215 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Commands are processed using an EventBus implementation called <i>TerminalService</i>. Import this service into your component and subscribe to the <i>command</i> event to process the commands by sending replies with the
+            <i>response</i> event.
+        </p>
+    </DocSectionText>
+    <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 $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+import TerminalService from 'primevue/terminalservice';
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />`,
+                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 $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
+    </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>
+<style scoped>
+p {
+    margin-top: 0;
+}
+::v-deep(.dark-demo-terminal) {
+    background-color: #212121;
+    color: #ffffff;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-command) {
+    color: #80cbc4;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-prompt) {
+    color: #ffd54f;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-response) {
+    color: #9fa8da;
+}
+</style>`,
+                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 $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
+    </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>
+
+<style scoped>
+p {
+    margin-top: 0;
+}
+::v-deep(.dark-demo-terminal) {
+    background-color: #212121;
+    color: #ffffff;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-command) {
+    color: #80cbc4;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-prompt) {
+    color: #ffd54f;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-response) {
+    color: #9fa8da;
+}
+</style>`
+            }
+        };
+    },
+    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>
+
+<style scoped>
+p {
+    margin-top: 0;
+}
+::v-deep(.dark-demo-terminal) {
+    background-color: #212121;
+    color: #ffffff;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-command) {
+    color: #80cbc4;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-prompt) {
+    color: #ffd54f;
+}
+
+::v-deep(.dark-demo-terminal .p-terminal-response) {
+    color: #9fa8da;
+}
+</style>