Resolved #229 - Terminal Component

2020-03-16 17:09:38 +03:00 · 2020-03-16 17:09:38 +03:00 · bd695880cc
parent b1b8af5ac6
commit bd695880cc
23 changed files with 434 additions and 230 deletions
--- a/exports/terminal.d.ts
+++ b/exports/terminal.d.ts
@ -0,0 +1 @@
+export * from './components/terminal/Terminal';
--- a/exports/terminal.js
+++ b/exports/terminal.js
@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/terminal/Terminal.vue');
--- a/exports/terminalservice.d.ts
+++ b/exports/terminalservice.d.ts
@ -0,0 +1 @@
+export * from './components/terminal/TerminalService';
--- a/exports/terminalservice.js
+++ b/exports/terminalservice.js
@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/terminal/TerminalService.js');
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@ -3133,7 +3133,8 @@ body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close
 }

 body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: #000000;
+  opacity: 0.4;
 }
 body .p-overlaypanel {
  background-color: #323232;
@ -3980,29 +3981,6 @@ body .p-progressbar .p-progressbar-label {
  color: #dedede;
  line-height: 24px;
 }
-body .p-galleria .p-galleria-nav-prev,
-body .p-galleria .p-galleria-nav-next {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  position: absolute;
-  color: #888888;
-}
-body .p-galleria .p-galleria-nav-prev:hover,
-body .p-galleria .p-galleria-nav-next:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-galleria .p-galleria-nav-prev {
-  font-size: 16px;
-}
-body .p-galleria .p-galleria-nav-next {
-  font-size: 16px;
-}
 body .p-terminal {
  background-color: #323232;
  color: #dedede;
@ -4012,7 +3990,6 @@ body .p-terminal {
 body .p-terminal .p-terminal-input {
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
 }
 body .p-terminal .p-terminal-command {
  height: 16px;
@ -4045,5 +4022,8 @@ body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
  display: inline-block;
  width: calc(100% - 2.357em);
 }
+body .p-blockui {
+  transition-duration: 0.2s;
+}

 /* Add your customizations of theme here */
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@ -3133,7 +3133,8 @@ body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close
 }

 body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: #000000;
+  opacity: 0.4;
 }
 body .p-overlaypanel {
  background-color: #323232;
@ -3980,29 +3981,6 @@ body .p-progressbar .p-progressbar-label {
  color: #dedede;
  line-height: 24px;
 }
-body .p-galleria .p-galleria-nav-prev,
-body .p-galleria .p-galleria-nav-next {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  position: absolute;
-  color: #888888;
-}
-body .p-galleria .p-galleria-nav-prev:hover,
-body .p-galleria .p-galleria-nav-next:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-galleria .p-galleria-nav-prev {
-  font-size: 16px;
-}
-body .p-galleria .p-galleria-nav-next {
-  font-size: 16px;
-}
 body .p-terminal {
  background-color: #323232;
  color: #dedede;
@ -4012,7 +3990,6 @@ body .p-terminal {
 body .p-terminal .p-terminal-input {
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
 }
 body .p-terminal .p-terminal-command {
  height: 16px;
@ -4045,5 +4022,8 @@ body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
  display: inline-block;
  width: calc(100% - 2.357em);
 }
+body .p-blockui {
+  transition-duration: 0.2s;
+}

 /* Add your customizations of theme here */
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@ -3133,7 +3133,8 @@ body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close
 }

 body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: #000000;
+  opacity: 0.4;
 }
 body .p-overlaypanel {
  background-color: #323232;
@ -3980,29 +3981,6 @@ body .p-progressbar .p-progressbar-label {
  color: #dedede;
  line-height: 24px;
 }
-body .p-galleria .p-galleria-nav-prev,
-body .p-galleria .p-galleria-nav-next {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  position: absolute;
-  color: #888888;
-}
-body .p-galleria .p-galleria-nav-prev:hover,
-body .p-galleria .p-galleria-nav-next:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-galleria .p-galleria-nav-prev {
-  font-size: 16px;
-}
-body .p-galleria .p-galleria-nav-next {
-  font-size: 16px;
-}
 body .p-terminal {
  background-color: #323232;
  color: #dedede;
@ -4012,7 +3990,6 @@ body .p-terminal {
 body .p-terminal .p-terminal-input {
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
 }
 body .p-terminal .p-terminal-command {
  height: 16px;
@ -4045,5 +4022,8 @@ body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
  display: inline-block;
  width: calc(100% - 2.357em);
 }
+body .p-blockui {
+  transition-duration: 0.2s;
+}

 /* Add your customizations of theme here */
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@ -3133,7 +3133,8 @@ body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close
 }

 body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: #000000;
+  opacity: 0.4;
 }
 body .p-overlaypanel {
  background-color: #323232;
@ -3980,29 +3981,6 @@ body .p-progressbar .p-progressbar-label {
  color: #dedede;
  line-height: 24px;
 }
-body .p-galleria .p-galleria-nav-prev,
-body .p-galleria .p-galleria-nav-next {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  position: absolute;
-  color: #888888;
-}
-body .p-galleria .p-galleria-nav-prev:hover,
-body .p-galleria .p-galleria-nav-next:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-galleria .p-galleria-nav-prev {
-  font-size: 16px;
-}
-body .p-galleria .p-galleria-nav-next {
-  font-size: 16px;
-}
 body .p-terminal {
  background-color: #323232;
  color: #dedede;
@ -4012,7 +3990,6 @@ body .p-terminal {
 body .p-terminal .p-terminal-input {
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
 }
 body .p-terminal .p-terminal-command {
  height: 16px;
@ -4045,5 +4022,8 @@ body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
  display: inline-block;
  width: calc(100% - 2.357em);
 }
+body .p-blockui {
+  transition-duration: 0.2s;
+}

 /* Add your customizations of theme here */
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@ -3133,7 +3133,8 @@ body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close
 }

 body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: #000000;
+  opacity: 0.4;
 }
 body .p-overlaypanel {
  background-color: #ffffff;
@ -3980,29 +3981,6 @@ body .p-progressbar .p-progressbar-label {
  color: #333333;
  line-height: 24px;
 }
-body .p-galleria .p-galleria-nav-prev,
-body .p-galleria .p-galleria-nav-next {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  position: absolute;
-  color: #848484;
-}
-body .p-galleria .p-galleria-nav-prev:hover,
-body .p-galleria .p-galleria-nav-next:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-galleria .p-galleria-nav-prev {
-  font-size: 16px;
-}
-body .p-galleria .p-galleria-nav-next {
-  font-size: 16px;
-}
 body .p-terminal {
  background-color: #ffffff;
  color: #333333;
@ -4012,7 +3990,6 @@ body .p-terminal {
 body .p-terminal .p-terminal-input {
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
 }
 body .p-terminal .p-terminal-command {
  height: 16px;
@ -4045,5 +4022,8 @@ body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
  display: inline-block;
  width: calc(100% - 2.357em);
 }
+body .p-blockui {
+  transition-duration: 0.2s;
+}

 /* Add your customizations of theme here */
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@ -3133,7 +3133,8 @@ body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close
 }

 body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: #000000;
+  opacity: 0.4;
 }
 body .p-overlaypanel {
  background-color: #ffffff;
@ -3980,29 +3981,6 @@ body .p-progressbar .p-progressbar-label {
  color: #333333;
  line-height: 24px;
 }
-body .p-galleria .p-galleria-nav-prev,
-body .p-galleria .p-galleria-nav-next {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  position: absolute;
-  color: #848484;
-}
-body .p-galleria .p-galleria-nav-prev:hover,
-body .p-galleria .p-galleria-nav-next:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-galleria .p-galleria-nav-prev {
-  font-size: 16px;
-}
-body .p-galleria .p-galleria-nav-next {
-  font-size: 16px;
-}
 body .p-terminal {
  background-color: #ffffff;
  color: #333333;
@ -4012,7 +3990,6 @@ body .p-terminal {
 body .p-terminal .p-terminal-input {
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
 }
 body .p-terminal .p-terminal-command {
  height: 16px;
@ -4045,5 +4022,8 @@ body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
  display: inline-block;
  width: calc(100% - 2.357em);
 }
+body .p-blockui {
+  transition-duration: 0.2s;
+}

 /* Add your customizations of theme here */
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@ -3981,29 +3981,6 @@ body .p-progressbar .p-progressbar-label {
  color: #333333;
  line-height: 24px;
 }
-body .p-galleria .p-galleria-nav-prev,
-body .p-galleria .p-galleria-nav-next {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  position: absolute;
-  color: #848484;
-}
-body .p-galleria .p-galleria-nav-prev:hover,
-body .p-galleria .p-galleria-nav-next:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-galleria .p-galleria-nav-prev {
-  font-size: 16px;
-}
-body .p-galleria .p-galleria-nav-next {
-  font-size: 16px;
-}
 body .p-terminal {
  background-color: #ffffff;
  color: #333333;
@ -4013,7 +3990,6 @@ body .p-terminal {
 body .p-terminal .p-terminal-input {
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
 }
 body .p-terminal .p-terminal-command {
  height: 16px;
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@ -3133,7 +3133,8 @@ body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close
 }

 body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: #000000;
+  opacity: 0.4;
 }
 body .p-overlaypanel {
  background-color: #ffffff;
@ -3980,29 +3981,6 @@ body .p-progressbar .p-progressbar-label {
  color: #333333;
  line-height: 24px;
 }
-body .p-galleria .p-galleria-nav-prev,
-body .p-galleria .p-galleria-nav-next {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  position: absolute;
-  color: #848484;
-}
-body .p-galleria .p-galleria-nav-prev:hover,
-body .p-galleria .p-galleria-nav-next:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-galleria .p-galleria-nav-prev {
-  font-size: 16px;
-}
-body .p-galleria .p-galleria-nav-next {
-  font-size: 16px;
-}
 body .p-terminal {
  background-color: #ffffff;
  color: #333333;
@ -4012,7 +3990,6 @@ body .p-terminal {
 body .p-terminal .p-terminal-input {
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
 }
 body .p-terminal .p-terminal-command {
  height: 16px;
@ -4045,5 +4022,8 @@ body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
  display: inline-block;
  width: calc(100% - 2.357em);
 }
+body .p-blockui {
+  transition-duration: 0.2s;
+}

 /* Add your customizations of theme here */
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@ -3133,7 +3133,8 @@ body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close
 }

 body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: #000000;
+  opacity: 0.4;
 }
 body .p-overlaypanel {
  background-color: #ffffff;
@ -3980,29 +3981,6 @@ body .p-progressbar .p-progressbar-label {
  color: #666666;
  line-height: 1.714em;
 }
-body .p-galleria .p-galleria-nav-prev,
-body .p-galleria .p-galleria-nav-next {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  position: absolute;
-  color: #a6a6a6;
-}
-body .p-galleria .p-galleria-nav-prev:hover,
-body .p-galleria .p-galleria-nav-next:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-galleria .p-galleria-nav-prev {
-  font-size: 16px;
-}
-body .p-galleria .p-galleria-nav-next {
-  font-size: 16px;
-}
 body .p-terminal {
  background-color: #ffffff;
  color: #666666;
@ -4012,7 +3990,6 @@ body .p-terminal {
 body .p-terminal .p-terminal-input {
  font-size: 14px;
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
 }
 body .p-terminal .p-terminal-command {
  height: 16px;
@ -4045,5 +4022,8 @@ body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
  display: inline-block;
  width: calc(100% - 2.357em);
 }
+body .p-blockui {
+  transition-duration: 0.2s;
+}

 /* Add your customizations of theme here */
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@ -140,6 +140,7 @@
                <router-link to="/inplace">Inplace</router-link>
                <router-link to="/progressbar">ProgressBar</router-link>
                <router-link to="/progressspinner">ProgressSpinner</router-link>
+                <router-link to="/terminal">Terminal</router-link>
            </div>
        </div>
    </div>
--- a/src/components/terminal/Terminal.d.ts
+++ b/src/components/terminal/Terminal.d.ts
@ -0,0 +1,6 @@
+import Vue from 'vue';
+
+export declare class Terminal extends Vue {
+    welcomeMessage?: string;
+    prompt?: string;
+}
--- a/src/components/terminal/Terminal.vue
+++ b/src/components/terminal/Terminal.vue
@ -0,0 +1,86 @@
+<template>
+    <div class="p-terminal p-component" @click="onClick">
+        <div v-if="welcomeMessage">{{welcomeMessage}}</div>
+        <div class="p-terminal-content">
+            <div v-for="(command,i) of commands" :key="command.text + '_' + i">
+                <span class="p-terminal-prompt">{{prompt}}</span>
+                <span class="p-terminal-command">{{command.text}}</span>
+                <div class="p-terminal-response">{{command.response}}</div>
+            </div>
+        </div>
+        <div>
+            <span class="p-terminal-prompt">{{prompt}}</span>
+            <input ref="input" type="text" v-model="commandText" class="p-terminal-input" autocomplete="off" @keydown="onKeydown">
+        </div>
+    </div>
+</template>
+
+<script>
+import TerminalService from './TerminalService';
+
+export default {
+    data() {
+        return {
+            commandText: null,
+            commands: []
+        }
+    },
+    mounted () {
+        TerminalService.$on('response', (response) => {
+            this.commands[this.commands.length - 1].response = response;
+        });
+
+        this.$refs.input.focus();
+    },
+    props: {
+        welcomeMessage: {
+            type: String,
+            default: null
+        },
+        prompt: {
+            type: String,
+            default: null
+        }
+    },
+    methods: {
+        onClick() {
+            this.$refs.input.focus();
+        },
+        onKeydown(event) {
+            if (event.keyCode === 13 && this.commandText) {
+                this.commands.push({text: this.commandText});
+                TerminalService.$emit('command', this.commandText);
+                this.commandText = '';
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.p-terminal {
+    height: 18em;
+    overflow: auto;
+    padding: .25em;
+}
+
+.p-terminal-input {
+    border: 0 none;
+    background-color: transparent;
+    color: inherit;
+    padding: 0;
+    margin: 0 0 0 .125em;
+    width: 75%;
+    outline: none;
+    vertical-align: baseline;
+}
+
+.p-terminal-command {
+    margin-left: .125em;
+    -moz-margin-start: .125em;
+}
+
+.p-terminal-input::-ms-clear {
+    display: none;
+}
+</style>
--- a/src/components/terminal/TerminalService.d.ts
+++ b/src/components/terminal/TerminalService.d.ts
@ -0,0 +1,6 @@
+export declare class TerminalService {
+    $on(action: string, fn: any): any;
+    $emit(action: string, params?: any): any;
+    $off(action: string, id: number): void;
+    $subscribed(action: string): boolean;
+}
--- a/src/components/terminal/TerminalService.js
+++ b/src/components/terminal/TerminalService.js
@ -0,0 +1,4 @@
+import Vue from 'vue';
+const TerminalService = new Vue();
+
+export default TerminalService;
--- a/src/components/toast/ToastService.d.ts
+++ b/src/components/toast/ToastService.d.ts
@ -3,13 +3,13 @@ import Vue, { PluginFunction } from 'vue';
 export const install: PluginFunction<{}>;

 interface ToastServiceMethods {
-  add(message: any): any;
-  removeGroup(group: any): void;
-  removeAllGroups(): void;
+    add(message: any): any;
+    removeGroup(group: any): void;
+    removeAllGroups(): void;
 }

 declare module 'vue/types/vue' {
-  interface Vue {
-    $toast: ToastServiceMethods;
-  }
+    interface Vue {
+        $toast: ToastServiceMethods;
+    }
 }
--- a/src/main.js
+++ b/src/main.js
@ -58,6 +58,7 @@ import Steps from './components/steps/Steps';
 import TabMenu from './components/tabmenu/TabMenu';
 import TabView from './components/tabview/TabView';
 import TabPanel from './components/tabpanel/TabPanel';
+import Terminal from './components/terminal/Terminal';
 import Textarea from './components/textarea/Textarea';
 import TieredMenu from './components/tieredmenu/TieredMenu';
 import Tree from './components/tree/Tree';
@ -145,6 +146,7 @@ Vue.component('Steps', Steps);
 Vue.component('TabView', TabView);
 Vue.component('TabPanel', TabPanel);
 Vue.component('TabMenu', TabMenu);
+Vue.component('Terminal', Terminal);
 Vue.component('Textarea', Textarea);
 Vue.component('TieredMenu', TieredMenu);
 Vue.component('Toast', Toast);
--- a/src/router.js
+++ b/src/router.js
@ -490,6 +490,11 @@ export default new Router({
 			name: 'tabview',
 			component: () => import('./views/tabview/TabViewDemo.vue')
        },
+        {
+			path: '/terminal',
+			name: 'terminal',
+			component: () => import('./views/terminal/TerminalDemo.vue')
+        },
        {
 			path: '/tieredmenu',
 			name: 'tieredmenu',
--- a/src/views/terminal/TerminalDemo.vue
+++ b/src/views/terminal/TerminalDemo.vue
@ -0,0 +1,81 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Terminal</h1>
+                <p>Terminal is a text based user interface.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3>Basic</h3>
+            <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 $" />
+
+            <h3>Custom Theme</h3>
+            <Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-terminal" />
+        </div>
+
+        <TerminalDoc />
+    </div>
+</template>
+
+<script>
+import TerminalDoc from './TerminalDoc';
+import TerminalService from '../../components/terminal/TerminalService';
+
+export default {
+    mounted() {
+        TerminalService.$on('command', (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);
+        });
+    },
+    components: {
+        'TerminalDoc': TerminalDoc
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+p {
+    margin-top: 0;
+}
+
+/deep/ .dark-terminal {
+    background-color: #212121;
+    color: #ffffff;
+
+    .p-terminal-command {
+        color: #80CBC4;
+    }
+
+    .p-terminal-prompt {
+        color: #FFD54F;
+    }
+
+    .p-terminal-response {
+        color: #9FA8DA;
+    }
+}
+</style>
--- a/src/views/terminal/TerminalDoc.vue
+++ b/src/views/terminal/TerminalDoc.vue
@ -0,0 +1,191 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import Terminal from 'primevue/terminal';
+import TerminalService from 'primevue/terminalservice';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>Commands are processed using an EventBus implementation called TerminalService.
+                    Import this service into your component and subscribe to commandHandler to process commands by
+                        sending replies to commands with the <i>response</i> event.</p>
+<CodeHighlight>
+&lt;Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" /&gt;
+</CodeHighlight>
+
+<CodeHighlight lang="js">
+import TerminalService from 'primevue/terminalservice';
+
+export default {
+    mounted() {
+        TerminalService.$on('command', (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);
+        });
+    }
+}
+</CodeHighlight>
+
+                <h3>Properties</h3>
+                <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>welcomeMessage</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Initial text to display on terminal.</td>
+                            </tr>
+                            <tr>
+                                <td>prompt</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Prompt text for each command.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                             <tr>
+                                <td>p-terminal</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-terminal-content</td>
+                                <td>Content of terminal.</td>
+                            </tr>
+                            <tr>
+                                <td>p-terminal-prompt</td>
+                                <td>Prompt text.</td>
+                            </tr>
+                             <tr>
+                                <td>p-terminal-response</td>
+                                <td>Command response.</td>
+                            </tr>
+                            <tr>
+                                <td>p-terminal-input</td>
+                                <td>Input element to enter commands.</td>
+                            </tr>
+                        </tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/terminal" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+&lt;h3&gt;Basic&lt;/h3&gt;
+&lt;p&gt;Enter "date" to display the current date, "greet &#123;0&#125;" for a message and "random" to get a random number.&lt;/p&gt;
+&lt;Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" /&gt;
+
+&lt;h3&gt;Custom Theme&lt;/h3&gt;
+&lt;Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-terminal" /&gt;
+</CodeHighlight>
+
+<CodeHighlight lang="js">
+import TerminalService from 'primevue/terminalservice';
+
+export default {
+    mounted() {
+        TerminalService.$on('command', (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);
+        });
+    }
+}
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+p {
+    margin-top: 0;
+}
+
+/deep/ .dark-terminal {
+    background-color: #212121;
+    color: #ffffff;
+
+    .p-terminal-command {
+        color: #80CBC4;
+    }
+
+    .p-terminal-prompt {
+        color: #FFD54F;
+    }
+
+    .p-terminal-response {
+        color: #9FA8DA;
+    }
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
				`@ -0,0 +1 @@`
				`export * from './components/terminal/Terminal';`