Skip to content

Commit c1a9ef4

Browse files
ndabAPndabAP
authored
Merge pull request #412 from ndabAP/feat/multiline-queries
support multiline queries
2 parents 70d03b7 + df09dde commit c1a9ef4

29 files changed

+645
-1193
lines changed

‎.eslintrc.js

+2-5
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,24 @@ module.exports = {
1616
rules: {
1717
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
1818
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
19+
quotes: ['error', 'single'],
20+
'no-unused-vars': 'off',
1921

2022
'modules-newline/import-declaration-newline': 'error',
2123

2224
'vue/no-mutating-props': 'off',
23-
'no-unused-vars': 'off',
24-
2525
'vue/html-closing-bracket-newline': ['error', {
2626
singleline: 'never',
2727
multiline: 'never'
2828
}],
29-
3029
'vue/max-attributes-per-line': ['error', {
3130
singleline: 1,
3231
multiline: 1
3332
}],
34-
3533
'vue/attributes-order': 'error',
3634
'vue/order-in-components': 'error',
3735
'vue/html-indent': 'error',
3836
'vue/one-component-per-file': 'off',
39-
quotes: ['error', 'single']
4037
},
4138
overrides: [
4239
{

‎README.md

+90-77
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ A fully working, most feature-rich Vue.js terminal emulator. See the
1111
- Supports fullscreen mode
1212
- Customize the terminal with slots
1313
- Provide your own parser (falls back to simple one)
14-
- Provide your own event resolver
14+
- Provide your own event resolver to support keyboard
15+
- Multiline support with `\`
1516
- Autocompletion resolver (with <kbd>↹</kbd>)
1617
- Browse history (with <kbd>↑</kbd>/<kbd>↓</kbd>)
1718
- Search history (with <kbd>Ctrl</kbd> + <kbd>r</kbd>) (comming soon)
@@ -118,30 +119,30 @@ export default {
118119

119120
## Properties
120121

121-
Some properties can be changed, therefore, adding the `v-model` directive is
122-
required.
123-
124-
| Property | Description | Type | Default value | Required | `v-model` |
125-
| -------------------- | --------------------------------------------- | ---------- | ----------------------------- | -------- | --------- |
126-
| `commands` | See [Commands](#commands) | `Object` | `{}` | No | No |
127-
| `cursor-position` | Cursor position | `Number` | `0` | No | Yes |
128-
| `dispatched-queries` | Non-empty dispatched queries | `Set` | `new Set()` | No | Yes |
129-
| `event-resolver` | See [Event resolver](#Event-resolver) section | `Function` | See `newDefaultEventResolver` | No | No |
130-
| `help-text` | Command help | `String` | `''` | No | Yes |
131-
| `help-timeout` | Command help timeout | `Number` | `3000` | No | No |
132-
| `hide-bar` | Hides the bar | `Boolean` | `false` | No | No |
133-
| `hide-prompt` | Hides the prompt | `Boolean` | `false` | No | No |
134-
| `hide-title` | Hides the title | `Boolean` | `false` | No | No |
135-
| `history` | Terminal history | `Array` | `[]` | No | Yes |
136-
| `history-position` | Points to the latest dispatched query entry | `Number` | `0` | No | Yes |
137-
| `invert` | Inverts the terminals colors | `Boolean` | `false` | No | No |
138-
| `is-fullscreen` | Terminal fullscreen mode | `Boolean` | `false` | No | Yes |
139-
| `options-resolver` | See [Options resolver](#Options-resolver) | `Function` | `null` | No | No |
140-
| `parser` | Query parser | `Function` | See `defaultParser` | No | No |
141-
| `prompt` | Terminal prompt | `String` | `~$` | No | No |
142-
| `show-help` | Show query help | `Boolean` | `false` | No | No |
143-
| `title` | Terminal title | `String` | `~$` | No | No |
144-
| `query` | Terminal query | `String` | `''` | No | Yes |
122+
Some properties can be mutated by the terminal. Therefore, adding the `v-model`
123+
directive is required.
124+
125+
| Property | Description | Type | Default value | Required | Two-way binding |
126+
| -------------------- | ------------------------------------------- | ---------- | ------------------------- | -------- | --------------- |
127+
| `commands` | See [Commands](#commands) | `Object` | `{}` | No | No |
128+
| `cursor-position` | Cursor position | `Number` | `0` | No | Yes |
129+
| `dispatched-queries` | Non-empty dispatched queries | `Set` | `new Set()` | No | Yes |
130+
| `event-resolver` | See [Event resolver](#Event-resolver) | `Function` | `newDefaultEventResolver` | No | No |
131+
| `help-text` | Command help | `String` | `''` | No | Yes |
132+
| `help-timeout` | Command help timeout | `Number` | `3000` | No | No |
133+
| `hide-bar` | Hides the bar | `Boolean` | `false` | No | No |
134+
| `hide-prompt` | Hides the prompt | `Boolean` | `false` | No | No |
135+
| `hide-title` | Hides the title | `Boolean` | `false` | No | No |
136+
| `history` | Terminal history | `Array` | `[]` | No | Yes |
137+
| `history-position` | Points to the latest dispatched query entry | `Number` | `0` | No | Yes |
138+
| `invert` | Inverts the terminals colors | `Boolean` | `false` | No | No |
139+
| `is-fullscreen` | Terminal fullscreen mode | `Boolean` | `false` | No | Yes |
140+
| `options-resolver` | See [Options resolver](#Options-resolver) | `Function` | `null` | No | No |
141+
| `parser` | Query parser | `Function` | `defaultParser` | No | No |
142+
| `prompt` | Terminal prompt | `String` | `~$` | No | No |
143+
| `show-help` | Show query help | `Boolean` | `false` | No | No |
144+
| `title` | Terminal title | `String` | `~$` | No | No |
145+
| `query` | Terminal query | `String` | `''` | No | Yes |
145146

146147
### Commands
147148

@@ -150,6 +151,9 @@ and the value is a function that will be called with the parsed arguments. The
150151
function can return a `Promise` and must return or resolve a Vue.js component.
151152
To return strings or a new query, use one of the convenient helper methods.
152153

154+
Any component that is not the query component can inject the context. The
155+
context includes the parsed and raw query as fields.
156+
153157
### Event resolver
154158

155159
It's possible to provide an array property `eventResolver` which is called when
@@ -197,7 +201,7 @@ Inside the bar, you can customize the buttons. Example:
197201
### Title
198202

199203
Inside the bar, you can customize the title. If you use this slot, `hideTitle`
200-
property has no effect. Example:
204+
and `title` property have no effect. Example:
201205

202206
```vue
203207
<vue-command>
@@ -235,15 +239,15 @@ import { createStdout, createQuery } from "vue-command";
235239
### Formatters
236240

237241
The first argument of `createStdout` can be either a primitive
238-
(`boolean`, `number` or `string`) or a formatter. A formatter formats the
242+
(`Boolean`, `Number` or `String`) or a formatter. A formatter formats the
239243
content as a list or table or something else.
240244

241-
| Formatters |
242-
| ---------------- |
243-
| `jsonFormatter` |
244-
| `listFormatter` |
245-
| `tableFormatter` |
246-
| `textFormatter` |
245+
| Function | Parameters |
246+
| ---------------- | ------------------------- |
247+
| `jsonFormatter` | `value` |
248+
| `listFormatter` | `...lis` |
249+
| `tableFormatter` | `rows` |
250+
| `textFormatter` | `text, innerHtml = false` |
247251

248252
Formatters can be imported by name:
249253

@@ -253,28 +257,29 @@ import { listFormatter } from "vue-command";
253257

254258
## Provided
255259

256-
| Provided |
257-
| -------------------- |
258-
| `addDispatchedQuery` |
259-
| `appendToHistory` |
260-
| `dispatch` |
261-
| `decrementHistory` |
262-
| `exit` |
263-
| `helpText` |
264-
| `helpTimeout` |
265-
| `hidePrompt` |
266-
| `incrementHistory` |
267-
| `optionsResolver` |
268-
| `parser` |
269-
| `programs` |
270-
| `sendSignal` |
271-
| `setCursorPosition` |
272-
| `setFullscreen` |
273-
| `setHistoryPosition` |
274-
| `showHelp` |
275-
| `signals` |
276-
| `setQuery` |
277-
| `terminal` |
260+
| Identifier | Type | Parameters |
261+
| -------------------- | ---------- | -------------------------------- |
262+
| `addDispatchedQuery` | `Function` | `dispatchedQuery` |
263+
| `appendToHistory` | `Function` | `...components` |
264+
| `dispatch` | `Function` | `query` |
265+
| `decrementHistory` | `Function` | |
266+
| `exit` | `Function` | |
267+
| `context` | `Object` | |
268+
| `helpText` | `String` | |
269+
| `helpTimeout` | `Number` | |
270+
| `hidePrompt` | `Boolean` | |
271+
| `incrementHistory` | `Function` | |
272+
| `optionsResolver` | `Function` | `program, parsedQuery, setQuery` |
273+
| `parser` | `Function` | `query` |
274+
| `programs` | `Array` | |
275+
| `sendSignal` | `Function` | `signal` |
276+
| `setCursorPosition` | `Function` | `cursorPosition` |
277+
| `setFullscreen` | `Function` | `isFullscreen` |
278+
| `setHistoryPosition` | `Function` | `historyPosition` |
279+
| `showHelp` | `Boolean` | |
280+
| `signals` | `Object` | |
281+
| `setQuery` | `Function` | `query` |
282+
| `terminal` | `Object` | |
278283

279284
Provider can be injected into your component by name:
280285

@@ -284,22 +289,22 @@ inject: ["exit", "terminal"],
284289

285290
## Exposed
286291

287-
| Exposed |
288-
| -------------------- |
289-
| `addDispatchedQuery` |
290-
| `appendToHistory` |
291-
| `decrementHistory` |
292-
| `dispatch` |
293-
| `exit` |
294-
| `incrementHistory` |
295-
| `programs` |
296-
| `sendSignal` |
297-
| `setCursorPosition` |
298-
| `setFullscreen` |
299-
| `setHistoryPosition` |
300-
| `setQuery` |
301-
| `signals` |
302-
| `terminal` |
292+
| Identifier | Type | Parameters |
293+
| -------------------- | ---------- | ----------------- |
294+
| `addDispatchedQuery` | `Function` | `dispatchedQuery` |
295+
| `appendToHistory` | `Function` | `...components` |
296+
| `decrementHistory` | `Function` | |
297+
| `dispatch` | `Function` | `query` |
298+
| `exit` | `Function` | |
299+
| `incrementHistory` | `Function` | |
300+
| `programs` | `Function` | |
301+
| `sendSignal` | `Function` | `signal` |
302+
| `setCursorPosition` | `Function` | `cursorPosition` |
303+
| `setFullscreen` | `Function` | `isFullscreen` |
304+
| `setHistoryPosition` | `Function` | `historyPosition` |
305+
| `setQuery` | `Function` | `query` |
306+
| `signals` | `Object` | |
307+
| `terminal` | `Function` | |
303308

304309
## Events
305310

@@ -318,7 +323,17 @@ signal name and a callback:
318323

319324
```js
320325
const signals = inject("signals");
321-
signals.on("SIGINT", () => console.debug("SIGINT"));
326+
const sigint = () => {
327+
// Tear down component
328+
};
329+
signals.on("SIGINT", sigint);
330+
```
331+
332+
To unsubscribe from the signal, pass the same signal name and callback you used
333+
to subscribe to the signal.
334+
335+
```js
336+
signals.off("SIGINT", sigint);
322337
```
323338

324339
## Nice-to-haves
@@ -328,14 +343,12 @@ contribute please consult `CONTRIBUTING.md`.
328343

329344
- Draggable terminal
330345
- More events (like query dispatched)
331-
- More terminal slots
332-
- Multi-line queries
333-
- Syntax highlighting
346+
- More key combinations
334347

335348
## Browser support
336349

337-
This library uses the `ResizeObserver` to track if the terminals height changes.
338-
You may need a pollyfill to support your target browser.
350+
This library uses the `MutationObserver` to track if the terminal needs to
351+
scroll to the bottom. You may need a pollyfill to support your target browser.
339352

340353
## Projects using vue-command
341354

0 commit comments

Comments
 (0)