Skip to content

Commit c054d25

Browse files
author
Marty Wallace
committed
1.2.
1 parent 49d3189 commit c054d25

File tree

6 files changed

+77
-14
lines changed

6 files changed

+77
-14
lines changed

‎README.md

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
A simple virtual keyboard for Vue.js.
44

5+
## Install:
6+
7+
This component is available through [Bower](https://bower.io/search/?q=vue-keyboard):
8+
9+
$ bower install --save vue-keyboard
10+
511
## Usage:
612

713
Simply add the `keyboard` component to your Vue application:
@@ -10,12 +16,53 @@ Simply add the `keyboard` component to your Vue application:
1016
<keyboard chars="abc123|xyz456|{space:space}"></keyboard>
1117
```
1218

13-
The `chars` property accepts a pipe `|` delimited string of characters to use as the keyboard buttons. You can include special function characters with the `{text:action}` syntax, where `text` is the text that will be rendered in the button and `action` is the action within the keyboard component to be called when that button is pressed. The actions are:
19+
The `chars` property accepts a pipe `|` delimited string of characters to use as the keyboard buttons. You can include special function characters with the `{text:action}` syntax, where `text` is the text that will be rendered in the button and `action` is the action within the keyboard component to be called when that button is pressed. The inbuilt actions are:
1420

1521
* `backspace` - Remove one character from the end of the current value.
1622
* `space` - Insert one whitespace character.
1723
* `clear` - Clear the entire input value.
1824

19-
> 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.
25+
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 as the event name. The keyboard component will be provided to the listener as the first argument.
26+
27+
> Note: You can simply use `{action}` which will create a button with no text content. This is useful for things like `space` which you may just want to render as a wide empty button.
28+
29+
## Interacting:
30+
31+
In regards to styling and interacting with the component, there are several routes:
32+
33+
* 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`.
34+
* General buttons will include a class name `char-x` where `x` is the text content e.g. `char-a`, `char-b`.
35+
* 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.
36+
* You can use `:value.sync="x"` to sync the keyboard value with a value in the parent Vue instance.
37+
38+
## Example:
39+
40+
Here is an example application containing a `keyboard` component:
41+
42+
JavaScript:
43+
44+
```
45+
var app = new Vue({
46+
el: 'body',
47+
data: {
48+
input: ''
49+
},
50+
events: {
51+
mutate: function(keyboard) {
52+
// Limit to 16 chars.
53+
keyboard.value = keyboard.value.slice(0, 16);
54+
},
55+
custom: function(keyboard) {
56+
console.log('Custom button pressed. The current value is ' + keyboard.value);
57+
}
58+
}
59+
});
60+
```
61+
62+
Markup:
63+
64+
```
65+
<keyboard chars="qwertyuiop{backspace:backspace}|asdfghjkl|zxcvbnm|{space:space}{custom:custom}" :value.sync="input"></keyboard>
66+
```
2067

21-
Buttons rendered with this syntax will include a class name `action-<x>` where `<x>` is the name of the action e.g. `action-clear`.
68+
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.

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-keyboard",
3-
"version": "1.1.0",
3+
"version": "1.2.0",
44
"homepage": "https://github.com/MartyWallace/vue-keyboard",
55
"main": "dist/vue-keyboard.js",
66
"license": "MIT",

‎demo/basic.html

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,16 @@
55
<title>Keyboard Demo</title>
66
</head>
77
<body>
8-
<keyboard chars="qwertyuiop{clear:clear}|asdfghjkl{backspace}|zxcvbnm|{space:space}{test:test}" :value.sync="input"></keyboard>
8+
<keyboard chars="qwertyuiop{backspace:backspace}|asdfghjkl|zxcvbnm|{space:space}{custom:custom}" :value.sync="input"></keyboard>
99
<p>${ input }</p>
1010

1111
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
12-
<script>Vue.config.delimiters = ['${', '}'];</script>
12+
<script>
13+
// Need to have this here so the Keyboard component will know what the delimiters should be. See:
14+
// http://stackoverflow.com/questions/39112541/correct-way-to-reference-up-to-date-vue-delimiters-in-a-component
15+
// https://github.com/vuejs/vue/issues/918
16+
Vue.config.delimiters = ['${', '}'];
17+
</script>
1318
<script src="../dist/vue-keyboard.js"></script>
1419

1520
<script>
@@ -19,8 +24,12 @@
1924
input: ''
2025
},
2126
events: {
22-
test: function(keyboard) {
23-
console.log(keyboard.value);
27+
mutate: function(keyboard) {
28+
// Limit to 16 chars.
29+
keyboard.value = keyboard.value.slice(0, 16);
30+
},
31+
custom: function(keyboard) {
32+
console.log('Custom button pressed. The current value is ' + keyboard.value);
2433
}
2534
}
2635
});

‎dist/vue-keyboard.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-keyboard",
3-
"version": "1.1.0",
3+
"version": "1.2.0",
44
"devDependencies": {
55
"gulp": "^3.9.1",
66
"gulp-uglify": "1.5.*",

‎src/vue-keyboard.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
(() => {
22
window.VueKeyboard = Vue.component('keyboard', {
33
template: (() => {
4+
// For this to work correctly, the delimiters need to be changed before the component is
5+
// registered on the page.
46
const a = Vue.config.delimiters[0];
57
const b = Vue.config.delimiters[1];
68

@@ -66,20 +68,25 @@
6668
});
6769
},
6870

71+
mutate(value) {
72+
this.value = value;
73+
this.$dispatch('mutate', this);
74+
},
75+
6976
append(char) {
70-
this.value += char;
77+
this.mutate(this.value + char);
7178
},
7279

7380
backspace() {
74-
this.value = this.value.slice(0, this.value.length - 1);
81+
this.mutate(this.value.slice(0, this.value.length - 1));
7582
},
7683

7784
space() {
78-
this.value += ' ';
85+
this.append(' ');
7986
},
8087

8188
clear() {
82-
this.value = '';
89+
this.mutate('');
8390
}
8491
}
8592
});

0 commit comments

Comments
 (0)