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

@@ -0,0 +1,87 @@
+<template>
+  <ModalContainer
+    v-model="showDialog"
+  >
+    <div class="dialog">
+      <div class="dialog__content">
+        <slot />
+      </div>
+      <div
+        class="dialog__close-button"
+        @click="hide"
+      >
+        <font-awesome-icon
+          :icon="['fas', 'times']"
+        />
+      </div>
+    </div>
+  </ModalContainer>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import ModalContainer from './ModalContainer.vue';
+
+export default defineComponent({
+  components: {
+    ModalContainer,
+  },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    input: (isOpen: boolean) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const showDialog = computed({
+      get: () => props.value,
+      set: (value) => {
+        if (value !== props.value) {
+          emit('input', value);
+        }
+      },
+    });
+
+    function hide() {
+      showDialog.value = false;
+    }
+
+    return {
+      showDialog,
+      hide,
+    };
+  },
+});
+
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+.dialog {
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+
+  &__content {
+    margin: 5%;
+  }
+
+  &__close-button {
+    color: $color-primary-dark;
+    width: auto;
+    font-size: 1.5em;
+    margin-right: 0.25em;
+    align-self: flex-start;
+    @include clickable;
+    @include hover-or-touch {
+      color: $color-primary;
+    }
+  }
+}
+</style>