Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

blip-cards

Package Overview
Dependencies
Maintainers
0
Versions
411
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

blip-cards

Reusable BLiP cards using Vue

  • 3.43.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
206
decreased by-28.47%
Maintainers
0
Weekly downloads
 
Created
Source

blip-cards

[Build Status

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"/>
AttributeDescriptionType
documentBLiP JSON envelope (REQUIRED)Object
positionCard position, possible values are 'left' and 'right'. Default: 'left'String
dateDate that will be shown below the card (OPTIONAL)String
on-selectedcallback function that will be called when the user interacts with the card (OPTIONAL)Function (text, option)
on-savecallback function that will be called when the user saves the card after editing (OPTIONAL)Function (document)
on-deletedcallback function that will be called when the user delete the card (OPTIONAL)Function (document)
deletablemake the card deletable (OPTIONAL)Boolean
editablemake the card editable (OPTIONAL)Boolean
readonlyCurrently 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-optionsUsed only only in the quick reply. This is used to hide the quick reply options (OPTIONAL)Boolean
disable-linkUsed 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"/>
AttributeDescriptionType
documentsArray of BLiP JSON envelopes with the content, position and date (REQUIRED)Array
compare-messagescallback function to determine if two messages are in the same groupFunction (msg1, msg2)
on-selectedcallback function that will be called when the user interacts with the card (OPTIONAL)Function (text, option)
on-savecallback function that will be called when the user saves the card after editing (OPTIONAL)Function (document)
on-deletedcallback function that will be called when the user delete the card (OPTIONAL)Function (document)
deletablemake the card deletable (OPTIONAL)Boolean
editablemake the card editable (OPTIONAL)Boolean
readonlyCurrently 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-optionsUsed only only in the quick reply. This is used to hide the quick reply options (OPTIONAL)Boolean
disable-linkUsed 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.

Keywords

FAQs

Package last updated on 06 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc