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> </DocSectionText>
<div class="card"> <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> <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> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -20,13 +30,33 @@ export default {
return { return {
code: { code: {
basic: ` 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: ` options: `
<template> <template>
<div> <div>
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p> <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> </div>
</template> </template>
@ -68,33 +98,22 @@ export default {
} }
} }
<\/script> <\/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: ` composition: `
<template> <template>
<div> <div>
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p> <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> </div>
</template> </template>
@ -135,28 +154,7 @@ const commandHandler = (text) => {
TerminalService.emit('response', response); TerminalService.emit('response', response);
} }
<\/script> <\/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> </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>