Skip to content

Commit 937dbc1

Browse files
ndabAPndabAP
committed
feat: invert
1 parent 288dcb8 commit 937dbc1

File tree

3 files changed

+211
-61
lines changed

3 files changed

+211
-61
lines changed

‎src/components/VueCommand.vue‎

Lines changed: 128 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,70 @@
11
<template>
22
<div
33
ref="vueCommandRef"
4-
class="vue-command">
4+
:class="{
5+
'vue-command': !invert,
6+
'vue-command--invert': invert
7+
}">
58
<slot name="bar">
69
<div
710
v-if="!hideBar"
8-
class="vue-command__bar">
11+
:class="{
12+
'vue-command__bar': !invert,
13+
'vue-command__bar--invert': invert
14+
}">
915
<!-- TODO Emit unique event per button -->
10-
<span class="vue-command__bar__button vue-command__bar__button--close"></span>
11-
<span class="vue-command__bar__button vue-command__bar__button--minimize"></span>
12-
<span class="vue-command__bar__button vue-command__bar__button--fullscreen"></span>
16+
<span
17+
:class="{
18+
'vue-command__bar__button': !invert,
19+
'vue-command__bar__button--invert': invert,
20+
'vue-command__bar__button--close': !invert,
21+
'vue-command__bar__button--close--invert': invert
22+
}">
23+
</span>
24+
<span
25+
:class="{
26+
'vue-command__bar__button': !invert,
27+
'vue-command__bar__button--invert': invert,
28+
'vue-command__bar__button--minimize': !invert,
29+
'vue-command__bar__button--minimize--invert': invert
30+
}">
31+
</span>
32+
<span
33+
:class="{
34+
'vue-command__bar__button': !invert,
35+
'vue-command__bar__button--invert': invert,
36+
'vue-command__bar__button--fullscreen': !invert,
37+
'vue-command__bar__button--fullscreen--invert': invert
38+
}">
39+
</span>
1340
</div>
1441
</slot>
1542

