amandampa/blip-cards-vue-components

Reusable BLiP cards using Vue

blip-cards

Reusable BLiP cards using Vue

• No need to render the cards yourself
• One simple blip-card tag

Usage

NPM

$ npm install blip-cards

Just import or require like so:

var Vue = require('vue');
var blipCards = require("blip-cards");

var components = blipCards.install(Vue);

Then, reference the cards via tag as following

<blip-card :document="document" :position="'left'" :date="13:00 PM" :on-selected="function" :on-save="function" :editable="true" :hide-options="false" />

Attribute	Description	Type
document	BLiP JSON envelope (REQUIRED)	Object
position	Card position, possible values are 'left' and 'right'. Default: 'left'	String
date	Date that will be shown below the card (OPTIONAL)	String
on-selected	callback function that will be called when the user interacts with the card (OPTIONAL)	Function (text, option)
on-save	callback function that will be called when the user saves the card after editing (OPTIONAL)	Function (document)
on-deleted	callback function that will be called when the user delete the card (OPTIONAL)	Function (document)
editable	make the card editable (OPTIONAL)	Boolean
hide-options	Used only in the select with scope immediate. This is used to hide the quick reply options (OPTIONAL)	Boolean

Group Card

Is possible to group your cards using any rule you want. For that use the tag as following

<blip-group-card :documents="documentList" :compare-messages="function" :on-selected="function" :on-save="function" :editable="true" :hide-options="false"/>

Attribute	Description	Type
documents	Array of BLiP JSON envelopes with the content, position and date (REQUIRED)	Array
compare-messages	callback function to determine if two messages are in the same group	Function (msg1, msg2)
on-selected	callback function that will be called when the user interacts with the card (OPTIONAL)	Function (text, option)
on-save	callback function that will be called when the user saves the card after editing (OPTIONAL)	Function (document)
on-deleted	callback function that will be called when the user delete the card (OPTIONAL)	Function (document)
editable	make the card editable (OPTIONAL)	Boolean
hide-options	Used only in the select with scope immediate. This is used to hide the quick reply options (OPTIONAL)	Boolean

Contributions

Any contribution to the code via pull request would be nice and any idea and/or suggestion are very welcome.

However, please do not feel bad if your pull requests or contributions do not get merged or implemented into blip-cards.

Building

# install dependencies
npm install

# serve with hot reload at localhost:8081
npm run dev

# build for production with minification
npm run bundle:min

License

blip-cards is open-sourced software licensed under the MIT license.