Vue Spatial Navigation


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

$3

- 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

$3

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

$3

``shell
npm install vue-spatial-nav
`

Getting Started

`ts
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.

`ts
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

$3

A global Vue instance property for SpatialNavigation

You can access SpatialNavigation in every instance
`ts
this.$SpatialNavigation;
`

or with the inject() function
`vue

``

$3

$3

$3

$3