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

GitHub