{"id":13535853,"url":"https://github.com/icebob/vue-touch-keyboard","last_synced_at":"2025-04-12T23:38:42.168Z","repository":{"id":51027803,"uuid":"71574087","full_name":"icebob/vue-touch-keyboard","owner":"icebob","description":"Virtual keyboard component for Vue.js 2.x. Designed to Raspberry Pi Touch Display","archived":false,"fork":false,"pushed_at":"2022-08-02T09:41:27.000Z","size":328,"stargazers_count":299,"open_issues_count":24,"forks_count":114,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-12T23:38:37.406Z","etag":null,"topics":["keyboard","keyboard-layout","touch","virtual-keyboard","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/icebob.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-21T14:46:38.000Z","updated_at":"2025-01-18T12:23:21.000Z","dependencies_parsed_at":"2022-08-29T19:41:22.023Z","dependency_job_id":null,"html_url":"https://github.com/icebob/vue-touch-keyboard","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icebob%2Fvue-touch-keyboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icebob%2Fvue-touch-keyboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icebob%2Fvue-touch-keyboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icebob%2Fvue-touch-keyboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icebob","download_url":"https://codeload.github.com/icebob/vue-touch-keyboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647255,"owners_count":21139081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["keyboard","keyboard-layout","touch","virtual-keyboard","vue"],"created_at":"2024-08-01T09:00:30.283Z","updated_at":"2025-04-12T23:38:42.143Z","avatar_url":"https://github.com/icebob.png","language":"Vue","funding_links":["https://www.paypal.me/meregnorbert"],"categories":["UI组件","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"# 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)\n\nVirtual keyboard component for Vue.js v2.x. Designed to Raspberry Pi Touch Display\n\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/5f3594b30dd4489094730fa2babd7ba5)](https://www.codacy.com/app/mereg-norbert/vue-touch-keyboard?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=icebob/vue-touch-keyboard\u0026amp;utm_campaign=Badge_Grade)\n[![Build Status](https://travis-ci.org/icebob/vue-touch-keyboard.svg?branch=master)](https://travis-ci.org/icebob/vue-touch-keyboard)\n[![Coverage Status](https://coveralls.io/repos/github/icebob/vue-touch-keyboard/badge.svg?branch=master)](https://coveralls.io/github/icebob/vue-touch-keyboard?branch=master)\n[![NPMS.io score](https://badges.npms.io/vue-touch-keyboard.svg)]()\n\n[![Dependency Status](https://david-dm.org/icebob/vue-touch-keyboard.svg)](https://david-dm.org/icebob/vue-touch-keyboard)\n[![devDependency Status](https://david-dm.org/icebob/vue-touch-keyboard/dev-status.svg)](https://david-dm.org/icebob/vue-touch-keyboard#info=devDependencies)\n[![Downloads](https://img.shields.io/npm/dt/vue-touch-keyboard.svg)](https://www.npmjs.com/package/vue-touch-keyboard)\n\n**If you like my work, please [donate](https://www.paypal.me/meregnorbert). Thank you!**\n\n## Demo\n[JSFiddle demo](https://jsfiddle.net/icebob/88n7c1L8/)\n[Codepen demo](https://codepen.io/alvidr/pen/JBEmdR/)\n\n[![Screenshot](https://cloud.githubusercontent.com/assets/306521/19721016/d56005bc-9b70-11e6-8568-39dc207bc466.png)]()\n\n## Features\n- 3 built-in layouts, but you can create custom layouts\n- **no external dependencies**\n- full responsive\n- customizable styles\n- ...etc\n\n## Installation\n### NPM\nYou can install it via [NPM](http://npmjs.org/).\n```\n$ npm install vue-touch-keyboard\n```\n### Manual\nDownload zip package and unpack and add the `vue-touch-keyboard.css` and `vue-touch-keyboard.js` file to your project from dist folder.\n```\nhttps://github.com/icebob/vue-touch-keyboard/archive/master.zip\n```\n\n## Usage\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cinput type=\"text\" placeholder=\"Text input\" @focus=\"show\" data-layout=\"normal\" /\u003e\n    \u003cvue-touch-keyboard :options=\"options\" v-if=\"visible\" :layout=\"layout\" :cancel=\"hide\" :accept=\"accept\" :input=\"input\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import VueTouchKeyboard from \"vue-touch-keyboard\";\n  import style from \"vue-touch-keyboard/dist/vue-touch-keyboard.css\"; // load default style\n\n  Vue.use(VueTouchKeyboard);\n\n  export default {\n    data: {\n      visible: false,\n      layout: \"normal\",\n      input: null,\n      options: {\n        useKbEvents: false,\n        preventClickEvent: false\n      }\n    },\n\n    methods: {\n        accept(text) {\n          alert(\"Input text: \" + text);\n          this.hide();\n        },\n\n        show(e) {\n          this.input = e.target;\n          this.layout = e.target.dataset.layout;\n\n          if (!this.visible)\n            this.visible = true\n        },\n\n        hide() {\n          this.visible = false;\n        }\n    }\n  }\n\u003c/script\u003e\n```\n\n## Properties\nProperty      | Default  | Accepted values | Description\n------------- | -------- | --------------- | -----------\n`input`     | required  | `HTMLInputElement`   | The target input HTML element\n`layout`    | required  | `String` or `Object`    | Layout of keys. If you are using the built-in layouts, you can set as the name of the layout. If you want to use custom layout, you need to set a layout `Object`.\n`accept`    | `null`  | `Function`     | Event handler. Fired when the \"Accept/Close\" button pressed.\n`cancel`    | `null`  | `Function`     | Event handler. Fired when the \"Cancel\" button pressed.\n`change`    | `null`  | `Function`     | Event handler. Fired when the input value changed.\n`next`      | `null`  | `Function`     | Event handler. Fired when the \"Next\" button pressed or the length of the value of the input reached the `maxLength` of the `input`\n`options`   | `{}`    | `Object`     | Functional options.\n`defaultKeySet`| `default` | `String`  | Default key set. You can choose a desired key set of your layout to be used when a keyboard is initialized.\n\n## Options\nOption      | Default  | Accepted values | Description\n----------- | -------- | --------------- | -----------\n`useKbEvents`  | `false`  | `boolean`    | If true, the component will generate a `keydown` event and trigger it. If it returns with `false`, it won't insert the new character.\n`preventClickEvent`  | `false`  | `boolean`    | If true, the component will `preventDefault` the click event.\n\n## Built-in layouts\n* `normal` - Normal full layout. Similar as real keyboard layouts\n* `numeric` - Only for numbers\n* `compact` - Compact layout. Similar as mobile phone keyboard layouts\n\n## Development\nThis command will start a `webpack-dev-server` with content of `dev` folder.\n```bash\nnpm run dev\n```\n\n## Build\nThis command will build a distributable version in the `dist` directory.\n```bash\nnpm run build\n```\n\n## Test\n```bash\nnpm test\n```\n\n## Contribution\nPlease send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.\n\n## License\nvue-touch-keyboard is available under the [MIT license](https://tldrlegal.com/license/mit-license).\n\n## Contact\n\nCopyright (C) 2016 Icebob\n\n[![@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)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficebob%2Fvue-touch-keyboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficebob%2Fvue-touch-keyboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficebob%2Fvue-touch-keyboard/lists"}