Directory

← Back

vuetify-dialog

Easy dialogs in Vuetify.js framework

Author

Rating

Popularity

<100

vuetify-dialog

This module will help you work with vuetify dialogs without annoyed templates

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.

Coverage Status

Vuedl module documentation

See docs here

Demo

See demo in CodeSandbox

Setup

Install the package from npm

npm install vuetify-dialog
import VuetifyDialog from 'vuetify-dialog'
Vue.use(VuetifyDialog)

or use with extra configuration

import VuetifyDialog from 'vuetify-dialog'
Vue.use(VuetifyDialog, {
  context,
  property,
  confirm: {
    actions: {
      false: 'No',
      true: {
        text: 'Yes',
        color: 'primary'
      }
    },
    icon: false, // to disable icon just put false
    width: 500
  },
  warning: {},
  error: {},
  prompt: {}
})
  • context - the context of your application, such as store, axios, router etc.
  • property - the property, which will integrate to Vue. Default is $dialog
  • confirm - confirm dialog params
  • warning - warning dialog params
  • error - error dialog params
  • prompt - prompt dialog params Where:
    • actions - dialog buttons config
    • icon - dialog icon in String, example 'warning'. Note, if you want to hide icon, just set parameter to false
    • width - dialog max width

♻️ Usage with Nuxt.js

Add vuetify-dialog/nuxt to modules section of nuxt.config.js

Module automatically add to dialog nuxt context data, such as router, route, i18n, $axios, etc

{
  modules: [
    // Simple usage
    'vuetify-dialog/nuxt'

    // Optionally passing options in module configuration
    ['vuetify-dialog/nuxt', { property: '$dialog' }]
  ],

  // Optionally passing options in module top level configuration
  vuetifyDialog: {
    property: '$dialog'
    confirm: {}
    // ...
  }
}

Simple confirm dialog

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

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'
})

Prompt dialog

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

Programmatically close dialog

If property waitForResult set to false, then functions will return dialog instance

Actually waitForResult = true make two steps

  1. dialogInstance = $dialog.show(component) // Show dialog
  2. return dialogInstance.wait() // Return promise

Therefore to perfom programmatically close dialog you have to set waitForResult to false and work with dialogInstance directly

  const dialogInstance = await this.$dialog.warning({
    title: this.title,
    text: this.text,
    waitForResult: false
  });
  setTimeout(() => {
    dialogInstance.close()
  } , 3000)

  // then you can wait for user reaction
  const userChoice = await dialogInstance.wait()
  // after idle 3000 sec - userChoice will be undefigned
  this.$dialog.notify.info(userChoice)

Notifications

The notification component is used to convey important information to the user. Notification support positioning, removal delay and callbacks. It comes in 4 variations, success, info, warning and error. These have default icons assigned which can be changed and represent different actions

Notification uses v-alert component

Props:

  • text - the text fo your message
    • type: String
  • options:
    • type: Object
    • properties:
      • position: one of top-left, top-right, bottom-left, bootom-right
      • timeoot: timer to hide message. Default 5000. If set to 0 - message will not closes automatically
      • actions
this.$dialog.notify.info('Test notification', {
  position: 'top-right',
  timeout: 5000
})

Toasts

The toast component is used to display a quick message to a user. Toasts support positioning, removal delay and callbacks. It comes in 4 variations, success, info, warning and error. These have default icons assigned which can be changed and represent different actions

Toast uses v-snackbar component

Props:

  • text - the text fo your message
    • type: String
  • options:
    • type: Object
    • properties:
      • position: one of top-left, top-right, bottom-left, bootom-right
      • timeoot: timer to hide message. Default 5000. If set to 0 - message will not closes automatically
      • actions: - see below
this.$dialog.message.info('Test', {
  position: 'top-left'
})

Actions

