Vue modal

Created by: christophehenry

Adding a modal system on top of #193. Will be useful in a near future. There may be a simpler method, but I'm still learning Vue. Will refactor if I find it can be simplified later.

• My awesome modal
• I can has tests?

An example of usage:

<!-- This is how you define your modal template -->
<template>
    <modal>
        <!-- The element with attribute `slot="title"` will be your title -->
        <div slot="title">
            <h1>This is a modal</h1>
            <p>With a complex title</p>
            <p>If there's no title element, only the close button is rendred</p>
        </div>

        <!--
            Anything that comes inside your modal with not `slot="title"` 
            or `slot="footer"` attribute will be your content
        -->
        <div>
            <p>Here lies the body content of the modal</p>
        </div>

        <!--
             And, obviously, the element with attribute `slot="footer"`
             will be your footer
        -->
        <div slot="footer">
            <p>There even may be a footer...</p>
            <p>But may be not, up to you</p>
        </div>
    </modal>
</template>

<!-- 
    You can add whatever methods you please.
    If you define a modal with a complex form inside, 
    for instance, your logic comes here
-->
<script>
    import Vue from "vue"
    import "../../../shared/components/Modal.vue"

    export default Vue.component("test-modal", {})
</script>

Then, in the component that wants to show the modal:

import {modalView} from "../main"
import TestModal from "./TestModal.vue"

onClickBtn(){
    // Here's how you display the modal
    modalView.renderModal(TestModal)
}

And the result: