├── .babelrc
├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── README.md
├── config
    ├── webpack.dev.config.js
    └── webpack.prod.config.js
├── dist
    ├── vue-static-terminal.css
    ├── vue-static-terminal.js
    └── vue-static-terminal.min.js
├── package.json
├── screenshot.png
├── src
    ├── App.vue
    ├── components
    │   ├── StaticTerminal.vue
    │   └── staticTerminal
    │   │   ├── StaticTerminalBody.vue
    │   │   ├── StaticTerminalCommand.vue
    │   │   ├── StaticTerminalHeader.vue
    │   │   └── StaticTerminalResult.vue
    ├── index.html
    ├── main.js
    └── plugin.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "es2015"
 4 |   ],
 5 |   "plugins": [
 6 |     "transform-runtime"
 7 |   ],
 8 |   "comments": false
 9 | }
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .vscode
3 | .idea


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | ## 1.0.2
 4 | * adds npm badge to readme
 5 | 
 6 | ## 1.0.1
 7 | * adds npm keywords
 8 | * readme whitespace fixes
 9 | 
10 | ## 1.0.0
11 | 
12 | * initial release
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-static-terminal
  2 | 
  3 | > A fully customizable static terminal component for vue.js
  4 | 
  5 | [![npm version](https://badge.fury.io/js/vue-static-terminal.svg)](https://badge.fury.io/js/vue-static-terminal)
  6 | ![Screenshot](screenshot.png?raw=true "Screenshot")
  7 | 
  8 | Visit [the wiki](https://github.com/cars10/vue-static-terminal/wiki/Examples) for more examples.
  9 | 
 10 | ## Installation
 11 | 
 12 | ### Via npm
 13 | 
 14 | First add it to your `package.json`:
 15 | 
 16 | ```bash
 17 | npm install vue-static-terminal --save
 18 | # or yarn
 19 | yarn add vue-static-terminal
 20 | ```
 21 | 
 22 | Then import the component js:
 23 | 
 24 | ```javascript
 25 | import VueStaticTerminal from 'vue-static-terminal'
 26 | ```
 27 | 
 28 | And the styles. Alternatively copy the styles to your project and customize them.
 29 | 
 30 | ```javascript
 31 | import 'vue-static-terminal/dist/vue-static-terminal.css'
 32 | ```
 33 | 
 34 | ### Manually via `<script>` tag
 35 | 
 36 | If you don't use npm you can download the minified version in `dist/vue-static-terminal.min.js` and the css in `dist/vue-static-terminal.css`, then add it to your site:
 37 | 
 38 | ```html
 39 | <link rel="stylesheet" href="vue-static-terminal.css">
 40 | <script src="vue-static-terminal.min.js"></script>
 41 | ```
 42 | 
 43 | Loading the minified version will automatically register the component `VueStaticTerminal` globally on the browsers `window` object.
 44 | 
 45 | ## Usage
 46 | 
 47 | Load the component:
 48 | 
 49 | ```javascript
 50 | Vue.use(VueStaticTerminal)
 51 | ```
 52 | 
 53 | Use the component:
 54 | 
 55 | #### Empty terminal
 56 | ```html
 57 | <static-terminal></vue-static-terminal>
 58 | ```
 59 | 
 60 | ```javascript
 61 | export default {}
 62 | ```
 63 | 
 64 | #### Simple example
 65 | ```html
 66 | <static-terminal :header="terminal.header"
 67 |                  :prompt="terminal.prompt"
 68 |                  :commands="terminal.commands"></vue-static-terminal>
 69 | ```
 70 | ```javascript
 71 | export default {
 72 |   data: () => {
 73 |     return {
 74 |       terminal: {
 75 |         header: {
 76 |           text: 'some Terminal',
 77 |           toolbar: '&#x2715;'
 78 |         },
 79 |         prompt: '/ >',
 80 |         commands: [
 81 |           {command: 'ls', result: 'file1 file2'},
 82 |           {command: 'whoami', result: 'root'}
 83 |         ]
 84 |       }
 85 |     }
 86 |   }
 87 | }
 88 | ```
 89 | 
 90 | Visit [the wiki](https://github.com/cars10/vue-static-terminal/wiki/Examples) for more examples.
 91 | 
 92 | ## API
 93 | 
 94 | The component accepts the following three props:
 95 | 
 96 | * `header` - type: object
 97 | * `prompt` - type: string
 98 | * `commands` - type: array of objects
 99 | 
100 | None of these are required, neither are their respective attributes. All attributes can contain html entities.
101 | 
102 | ### header
103 | 
104 | type: object
105 | 
106 | | Attribute | Type | Default | Example   |
107 | | --------- | ---- | ------- | --------- |
108 | | text      | string | `''`    | `'xterm'` |
109 | | toolbar   | string | `<span style="color: lightgrey;">&#9679;</span>&nbsp;&nbsp;<span>&#9679;</span>` <span style="color: lightgrey;">&#9679;</span>&nbsp;&nbsp;<span>&#9679;</span> | `'- X'`   |
110 | 
111 | 
112 | ### prompt
113 | 
114 | type: string
115 | 
116 | | Default | Example |
117 | | ------- | ------- |
118 | | `'$'`     | `'$>'` |
119 | 
120 | ### commands
121 | 
122 | type: array of objects
123 | 
124 | | Attribute | Type | Default | Example |
125 | | --------- | ---- | ------- | ------- |
126 | | prompt    | string | `undefined`. The global `prompt` will be used | `'$>'`
127 | | command   | string | `''` | `'whoami'` | 
128 | | result    | string | `''` | `'root'` |
129 | 
130 | 


--------------------------------------------------------------------------------
/config/webpack.dev.config.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 2 | 
 3 | module.exports = {
 4 |   entry: './src/main.js',
 5 |   output: {
 6 |     path: '/dist'
 7 |   },
 8 |   module: {
 9 |     loaders: [
10 |       {
11 |         test: /\.vue$/,
12 |         loader: 'vue-loader'
13 |       },
14 |       {
15 |         test: /\.js$/,
16 |         loader: 'babel-loader',
17 |         exclude: /node_modules/
18 |       }
19 |     ]
20 |   },
21 |   plugins: [
22 |     new HtmlWebpackPlugin({
23 |       filename: 'index.html',
24 |       template: './src/index.html',
25 |       inject: true
26 |     }),
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/config/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const webpack = require('webpack')
 3 | const merge = require('webpack-merge');
 4 | const ExtractTextPlugin = require("extract-text-webpack-plugin")
 5 | 
 6 | const config = {
 7 |   output: {
 8 |     path: path.resolve(__dirname, '../dist'),
 9 |     publicPath: '../dist/',
10 |   },
11 |   module: {
12 |     loaders: [
13 |       {
14 |         test: /\.vue$/,
15 |         loader: 'vue-loader',
16 |         options: {
17 |           extractCSS: true,
18 |           minimize: true
19 |         }
20 |       },
21 |       {
22 |         test: /\.js$/,
23 |         loader: 'babel-loader',
24 |         exclude: /node_modules/
25 |       }
26 |     ]
27 |   },
28 |   plugins: [
29 |     new webpack.optimize.UglifyJsPlugin({
30 |       include: /\.min\.js$/,
31 |       minimize: true,
32 |       sourceMap: false,
33 |       mangle: true,
34 |       compress: {
35 |         warnings: false
36 |       }
37 |     }),
38 |     new ExtractTextPlugin('vue-static-terminal.css')
39 |   ]
40 | }
41 | 
42 | /**
43 |  * We create to different js bundles
44 |  * * vue-static-terminal.min.js
45 |  *      The minimized bundle registers the component globally on +window+ and should be used for setups without npm.
46 |  *      You can include that file directly via script tag and use the component via +Vue.use(VueStaticTerminal)+
47 |  *
48 |  * * vue-static-terminal.js
49 |  *      This is the umd library to use when including the component via npm.
50 |  */
51 | module.exports = [
52 |   merge(config, {
53 |     entry: path.resolve(__dirname + '/../src/plugin.js'),
54 |     output: {
55 |       filename: 'vue-static-terminal.min.js',
56 |       libraryTarget: 'window',
57 |       library: 'VueStaticTerminal',
58 |     }
59 |   }),
60 |   merge(config, {
61 |     entry: path.resolve(__dirname + '/../src/components/StaticTerminal.vue'),
62 |     output: {
63 |       filename: 'vue-static-terminal.js',
64 |       libraryTarget: 'umd',
65 |       library: 'vue-static-terminal',
66 |       umdNamedDefine: true
67 |     }
68 |   })
69 | ];
70 | 


--------------------------------------------------------------------------------
/dist/vue-static-terminal.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .static_terminal {
 3 |   background-color: #333;
 4 |   border-radius: 2px;
 5 |   color: #fff;
 6 |   font-family: monospace;
 7 | }
 8 | 
 9 | .static_terminal__header {
10 |   padding: 4px 8px 4px 6px;
11 |   background-color: #555;
12 |   border-radius: 2px 2px 0 0;
13 |   display: flex;
14 |   flex-direction: row;
15 | }
16 | .static_terminal__header__toolbar {
17 |   margin-left: auto;
18 | }
19 | 
20 | .static_terminal__body {
21 |   min-height: 50px;
22 |   padding: 4px 6px;
23 | }
24 | 


--------------------------------------------------------------------------------
/dist/vue-static-terminal.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define("vue-static-terminal", [], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["vue-static-terminal"] = factory();
  8 | 	else
  9 | 		root["vue-static-terminal"] = factory();
 10 | })(typeof self !== 'undefined' ? self : this, function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId]) {
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/ 		}
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			i: moduleId,
 25 | /******/ 			l: false,
 26 | /******/ 			exports: {}
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.l = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// define getter function for harmony exports
 47 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 48 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 49 | /******/ 			Object.defineProperty(exports, name, {
 50 | /******/ 				configurable: false,
 51 | /******/ 				enumerable: true,
 52 | /******/ 				get: getter
 53 | /******/ 			});
 54 | /******/ 		}
 55 | /******/ 	};
 56 | /******/
 57 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 58 | /******/ 	__webpack_require__.n = function(module) {
 59 | /******/ 		var getter = module && module.__esModule ?
 60 | /******/ 			function getDefault() { return module['default']; } :
 61 | /******/ 			function getModuleExports() { return module; };
 62 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 63 | /******/ 		return getter;
 64 | /******/ 	};
 65 | /******/
 66 | /******/ 	// Object.prototype.hasOwnProperty.call
 67 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 68 | /******/
 69 | /******/ 	// __webpack_public_path__
 70 | /******/ 	__webpack_require__.p = "../dist/";
 71 | /******/
 72 | /******/ 	// Load entry module and return exports
 73 | /******/ 	return __webpack_require__(__webpack_require__.s = 6);
 74 | /******/ })
 75 | /************************************************************************/
 76 | /******/ ([
 77 | /* 0 */
 78 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
 79 | 
 80 | "use strict";
 81 | /* harmony export (immutable) */ __webpack_exports__["a"] = normalizeComponent;
 82 | /* globals __VUE_SSR_CONTEXT__ */
 83 | 
 84 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
 85 | // This module is a runtime utility for cleaner component module output and will
 86 | // be included in the final webpack user bundle.
 87 | 
 88 | function normalizeComponent (
 89 |   rawScriptExports,
 90 |   compiledTemplate,
 91 |   functionalTemplate,
 92 |   injectStyles,
 93 |   scopeId,
 94 |   moduleIdentifier /* server only */
 95 | ) {
 96 |   var esModule
 97 |   var scriptExports = rawScriptExports = rawScriptExports || {}
 98 | 
 99 |   // ES6 modules interop
100 |   var type = typeof rawScriptExports.default
101 |   if (type === 'object' || type === 'function') {
102 |     esModule = rawScriptExports
103 |     scriptExports = rawScriptExports.default
104 |   }
105 | 
106 |   // Vue.extend constructor export interop
107 |   var options = typeof scriptExports === 'function'
108 |     ? scriptExports.options
109 |     : scriptExports
110 | 
111 |   // render functions
112 |   if (compiledTemplate) {
113 |     options.render = compiledTemplate.render
114 |     options.staticRenderFns = compiledTemplate.staticRenderFns
115 |     options._compiled = true
116 |   }
117 | 
118 |   // functional template
119 |   if (functionalTemplate) {
120 |     options.functional = true
121 |   }
122 | 
123 |   // scopedId
124 |   if (scopeId) {
125 |     options._scopeId = scopeId
126 |   }
127 | 
128 |   var hook
129 |   if (moduleIdentifier) { // server build
130 |     hook = function (context) {
131 |       // 2.3 injection
132 |       context =
133 |         context || // cached call
134 |         (this.$vnode && this.$vnode.ssrContext) || // stateful
135 |         (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
136 |       // 2.2 with runInNewContext: true
137 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
138 |         context = __VUE_SSR_CONTEXT__
139 |       }
140 |       // inject component styles
141 |       if (injectStyles) {
142 |         injectStyles.call(this, context)
143 |       }
144 |       // register component module identifier for async chunk inferrence
145 |       if (context && context._registeredComponents) {
146 |         context._registeredComponents.add(moduleIdentifier)
147 |       }
148 |     }
149 |     // used by ssr in case component is cached and beforeCreate
150 |     // never gets called
151 |     options._ssrRegister = hook
152 |   } else if (injectStyles) {
153 |     hook = injectStyles
154 |   }
155 | 
156 |   if (hook) {
157 |     var functional = options.functional
158 |     var existing = functional
159 |       ? options.render
160 |       : options.beforeCreate
161 | 
162 |     if (!functional) {
163 |       // inject component registration as beforeCreate hook
164 |       options.beforeCreate = existing
165 |         ? [].concat(existing, hook)
166 |         : [hook]
167 |     } else {
168 |       // for template-only hot-reload because in that case the render fn doesn't
169 |       // go through the normalizer
170 |       options._injectStyles = hook
171 |       // register for functioal component in vue file
172 |       options.render = function renderWithStyleInjection (h, context) {
173 |         hook.call(context)
174 |         return existing(h, context)
175 |       }
176 |     }
177 |   }
178 | 
179 |   return {
180 |     esModule: esModule,
181 |     exports: scriptExports,
182 |     options: options
183 |   }
184 | }
185 | 
186 | 
187 | /***/ }),
188 | /* 1 */
189 | /***/ (function(module, exports, __webpack_require__) {
190 | 
191 | "use strict";
192 | 
193 | 
194 | Object.defineProperty(exports, "__esModule", {
195 |   value: true
196 | });
197 | 
198 | var _StaticTerminalHeader = __webpack_require__(8);
199 | 
200 | var _StaticTerminalHeader2 = _interopRequireDefault(_StaticTerminalHeader);
201 | 
202 | var _StaticTerminalBody = __webpack_require__(11);
203 | 
204 | var _StaticTerminalBody2 = _interopRequireDefault(_StaticTerminalBody);
205 | 
206 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
207 | 
208 | exports.default = {
209 |   props: {
210 |     header: {
211 |       default: function _default() {
212 |         return {};
213 |       }
214 |     },
215 |     prompt: {},
216 |     commands: {}
217 |   },
218 |   components: {
219 |     StaticTerminalHeader: _StaticTerminalHeader2.default,
220 |     StaticTerminalBody: _StaticTerminalBody2.default
221 |   }
222 | };
223 | 
224 | /***/ }),
225 | /* 2 */
226 | /***/ (function(module, exports, __webpack_require__) {
227 | 
228 | "use strict";
229 | 
230 | 
231 | Object.defineProperty(exports, "__esModule", {
232 |   value: true
233 | });
234 | exports.default = {
235 |   props: {
236 |     text: {},
237 |     toolbar: {
238 |       default: '<span style="color: lightgrey;">&#9679;</span>&nbsp;&nbsp;<span>&#9679;</span>'
239 |     }
240 |   }
241 | };
242 | 
243 | /***/ }),
244 | /* 3 */
245 | /***/ (function(module, exports, __webpack_require__) {
246 | 
247 | "use strict";
248 | 
249 | 
250 | Object.defineProperty(exports, "__esModule", {
251 |   value: true
252 | });
253 | 
254 | var _StaticTerminalCommand = __webpack_require__(13);
255 | 
256 | var _StaticTerminalCommand2 = _interopRequireDefault(_StaticTerminalCommand);
257 | 
258 | var _StaticTerminalResult = __webpack_require__(15);
259 | 
260 | var _StaticTerminalResult2 = _interopRequireDefault(_StaticTerminalResult);
261 | 
262 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
263 | 
264 | exports.default = {
265 |   props: {
266 |     commands: {
267 |       default: function _default() {
268 |         return [{}];
269 |       }
270 |     },
271 |     prompt: {}
272 |   },
273 |   components: {
274 |     StaticTerminalCommand: _StaticTerminalCommand2.default,
275 |     StaticTerminalResult: _StaticTerminalResult2.default
276 |   }
277 | };
278 | 
279 | /***/ }),
280 | /* 4 */
281 | /***/ (function(module, exports, __webpack_require__) {
282 | 
283 | "use strict";
284 | 
285 | 
286 | Object.defineProperty(exports, "__esModule", {
287 |   value: true
288 | });
289 | exports.default = {
290 |   props: {
291 |     prompt: {
292 |       default: '$'
293 |     },
294 |     command: {}
295 |   }
296 | };
297 | 
298 | /***/ }),
299 | /* 5 */
300 | /***/ (function(module, exports, __webpack_require__) {
301 | 
302 | "use strict";
303 | 
304 | 
305 | Object.defineProperty(exports, "__esModule", {
306 |   value: true
307 | });
308 | exports.default = {
309 |   props: ['result']
310 | };
311 | 
312 | /***/ }),
313 | /* 6 */
314 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
315 | 
316 | "use strict";
317 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
318 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0);
319 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminal_vue__ = __webpack_require__(1);
320 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminal_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminal_vue__);
321 | /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminal_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminal_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
322 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_template_compiler_index_id_data_v_f3cf1f8c_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_StaticTerminal_vue__ = __webpack_require__(18);
323 | var disposed = false
324 | function injectStyle (context) {
325 |   if (disposed) return
326 |   __webpack_require__(7)
327 | }
328 | 
329 | /* script */
330 | 
331 | 
332 | /* template */
333 | 
334 | /* template functional */
335 | var __vue_template_functional__ = false
336 | /* styles */
337 | var __vue_styles__ = injectStyle
338 | /* scopeId */
339 | var __vue_scopeId__ = null
340 | /* moduleIdentifier (server only) */
341 | var __vue_module_identifier__ = null
342 | var Component = Object(__WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])(
343 |   __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminal_vue___default.a,
344 |   __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_template_compiler_index_id_data_v_f3cf1f8c_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_StaticTerminal_vue__["a" /* default */],
345 |   __vue_template_functional__,
346 |   __vue_styles__,
347 |   __vue_scopeId__,
348 |   __vue_module_identifier__
349 | )
350 | Component.options.__file = "src/components/StaticTerminal.vue"
351 | 
352 | /* hot reload */
353 | if (false) {(function () {
354 |   var hotAPI = require("vue-hot-reload-api")
355 |   hotAPI.install(require("vue"), false)
356 |   if (!hotAPI.compatible) return
357 |   module.hot.accept()
358 |   if (!module.hot.data) {
359 |     hotAPI.createRecord("data-v-f3cf1f8c", Component.options)
360 |   } else {
361 |     hotAPI.reload("data-v-f3cf1f8c", Component.options)
362 |   }
363 |   module.hot.dispose(function (data) {
364 |     disposed = true
365 |   })
366 | })()}
367 | 
368 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
369 | 
370 | 
371 | /***/ }),
372 | /* 7 */
373 | /***/ (function(module, exports) {
374 | 
375 | // removed by extract-text-webpack-plugin
376 | 
377 | /***/ }),
378 | /* 8 */
379 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
380 | 
381 | "use strict";
382 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
383 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0);
384 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalHeader_vue__ = __webpack_require__(2);
385 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalHeader_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalHeader_vue__);
386 | /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalHeader_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalHeader_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
387 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_template_compiler_index_id_data_v_df9e7f48_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_StaticTerminalHeader_vue__ = __webpack_require__(10);
388 | var disposed = false
389 | function injectStyle (context) {
390 |   if (disposed) return
391 |   __webpack_require__(9)
392 | }
393 | 
394 | /* script */
395 | 
396 | 
397 | /* template */
398 | 
399 | /* template functional */
400 | var __vue_template_functional__ = false
401 | /* styles */
402 | var __vue_styles__ = injectStyle
403 | /* scopeId */
404 | var __vue_scopeId__ = null
405 | /* moduleIdentifier (server only) */
406 | var __vue_module_identifier__ = null
407 | var Component = Object(__WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])(
408 |   __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalHeader_vue___default.a,
409 |   __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_template_compiler_index_id_data_v_df9e7f48_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_StaticTerminalHeader_vue__["a" /* default */],
410 |   __vue_template_functional__,
411 |   __vue_styles__,
412 |   __vue_scopeId__,
413 |   __vue_module_identifier__
414 | )
415 | Component.options.__file = "src/components/staticTerminal/StaticTerminalHeader.vue"
416 | 
417 | /* hot reload */
418 | if (false) {(function () {
419 |   var hotAPI = require("vue-hot-reload-api")
420 |   hotAPI.install(require("vue"), false)
421 |   if (!hotAPI.compatible) return
422 |   module.hot.accept()
423 |   if (!module.hot.data) {
424 |     hotAPI.createRecord("data-v-df9e7f48", Component.options)
425 |   } else {
426 |     hotAPI.reload("data-v-df9e7f48", Component.options)
427 |   }
428 |   module.hot.dispose(function (data) {
429 |     disposed = true
430 |   })
431 | })()}
432 | 
433 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
434 | 
435 | 
436 | /***/ }),
437 | /* 9 */
438 | /***/ (function(module, exports) {
439 | 
440 | // removed by extract-text-webpack-plugin
441 | 
442 | /***/ }),
443 | /* 10 */
444 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
445 | 
446 | "use strict";
447 | var render = function() {
448 |   var _vm = this
449 |   var _h = _vm.$createElement
450 |   var _c = _vm._self._c || _h
451 |   return _c("div", { staticClass: "static_terminal__header" }, [
452 |     _c("span", {
453 |       staticClass: "static_terminal__header__text",
454 |       domProps: { innerHTML: _vm._s(_vm.text) }
455 |     }),
456 |     _vm._v(" "),
457 |     _c("span", {
458 |       staticClass: "static_terminal__header__toolbar",
459 |       domProps: { innerHTML: _vm._s(_vm.toolbar) }
460 |     })
461 |   ])
462 | }
463 | var staticRenderFns = []
464 | render._withStripped = true
465 | var esExports = { render: render, staticRenderFns: staticRenderFns }
466 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
467 | if (false) {
468 |   module.hot.accept()
469 |   if (module.hot.data) {
470 |     require("vue-hot-reload-api")      .rerender("data-v-df9e7f48", esExports)
471 |   }
472 | }
473 | 
474 | /***/ }),
475 | /* 11 */
476 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
477 | 
478 | "use strict";
479 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
480 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0);
481 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalBody_vue__ = __webpack_require__(3);
482 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalBody_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalBody_vue__);
483 | /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalBody_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalBody_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
484 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_template_compiler_index_id_data_v_0fef86b1_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_StaticTerminalBody_vue__ = __webpack_require__(17);
485 | var disposed = false
486 | function injectStyle (context) {
487 |   if (disposed) return
488 |   __webpack_require__(12)
489 | }
490 | 
491 | /* script */
492 | 
493 | 
494 | /* template */
495 | 
496 | /* template functional */
497 | var __vue_template_functional__ = false
498 | /* styles */
499 | var __vue_styles__ = injectStyle
500 | /* scopeId */
501 | var __vue_scopeId__ = null
502 | /* moduleIdentifier (server only) */
503 | var __vue_module_identifier__ = null
504 | var Component = Object(__WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])(
505 |   __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalBody_vue___default.a,
506 |   __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_template_compiler_index_id_data_v_0fef86b1_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_StaticTerminalBody_vue__["a" /* default */],
507 |   __vue_template_functional__,
508 |   __vue_styles__,
509 |   __vue_scopeId__,
510 |   __vue_module_identifier__
511 | )
512 | Component.options.__file = "src/components/staticTerminal/StaticTerminalBody.vue"
513 | 
514 | /* hot reload */
515 | if (false) {(function () {
516 |   var hotAPI = require("vue-hot-reload-api")
517 |   hotAPI.install(require("vue"), false)
518 |   if (!hotAPI.compatible) return
519 |   module.hot.accept()
520 |   if (!module.hot.data) {
521 |     hotAPI.createRecord("data-v-0fef86b1", Component.options)
522 |   } else {
523 |     hotAPI.reload("data-v-0fef86b1", Component.options)
524 |   }
525 |   module.hot.dispose(function (data) {
526 |     disposed = true
527 |   })
528 | })()}
529 | 
530 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
531 | 
532 | 
533 | /***/ }),
534 | /* 12 */
535 | /***/ (function(module, exports) {
536 | 
537 | // removed by extract-text-webpack-plugin
538 | 
539 | /***/ }),
540 | /* 13 */
541 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
542 | 
543 | "use strict";
544 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
545 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0);
546 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalCommand_vue__ = __webpack_require__(4);
547 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalCommand_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalCommand_vue__);
548 | /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalCommand_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalCommand_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
549 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_template_compiler_index_id_data_v_4a4c1ce8_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_StaticTerminalCommand_vue__ = __webpack_require__(14);
550 | var disposed = false
551 | 
552 | /* script */
553 | 
554 | 
555 | /* template */
556 | 
557 | /* template functional */
558 | var __vue_template_functional__ = false
559 | /* styles */
560 | var __vue_styles__ = null
561 | /* scopeId */
562 | var __vue_scopeId__ = null
563 | /* moduleIdentifier (server only) */
564 | var __vue_module_identifier__ = null
565 | var Component = Object(__WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])(
566 |   __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalCommand_vue___default.a,
567 |   __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_template_compiler_index_id_data_v_4a4c1ce8_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_StaticTerminalCommand_vue__["a" /* default */],
568 |   __vue_template_functional__,
569 |   __vue_styles__,
570 |   __vue_scopeId__,
571 |   __vue_module_identifier__
572 | )
573 | Component.options.__file = "src/components/staticTerminal/StaticTerminalCommand.vue"
574 | 
575 | /* hot reload */
576 | if (false) {(function () {
577 |   var hotAPI = require("vue-hot-reload-api")
578 |   hotAPI.install(require("vue"), false)
579 |   if (!hotAPI.compatible) return
580 |   module.hot.accept()
581 |   if (!module.hot.data) {
582 |     hotAPI.createRecord("data-v-4a4c1ce8", Component.options)
583 |   } else {
584 |     hotAPI.reload("data-v-4a4c1ce8", Component.options)
585 |   }
586 |   module.hot.dispose(function (data) {
587 |     disposed = true
588 |   })
589 | })()}
590 | 
591 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
592 | 
593 | 
594 | /***/ }),
595 | /* 14 */
596 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
597 | 
598 | "use strict";
599 | var render = function() {
600 |   var _vm = this
601 |   var _h = _vm.$createElement
602 |   var _c = _vm._self._c || _h
603 |   return _c("div", { staticClass: "static_terminal__command_with_prompt" }, [
604 |     _c("span", {
605 |       staticClass: "static_terminal__prompt",
606 |       domProps: { innerHTML: _vm._s(_vm.prompt) }
607 |     }),
608 |     _vm._v(" "),
609 |     _c("span", {
610 |       staticClass: "static_terminal__command",
611 |       domProps: { innerHTML: _vm._s(_vm.command) }
612 |     })
613 |   ])
614 | }
615 | var staticRenderFns = []
616 | render._withStripped = true
617 | var esExports = { render: render, staticRenderFns: staticRenderFns }
618 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
619 | if (false) {
620 |   module.hot.accept()
621 |   if (module.hot.data) {
622 |     require("vue-hot-reload-api")      .rerender("data-v-4a4c1ce8", esExports)
623 |   }
624 | }
625 | 
626 | /***/ }),
627 | /* 15 */
628 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
629 | 
630 | "use strict";
631 | Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
632 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_runtime_component_normalizer__ = __webpack_require__(0);
633 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalResult_vue__ = __webpack_require__(5);
634 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalResult_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalResult_vue__);
635 | /* harmony namespace reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalResult_vue__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalResult_vue__[key]; }) }(__WEBPACK_IMPORT_KEY__));
636 | /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_template_compiler_index_id_data_v_0f874428_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_StaticTerminalResult_vue__ = __webpack_require__(16);
637 | var disposed = false
638 | 
639 | /* script */
640 | 
641 | 
642 | /* template */
643 | 
644 | /* template functional */
645 | var __vue_template_functional__ = false
646 | /* styles */
647 | var __vue_styles__ = null
648 | /* scopeId */
649 | var __vue_scopeId__ = null
650 | /* moduleIdentifier (server only) */
651 | var __vue_module_identifier__ = null
652 | var Component = Object(__WEBPACK_IMPORTED_MODULE_0__node_modules_vue_loader_lib_runtime_component_normalizer__["a" /* default */])(
653 |   __WEBPACK_IMPORTED_MODULE_1__babel_loader_node_modules_vue_loader_lib_selector_type_script_index_0_StaticTerminalResult_vue___default.a,
654 |   __WEBPACK_IMPORTED_MODULE_2__node_modules_vue_loader_lib_template_compiler_index_id_data_v_0f874428_hasScoped_false_buble_transforms_node_modules_vue_loader_lib_selector_type_template_index_0_StaticTerminalResult_vue__["a" /* default */],
655 |   __vue_template_functional__,
656 |   __vue_styles__,
657 |   __vue_scopeId__,
658 |   __vue_module_identifier__
659 | )
660 | Component.options.__file = "src/components/staticTerminal/StaticTerminalResult.vue"
661 | 
662 | /* hot reload */
663 | if (false) {(function () {
664 |   var hotAPI = require("vue-hot-reload-api")
665 |   hotAPI.install(require("vue"), false)
666 |   if (!hotAPI.compatible) return
667 |   module.hot.accept()
668 |   if (!module.hot.data) {
669 |     hotAPI.createRecord("data-v-0f874428", Component.options)
670 |   } else {
671 |     hotAPI.reload("data-v-0f874428", Component.options)
672 |   }
673 |   module.hot.dispose(function (data) {
674 |     disposed = true
675 |   })
676 | })()}
677 | 
678 | /* harmony default export */ __webpack_exports__["default"] = (Component.exports);
679 | 
680 | 
681 | /***/ }),
682 | /* 16 */
683 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
684 | 
685 | "use strict";
686 | var render = function() {
687 |   var _vm = this
688 |   var _h = _vm.$createElement
689 |   var _c = _vm._self._c || _h
690 |   return _c("div", {
691 |     staticClass: "static_terminal__result",
692 |     domProps: { innerHTML: _vm._s(_vm.result) }
693 |   })
694 | }
695 | var staticRenderFns = []
696 | render._withStripped = true
697 | var esExports = { render: render, staticRenderFns: staticRenderFns }
698 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
699 | if (false) {
700 |   module.hot.accept()
701 |   if (module.hot.data) {
702 |     require("vue-hot-reload-api")      .rerender("data-v-0f874428", esExports)
703 |   }
704 | }
705 | 
706 | /***/ }),
707 | /* 17 */
708 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
709 | 
710 | "use strict";
711 | var render = function() {
712 |   var _vm = this
713 |   var _h = _vm.$createElement
714 |   var _c = _vm._self._c || _h
715 |   return _c(
716 |     "div",
717 |     { staticClass: "static_terminal__body" },
718 |     _vm._l(_vm.commands, function(command, _, index) {
719 |       return _c(
720 |         "div",
721 |         {
722 |           staticClass: "static_terminal__command_with_result",
723 |           attrs: { "v-key": index }
724 |         },
725 |         [
726 |           _c("static-terminal-command", {
727 |             attrs: {
728 |               prompt: command.prompt || _vm.prompt,
729 |               command: command.command
730 |             }
731 |           }),
732 |           _vm._v(" "),
733 |           _c("static-terminal-result", { attrs: { result: command.result } })
734 |         ],
735 |         1
736 |       )
737 |     })
738 |   )
739 | }
740 | var staticRenderFns = []
741 | render._withStripped = true
742 | var esExports = { render: render, staticRenderFns: staticRenderFns }
743 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
744 | if (false) {
745 |   module.hot.accept()
746 |   if (module.hot.data) {
747 |     require("vue-hot-reload-api")      .rerender("data-v-0fef86b1", esExports)
748 |   }
749 | }
750 | 
751 | /***/ }),
752 | /* 18 */
753 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
754 | 
755 | "use strict";
756 | var render = function() {
757 |   var _vm = this
758 |   var _h = _vm.$createElement
759 |   var _c = _vm._self._c || _h
760 |   return _c(
761 |     "div",
762 |     { staticClass: "static_terminal" },
763 |     [
764 |       _c("static-terminal-header", {
765 |         attrs: { text: _vm.header.text, toolbar: _vm.header.toolbar }
766 |       }),
767 |       _vm._v(" "),
768 |       _c("static-terminal-body", {
769 |         attrs: { prompt: _vm.prompt, commands: _vm.commands }
770 |       })
771 |     ],
772 |     1
773 |   )
774 | }
775 | var staticRenderFns = []
776 | render._withStripped = true
777 | var esExports = { render: render, staticRenderFns: staticRenderFns }
778 | /* harmony default export */ __webpack_exports__["a"] = (esExports);
779 | if (false) {
780 |   module.hot.accept()
781 |   if (module.hot.data) {
782 |     require("vue-hot-reload-api")      .rerender("data-v-f3cf1f8c", esExports)
783 |   }
784 | }
785 | 
786 | /***/ })
787 | /******/ ]);
788 | });


