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/Code/CodeButtons/TheCodeButtons.vue

@@ -19,7 +19,7 @@
       icon-prefix="fas"
       icon-name="copy"
     />
-    <ModalDialog v-if="instructions" ref="instructionsDialog">
+    <ModalDialog v-if="instructions" v-model="areInstructionsVisible">
       <InstructionList :data="instructions" />
     </ModalDialog>
   </div>
@@ -30,7 +30,7 @@ import { defineComponent, ref, computed } from 'vue';
 import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
 import { SaveFileDialog, FileType } from '@/infrastructure/SaveFileDialog';
 import { Clipboard } from '@/infrastructure/Clipboard';
-import ModalDialog from '@/presentation/components/Shared/ModalDialog.vue';
+import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
 import { Environment } from '@/application/Environment/Environment';
 import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
@@ -57,7 +57,7 @@ export default defineComponent({
       currentState, currentContext, onStateChange, events,
     } = useCollectionState();
 
-    const instructionsDialog = ref<typeof ModalDialog>();
+    const areInstructionsVisible = ref(false);
     const canRun = computed<boolean>(() => getCanRunState(currentState.value.os));
     const fileName = computed<string>(() => buildFileName(currentState.value.collection.scripting));
     const hasCode = ref(false);
@@ -73,7 +73,7 @@ export default defineComponent({
 
     function saveCode() {
       saveCodeToDisk(fileName.value, currentState.value);
-      instructionsDialog.value?.show();
+      areInstructionsVisible.value = true;
     }
 
     async function executeCode() {
@@ -103,7 +103,7 @@ export default defineComponent({
       hasCode,
       instructions,
       fileName,
-      instructionsDialog,
+      areInstructionsVisible,
       copyCode,
       saveCode,
       executeCode,