parsley/app/javascript/components/AppModal.vue

<template>
  <Teleport to="body">
    <div :class="['popup', 'modal', { 'is-wide': wide, 'is-active': open && error === null }]">
      <div class="modal-background" @click="close"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <slot name="title">
            <p class="modal-card-title">{{ title }}</p>
            <app-icon class="close-button" icon="x" aria-label="close" @click="close"></app-icon>
          </slot>
        </header>

        <section class="modal-card-body">
          <slot></slot>
        </section>
      </div>
    </div>
  </Teleport>
</template>

<script>

  import { mapState } from "pinia";
  import { useAppConfigStore } from "../stores/appConfig";

  export default {
    emits: ["dismiss"],

    props: {
      open: {
        type: Boolean,
        default: false
      },
      title: String,
      wide: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      ...mapState(useAppConfigStore, [
        'error'
      ])
    },

    methods: {
      close() {
        this.$emit("dismiss");
      }
    },

    components: {
    }
  }

</script>

<style lang="scss" scoped>

  .close-button {
    cursor: pointer;
  }

</style>