VueJS Modal Component

ModalComponent.vue

<template>
  <transition name="fade" @after-enter="showContent = true">
    <!-- Modal wrapper with overlay -->
    <div
      id="modal-sections"
      v-if="show"
      v-bind:class="['uk-modal', { 'uk-open': true, 'uk-display-block': true }]"
      @click.self="onClickModalBackground"
    >
      <!-- Modal content -->
      <transition name="fade" @after-leave="closeModal">
        <div class="uk-modal-dialog" v-if="showContent">
          <!-- Close button -->
          <button
            v-if="hasCloseButton"
            @click="showContent = false"
            class="uk-modal-close-default uk-close uk-icon"
            type="button"
            data-uk-close
          ></button>

          <!-- Modal header -->
          <div v-if="title" class="uk-modal-header">
            <h2 class="uk-modal-title">{{ title }}</h2>
          </div>

          <!-- Modal body -->
          <div class="uk-modal-body">
            <slot name="content" />

            <!-- Confirmation buttons -->
            <div v-if="confirmationMode" class="confirm-block uk-margin-top">
              <button class="uk-button uk-button-primary" @click="confirmStatus(true)">
                {{ 'common.yes' | translate }}
              </button>
              <button class="uk-button uk-button-danger" @click="confirmStatus(false)">
                {{ 'common.no' | translate }}
              </button>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

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

/**
 * Modal window component
 * Visibility is controlled by `show` property alone.
 */
@Component
export default class ModalComponent extends Vue {
  /**
   * Modal title in header
   */
  @Prop()
  public title!: string;

  /**
   * Modal visibility depends on this prop
   */
  @Prop({ default: false })
  public show!: boolean;

  /**
   * Flag if modal is closable by clicking the bg
   */
  @Prop({ default: true })
  public closableByBackgroundClick!: boolean;

  /**
   * Flag if modal should be closable by a close button
   */
  @Prop({ default: true })
  public hasCloseButton!: boolean;

  @Prop({ default: false })
  public confirmationMode!: boolean;

  public showContent: boolean = false;

  /**
   * Emit close event to close the modal
   */
  public closeModal() {
    this.$emit('close-modal');
  }

  /**
   * Emit confirmation event
   */
  public confirmStatus(confirmStatus: boolean) {
    this.$emit('confirm-status', confirmStatus);
  }

  /**
   * Handle bg click
   */
  public onClickModalBackground() {
    if (this.closableByBackgroundClick) {
      this.showContent = false;
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../less/_variables';

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: 0.12s opacity ease-out;
}

.confirm-block {
  button:not(:first-child) {
    margin-left: 15px;
  }
}
</style>