Nearest Phase Modulator

    vue-advance-dialog

    1.0.0 • Public • Published

    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: ''

    Install

    npm i vue-advance-dialog

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    509 kB

    Total Files

    23

    Last publish

    Collaborators

    • al_fahad
    • zahidshowrav