Vue.js component for Cleave.js :keyboard:

Overview

Vue Cleave Component

downloads npm-version github-tag license build codecov

Vue.js component for Cleave.js

Demo on JSFiddle

Version matrix

Vue.js version Package version Branch
2.x 2.x 2.x
3.x 3.x master

Features

  • Reactive v-model value
    • You can change input value programmatically
  • Reactive options
    • You can change config options dynamically
    • Component will watch for any changes and redraw itself
  • Compatible with Bootstrap, Bulma or any other CSS framework
  • Works with validation libraries
  • Option to disable raw mode to get masked value

Installation

# yarn
yarn add vue-cleave-component

# npm
npm install vue-cleave-component --save

Usage

<template>
  <div>
    <cleave v-model="cardNumber" 
            :options="options" 
            class="form-control" 
            name="card"/>
  </div>
</template>

<script>
  import Cleave from 'vue-cleave-component';
    
  export default {    
    data () {
      return {
        cardNumber: null, 
        options: {
          creditCard: true,
          delimiter: '-',
        }      
      }
    },
    components: {
      Cleave
    }
  }
</script>

As plugin

  import {createApp} from 'vue';
  import Cleave from 'vue-cleave-component';
  const app = createApp().mount('#app')  
  app.use(Cleave);

This will register a global component <cleave>

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
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
<!-- cleave.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
 // Init as global component
 yourApp.use(VueCleave);
</script>

Run examples on your localhost

  • Clone this repo
  • You should have node-js >=10.13 and yarn >=1.x pre-installed
  • Install dependencies yarn install
  • Run webpack dev server yarn start
  • This should open the demo page at http://localhost:9000 in your default web browser

Testing

  • This package is using Jest and vue-test-utils for testing.
  • Tests can be found in __test__ folder
  • Execute tests with this command yarn test

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License

