Vue Spatial Navigation

Forked from Syncronet-APS/zome-vjsn and spacerefugee/vue-js-spatial-navigation
Original author luke-chang

Vue directive of js-spatial-navigation

• Compatible with Vue3
• Added mouse support
• Added enter-up trigger click on focused element
• Added directive 'v-focus-events' for spatial navigation custom events
• Added TS declarations

Goal

Our goal is to have a library containing the tools you need to create a TV app with Vue for all platforms possible.
The library has been tested on WebOS, Tizen and Android TV.

Contribution

Feel free to open issues/pull requests.
We are open to new features & changes.
We are willing to answer questions.

Installation

NPM

npm install vue-spatial-nav

Getting Started

import vueSpatialNavigation from 'vue-spatial-nav';

app.use(vueSpatialNavigation);

Optional global Configuration

Additional configuration scrollOptions:

• The page will auto scroll to the focus element by using scrollIntoView.

• You can set this scrollOptions for the scrollIntoViewOptions.

• The page will not scroll to the focus element when setting scrollOptions to '' or null.

import vueSpatialNavigation from 'vue-spatial-nav';

const globalConfig = {
  straightOnly: false,
  straightOverlapThreshold: 0.5,
  rememberSource: false,
  disabled: false,
  defaultElement: '',
  enterTo: '',
  leaveFor: null,
  restrict: 'self-first',
  tabIndexIgnoreList: 'a, input, select, textarea, button, iframe, [contentEditable=true]',
  navigableFilter: null,
  scrollOptions: {
    behavior: 'smooth',
    block: 'center',
  },
};

Vue.use(vueSpatialNavigation, globalConfig);

Documentation

Global SpatialNavigation instance

A global Vue instance property for SpatialNavigation

You can access SpatialNavigation in every instance

this.$SpatialNavigation;

or with the inject() function

<script setup>
import { inject } from 'vue';

const spatialNavigation = inject('spatialNavigation');
</script>

v-focus

v-focus-events

v-focus-section

v-disable-focus-section