Switch Vue components from class to object syntax

web-frontend/src/App.vue

@@ -3,15 +3,15 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 import MainWindow from "./components/window/MainWindow.vue";
 
-@Options({
+export default defineComponent({
+	name: "App",
 	components: {
 		MainWindow,
 	},
-})
+});
-export default class App extends Vue {}
 </script>
 
 <style lang="scss">

web-frontend/src/components/footer/FooterBar.vue

@@ -44,18 +44,14 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
-import LayoutRow from "../layout/LayoutRow.vue";
-import LayoutCol from "../layout/LayoutCol.vue";
 import InputHint from "./InputHint.vue";
 
-@Options({
+export default defineComponent({
+	name: "FooterBar",
 	components: {
-		LayoutRow,
-		LayoutCol,
 		InputHint,
 	},
-	props: {},
+});
-})
+
-export default class FooterBar extends Vue {}
 </script>

web-frontend/src/components/footer/InputHint.vue

@@ -54,7 +54,7 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
 export enum MouseInputInteraction {
 	"None" = "None",
@@ -69,14 +69,14 @@ export enum MouseInputInteraction {
 	"MMBDrag" = "MMBDrag",
 }
 
-@Options({
+export default defineComponent({
-	components: {},
+	name: "InputHint",
 	props: {
-		inputKeys: { type: Array, default: [] },
+		inputKeys: { type: Array, default: () => [] },
 		inputMouse: { type: String },
 	},
 	computed: {
-		getMouseIconInnerSVG() {
+		getMouseIconInnerSVG(): string {
 			switch (this.inputMouse) {
 			case MouseInputInteraction.None: return `
 				<path style="fill:#888888;" d="M9,7c0,0.55-0.45,1-1,1l0,0C7.45,8,7,7.55,7,7V4.5c0-0.55,0.45-1,1-1l0,0c0.55,0,1,0.45,1,1V7z" />
@@ -140,6 +140,5 @@ export enum MouseInputInteraction {
 			}
 		},
 	},
-})
+});
-export default class InputHint extends Vue {}
 </script>

web-frontend/src/components/header/FileMenu.vue

@@ -48,11 +48,9 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
+export default defineComponent({
-	components: {},
+	name: "FileMenu",
-	props: {},
+});
-})
-export default class FileMenu extends Vue {}
 </script>

web-frontend/src/components/header/HeaderBar.vue

@@ -30,22 +30,17 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
-import LayoutRow from "../layout/LayoutRow.vue";
-import LayoutCol from "../layout/LayoutCol.vue";
 import FileMenu from "./FileMenu.vue";
 import WindowTitle from "./WindowTitle.vue";
 import WindowButtons from "./WindowButtons.vue";
 
-@Options({
+export default defineComponent({
+	name: "HeaderBar",
 	components: {
-		LayoutRow,
-		LayoutCol,
 		FileMenu,
 		WindowTitle,
 		WindowButtons,
 	},
-	props: {},
+});
-})
-export default class HeaderBar extends Vue {}
 </script>

web-frontend/src/components/header/WindowButtons.vue

@@ -46,13 +46,12 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
+export default defineComponent({
-	components: {},
+	name: "WindowButtons",
 	props: {
 		maximized: { type: Boolean, default: false },
 	},
-})
+});
-export default class WindowButtons extends Vue {}
 </script>

web-frontend/src/components/header/WindowTitle.vue

@@ -14,11 +14,9 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
+export default defineComponent({
-	components: {},
+	name: "WindowTitle",
-	props: {},
+});
-})
-export default class WindowTitle extends Vue {}
 </script>

web-frontend/src/components/layout/LayoutCol.vue

@@ -13,11 +13,9 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
+export default defineComponent({
-	components: {},
+	name: "LayoutCol",
-	props: {},
+});
-})
-export default class LayoutCol extends Vue {}
 </script>

web-frontend/src/components/layout/LayoutRow.vue

@@ -13,11 +13,9 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
+export default defineComponent({
-	components: {},
+	name: "LayoutRow",
-	props: {},
+});
-})
-export default class LayoutRow extends Vue {}
 </script>

web-frontend/src/components/panel-system/DockablePanel.vue

@@ -131,16 +131,15 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 
-@Options({
+export default defineComponent({
-	components: {},
+	name: "DockablePanel",
 	props: {
 		tabConstantWidths: { type: Boolean, default: false },
 		tabCloseButtons: { type: Boolean, default: false },
 		tabLabels: { type: Array, required: true },
 		tabActiveIndex: { type: Number, required: true },
 	},
-})
+});
-export default class DockablePanel extends Vue {}
 </script>

web-frontend/src/components/panel-system/PanelArea.vue

@@ -39,18 +39,17 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import DockablePanel from "./DockablePanel.vue";
 
-@Options({
+export default defineComponent({
+	name: "PanelArea",
 	components: {
 		LayoutRow,
 		LayoutCol,
 		DockablePanel,
 	},
-	props: {},
+});
-})
-export default class PanelArea extends Vue {}
 </script>

web-frontend/src/components/window/MainWindow.vue

@@ -34,14 +34,15 @@
 </style>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { defineComponent } from "vue";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import HeaderBar from "../header/HeaderBar.vue";
 import PanelArea from "../panel-system/PanelArea.vue";
 import FooterBar from "../footer/FooterBar.vue";
 
-@Options({
+export default defineComponent({
+	name: "MainWindow",
 	components: {
 		LayoutRow,
 		LayoutCol,
@@ -49,7 +50,5 @@ import FooterBar from "../footer/FooterBar.vue";
 		PanelArea,
 		FooterBar,
 	},
-	props: {},
+});
-})
-export default class MainWindow extends Vue {}
 </script>