85 lines
2.0 KiB
Vue
85 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<DocSectionText v-bind="$attrs">
|
||
|
|
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
|
||
|
|
</DocSectionText>
|
||
|
|
<DocSectionCode :code="code" embedded />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
code: {
|
||
|
|
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>`
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|