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/TheFooter/TheFooter.vue

@@ -33,11 +33,11 @@
         </div>
         <div class="footer__section__item">
           <font-awesome-icon class="icon" :icon="['fas', 'user-secret']" />
-          <a @click="privacyDialog.show()">Privacy</a>
+          <a @click="showPrivacyDialog()">Privacy</a>
         </div>
       </div>
     </div>
-    <ModalDialog ref="privacyDialog">
+    <ModalDialog v-model="isPrivacyDialogVisible">
       <PrivacyPolicy />
     </ModalDialog>
   </div>
@@ -46,7 +46,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue';
 import { Environment } from '@/application/Environment/Environment';
-import ModalDialog from '@/presentation/components/Shared/ModalDialog.vue';
+import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
 import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
 import DownloadUrlList from './DownloadUrlList.vue';
 import PrivacyPolicy from './PrivacyPolicy.vue';
@@ -62,7 +62,7 @@ export default defineComponent({
   setup() {
     const { info } = useApplication();
 
-    const privacyDialog = ref<typeof ModalDialog>();
+    const isPrivacyDialogVisible = ref(false);
 
     const version = computed<string>(() => info.version.toString());
 
@@ -74,9 +74,14 @@ export default defineComponent({
 
     const feedbackUrl = computed<string>(() => info.feedbackUrl);
 
+    function showPrivacyDialog() {
+      isPrivacyDialogVisible.value = true;
+    }
+
     return {
       isDesktop,
-      privacyDialog,
+      isPrivacyDialogVisible,
+      showPrivacyDialog,
       version,
       homepageUrl,
       repositoryUrl,