Vue Spatial Navigation
Forked from Syncronet-APS/zome-vjsn and spacerefugee/vue-js-spatial-navigation
Original author luke-chang
js-spatial-navigation
Vue directive of- 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);
Configuration
Optional globalscrollOptions
:
Additional configuration -
The page will auto scroll to the focus element by using
scrollIntoView
. -
You can set this
scrollOptions
for thescrollIntoViewOptions
. -
The page will not scroll to the focus element when setting
scrollOptions
to''
ornull
.
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>