bootstrap-vue-dialog

bootstrap-vue dialog helper

Implementation of vuedl dialog helper with Vuetify.js framework

This module will help you to work with modal dialogs in your project

NOTE: Module is in initial development. Anything may change at any time.

Documentation

See docs here

Demo

Try it

Setup

Install the package from npm

npm install bootstrap-vue-dialog

import Dialog from 'bootstrap-vue-dialog'
Vue.use(Dialog, {
  context,
  property
})

• context - the context of your application, such as store, axios, router etc.
• property - the property, which will integrate to Vue. Default is $dialog

Simple confirm dialog

const res = await this.$dialog.confirm({ text: 'Do you really want to exit?'})

Warning dialog

const res = await this.$dialog.warning({ text: 'Do you really want to exit?', title: 'Warning'})

Error dialog

this.$dialog.error({ text: 'Cannot delete this item', title: 'Error'})

Propt dialog

let res = await this.$dialog.prompt({ text: 'Your name', title: 'Please input your name' })

Floating notifications

this.$dialog.notify.success('Success notification')
this.$dialog.notify.warning('Warning notification')
this.$dialog.notify.error('Error notification')
this.$dialog.notify.info('Info notification')
this.$dialog.notify.error('No autoclose notification', { timeout : 0 })
this.$dialog.notify.info('Top left notification', { position: 'top-left' })
this.$dialog.notify.info('Bottom right notification', { position: 'bottom-right' }
this.$dialog.notify.info('Bottom left notification', { position: 'bottom-left' })

Actions

To all this simple dialogs you can config your actions, just send

{
  ...
  actions: {
    'false': 'No',
    'true': 'Yes'
  }
}
// result will be true, false, or undefigned
{
  ...
  actions: ['No', 'Yes']
}
// result will be 'No', 'Yes', or undefigned
 

You can also set options

{
  actions: [{
    text: 'Yes',
    color: 'blue',
    key: true,
    handle: () => {
      // on button click
    }
  }]
}