Skip to content

Commit faa9879

Browse files
committed
docs(added api doc): added Instalation and API Docs
1 parent b98fb7e commit faa9879

File tree

2 files changed

+130
-12
lines changed

2 files changed

+130
-12
lines changed

README.md

Lines changed: 128 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,141 @@
11
# vue-shell
22

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+
413
```
5-
npm install
14+
npm i vue-shell --save
615
```
716

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);
1121
```
1222

13-
### Compiles and minifies for production
23+
```vue
24+
<template>
25+
<v-shell></v-shell>
26+
</template>
1427
```
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>
1694
```
1795

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+
}
19128
```
20-
npm run lint
129+
130+
#### commands
131+
132+
```javascript
133+
[
134+
{ name: String,
135+
get() {
136+
return String | HTML;
137+
}
138+
}
139+
]
21140
```
22141

23-
### Customize configuration
24-
See [Configuration Reference](https://cli.vuejs.org/config/).

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "vue-shell",
33
"version": "1.0.0",
44
"author": "Salah Bentayeb",
5+
"description": "Simulate a terminal shell components with Vue",
56
"license": "MIT",
67
"keywords": [
78
"vueshell",
@@ -12,7 +13,7 @@
1213
"vuejs terminal",
1314
"vue shell"
1415
],
15-
"private": true,
16+
"private": false,
1617
"scripts": {
1718
"serve": "vue-cli-service serve",
1819
"build": "vue-cli-service build",

0 commit comments

Comments
 (0)