Comments
  • Unable to use @click on vue-cleave-component text field

    Unable to use @click on vue-cleave-component text field

    I'm unable to target a cleave input field to do some event handling - is there a workaround or something that I'm missing? Please note the @click in the cleave template component and the aFunction function.

    My component:

    <template>
      <div>
        <form v-on:submit.prevent="submitted">
          <cleave
    	@click="aFunction"
    	v-model="phoneNumber"
    	class="textInput"
            :options="options"
            autocomplete="off"
    	autofocus>
          </cleave>
          <input type="text" @click="getPosition"></input>
          <keyboard @numberEmitted="updateNumber" />
        </form>
      </div>
    </template>
    
    <script>
    import Cleave from 'vue-cleave-component'
    require('../../dependencies/cleave-phone-us.js')
    import Keyboard from './Keyboard'
    
    export default{
      data () {
        return {
          phoneNumber: null,
          options: {
            phone: true,
            phoneRegionCode: 'US'
          }
        }
      },
      components: {
        Cleave,
        Keyboard
      },
      methods: {
        updateNumber (passedNumber) {
           this.phoneNumber = passedNumber
        },
        aFunction (e) {
          // THIS IS WHAT I NEED TO DO
          console.log('This function works!') 
        }
      }
    }
    
    </script>
    
    opened by capndave 20
  • Cleave version update

    Cleave version update

    Hi Can you please update Cleave version to the latest one ? They have fixed backspace and cursor jumping issues in the parent library.

    Thanks for great component.

    opened by praveenon 11
  • Using with Vuelidate

    Using with Vuelidate

    • Vue.js version : 2.5.2
    • Browser name and version : Chrome
    • This package version : 2.1.1

    Hi,

    I am trying to get vue-cleave-component to work with vuelidate but am running into an issue where the $dirty, $anyDirty and $error flags for vuelidate are all set on initialization. Because I display errors using these flags, this results in all inputs using cleave to show errors.

    I see you have an example for vee-validate is there any possibility you may have tried this will vuelidate?

    I tried hunting around to see if any one else had this issue but no luck and am not sure why this would happen so I was hoping you could point me in the right direction.

    Thanks!

    need-investigation 
    opened by Sell24 8
  • Vee-validate fires on page load and not @input or @blur

    Vee-validate fires on page load and not @input or @blur

    Tell about your platform

    • cleave.js version : 1.5.0
    • Vue.js version : 2.6.10
    • Browser name and version : Chrome 74.0.3729.169
    • This package version : 2.1.2

    Current behavior On page rendered, the error notice for vee-validate required rule shows up.

    Expected behavior The error notice for required shouldn't come up except after @input or @blur

    <b-form-group
              label="Phone Number"
              label-for="phone_number"
              :state="errors.has('phone_number') ? 'invalid' : null"
              :invalid-feedback="errors.first('phone_number')"
            >
              <cleave
                v-model="user.phone_number"
                :options="cleave_phone"
                class="form-control"
                id="phone_number"
                v-validate="'required'"
                data-vv-as="Phone Number"
                name="phone_number"
                placeholder="Phone Number"
              ></cleave>
            </b-form-group>
    

    I also set the option below for vee-validate

    {
          events: 'input|blur'
    }
    
    need-investigation 
    opened by papakay 8
  • Issue with copy / paste

    Issue with copy / paste

    I'm submitting a ... (check one with "x")

    [x] Bug report => search github for a similar issue or PR before submitting
    [ ] Feature request
    [ ] Other, please describe
    

    Tell about your platform

    • Vue.js version : 2.6.10
    • Browser name and version : Chrome|Firefox|Safari x.x.x
    • This package version : 2.1.3

    Current behavior When I copy / paste into a phone formatted field, it strips out characters seemingly at random. In my clipboard, I have +1-123-456-7890, but when I paste, it gives +1 11

    Expected behavior When I paste, it should be the full formatted number.

    Minimal reproduction of the problem with instructions My component code is:

                  <cleave
                    v-model="User.settings.phoneNumber"
                    :options="cleaveOptions"
                    class="form-control"
                    placeholder="Enter mobile number"
                    id="myPhoneNumberInput"
                  ></cleave>
    

    and

          cleaveOptions: {
            phone: true,
            phoneRegionCode: "US",
            prefix: "+1"
          }
    
    unable-to-reproduce 
    opened by shamoons 7
  • Vee-Validate not fire error when input lost focus

    Vee-Validate not fire error when input lost focus

    I'm submitting a ... (check one with "x")

    [x] Bug report => search github for a similar issue or PR before submitting
    [ ] Feature request
    [ ] Other, please describe
    

    Tell about your platform

    • cleave.js version : 1.4.2
    • Vue.js version : 2.5.6
    • Browser name and version : Chrome 67|Firefox 61|
    • This package version : 2.0.1

    Current behavior vee-validate not fire error with rule Required when input lost focus

    my code :

    <div class="control has-icons-right">
                <cleave class="input"
                        :class="errors.has('quantity') ? 'is-danger': ''"
                        :options="options.quantity"
                        v-model="form.quantity"
                        name="quantity"
                        placeholder="Quantity"
                        data-vv-as="Quantity"
                        v-validate="'required'"></cleave>
                <span class="icon is-right has-text-danger"
                      v-if="errors.has('quantity')">
                  <i class="fas fa-lg fa-exclamation-circle"></i>
                </span>
              </div>
    

    Expected behavior Cleave fire error

    Minimal reproduction of the problem with instructions

    https://jsfiddle.net/4ndcd0sc/10/

    enhancement 
    opened by trunglh88 7
  • Emit focus event

    Emit focus event

    Cleave components are currently emitting blur events, but not focus events. They should emit focus as well to match standard Cleave and input element behavior.

    waiting-for-reply 
    opened by hotn 6
  • Feature Request - enter key emitter

    Feature Request - enter key emitter

    I'm submitting a ... (check one with "x")

    [ ] Bug report => search github for a similar issue or PR before submitting
    [x] Feature request
    [ ] Other, please describe
    

    Current behavior no emitter for enter key

    Expected behavior I feel like it may be useful to add an emitter for the enter key - this worked for me, I'm happy to make a PR, but didn't have permission.

    image

    opened by hallindavid 5
  • Infinite loop updating value state on android devices

    Infinite loop updating value state on android devices

    I'm submitting a ...

    [x] Bug report => search github for a similar issue or PR before submitting
    [ ] Feature request
    [ ] Other, please describe
    
    • cleave.js version : 1.4.2
    • Vue.js version : 2.5.3
    • This package version : 2.1.0
    • On Android mobile phones

    Current behavior

    Hi,

    I had problems with value changes not being detected on Android, and saw there were some fixes in Cleave.js through #11. I updated to 2.1.0 (by the way, I had to change @blur.native to @blur for things to work, is this something that should be written in the CHANGELOG?)

    I now have some kind of infinite loop when I type numbers in the input. I can see that the updateValueState function in cleave.js is called in loops, whether i have the @blur listener or not, as well as the "value"'s props validator function (in vue-cleave.js). The numbers in the input jump around (if I have a "1" and add a "2" to make "12", i see the 2 added, removed, added, removed... in loops). In the value's props validator function called in loops, the value alternates between "1" and "12".

    I use the component in the following way:

    <cleave :id="'question'+question.id+'-'+item.id" :raw="true" :name="item.id" v-model.number="item.value" :options="{numeral: true, numeralDecimalMark: ',', delimiter: ' ', numeralPositiveOnly: true, numeralDecimalScale: 0}" @blur="roundValue()"></cleave>
    

    On iOS or on desktop, this does not happen. It does happen on Desktop Chrome if I simulate using a GalaxyS5 device, but not another non-android device.

    By removing the whole following block found in cleave-js inside updateValueState:

    // fix Android browser type="text" input field
    	        // cursor not jumping issue
    	        if (owner.isAndroid) {
    	            window.setTimeout(function () {
    	                owner.element.value = newValue;
    	                Util.setSelection(owner.element, endPos, pps.document, false);
    	                owner.callOnValueChanged();
    	            }, 1);
    
    	            return;
    	        }
    

    the problem seems to go away.

    I know this is probably a cleave.js bug, but since I'm using cleave through the vue-component I want to make sure it's not linked in any way to the vue component before submitting the issue upstream.

    Could the original problem have been fixed on android phones, or maybe recent ones? Is it linked to the options I used?

    I adapted the JsFiddle from #11 and reproduced the bug when using the GalaxyS5 device simulator on Chrome desktop:

    https://jsfiddle.net/revhdn8x/7/

    Thanks in advance.

    upstream-limitation 
    opened by hisem 5
  • Number Delimiter Cursor Issue

    Number Delimiter Cursor Issue

    Hi,

    I'm running in the same problem with the "numeral" type as describes for the phone number: https://github.com/ankurk91/vue-cleave-component/issues/6

    As soon as the second delimiter is added, the text input cursor does not stay at the end of the input field as the user types and jumps back a character per additional delimiter.

    <cleave name="numeric_input"
            :options="{numeral: true, delimiter: '’', numeralThousandsGroupStyle: 'thousand', numeralPositiveOnly: true, numeralDecimalScale: 0, prefix: 'CHF ', noImmediatePrefix: true}"
            v-model="data.value"
            class="form-text">
    </cleave>
    

    Thank you for the integration of cleave.js!

    Best, Thomas

    question 
    opened by twerthmueller 5
  • import phone lib addon

    import phone lib addon

    I'm submitting a ... (check one with "x")

    [ ] Bug report => search github for a similar issue or PR before submitting
    [ ] Feature request
    [x] Other, please describe
    

    Tell about your platform

    • cleave.js version : 1.x.x
    • Vue.js version : 2.x.x
    • Browser name and version : Chrome|Firefox|Safari x.x.x
    • This package version : 1.x.x

    Current behavior

    Expected behavior

    Minimal reproduction of the problem with instructions It's nice to mention we need to import phone lib to use phone options: import 'cleave.js/dist/addons/cleave-phone.us'; I saw it on example, it would be nice to be on doc as well. Thanks,

    opened by amirmasoud 5