--------------------------------------------------------------------------------
/dist/vue-static-terminal.min.js:
--------------------------------------------------------------------------------
1 | window.VueStaticTerminal=function(t){function e(r){if(n[r])return n[r].exports;var a=n[r]={i:r,l:!1,exports:{}};return t[r].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="../dist/",e(e.s=6)}([function(t,e,n){"use strict";function r(t,e,n,r,a,i){var s,o=t=t||{},c=typeof t.default;"object"!==c&&"function"!==c||(s=t,o=t.default);var u="function"==typeof o?o.options:o;e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0),n&&(u.functional=!0),a&&(u._scopeId=a);var l;if(i?(l=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},u._ssrRegister=l):r&&(l=r),l){var d=u.functional,f=d?u.render:u.beforeCreate;d?(u._injectStyles=l,u.render=function(t,e){return l.call(e),f(t,e)}):u.beforeCreate=f?[].concat(f,l):[l]}return{esModule:s,exports:o,options:u}}e.a=r},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(9),i=r(a),s=n(12),o=r(s);e.default={props:{header:{default:function(){return{}}},prompt:{},commands:{}},components:{StaticTerminalHeader:i.default,StaticTerminalBody:o.default}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{text:{},toolbar:{default:'<span style="color: lightgrey;">&#9679;</span>&nbsp;&nbsp;<span>&#9679;</span>'}}}},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=n(14),i=r(a),s=n(16),o=r(s);e.default={props:{commands:{default:function(){return[{}]}},prompt:{}},components:{StaticTerminalCommand:i.default,StaticTerminalResult:o.default}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{prompt:{default:"$"},command:{}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:["result"]}},function(t,e,n){"use strict";var r=n(7),a=function(t){return t&&t.__esModule?t:{default:t}}(r);t.exports={install:function(t,e){t.component("static-terminal",a.default)}}},function(t,e,n){"use strict";function r(t){u||n(8)}Object.defineProperty(e,"__esModule",{value:!0});var a=n(0),i=n(1),s=n.n(i);for(var o in i)"default"!==o&&function(t){n.d(e,t,function(){return i[t]})}(o);var c=n(19),u=!1,l=r,d=Object(a.a)(s.a,c.a,!1,l,null,null);d.options.__file="src/components/StaticTerminal.vue",e.default=d.exports},function(t,e){},function(t,e,n){"use strict";function r(t){u||n(10)}Object.defineProperty(e,"__esModule",{value:!0});var a=n(0),i=n(2),s=n.n(i);for(var o in i)"default"!==o&&function(t){n.d(e,t,function(){return i[t]})}(o);var c=n(11),u=!1,l=r,d=Object(a.a)(s.a,c.a,!1,l,null,null);d.options.__file="src/components/staticTerminal/StaticTerminalHeader.vue",e.default=d.exports},function(t,e){},function(t,e,n){"use strict";var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"static_terminal__header"},[n("span",{staticClass:"static_terminal__header__text",domProps:{innerHTML:t._s(t.text)}}),t._v(" "),n("span",{staticClass:"static_terminal__header__toolbar",domProps:{innerHTML:t._s(t.toolbar)}})])},a=[];r._withStripped=!0;var i={render:r,staticRenderFns:a};e.a=i},function(t,e,n){"use strict";function r(t){u||n(13)}Object.defineProperty(e,"__esModule",{value:!0});var a=n(0),i=n(3),s=n.n(i);for(var o in i)"default"!==o&&function(t){n.d(e,t,function(){return i[t]})}(o);var c=n(18),u=!1,l=r,d=Object(a.a)(s.a,c.a,!1,l,null,null);d.options.__file="src/components/staticTerminal/StaticTerminalBody.vue",e.default=d.exports},function(t,e){},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(0),a=n(4),i=n.n(a);for(var s in a)"default"!==s&&function(t){n.d(e,t,function(){return a[t]})}(s);var o=n(15),c=Object(r.a)(i.a,o.a,!1,null,null,null);c.options.__file="src/components/staticTerminal/StaticTerminalCommand.vue",e.default=c.exports},function(t,e,n){"use strict";var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"static_terminal__command_with_prompt"},[n("span",{staticClass:"static_terminal__prompt",domProps:{innerHTML:t._s(t.prompt)}}),t._v(" "),n("span",{staticClass:"static_terminal__command",domProps:{innerHTML:t._s(t.command)}})])},a=[];r._withStripped=!0;var i={render:r,staticRenderFns:a};e.a=i},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(0),a=n(5),i=n.n(a);for(var s in a)"default"!==s&&function(t){n.d(e,t,function(){return a[t]})}(s);var o=n(17),c=Object(r.a)(i.a,o.a,!1,null,null,null);c.options.__file="src/components/staticTerminal/StaticTerminalResult.vue",e.default=c.exports},function(t,e,n){"use strict";var r=function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"static_terminal__result",domProps:{innerHTML:t._s(t.result)}})},a=[];r._withStripped=!0;var i={render:r,staticRenderFns:a};e.a=i},function(t,e,n){"use strict";var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"static_terminal__body"},t._l(t.commands,function(e,r,a){return n("div",{staticClass:"static_terminal__command_with_result",attrs:{"v-key":a}},[n("static-terminal-command",{attrs:{prompt:e.prompt||t.prompt,command:e.command}}),t._v(" "),n("static-terminal-result",{attrs:{result:e.result}})],1)}))},a=[];r._withStripped=!0;var i={render:r,staticRenderFns:a};e.a=i},function(t,e,n){"use strict";var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"static_terminal"},[n("static-terminal-header",{attrs:{text:t.header.text,toolbar:t.header.toolbar}}),t._v(" "),n("static-terminal-body",{attrs:{prompt:t.prompt,commands:t.commands}})],1)},a=[];r._withStripped=!0;var i={render:r,staticRenderFns:a};e.a=i}]);


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-static-terminal",
 3 |   "version": "1.0.2",
 4 |   "description": "A fully customizable static terminal component for vue.js",
 5 |   "keywords": ["vuejs", "terminal", "console"],
 6 |   "main": "dist/vue-static-terminal.js",
 7 |   "scripts": {
 8 |     "build": "webpack --config ./config/webpack.prod.config.js",
 9 |     "dev": "webpack-dev-server --config ./config/webpack.dev.config.js"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/cars10/vue-static-terminal.git"
14 |   },
15 |   "author": "Carsten König <carstenkoenig92@gmail.com>",
16 |   "license": "MIT",
17 |   "bugs": {
18 |     "url": "https://github.com/cars10/vue-static-terminal/issues"
19 |   },
20 |   "homepage": "https://github.com/cars10/vue-static-terminal#readme",
21 |   "dependencies": {},
22 |   "devDependencies": {
23 |     "babel": "^6.23.0",
24 |     "babel-core": "^6.26.0",
25 |     "babel-loader": "^7.1.2",
26 |     "babel-plugin-transform-runtime": "^6.23.0",
27 |     "babel-preset-es2015": "^6.24.1",
28 |     "css-loader": "^0.28.9",
29 |     "extract-text-webpack-plugin": "^3.0.2",
30 |     "html-webpack-plugin": "^2.30.1",
31 |     "vue": "^2.5.13",
32 |     "vue-loader": "^14.0.3",
33 |     "vue-template-compiler": "^2.5.13",
34 |     "webpack": "^3.10.0",
35 |     "webpack-dev-server": "^2.11.1",
36 |     "webpack-merge": "^4.1.1"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cars10/vue-static-terminal/475b1d282681a22fb03c50988395fab19202e437/screenshot.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <h1>Static terminal test</h1>
  4 |     <div class="row">
  5 |       <div class="col">
  6 |         Empty default
  7 |         <static-terminal></static-terminal>
  8 |       </div>
  9 | 
 10 |       <div class="col">
 11 |         Some commands
 12 |         <static-terminal :commands="basicExample"></static-terminal>
 13 |       </div>
 14 | 
 15 |       <div class="col">
 16 |         Custom prompt
 17 |         <static-terminal :commands="basicExample" :prompt="'#'"></static-terminal>
 18 |       </div>
 19 |     </div>
 20 | 
 21 |     <div class="row">
 22 |       <div class="col" style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);">
 23 |         <static-terminal :header="customExample.header" :commands="customExample.commands"
 24 |                          :prompt="customExample.prompt"></static-terminal>
 25 |       </div>
 26 |       <div class="col"></div>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <style>
 32 |   * {
 33 |     font-family: sans-serif;
 34 |   }
 35 | 
 36 |   .row {
 37 |     display: flex;
 38 |   }
 39 | 
 40 |   .col {
 41 |     flex: 1;
 42 |     margin: 20px;
 43 |   }
 44 | </style>
 45 | 
 46 | <script>
 47 |   import StaticTerminal from './components/StaticTerminal.vue'
 48 | 
 49 |   export default {
 50 |     data: () => {
 51 |       return {
 52 |         basicExample: [
 53 |           {
 54 |             command: 'whoami',
 55 |             result: 'root'
 56 |           },
 57 |           {
 58 |             command: 'uname -r',
 59 |             result: '4.15.1-2-ARCH'
 60 |           },
 61 |           {
 62 |             command: 'ls /',
 63 |             result: '<table><tr align="left"><th>bin</th><th>dev</th><th>home</th><th>lib64</th><th>mnt</th><th>proc</th><th>run</th><th>srv</th><th>tmp</th><th>var</th></tr><tr align="left"><th>boot</th><th>etc</th><th>lib</th><th>lost+found</th><th>opt</th><th>root</th><th>sbin</th><th>sys</th><th>usr</th></tr></table>'
 64 |           }
 65 |         ],
 66 |         customExample: {
 67 |           header: {
 68 |             text: 'someTerm',
 69 |             toolbar: '&#x2501;&nbsp;&nbsp;&#x2716;'
 70 |           },
 71 |           prompt: '<svg width="15" height="10" style="fill: #fff"><rect width="10" height="10"></rect><polygon points="10 0, 10 10, 15 5"></polygon></svg>',
 72 |           commands: [
 73 |             {
 74 |               command: 'whoami',
 75 |               result: 'root'
 76 |             },
 77 |             {
 78 |               command: 'uname -r',
 79 |               result: '4.15.1-2-ARCH'
 80 |             },
 81 |             {
 82 |               command: 'ls -a',
 83 |               result: '<strong>.</strong>&nbsp;&nbsp;<strong>..</strong>&nbsp;&nbsp;README.MD&nbsp;&nbsp;.gitignore&nbsp;&nbsp;<strong>src</strong>'
 84 |             },
 85 |             {
 86 |               command: 'asdf',
 87 |               result: 'command not found: asdf'
 88 |             },
 89 |             {
 90 |               prompt: '<svg width="15" height="10" style="fill: #fff"><rect width="10" height="10"></rect><polygon points="10 0, 10 10, 15 5"></polygon><line x1="2" y1="2" x2="8" y2="8" style="stroke:#f00; stroke-width:2"></line><line x1="2" y1="8" x2="8" y2="2" style="stroke:#f00; stroke-width:2"></line></svg>'
 91 |             }
 92 |           ]
 93 |         },
 94 |       }
 95 |     },
 96 |     components: {
 97 |       StaticTerminal
 98 |     }
 99 |   }
