blip-cards

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" :disable-link="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)
deletable	make the card deletable (OPTIONAL)	Boolean
editable	make the card editable (OPTIONAL)	Boolean
readonly	Currently being used only in the quick reply. Could be implemented in other components too. This is used to avoid click actions in the quick reply options. If this attribute is true, than the editable and deletable should be false (OPTIONAL)	Boolean
hide-options	Used only only in the quick reply. This is used to hide the quick reply options (OPTIONAL)	Boolean
disable-link	Used only in the plain text. This is used to do not render tag 'a' (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" :disable-link="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)
deletable	make the card deletable (OPTIONAL)	Boolean
editable	make the card editable (OPTIONAL)	Boolean
readonly	Currently being used only in the quick reply. Could be implemented in other components too. This is used to avoid click actions in the quick reply options. If this attribute is true, than the editable and deletable should be false (OPTIONAL)	Boolean
hide-options	Used only only in the quick reply. This is used to hide the quick reply options (OPTIONAL)	Boolean
disable-link	Used only in the plain text. This is used to do not render tag 'a' (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.

MUST READ TO COMMIT AND TO GENERATE A PULL REQUEST

We follow some rules to create commits and generate pull request, those rules can be found here: (https://www.conventionalcommits.org/en/v1.0.0-beta.2/) and it is something that YOU MUST DO, if you don't, messages like this one will be show on semantic release pipeline (https://dev.azure.com/curupira/BLiP/, takenet.blip-cards-vue-components pipeline): There are no relevant changes, so no new version is released.

e.g.: [optional scope]:

• feat: blip cards update audio
• feat(blipCards): create a new component
• fix: survey card component is not show correctly
• fix(BlipCards): text component should accept hiphen

Steps to generate a version manually:

1 - Create a Branch with the name following the semantic releases pattern (https://github.com/semantic-release/semantic-release/blob/master/docs/usage/configuration.md#branches) to generate versions from any branch. e.g.: 2.11.x

2 - Make your changes on the project

3 - Add the semantic releases configurations on the project's package.json file. e.g.:

"release": {
  "branch": "2.11.x"
}

4 - Commit then using the semantic release as showed above. e.g:

git commit "fix(BlipCards): text component should accept hiphen"

5 - Push your changes.

6 - Run your pipeline manually using your branch as origin

7 - If succeed your build will run correctly and the version will be generated following the version sequence.

e.g.: Previous Version: 2.11.3. New Version: 2.11.4.

8 - After generate your version, before merge into the master, undo the modification on the package.json file, because the semantic release branch configuration can not be send to the master branch.