v-focus-events.md

v-focus-events

Original documentation can be found here: https://github.com/luke-chang/js-spatial-navigation#events
Notice that this wrapper library prefixes events with sn: so you wont have to define it.
Available events

1. willmove
2. willunfocus
3. unfocused
4. willfocus
5. focused
6. navigatefailed
7. enter-down
8. enter-up
   • This is also triggered by mouse clicks

Be aware that using enter-down can trigger the event multiple times when holding down the button. \ It is recommended to use enter-down/enter-up as button clicks. \ You still have the option to use vue's event handling for key input: https://v3.vuejs.org/guide/events.html#key-modifiers

All events with v-sn-event are registered with mounted. Meaning all events has to be registred at that time. The guard cases for those events has to be handled inside those events. They will always be fired no matter what.
If you want to be able to actually remove & re-add event listeners, you have to manually add the events as descriped in the original documentation for js-spatial-navigation.
If you can fix this and update / remove the event listeners. You are more than welcome to contribute.

Preventing navigation

Some events can be cancelled, like sn:willmove. The following example cancels the navigation if its trying to navigate up from the no element.

<template>
  <div
    v-focus
    id="hi"
    v-focus-events="{ willmove: print }"
    class="focusable--outline"
  >
    hi
  </div>
  <div
    v-focus
    id="no"
    v-focus-events="{ willmove: stopUp }"
    class="focusable--outline"
  >
    no
  </div>
</template>

<script>
  export default {
    methods: {
      print(event) {
        console.log(event);
      },
      stopUp(event) {
        console.log(event);
        if (event.detail.direction == "up") event.preventDefault();
      },
    },
  };
</script>