ep-vue-modal v0.0.4

ep-vue-modal

Small library to work with modals

Installation via npm

npm install ep-vue-modal

in main.ts

    import 'ep-vue-modal/styles'
    import { installModalPlugin } from 'ep-vue-modal'
    ...
    app.use(installModalPlugin)

in root component (typicaly App.vue)

    <template>
            ...your code
        <EPModalContainer/>
    </template>
    <script setup>
    import {EPModalContainer} from 'ep-vue-modal'
    </script>

Show modal

When you need open modal from any component in app

            <template>
                <button @click="openModalHandler">
            </template>
            <script setup>
            import { useModal } from 'ep-vue-modal'
            import YourModalComponent from '../../YourModalComponent.vue'
            const {showModal,hideModal} = useModal()
            const openModalHandler = ()=>{
            showModal(YourModalComponent,{
                ...yourComponenProps
            },{
                closeHandler:()=>{
            ...your before close logic
            hideModal()
                }
            })
            }
            </script>

Prevent close modal in your modal content component

in your modal content component

        <template>
            <div> My modal content </div>
        </template>
        <script setup>
        import { useModal } from 'ep-vue-modal'
        import YourModalComponent from '../../YourModalComponent.vue'
        const { closeHandler } = useModal()
        closeHandler((hide,event:Event)=>{
        ...your logic before close modal
        hide()
        })
        </script>