Simple image modal

ui/src/App.vue

@@ -7,12 +7,13 @@
       <h2 class="subtitle has-text-centered">Der Gelöt</h2>
 
       <LoginModal ref="login_modal" />
-      <ImageModal v-model="modal_visible" :imageUrl="image_url" />
+      <ImageModal ref="image_modal" />
+
       <CalendarDoor
         v-for="(_, index) in 24"
         :key="index"
         :day="index"
-        @openDoor="paula"
+        @openDoor="open_calendar_door"
       />
     </div>
   </div>
@@ -33,13 +34,12 @@ import LoginModal from "./components/LoginModal.vue";
   },
 })
 export default class App extends Vue {
-  image_url = "";
-  modal_visible = false;
   private visible_days = 0;
   date = "";
 
   declare $refs: {
     login_modal: LoginModal;
+    image_modal: ImageModal;
   };
 
   public mounted(): void {
@@ -57,9 +57,9 @@ export default class App extends Vue {
     this.$refs.login_modal.set_active(true);
   }
 
-  private paula(url: string): void {
-    this.image_url = url;
-    this.modal_visible = true;
+  private open_calendar_door(image_src: string): void {
+    this.$refs.image_modal.set_src(image_src);
+    this.$refs.image_modal.set_active(true);
   }
 }
 </script>

ui/src/components/ImageModal.vue

@@ -1,36 +1,34 @@
 <template>
-  <div class="modal is-active" v-if="modelValue" @click="hide">
+  <div class="modal is-active" v-if="active" @click="set_active(false)">
     <div class="modal-background" />
 
     <div class="modal-content">
       <div class="image is-square">
-        <img :src="imageUrl" alt="Kalender-Bild" />
+        <img :src="image_src" alt="Kalender-Bild" />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { Vue } from "vue-class-component";
 
-@Options({
-  props: {
-    modelValue: Boolean,
-    imageUrl: String,
-  },
-})
 export default class ImageModal extends Vue {
-  modelValue!: boolean;
-  imageUrl!: string;
+  private active = false;
+  public image_src = "";
 
   public created(): void {
     window.addEventListener("keydown", (e) => {
-      if (e.key == "Escape") this.hide();
+      if (e.key == "Escape") this.set_active(false);
     });
   }
 
-  private hide(): void {
-    this.$emit("update:modelValue", false);
+  public set_active(state: boolean): void {
+    this.active = state;
+  }
+
+  public set_src(src: string): void {
+    this.image_src = src;
   }
 }
 </script>