Owner
Ankur Kumar
Open Source Fanatic | Tinkerer | Spotify Addict
Ankur Kumar
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Cláudio Luiz Castro 84 Jul 26, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Ejiro Asiuwhu 39 Sep 23, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

null 452 Sep 3, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Kevin Ongko 420 Sep 24, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

AutoNumeric 86 Sep 27, 2022
A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Jose Quintana 14 Jul 24, 2022
Vue.js component for jQuery mask plugin

Vue jQuery Mask Component Vue.js component for jQuery Mask Plugin Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 1.x 1.x 3.

Ankur Kumar 19 Mar 4, 2022
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Mayank 11 Jun 9, 2022
Split Input Component for Vue 3.x

Split Input Component for Vue 3.x Used for otps, transaction pin, passwords etc Install NPM npm i vue-split-input --save Yarn yarn add vue-split-inpu

Anjorin Damilare 6 Aug 8, 2022
A Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

null 0 May 9, 2022
Yet another Vue component for input masking

vue-input-mask Yet another Vue component for input masking. Based on react-input-mask. Demo Install yarn add vue-input-mask or npm i -S vue-input-mask

null 18 Jun 15, 2022
Vue-money-format: A lightweight display component for localized currency display

This is a lightweight display component for localized currency display. It has no dependencies other than Vue. It supports both float and integer input, and can adjust for values stored as decimal-based subunits, such as cents, dirham, groszy, etc. Storing currency values in terms of the subunit allows you to store integers, rather than floating numbers, which ensures accuracy.

null 15 Sep 22, 2022
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

WeblineIndia 1 May 25, 2022
A tags input component for Vue 3 with autocompletion, custom validation, templating and much more

vue-tags-input A tags input component for Vue 3 with autocompletion, custom validation, templating and much more Forked from @johmun/vue-tags-input, w

Sinclair Chen 16 Aug 31, 2022
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

Obeta 66 Jan 10, 2022
A vue2 component for manual data masking

A vue2 component for manual data masking

HC 5 Aug 2, 2022
A simple, customization star rating component for your vue3 projects

A simple, customization star rating component for your vue3 projects

Abiodun Olunu 13 Sep 24, 2022
A tags input component for VueJS

A tags input component for VueJS

Vojtěch Laňka 0 Apr 20, 2021