ImageModal

ui/package.json

@@ -8,7 +8,6 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "bulma": "^0.9.4",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-class-component": "^8.0.0-0"
@@ -21,8 +20,9 @@
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
+    "bulma": "^0.9.4",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "typescript": "~4.5.5"
   }
-}
+}

ui/src/App.vue

@@ -6,21 +6,27 @@
 
       <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" />
     </div>
+
+    <ImageModal />
   </div>
 </template>
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
 import CalendarDoor from "./components/CalendarDoor.vue";
+import ImageModal from "./components/ImageModal.vue";
 
 @Options({
   components: {
     CalendarDoor,
+    ImageModal,
   },
 })
 export default class App extends Vue {}
 </script>
 
 <style>
-/* @import "@/bulma/"; */
+body {
+  min-height: 100vh;
+}
 </style>

ui/src/components/ImageModal.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="modal is-active" v-if="visible" @click="hide">
+    <div class="modal-background" />
+
+    <div class="modal-content">
+      <!-- <p class="image is-4by3"> -->
+      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="" />
+      <!-- </p> -->
+    </div>
+  </div>
+
+  <button class="button" @click="show">modal</button>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component";
+
+export default class ImageModal extends Vue {
+  visible = false;
+
+  public created(): void {
+    window.addEventListener("keydown", (e) => {
+      if (e.key == "Escape") this.hide();
+    });
+  }
+
+  private show(): void {
+    this.visible = true;
+  }
+
+  private hide(): void {
+    this.visible = false;
+  }
+}
+</script>