Refactor Vue components using Composition API #230

- Migrate `StatefulVue`:
  - Introduce `UseCollectionState` that replaces its behavior and acts
    as a shared state store.
  - Add more encapsulated, granular functions based on read or write
    access to state in CollectionState.
- Some linting rules get activates due to new code-base compability to
  modern parses, fix linting errors.
  - Rename Dialog to ModalDialog as after refactoring,
    eslintvue/no-reserved-component-names does not allow name Dialog.
  - To comply with `vue/multi-word-component-names`, rename:
    - `Code`          -> `CodeInstruction`
    - `Handle`        -> `SliderHandle`
    - `Documentable`  -> `DocumentableNode`
    - `Node`          -> `NodeContent`
    - `INode`         -> `INodeContent`
    - `Responsive`    -> `SizeObserver`
- Remove `vue-property-decorator` and `vue-class-component`
  dependencies.
- Refactor `watch` with computed properties when possible for cleaner
  code.
  - Introduce `UseApplication` to reduce repeated code in new components
    that use `computed` more heavily than before.
- Change TypeScript target to `es2017` to allow top level async calls
  for getting application context/state/instance to simplify the code by
  removing async calls. However, mocha (unit and integration) tests do
  not run with top level awaits, so a workaround is used.

src/presentation/components/Scripts/Slider/Handle.vue

@@ -1,78 +0,0 @@
-<template>
-  <div
-    class="handle"
-    :style="{ cursor: cursorCssValue }"
-    @mousedown="startResize">
-    <div class="line" />
-    <font-awesome-icon
-      class="icon"
-      :icon="['fas', 'arrows-alt-h']"
-    />
-    <div class="line" />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-
-@Component
-export default class Handle extends Vue {
-  public readonly cursorCssValue = 'ew-resize';
-
-  private initialX: number = undefined;
-
-  public startResize(event: MouseEvent): void {
-    this.initialX = event.clientX;
-    document.body.style.setProperty('cursor', this.cursorCssValue);
-    document.addEventListener('mousemove', this.resize);
-    window.addEventListener('mouseup', this.stopResize);
-    event.stopPropagation();
-    event.preventDefault();
-  }
-
-  public resize(event: MouseEvent): void {
-    const displacementX = event.clientX - this.initialX;
-    this.$emit('resized', displacementX);
-    this.initialX = event.clientX;
-  }
-
-  public stopResize(): void {
-    document.body.style.removeProperty('cursor');
-    document.removeEventListener('mousemove', this.resize);
-    window.removeEventListener('mouseup', this.stopResize);
-  }
-}
-
-</script>
-
-<style lang="scss" scoped>
-@use "@/presentation/assets/styles/main" as *;
-
-$color          : $color-primary-dark;
-$color-hover    : $color-primary;
-
-.handle {
-  @include clickable($cursor: 'ew-resize');
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  @include hover-or-touch {
-    .line {
-      background: $color-hover;
-    }
-    .image {
-      color: $color-hover;
-    }
-  }
-  .line {
-    flex: 1;
-    background: $color;
-    width: 3px;
-  }
-  .icon {
-    color: $color;
-  }
-  margin-right: 5px;
-  margin-left: 5px;
-}
-</style>

src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue

@@ -2,16 +2,16 @@
   <div
     class="slider"
     v-bind:style="{
-      '--vertical-margin': this.verticalMargin,
-      '--first-min-width': this.firstMinWidth,
-      '--first-initial-width': this.firstInitialWidth,
-      '--second-min-width': this.secondMinWidth,
+      '--vertical-margin': verticalMargin,
+      '--first-min-width': firstMinWidth,
+      '--first-initial-width': firstInitialWidth,
+      '--second-min-width': secondMinWidth,
     }"
   >
     <div class="first" ref="firstElement">
       <slot name="first" />
     </div>
-    <Handle class="handle" @resized="onResize($event)" />
+    <SliderHandle class="handle" @resized="onResize($event)" />
     <div class="second">
       <slot name="second" />
     </div>
@@ -19,30 +19,45 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import Handle from './Handle.vue';
+import { defineComponent, ref } from 'vue';
+import SliderHandle from './SliderHandle.vue';
 
-@Component({
+export default defineComponent({
   components: {
-    Handle,
+    SliderHandle,
   },
-})
-export default class HorizontalResizeSlider extends Vue {
-  @Prop() public verticalMargin: string;
+  props: {
+    verticalMargin: {
+      type: String,
+      required: true,
+    },
+    firstMinWidth: {
+      type: String,
+      required: true,
+    },
+    firstInitialWidth: {
+      type: String,
+      required: true,
+    },
+    secondMinWidth: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    const firstElement = ref<HTMLElement>();
 
-  @Prop() public firstMinWidth: string;
+    function onResize(displacementX: number): void {
+      const leftWidth = firstElement.value.offsetWidth + displacementX;
+      firstElement.value.style.width = `${leftWidth}px`;
+    }
 
-  @Prop() public firstInitialWidth: string;
-
-  @Prop() public secondMinWidth: string;
-
-  private get left(): HTMLElement { return this.$refs.firstElement as HTMLElement; }
-
-  public onResize(displacementX: number): void {
-    const leftWidth = this.left.offsetWidth + displacementX;
-    this.left.style.width = `${leftWidth}px`;
-  }
-}
+    return {
+      firstElement,
+      onResize,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/presentation/components/Scripts/Slider/SliderHandle.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    class="handle"
+    :style="{ cursor: cursorCssValue }"
+    @mousedown="startResize">
+    <div class="line" />
+    <font-awesome-icon
+      class="icon"
+      :icon="['fas', 'arrows-alt-h']"
+    />
+    <div class="line" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    resized: (displacementX: number) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
+  setup(_, { emit }) {
+    const cursorCssValue = 'ew-resize';
+    let initialX: number | undefined;
+
+    const resize = (event) => {
+      const displacementX = event.clientX - initialX;
+      emit('resized', displacementX);
+      initialX = event.clientX;
+    };
+
+    const stopResize = () => {
+      document.body.style.removeProperty('cursor');
+      document.removeEventListener('mousemove', resize);
+      window.removeEventListener('mouseup', stopResize);
+    };
+
+    function startResize(event: MouseEvent): void {
+      initialX = event.clientX;
+      document.body.style.setProperty('cursor', cursorCssValue);
+      document.addEventListener('mousemove', resize);
+      window.addEventListener('mouseup', stopResize);
+      event.stopPropagation();
+      event.preventDefault();
+    }
+
+    return {
+      cursorCssValue,
+      startResize,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use "@/presentation/assets/styles/main" as *;
+
+$color          : $color-primary-dark;
+$color-hover    : $color-primary;
+
+.handle {
+  @include clickable($cursor: 'ew-resize');
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  @include hover-or-touch {
+    .line {
+      background: $color-hover;
+    }
+    .image {
+      color: $color-hover;
+    }
+  }
+  .line {
+    flex: 1;
+    background: $color;
+    width: 3px;
+  }
+  .icon {
+    color: $color;
+  }
+  margin-right: 5px;
+  margin-left: 5px;
+}
+</style>