cleanup some $refs

ui/src/components/Calendar.vue

@@ -1,5 +1,5 @@
 <template>
-  <MultiModal ref="multi_modal" />
+  <MultiModal @handle="modal_handle" />
 
   <figure>
     <div class="image is-unselectable">
@@ -46,11 +46,13 @@ import ThouCanvas from "./calendar/ThouCanvas.vue";
 export default class extends Vue {
   public readonly doors!: Door[];
   private readonly idle_caption = "Finde die Türchen auf dem Adventskalender!";
+
+  private multi_modal?: MultiModal;
   public figure_caption = this.idle_caption;
 
-  declare $refs: {
-    multi_modal: MultiModal;
-  };
+  public modal_handle(modal: MultiModal) {
+    this.multi_modal = modal;
+  }
 
   public door_hover(day: number) {
     this.figure_caption = this.$advent22.name_door(day);
@@ -61,16 +63,19 @@ export default class extends Vue {
   }
 
   public door_click() {
-    this.$refs.multi_modal.show_progress();
+    if (this.multi_modal === undefined) return;
+    this.multi_modal.show_progress();
   }
 
   public door_success(day: number, image_src: string) {
-    this.$refs.multi_modal.show_image(image_src, this.$advent22.name_door(day));
+    if (this.multi_modal === undefined) return;
+    this.multi_modal.show_image(image_src, this.$advent22.name_door(day));
   }
 
   public door_failure(msg: string) {
-    this.$refs.multi_modal.set_active(false);
     alert(msg);
+    if (this.multi_modal === undefined) return;
+    this.multi_modal.set_active(false);
   }
 }
 </script>

ui/src/components/LoginModal.vue

@@ -66,7 +66,7 @@ export default class extends Vue {
   public password = "";
 
   declare $refs: {
-    username_input: HTMLInputElement | null | undefined;
+    username_input: HTMLInputElement | unknown;
   };
 
   private on_keydown(e: KeyboardEvent) {

ui/src/components/MultiModal.vue

@@ -21,8 +21,11 @@
 </template>
 
 <script lang="ts">
-import { Vue } from "vue-class-component";
+import { Options, Vue } from "vue-class-component";
 
+@Options({
+  emits: ["handle"],
+})
 export default class extends Vue {
   public active = false;
   public progress = false;
@@ -33,6 +36,10 @@ export default class extends Vue {
     if (e.key == "Escape") this.set_active(false);
   }
 
+  public created(): void {
+    this.$emit("handle", this);
+  }
+
   public mounted(): void {
     window.addEventListener("keydown", this.on_keydown);
   }

ui/src/components/admin/CalendarAssistant.vue

@@ -1,5 +1,5 @@
 <template>
-  <MultiModal ref="multi_modal" />
+  <MultiModal @handle="modal_handle" />
 
   <BulmaDrawer header="Kalender-Assistent" @open="on_open" refreshable>
     <div class="card-content">
@@ -60,10 +60,11 @@ import BulmaDrawer from "../bulma/Drawer.vue";
 export default class extends Vue {
   public day_parts: DayStrModel[] = [];
   public day_image_names: DayStrModel[] = [];
+  private multi_modal?: MultiModal;
 
-  declare $refs: {
-    multi_modal: MultiModal;
-  };
+  public modal_handle(modal: MultiModal) {
+    this.multi_modal = modal;
+  }
 
   public on_open(ready: () => void, fail: () => void): void {
     Promise.all([
@@ -80,14 +81,15 @@ export default class extends Vue {
   }
 
   public door_click(day: number) {
-    this.$refs.multi_modal.show_progress();
+    if (this.multi_modal === undefined) return;
+    this.multi_modal.show_progress();
 
     this.$advent22
       .api_get_blob(`user/image_${day}`)
       .then((data) =>
-        this.$refs.multi_modal.show_image(data, this.$advent22.name_door(day)),
+        this.multi_modal!.show_image(data, this.$advent22.name_door(day)),
       )
-      .catch(() => this.$refs.multi_modal.set_active(false));
+      .catch(() => this.multi_modal!.set_active(false));
   }
 }
 </script>

ui/src/components/editor/PreviewDoor.vue

@@ -53,7 +53,7 @@ export default class extends Vue {
   private refreshKey = 0;
 
   declare $refs: {
-    day_input: HTMLInputElement | null | undefined;
+    day_input: HTMLInputElement | unknown;
   };
 
   private refresh() {