Maximum length can be specified as a prop.

Marty Wallace · Marty Wallace · commit aebaf1a681c9 · 2016-08-31T11:36:44.000+10:00
diff --git a/README.md b/README.md
@@ -26,6 +26,15 @@ If the `action` does not match any of these inbuilt actions, an event will be di
 
 > 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.
 
+## Props.
+
+The possible component properties are:
+
+* `chars` - The character list (explained above).
+* `maxlength` - The maximum length of `value`.
+
+> Note: Because `maxlength` is a `Number` you must provide it with the vye dynamic syntax e.g. `<keyboard :maxlength="10">` not `<keyboard maxlength="10">` (the latter will be interpreted as a `String`).
+
 ## Interacting:
 
 In regards to styling and interacting with the component, there are several routes:
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-keyboard",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "homepage": "https://github.com/MartyWallace/vue-keyboard",
   "main": "dist/vue-keyboard.js",
   "license": "MIT",
diff --git a/demo/basic.html b/demo/basic.html
@@ -5,7 +5,7 @@
 		<title>Keyboard Demo</title>
 	</head>
 	<body>
-		<keyboard chars="qwertyuiop{backspace:backspace}|asdfghjkl|zxcvbnm|{space:space}{custom:custom}" :value.sync="input"></keyboard>
+		<keyboard chars="qwertyuiop{backspace:backspace}|asdfghjkl|zxcvbnm|{space:space}{custom:custom}" :maxlength="5" :value.sync="input"></keyboard>
 		<p>${ input }</p>
 
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
@@ -25,8 +25,7 @@
 				},
 				events: {
 					mutate: function(keyboard) {
-						// Limit to 16 chars.
-						keyboard.value = keyboard.value.slice(0, 16);
+						//
 					},
 					custom: function(keyboard) {
 						console.log('Custom button pressed. The current value is ' + 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.2.0",
+	"version": "1.3.0",
 	"devDependencies": {
 		"gulp": "^3.9.1",
 		"gulp-uglify": "1.5.*",
diff --git a/src/vue-keyboard.js b/src/vue-keyboard.js
@@ -17,6 +17,10 @@
 			value: {
 				type: String,
 				default: ''
+			},
+			maxlength: {
+				type: Number,
+				default: 0
 			}
 		},
 
@@ -70,6 +74,11 @@
 
 			mutate(value) {
 				this.value = value;
+
+				if (this.maxlength > 0) {
+					this.value = this.value.slice(0, this.maxlength);
+				}
+
 				this.$dispatch('mutate', this);
 			},
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-keyboard",`
`3`		`- "version": "1.2.0",`
	`3`	`+ "version": "1.3.0",`
`4`	`4`	`"homepage": "https://github.com/MartyWallace/vue-keyboard",`
`5`	`5`	`"main": "dist/vue-keyboard.js",`
`6`	`6`	`"license": "MIT",`