{"_id":"vue3-shortkey","_rev":"1-69dafd5659d94362e02f8eceea485b80","name":"vue3-shortkey","dist-tags":{"latest":"4.0.0"},"versions":{"4.0.0":{"name":"vue3-shortkey","description":"A vue-shortkey port for VueJS 3.x accepts shortcuts globaly and in a single listener.","version":"4.0.0","author":{"name":"iFgR","email":"ifgr.fagner@gmail.com"},"main":"dist/index.js","license":"MIT","scripts":{"build":"NODE_ENV=production node build/build.js","test":"karma start test/karma.conf.js --single-run","coverage":"nyc mocha test/**/*.js"},"repository":{"type":"git","url":"git+https://github.com/rodrigopv/vue3-shortkey.git"},"dependencies":{"custom-event-polyfill":"^1.0.7","element-matches":"^0.1.2"},"keywords":["vue","vue3","vue-shortkey","vue3-shortkey","shortcut","shortkey"],"homepage":"https://github.com/rodrigopv/vue3-shortkey/blob/master/README.md","devDependencies":{"array.prototype.find":"^2.1.1","babel-core":"^6.26.3","babel-loader":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-3":"^6.24.1","babel-register":"^6.24.1","chai":"^4.3.4","cross-env":"^3.0.0","karma":"^1.7.1","karma-mocha":"^1.3.0","karma-phantomjs-launcher":"^1.0.4","karma-sinon-chai":"^1.3.4","karma-webpack":"^2.0.13","mocha":"^3.4.2","nyc":"^11.9.0","sinon":"^3.3.0","sinon-chai":"^2.14.0","vue":"^3.0.0","webpack":"^3.12.0"},"gitHead":"c7d85bd2b64ae47ac6ceddfb845b03e8094ca520","bugs":{"url":"https://github.com/rodrigopv/vue3-shortkey/issues"},"_id":"vue3-shortkey@4.0.0","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-pXb/K7aw3ViqzWL9jz/IL4wOk7M7FQ87ekYxk5J7uKTNEfOVBYtILGjvCBJD3/zEUipcLQJEg7TjE1xYnVYV/w==","shasum":"63ab7bfbe6f0f80158ae8a22b44c16e566b7bd83","tarball":"https://registry.npmjs.org/vue3-shortkey/-/vue3-shortkey-4.0.0.tgz","fileCount":19,"unpackedSize":116422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpIcTCRA9TVsSAnZWagAAQU8P+wTGiLym8hDGkeN/2Tcy\nIr07qeDf/p1XRqmTg/7czIsShDlh2B63RELEHLY23txWaY/cK3A4/ZV673Ub\n5An7x6F/zNob1FBWgzUklUsS89RyhbXStTpI1uJ5GWHfzjy3mNYMzDWUTI41\nTn3lTXXK/mkLqO3WogMXndegyG/qVorKnBXs5Mu4hXH73BkRhOkSEZgq+YiR\nEYYjcV4EE1t/xpkEi3stnzMXHBXZjsXBV8cUjAbdPs8JqVycrqBzDPjIRUnH\nhL3VuslLqaG6HaQ6WxtjPP3/iGE8kWlQKKeUB7zckCf3NMkwoLIo56ZcTbeR\nlTjI12ydSyYuaRtGtxy5y+JLzW4/XHkdKsdpsYiKgyoU9KIHwz9Am6pka8zA\nhwmnOQ6t5gdV8oNzduHtdXglaeqKnSpGpPos9xW/ZkibpDpyISmYWaWMmSrg\ndYdzg0weX1gDgTWVNbcn6O9FqhTtKJw5D4WeqXyM3jCsZnwmJSnocPtdBmDh\nP8nAmC/YpOdsWiZU/rEYm2+9FzxoawBFE/15j1XraVHvZ94fvVDdAoNtv8vO\n2GofyTTqyzh8QeJbOUVrjzS7dr7oicEAqnGWrFYVou1e/i5ilwTch/M67FDR\nkDggLqZyM9fY8IulKmqcFm3no6oc9wlTaOsZPzysN/eyskjXtE6LAx4NFuY4\nBqzq\r\n=huSv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuq0/KYdy7DfcMKf7Qn0FoOfGTELs8HjtCFe6gNQrYtQIhAMJ1mx9tX6aElHRViOSswhoGGG0UpeDWcY0xANPYlcjp"}]},"_npmUser":{"name":"rodrigopv","email":"lrpena@miuandes.cl"},"directories":{},"maintainers":[{"name":"rodrigopv","email":"lrpena@miuandes.cl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-shortkey_4.0.0_1621395218512_0.908531744766393"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-19T03:33:38.511Z","4.0.0":"2021-05-19T03:33:38.678Z","modified":"2022-05-23T21:23:00.803Z"},"maintainers":[{"name":"rodrigopv","email":"lrpena@miuandes.cl"}],"description":"A vue-shortkey port for VueJS 3.x accepts shortcuts globaly and in a single listener.","homepage":"https://github.com/rodrigopv/vue3-shortkey/blob/master/README.md","keywords":["vue","vue3","vue-shortkey","vue3-shortkey","shortcut","shortkey"],"repository":{"type":"git","url":"git+https://github.com/rodrigopv/vue3-shortkey.git"},"author":{"name":"iFgR","email":"ifgr.fagner@gmail.com"},"bugs":{"url":"https://github.com/rodrigopv/vue3-shortkey/issues"},"license":"MIT","readme":"![vue-shortkey logo](https://github.com/iFgR/vue-shortkey/blob/master/logo/shortkey.png?raw=true)\n\n![CircleCI status](https://circleci.com/gh/iFgR/vue-shortkey.svg?style=shield&circle-token=:circle-token)\n[![npm version](https://badge.fury.io/js/vue-shortkey.svg)](https://badge.fury.io/js/vue-shortkey)\n[![npm](https://img.shields.io/npm/dt/vue-shortkey.svg)](https://www.npmjs.com/package/vue-shortkey)\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)\n\nVue3-ShortKey - a port of `vue-shortkey` for VueJS 3.x accepts shortcuts globaly and in a single listener. I'm not vue3 expert, but I edited this plugin until it started working on Vue-cli with Vue 3.\n\n## Install\n```\nnpm install vue-shortkey --save\n```\n\n## Usage\n```javascript\nVue.use(require('vue-shortkey'))\n```\nAdd the shortkey directive to the elements that accept the shortcut.\nThe shortkey must have explicitly which keys will be used.\n\n#### Running functions\n<sub>The code below ensures that the key combination ctrl + alt + o will perform the 'theAction' method.</sub>\n\n```html\n<button v-shortkey=\"['ctrl', 'alt', 'o']\" @shortkey=\"theAction()\">Open</button>\n```\nThe function in the modifier __@shortkey__ will be called repeatedly while the key is pressed. To call the function only once, use the __once__ modifier\n```html\n<button v-shortkey.once=\"['ctrl', 'alt', 'o']\" @shortkey=\"theAction()\">Open</button>\n```\n\n#### Multi keys\n```html\n<button v-shortkey=\"{up: ['arrowup'], down: ['arrowdown']}\" @shortkey=\"theAction\">Joystick</button>\n```\n... and your method will be called with the key in the  parameter\n```javascript\nmethods: {\n  theAction (event) {\n    switch (event.srcKey) {\n      case 'up':\n        ...\n        break\n      case 'down':\n        ...\n        break\n```\n\n#### Setting the focus\nYou can point the focus with the shortcut easily.\n<sub>The code below reserves the ALT + I key to set the focus to the input element.</sub>\n```html\n<input type=\"text\" v-shortkey.focus=\"['alt', 'i']\" v-model=\"name\" />\n```\n\n#### Push button\nSometimes you may need a shortcut works as a push button. It calls the function one time when you click the button. When you release the shortcut, it calls the same function again like a toggle. In these cases, insert the \"push\" modifier.\n\nThe example below shows how to do this\n```html\n<tooltip v-shortkey.push=\"['f3']\" @shortkey=\"toggleToolTip\"></tooltip>\n```\n\n#### Using on a component\nUse the modifier `native` to catch the event.\n```html\n <my-component v-shortkey=\"['ctrl', 'alt', 'o']\" @shortkey.native=\"theAction()\"></my-component>\n```\n\n#### Multiple listeners\nUse the modifier `propagate` to let the event propagate to other listeners\n```html\n <my-component v-shortkey=\"['ctrl', 'alt', 'o']\" @shortkey.propagate=\"anAction()\"></my-component>\n <my-component v-shortkey=\"['ctrl', 'alt', 'o']\" @shortkey.propagate=\"aDifferentAction()\"></my-component>\n```\n\n#### Key list\n| Key                        | Shortkey Name |\n|----------------------------|---------------|\n| Delete                     | del           |\n| Backspace                  | backspace     |\n| Insert                     | insert        |\n| NumLock                    | numlock       |\n| CapsLock                   | capslock      |\n| Pause                      | pause         |\n| ContextMenu                | contextmenu   |\n| ScrollLock                 | scrolllock    |\n| BrowserHome                | browserhome   |\n| MediaSelect                | mediaselect   |\n| Shift                      | shift         |\n| Control                    | ctrl          |\n| Alt                        | alt           |\n| Alt Graph                  | altgraph      |\n| Super (Windows or Mac Cmd) | meta          |\n| Arrow Up                   | arrowup       |\n| Arrow Down                 | arrowdown     |\n| Arrow Left                 | arrowleft     |\n| Arrow Right                | arrowright    |\n| Enter                      | enter         |\n| Escape                     | esc           |\n| Tab                        | tab           |\n| Space                      | space         |\n| Page Up                    | pageup        |\n| Page Down                  | pagedown      |\n| Home                       | home          |\n| End                        | end           |\n| A - Z                      | a-z           |\n| 0-9                        | 0-9           |\n| F1-F12                     | f1-f12        |\n\nYou can make any combination of keys as well as reserve a single key.\n```html\n<input type=\"text\" v-shortkey=\"['q']\" @shortkey=\"foo()\"/>\n<button v-shortkey=\"['ctrl', 'p']\" @shortkey=\"bar()\"></button>\n<button v-shortkey=\"['f1']\" @shortkey=\"help()\"></button>\n<textarea v-shortkey=\"['ctrl', 'v']\" @shortkey=\"dontPaste()\"></textarea>\n```\n\n#### Avoided fields\nYou can avoid shortcuts within fields if you really need it. This can be done in two ways:\n* Preventing a given element from executing the shortcut by adding the **v-shortkey.avoid** tag in the body of the element\n```html\n<textarea v-shortkey.avoid></textaea>\n```\n* Generalizing type of element that will not perform shortcut. To do this, insert a list of elements in the global method.\n\n```javascript\nVue.use('vue-shortkey', { prevent: ['input', 'textarea'] })\n```\n\n* Or even by class\n```javascript\nVue.use('vue-shortkey', { prevent: ['.my-class-name', 'textarea.class-of-textarea'] })\n```\n\n#### Other uses\nWith the dynamism offered by Vue, you can easily create shortcuts dynamically\n```html\n<li v-for=\"(ctx, item) in items\">\n  <a\n    href=\"https://vuejs.org\"\n    target=\"_blank\"\n    v-shortkey=\"['f' + (item + 1)]\"\n    @shortkey=\"testa(item)\"\n    @click=\"testa()\">\n      F {{ item }}\n  </a>\n</li>\n```\n\n#### Integrating with Nuxt\n\nCreate `/plugins/vue-shortkey.js` and add the following to it\n\n```javascript\nimport Vue from 'vue'\nconst ShortKey = require('vue-shortkey')\n\n// add any custom shortkey config settings here\nVue.use(ShortKey, { prevent: ['input', 'textarea'] })\n\nexport default ShortKey\n```\n\nLoad the plugin in `nuxt.config.js`:\n\n```javascript\nplugins: [ { src: '@/plugins/vue-shortkey.js', mode: 'client' }]\n```\n\nThe `mode: 'client'` is necessary to prevent Nuxt from loading the plugin during server-side rendering (SSR).\n\n### Unit Test\n```\nnpm test\n```\n","readmeFilename":"README.md"}