|
1 | 1 | # vue-shell |
2 | 2 |
|
3 | | -## Project setup |
| 3 | +## What is this ? |
| 4 | + |
| 5 | +vue-shell is a component vuejs to provides an easy way to create bash terminal on your application and then add your own philosophy by adding all the commands you want with their rendering in the output. |
| 6 | + |
| 7 | +- Navigate the history with **key-up** | **key-down** |
| 8 | +- Clean the current terminal with **clear** |
| 9 | +- Browse all your commands with **help** |
| 10 | + |
| 11 | +## Installation |
| 12 | + |
4 | 13 | ``` |
5 | | -npm install |
| 14 | +npm i vue-shell --save |
6 | 15 | ``` |
7 | 16 |
|
8 | | -### Compiles and hot-reloads for development |
9 | | -``` |
10 | | -npm run serve |
| 17 | +```js |
| 18 | +import Vue from "vue"; |
| 19 | +import shell from 'vue-shell' |
| 20 | +Vue.use(shell); |
11 | 21 | ``` |
12 | 22 |
|
13 | | -### Compiles and minifies for production |
| 23 | +```vue |
| 24 | +<template> |
| 25 | + <v-shell></v-shell> |
| 26 | +</template> |
14 | 27 | ``` |
15 | | -npm run build |
| 28 | + |
| 29 | + |
| 30 | + |
| 31 | +## Example |
| 32 | + |
| 33 | +```vue |
| 34 | +<template> |
| 35 | + <div> |
| 36 | + <v-shell |
| 37 | + :banner="banner" |
| 38 | + :shell_input="send_to_terminal" |
| 39 | + :commands="commands" |
| 40 | + @shell_output="prompt()" |
| 41 | + ></v-shell> |
| 42 | + </div> |
| 43 | +</template> |
| 44 | +
|
| 45 | +<script> |
| 46 | +export default { |
| 47 | + data() { |
| 48 | + return { |
| 49 | + send_to_terminal: "", |
| 50 | + banner: { |
| 51 | + header: "Vue Shell", |
| 52 | + subHeader: "Shell is power just enjoy 🔥", |
| 53 | + helpHeader: 'Enter "help" for more information.', |
| 54 | + emoji: { |
| 55 | + first: "🔅", |
| 56 | + second: "🔆", |
| 57 | + time: 750 |
| 58 | + }, |
| 59 | + sign: "VueShell $", |
| 60 | + img: { |
| 61 | + align: "left", |
| 62 | + link: "/mylogo.png", |
| 63 | + width: 100, |
| 64 | + height: 100 |
| 65 | + } |
| 66 | + }, |
| 67 | + commands: [ |
| 68 | + { name: "info", |
| 69 | + get() { |
| 70 | + return `<p>With ❤️ By Salah Bentayeb @halasproject.</p>`; |
| 71 | + } |
| 72 | + }, |
| 73 | + { |
| 74 | + name: "uname", |
| 75 | + get() { |
| 76 | + return navigator.appVersion; |
| 77 | + } |
| 78 | + } |
| 79 | + ] |
| 80 | + }; |
| 81 | + }, |
| 82 | + methods: { |
| 83 | + prompt(value) { |
| 84 | + if (value == "node -v") { |
| 85 | + this.send_to_terminal = process.versions.node; |
| 86 | + } |
| 87 | + } |
| 88 | + } |
| 89 | +}; |
| 90 | +</script> |
| 91 | +
|
| 92 | +<style> |
| 93 | +</style> |
16 | 94 | ``` |
17 | 95 |
|
18 | | -### Lints and fixes files |
| 96 | + |
| 97 | + |
| 98 | +## API |
| 99 | + |
| 100 | +| Props | Type | Required | |
| 101 | +| ----------- | ------ | -------- | |
| 102 | +| banner | Object | false | |
| 103 | +| commands | Array | false | |
| 104 | +| shell_input | String | false | |
| 105 | + |
| 106 | +| Event | Type | Required | |
| 107 | +| ------------ | ---- | -------- | |
| 108 | +| shell_output | Any | false | |
| 109 | + |
| 110 | +#### banner |
| 111 | + |
| 112 | +```js |
| 113 | +{ |
| 114 | + header: String, |
| 115 | + subHeader: String, |
| 116 | + helpHeader: String, |
| 117 | + sign: String, |
| 118 | + img: { |
| 119 | + align: left | right, |
| 120 | + link: String, |
| 121 | + width: Number, |
| 122 | + height: Number } |
| 123 | + emoji: { |
| 124 | + first: "🔅", |
| 125 | + second: "🔆", |
| 126 | + time: Number (ms) } |
| 127 | +} |
19 | 128 | ``` |
20 | | -npm run lint |
| 129 | + |
| 130 | +#### commands |
| 131 | + |
| 132 | +```javascript |
| 133 | +[ |
| 134 | + { name: String, |
| 135 | + get() { |
| 136 | + return String | HTML; |
| 137 | + } |
| 138 | + } |
| 139 | +] |
21 | 140 | ``` |
22 | 141 |
|
23 | | -### Customize configuration |
24 | | -See [Configuration Reference](https://cli.vuejs.org/config/). |
|
0 commit comments