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.

tests/unit/presentation/components/Scripts/View/Cards/NonCollapsingDirective.spec.ts

@@ -8,17 +8,18 @@ describe('NonCollapsingDirective', () => {
   describe('NonCollapsing', () => {
     it('adds expected attribute to the element when inserted', () => {
       // arrange
-      const element = getElementMock();
+      const element = createElementMock();
       // act
       NonCollapsing.inserted(element, undefined, undefined, undefined);
       // assert
       expect(element.hasAttribute(expectedAttributeName));
     });
   });
+
   describe('hasDirective', () => {
     it('returns true if the element has expected attribute', () => {
       // arrange
-      const element = getElementMock();
+      const element = createElementMock();
       element.setAttribute(expectedAttributeName, undefined);
       // act
       const actual = hasDirective(element);
@@ -27,8 +28,8 @@ describe('NonCollapsingDirective', () => {
     });
     it('returns true if the element has a parent with expected attribute', () => {
       // arrange
-      const parent = getElementMock();
-      const element = getElementMock();
+      const parent = createElementMock();
+      const element = createElementMock();
       parent.appendChild(element);
       element.setAttribute(expectedAttributeName, undefined);
       // act
@@ -38,16 +39,15 @@ describe('NonCollapsingDirective', () => {
     });
     it('returns false if nor the element or its parent has expected attribute', () => {
       // arrange
-      const element = getElementMock();
+      const element = createElementMock();
       // act
       const actual = hasDirective(element);
       // assert
       expect(actual).to.equal(false);
     });
   });
-});
 
-function getElementMock(): HTMLElement {
-  const element = document.createElement('div');
-  return element;
-}
+  function createElementMock(): HTMLElement {
+    return document.createElement('div');
+  }
+});