Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fgr-araujo/vue-shortkey

Vue-ShortKey - The ultimate shortcut plugin to improve the UX
https://github.com/fgr-araujo/vue-shortkey

shortcut vue vue-shortkey vuejs

Last synced: 6 days ago
JSON representation

Vue-ShortKey - The ultimate shortcut plugin to improve the UX

Awesome Lists containing this project

README 

        
![vue-shortkey logo](https://github.com/iFgR/vue-shortkey/blob/master/logo/shortkey.png?raw=true)



![CircleCI status](https://circleci.com/gh/iFgR/vue-shortkey.svg?style=shield&circle-token=:circle-token)

[![npm version](https://badge.fury.io/js/vue-shortkey.svg)](https://badge.fury.io/js/vue-shortkey)

[![npm](https://img.shields.io/npm/dt/vue-shortkey.svg)](https://www.npmjs.com/package/vue-shortkey)

[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)



Vue3-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.



## Install

```

npm install vue3-shortkey --save

```



## Usage

```javascript

Vue.use(require('vue3-shortkey'))

```

Add the shortkey directive to the elements that accept the shortcut.

The shortkey must have explicitly which keys will be used.



#### Running functions

The code below ensures that the key combination ctrl + alt + o will perform the 'theAction' method.



```html

Open

```

The function in the modifier __@shortkey__ will be called repeatedly while the key is pressed. To call the function only once, use the __once__ modifier

```html

Open

```



#### Multi keys

```html

Joystick

```

... and your method will be called with the key in the  parameter

```javascript

methods: {

  theAction (event) {

    switch (event.srcKey) {

      case 'up':

        ...

        break

      case 'down':

        ...

        break

```



#### Setting the focus

You can point the focus with the shortcut easily.

The code below reserves the ALT + I key to set the focus to the input element.

```html



```



#### Push button

Sometimes 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.



The example below shows how to do this

```html



```



#### Using on a component

Use the modifier `native` to catch the event.

```html

 

```



#### Multiple listeners

Use the modifier `propagate` to let the event propagate to other listeners

```html

 

 

```



#### Key list

| Key                        | Shortkey Name |

|----------------------------|---------------|

| Delete                     | del           |

| Backspace                  | backspace     |

| Insert                     | insert        |

| NumLock                    | numlock       |

| CapsLock                   | capslock      |

| Pause                      | pause         |

| ContextMenu                | contextmenu   |

| ScrollLock                 | scrolllock    |

| BrowserHome                | browserhome   |

| MediaSelect                | mediaselect   |

| Shift                      | shift         |

| Control                    | ctrl          |

| Alt                        | alt           |

| Alt Graph                  | altgraph      |

| Super (Windows or Mac Cmd) | meta          |

| Arrow Up                   | arrowup       |

| Arrow Down                 | arrowdown     |

| Arrow Left                 | arrowleft     |

| Arrow Right                | arrowright    |

| Enter                      | enter         |

| Escape                     | esc           |

| Tab                        | tab           |

| Space                      | space         |

| Page Up                    | pageup        |

| Page Down                  | pagedown      |

| Home                       | home          |

| End                        | end           |

| A - Z                      | a-z           |

| 0-9                        | 0-9           |

| F1-F12                     | f1-f12        |



You can make any combination of keys as well as reserve a single key.

```html



```



#### Avoided fields

You can avoid shortcuts within fields if you really need it. This can be done in two ways:

* Preventing a given element from executing the shortcut by adding the **v-shortkey.avoid** tag in the body of the element

```html



```

* Generalizing type of element that will not perform shortcut. To do this, insert a list of elements in the global method.



```javascript

Vue.use('vue3-shortkey', { prevent: ['input', 'textarea'] })

```



* Or even by class

```javascript

Vue.use('vue3-shortkey', { prevent: ['.my-class-name', 'textarea.class-of-textarea'] })

```



#### Other uses

With the dynamism offered by Vue, you can easily create shortcuts dynamically

```html

  • 

      

          F {{ item }}

          

    • 

    ```
    


    #### Integrating with Nuxt
    


    ## Nuxt doesn't support Vue3 yet, use the original package for NuxtJS.
    


    Create `/plugins/vue3-shortkey.js` and add the following to it
    


    ```javascript

    import Vue from 'vue'

    const ShortKey = require('vue-shortkey')
    


    // add any custom shortkey config settings here

    Vue.use(ShortKey, { prevent: ['input', 'textarea'] })
    


    export default ShortKey

    ```
    


    Load the plugin in `nuxt.config.js`:
    


    ```javascript

    plugins: [ { src: '@/plugins/vue-shortkey.js', mode: 'client' }]

    ```
    


    The `mode: 'client'` is necessary to prevent Nuxt from loading the plugin during server-side rendering (SSR).
    


    ### Unit Test

    ```

    npm test

    ```