9e5491fdbf
Introduce a brand new lightweight and efficient modal component. It is designed to be visually similar to the previous one to not introduce a change in feel of the application in a patch release, but behind the scenes it features: - Enhanced application speed and reduced bundle size. - New flexbox-driven layout, eliminating JS calculations. - Composition API ready for Vue 3.0 #230. Other changes: - Adopt idiomatic Vue via `v-modal` binding. - Add unit tests for both the modal and dialog. - Remove `vue-js-modal` dependency in favor of the new implementation. - Adjust modal shadow color to better match theme. - Add `@vue/test-utils` for unit testing.
24 lines
813 B
TypeScript
24 lines
813 B
TypeScript
import { Ref, watchEffect } from 'vue';
|
|
|
|
/**
|
|
* Manages focus transitions, ensuring good usability and accessibility.
|
|
*/
|
|
export function useCurrentFocusToggle(shouldDisableFocus: Ref<boolean>) {
|
|
let previouslyFocusedElement: HTMLElement | undefined;
|
|
|
|
watchEffect(() => {
|
|
if (shouldDisableFocus.value) {
|
|
previouslyFocusedElement = document.activeElement as HTMLElement | null;
|
|
previouslyFocusedElement?.blur();
|
|
} else {
|
|
if (!previouslyFocusedElement || previouslyFocusedElement.tagName === 'BODY') {
|
|
// It doesn't make sense to return focus to the body after the modal is
|
|
// closed because the body itself doesn't offer meaningful interactivity
|
|
return;
|
|
}
|
|
previouslyFocusedElement.focus();
|
|
previouslyFocusedElement = undefined;
|
|
}
|
|
});
|
|
}
|