2022-09-09 20:41:18 +00:00
|
|
|
<template>
|
|
|
|
|
<div>
|
2022-12-19 11:57:07 +00:00
|
|
|
<Head>
|
|
|
|
|
<Title>Vue Terminal Component</Title>
|
|
|
|
|
<Meta name="description" content="Terminal is a text based user interface." />
|
|
|
|
|
</Head>
|
|
|
|
|
|
2022-09-09 20:41:18 +00:00
|
|
|
<div class="content-section introduction">
|
|
|
|
|
<div class="feature-intro">
|
|
|
|
|
<h1>Terminal</h1>
|
|
|
|
|
<p>Terminal is a text based user interface.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<AppDemoActions />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="content-section implementation">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
|
2022-12-08 12:26:57 +00:00
|
|
|
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<TerminalDoc />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import TerminalService from 'primevue/terminalservice';
|
2022-12-08 12:26:57 +00:00
|
|
|
import TerminalDoc from './TerminalDoc';
|
2022-09-09 20:41:18 +00:00
|
|
|
|
|
|
|
|
export default {
|
2022-12-08 12:26:57 +00:00
|
|
|
mounted() {
|
|
|
|
|
TerminalService.on('command', this.commandHandler);
|
|
|
|
|
},
|
|
|
|
|
beforeUnmount() {
|
|
|
|
|
TerminalService.off('command', this.commandHandler);
|
|
|
|
|
},
|
2022-09-09 20:41:18 +00:00
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
TerminalDoc: TerminalDoc
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
p {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep(.dark-demo-terminal) {
|
|
|
|
|
background-color: #212121;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
|
|
.p-terminal-command {
|
|
|
|
|
color: #80cbc4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.p-terminal-prompt {
|
|
|
|
|
color: #ffd54f;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.p-terminal-response {
|
|
|
|
|
color: #9fa8da;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
