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/Menu/View/TheViewChanger.vue

@@ -3,7 +3,7 @@
     label="View"
     class="part">
     <MenuOptionListItem
-      v-for="view in this.viewOptions"
+      v-for="view in viewOptions"
       :key="view.type"
       :label="view.displayName"
       :enabled="currentView !== view.type"
@@ -13,53 +13,54 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { defineComponent, ref } from 'vue';
 import MenuOptionList from '../MenuOptionList.vue';
 import MenuOptionListItem from '../MenuOptionListItem.vue';
 import { ViewType } from './ViewType';
 
 const DefaultView = ViewType.Cards;
+interface IViewOption {
+  readonly type: ViewType;
+  readonly displayName: string;
+}
+const viewOptions: readonly IViewOption[] = [
+  { type: ViewType.Cards, displayName: 'Cards' },
+  { type: ViewType.Tree, displayName: 'Tree' },
+];
 
-@Component({
+export default defineComponent({
   components: {
     MenuOptionList,
     MenuOptionListItem,
   },
-})
-export default class TheViewChanger extends Vue {
-  public readonly viewOptions: IViewOption[] = [
-    { type: ViewType.Cards, displayName: 'Cards' },
-    { type: ViewType.Tree, displayName: 'Tree' },
-  ];
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    viewChanged: (viewType: ViewType) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
+  setup(_, { emit }) {
+    const currentView = ref<ViewType>();
 
-  public ViewType = ViewType;
+    setView(DefaultView);
 
-  public currentView?: ViewType = null;
-
-  public mounted() {
-    this.setView(DefaultView);
-  }
-
-  public groupBy(type: ViewType) {
-    this.setView(type);
-  }
-
-  private setView(view: ViewType) {
-    if (this.currentView === view) {
-      throw new Error(`View is already "${ViewType[view]}"`);
+    function setView(view: ViewType) {
+      if (currentView.value === view) {
+        throw new Error(`View is already "${ViewType[view]}"`);
+      }
+      currentView.value = view;
+      emit('viewChanged', currentView.value);
     }
-    this.currentView = view;
-    this.$emit('viewChanged', this.currentView);
-  }
-}
+    return {
+      ViewType,
+      viewOptions,
+      currentView,
+      setView,
+    };
+  },
+});
 
 interface IViewOption {
   readonly type: ViewType;
   readonly displayName: string;
 }
-
 </script>
-
-<style scoped lang="scss">
-
-</style>