5.1.4 • Published 6 years ago
@nathanfriend/vue-command v5.1.4
vue-command
A fully working Vue.js terminal emulator. See the demo.
Features
- Parse arguments with yargs-parser
- Search history (with ↑/↓)
- White/Dark theme support
- Autocomplete (with ↹)
- Supports asynchronous commands
Installation
$ npm i vue-command --saveProperties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
commands | Object | {} | Yes | Key-value pairs where key is command and value is function with yargs arguments. Function should return either a String or a Promise that resolves to a String. |
help-text | String | Type help | No | Sets the placeholder |
help-timeout | Number | 4000 | No | Sets the placeholder timeout |
hide-bar | Boolean | false | No | Hides the bar |
hide-prompt | Boolean | false | No | Hides the prompt |
prompt | String | ~neil@moon:# | No | Sets the prompt |
show-help | Boolean | false | No | Shows the placeholder |
title | String | neil@moon: ~ | No | Sets the title |
white-theme | Boolean | false | No | Enables the white theme |
yargs-options | Object | {} | No | Sets the yargs options |
Usage
<template>
<vue-command
:yargs-options="{ alias: { color: ['colour'] } }"
:commands="commands"
/>
</template>
<script>
import VueCommand from 'vue-command'
import 'vue-command/dist/vue-command.css'
export default {
components: {
VueCommand
},
data: () => ({
commands: {
// yargs arguments
pokedex: ({ color, _ }) => {
if (color && _[1] === 'pikachu') return 'yellow'
return `Usage: pokedex pokemon [option]<br><br>
Example: pokedex pikachu --color
`
}
}
})
}
</script>
<style lang="scss">
.vue-command {
.term {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
.term-std {
min-height: 300px;
max-height: 300px;
overflow-y: scroll;
}
}
</style>Author
Julian Claus and contributors.
License
MIT