🚧 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,112 +83,101 @@ 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[] = [
-    { 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();
+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 loading_doors = false;
-  public saving_doors = false;
+const doors: Door[] = [];
 
-  private load_doors(): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
-      API.request<DoorSaved[]>("admin/doors")
-        .then((data) => {
-          this.doors.length = 0;
+// eslint-disable-next-line prefer-const
+let current_step = 0; // write access in template
+let loading_doors = false;
+let saving_doors = false;
 
-          for (const value of data) {
-            this.doors.push(Door.load(value));
-          }
+function load_doors(): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    API.request<DoorSaved[]>("admin/doors")
+      .then((data) => {
+        doors.length = 0;
 
-          resolve();
-        })
-        .catch((error) => {
-          APIError.alert(error);
-          reject();
-        });
-    });
-  }
+        for (const value of data) {
+          doors.push(Door.load(value));
+        }
 
-  private save_doors(): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
-      const data: DoorSaved[] = [];
+        resolve();
+      })
+      .catch((error) => {
+        APIError.alert(error);
+        reject();
+      });
+  });
+}
 
-      for (const door of this.doors) {
-        data.push(door.save());
-      }
+function save_doors(): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    const data: DoorSaved[] = [];
 
-      API.request<void>({ endpoint: "admin/doors", method: "PUT", data: data })
-        .then(resolve)
-        .catch((error) => {
-          APIError.alert(error);
-          reject();
-        });
-    });
-  }
-
-  public on_open(ready: () => void, fail: () => void): void {
-    this.load_doors().then(ready).catch(fail);
-  }
-
-  public on_download() {
-    if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
-      this.loading_doors = true;
-
-      this.load_doors()
-        .then(() =>
-          toast({
-            message: "Erfolgreich!",
-            type: "is-success",
-            duration: 2e3,
-          }),
-        )
-        .catch(() => {})
-        .finally(() => (this.loading_doors = false));
+    for (const door of doors) {
+      data.push(door.save());
     }
+
+    API.request<void>({ endpoint: "admin/doors", method: "PUT", data: data })
+      .then(resolve)
+      .catch((error) => {
+        APIError.alert(error);
+        reject();
+      });
+  });
+}
+
+function on_open(ready: () => void, fail: () => void): void {
+  load_doors().then(ready).catch(fail);
+}
+
+function on_download() {
+  if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
+    loading_doors = true;
+
+    load_doors()
+      .then(() =>
+        toast({
+          message: "Erfolgreich!",
+          type: "is-success",
+          duration: 2e3,
+        }),
+      )
+      .catch(() => {})
+      .finally(() => (loading_doors = false));
   }
+}
 
-  public on_discard() {
-    if (confirm("Alle Türchen löschen? (nur lokal)")) {
-      // empty `doors` array
-      this.doors.length = 0;
-    }
+function on_discard() {
+  if (confirm("Alle Türchen löschen? (nur lokal)")) {
+    // empty `doors` array
+    doors.length = 0;
   }
+}
 
-  public on_upload() {
-    if (confirm("Aktuelle Änderungen an den Server schicken?")) {
-      this.saving_doors = true;
+function on_upload() {
+  if (confirm("Aktuelle Änderungen an den Server schicken?")) {
+    saving_doors = true;
 
-      this.save_doors()
-        .then(() => {
-          this.load_doors()
-            .then(() =>
-              toast({
-                message: "Erfolgreich!",
-                type: "is-success",
-                duration: 2e3,
-              }),
-            )
-            .catch(() => {})
-            .finally(() => (this.saving_doors = false));
-        })
-        .catch(() => (this.saving_doors = false));
-    }
+    save_doors()
+      .then(() => {
+        load_doors()
+          .then(() =>
+            toast({
+              message: "Erfolgreich!",
+              type: "is-success",
+              duration: 2e3,
+            }),
+          )
+          .catch(() => {})
+          .finally(() => (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) {