100 | </script>
101 | 


--------------------------------------------------------------------------------
/src/components/StaticTerminal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="static_terminal">
 3 |     <static-terminal-header :text="header.text" :toolbar="header.toolbar"></static-terminal-header>
 4 |     <static-terminal-body :prompt="prompt" :commands="commands"></static-terminal-body>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <style>
 9 |   .static_terminal {
10 |     background-color: #333;
11 |     border-radius: 2px;
12 |     color: #fff;
13 |     font-family: monospace;
14 |   }
15 | </style>
16 | 
17 | <script>
18 |   import StaticTerminalHeader from './staticTerminal/StaticTerminalHeader.vue'
19 |   import StaticTerminalBody from './staticTerminal/StaticTerminalBody.vue'
20 | 
21 |   export default {
22 |     props: {
23 |       header: {
24 |         default: () => {
25 |           return {}
26 |         }
27 |       },
28 |       prompt: {},
29 |       commands: {}
30 |     },
31 |     components: {
32 |       StaticTerminalHeader,
33 |       StaticTerminalBody
34 |     }
35 |   }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/components/staticTerminal/StaticTerminalBody.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="static_terminal__body">
 3 |     <div class="static_terminal__command_with_result" v-for="(command, _, index) in commands" :v-key="index">
 4 |       <static-terminal-command :prompt="command.prompt || prompt" :command="command.command"></static-terminal-command>
 5 |       <static-terminal-result :result="command.result"></static-terminal-result>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 |   .static_terminal__body {
12 |     min-height: 50px;
13 |     padding: 4px 6px;
14 |   }
15 | </style>
16 | 
17 | <script>
18 |   import StaticTerminalCommand from './StaticTerminalCommand.vue'
19 |   import StaticTerminalResult from './StaticTerminalResult.vue'
20 | 
21 |   export default {
22 |     props: {
23 |       commands: {
24 |         default: () => {
25 |           return [{}]
26 |         }
27 |       },
28 |       prompt: {}
29 |     },
30 |     components: {
31 |       StaticTerminalCommand,
32 |       StaticTerminalResult
33 |     }
34 |   }
35 | </script>
36 | 


