shwilliam/vue-shortcut

Great lib

Closed this issue · 3 comments

Have you tried Vue-Shortkey

looks great! haven't yet but will do, would there be a way to avoid the switch statement in the single method and listen to these events in a more declarative way?

That is a good point, I didn't think about it before.
Using your example, my point is:

  • I have a play button, pause button and any other buttons to interact with the player.
  • So, each button have their own functionality and their own method.

Im my mind it was something like this:

<play-button shortcut="enter" method="play()" />
<pause-button shortcut="esc" method="pause()" />
<forward-button shortcut="space" method="forward()" />

Somebody asked me if we can be more declarative in code level like:

data () {},
computed: {},
shortkeys: [
   ['enter', play()],
   ['esc', pause()],
   ['space', forward()]
]

I think it's a good approach, but I have some concern about the consistency of responsibilities.
Imagine that you have an element that dispatches some methods like a button, for example. This button can only be viewed conditionally. With declarative mode, you lose this behavior;

I see.. The proposal with shortkeys looks quite nice to me. With vue-shortcut the idea is that listeners are attached directly to the component itself and wraps/is rendered with whatever it controls.

For example,

<template>
    <VueShortcut @nextItem="index + 1" @prevItem="index - 1">

        <SlideShow :currentIndex="index" />

    </VueShortcut>
</template>

or

<template>
    <VueShortcut @showHelp="helpShowing = true">

        <Help v-if="helpShowing" />

    </VueShortcut>
</template>