63 lines
1.7 KiB
Vue
63 lines
1.7 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 class="card">
|
|
<p class="text-gray-700 dark:text-white/80">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>`
|
|
}
|
|
};
|
|
}
|
|
};
|
|
</script>
|