├── .github
    └── FUNDING.yml
├── .stackblitzrc
├── README.md
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.css
    ├── App.vue
    ├── SimpleKeyboard.vue
    └── main.js
└── vue.config.js


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | custom: https://hge.to/thanks
2 | 


--------------------------------------------------------------------------------
/.stackblitzrc:
--------------------------------------------------------------------------------
1 | {
2 |   "startCommand": "npm run serve"
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p><img src="https://i.imgur.com/4TI2V2R.png" width="60" align="center" /></p>
 2 | <a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://i.imgur.com/s7iV02b.jpg" 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? Join the chat
41 | 
42 | <a href="https://discordapp.com/invite/SJexsCG" title="Join our Discord chat" target="_blank"><img src="https://discordapp.com/api/guilds/498978399801573396/widget.png?style=banner2" align="center"></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)
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 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": "NODE_OPTIONS='--openssl-legacy-provider' vue-cli-service serve",
14 |     "build": "NODE_OPTIONS='--openssl-legacy-provider' vue-cli-service build",
15 |     "lint": "NODE_OPTIONS='--openssl-legacy-provider' 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 |       "no-console": "off"
38 |     },
39 |     "parserOptions": {
40 |       "parser": "babel-eslint"
41 |     }
42 |   },
43 |   "postcss": {
44 |     "plugins": {
45 |       "autoprefixer": {}
46 |     }
47 |   },
48 |   "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"]
49 | }
50 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simple-keyboard/vue-simple-keyboard/8d8ac36e97114ecb3d55755cc65d1416f6a8c155/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 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>
18 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 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 | }
13 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <input
 4 |       :value="input"
 5 |       class="input"
 6 |       @input="onInputChange"
 7 |       placeholder="Tap on the virtual keyboard to start"
 8 |     >
 9 |     <SimpleKeyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input"/>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import SimpleKeyboard from "./SimpleKeyboard";
15 | import "./App.css";
16 | 
17 | export default {
18 |   name: "App",
19 |   components: {
20 |     SimpleKeyboard
21 |   },
22 |   data: () => ({
23 |     input: ""
24 |   }),
25 |   methods: {
26 |     onChange(input) {
27 |       this.input = input;
28 |     },
29 |     onKeyPress(button) {
30 |       console.log("button", button);
31 |     },
32 |     onInputChange(input) {
33 |       this.input = input.target.value;
34 |     }
35 |   }
36 | };
37 | </script>
38 | 
39 | <style>
40 | #app {
41 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
42 |   -webkit-font-smoothing: antialiased;
43 |   -moz-osx-font-smoothing: grayscale;
44 | }
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/SimpleKeyboard.vue:
--------------------------------------------------------------------------------
 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 |   },
20 |   data: () => ({
21 |     keyboard: null
22 |   }),
23 |   mounted() {
24 |     this.keyboard = new Keyboard(this.keyboardClass, {
25 |       onChange: this.onChange,
26 |       onKeyPress: this.onKeyPress
27 |     });
28 |   },
29 |   methods: {
30 |     onChange(input) {
31 |       this.$emit("onChange", input);
32 |     },
33 |     onKeyPress(button) {
34 |       this.$emit("onKeyPress", button);
35 | 
36 |       /**
37 |        * If you want to handle the shift and caps lock buttons
38 |        */
39 |       if (button === "{shift}" || button === "{lock}") this.handleShift();
40 |     },
41 |     handleShift() {
42 |       let currentLayout = this.keyboard.options.layoutName;
43 |       let shiftToggle = currentLayout === "default" ? "shift" : "default";
44 | 
45 |       this.keyboard.setOptions({
46 |         layoutName: shiftToggle
47 |       });
48 |     }
49 |   },
50 |   watch: {
51 |     input(input) {
52 |       this.keyboard.setInput(input);
53 |     }
54 |   }
55 | };
56 | </script>
57 | 
58 | <!-- Add "scoped" attribute to limit CSS to this component only -->
59 | <style scoped>
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
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");
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   devServer: {
3 |     disableHostCheck: true,
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------