Implement custom lightweight modal #230

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.

src/presentation/components/Shared/Modal/Hooks/UseCurrentFocusToggle.ts

@@ -0,0 +1,23 @@
+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;
+    }
+  });
+}