vue-advance-dialog

Vue Advance Dialog is a flexible and customizable Vue component for popup dialog or modal. You can easily use this component in any of your vue or nuxt projects. It has different useful props and events to easily customize the component as your requirement.

License

MIT

Installation

npm install --save vue-advance-dialog

Usage

import {VueAdvanceDialog} from 'vue-advance-dialog'

require('vue-advance-dialog/dist/vue-advance-dialog.css')

Vue.use(VueAdvanceDialog)

// on Nuxt.js

components: {
    VueAdvanceDialog
},

<vue-advance-dialog id="dialog" toggleTitle="Show Dialog">  
    Your content will go here ...
</vue-advance-dialog>

Events

@show

The show event fires immediately after opening the dialog.

<vue-advance-dialog @show="doSomething">  
    Your content will go here ...
</vue-advance-dialog>

methods: {  
    doSomething() { 
        console.log('Dialog is opened')
    },
}

@hide

After closing the dialog, the hide event fires.

<vue-advance-dialog @hide="doSomething">  
    Your content will go here ...
</vue-advance-dialog>

methods: {  
    doSomething() { 
        console.log('Dialog is closed')
    },
}

show or hide the dialog in two different ways

First Way: You can show the dialog by clicking the component button. Set a value of toggleTitle prop, then it will generate a button. The dialog will be shown by clicking this button.

<vue-advance-dialog id="dialog" toggleTitle="Show Dialog"></vue-advance-dialog>

Screenshot: https://www.awesomescreenshot.com/image/15903525?key=ec1d21290a089f86b4edfc0e7e7b0a05

Alternatively, you can use toggle Slot to set toggle button content.

<vue-advance-dialog id="dialog">
	<template v-slot:toggle>  
	    <i class="fas fa------"></i>  
	    Show Dialog  
	</template>
</vue-advance-dialog>

You can use either the toggle Slot or the toggleTitle Prop to set toggle button title. But you can't use both. If you don't set any of toggleTitle Prop or toggle Slot, then no button will be generated.

Second Way: You can show dialog by firing an emit event, outside of the dialog component. The emit function accepts two arguments: event-name and dialog-id.

<button @click="openDialog">Your button</button>

import {EventHub} from 'vue-advance-dialog'

export default {  
    methods: {  
        openDialog() {  
            EventHub.$emit('show-dialog',  'dialog')
            // this emit function accepts two arguments (event-name, dialog-id)
        }  
    }  
}

Or, you can use this event where dialog component is existed.

export default {  
    mounted() {  
        EventHub.$emit('show-dialog', 'dialog')  
    },    
}  

Similarly, you can fire an emit event for hiding the dialog.

export default {  
    mounted() {  
        EventHub.$emit('hide-dialog', 'dialog')  
    }  

Or,

export default { 
	methods: {  
       hideDialog() {  
            EventHub.$emit('hide-dialog',  'dialog')
            // this emit function accepts two arguments (event-name, dialog-id)
        }  
    }   
}   

Slots

toggle

By using toggle, you can set your custom content in toggle button.

<vue-advance-dialog id="dialog">
	<template v-slot:toggle>  
	    <i class="fas fa------"></i>  
	    Show Dialog
	</template>
</vue-advance-dialog>

header

Custom content for Dialog header, could be set by using header Slot.

<vue-advance-dialog id="dialog">
	<template v-slot:header>  
	    Your header content will go here ...
	</template>
</vue-advance-dialog>

footer

Similarly use footer Slot for footer content.

<vue-advance-dialog id="dialog">
	<template v-slot:footer>  
	    Your footer content will go here ...
	</template>
</vue-advance-dialog>

Props

• id: String default: dialog_ + random number

If you want to add multiple dialogs you have to set a unique id for each dialog. If you use the same id, it will create conflict in dialog events.

• toggleTitle: String default: btn btn-primary

Details explained in the events section.

• disabled: Boolean default: false

Use disabled prop To disable the component toggle button.

• title: String default: ''

Set the dialog title through this prop or alternatively use header Slot.

• closeButton: Boolean default: true

Remove the component close button by using this prop. Screenshot: https://www.awesomescreenshot.com/image/15904512?key=72caabc6d887286ec05aa7a5cc60c0a8

• outsideClickClose: Boolean default: true

Use this prop to stop closing dialog by clicking outside of the dialog.

• size: String default: xs

Define dialog size. The prop accepts following sizes: lg, md, sm, xs.

• position: String default: top-center

Set dialog position into the browser screen. Accepted positions: center-center, center-left, center-right, top-center, top-left, top-right, bottom-center, bottom-left, bottom-right

• transition: String default: slide-top

Set opening and closing transition of the dialog. Accepted transitions: fade, zoom, slide-top

• containerClass: String default: ''

• contentClass: String default: ''

• contentHeaderClass: String default: ''

• contentInnerClass: String default: ''

• contentFooterClass: String default: ''