advent22/ui/src/components/ImageModal.vue

<template>
  <div class="modal is-active" v-if="modelValue" @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>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    modelValue: Boolean,
  },
})
export default class ImageModal extends Vue {
  modelValue!: boolean;

  public created(): void {
    window.addEventListener("keydown", (e) => {
      if (e.key == "Escape") this.hide();
    });
  }

  private hide(): void {
    this.$emit("update:modelValue", false);
  }
}
</script>