From 68a4326cc1033b46362ca54c535193a76a8a6529 Mon Sep 17 00:00:00 2001 From: Marty Wallace Date: Thu, 3 Nov 2016 12:19:05 +1100 Subject: [PATCH] Vue 2.0 support, better events, v-model binding. --- README.md | 17 ++++++++--------- bower.json | 11 +++++++++-- demo/basic.html | 25 +++++++++++-------------- dist/vue-keyboard.js | 2 +- package.json | 2 +- src/vue-keyboard.js | 24 ++++++++++-------------- 6 files changed, 40 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 2231994..b806365 100644 --- 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: ``` - + ``` 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. \ No newline at end of file diff --git a/bower.json b/bower.json index 113b4d7..4102548 100644 --- 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 index 1d7dbf2..c56164d 100644 --- a/demo/basic.html +++ b/demo/basic.html @@ -5,30 +5,27 @@ Keyboard Demo - -

${ input }

+
+ +

{{ input }}

+
- - +