{"id":13701420,"url":"https://github.com/ankurk91/vue-cleave-component","last_synced_at":"2025-05-04T21:30:52.487Z","repository":{"id":41677216,"uuid":"113815399","full_name":"ankurk91/vue-cleave-component","owner":"ankurk91","description":"Vue.js component for Cleave.js input mask library :keyboard:","archived":true,"fork":false,"pushed_at":"2022-10-17T06:12:33.000Z","size":1001,"stargazers_count":280,"open_issues_count":0,"forks_count":37,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-30T16:30:17.216Z","etag":null,"topics":["cleave","formatting","input-mask","masking","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ankurk91.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-11T05:18:08.000Z","updated_at":"2024-11-07T21:42:16.000Z","dependencies_parsed_at":"2022-07-09T08:16:07.780Z","dependency_job_id":null,"html_url":"https://github.com/ankurk91/vue-cleave-component","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-cleave-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-cleave-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-cleave-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankurk91%2Fvue-cleave-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankurk91","download_url":"https://codeload.github.com/ankurk91/vue-cleave-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252403776,"owners_count":21742438,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cleave","formatting","input-mask","masking","vue"],"created_at":"2024-08-02T20:01:36.220Z","updated_at":"2025-05-04T21:30:52.186Z","avatar_url":"https://github.com/ankurk91.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["形成","UI Components","Form"],"readme":"# Vue Cleave Component\n\n[![downloads](https://badgen.net/npm/dt/vue-cleave-component)](https://npm-stat.com/charts.html?package=vue-cleave-component\u0026from=2018-01-01)\n[![npm-version](https://badgen.net/npm/v/vue-cleave-component)](https://www.npmjs.com/package/vue-cleave-component)\n[![github-tag](https://badgen.net/github/tag/ankurk91/vue-cleave-component)](https://github.com/ankurk91/vue-cleave-component/)\n[![license](https://badgen.net/github/license/ankurk91/vue-cleave-component)](https://yarnpkg.com/en/package/vue-cleave-component)\n[![build](https://github.com/ankurk91/vue-cleave-component/workflows/build/badge.svg)](https://github.com/ankurk91/vue-cleave-component/actions)\n[![codecov](https://codecov.io/gh/ankurk91/vue-cleave-component/branch/master/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-cleave-component)\n\nVue.js component for [Cleave.js](http://nosir.github.io/cleave.js/)\n\n## Demo on [JSFiddle](https://jsfiddle.net/ankurk91/aza302c7/)\n\n### Version matrix\n\n| Vue.js version | Package version | Branch          |\n| :---           | :---:           | ---:           | \n| 2.x            | 2.x             | [2.x](https://github.com/ankurk91/vue-cleave-component/tree/v2.x) |\n| 3.x            | 3.x             | master          |\n\n## Features\n\n* Reactive `v-model` value\n    - You can change input value programmatically\n* Reactive [options](https://github.com/nosir/cleave.js/blob/master/doc/options.md)\n    - You can change config options dynamically\n    - Component will watch for any changes and redraw itself\n* Compatible with [Bootstrap](http://getbootstrap.com/), [Bulma](http://bulma.io/) or any other CSS framework\n* Works with validation libraries\n* Option to disable `raw` mode to get masked value\n\n## Installation\n\n```bash\nnpm install vue-cleave-component --save\n```\n\n## Usage\n\n```html\n\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003ccleave v-model=\"cardNumber\"\n                :options=\"options\"\n                class=\"form-control\"\n                name=\"card\"/\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    import Cleave from 'vue-cleave-component';\n\n    export default {\n        data() {\n            return {\n                cardNumber: null,\n                options: {\n                    creditCard: true,\n                    delimiter: '-',\n                }\n            }\n        },\n        components: {\n            Cleave\n        }\n    }\n\u003c/script\u003e\n```\n\n### As plugin\n\n```js\nimport {createApp} from 'vue';\nimport Cleave from 'vue-cleave-component';\n// your app initilization logic goes here\nconst app = createApp({});\napp.use(Cleave);\napp.mount('#app');\n```\n\nThis will register a global component `\u003ccleave\u003e`\n\n## Available props\n\nThe component accepts these props:\n\n| Attribute        | Type                   | Default     | Description      |\n| :---             | :---:                  | :---:       | :---             |\n| v-model          | String / Number / `null` | `null`    | Set or Get input value (required) |\n| options          | Object                 | `{}`        | Cleave.js [options](https://github.com/nosir/cleave.js/blob/master/doc/options.md) |\n| raw              | Boolean                | `true`      | When set to `false`; emits formatted value with format pattern and delimiter |\n\n## Install in non-module environments (without webpack)\n\n* Include required files\n\n```html\n\u003c!-- cleave.js --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/cleave.js@1\"\u003e\u003c/script\u003e\n\u003c!-- Vue.js --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3.2\"\u003e\u003c/script\u003e\n\u003c!-- Lastly add this package --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-cleave-component@3\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const app = Vue.createApp({});\n    app.use(VueCleave);\n    app.mount('#app');\n\u003c/script\u003e\n```\n\n## Run examples on your localhost\n\n* Clone this repo\n* Make sure you have node-js `\u003e=18.9` and [pnpm](https://pnpm.io/) `\u003e=7.x` pre-installed\n* Install dependencies `pnpm install`\n* Run webpack dev server `npm start`\n* This should open the demo page in your default web browser\n\n### Testing\n\n* This package is using [Jest](https://github.com/facebook/jest)\n  and [vue-test-utils](https://github.com/vuejs/vue-test-utils-next) for testing.\n* Tests can be found in `__test__` folder\n* Execute tests with this command `npm test`\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Alternatives\n\nIf you feel this component heavy, then you can consider these packages.\n\n* [v-mask](https://github.com/probil/v-mask)\n* [vue-input-facade](https://github.com/RonaldJerez/vue-input-facade)\n* [maska](https://github.com/beholdr/maska)\n\n## License\n\n[MIT](LICENSE.txt) License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankurk91%2Fvue-cleave-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankurk91%2Fvue-cleave-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankurk91%2Fvue-cleave-component/lists"}