modulplaner-frontend/src/components/modals/BaseModal.vue

<template>
  <div
    v-if="show"
    class="relative z-10"
    aria-labelledby="modal-title"
    role="dialog"
    aria-modal="true"
    @keypress.esc="close()"
    @click="
      (event) => {
        if (event.target == $refs.modal) close();
      }
    "
  >
    <div
      class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity cursor-pointer"
    />

    <div class="fixed inset-0 z-10 overflow-y-auto">
      <div
        ref="modal"
        class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
      >
        <div
          class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
          data-name="modal"
        >
          <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <button
              title="Schliessen"
              class="close-button"
              @click="close()"
            >
              <font-awesome-icon icon="fa-solid fa-xmark" />
            </button>

            <div class="mt-3 sm:mt-0 sm:ml-4 sm:text-left">
              <slot />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "BaseModal",
  props: {
    show: {
      type: Boolean,
      required: true,
    },
  },
  emits: ["close"],
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped>
.close-button {
  @apply absolute
    right-1
    top-0
    m-4
    cursor-pointer
    hover:bg-gray-200
    active:bg-gray-300
    dark:hover:bg-gray-600
    dark:active:bg-gray-700
    aspect-square
    w-7
    rounded;
}
</style>