@codedungeon/vue-messenger NPM

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)