{"id":27704421,"url":"https://github.com/iFgR/vue-shortkey","last_synced_at":"2025-04-26T01:01:54.534Z","repository":{"id":12993828,"uuid":"73330692","full_name":"fgr-araujo/vue-shortkey","owner":"fgr-araujo","description":"Vue-ShortKey - The ultimate shortcut plugin to improve the UX","archived":false,"fork":false,"pushed_at":"2024-03-15T05:53:02.000Z","size":2032,"stargazers_count":893,"open_issues_count":63,"forks_count":102,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-25T03:15:36.858Z","etag":null,"topics":["shortcut","vue","vue-shortkey","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/fgr-araujo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-09T23:45:59.000Z","updated_at":"2025-03-27T11:11:59.000Z","dependencies_parsed_at":"2023-12-20T15:49:11.189Z","dependency_job_id":"0e93f036-057b-4627-b5b2-9ceebf93e898","html_url":"https://github.com/fgr-araujo/vue-shortkey","commit_stats":{"total_commits":142,"total_committers":19,"mean_commits":7.473684210526316,"dds":0.4014084507042254,"last_synced_commit":"f1847df5068c8faed160ce34fd292d57762883d2"},"previous_names":["ifgr/vue-shortkey"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fgr-araujo%2Fvue-shortkey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fgr-araujo%2Fvue-shortkey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fgr-araujo%2Fvue-shortkey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fgr-araujo%2Fvue-shortkey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fgr-araujo","download_url":"https://codeload.github.com/fgr-araujo/vue-shortkey/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250917360,"owners_count":21507562,"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":["shortcut","vue","vue-shortkey","vuejs"],"created_at":"2025-04-26T01:01:40.546Z","updated_at":"2025-04-26T01:01:54.521Z","avatar_url":"https://github.com/fgr-araujo.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI实用程序","Components \u0026 Libraries","Front-End Development","实用库","JavaScript","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","事件处理","UI Utilities","[Vue.js](https://github.com/vuejs/awesome-vue)","Event Handling"],"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\u0026circle-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 fork/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 vue3-shortkey --save\n```\n\n## Usage\n```javascript\nVue.use(require('vue3-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\u003csub\u003eThe code below ensures that the key combination ctrl + alt + o will perform the 'theAction' method.\u003c/sub\u003e\n\n```html\n\u003cbutton v-shortkey=\"['ctrl', 'alt', 'o']\" @shortkey=\"theAction()\"\u003eOpen\u003c/button\u003e\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\u003cbutton v-shortkey.once=\"['ctrl', 'alt', 'o']\" @shortkey=\"theAction()\"\u003eOpen\u003c/button\u003e\n```\n\n#### Multi keys\n```html\n\u003cbutton v-shortkey=\"{up: ['arrowup'], down: ['arrowdown']}\" @shortkey=\"theAction\"\u003eJoystick\u003c/button\u003e\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\u003csub\u003eThe code below reserves the ALT + I key to set the focus to the input element.\u003c/sub\u003e\n```html\n\u003cinput type=\"text\" v-shortkey.focus=\"['alt', 'i']\" v-model=\"name\" /\u003e\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\u003ctooltip v-shortkey.push=\"['f3']\" @shortkey=\"toggleToolTip\"\u003e\u003c/tooltip\u003e\n```\n\n#### Using on a component\nUse the modifier `native` to catch the event.\n```html\n \u003cmy-component v-shortkey=\"['ctrl', 'alt', 'o']\" @shortkey.native=\"theAction()\"\u003e\u003c/my-component\u003e\n```\n\n#### Multiple listeners\nUse the modifier `propagate` to let the event propagate to other listeners\n```html\n \u003cmy-component v-shortkey=\"['ctrl', 'alt', 'o']\" @shortkey.propagate=\"anAction()\"\u003e\u003c/my-component\u003e\n \u003cmy-component v-shortkey=\"['ctrl', 'alt', 'o']\" @shortkey.propagate=\"aDifferentAction()\"\u003e\u003c/my-component\u003e\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\u003cinput type=\"text\" v-shortkey=\"['q']\" @shortkey=\"foo()\"/\u003e\n\u003cbutton v-shortkey=\"['ctrl', 'p']\" @shortkey=\"bar()\"\u003e\u003c/button\u003e\n\u003cbutton v-shortkey=\"['f1']\" @shortkey=\"help()\"\u003e\u003c/button\u003e\n\u003ctextarea v-shortkey=\"['ctrl', 'v']\" @shortkey=\"dontPaste()\"\u003e\u003c/textarea\u003e\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\u003ctextarea v-shortkey.avoid\u003e\u003c/textaea\u003e\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('vue3-shortkey', { prevent: ['input', 'textarea'] })\n```\n\n* Or even by class\n```javascript\nVue.use('vue3-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\u003cli v-for=\"(ctx, item) in items\"\u003e\n  \u003ca\n    href=\"https://vuejs.org\"\n    target=\"_blank\"\n    v-shortkey=\"['f' + (item + 1)]\"\n    @shortkey=\"testa(item)\"\n    @click=\"testa()\"\u003e\n      F {{ item }}\n  \u003c/a\u003e\n\u003c/li\u003e\n```\n\n#### Integrating with Nuxt\n\n## Nuxt doesn't support Vue3 yet, use the original package for NuxtJS.\n\nCreate `/plugins/vue3-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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FiFgR%2Fvue-shortkey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FiFgR%2Fvue-shortkey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FiFgR%2Fvue-shortkey/lists"}