Vue 2.0 support, better events, v-model binding.

martywallace · Nov 3, 2016 · 68a4326 · 68a4326
1 parent 6b4dcbb
commit 68a4326
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -41,8 +41,7 @@ In regards to styling and interacting with the component, there are several rout
 
 * Buttons rendered with the `{text:action}` syntax will include a class name `action-x` where `x` is the name of the action e.g. `action-clear`.
 * General buttons will include a class name `char-x` where `x` is the text content e.g. `char-a`, `char-b`.
-* A `mutate` event is dispatched by the component whenever the `value` changes. The keyboard component will be provided to the listener as the first argument.
-* You can use `:value.sync="x"` to sync the keyboard value with a value in the parent Vue instance.
+* You can use `v-model="input"` to sync the keyboard value with a value in the parent Vue instance (named `input` in this case).
 
 ## Example:
 
@@ -52,17 +51,17 @@ JavaScript:
 
 ```
 var app = new Vue({
-	el: 'body',
+	el: 'main',
 	data: {
 		input: ''
 	},
-	events: {
-		mutate: function(keyboard) {
-			// Limit to 16 chars.
-			keyboard.value = keyboard.value.slice(0, 16);
+	methods: {
+		append: function(char) {
+			console.log('Appended ' + char);
 		},
+
 		custom: function(keyboard) {
-			console.log('Custom button pressed. The current value is ' + keyboard.value);
+			console.log(keyboard.value);
 		}
 	}
 });
@@ -71,7 +70,7 @@ var app = new Vue({
 Markup:
 
 ```
-<keyboard chars="qwertyuiop{backspace:backspace}|asdfghjkl|zxcvbnm|{space:space}{custom:custom}" :value.sync="input"></keyboard>
+<keyboard v-model="input" @append="append" @custom="custom" chars="qwertyuiop{backspace:backspace}|asdfghjkl|zxcvbnm|{space:space}{custom:custom}" :maxlength="5"></keyboard>
 ```
 
 This keeps the `input` value in the main application in sync with the value of the keyboard, limits that value to 16 characters and triggers the 'custom' function in the main application when the "custom" button in the keyboard is clicked.
diff --git a/bower.json b/bower.json
@@ -1,8 +1,15 @@
 {
   "name": "vue-keyboard",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "homepage": "https://github.com/MartyWallace/vue-keyboard",
   "main": "dist/vue-keyboard.js",
   "license": "MIT",
-  "ignore": ["package.json", "demo"]
+  "ignore": [
+    "package.json",
+    "demo",
+    "src"
+  ],
+  "dependencies": {
+    "vue": "^2.0.3"
+  }
 }
diff --git a/demo/basic.html b/demo/basic.html
@@ -5,30 +5,27 @@
 		<title>Keyboard Demo</title>
 	</head>
 	<body>
-		<keyboard chars="qwertyuiop{backspace:backspace}|asdfghjkl|zxcvbnm|{space:space}{custom:custom}" :maxlength="5" :value.sync="input"></keyboard>
-		<p>${ input }</p>
+		<main>
+			<keyboard v-model="input" @append="append" @custom="custom" chars="qwertyuiop{backspace:backspace}|asdfghjkl|zxcvbnm|{space:space}{custom:custom}" :maxlength="5"></keyboard>
+			<p>{{ input }}</p>
+		</main>
 
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
-		<script>
-			// Need to have this here so the Keyboard component will know what the delimiters should be. See:
-			// http://stackoverflow.com/questions/39112541/correct-way-to-reference-up-to-date-vue-delimiters-in-a-component
-			// https://github.com/vuejs/vue/issues/918
-			Vue.config.delimiters = ['${', '}'];
-		</script>
+		<script src="../bower_components/vue/dist/vue.js"></script>
 		<script src="../dist/vue-keyboard.js"></script>
 
 		<script>
 			var app = new Vue({
-				el: 'body',
+				el: 'main',
 				data: {
 					input: ''
 				},
-				events: {
-					mutate: function(keyboard) {
-						//
+				methods: {
+					append: function(char) {
+						console.log('Appended ' + char);
 					},
+
 					custom: function(keyboard) {
-						console.log('Custom button pressed. The current value is ' + keyboard.value);
+						console.log(keyboard.value);
 					}
 				}
 			});

diff --git a/dist/vue-keyboard.js b/dist/vue-keyboard.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-keyboard",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"devDependencies": {
 		"gulp": "^3.9.1",
 		"gulp-uglify": "1.5.*",

diff --git a/src/vue-keyboard.js b/src/vue-keyboard.js
@@ -1,29 +1,24 @@
 (() => {
 	window.VueKeyboard = Vue.component('keyboard', {
-		template: (() => {
-			// For this to work correctly, the delimiters need to be changed before the component is
-			// registered on the page.
-			const a =  Vue.config.delimiters[0];
-			const b =  Vue.config.delimiters[1];
-
-			return '<div class="keyboard"><div v-for="row in renderChars()"><button v-for="btn in row" :class="btn.class" @click="btn.action">' + a + ' btn.value ' + b + '</button></div></div>';
-		})(),
+		template: '<div class="keyboard"><div v-for="row in renderChars()"><button v-for="btn in row" :class="btn.class" @click="btn.action">{{ btn.value }}</button></div></div>',
 
 		props: {
 			chars: {
 				type: String,
 				required: true
 			},
-			value: {
-				type: String,
-				default: ''
-			},
 			maxlength: {
 				type: Number,
 				default: 0
 			}
 		},
 
+		data() {
+			return {
+				value: ''
+			};
+		},
+
 		methods: {
 			renderChars() {
 				let lines = this.chars.split('|');
@@ -45,7 +40,7 @@
 							if (this.hasOwnProperty(action)) {
 								method = this[action].bind(this);
 							} else {
-								method = this.$dispatch.bind(this, action, this);
+								method = this.$emit.bind(this, action, this);
 							}
 
 							buttons.push({
@@ -79,11 +74,12 @@
 					this.value = this.value.slice(0, this.maxlength);
 				}
 
-				this.$dispatch('mutate', this);
+				this.$emit('input', this.value);
 			},
 
 			append(char) {
 				this.mutate(this.value + char);
+				this.$emit('append', char);
 			},
 
 			backspace() {