# 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.
## 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