1643
<div
1744
ref="vueCommandHistoryRef"
18-
class="vue-command__history"
45+
:class="{
46+
'vue-command__history': !invert,
47+
'vue-command__history--invert': invert
48+
}"
1949
@click="autoFocus">
2050
<div
2151
v-for="(component, index) in local.history"
2252
v-show="shouldShowHistoryEntry(index)"
2353
:key="index"
2454
:class="{
25-
'vue-command__history__entry': true,
26-
'vue-command__history__entry--fullscreen': shouldBeFullscreen(index)
55+
'vue-command__history__entry': !invert,
56+
'vue-command__history__entry--invert': invert,
57+
'vue-command__history__entry--fullscreen': shouldBeFullscreen(index),
58+
'vue-command__history__entry--fullscreen--invert': invert && shouldBeFullscreen(index)
2759
}">
2860
<!-- User given components like bash and query -->
2961
<component
3062
:is="component"
3163
ref="vueCommandHistoryEntryComponentRefs"
32-
class="vue-command__history__entry__component" />
64+
:class="{
65+
'vue-command__history__entry__component': !invert,
66+
'vue-command__history__entry__component--invert': invert
67+
}" />
3368
</div>
3469
</div>
3570
</div>
@@ -134,6 +169,12 @@ const props = defineProps({
134169
type: Number
135170
},
136171
172+
invert: {
173+
default: false,
174+
required: false,
175+
type: Boolean
176+
},
177+
137178
isFullscreen: {
138179
default: false,
139180
required: false,
@@ -205,6 +246,7 @@ const terminal = computed(() => ({
205246
dispatchedQueries: local.dispatchedQueries,
206247
history: local.history,
207248
historyPosition: local.historyPosition,
249+
invert: props.invert,
208250
isFullscreen: local.isFullscreen,
209251
prompt: local.prompt,
210252
query: local.query
@@ -429,6 +471,7 @@ provide('helpText', props.helpText)
429471
provide('helpTimeout', props.helpTimeout)
430472
provide('hidePrompt', props.hidePrompt)
431473
provide('incrementHistory', incrementHistory)
474+
provide('invert', props.invert)
432475
provide('optionsResolver', props.optionsResolver)
433476
provide('parser', props.parser)
434477
provide('programs', programs)
@@ -456,8 +499,8 @@ defineExpose({
456499
</script>
457500

458501
<style lang="scss">
459-
.vue-command {
460-
$seashell: #f1f1f1;
502+
.vue-command,
503+
.vue-command--invert {
461504
462505
@mixin clearfix() {
463506
@@ -475,17 +518,18 @@ defineExpose({
475518
overflow-y: hidden;
476519
overflow-x: hidden;
477520
478-
.vue-command__bar {
521+
.vue-command__bar,
522+
.vue-command__bar--invert {
479523
@include clearfix();
480524
position: inherit;
481525
padding-left: 10px;
482526
padding-right: 10px;
483527
padding-top: 10px;
484528
padding-bottom: 10px;
485-
background-color: #111316;
486529
}
487530
488-
.vue-command__bar__button {
531+
.vue-command__bar__button,
532+
.vue-command__bar__button--invert {
489533
display: inline-block;
490534
border-radius: 100%;
491535
@@ -501,31 +545,17 @@ defineExpose({
501545
}
502546
}
503547
504-
.vue-command__bar__button--close {
505-
background-color: #ff5f58;
506-
}
507-
508-
.vue-command__bar__button--minimize {
509-
background-color: #ffbd2e;
510-
}
511-
512-
.vue-command__bar__button--fullscreen {
513-
background-color: #29ca41;
514-
}
515-
548+
.vue-command__history--invert,
516549
.vue-command__history {
517550
overflow: auto;
518551
word-break: break-all;
519-
background-color: #111316;
520552
display: block;
521553
padding: 12px 12px 12px 12px;
522554
margin: 0;
523555
white-space: pre-line;
524556
line-height: 1.33;
525-
color: $seashell;
526557
font-size: 1rem;
527558
font-family: monospace;
528-
color: #ffffff;
529559
height: 100%;
530560
531561
/* Provide reasonable default values */
@@ -545,16 +575,83 @@ defineExpose({
545575
font-size: 1rem;
546576
resize: none;
547577
overflow: hidden;
578+
}
579+
}
580+
581+
.vue-command__history__entry--fullscreen {
582+
height: 100%;
583+
}
584+
}
585+
586+
.vue-command {
587+
$seashell: #f1f1f1;
588+
589+
.vue-command__bar {
590+
background-color: #111316;
591+
}
592+
593+
.vue-command__bar__button--close {
594+
background-color: #ff5f58;
595+
}
596+
597+
.vue-command__bar__button--minimize {
598+
background-color: #ffbd2e;
599+
}
600+
601+
.vue-command__bar__button--fullscreen {
602+
background-color: #29ca41;
603+
}
604+
605+
.vue-command__history {
606+
background-color: #111316;
607+
color: $seashell;
608+
609+
/* Provide reasonable default values */
610+
input,
611+
textarea {
612+
background: none;
548613
color: #ffffff;
549614
550615
&::placeholder {
551616
color: rgba(255, 255, 255, 0.5);
552617
}
553618
}
554619
}
620+
}
621+
622+
.vue-command--invert {
623+
$seashell-invert: #0e0e0e;
624+
625+
.vue-command__bar--invert {
626+
background-color: #eeece9;
627+
}
555628
556-
.vue-command__history__entry--fullscreen {
557-
height: 100%;
629+
.vue-command__bar__button--close--invert {
630+
background-color: #00a0a7;
631+
}
632+
633+
.vue-command__bar__button--minimize--invert {
634+
background-color: #0042d1;
635+
}
636+
637+
.vue-command__bar__button--fullscreen--invert {
638+
background-color: #d635be;
639+
}
640+
641+
.vue-command__history--invert {
642+
background-color: #eeece9;
643+
color: $seashell-invert;
644+
645+
/* Provide reasonable default values */
646+
input,
647+
textarea {
648+
background: none;
649+
color: #000000;
650+
651+
&::placeholder {
652+
color: rgba(0, 0, 0, 0.5);
653+
}
654+
}
558655
}
559656
}
560657
</style>

‎src/components/VueCommandQuery.vue‎

Lines changed: 53 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
<template>
2-
<div class="vue-command__query">
2+
<div
3+
:class="{
4+
'vue-command__query': !invert,
5+
'vue-command__query--invert': invert
6+
}">
37
<span
48
v-if="!hidePrompt"
5-
class="vue-command__query__prompt">
9+
:class="{
10+
'vue-command__query__prompt': !invert,
11+
'vue-command__query__prompt--invert': invert
12+
}">
613
{{ prompt }}
714
</span>
815

@@ -11,7 +18,10 @@
1118
<input
1219
ref="queryRef"
1320
v-model="query"
14-
class="vue-command__query__input"
21+
:class="{
22+
'vue-command__query__input': !invert,
23+
'vue-command__query__input--invert': invert
24+
}"
1525
:disabled="isOutdated"
1626
:placeholder="placeholder"
1727
autocapitalize="none"
@@ -54,6 +64,7 @@ import size from 'lodash.size'
5464
const appendToHistory = inject('appendToHistory')
5565
const dispatch = inject('dispatch')
5666
const hidePrompt = inject('hidePrompt')
67+
const invert = inject('invert')
5768
const optionsResolver = inject('optionsResolver')
5869
const parser = inject('parser')
5970
const programs = inject('programs')
@@ -210,27 +221,51 @@ defineExpose({
210221
</script>
211222

212223
<style lang="scss">
213-
.vue-command {
214-
.vue-command__query {
224+
.vue-command,
225+
.vue-command--invert {
226+
227+
.vue-command__query,
228+
.vue-command__query--invert {
215229
display: flex;
230+
231+
.vue-command__query__input,
232+
.vue-command__query__input--invert {
233+
border: none;
234+
outline: none;
235+
flex: 1;
236+
width: 100%;
237+
font-family: monospace;
238+
font-size: 1rem;
239+
}
240+
241+
.vue-command__query__prompt,
242+
.vue-command__query__prompt--invert {
243+
margin-right: 0.25rem;
244+
}
216245
}
246+
}
217247
218-
.vue-command__query__input {
219-
background: none;
220-
border: none;
221-
outline: none;
222-
flex: 1;
223-
width: 100%;
224-
font-family: monospace;
225-
font-size: 1rem;
226-
227-
&::placeholder {
228-
color: rgba(255, 255, 255, 0.5);
248+
.vue-command {
249+
.vue-command__query {
250+
.vue-command__query__input {
251+
background: none;
252+
253+
&::placeholder {
254+
color: rgba(255, 255, 255, 0.5);
255+
}
229256
}
230257
}
258+
}
259+
260+
.vue-command--invert {
261+
.vue-command__query--invert {
262+
.vue-command__query__input--invert {
263+
background: none;
231264
232-
.vue-command__query__prompt {
233-
margin-right: 0.25rem;
265+
&::placeholder {
266+
color: rgba(0, 0, 0, 0.5);
267+
}
268+
}
234269
}
235270
}
236271
</style>

0 commit comments

Comments
 (0)