@empathyco/x-components
Version:
Empathy X Components
69 lines • 2.65 kB
TypeScript
import type { PropType } from 'vue';
import type { ArrowKey, EventsForDirectionLimit, TakeNavigationControl } from '../utils/types';
/**
* Base component to handle keyboard navigation for elements inside it. It has a required slot to
* include the navigable elements.
*
* @remarks
* The component can be customized through props: an array of navigationHijacker objects, which
* contains: the xEvent to listen to, the moduleName in charge of emitting the event and to which
* direction it should react to; to take control of the navigation and eventsForDirectionLimit, to
* emit an xEvent when reaching the navigation limit in any direction.
*
* @public
*/
declare const _default: import("vue").DefineComponent<{
/**
* An array of {@link TakeNavigationControl} objects defining when to
* take control of the keyboard navigation.
*/
navigationHijacker: {
type: PropType<TakeNavigationControl[]>;
default: () => {
xEvent: string;
moduleName: string;
direction: string;
}[];
};
/**
* An {@link EventsForDirectionLimit} to emit when the user is already at the furthest element
* in a direction and tries to keep going on the same direction.
*/
eventsForDirectionLimit: {
type: PropType<Partial<EventsForDirectionLimit>>;
default: () => {
ArrowUp: string;
};
};
}, {
el: import("vue").Ref<HTMLElement | undefined>;
focusNextNavigableElement: (direction: ArrowKey | KeyboardEvent) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* An array of {@link TakeNavigationControl} objects defining when to
* take control of the keyboard navigation.
*/
navigationHijacker: {
type: PropType<TakeNavigationControl[]>;
default: () => {
xEvent: string;
moduleName: string;
direction: string;
}[];
};
/**
* An {@link EventsForDirectionLimit} to emit when the user is already at the furthest element
* in a direction and tries to keep going on the same direction.
*/
eventsForDirectionLimit: {
type: PropType<Partial<EventsForDirectionLimit>>;
default: () => {
ArrowUp: string;
};
};
}>>, {
navigationHijacker: TakeNavigationControl[];
eventsForDirectionLimit: Partial<EventsForDirectionLimit>;
}, {}>;
export default _default;
//# sourceMappingURL=base-keyboard-navigation.vue?vue&type=script&lang.d.ts.map