vue-messenger
Description
Vue Messenger is the vue partner to Codedungeon messenger suite
Installation
Using npm
npm i @codedungeon/vue-messengerUsing yarn
yarn @codedungeon/vue-messengerUsage
- Vue Messenger requires at least the
titleordescriptionprop - If
titleanddescriptionare supplied,titlewill be bold - If only
titleis supplied, it will be moved todescriptionattribute (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 support@codedungeon.io instead of using the issue tracker.
Credits
vue-messenger written by Mike Erickson
E-Mail: mike.erickson@codedungeon.io
Twitter: @codedungeon
Website: codedungeon.io
License
Copyright © 2020 Mike Erickson Released under the MIT License
