x5-dialog

x5 Dialog (Live Demo)

This is a lightweight dialog plugin for Vue.

:warning: This plugin is in development, so please let me know if you find any errors.

Installation

# npm
npm install x5-dialog --save

Deployment

import x5Dialog from 'x5-dialog'
Vue.use(x5Dialog)

Usage

this.$alert('This is an alert dialog.')
this.$confirm({ title: 'This is a confirm dialog.', text: 'It uses the options format to ste things like title.' })

Options

plugin (Vue.use(x5Dialog, options))

Attribute	Type	Default	Description
zIndex	Number	200	z-index style for plugin

$modal (options) (returns Promise)

Attribute	Type	Default	Description
onClose	Function	--	Callback for when the message is closed
overlay	Boolean	true	Darken page behind background
permanent	Boolean	false	Only allow closing the window via provided buttons
width	Number	500	Maximum window width
class	String	--	Extra classes for the window
style	String	--	Extra styles for the window

$alert, $confirm, $prompt (options) (returns Promise)

:information_source: These attributes and options extend $modal's (above)

Attribute	Type	Default	Description
text	String	--	Message text (required)
title	String	--	Dialog header bar title
onClose	Function	--	Callback for when the message is closed
onCancel	Function	--	Callback for cancelling the Dialog
onOK	Function	--	Callback for confirming the Dialog
labelOK	String	OK	OK button label
labelCancel	String	Cancel	Cancel button label
rules	Array	[]	Array of functions to test prompt input against

Contributing

Please read CONTRIBUTING.md for the process for submitting pull requests.

Authors

• Keagan Chisnall - xon52

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

Inspired by:

• The look and feel of alertifyJS
• The size and code of vue-toast-notification by @ankurk91