Vue Modal

Vue Modal is a simple modal written in vuejs.

Table of Contents

• Installing
• Options
• Todo

Installing

npm install @mmano/vue-modal

import Vue from 'vue';
import Modal from '@mmano/vue-modal';
Vue.use(Modal);

new Vue({
  el: '#app',
});

<button @click="showModal('modal-reference-name')">Show Modal</button>
<vue-modal ref="modal-reference-name" @close="hideModal">
  <template slot="title">Modal Title</template>
  <template slot="body">
    <p>Modal Body Content</p>
  </template>
  <p slot="footer">Footer Content</p>
</vue-modal>

Options

| Name | Description | Default | | --------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | componentName | This option will change the default element name. | <vue-modal></vue-modal> | | closeIcon | Pass an svg icon to change the default close icon. | FontAwesome 5 Times | | animatedOverlay | You can pass any css class you wish and it will add it to the modal overlay. | animated fadeIn | | animationIn | The animation that is used when opening the modal. | animated bounceInLeft | | animationOut | The animation that is used when closing the modal | animated bounceOutRight |

Although the default animations are set, There is no animation styles added, If you wish you can install Animate.css and the defaults will kick in.

Example use Below:

Vue.use(Modal, {
  componentName: 'vue-modal',
  closeIcon:
    '<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/></svg>',
  animatedOverlay: 'animated fadeIn',
  animationIn: 'animated bounceInLeft',
  animationOut: '',
});

Styles

To override any modal styles you can use the following:

$v-modal-colors: (
  alpha: #ffffff,
  bravo: #37474f,
  charlie: #00bf9a,
) !default;

.Modal {
  .Modal__header {
    background-color: map-get($v-modal-colors, bravo);
  }

  .Modal__title {
    color: map-get($v-modal-colors, alpha);
  }

  .Modal__close {
    background-color: map-get($v-modal-colors, charlie);
    color: map-get($v-modal-colors, alpha);
  }

  .Modal__body {
    background-color: map-get($v-modal-colors, alpha);
    color: map-get($v-modal-colors, bravo);
  }

  .Modal__footer {
    background-color: map-get($v-modal-colors, bravo);
    color: map-get($v-modal-colors, alpha);
  }
}

TODO

• update README.md