{"analyzedAt":"2022-07-12T23:39:13.810Z","collected":{"metadata":{"name":"@geminate/vue-cleave-component","scope":"geminate","version":"1.0.1","description":"Vue.js component for cleave.js","keywords":["vue","cleave","formatting","phone","currency","date","masking"],"date":"2019-06-06T06:57:13.457Z","author":{"name":"ankurk91"},"publisher":{"username":"geminate","email":"1061036802@qq.com"},"maintainers":[{"username":"geminate","email":"1061036802@qq.com"}],"repository":{"type":"git","url":"git+https://github.com/geminate/vue-cleave-component.git"},"links":{"npm":"https://www.npmjs.com/package/%40geminate%2Fvue-cleave-component"},"license":"MIT","dependencies":{"cleave.js":"^1.4.7"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-transform-object-assign":"^7.2.0","@babel/preset-env":"^7.3.1","@vue/test-utils":"^1.0.0-beta.29","babel-jest":"^24.1.0","babel-loader":"^8.0.5","bootstrap":"^4.2.1","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","css-loader":"^2.1.0","file-loader":"^3.0.1","html-webpack-plugin":"^3.2.0","jest":"^24.1.0","style-loader":"^0.23.1","unminified-webpack-plugin":"^2.0.0","vee-validate":"^2.1.7","vue":"^2.6.4","vue-loader":"^15.6.2","vue-template-compiler":"^2.6.4","webpack":"^4.29.3","webpack-cli":"^3.2.3","webpack-dev-server":"^3.1.14"},"peerDependencies":{"vue":"^2.0.0"},"releases":[{"from":"2022-06-12T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":0},{"from":"2022-04-13T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":0},{"from":"2022-01-13T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":1},{"from":"2021-07-12T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":1},{"from":"2020-07-12T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":1}],"hasTestScript":true,"hasSelectiveFiles":true,"readme":"# Vue Cleave Component\r\n\r\n[![downloads](https://img.shields.io/npm/dt/vue-cleave-component.svg)](http://npm-stats.com/~packages/vue-cleave-component)\r\n[![npm-version](https://img.shields.io/npm/v/vue-cleave-component.svg)](https://www.npmjs.com/package/vue-cleave-component)\r\n[![github-tag](https://img.shields.io/github/tag/ankurk91/vue-cleave-component.svg?maxAge=1800)](https://github.com/ankurk91/vue-cleave-component/)\r\n[![license](https://img.shields.io/github/license/ankurk91/vue-cleave-component.svg?maxAge=1800)](https://yarnpkg.com/en/package/vue-cleave-component)\r\n[![build-status](https://travis-ci.org/ankurk91/vue-cleave-component.svg?branch=master)](https://travis-ci.org/ankurk91/vue-cleave-component)\r\n[![codecov](https://codecov.io/gh/ankurk91/vue-cleave-component/branch/master/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-cleave-component)\r\n\r\nVue.js component for [Cleave.js](http://nosir.github.io/cleave.js/) \r\n\r\n## Demo on [JSFiddle](https://jsfiddle.net/ankurk91/aza302c7/)\r\n\r\n## Features\r\n* Reactive ``v-model`` value\r\n    - You can change input value programmatically \r\n* Reactive [options](https://github.com/nosir/cleave.js/blob/master/doc/options.md), read [caveats](#caveats) below\r\n    - You can change config options dynamically\r\n    - Component will watch for any changes and redraw itself\r\n    - You are suggested to modify config via [Vue.set](https://vuejs.org/v2/api/#Vue-set)\r\n* Compatible with [Bootstrap](http://getbootstrap.com/), [Bulma](http://bulma.io/) or any other CSS framework\r\n* Works with validation libraries\r\n* Option to disable `raw` mode to get masked value \r\n\r\n## Installation\r\n```bash\r\n# npm\r\nnpm install vue-cleave-component --save\r\n\r\n# Yarn\r\nyarn add vue-cleave-component\r\n```\r\n\r\n## Usage\r\n```html\r\n<template>\r\n  <div>\r\n    <cleave v-model=\"cardNumber\" :options=\"options\" class=\"form-control\" name=\"card\"></cleave>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import Cleave from 'vue-cleave-component';\r\n    \r\n  export default {    \r\n    data () {\r\n      return {\r\n        cardNumber: null, \r\n        options: {\r\n          creditCard: true,\r\n          delimiter: '-',\r\n        }      \r\n      }\r\n    },\r\n    components: {\r\n      Cleave\r\n    }\r\n  }\r\n</script>\r\n```\r\n\r\n### As plugin\r\n```js\r\n  import Vue from 'vue';\r\n  import Cleave from 'vue-cleave-component';\r\n  Vue.use(Cleave);\r\n```\r\nThis will register a global component `<cleave>` \r\n\r\n## Available props\r\nThe component accepts these props:\r\n\r\n| Attribute        | Type                   | Default     | Description      |\r\n| :---             | :---:                  | :---:       | :---             |\r\n| v-model / value  | String / Number / null | `null`      | Set or Get input value (required) |\r\n| options          | Object                 | `{}`        | Cleave.js [options](https://github.com/nosir/cleave.js/blob/master/doc/options.md) |\r\n| raw              | Boolean                | `true`      | When set to `false`; emits formatted value with format pattern and delimiter |\r\n\r\n## Install in non-module environments (without webpack)\r\n* Include required files\r\n```html\r\n<!-- cleave.js -->\r\n<script src=\"https://cdn.jsdelivr.net/npm/cleave.js@1\"></script>\r\n<!-- Vue.js -->\r\n<script src=\"https://cdn.jsdelivr.net/npm/vue@2.6\"></script>\r\n<!-- Lastly add this package -->\r\n<script src=\"https://cdn.jsdelivr.net/npm/vue-cleave-component@2\"></script>\r\n```\r\n* Use the component anywhere in your app like this\r\n```html\r\n<main id=\"app\">  \r\n    <cleave v-model=\"card\" :options=\"options\"></cleave> \r\n</main>\r\n<script>\r\n  // Initialize global component\r\n  Vue.use(VueCleave);\r\n  \r\n  new Vue({\r\n    el: '#app',\r\n    data: {\r\n      card: null,\r\n      options: {\r\n        creditCard: true,\r\n      }\r\n    },    \r\n  });\r\n</script>\r\n```\r\n\r\n## Run examples on your localhost\r\n* Clone this repo\r\n* You should have node-js `>=6.10` and yarn `>=1.x` pre-installed\r\n* Install dependencies `yarn install`\r\n* Run webpack dev server `yarn start`\r\n* This should open the demo page at ``http://localhost:9000`` in your default web browser\r\n\r\n### Testing\r\n* This package is using [Jest](https://github.com/facebook/jest) and [vue-test-utils](https://github.com/vuejs/vue-test-utils) for testing.\r\n* Tests can be found in `__test__` folder\r\n* Execute tests with this command `yarn test`\r\n\r\n## Changelog\r\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\r\n\r\n## Caveats\r\n* :warning: Don't pass config option as inline literal object to `:options` prop.\r\n```html\r\n<!-- This will cause an infinite loop -->\r\n<cleave v-model=\"card\" :options=\"{creditCard:true}\"></cleave>\r\n```\r\n* Vue.js can not detect changes when literal object/arrays passed within template, [see](https://github.com/vuejs/vue/issues/4060)\r\n\r\n## License\r\n[MIT](LICENSE.txt) License"},"npm":{"downloads":[{"from":"2022-07-11T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":0},{"from":"2022-07-05T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":0},{"from":"2022-06-12T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":5},{"from":"2022-04-13T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":26},{"from":"2022-01-13T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":69},{"from":"2021-07-12T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":126}],"starsCount":0},"github":{"forkOf":"ankurk91/vue-cleave-component","starsCount":0,"forksCount":0,"subscribersCount":1,"issues":{"count":0,"openCount":0,"distribution":{"3600":0,"10800":0,"32400":0,"97200":0,"291600":0,"874800":0,"2624400":0,"7873200":0,"23619600":0,"70858800":0,"212576400":0},"isDisabled":true},"contributors":[{"username":"ankurk91","commitsCount":59},{"username":"JorgenVatle","commitsCount":1},{"username":"geminate","commitsCount":3}],"commits":[{"from":"2022-07-05T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":0},{"from":"2022-06-12T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":0},{"from":"2022-04-13T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":0},{"from":"2022-01-13T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":0},{"from":"2021-07-12T00:00:00.000Z","to":"2022-07-12T00:00:00.000Z","count":0}]},"source":{"files":{"readmeSize":4640,"testsSize":0,"hasChangelog":true},"badges":[{"urls":{"original":"https://img.shields.io/npm/dt/vue-cleave-component.svg","shields":"https://img.shields.io/npm/dt/vue-cleave-component.svg","content":"https://img.shields.io/npm/dt/vue-cleave-component.json"},"info":{"service":"npm","type":"downloads","modifiers":{"type":"dt"}}},{"urls":{"original":"https://img.shields.io/npm/v/vue-cleave-component.svg","shields":"https://img.shields.io/npm/v/vue-cleave-component.svg","content":"https://img.shields.io/npm/v/vue-cleave-component.json"},"info":{"service":"npm","type":"version","modifiers":{"type":"v"}}},{"urls":{"original":"https://travis-ci.org/ankurk91/vue-cleave-component.svg?branch=master","service":"https://api.travis-ci.org/ankurk91/vue-cleave-component.svg?branch=master","shields":"https://img.shields.io/travis/ankurk91/vue-cleave-component/master.svg","content":"https://img.shields.io/travis/ankurk91/vue-cleave-component/master.json"},"info":{"service":"travis","type":"build","modifiers":{"branch":"master"}}}],"linters":["editorconfig"]}},"evaluation":{"quality":{"carefulness":0.9999999999999999,"tests":0,"health":1,"branding":0.44999999999999996},"popularity":{"communityInterest":4,"downloadsCount":8.666666666666666,"downloadsAcceleration":-0.035102739726027406,"dependentsCount":0},"maintenance":{"releasesFrequency":0.9,"commitsFrequency":0.9,"openIssues":0.9,"issuesDistribution":0.9}},"score":{"final":0.5534271476499851,"detail":{"quality":0.64842250731856,"popularity":0.02554886734066626,"maintenance":0.9998808339576686}}}