Vue-tv NPM | npm.io

vue-tv(vue-spatial-navigation)

Focus library for smart Tv application using Vue js and mitt(event-bus);

Supports only Vue-2

Live demo

Screenshots

Getting Started

npm install vue-tv

List

import {FocusableList} from "vue-tv";

<List
    :child="Button" //custom component
    :isFocused="true" //to set focus
    :items="items" //array to loop
    v-on:onFocusChange="onFocusHandler"
  />

List with disabled

<List
    :child="Button" 
    :isFocused="true" 
    :items="items" 
    :disabledIndex=[0,2,3] //index
  />

Nested Carousel

<List
    :child="child"
    :isFocused="true"
    :items="items"
    :shouldScroll="true"
    orientation="VERTICAL"
  />
  ...
  
  data() {
    return {
      items: [
        {
          child: Card,
          shouldScroll: true,
          items: carouselData[0],
        },
        {
          child: Card,
          shouldScroll: true,
          items: carouselData[1],
        },
      ],
      child: List,
      shouldScroll: true,
    };
  },

Grid

<Grid
    :child="Card"
    :isFocused="true"
    :items="items"
    :shouldScroll="true"
    :maxColumn="4"
  />

Props

Name	Type	Required	Description	Default
`child`	`Vue Component`	`true`	Child widget to display on each index of list/grid
`items`	`Array`	`true`	Array to loop through	`[]`
`isFocused`	`Boolean`	`true`	To set focus & make it navigatable	`false`
`defaultIndex`	`int`	`false`	Initial index to be focused	`-1`
`disabled`	`Boolean`	`false`	To disable the navigation	`false`
`disabledIndex`	`Array`	`false`	array of indices to disable in the list	`[-1]`
`orientation`	`enum`	`false`	Direction of list and navigation.'HORIZONTAL','VERTICAL'	`HORIZONTAL`
`shouldScroll`	`Boolean`	`false`	To make list scroll as you navigate	`false`
`id`	`String`	`false`	Unique Id to handle navigation	Math.random().toString()