Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ankurk91/vue-cleave-component

Vue.js component for Cleave.js input mask library :keyboard:
https://github.com/ankurk91/vue-cleave-component

cleave formatting input-mask masking vue

Last synced: about 18 hours ago
JSON representation

Vue.js component for Cleave.js input mask library :keyboard:

Host: GitHub
URL: https://github.com/ankurk91/vue-cleave-component
Owner: ankurk91
License: mit
Archived: true
Created: 2017-12-11T05:18:08.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2022-10-17T06:12:33.000Z (about 2 years ago)
Last Synced: 2024-09-08T12:03:44.501Z (2 months ago)
Topics: cleave, formatting, input-mask, masking, vue
Language: JavaScript
Homepage:
Size: 978 KB
Stars: 281
Watchers: 4
Forks: 37
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt

Awesome Lists containing this project

README

        # Vue Cleave Component

[![downloads](https://badgen.net/npm/dt/vue-cleave-component)](https://npm-stat.com/charts.html?package=vue-cleave-component&from=2018-01-01)

[![npm-version](https://badgen.net/npm/v/vue-cleave-component)](https://www.npmjs.com/package/vue-cleave-component)

[![github-tag](https://badgen.net/github/tag/ankurk91/vue-cleave-component)](https://github.com/ankurk91/vue-cleave-component/)

[![license](https://badgen.net/github/license/ankurk91/vue-cleave-component)](https://yarnpkg.com/en/package/vue-cleave-component)

[![build](https://github.com/ankurk91/vue-cleave-component/workflows/build/badge.svg)](https://github.com/ankurk91/vue-cleave-component/actions)

[![codecov](https://codecov.io/gh/ankurk91/vue-cleave-component/branch/master/graph/badge.svg)](https://codecov.io/gh/ankurk91/vue-cleave-component)

Vue.js component for [Cleave.js](http://nosir.github.io/cleave.js/)

## Demo on [JSFiddle](https://jsfiddle.net/ankurk91/aza302c7/)

### Version matrix

| Vue.js version | Package version | Branch          |

| :---           | :---:           | ---:           | 

| 2.x            | 2.x             | [2.x](https://github.com/ankurk91/vue-cleave-component/tree/v2.x) |

| 3.x            | 3.x             | master          |

## Features

* Reactive `v-model` value

    - You can change input value programmatically

* Reactive [options](https://github.com/nosir/cleave.js/blob/master/doc/options.md)

    - You can change config options dynamically

    - Component will watch for any changes and redraw itself

* Compatible with [Bootstrap](http://getbootstrap.com/), [Bulma](http://bulma.io/) or any other CSS framework

* Works with validation libraries

* Option to disable `raw` mode to get masked value

## Installation

```bash

npm install vue-cleave-component --save

```

## Usage

```html

    


        

    


    import Cleave from 'vue-cleave-component';

    export default {

        data() {

            return {

                cardNumber: null,

                options: {

                    creditCard: true,

                    delimiter: '-',

                }

            }

        },

        components: {

            Cleave

        }

    }

```

### As plugin

```js

import {createApp} from 'vue';

import Cleave from 'vue-cleave-component';

// your app initilization logic goes here

const app = createApp({});

app.use(Cleave);

app.mount('#app');

```

This will register a global component ``

## Available props

The component accepts these props:

| Attribute        | Type                   | Default     | Description      |

| :---             | :---:                  | :---:       | :---             |

| v-model          | String / Number / `null` | `null`    | Set or Get input value (required) |

| options          | Object                 | `{}`        | Cleave.js [options](https://github.com/nosir/cleave.js/blob/master/doc/options.md) |

| raw              | Boolean                | `true`      | When set to `false`; emits formatted value with format pattern and delimiter |

## Install in non-module environments (without webpack)

* Include required files

```html

    const app = Vue.createApp({});

    app.use(VueCleave);

    app.mount('#app');

```

## Run examples on your localhost

* Clone this repo

* Make sure you have node-js `>=18.9` and [pnpm](https://pnpm.io/) `>=7.x` pre-installed

* Install dependencies `pnpm install`

* Run webpack dev server `npm start`

* This should open the demo page in your default web browser

### Testing

* This package is using [Jest](https://github.com/facebook/jest)

  and [vue-test-utils](https://github.com/vuejs/vue-test-utils-next) for testing.

* Tests can be found in `__test__` folder

* Execute tests with this command `npm test`

## Changelog

Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

## Alternatives

If you feel this component heavy, then you can consider these packages.

* [v-mask](https://github.com/probil/v-mask)

* [vue-input-facade](https://github.com/RonaldJerez/vue-input-facade)

* [maska](https://github.com/beholdr/maska)

## License

[MIT](LICENSE.txt) License