Add russian language to layouts.

README.md

@@ -1,6 +1,6 @@
 # vue-touch-keyboard [![NPM version](https://img.shields.io/npm/v/vue-touch-keyboard.svg)](https://www.npmjs.com/package/vue-touch-keyboard) ![VueJS v2.x compatible](https://img.shields.io/badge/vue%202.x-compatible-green.svg)
 
-Virtual keyboard component for Vue.js v2.x. Designed to Raspberry Pi Touch Display
+This is a fork of Virtual keyboard component for Vue.js v2.x. Designed to Raspberry Pi Touch Display
 
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/5f3594b30dd4489094730fa2babd7ba5)](https://www.codacy.com/app/mereg-norbert/vue-touch-keyboard?utm_source=github.com&utm_medium=referral&utm_content=icebob/vue-touch-keyboard&utm_campaign=Badge_Grade)
 [![Build Status](https://travis-ci.org/icebob/vue-touch-keyboard.svg?branch=master)](https://travis-ci.org/icebob/vue-touch-keyboard)
@@ -11,8 +11,6 @@ Virtual keyboard component for Vue.js v2.x. Designed to Raspberry Pi Touch Displ
 [![devDependency Status](https://david-dm.org/icebob/vue-touch-keyboard/dev-status.svg)](https://david-dm.org/icebob/vue-touch-keyboard#info=devDependencies)
 [![Downloads](https://img.shields.io/npm/dt/vue-touch-keyboard.svg)](https://www.npmjs.com/package/vue-touch-keyboard)
 
-**If you like my work, please [donate](https://www.paypal.me/meregnorbert). Thank you!**
-
 ## Demo
 [JSFiddle demo](https://jsfiddle.net/icebob/88n7c1L8/)
 [Codepen demo](https://codepen.io/alvidr/pen/JBEmdR/)
@@ -35,7 +33,7 @@ $ npm install vue-touch-keyboard
 ### Manual
 Download zip package and unpack and add the `vue-touch-keyboard.css` and `vue-touch-keyboard.js` file to your project from dist folder.
 ```
-https://github.com/icebob/vue-touch-keyboard/archive/master.zip
+https://github.com/vvxcoder/vue-touch-keyboard/archive/master.zip
 ```
 
 ## Usage
@@ -134,6 +132,6 @@ vue-touch-keyboard is available under the [MIT license](https://tldrlegal.com/li
 
 ## Contact
 
-Copyright (C) 2016 Icebob
+Copyright (C) 2021 Vvxcoder
 
 [![@icebob](https://img.shields.io/badge/github-icebob-green.svg)](https://github.com/icebob) [![@icebob](https://img.shields.io/badge/twitter-Icebobcsi-blue.svg)](https://twitter.com/Icebobcsi)

dev/app.vue

@@ -10,19 +10,32 @@
 				legend Normal layout
 				input#text.input(type="text", placeholder="Text input", @focus="show", data-layout="normal")
 
+			fieldset
+				legend Normal next_off layout
+				input#text.input(type="text", placeholder="Text input", @focus="show", data-layout="normal_next_off")
+
 			fieldset
 				legend Compact layout
 				input.input(type="text", placeholder="Text input", @focus="show", data-layout="compact", maxlength="5")
 
+			fieldset
+				legend Compact next_off layout
+				input.input(type="text", placeholder="Text input", @focus="show", data-layout="compact_next_off", maxlength="5")
+
 			fieldset
 				legend Numeric layout
 				input.input(type="number", placeholder="Number input", number, @focus="show", data-layout="numeric")
 
+			fieldset
+				legend Numeric next_off layout
+				input.input(type="number", placeholder="Number input", number, @focus="show", data-layout="numeric_next_off")
+
 			fieldset
 				legend Password with compact layout
 				input.input(type="password", placeholder="Password input", @focus="show", data-layout="compact")
 
-		vue-touch-keyboard#keyboard(v-if="visible", :layout="layout", :cancel="hide", :accept="accept", :input="input", :next="next", :options="options")
+		vue-touch-keyboard#keyboard(v-if="visible", :layout="layout", :cancel="hide", :enter="enter",
+									:accept="accept", :input="input", :next="next", :options="options")
 
 </template>
 
@@ -35,30 +48,24 @@
 	Vue.use(VueTouchKeyboard);
 
 	export default {
-
 		data() {
 			return {
 				visible: false,
 				allLayouts: VueTouchKeyboard.layouts,
-				//layout: VueTouchKeyboard.layouts["compact"],
-				layout: "mini",
+				layout: "normal",
 				input: null,
 				options: {
 					useKbEvents: true
-				}			
+				},
 			}
 		},
-
 		methods: {
 			hide() {
 				this.visible = false;
 			},	
-
 			accept(text) {
-				//alert("Input text: " + text);
 				this.hide();
 			},
-
 			next() {
 				let inputs = document.querySelectorAll("input");
 				let found = false;
@@ -75,7 +82,6 @@
 					this.hide();
 				}
 			},
-
 			show(e) {
 				this.input = e.target;
 				this.layout = e.target.dataset.layout;
@@ -86,23 +92,20 @@
 				this.$nextTick(() => {
 					this.input.scrollIntoView();
 				});				
-			}		 
+			},
+			enter() {},
 		},
-
 		mounted() {
 			window.app = this;
 			this.$nextTick(() => {
 				this.input = document.querySelector("input#text");
 				this.input.focus();
-				//this.visible = true;
 			});
 		}
 	}
-
 </script>
 
 <style lang="sass">
-
 	html {
 		font-family: "Arial", sans-serif;
 		font-size: 16px;
@@ -115,12 +118,16 @@
 	}
 
 	.content {
+		display: flex;
+    	flex-wrap: wrap;
+
 		text-align: center;
-		position: absolute;
-		left: 0; right: 0; top: 0; bottom: 0;
 		overflow: auto;
 
 		&.hasKeyboard {
+			display: flex;
+    		flex-wrap: wrap;
+
 			bottom: 18em;
 		}
 	}
@@ -146,9 +153,10 @@
 
 	fieldset {
 		display: block;
+		height: 300px;
 		width: 300px;
 		padding: 15px;
-		margin: 15px auto;
+		margin: 10px;
 		border-style: solid;
 		background-color: #fff;
 		border-color: #ddd;
@@ -177,5 +185,4 @@
 			box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);			
 		}
 	}
-
 </style>