@@ -31,7 +31,7 @@ Let's start with a dead simple example. We want to send "Hello world" to
31
31
</template>
32
32
33
33
<script>
34
- import VueCommand, { createStdout } from "vue-command";
34
+ import VueCommand, { createStdout, textFormatter } from "vue-command";
35
35
import "vue-command/dist/vue-command.css";
36
36
37
37
export default {
@@ -41,7 +41,7 @@ export default {
41
41
42
42
data: () => ({
43
43
commands: {
44
- "hello-world": () => createStdout("Hello world"),
44
+ "hello-world": () => createStdout(textFormatter( "Hello world") ),
45
45
},
46
46
}),
47
47
};
@@ -54,8 +54,8 @@ in many shells.
54
54
We inject ` terminal ` to make sure the editor is only visible when the terminal
55
55
is in fullscreen mode and also a function called ` exit ` to tell the terminal
56
56
that the command has been finished when the user enters
57
- <kbd >Ctrl</kbd > + <kbd >x</kbd >. Furthermore, we use ` setFullscreen ` to switch
58
- the terminal into fullscreen mode.
57
+ <kbd >Ctrl</kbd > + <kbd >x</kbd >. Furthermore, we use ` setFullscreen ` to
58
+ switch the terminal into fullscreen mode.
59
59
60
60
``` vue
61
61
<template>
@@ -81,6 +81,7 @@ export default {
81
81
</script>
82
82
83
83
<style scoped>
84
+ div,
84
85
textarea {
85
86
height: 100%;
86
87
}
@@ -124,8 +125,9 @@ required.
124
125
| ` cursor-position ` | Cursor position | ` Number ` | ` 0 ` | No | Yes |
125
126
| ` dispatched-queries ` | Non-empty dispatched queries, successful or not | ` Set ` | ` new Set() ` | No | Yes |
126
127
| ` event-resolver ` | See [ Event resolver] ( #Event-resolver ) section | ` Function ` | See ` newDefaultEventResolver ` | No | No |
127
- | ` help-text ` | Query help | ` String ` | ` '' ` | No | Yes |
128
- | ` help-timeout ` | Query help timeout | ` Number ` | ` 3500 ` | No | No |
128
+ | ` help-text ` | Command help | ` String ` | ` '' ` | No | Yes |
129
+ | ` help-timeout ` | Command help timeout | ` Number ` | ` 3000 ` | No | No |
130
+ | ` hide-bar ` | Hides the bar | ` Boolean ` | ` false ` | No | No |
129
131
| ` hide-prompt ` | Hides the prompt | ` Boolean ` | ` false ` | No | No |
130
132
| ` history ` | Terminal history | ` Array ` | ` [] ` | No | Yes |
131
133
| ` history-position ` | Points to the latest dispatched query entry | ` Number ` | ` 0 ` | No | Yes |
@@ -174,27 +176,50 @@ the whole element, including the action buttons and its assigned CSS classes.
174
176
175
177
## Library
176
178
179
+ Library provides helper methods to render terminal related content.
180
+
177
181
| Function | Parameters | Description |
178
182
| ----------------------------- | ------------------------------------------------------------------ | ------------------------------------- |
179
183
| ` createCommandNotFound ` | ` command, text = 'command not found', name = 'VueCommandNotFound' ` | Creates a command not found component |
180
184
| ` createStdout ` | ` text, name = 'VueCommandStdout', innerHTML = false ` | Creates a "stdout" component |
181
185
| ` createQuery ` | | Creates a query component |
182
186
| ` defaultHistoryEventResolver ` | ` refs, eventProvider ` | Returns the default history resolver |
183
187
| ` defaultParser ` | ` query ` | Returns the default parser |
188
+ | ` listFormatter ` | ` ...lis ` | See [ Formatters] ( #formatters ) |
184
189
| ` newDefaultEventResolver ` | | Returns a new default event resolver |
185
190
| ` newDefaultHistory ` | | Returns a new default history |
191
+ | ` tableFormatter ` | ` rows ` | See [ Formatters] ( #formatters ) |
192
+ | ` textFormatter ` | ` text, innerHtml = false ` | See [ Formatters] ( #formatters ) |
186
193
187
194
Helper methods can be imported by name:
188
195
189
196
``` js
190
197
import { createStdout , createQuery } from " vue-command" ;
191
198
```
192
199
200
+ ### Formatters
201
+
202
+ ` createStdout ` requires a formatter as the first argument to format the content
203
+ as a list or table or something else.
204
+
205
+ | Formatters |
206
+ | ---------------- |
207
+ | ` listFormatter ` |
208
+ | ` tableFormatter ` |
209
+ | ` textFormatter ` |
210
+
211
+ Formatters can be imported by name:
212
+
213
+ ``` js
214
+ import { listFormatter } from " vue-command" ;
215
+ ```
216
+
193
217
## Provided
194
218
195
219
| Provided |
196
220
| -------------------- |
197
221
| ` addDispatchedQuery ` |
222
+ | ` appendToHistory ` |
198
223
| ` dispatch ` |
199
224
| ` decrementHistory ` |
200
225
| ` exit ` |
@@ -223,6 +248,7 @@ inject: ["exit", "terminal"],
223
248
| Exposed |
224
249
| -------------------- |
225
250
| ` addDispatchedQuery ` |
251
+ | ` appendToHistory ` |
226
252
| ` decrementHistory ` |
227
253
| ` dispatch ` |
228
254
| ` exit ` |
0 commit comments