Vue-Keybindings

Keyboard Shortcuts registration and Keybindings management

Install

yarn add @grandchef/vue-keybindings

or

npm install @grandchef/vue-keybindings --save

Usage

Configuration

import VueKeybindings from '@grandchef/vue-keybindings'

Vue.use(VueKeybindings, {
    alias: {
        cancel: ['esc'],
        reload: ['alt', 'f5'],
        delete: 'shift+del'
    }
})

On Vuejs instance usage

var vm = new Vue({
  shortcuts: {
    keydown: function (event) {
      console.log('key ', event, 'pressed')
      return false // stop alias calling
    },
    cancel: function () {
      console.log('escape key pressed')
      return false // stop propagation
    },
    customBinding: function (data) {
      console.log('this method was fired by some call to: vm.$shortcut.emit("customBinding", data)')
    }
  },
  methods: {
    clickButton: function (val) {
        this.$shortcut.emit('customBinding', val)
    }
  }
})

Dynamic shortcut event listeners

Create a new listener

this.$options.shortcuts.commandName = () => {
    console.log('do some action')
}

Remove existing listener

delete this.$options.shortcuts.commandName;

Dynamic shortcut registration

Create a new keybinding

this.$shortcut.add('command-name', 'ctrl+f6')
// or
this.$shortcut.add('commandName', ['ctrl', 'f6'])

Remove existing keybinding

this.$shortcut.remove('command-name', 'ctrl+f6')
// unbind all actions for this shortcut
this.$shortcut.unbind(['ctrl', 'f6'])
// clear all keybindings
this.$shortcut.clear()

Derived from

• Vivify-Ideas/vue-shortcuts
• MetinSeylan/Vue-Socket.io
• mazinsw/vue-keybindings