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

@@ -0,0 +1,62 @@
+<template>
+  <span class="code-wrapper">
+    <span class="dollar">$</span>
+    <code><slot /></code>
+    <font-awesome-icon
+      class="copy-button"
+      :icon="['fas', 'copy']"
+      @click="copyCode"
+      v-tooltip.top-center="'Copy'"
+    />
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent, useSlots } from 'vue';
+import { Clipboard } from '@/infrastructure/Clipboard';
+
+export default defineComponent({
+  setup() {
+    const slots = useSlots();
+
+    function copyCode() {
+      const code = slots.default()[0].text;
+      Clipboard.copyText(code);
+    }
+
+    return {
+      copyCode,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+.code-wrapper {
+  display:flex;
+  white-space: nowrap;
+  justify-content: space-between;
+  font-family: $font-normal;
+  background-color: $color-primary-darker;
+  color: $color-on-primary;
+  align-items: center;
+  padding: 0.2rem;
+  .dollar {
+    margin-right: 0.5rem;
+    font-size: 0.8rem;
+    user-select: none;
+  }
+  .copy-button {
+    margin-left: 1rem;
+    @include clickable;
+    @include hover-or-touch {
+      color: $color-primary;
+    }
+  }
+  code {
+    font-size: 1rem;
+  }
+}
+</style>