All files / vue-storybook/src/components/generic Modal.vue

61.54% Statements 8/13
0% Branches 0/2
33.33% Functions 2/6
61.54% Lines 8/13
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91                                                                                              4x 4x 4x   4x                     1x                                           1x 1x 1x        
<template>
    <div class="modal" tabindex="-1" role="dialog" ref="modal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-info text-white border-bottom-0">
                    <h5 class="modal-title font-weight-bold">
                        {{ title }}
                    </h5>
                    <icon name="fa-window-close" class="cursor-pointer" :size=1.25 data-dismiss="modal" aria-label="Close" />
                </div>
 
                <div class="modal-info p-3" v-if="$slots.info">
                    <slot name="info"></slot>
                </div>
 
                <div class="modal-body p-0">
                    <slot name="body"></slot>
                </div>
 
                <div class="modal-footer">
                    <slot name="additional-buttons"></slot>
                    <button-item type="secondary" icon="fa-window-close" text="Close" data-dismiss="modal"></button-item>
                </div>
            </div>
        </div>
    </div>
</template>
 
<style lang="scss" scoped>
@import '../../scss/_variables';
@import '~bootstrap/scss/bootstrap';
 
.modal {
    .modal-content {
        .modal-info {
            background-color: lighten($secondary-color, 25%);
        }
 
        .modal-body {
            max-height: 65vh;
            overflow-y: auto;
        }
    }
}
</style>
 
<script>
import jQuery from 'jquery';
import ButtonItem from './ButtonItem.vue';
import Icon from './Icon.vue';
 
const $ = jQuery;
 
export default {
  components: {
    ButtonItem,
    Icon
  },
  props: {
    title: { type: String, required: true }
  },
  data () {
    return {
      modal: null,
      auto_focus_el: null
    }
  },
  methods: {
    hide () {
      this.modal.modal('hide');
    },
    show () {
      this.modal.modal('show');
    },
    toggle () {
      this.modal.modal('toggle');
    },
    autoFocus () {
      if (this.auto_focus_el) {
        this.auto_focus_el.focus();
      }
    }
  },
  mounted () {
    this.modal = $(this.$refs.modal);
    this.auto_focus_el = this.modal.find('[autofocus]').first();
    this.modal.on('shown.bs.modal', this.autoFocus);
  }
}
</script>