navkit-vue/dist/hooks/index.d.ts

Vue navigation and utility composables

import * as vue from 'vue';
import { Ref, ComputedRef } from 'vue';

type NavigationConfigType = {
    disabled?: boolean | Ref<boolean>;
    focusableSelector?: string;
    autofocus?: boolean;
    focusClass?: string;
    cyclic?: boolean;
};
type NavigationType = NavigationConfigType & {
    rows: number[] | Ref<number[]>;
    initialPosition?: PositionType;
    autoNextRow?: boolean;
    invertAxis?: boolean;
    holdColumnPerRow?: boolean;
    onEnter?: (position: PositionType) => void;
    onReturn?: (position: PositionType) => void;
    onColumnStart?: () => void;
    onColumnEnd?: () => void;
    onRowStart?: () => void;
    onRowEnd?: () => void;
};
type PositionType = {
    row: number;
    col: number;
};
type NavigationYType = NavigationConfigType & {
    rows: number | Ref<number>;
    initialPosition?: number;
    onEnter?: (position: number) => void;
    onReturn?: (position: number) => void;
    onRowStart?: () => void;
    onRowEnd?: () => void;
    onLeft?: () => void;
    onRight?: () => void;
};
type NavigationXType = NavigationConfigType & {
    columns: number | Ref<number>;
    initialPosition?: number;
    onEnter?: (position: number) => void;
    onColumnStart?: () => void;
    onColumnEnd?: () => void;
    onReturn?: (position: number) => void;
    onUp?: () => void;
    onDown?: () => void;
};

type useScrollIntoFocusType = {
    position: Ref<{
        row: number;
        col: number;
    }>;
    selectedElement: ComputedRef<HTMLElement | null> | Ref<HTMLElement | null>;
    behavior?: "smooth" | "instant";
    delay?: number;
    focusableSelector?: string;
    parentSelector?: string;
    buffer?: number;
    bufferX?: number;
    bufferY?: number;
    suppressLogs?: boolean;
    scrollType: "throttle" | "debounce";
};

declare function useNavigation({ rows, onColumnStart, onColumnEnd, onRowStart, onRowEnd, onEnter, onReturn, initialPosition, disabled, focusableSelector, autofocus, focusClass, cyclic, invertAxis, autoNextRow, holdColumnPerRow, }: NavigationType): {
    position: vue.Ref<{
        row: number;
        col: number;
    }, PositionType | {
        row: number;
        col: number;
    }>;
    currentRow: number;
    currentElement: HTMLElement | null;
    isDisabled: vue.ComputedRef<boolean>;
    setRowPosition: (row: number, position: number) => number;
    toggleDisabled: (value?: boolean) => void;
    isValidPosition: (pos: PositionType) => boolean;
    focusElement: (element: HTMLElement | null) => void;
    getCurrentFocusedElement: () => HTMLElement | null;
    debug: {
        focusableElements: Element[];
        isHookDisabled: boolean;
    };
};

declare function useNavigationX({ columns, initialPosition, disabled, focusableSelector, autofocus, focusClass, cyclic, onEnter, onReturn, onColumnEnd, onColumnStart, onDown, onUp, }: NavigationXType): {
    position: vue.Ref<number, number>;
    currentElement: HTMLElement | null;
    setPosition: (pos: number) => number;
    toggleDisabled: (value?: boolean) => void;
    isValidPosition: (col: number) => boolean;
    focusElement: (element: HTMLElement | null) => void;
    getCurrentFocusedElement: () => HTMLElement | null;
};

declare function useNavigationY({ rows, initialPosition, disabled, focusableSelector, autofocus, focusClass, cyclic, onRowStart, onRowEnd, onEnter, onReturn, onRight, onLeft, }: NavigationYType): {
    position: vue.Ref<number, number>;
    currentElement: HTMLElement | null;
    setPosition: (pos: number) => number;
    toggleDisabled: (value?: boolean) => void;
    isValidPosition: (row: number) => boolean;
    focusElement: (element: HTMLElement | null) => void;
    getCurrentFocusedElement: () => HTMLElement | null;
};

declare function useNavigationReturn({ onReturn, disabled, }: {
    onReturn: () => void;
    disabled?: Ref<boolean>;
}): {
    toggleDisabled: (value?: boolean) => void;
};

declare function useScrollIntoFocus({ position, selectedElement, behavior, delay, parentSelector, buffer, bufferX, bufferY, suppressLogs, scrollType, }: useScrollIntoFocusType): void;

export { useNavigation, useNavigationReturn, useNavigationX, useNavigationY, useScrollIntoFocus };