jenesius-vue-modal

Jenesius Vue Modal

Jenesius vue modal is simple library for Vue 3 only.

• Site
• Documentation

Installation

npm i jenesius-vue-modal

---

For add modals in your project you need to put the modal's container in the App component:

App.vue

<template>
    <widget-container-modal />
</template>
<script>
    import {container} from "jenesius-vue-modal";
    
    export default {
        components: {WidgetContainerModal: container},
        name: "App"
    }
</script>

OpenModal

    import {openModal} from "jenesius-vue-modal";

    openModal(VueComponent, props);

Methods

Function name	Description
openModal(VueComponent, props)	Close any other modals and then open provided modal
closeModal()	Close all modals
pushModal(VueComponent, props)	Add on top modal component
popModal()	Close the last modal component

onclose hook

To track the closing of a modal window, you need to use onclick

const modal = await openModal(Modal);
modal.onclose = () => {
    console.log("Close");
}

To cancel closing the window, return false:

const modal = await openModal(Modal);
modal.onclose = (next) => {
    if (something === "false") return next(false);
}

closeModal();//if something === false, modal will not be closed

Inside component, you can use:

    export default{
        beforeModalClose(next){}
    }

or

    export default{
        setup() {
			onBeforeModalClose((next) => {
			});
		}
    }

Example VueModalComponent

WidgeTestModal.vue

    <template>
        <p>{{title}}</p>
    </template>
    <script>
        export default {
            props: {
                title: String
            }
        }
    </script>

To show this component

    import {openModal} from "jenesius-vue-modal"
    import WidgeTestModal from "WidgeTestModal.vue";

    openModal(WidgeTestModal, {
        title: "Hello World!"
    });

---

####Do you like this module? Put a star on GitHub