it is the time to get rid of those ugly 💩 predefined modals

🚀 A simplistic, ⚡ lightweight (5kb gzipped) and easy to use wrapper around your components that will help you create custom and dynamic modals, from your components.

install with: npm i xmodal-vue

Github page documentation

👽

✅ you can check xmodal github page for documentation

SHOWCASE AND DEMO

#1 Basic modal with v-model

all modals have default options. also they can have v-model if you want bind it to a boolean value

<div id="app">
        <img alt="Xmodal logo" src="./assets/logo.png" />
        <button @click="isModalOpen = !isModalOpen">Open modal with v-model biding</button>
        <xmodal v-model="isModalOpen" :params="options" />
    </div>

    export default {
    name: "App",
    data() {
        return {
	    isModalOpen: false,
            // default options. component is required !
            options: {
                component: require("./components/no.vue").default,
            }
        };
    }
};

#2 Open modal with global function

you can also open your modal by calling this.$xmodal.open(), it will open your modal with default options

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />
        <button @click="open">Open modal with global fnction</button>
        <xmodal :params="options" />
    </div>
</template>

export default {
    name: "App",
    data() {
        return {
            // this is our default options
            options: {
                component: require("./components/no.vue").default,
                backgroundColor: "#000000",
                opacity: "0.7",
            }
        };
    },
    methods: {
        open() {
            // this will open the modal with default options
            this.$xmodal.open();
        }
    }
}

#3 Open new modal with open function

you can overwrite default modal options by passing an object to open function this.$xmodal.open(params)

export default {
    name: "App",
    data() {
        return {
            // this is our default options
            options: {
                component: require("./components/no.vue").default,
                backgroundColor: "#000000",
                opacity: "0.7",
            }
        };
    },
    methods: {
        open() {
            this.$xmodal.open({
                // we are overwriting default options and assigning new component to xmodal
                component: require("./components/myNewComponent.vue").default,
                backgroundColor: "#FFFFFF",
                opacity: "0.4",
            });
        }
    }
}

#4 Disable a modal

You can disable your modal by passing 'isDisable: true' as modal options. you can close disabled modal by calling this.$xmodal.close() in the component

// your main view with xmodal component on it
export default {
    name: "App",
    data() {
        return {
            // default options. component is required !
            options: {
                component: require("./components/myModal.vue").default,
                isDisable: true
            },
        };
    },
};

// in your component myModal.vue
export default {
    name: "myModal",
    methods: {
        close() {
            // close disabled modal from component
            this.$xmodal.close();
        }
    }
};

#5 Add timer to the modal

you can set timer by passing 'hasTimer: time' to the modal. hasTimer can accept Number, String and Object

export default {
    name: "App",
    data() {
        return {
            // default options. component is required !
            options: {
                component: require("./components/myModal.vue").default,
                // hasTimer with number
                hasTimer: 10
                // hasTimer with string values
                hasTimer: "10",
                hasTimer: "10s"

                // customize timer indicator
                hasTimer: {
                    duration: 10  // it still can accept number or string
                    color: "#000000" // change color of indicator
                }
            },
        };
    },
};

#6 Sending props to the component

you can send multiple props to your component by passing 'props' as option

export default {
    name: "App",
    data() {
        return {
            // default options. component is required !
            options: {
                component: require("./components/myModal.vue").default,
                props: {
                    title: "everything is alright",
                    description: "this is my brilliant description text",
                    ... // you can add more
                }
            }
        };
    },
};

#7 Callback functions

there are two callbacks that you can use to write code on when modal is mounted or destroyed


          export default {
    name: "App",
    data() {
        return {
            // default options
            options: {
                component: require("./components/callback.vue").default,

                // callbacks
                mounted: this.modalMounted,
                destroyed: this.modalDestroyed
            }
        };
    },
    methods: {
        modalMounted() {
            console.log("modal is mounted at this point!");
        },
        modalDestroyed() {
            console.log("modal is destroyed at this point!");
        }
    }
};