🚧 wip on ui: rework for vue 3 composition API

ui/src/components/admin/DoorMapEditor.vue

@@ -68,15 +68,13 @@
   </BulmaDrawer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { API } from "@/lib/api";
 import { APIError } from "@/lib/api_error";
 import { Step } from "@/lib/helpers";
 import { DoorSaved } from "@/lib/model";
 import { Door } from "@/lib/rects/door";
-import { advent22Store } from "@/lib/store";
 import { toast } from "bulma-toast";
-import { Options, Vue } from "vue-class-component";
 
 import Calendar from "../Calendar.vue";
 import BulmaBreadcrumbs from "../bulma/Breadcrumbs.vue";
@@ -85,37 +83,27 @@ import BulmaDrawer from "../bulma/Drawer.vue";
 import DoorChooser from "../editor/DoorChooser.vue";
 import DoorPlacer from "../editor/DoorPlacer.vue";
 
-@Options({
-  components: {
-    BulmaBreadcrumbs,
-    BulmaButton,
-    BulmaDrawer,
-    DoorPlacer,
-    DoorChooser,
-    Calendar,
-  },
-})
-export default class extends Vue {
-  public readonly steps: Step[] = [
+const steps: Step[] = [
   { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
   { label: "Ordnen", icon: "fa-solid fa-list-ol" },
   { label: "Vorschau", icon: "fa-solid fa-magnifying-glass" },
 ];
-  public current_step = 0;
-  public doors: Door[] = [];
-  private readonly store = advent22Store();
 
-  public loading_doors = false;
-  public saving_doors = false;
+const doors: Door[] = [];
 
-  private load_doors(): Promise<void> {
+// eslint-disable-next-line prefer-const
+let current_step = 0; // write access in template
+let loading_doors = false;
+let saving_doors = false;
+
+function load_doors(): Promise<void> {
   return new Promise<void>((resolve, reject) => {
     API.request<DoorSaved[]>("admin/doors")
       .then((data) => {
-          this.doors.length = 0;
+        doors.length = 0;
 
         for (const value of data) {
-            this.doors.push(Door.load(value));
+          doors.push(Door.load(value));
         }
 
         resolve();
@@ -127,11 +115,11 @@ export default class extends Vue {
   });
 }
 
-  private save_doors(): Promise<void> {
+function save_doors(): Promise<void> {
   return new Promise<void>((resolve, reject) => {
     const data: DoorSaved[] = [];
 
-      for (const door of this.doors) {
+    for (const door of doors) {
       data.push(door.save());
     }
 
@@ -144,15 +132,15 @@ export default class extends Vue {
   });
 }
 
-  public on_open(ready: () => void, fail: () => void): void {
-    this.load_doors().then(ready).catch(fail);
+function on_open(ready: () => void, fail: () => void): void {
+  load_doors().then(ready).catch(fail);
 }
 
-  public on_download() {
+function on_download() {
   if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
-      this.loading_doors = true;
+    loading_doors = true;
 
-      this.load_doors()
+    load_doors()
       .then(() =>
         toast({
           message: "Erfolgreich!",
@@ -161,24 +149,24 @@ export default class extends Vue {
         }),
       )
       .catch(() => {})
-        .finally(() => (this.loading_doors = false));
+      .finally(() => (loading_doors = false));
   }
 }
 
-  public on_discard() {
+function on_discard() {
   if (confirm("Alle Türchen löschen? (nur lokal)")) {
     // empty `doors` array
-      this.doors.length = 0;
+    doors.length = 0;
   }
 }
 
-  public on_upload() {
+function on_upload() {
   if (confirm("Aktuelle Änderungen an den Server schicken?")) {
-      this.saving_doors = true;
+    saving_doors = true;
 
-      this.save_doors()
+    save_doors()
       .then(() => {
-          this.load_doors()
+        load_doors()
           .then(() =>
             toast({
               message: "Erfolgreich!",
@@ -187,10 +175,9 @@ export default class extends Vue {
             }),
           )
           .catch(() => {})
-            .finally(() => (this.saving_doors = false));
+          .finally(() => (saving_doors = false));
       })
-        .catch(() => (this.saving_doors = false));
-    }
+      .catch(() => (saving_doors = false));
   }
 }
 </script>

ui/src/components/calendar/CalendarDoor.vue

@@ -13,29 +13,21 @@
   </SVGRect>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
-import { Options, Vue } from "vue-class-component";
 
 import SVGRect from "./SVGRect.vue";
 
-@Options({
-  components: {
-    SVGRect,
-  },
-  props: {
-    door: Door,
-    force_visible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-})
-export default class extends Vue {
-  public readonly store = advent22Store();
+const store = advent22Store();
 
-  public door!: Door;
-  public force_visible!: boolean;
-}
+withDefaults(
+  defineProps<{
+    door: Door;
+    force_visible: boolean;
+  }>(),
+  {
+    force_visible: false,
+  },
+);
 </script>

ui/src/components/calendar/ThouCanvas.vue

@@ -29,14 +29,12 @@ function get_event_thous(event: MouseEvent): Vector2D {
   );
 }
 
-type TCMouseEvent = [MouseEvent, Vector2D];
-
 const emit = defineEmits<{
-  mousedown: TCMouseEvent;
-  mouseup: TCMouseEvent;
-  mousemove: TCMouseEvent;
-  click: TCMouseEvent;
-  dblclick: TCMouseEvent;
+  (event: "mousedown", e: MouseEvent, point: Vector2D): void;
+  (event: "mouseup", e: MouseEvent, point: Vector2D): void;
+  (event: "mousemove", e: MouseEvent, point: Vector2D): void;
+  (event: "click", e: MouseEvent, point: Vector2D): void;
+  (event: "dblclick", e: MouseEvent, point: Vector2D): void;
 }>();
 
 function transform_mouse_event(event: MouseEvent) {