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

Refactored Terminal

pull/5677/head
Cagatay Civici 2024-04-08 14:51:39 +03:00
parent 3d3c90c2e5
commit 68960d68c6
3 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/lib/terminal/Terminal.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div :class="cx('root')" @click="onClick" v-bind="ptmi('root')"> <div :class="cx('root')" @click="onClick" v-bind="ptmi('root')">
<div v-if="welcomeMessage" v-bind="ptm('welcomeMessage')">{{ welcomeMessage }}</div> <div v-if="welcomeMessage" :class="cx('welcomeMessage')" v-bind="ptm('welcomeMessage')">{{ welcomeMessage }}</div>
<div :class="cx('content')" v-bind="ptm('content')"> <div :class="cx('commandList')" v-bind="ptm('content')">
<div v-for="(command, i) of commands" :key="command.text + i.toString()" v-bind="ptm('commands')"> <div v-for="(command, i) of commands" :key="command.text + i.toString()" :class="cx('command')" v-bind="ptm('commands')">
<span :class="cx('prompt')" v-bind="ptm('prompt')">{{ prompt }}</span> <span :class="cx('promptLabel')" v-bind="ptm('prompt')">{{ prompt }}</span>
<span :class="cx('command')" v-bind="ptm('command')">{{ command.text }}</span> <span :class="cx('commandValue')" v-bind="ptm('command')">{{ command.text }}</span>
<div :class="cx('response')" aria-live="polite" v-bind="ptm('response')">{{ command.response }}</div> <div :class="cx('commandResponse')" aria-live="polite" v-bind="ptm('response')">{{ command.response }}</div>
</div> </div>
</div> </div>
<div :class="cx('container')" v-bind="ptm('container')"> <div :class="cx('prompt')" v-bind="ptm('container')">
<span :class="cx('prompt')" v-bind="ptm('prompt')">{{ prompt }}</span> <span :class="cx('promptLabel')" v-bind="ptm('prompt')">{{ prompt }}</span>
<input ref="input" v-model="commandText" type="text" :class="cx('commandText')" autocomplete="off" @keydown="onKeydown" v-bind="ptm('commandText')" /> <input ref="input" v-model="commandText" :class="cx('promptValue')" type="text" autocomplete="off" @keydown="onKeydown" v-bind="ptm('commandText')" />
</div> </div>
</div> </div>
</template> </template>

12
components/lib/terminal/style/TerminalStyle.js
View File

@ -2,12 +2,14 @@ import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: 'p-terminal p-component', root: 'p-terminal p-component',
content: 'p-terminal-commands-container', welcomeMessage: 'p-terminal-welcome-message',
commandList: 'p-terminal-command-list',
command: 'p-terminal-command',
commandValue: 'p-terminal-command-value',
commandResponse: 'p-terminal-command-response',
prompt: 'p-terminal-prompt', prompt: 'p-terminal-prompt',
command: 'p-terminal-command-value', promptLabel: 'p-terminal-prompt-label',
response: 'p-terminal-command-response', promptValue: 'p-terminal-prompt-value'
container: 'p-terminal-prompt-container',
commandText: 'p-terminal-input'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

6
components/lib/themes/primeone/base/terminal/index.js
View File

@ -10,12 +10,12 @@ export default {
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
} }
.p-terminal-prompt-container { .p-terminal-prompt {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.p-terminal-input { .p-terminal-prompt-value {
flex: 1 1 auto; flex: 1 1 auto;
border: 0 none; border: 0 none;
background-color: transparent; background-color: transparent;
@ -27,7 +27,7 @@ export default {
font-size: 1rem; font-size: 1rem;
} }
.p-terminal-prompt { .p-terminal-prompt-label {
margin-right: 0.25rem; margin-right: 0.25rem;
} }