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