Skip to content

Commit d8f6de7

Browse files
ndabAPndabAP
committed
feat: add new slots
1 parent b49d6db commit d8f6de7

File tree

3 files changed

+103
-32
lines changed

3 files changed

+103
-32
lines changed

‎README.md‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ required.
131131
| `help-timeout` | Command help timeout | `Number` | `3000` | No | No |
132132
| `hide-bar` | Hides the bar | `Boolean` | `false` | No | No |
133133
| `hide-prompt` | Hides the prompt | `Boolean` | `false` | No | No |
134+
| `hide-title` | Hides the title | `Boolean` | `false` | No | No |
134135
| `history` | Terminal history | `Array` | `[]` | No | Yes |
135136
| `history-position` | Points to the latest dispatched query entry | `Number` | `0` | No | Yes |
136137
| `invert` | Inverts the terminals colors | `Boolean` | `false` | No | No |
@@ -168,12 +169,40 @@ query and a setter to update the query.
168169

169170
### Bar
170171

171-
You can customize the terminals bar with the named slot `bar`. This will replace
172-
the whole element, including the action buttons and its assigned CSS classes.
172+
You can replace the whole terminal bar with the named slot `bar`. This will
173+
replace the whole element, including the action buttons and its assigned CSS
174+
classes. Example:
173175

174176
```vue
175-
<vue-command :commands="commands">
176-
<template #bar>&times; &#95; &square;</template>
177+
<vue-command>
178+
<template #bar>
179+
&times; &#95; &square;
180+
</template>
181+
</vue-command>
182+
```
183+
184+
### Buttons
185+
186+
Inside the bar, you can customize the buttons. Example:
187+
188+
```vue
189+
<vue-command>
190+
<template #buttons>
191+
&times; &#95; &square;
192+
</template>
193+
</vue-command>
194+
```
195+
196+
### Title
197+
198+
Inside the bar, you can customize the title. If you use this slot, `hideTitle`
199+
property has no effect. Example:
200+
201+
```vue
202+
<vue-command>
203+
<template #title>
204+
~ 350x720
205+
</template>
177206
</vue-command>
178207
```
179208

‎src/components/VueCommand.vue‎

Lines changed: 61 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,45 @@
1212
'vue-command__bar': !invert,
1313
'vue-command__bar--invert': invert
1414
}">
15-
<span
16-
:class="{
17-
'vue-command__bar__button': !invert,
18-
'vue-command__bar__button--invert': invert,
19-
'vue-command__bar__button--fullscreen': !invert,
20-
'vue-command__bar__button--fullscreen--invert': invert
21-
}"
22-
@click="emits('closeClicked')" />
23-
<span
24-
:class="{
25-
'vue-command__bar__button': !invert,
26-
'vue-command__bar__button--invert': invert,
27-
'vue-command__bar__button--minimize': !invert,
28-
'vue-command__bar__button--minimize--invert': invert
29-
}"
30-
@click="emits('minimizeClicked')" />
31-
<span
32-
:class="{
33-
'vue-command__bar__button': !invert,
34-
'vue-command__bar__button--invert': invert,
35-
'vue-command__bar__button--close': !invert,
36-
'vue-command__bar__button--close--invert': invert
37-
}"
38-
@click="emits('fullscreenClicked')" />
15+
<div>
16+
<slot name="buttons">
17+
<span
18+
:class="{
19+
'vue-command__bar__button': !invert,
20+
'vue-command__bar__button--invert': invert,
21+
'vue-command__bar__button--fullscreen': !invert,
22+
'vue-command__bar__button--fullscreen--invert': invert
23+
}"
24+
@click="emits('closeClicked')" />
25+
<span
26+
:class="{
27+
'vue-command__bar__button': !invert,
28+
'vue-command__bar__button--invert': invert,
29+
'vue-command__bar__button--minimize': !invert,
30+
'vue-command__bar__button--minimize--invert': invert
31+
}"
32+
@click="emits('minimizeClicked')" />
33+
<span
34+
:class="{
35+
'vue-command__bar__button': !invert,
36+
'vue-command__bar__button--invert': invert,
37+
'vue-command__bar__button--close': !invert,
38+
'vue-command__bar__button--close--invert': invert
39+
}"
40+
@click="emits('fullscreenClicked')" />
41+
</slot>
42+
</div>
43+
<div>
44+
<slot name="title">
45+
<span
46+
v-if="!hideTitle"
47+
:class="{
48+
'vue-command__bar__title': !invert,
49+
'vue-command__bar__title--invert': invert
50+
}">{{ prompt }}</span>
51+
</slot>
52+
</div>
53+
<div />
3954
</div>
4055
</slot>
4156