To all dialogs you can put your own buttons Props:

  • key - the text fo your message
    • type: String
  • options:
    • type: Object
    • properties:
      • position: one of top-left, top-right, bottom-left, bootom-right
      • timeoot: timer to hide message. Default 5000. If set to 0 - message will not closes automatically
      • actions: - see below
{
  ...
  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 send full button options

{
  actions: [{
    text: 'Yes', color: 'blue', key: true
  }]
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • vue-asyncable#^0.2.0
  • vuedl#^0.3.0
Released
2019-04-03
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

vuetify-dialog - Vaadin Add-on Directory

Easy dialogs in Vuetify.js framework vuetify-dialog - Vaadin Add-on Directory
# vuetify-dialog ### This module will help you work with `vuetify` dialogs without annoyed templates Implementation of [vuedl](https://github.com/yariksav/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.

Coverage Status

## Vuedl module documentation [See docs here](https://github.com/yariksav/vuedl#readme) ## Demo [See demo in CodeSandbox](https://ppx57r3nnj.codesandbox.io/) ## Setup Install the package from npm ```npm npm install vuetify-dialog ``` ```javascript import VuetifyDialog from 'vuetify-dialog' Vue.use(VuetifyDialog) ``` or use with extra configuration ```javascript import VuetifyDialog from 'vuetify-dialog' Vue.use(VuetifyDialog, { context, property, confirm: { actions: { false: 'No', true: { text: 'Yes', color: 'primary' } }, icon: false, // to disable icon just put false width: 500 }, warning: {}, error: {}, prompt: {} }) ``` + `context` - the context of your application, such as store, axios, router etc. + `property` - the property, which will integrate to Vue. Default is `$dialog` + `confirm` - confirm dialog params + `warning` - warning dialog params + `error` - error dialog params + `prompt` - prompt dialog params Where: + `actions` - dialog buttons config + `icon` - dialog icon in String, example 'warning'. Note, if you want to hide icon, just set parameter to false + `width` - dialog max width ## ♻️ Usage with Nuxt.js Add `vuetify-dialog/nuxt` to modules section of `nuxt.config.js` Module automatically add to dialog nuxt context data, such as router, route, i18n, $axios, etc ```js { modules: [ // Simple usage 'vuetify-dialog/nuxt' // Optionally passing options in module configuration ['vuetify-dialog/nuxt', { property: '$dialog' }] ], // Optionally passing options in module top level configuration vuetifyDialog: { property: '$dialog' confirm: {} // ... } } ``` ### Simple confirm dialog ```js const res = await this.$dialog.confirm({ text: 'Do you really want to exit?', title: 'Warning' }) ``` ### Warning dialog ```js const res = await this.$dialog.warning({ text: 'Do you really want to exit?', title: 'Warning' }) ``` ### Error dialog ```js this.$dialog.error({ text: 'Cannot delete this item', title: 'Error' }) ``` ### Prompt dialog ```js let res = await this.$dialog.prompt({ text: 'Your name', title: 'Please input your name' }) ``` ### Programmatically close dialog If property `waitForResult` set to false, then functions will return dialog instance Actually waitForResult = true make two steps 1) dialogInstance = $dialog.show(component) // Show dialog 2) return dialogInstance.wait() // Return promise Therefore to perfom programmatically close dialog you have to set waitForResult to false and work with dialogInstance directly ```js const dialogInstance = await this.$dialog.warning({ title: this.title, text: this.text, waitForResult: false }); setTimeout(() => { dialogInstance.close() } , 3000) // then you can wait for user reaction const userChoice = await dialogInstance.wait() // after idle 3000 sec - userChoice will be undefigned this.$dialog.notify.info(userChoice) ``` ### Notifications The notification component is used to convey important information to the user. Notification support positioning, removal delay and callbacks. It comes in 4 variations, **success**, **info**, **warning** and **error**. These have default icons assigned which can be changed and represent different actions Notification uses [v-alert](https://vuetifyjs.com/en/components/alerts) component Props: * **text** - _the text fo your message_ - type: String * options: - type: Object - properties: - position: one of _top-left_, _top-right_, _bottom-left_, _bootom-right_ - timeoot: timer to hide message. Default 5000. If set to 0 - message will not closes automatically - actions ```js this.$dialog.notify.info('Test notification', { position: 'top-right', timeout: 5000 }) ``` ### Toasts The toast component is used to display a quick message to a user. Toasts support positioning, removal delay and callbacks. It comes in 4 variations, **success**, **info**, **warning** and **error**. These have default icons assigned which can be changed and represent different actions Toast uses [v-snackbar](https://vuetifyjs.com/en/components/snackbars) component Props: * **text** - _the text fo your message_ - type: String * options: - type: Object - properties: - position: one of _top-left_, _top-right_, _bottom-left_, _bootom-right_ - timeoot: timer to hide message. Default 5000. If set to 0 - message will not closes automatically - actions: - see below ``` javascript this.$dialog.message.info('Test', { position: 'top-left' }) ``` ### Actions To all dialogs you can put your own buttons Props: * **key** - _the text fo your message_ - type: String * options: - type: Object - properties: - position: one of _top-left_, _top-right_, _bottom-left_, _bootom-right_ - timeoot: timer to hide message. Default 5000. If set to 0 - message will not closes automatically - actions: - see below ```js { ... 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 send full button options ```js { actions: [{ text: 'Yes', color: 'blue', key: true }] } ``` [npm-image]: https://img.shields.io/npm/v/vuetify-dialog.svg?style=flat-square [npm-url]: https://npmjs.org/package/vuetify-dialog
Online