Provide custom functionality to events.

Marty Wallace · Marty Wallace · commit 34b777317c83 · 2016-08-23T17:55:25.000+10:00
diff --git a/README.md b/README.md
@@ -14,4 +14,8 @@ The `chars` property accepts a pipe `|` delimited string of characters to use as
 
 * `backspace` - Remove one character from the end of the current value.
 * `space` - Insert one whitespace character.
-* `clear` - Clear the entire input value.
+* `clear` - Clear the entire input value.
+
+> If the `action` does not match any of these inbuilt actions, an event will be dispatched by the keyboard component instead, using the action name. The keyboard component will be provided to the listener as the first argument.
+
+Buttons rendered with this syntax will include a class name `action-<x>` where `<x>` is the name of the action e.g. `action-clear`.
diff --git a/demo/basic.html b/demo/basic.html
@@ -5,7 +5,7 @@
 		<title>Keyboard Demo</title>
 	</head>
 	<body>
-		<keyboard chars="qwertyuiop{clear:clear}|asdfghjkl{backspace:backspace}|zxcvbnm|{space:space}" :value.sync="input"></keyboard>
+		<keyboard chars="qwertyuiop{clear:clear}|asdfghjkl{backspace:backspace}|zxcvbnm|{space:space}{test:test}" :value.sync="input"></keyboard>
 		<p>{{ input }}</p>
 
 		<script src="../bower_components/vue/dist/vue.min.js"></script>
@@ -14,7 +14,14 @@
 		<script>
 			var app = new Vue({
 				el: 'body',
-				input: ''
+				data: {
+					input: ''
+				},
+				events: {
+					test: function(keyboard) {
+						console.log(keyboard.value);
+					}
+				}
 			});
 		</script>
 	</body>
diff --git a/src/vue-keyboard.js b/src/vue-keyboard.js
@@ -27,10 +27,17 @@
 							token = '';
 						} else if (char === '}') {
 							var command = (/(\w+):(\w+)/g).exec(token);
+							var action = null;
+
+							if (this.hasOwnProperty(command[2])) {
+								action = this[command[2]].bind(this);
+							} else {
+								action = this.$dispatch.bind(this, command[2], this);
+							}
 
 							buttons.push({
 								class: 'action-' + command[2].replace(/\s+/g, '-').toLowerCase(),
-								action: this[command[2]].bind(this),
+								action: action,
 								value: command[1]
 							});
 							