@@ -159,6 +174,12 @@ const props = defineProps({
159174
type: Boolean
160175
},
161176
177+
hideTitle: {
178+
default: false,
179+
required: false,
180+
type: Boolean
181+
},
182+
162183
history: {
163184
default: () => newDefaultHistory(),
164185
required: false,
@@ -506,6 +527,8 @@ defineExpose({
506527
</script>
507528

508529
<style lang="scss">
530+
/** Common attribues */
531+
509532
.vue-command,
510533
.vue-command--invert {
511534
font-family: Consolas,
@@ -518,7 +541,6 @@ defineExpose({
518541
519542
&:before,
520543
&:after {
521-
content: " ";
522544
display: table;
523545
}
524546
@@ -538,6 +560,9 @@ defineExpose({
538560
padding-right: 10px;
539561
padding-top: 10px;
540562
padding-bottom: 10px;
563+
display: flex;
564+
justify-content: space-between;
565+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
541566
}
542567
543568
.vue-command__bar__button,
@@ -593,13 +618,20 @@ defineExpose({
593618
}
594619
}
595620
621+
/** Individual attribues */
622+
596623
.vue-command {
597624
$seashell: #f1f1f1;
598625
599626
.vue-command__bar {
627+
color: $seashell;
600628
background-color: #111316;
601629
}
602630
631+
.vue-command__bar__title {
632+
color: $seashell;
633+
}
634+
603635
.vue-command__bar__button--close {
604636
background-color: #ff5f58;
605637
}
@@ -636,6 +668,10 @@ defineExpose({
636668
background-color: #eeece9;
637669
}
638670
671+
.vue-command__bar__title--invert {
672+
color: $seashell-invert;
673+
}
674+
639675
.vue-command__bar__button--close--invert {
640676
background-color: #00a0a7;
641677
}

‎src/hosted/App.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,16 @@
2121
:commands="commands"
2222
:hide-bar="hideBar"
2323
:hide-prompt="hidePrompt"
24+
:hide-title="hideTitle"
2425
:invert="invert"
2526
:prompt="prompt"
2627
:options-resolver="optionsResolver"
2728
help-text="Type in help"
28-
show-help />
29+
show-help>
30+
<template #title>
31+
~ 720x350
32+
</template>
33+
</vue-command>
2934
</div>
3035
</div>
3136

@@ -47,8 +52,7 @@ import {
4752
createQuery,
4853
listFormatter,
4954
newDefaultHistory,
50-
tableFormatter,
51-
jsonFormatter
55+
tableFormatter
5256
} from '@/library'
5357
import NanoEditor from '@/hosted/NanoEditor.vue'
5458
import ChuckNorris from '@/hosted/ChuckNorris.vue'
@@ -64,6 +68,7 @@ export default {
6468
const dispatchedQueries = ref(new Set())
6569
const hideBar = ref(false)
6670
const hidePrompt = ref(false)
71+
const hideTitle = ref(false)
6772
const history = ref(newDefaultHistory())
6873
const invert = ref(false)
6974
const prompt = ref(PROMPT)
@@ -135,6 +140,7 @@ export default {
135140
dispatchedQueries,
136141
hideBar,
137142
hidePrompt,
143+
hideTitle,
138144
history,
139145
invert,
140146
prompt,

0 commit comments

Comments
 (0)