@codedungeon/vue-messenger

vue-messenger

Description

Vue Messenger is the vue partner to Codedungeon messenger suite

Installation

Using npm

npm i @codedungeon/vue-messenger

Using yarn

yarn @codedungeon/vue-messenger

Usage

• Vue Messenger requires at least the title or description prop
• If title and description are supplied, title will be bold
• If only title is supplied, it will be moved to description attribute (no title displayed)

Minimal

<crm-message type="info" description="Message Title" description="Message Description">

Success Message with icon

<crm-message type="success" description="Success" description="Contact Updated Successfully" :icon="true">

Warning Message with auto close

<crm-message type="warning" description="Warning" description="The light is turning red soon" :auto-close="true" auto-close-delay="2000" :icon="true">

...
errors from parent data
errors = ["error message one","error message two"]
...
<crm-message type="error" description="Validation Failed" description="There were 2 errors" :more="errors" :icon="true">

Props

Vue Messenger provides the following props

Prop	Type	Description
type	String (default: "info")	Message type
options	alert, danger, error, info, success, warning	Available types
title	String (default: "")	Message title
description	String (default: "")	Message description
icon	[Boolean] (default: false)	Message icon
auto-close	Boolean (default: false)	Message auto close
auto-close-delay	Number (default: 7500)	Number of milliseconds
more	[String, Array] (default: "")	Additional text to display when show more displayed
more-link-text	[String] (default: "show more")	Message displayed when more supplied
debug	[Boolean] (default: false)	Console log debug information

Events

Vue Messenger provides the following events

Event	Description
close	Event fired when message closed
closeMessage	alias to close event

Methods

Vue Messenger provides the following methods You can procedurally update message from parent component using an the component updateMessage method which accepts on object of message options

Note: All options will override default component options

Event	Description
updateMessage	Updates message (receives messasge config which may contain one or more)
config	type (options): message type
	title: message title
	description: message description
	autoClose (false): message autoClose
	autoCloseDelay (7500): message autoCloseDelay
	more ([]): array of more messages
	moreLinkText ('show more'): message displayed when more items supplied
	icon (false): message icon
	debug (false): use message debug mode

let msgOptions = { type: "success", title: "Success", description: "Contact Updated Successfully" }
this.$refs["crm-message"].updateMessage(msgOptions)

Contributing

Please see CONTRIBUTING for details.

Changelog

Please see CHANGELOG for details.

Security

If you discover any security related issues, please email [e-mail] instead of using the issue tracker.

Credits

vue-messenger written by Mike Erickson

E-Mail: [e-mail]

Twitter: @codedungeon

Website: codedungeon.io

License

Copyright © 2020 Mike Erickson Released under the MIT License