vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update terminal demo visuals

pull/4683/head
Cagatay Civici 2023-10-24 00:19:52 +03:00
parent c514b31652
commit 3a0ee41915
1 changed files with 45 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
doc/terminal/BasicDoc.vue
View File

@ -7,7 +7,17 @@
</DocSectionText>
<div class="card">
<p>Enter "<strong>date</strong>" to display the current date, "<strong>greet {0}</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
<Terminal
welcomeMessage="Welcome to PrimeVue"
prompt="primevue $"
aria-label="PrimeVue Terminal Service"
:pt="{
root: 'bg-gray-900 text-white border-round',
prompt: 'text-gray-400 mr-2',
command: 'text-primary-300',
response: 'text-primary-300'
}"
/>
</div>
<DocSectionCode :code="code" />
</template>
@ -20,13 +30,33 @@ export default {
return {
code: {
basic: `
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" />
<Terminal
welcomeMessage="Welcome to PrimeVue"
prompt="primevue $"
aria-label="PrimeVue Terminal Service"
:pt="{
root: 'bg-gray-900 text-white border-round',
prompt: 'text-gray-400 mr-2',
command: 'text-primary-300',
response: 'text-primary-300'
}"
/>
`,
options: `
<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" />
<Terminal
welcomeMessage="Welcome to PrimeVue"
prompt="primevue $"
aria-label="PrimeVue Terminal Service"
:pt="{
root: 'bg-gray-900 text-white border-round',
prompt: 'text-gray-400 mr-2',
command: 'text-primary-300',
response: 'text-primary-300'
}"
/>
</div>
</template>
@ -68,33 +98,22 @@ export default {
}
}
<\/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>
`,
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" />
<Terminal
welcomeMessage="Welcome to PrimeVue"
prompt="primevue $"
aria-label="PrimeVue Terminal Service"
:pt="{
root: 'bg-gray-900 text-white border-round',
prompt: 'text-gray-400 mr-2',
command: 'text-primary-300',
response: 'text-primary-300'
}"
/>
</div>
</template>
@ -135,28 +154,7 @@ const commandHandler = (text) => {
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>`
`
}
};
},
@ -194,25 +192,3 @@ p {
}
};
</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>