Minified.

Author: Marty Wallace

.gitignore

@@ -1,2 +1,3 @@
 bower_components
+node_modules
 .DS_Store

bower.json

@@ -3,5 +3,6 @@
   "version": "1.0.0",
   "dependencies": {
     "vue": "^1.0.26"
-  }
+  },
+  "main": "dist/vue-keyboard.js"
 }

demo/basic.html

@@ -9,7 +9,7 @@
 		<p>{{ input }}</p>
 
 		<script src="../bower_components/vue/dist/vue.min.js"></script>
-		<script src="../src/vue-keyboard.js"></script>
+		<script src="../dist/vue-keyboard.js"></script>
 
 		<script>
 			var app = new Vue({

dist/vue-keyboard.js

@@ -0,0 +1,18 @@
+'use strict';
+
+const gulp = require('gulp');
+const babel = require('gulp-babel');
+const uglify = require('gulp-uglify');
+
+gulp.task('js', () => {
+	return gulp.src('./src/vue-keyboard.js')
+		.pipe(babel({ presets: ['es2015'] }))
+		.pipe(uglify())
+		.pipe(gulp.dest('./dist'));
+});
+
+gulp.task('watch', () => {
+	gulp.watch('./src/vue-keyboard.js', ['js']);
+});
+
+gulp.task('default', ['js', 'watch']);

gulpfile.js

@@ -0,0 +1,10 @@
+{
+	"name": "vue-keyboard",
+	"version": "1.0.0",
+	"devDependencies": {
+		"gulp": "^3.9.1",
+		"gulp-uglify": "1.5.*",
+		"gulp-babel": "^6.1.2",
+		"babel-preset-es2015": "^6.9.0"
+	}
+}

package.json

@@ -1,5 +1,5 @@
-(function() {
-	window.Keyboard = Vue.component('keyboard', Vue.extend({
+(() => {
+	window.VueKeyboard = Vue.component('keyboard', Vue.extend({
 		template: '<div class="keyboard"><div v-for="row in renderChars()"><button v-for="char in row" :class="char.class" @click="char.action">{{ char.value }}</button></div></div>',
 
 		props: {
@@ -14,20 +14,20 @@
 		},
 
 		methods: {
-			renderChars: function() {
-				var lines = this.chars.split('|');
+			renderChars() {
+				let lines = this.chars.split('|');
 
-				return lines.map(function(chars) {
-					var stream = chars.split('');
-					var buttons = [];
-					var token = null;
+				return lines.map((chars) => {
+					let stream = chars.split('');
+					let buttons = [];
+					let token = null;
 
-					stream.forEach(function(char) {
+					stream.forEach((char) => {
 						if (char === '{') {
 							token = '';
 						} else if (char === '}') {
-							var command = (/(\w+):(\w+)/g).exec(token);
-							var action = null;
+							let command = (/(\w+):(\w+)/g).exec(token);
+							let action = null;
 
 							if (this.hasOwnProperty(command[2])) {
 								action = this[command[2]].bind(this);
@@ -52,25 +52,25 @@
 								});
 							}
 						}
-					}, this);
+					});
 
 					return buttons;
-				}, this);
+				});
 			},
 
-			append: function(char) {
+			append(char) {
 				this.value += char;
 			},
 
-			backspace: function() {
+			backspace() {
 				this.value = this.value.slice(0, this.value.length - 1);
 			},
 
-			space: function() {
+			space() {
 				this.value += ' ';
 			},
 
-			clear: function() {
+			clear() {
 				this.value = '';
 			}
 		}