--------------------------------------------------------------------------------
/src/components/staticTerminal/StaticTerminalCommand.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="static_terminal__command_with_prompt">
 3 |     <span class="static_terminal__prompt" v-html="prompt"></span>
 4 |     <span class="static_terminal__command" v-html="command"></span>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     props: {
11 |       prompt: {
12 |         default: '$'
13 |       },
14 |       command: {}
15 |     }
16 |   }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/components/staticTerminal/StaticTerminalHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="static_terminal__header">
 3 |     <span class="static_terminal__header__text" v-html="text"></span>
 4 |     <span class="static_terminal__header__toolbar" v-html="toolbar"></span>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <style>
 9 |   .static_terminal__header {
10 |     padding: 4px 8px 4px 6px;
11 |     background-color: #555;
12 |     border-radius: 2px 2px 0 0;
13 |     display: flex;
14 |     flex-direction: row;
15 |   }
16 | 
17 |   .static_terminal__header__toolbar {
18 |     margin-left: auto;
19 |   }
20 | </style>
21 | 
22 | <script>
23 |   export default {
24 |     props: {
25 |       text: {},
26 |       toolbar: {
27 |         default: '<span style="color: lightgrey;">&#9679;</span>&nbsp;&nbsp;<span>&#9679;</span>'
28 |       }
29 |     }
30 |   }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/components/staticTerminal/StaticTerminalResult.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="static_terminal__result" v-html="result"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 |   export default {
 7 |     props: ['result']
 8 |   }
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>vue-static-terminal</title>
 6 | </head>
 7 | <body>
 8 | <div id="app"></div>
 9 | </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | 
 4 | Vue.config.productionTip = false
 5 | 
 6 | new Vue({
 7 |   el: '#app',
 8 |   render: h => h(App)
 9 | })
10 | 


--------------------------------------------------------------------------------
/src/plugin.js:
--------------------------------------------------------------------------------
1 | import StaticTerminal from './components/StaticTerminal.vue';
2 | 
3 | module.exports = {
4 |   install: function (Vue, options) {
5 |     Vue.component('static-terminal', StaticTerminal);
6 |   }
7 | };
8 | 


--------------------------------------------------------------------------------