@coreui/vue-pro
Version:
UI Components Library for Vue.js
109 lines (108 loc) • 4.22 kB
TypeScript
import { type Ref, type PropType } from 'vue';
declare const CFocusTrap: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Controls whether the focus trap is active or inactive.
* When `true`, focus will be trapped within the child element.
* When `false`, normal focus behavior is restored.
*/
active: {
type: BooleanConstructor;
default: boolean;
};
/**
* Additional container elements to include in the focus trap.
* Useful for floating elements like tooltips or popovers that are
* rendered outside the main container but should be part of the trap.
*/
additionalContainer: {
type: PropType<Ref<HTMLElement | null>>;
default: undefined;
};
/**
* Controls whether to focus the first selectable element or the container itself.
* When `true`, focuses the first tabbable element within the container.
* When `false`, focuses the container element directly.
*
* This is useful for containers that should receive focus themselves,
* such as scrollable regions or custom interactive components.
*/
focusFirstElement: {
type: BooleanConstructor;
default: boolean;
};
/**
* Automatically restores focus to the previously focused element when the trap is deactivated.
* This is crucial for accessibility as it maintains the user's place in the document
* when returning from modal dialogs or overlay components.
*
* Recommended to be `true` for modal dialogs and popover components.
*/
restoreFocus: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
/**
* Emitted when the focus trap becomes active.
* Useful for triggering additional accessibility announcements or analytics.
*/
activate: () => true;
/**
* Emitted when the focus trap is deactivated.
* Can be used for cleanup, analytics, or triggering state changes.
*/
deactivate: () => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Controls whether the focus trap is active or inactive.
* When `true`, focus will be trapped within the child element.
* When `false`, normal focus behavior is restored.
*/
active: {
type: BooleanConstructor;
default: boolean;
};
/**
* Additional container elements to include in the focus trap.
* Useful for floating elements like tooltips or popovers that are
* rendered outside the main container but should be part of the trap.
*/
additionalContainer: {
type: PropType<Ref<HTMLElement | null>>;
default: undefined;
};
/**
* Controls whether to focus the first selectable element or the container itself.
* When `true`, focuses the first tabbable element within the container.
* When `false`, focuses the container element directly.
*
* This is useful for containers that should receive focus themselves,
* such as scrollable regions or custom interactive components.
*/
focusFirstElement: {
type: BooleanConstructor;
default: boolean;
};
/**
* Automatically restores focus to the previously focused element when the trap is deactivated.
* This is crucial for accessibility as it maintains the user's place in the document
* when returning from modal dialogs or overlay components.
*
* Recommended to be `true` for modal dialogs and popover components.
*/
restoreFocus: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onActivate?: (() => any) | undefined;
onDeactivate?: (() => any) | undefined;
}>, {
active: boolean;
additionalContainer: Ref<HTMLElement | null, HTMLElement | null>;
focusFirstElement: boolean;
restoreFocus: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export { CFocusTrap };