VueDialog - vue dialog helper

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

Inspire of Nuxt.js logic, vue-dialog also has asyncData, fetch, layout and middleware handlers

NOTE: This module is a copy work from VueDl. that added more functionality into it.

Used in frameworks

1. vuetify

2. bootstrap-vue (not complete, need contributor)

Setup

Install the package from npm

npm install @chantouchsek/vue-dialog

import VueDialog from '@chantouchsek/vue-dialog'
Vue.use(VueDialog, {
  context,
  property
})

Where -- context: is object with context of your application, such as i18n, store, router, etc -- property: is name of Vue property, for access, default is $dialog

After installation, instance of dialog manager will be available in Vue.prototype.$dialog, or inside Vue instances this.$dialog

Usage

Use dialogs

import MyDialog from './MyDialog'

const dialog = await this.$dialog.show(MyDialog, params, options)

dialog will be instance of DialogManager

Register and use dialog components

Register global dialog component, then it will be available in any vue module

Vue.prototype.$dialog.component('myDialog', MyDialog)

Then you can use it in any code

this.$dialog.myDialog(params, options)

Waiting for user fiil data and click button (when dialog is closing)

const result = await this.$dialog.showAndWait(MyDialog, params)

or

const dialog = await this.$dialog.show(MyDialog, params)
const result = dialog.wait()

result will be object of user inputs, or clicked button, depending on what will be sent in dialog component by the:

this.$emit('submit', inputs)

The layout param

VueDialog can use layout templates for wrapping dialogs For registering your own layouts template use

Vue.prototype.$dialog.layout('default', MyLayout)

Example of the layout template

  <v-dialog v-model="isActive" :max-width="width">
    <dialog-child v-bind="$options.propsData" ref="dialog" />
  </v-dialog>

VueDialog module will put in layout component mixin with params:

-- width: Number - max width of component -- isActive: Boolean - is dialog active -- show: Function -- close: Function

If dialog showed without layout, this mixin will integrate to dialog instance

After this dialog component must have parameter

{
  layout: 'default'
}

The asyncData and fetch Method

Sometimes you just want to fetch data and pre-render it on the server without using a store. asyncData is called every time before loading the dialog component. This method receives [the context] as the first argument, you can use it to fetch some data and v-dialog will merge it with the component data.

You do NOT have access of the component instance through this inside asyncData because it is called before initiating the component

v-dialog offers you different ways to use asyncData. Choose the one you're the most familiar with:

fetch is use for calling store methods, and not impact to instance data

1. Returning a Promise. Vuedl will wait for the promise to be resolved before rendering the component.
2. Using the async/await proposal (learn more about it)
3. Define a callback as second argument. It has to be called like this: callback(err, data)

Returning a Promise

export default {
  asyncData ({ params }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}

Using async/await

export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}

Using a callback

export default {
  asyncData ({ params }, callback) {
    axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      callback(null, { title: res.data.title })
    })
  }
}

Displaying the data

The result from asyncData will be merged with data. You can display the data inside your template like you're used to doing:

<template>
  <h1>{{ title }}</h1>
</template>

The overlay

When dialog component has an asyncData or fetch functions, it will show overlay before calling this methods. Overlay will block main window and show loading cursor.

If you want to register your own overlays template

Vue.prototype.$dialog.overlay('default', MyOverlay)

Confirm, alert and prompt dialogs

VueDialog has implementations of confirm, alert warning, error or prompt dialog

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

const res = await this.$dialog.warning({
  text: 'Do you really want to exit?'
})
// ---- //
const res = await this.$dialog.error({
  text: 'Some error'
})

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

res will be true or false

For registering your own Confirmation template

Vue.prototype.$dialog.component('Confirm', MyConfirmDialog)

For registering your own Prompt template

Vue.prototype.$dialog.component('Prompt', MyPromptDialog)