Refactor #3965 - For Terminal

components/lib/terminal/BaseTerminal.vue

@@ -0,0 +1,67 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-terminal {
+    height: 18rem;
+    overflow: auto;
+}
+
+.p-terminal-prompt-container {
+    display: flex;
+    align-items: center;
+}
+
+.p-terminal-input {
+    flex: 1 1 auto;
+    border: 0 none;
+    background-color: transparent;
+    color: inherit;
+    padding: 0;
+    outline: 0 none;
+}
+
+.p-terminal-input::-ms-clear {
+    display: none;
+}
+`;
+
+const classes = {
+    root: 'p-terminal p-component',
+    content: 'p-terminal-content',
+    prompt: 'p-terminal-prompt',
+    command: 'p-terminal-command',
+    response: 'p-terminal-response',
+    container: 'p-terminal-prompt-container',
+    commandText: 'p-terminal-input'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_terminal_style', manual: true });
+
+export default {
+    name: 'BaseTerminal',
+    extends: BaseComponent,
+    props: {
+        welcomeMessage: {
+            type: String,
+            default: null
+        },
+        prompt: {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>

components/lib/terminal/Terminal.d.ts

@@ -100,6 +100,11 @@ export interface TerminalProps {
      * @type {TerminalPassThroughOptions}
      */
     pt?: TerminalPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/terminal/Terminal.vue

@@ -1,37 +1,27 @@
 <template>
-    <div class="p-terminal p-component" @click="onClick" v-bind="ptm('root')">
+    <div :class="cx('root')" @click="onClick" v-bind="ptm('root')">
         <div v-if="welcomeMessage" v-bind="ptm('welcomeMessage')">{{ welcomeMessage }}</div>
-        <div class="p-terminal-content" v-bind="ptm('content')">
+        <div :class="cx('content')" v-bind="ptm('content')">
             <div v-for="(command, i) of commands" :key="command.text + i.toString()" v-bind="ptm('commands')">
-                <span class="p-terminal-prompt" v-bind="ptm('prompt')">{{ prompt }}</span>
-                <span class="p-terminal-command" v-bind="ptm('command')">{{ command.text }}</span>
-                <div class="p-terminal-response" aria-live="polite" v-bind="ptm('response')">{{ command.response }}</div>
+                <span :class="cx('prompt')" v-bind="ptm('prompt')">{{ prompt }}</span>
+                <span :class="cx('command')" v-bind="ptm('command')">{{ command.text }}</span>
+                <div :class="cx('response')" aria-live="polite" v-bind="ptm('response')">{{ command.response }}</div>
             </div>
         </div>
-        <div class="p-terminal-prompt-container" v-bind="ptm('container')">
-            <span class="p-terminal-prompt" v-bind="ptm('prompt')">{{ prompt }}</span>
-            <input ref="input" v-model="commandText" type="text" class="p-terminal-input" autocomplete="off" @keydown="onKeydown" v-bind="ptm('commandText')" />
+        <div :class="cx('container')" v-bind="ptm('container')">
+            <span :class="cx('prompt')" v-bind="ptm('prompt')">{{ prompt }}</span>
+            <input ref="input" v-model="commandText" type="text" :class="cx('commandText')" autocomplete="off" @keydown="onKeydown" v-bind="ptm('commandText')" />
         </div>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseTerminal from './BaseTerminal.vue';
 import TerminalService from 'primevue/terminalservice';
 
 export default {
     name: 'Terminal',
-    extends: BaseComponent,
-    props: {
-        welcomeMessage: {
-            type: String,
-            default: null
-        },
-        prompt: {
-            type: String,
-            default: null
-        }
-    },
+    extends: BaseTerminal,
     data() {
         return {
             commandText: null,
@@ -65,28 +55,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-terminal {
-    height: 18rem;
-    overflow: auto;
-}
-
-.p-terminal-prompt-container {
-    display: flex;
-    align-items: center;
-}
-
-.p-terminal-input {
-    flex: 1 1 auto;
-    border: 0 none;
-    background-color: transparent;
-    color: inherit;
-    padding: 0;
-    outline: 0 none;
-}
-
-.p-terminal-input::-ms-clear {
-    display: none;
-}
-</style>