<template>
  <div>
    <div class="modal-backdrop fade show" v-if="modalVisible"></div>
    <div class="modal fade" :class="{ show: modalVisible }" v-if="modalVisible" @click="hide">
      <dialog class="modal-dialog" @click.stop open="modalVisible" v-bind:style="[maxWidth.length ? { 'max-width': maxWidth } : {}]">
        <div class="modal-content">
          <slot>
            <!-- This is fallback content, used for the docs page -->
            <h3>Hier komt de inhoud van het modal-element.</h3>
          </slot>
        </div>
      </dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
dialog {
  background: transparent;
  border: 0;
  padding: 0;
}

.modal.show {
  display: flex;
  opacity: 1;
}

.modal.show .modal-dialog {
  margin-top: auto;
  margin-bottom: auto;
  max-width: 60vw; //override bootstrap styling
}
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Modal extends Vue {
  @Prop({ type: String, default: '' }) readonly maxWidth!: string;

  modalVisible = false;

  show() {
    this.modalVisible = true;
  }

  hide() {
    this.modalVisible = false;
  }
}
</script>
