Skip to content

Commit 0d32495

Browse files
author
simple-keyboard
committed
Initial commit
1 parent 314b8b3 commit 0d32495

File tree

9 files changed

+311
-2
lines changed

9 files changed

+311
-2
lines changed

‎README.md

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,47 @@
1-
# vue-simple-keyboard-multiple-inputs
2-
Created with CodeSandbox
1+
<p><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/vue.png" width="60" align="center" /></p>
2+
<a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simplekeyboard-banner3x.png" align="center" width="100%"></a>
3+
4+
<p>
5+
<blockquote><strong>This is a repository for simple-keyboard's Vue.js demos</strong> <br /> https://virtual-keyboard.js.org/vuejs</blockquote>
6+
</p>
7+
8+
> **Have an issue or question? [Please post it in the main repository.](https://github.com/hodgef/simple-keyboard/issues)**
9+
10+
<br />
11+
12+
## 📦 Get started with simple-keyboard
13+
14+
Check out the [Getting Started](https://simple-keyboard.com/getting-started) docs to begin.
15+
16+
## 📖 Documentation
17+
Check out the [simple-keyboard documentation](https://simple-keyboard.com/documentation) site.
18+
19+
Feel free to browse the [Q&A / Use-cases](https://simple-keyboard.com/qa-use-cases/) page for advanced use-cases.
20+
21+
## 🚀 Demo
22+
23+
[https://simple-keyboard.com/demo](https://simple-keyboard.com/demo)
24+
25+
26+
### To run the Vue demos on your own computer
27+
28+
* Clone this repository
29+
* `npm install`
30+
* `npm start`
31+
* Visit [http://localhost:4200/](http://localhost:4200/)
32+
33+
### All simple-keyboard versions
34+
35+
* [Vanilla](https://virtual-keyboard.js.org)
36+
* [React.js](https://virtual-keyboard.js.org/react)
37+
* [Angular](https://virtual-keyboard.js.org/angular)
38+
* [Vue.js](https://virtual-keyboard.js.org/vuejs)
39+
40+
### Questions?
41+
42+
<a href="http://franciscohodge.com/simple-keyboard/chat/join" title="Join our Discord chat" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/discord.png" align="center" width="200"></a>
43+
44+
## ✅ Contributing
45+
46+
PR's and issues are welcome. Feel free to submit any issues you have at:
47+
[https://github.com/hodgef/simple-keyboard/issues](https://github.com/hodgef/simple-keyboard/issues)

‎package.json

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "vue-simple-keyboard",
3+
"version": "2.0.0",
4+
"description": "Javascript Virtual Keyboard for Kiosks, Mobile and Web",
5+
"keywords": [
6+
"virtual",
7+
"keyboard",
8+
"onscreen",
9+
"kiosk"
10+
],
11+
"private": true,
12+
"scripts": {
13+
"serve": "vue-cli-service serve",
14+
"build": "vue-cli-service build",
15+
"lint": "vue-cli-service lint"
16+
},
17+
"dependencies": {
18+
"simple-keyboard": "latest",
19+
"vue": "^2.5.22"
20+
},
21+
"devDependencies": {
22+
"@vue/cli-plugin-babel": "3.6.0",
23+
"@vue/cli-plugin-eslint": "3.6.0",
24+
"@vue/cli-service": "3.6.0",
25+
"babel-eslint": "^10.0.1",
26+
"eslint": "^5.8.0",
27+
"eslint-plugin-vue": "^5.0.0",
28+
"vue-template-compiler": "^2.5.21"
29+
},
30+
"eslintConfig": {
31+
"root": true,
32+
"env": {
33+
"node": true
34+
},
35+
"extends": ["plugin:vue/essential", "eslint:recommended"],
36+
"rules": {},
37+
"parserOptions": {
38+
"parser": "babel-eslint"
39+
}
40+
},
41+
"postcss": {
42+
"plugins": {
43+
"autoprefixer": {}
44+
}
45+
},
46+
"browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
47+
}

‎public/favicon.ico

1.12 KB
Binary file not shown.

‎public/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title>codesandbox</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but codesandbox doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎src/App.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
input {
2+
width: 100%;
3+
height: 100px;
4+
padding: 20px;
5+
font-size: 20px;
6+
border: none;
7+
box-sizing: border-box;
8+
}
9+
10+
.simple-keyboard {
11+
max-width: 850px;
12+
}

‎src/App.vue

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div id="app">
3+
<div v-for="key in Object.keys(inputs)" :key="key">
4+
<Input
5+
:inputs="inputs"
6+
:inputName="key"
7+
@onInputFocus="onInputFocus"
8+
@onInputChange="onInputChange"
9+
/>
10+
</div>
11+
12+
<SimpleKeyboard
13+
@onChange="onChange"
14+
@onKeyPress="onKeyPress"
15+
:input="inputs[inputName]"
16+
:inputName="inputName"
17+
/>
18+
</div>
19+
</template>
20+
21+
<script>
22+
import SimpleKeyboard from "./SimpleKeyboard";
23+
import Input from "./Input";
24+
import "./App.css";
25+
26+
export default {
27+
name: "App",
28+
components: {
29+
SimpleKeyboard,
30+
Input
31+
},
32+
data: () => ({
33+
/**
34+
* We define the inputs here
35+
*/
36+
inputs: {
37+
input1: "",
38+
input2: ""
39+
},
40+
inputName: "input1"
41+
}),
42+
methods: {
43+
onChange(input) {
44+
this.inputs[this.inputName] = input;
45+
},
46+
onKeyPress(button) {
47+
console.log("button", button);
48+
},
49+
onInputChange(input) {
50+
console.log("Input changed directly:", input.target.id);
51+
this.inputs[input.target.id] = input.target.value;
52+
},
53+
onInputFocus(input) {
54+
console.log("Focused input:", input.target.id);
55+
this.inputName = input.target.id;
56+
}
57+
}
58+
};
59+
</script>
60+
61+
<style>
62+
#app {
63+
font-family: "Avenir", Helvetica, Arial, sans-serif;
64+
-webkit-font-smoothing: antialiased;
65+
-moz-osx-font-smoothing: grayscale;
66+
}
67+
</style>

‎src/Input.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<input
3+
:id="inputName"
4+
:value="inputValue"
5+
:placeholder="'Input: '+ inputName"
6+
@focus="onInputFocus"
7+
@input="onInputChange"
8+
>
9+
</template>
10+
11+
<script>
12+
export default {
13+
name: "Input",
14+
props: {
15+
inputs: {
16+
type: Object
17+
},
18+
inputName: {
19+
type: String
20+
}
21+
},
22+
methods: {
23+
onInputChange(input) {
24+
this.$emit("onInputChange", input);
25+
},
26+
onInputFocus(input) {
27+
this.$emit("onInputFocus", input);
28+
}
29+
},
30+
computed: {
31+
inputValue: function () {
32+
return this.inputs[this.inputName];
33+
}
34+
}
35+
};
36+
</script>
37+
38+
<!-- Add "scoped" attribute to limit CSS to this component only -->
39+
<style scoped>
40+
</style>

‎src/SimpleKeyboard.vue

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<div :class="keyboardClass"></div>
3+
</template>
4+
5+
<script>
6+
import Keyboard from "simple-keyboard";
7+
import "simple-keyboard/build/css/index.css";
8+
9+
export default {
10+
name: "SimpleKeyboard",
11+
props: {
12+
keyboardClass: {
13+
default: "simple-keyboard",
14+
type: String
15+
},
16+
input: {
17+
type: String
18+
},
19+
inputName: {
20+
type: String
21+
}
22+
},
23+
data: () => ({
24+
keyboard: null
25+
}),
26+
mounted() {
27+
this.keyboard = new Keyboard({
28+
onChange: this.onChange,
29+
onKeyPress: this.onKeyPress,
30+
inputName: this.inputName
31+
});
32+
},
33+
methods: {
34+
onChange(input) {
35+
this.$emit("onChange", input);
36+
},
37+
onKeyPress(button) {
38+
this.$emit("onKeyPress", button);
39+
40+
/**
41+
* If you want to handle the shift and caps lock buttons
42+
*/
43+
if (button === "{shift}" || button === "{lock}") this.handleShift();
44+
},
45+
handleShift() {
46+
let currentLayout = this.keyboard.options.layoutName;
47+
let shiftToggle = currentLayout === "default" ? "shift" : "default";
48+
49+
this.keyboard.setOptions({
50+
layoutName: shiftToggle
51+
});
52+
}
53+
},
54+
watch: {
55+
inputName(inputName) {
56+
console.log("SimpleKeyboard: inputName updated", inputName);
57+
this.keyboard.setOptions({ inputName });
58+
},
59+
input(input) {
60+
console.log(
61+
"SimpleKeyboard: input Updated",
62+
this.keyboard.options.inputName,
63+
input
64+
);
65+
this.keyboard.setInput(input);
66+
}
67+
}
68+
};
69+
</script>
70+
71+
<!-- Add "scoped" attribute to limit CSS to this component only -->
72+
<style scoped>
73+
</style>

‎src/main.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from "vue";
2+
import App from "./App.vue";
3+
4+
Vue.config.productionTip = false;
5+
6+
new Vue({
7+
render: h => h(App)
8+
}).$mount("#app");

0 commit comments

Comments
 (0)