Vue Modal 🖼

Intro

Reusable Modal component, supports own custom HTML, text and classes and/or passing a component. Featuring multiple modal content / buttons.

What this ISN'T

This component is not meant to be a bootstrap-ish already-styled-modal-replacer for Vue.

What this IS

Instead: it wants to take it a step further: it gives you a skeleton base structure where you are free to apply your own css styling according to your requirements/website and gives you freedom of formatting the content/arrows/buttons/events as you wish with little to no effort.

Features

• Animated modal transition
• Overlay on modal background
• Custom event triggering on before-close and before-open
• Conditional: Next/prev arrows, close button, paging
• Next and prev arrow for switching between modal contents
• Modal contents navigation with custom paging
• CSS/HTML customisation of: prev/next arrows, modal content, modal navigation, modal trigger button/s

Demo

• Code editor - codesandobx
• Preview - codesandbox

Installation

npm i @melmacaluso/vue-modal

Usage

Simply import it in your desired vue component as follows:

import Modal from "@melmacaluso/vue-modal";

Props

| Prop | Type | Comment | | ------------------ | -------- | -------------------------------------------------------------------------------------------------------- | | btnText | String | Text label for modal button | | modalContent | String | Pass here your html for the modal main modal | | closeBtn | Boolean | Conditionally add a close button | | closeBtn-content | String | Pass here your html for the close button | | multiple | Boolean | Allow multiple buttons/content within the modal | | modals | Array | Pass here an array of objects, they retain the same props within the array's scope ie. <scope>.btnText | | showNav | Boolean | Conditionally show a navigation with each modal's btnText | | showArrows | Boolean | Conditionally show an arrow based navigation | | showArrowsCloseBtn | Boolean | Conditionally show an the close button between the prev/next arrows, it inherits closeBtn-content | | arrowNextContent | String | Pass here your html for the next arrow | | arrowPrevContent | String | Pass here your html for the previous arrow | | @before-open | Function | Attach here your custom function, it will be invoked before the modal opens | | @before-close | Function | Attach here your custom function, it will be invoked before the modal closes |

Examples

Inline HTML:

<Modal
  btnText="Press me, senpai 😊"
  modalContent="
        <div>
          <h2> Hello I am a modal</h2>
          <p>I like stating the obvious: <b>the obvious</b></p>
          <p>Now, try this trick: <code>Ctrl + Shift + W </code> 😉</p>
        </div>
        "
  :closeBtn="true"
  closeBtn-content="
        <span>X</span>
        "
/>

Passing component:

<Modal
  btnText="Press me, senpai 😊"
  :closeBtn="true"
  closeBtnHTML="<span>X</span>"
>
  <ExampleComponent/>
</Modal>

Multiple buttons & modal content + custom functions:

<Modal
  :multiple="true"
  @before-open="yourOpenFn()"
  @before-close="yourCloseFn()"
  :modals="[
    {
      btnText: 'Press me 1',
      modalContent: 'This is <strong>the</strong> content 1'
    },
    {
      btnText: 'Press me 2',
      modalContent:
        '<img src=\'https://media.giphy.com/media/5exwXWg9u7yow/giphy.gif\'>'
    },
    {
      btnText: 'Press me 3',
      modalContent: 'This is the <h3>content 3</h3>'
    }
  ]"
  :showNav="true"
/>

From Api/Json feed + Prev/Next Arrows:

<Modal
  :multiple="true"
  :modals="formattedUsers"
  :showArrows="true"
/>

export default {
  data: () => {
    return {
      users: []
    }
  },
  mounted(){
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(res => this.users = res)
      .catch(err => console.log(err))
  },
  computed: {
    formattedUsers: function() {
      return this.users.map(user => {
        return {
          btnText: `${user.name}`,
          modalContent: `
            <h2>Email:${user.email}</h2>
            <h2>Phone:${user.phone}</h2>
          `
        };
      });
    }
  }
}