Upgrade to vue v3.x

.babelrc

@@ -4,17 +4,19 @@
       "@babel/preset-env",
       {
         "modules": false,
-        "forceAllTransforms": true,
+        "forceAllTransforms": false,
         "targets": {
           "browsers": [
-            "defaults"
+            "defaults",
+            "not dead",
+            "not ie 11"
           ]
         }
       }
     ]
   ],
   "plugins": [
-    "@babel/plugin-transform-object-assign"
+
   ],
   "env": {
     "test": {

.github/ISSUE_TEMPLATE.md

@@ -7,9 +7,9 @@
 
 **Tell about your platform**
 * cleave.js version : 1.x.x
-* Vue.js version : 2.6.x
-* Browser name and version : Chrome|Firefox|Safari x.x.x
-* This package version : 2.x.x
+* Vue.js version : 3.0.x
+* Browser name and version : Chrome|Firefox|Safari|Edge x.x.x
+* This package version : 3.x.x
 
 **Current behavior**
 <!-- Describe how the bug manifests. -->

.github/workflows/build.yml

@@ -6,6 +6,9 @@ on:
       - master
       - dev
   pull_request:
+    branches:
+      - master
+      - dev
   schedule:
     - cron: '0 0 1 * *'
 
@@ -16,7 +19,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
 
     steps:
       - uses: actions/checkout@v2

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [3.0.0](https://github.com/ankurk91/vue-cleave-component/compare/2.1.2...3.0.0)
+* Drop support for Vue v2.x and add support for Vue v3.x
+* Drop IE 11 support
+
 ## [2.1.3](https://github.com/ankurk91/vue-cleave-component/compare/2.1.2...2.1.3)
 * Fix: `input` event was being emitted on load, [#25](https://github.com/ankurk91/vue-cleave-component/issues/25)
 

README.md

@@ -11,13 +11,19 @@ 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
+* Reactive `v-model` value
     - You can change input value programmatically 
-* Reactive [options](https://github.com/nosir/cleave.js/blob/master/doc/options.md), read [caveats](#caveats) below
+* 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
-    - You are suggested to modify config via [Vue.set](https://vuejs.org/v2/api/#Vue-set)
 * 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 
@@ -35,7 +41,10 @@ npm install vue-cleave-component --save
 ```html
 <template>
   <div>
-    <cleave v-model="cardNumber" :options="options" class="form-control" name="card"></cleave>
+    <cleave v-model="cardNumber" 
+            :options="options" 
+            class="form-control" 
+            name="card"/>
   </div>
 </template>
 
@@ -61,9 +70,10 @@ npm install vue-cleave-component --save
 
 ### As plugin
 ```js
-  import Vue from 'vue';
+  import {createApp} from 'vue';
   import Cleave from 'vue-cleave-component';
-  Vue.use(Cleave);
+  const app = createApp().mount('#app')  
+  app.use(Cleave);
 ```
 This will register a global component `<cleave>` 
 
@@ -72,7 +82,7 @@ The component accepts these props:
 
 | Attribute        | Type                   | Default     | Description      |
 | :---             | :---:                  | :---:       | :---             |
-| v-model / value  | String / Number / null | `null`      | Set or Get input value (required) |
+| 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 |
 
@@ -82,28 +92,12 @@ The component accepts these props:
 <!-- cleave.js -->
 <script src="https://cdn.jsdelivr.net/npm/cleave.js@1"></script>
 <!-- Vue.js -->
-<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
 <!-- Lastly add this package -->
-<script src="https://cdn.jsdelivr.net/npm/vue-cleave-component@2"></script>
-```
-* Use the component anywhere in your app like this
-```html
-<main id="app">  
-    <cleave v-model="card" :options="options"></cleave> 
-</main>
+<script src="https://cdn.jsdelivr.net/npm/vue-cleave-component@3"></script>
 <script>
-  // Initialize global component
-  Vue.use(VueCleave);
-  
-  new Vue({
-    el: '#app',
-    data: {
-      card: null,
-      options: {
-        creditCard: true,
-      }
-    },    
-  });
+ // Init as global component
+ yourApp.use(VueCleave);
 </script>
 ```
 
@@ -115,20 +109,12 @@ The component accepts these props:
 * This should open the demo page at ``http://localhost:9000`` 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) for 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 `yarn test`
 
 ## Changelog
 Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
 
-## Caveats
-* :warning: Do not supply config option as inline literal object to `:options` prop.
-```html
-<!-- This will cause an infinite loop -->
-<cleave v-model="card" :options="{creditCard:true}"></cleave>
-```
-* Vue.js cannot detect changes when literal object/arrays passed within template, [see](https://github.com/vuejs/vue/issues/4060)
-
 ## License
 [MIT](LICENSE.txt) License

__test__/config.test.js

@@ -1,16 +1,16 @@
-import {mount, createLocalVue} from '@vue/test-utils'
+import {mount} from '@vue/test-utils'
 
 import Component from '../src/component.js';
 
 describe('Cleave configs', () => {
 
-  let localVue = createLocalVue();
   let onValueChangedStub = jest.fn();
 
   let app = {
-    template: `<div id="app">
-                  <cleave :options="options" :raw="raw" v-model="model"></cleave>
-                 </div>`,
+    template: `
+      <div id="app">
+      <cleave :options="options" :raw="raw" v-model="model"></cleave>
+      </div>`,
     data() {
       return {
         model: '12122012',
@@ -28,15 +28,12 @@ describe('Cleave configs', () => {
 
   let wrapper = null;
 
-
   beforeEach(() => {
-    wrapper = mount(app, {
-      localVue
-    })
+    wrapper = mount(app, {})
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
     wrapper = null;
     jest.resetAllMocks();
   });

__test__/instance.test.js

@@ -9,26 +9,21 @@ describe('Cleave component instance', () => {
   beforeEach(() => {
     wrapper = mount(Component, {
       propsData: {
-        value: null,
+        modelValue: null,
         options: {
           creditCard: true
         }
       }
     });
   });
 
-  test('is a Vue instance', () => {
-    expect(wrapper.isVueInstance()).toBe(true)
-  });
-
   test('renders input field', () => {
-    expect(wrapper.is('input')).toBe(true);
+    expect(wrapper.find('input').exists()).toBe(true);
   });
 
 
   test('clean up on destroy', () => {
-    wrapper.destroy();
-    expect(wrapper.isEmpty()).toBe(true);
+    wrapper.unmount();
     expect(wrapper.vm.$data.cleave).toBe(null);
   });
 

__test__/plugin.test.js

@@ -1,13 +1,8 @@
 import Component from '../src/index';
-import {mount, createLocalVue} from '@vue/test-utils';
+import {mount} from '@vue/test-utils';
 
 describe('Cleave global component', () => {
 
-  // Make a copy of local vue
-  let localVue = createLocalVue();
-  // Define a global component
-  localVue.use(Component, 'cleave-input');
-
   test('works as plugin', () => {
 
     let app = {
@@ -22,13 +17,17 @@ describe('Cleave global component', () => {
     };
 
     let wrapper = mount(app, {
-      localVue
+      global: {
+        components: {
+          cleaveInput: Component
+        }
+      }
     });
 
-    expect(wrapper.contains(Component)).toBe(true);
+    expect(wrapper.findComponent(Component)).toBeTruthy();
 
-    let input = wrapper.find(Component);
-    expect(input.is('input')).toBe(true);
+    let input = wrapper.getComponent(Component);
+    expect(input.find('input')).toBeTruthy();
     expect(input.classes()).toContain('form-control');
     expect(input.attributes('name')).toBe('card');
 

__test__/prop-raw.test.js

@@ -1,10 +1,9 @@
-import {mount, createLocalVue} from '@vue/test-utils'
+import {mount} from '@vue/test-utils'
 
 import Component from '../src/component.js';
 
 describe('Cleave raw prop', () => {
 
-  let localVue = createLocalVue();
   let app = {
     template: `<div id="app">
                   <cleave :options="options" :raw="raw" v-model="model"></cleave>
@@ -27,26 +26,24 @@ describe('Cleave raw prop', () => {
 
 
   beforeEach(() => {
-    wrapper = mount(app, {
-      localVue
-    })
+    wrapper = mount(app, {})
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
     wrapper = null;
   });
 
   test('emits raw by default', async () => {
-    wrapper.setData({
+    await wrapper.setData({
       model: '10102010'
     });
     await wrapper.vm.$nextTick();
 
     expect(wrapper.vm.model).toBe('10102010')
   });
 
-  test('does not emits raw when set to false', async () => {
+  test('does not emit raw when set to false', async () => {
     wrapper.setData({
       raw: false,
       model: '11/11/2011'

__test__/props.test.js

@@ -6,7 +6,7 @@ describe('Cleave props', () => {
 
   // Store for future usage
   const props = {
-    value: '4' + '1'.repeat(15),
+    modelValue: '4' + '1'.repeat(15),
     options: {
       cardNumber: true,
       delimiter: '-',
@@ -22,18 +22,14 @@ describe('Cleave props', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
-  test('accepts options via prop', () => {
+  test('accept options via prop', () => {
     expect(wrapper.props('options')).toEqual(props.options);
     expect(wrapper.vm.cleave.properties).toHaveProperty('delimiter', props.options.delimiter);
   });
 
-  test('accepts value via prop', () => {
-    expect(wrapper.props('value')).toBe(props.value);
-  });
-
   test('accepts raw as prop', async () => {
     wrapper.setProps({raw: false});
     await wrapper.vm.$nextTick();
@@ -42,7 +38,7 @@ describe('Cleave props', () => {
   });
 
   test('validates v-model', () => {
-    let vModel = wrapper.vm.$options.props.value;
+    let vModel = wrapper.vm.$options.props.modelValue;
 
     expect(vModel.validator(false)).toBe(false);
     expect(vModel.validator(undefined)).toBe(false);