cretueusebiu/vmodal

A Vue component for Bootstrap modals.

vmodal's Issues

Bootstrap 5

<template>
  <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document" :class="sizeClass">
      <div class="modal-content">
        <slot name="content">
          <form @submit.prevent="$emit('submit', $event)" @keydown="onKeydown">
            <div class="modal-header">
              <slot name="header">
                <div class="modal-title">
                  <slot name="title" />
                </div>
                <button v-if="close" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
              </slot>
            </div>
            <div class="modal-body">
              <slot name="body" />
            </div>
            <div v-if="$slots.footer" class="modal-footer">
              <slot name="footer" />
            </div>
          </form>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
import Modal from 'bootstrap/js/dist/modal'

export default {
  name: 'Modal',

  props: {
    backdrop: {
      type: [Boolean, String],
      default: true
    },

    close: {
      type: Boolean,
      default: true
    },

    focus: {
      type: Boolean,
      default: true
    },

    keyboard: {
      type: Boolean,
      default: true
    },

    size: {
      type: String,
      default: null
    },

    small: Boolean,
    large: Boolean,

    form: {
      type: Object,
      default: null
    },

    submit: {
      type: Function,
      default: null
    }
  },

  computed: {
    options () {
      return {
        focus: this.focus,
        backdrop: this.backdrop,
        keyboard: this.keyboard
      }
    },

    sizeClass () {
      if (this.small) { return 'modal-sm' }

      if (this.large) { return 'modal-lg' }

      return this.size ? `modal-${this.size}` : null
    }
  },

  mounted () {
    this.$modal = new Modal(this.$el, this.options)

    this.registerEvents()
  },

  beforeDestroy () {
    this.hide()
  },

  methods: {
    show () {
      this.updateOptions()

      this.$modal.show()

      return this
    },

    hide () {
      this.$modal.hide()

      return this
    },

    toggle () {
      this.$modal.toggle()

      return this
    },

    updateOptions () {
      Object.keys(this.options).forEach((key) => {
        this.$modal._config[key] = this.options[key]
      })
    },

    registerEvents () {
      ['show', 'shown', 'hide', 'hidden'].forEach((name) => {
        this.$el.addEventListener(`${name}.bs.modal`, e => this.$emit(name, e))
      })
    },

    onKeydown (e) {
      if (this.form) {
        this.form.errors.clear(e.target.name)
      }
    }
  }
}
</script>