Support Vue.js v3.x

.babelrc

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

.github/ISSUE_TEMPLATE.md

@@ -7,7 +7,7 @@
 
 **Tell about your platform**
 * flatPickr version : 4.x.x
-* Vue.js version : 2.6.x
+* Vue.js version : 3.x
 * Browser name and version : Chrome|Firefox|Safari x.x.x
 * This package version : x.x.x
 

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [9.0.0](https://github.com/ankurk91/vue-flatpickr-component/compare/8.1.6...9.0.0)
+* Drop support for Vue v2.x and add support for Vue v3.x
+* Drop IE 11 support
+
 ## [8.1.6](https://github.com/ankurk91/vue-flatpickr-component/compare/8.1.5...8.1.6)
 * Fix: [#196](https://github.com/ankurk91/vue-flatpickr-component/issues/196)
 

README.md

@@ -18,7 +18,6 @@ Vue.js component for [Flatpickr](https://flatpickr.js.org/) date-time picker
 * Reactive [config](https://flatpickr.js.org/options/) options
     - 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)
 * Can emit all possible [events](https://flatpickr.js.org/events/)
 * Compatible with [Bootstrap](http://getbootstrap.com/), [Bulma](http://bulma.io/) or any other CSS framework
 * Supports [wrapped](https://flatpickr.js.org/examples/#flatpickr-external-elements) mode
@@ -28,10 +27,10 @@ Vue.js component for [Flatpickr](https://flatpickr.js.org/) date-time picker
 ## Installation
 ```bash
 # yarn
-yarn add vue-flatpickr-component
+yarn add vue-flatpickr-component@next
 
 # npm
-npm install vue-flatpickr-component
+npm install vue-flatpickr-component@next
 ```
 
 ## Usage
@@ -133,7 +132,8 @@ This example is based on Bootstrap 4 [input group](https://getbootstrap.com/docs
   import Vue from 'vue';
   import VueFlatPickr from 'vue-flatpickr-component';
   import 'flatpickr/dist/flatpickr.css';
-  Vue.use(VueFlatPickr);
+  // Your app initialization logic goes here
+  app.use(VueFlatPickr);
 ```
 This will register a global component `<flat-pickr>`
 
@@ -143,7 +143,7 @@ This will register a global component `<flat-pickr>`
 <flat-pickr v-model="date" @on-change="doSomethingOnChange" @on-close="doSomethingOnClose"></flat-pickr>
 ```
 * Event names has been converted to kebab-case.
-* You can still pass your methods in `:config` like original flatpickr do.
+* You can still pass your callback methods in `:config` like original flatpickr do.
 
 ## Available props
 The component accepts these props:
@@ -160,12 +160,12 @@ The component accepts these props:
 <link href="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js"></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-flatpickr-component@8"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-flatpickr-component@9"></script>
 <script>
 // Initialize as global component
-Vue.component('flat-pickr', VueFlatpickr);
+app.component('flat-pickr', VueFlatpickr);
 </script>
 ```
 
@@ -177,20 +177,12 @@ Vue.component('flat-pickr', VueFlatpickr);
 * 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: Don't pass config option as inline literal object to `:config` prop.
-```html
-<!-- This will cause date picker to freeze -->
-<flat-picker v-model="card" :config="{ dateFormat: 'd-m-Y H:i' }"></flat-picker>
-```
-* 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__/events.spec.js

@@ -16,7 +16,7 @@ describe('Flatpickr events', () => {
   beforeEach(() => {
     wrapper = mount(Component, {
       propsData: {
-        value: null,
+        modelValue: null,
         config: {
           onChange: onChangeStub
         }
@@ -25,42 +25,36 @@ describe('Flatpickr events', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
     wrapper = null;
     jest.resetAllMocks();
   });
 
   test('emits input event on value change by user', async () => {
-    const stub = jest.fn();
-    wrapper.vm.$on('input', stub);
     wrapper.vm.$el.value = '2019-10-04';
     wrapper.find('input').trigger('input');
     await wrapper.vm.$nextTick();
 
-    expect(stub).toHaveBeenCalledWith("2019-10-04");
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(["2019-10-04"])
   });
 
   test('emits on-change event on value change', async () => {
-    const stub = jest.fn();
-    wrapper.vm.$on('on-change', stub);
-    wrapper.setProps({value: '2017-10-04'});
-
+    wrapper.setProps({modelValue: '2017-10-04'});
     await wrapper.vm.$nextTick();
 
-    expect(stub).toHaveBeenCalled();
+    expect(wrapper.emitted()).toHaveProperty('on-change')
   });
 
-  test('emits on-open event on focus', () => {
-    const stub = jest.fn();
-    wrapper.vm.$on('on-open', stub);
+  test('emits on-open event on focus', async () => {
     wrapper.trigger('focus');
+    await wrapper.vm.$nextTick();
 
-    expect(stub).toHaveBeenCalled();
+    expect(wrapper.emitted()).toHaveProperty('on-open')
   });
 
   test('calls original onChange method on value change', async () => {
-    wrapper.setProps({value: '2017-10-04'});
-
+    wrapper.setProps({modelValue: '2017-10-04'});
     await wrapper.vm.$nextTick();
 
     expect(onChangeStub).toHaveBeenCalled();
@@ -69,39 +63,33 @@ describe('Flatpickr events', () => {
   test('emits only those are specified via prop', async () => {
     wrapper = mount(Component, {
       propsData: {
-        value: null,
+        modelValue: null,
         events: ['onChange']
       }
     });
 
-    const onOpen = jest.fn();
-    wrapper.vm.$on('on-open', onOpen);
     wrapper.trigger('focus');
     await wrapper.vm.$nextTick();
+    expect(wrapper.emitted()['on-open']).toBeFalsy()
 
-    expect(onOpen).not.toHaveBeenCalled();
-
-    const onChange = jest.fn();
-    wrapper.vm.$on('on-change', onChange);
-    wrapper.setProps({value: '2017-10-04'});
+    wrapper.setProps({modelValue: '2017-10-04'});
     await wrapper.vm.$nextTick();
-
-    expect(onChange).toHaveBeenCalled();
+    expect(wrapper.emitted()).toHaveProperty('on-change')
   });
 
   test('does not emit on-change event on mount', () => {
     expect(onChangeStub).not.toHaveBeenCalled();
   });
 
   test('emits blur event', () => {
-    wrapper.setProps({value: '2019-10-04'});
+    wrapper.setProps({modelValue: '2019-10-04'});
     wrapper.trigger('blur');
 
     expect(wrapper.emitted().blur).toBeTruthy()
   });
 
   test('respect global callbacks', async () => {
-    wrapper.setProps({value: '2017-10-04'});
+    wrapper.setProps({modelValue: '2017-10-04'});
 
     await wrapper.vm.$nextTick();
 

__test__/instance.spec.js

@@ -9,28 +9,18 @@ describe('Flatpickr component instance', () => {
   beforeEach(() => {
     wrapper = mount(Component, {
       propsData: {
-        value: new Date()
+        modelValue: new Date()
       }
     });
   });
 
-  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('opens datepicker when focus', () => {
     wrapper.trigger('focus');
     expect(wrapper.classes()).toContain('active');
   });
 
-  test('clean up on destroy', () => {
-    wrapper.destroy();
-    expect(wrapper.isEmpty()).toBe(true);
-    expect(wrapper.vm.$data.fp).toBe(null);
-  });
-
 });

__test__/plugin.spec.js

@@ -1,19 +1,15 @@
 import Component from '../src/index';
-import {mount, createLocalVue} from '@vue/test-utils';
+import {mount} from '@vue/test-utils';
 
 describe('Flatpickr global component', () => {
 
-  // Make a copy of local vue
-  let localVue = createLocalVue();
-  // Define the global component
-  localVue.use(Component, 'date-picker');
-
   test('works as plugin', () => {
 
     let app = {
-      template: `<div id="app">
-                  <date-picker class="form-control" name="date" v-model="date"></date-picker>
-                 </div>`,
+      template: `
+        <div id="app">
+        <date-picker class="form-control" name="date" v-model="date"></date-picker>
+        </div>`,
       data() {
         return {
           date: '2017-10-04'
@@ -22,18 +18,22 @@ describe('Flatpickr global component', () => {
     };
 
     let wrapper = mount(app, {
-      localVue
+      global: {
+        components: {
+          datePicker: 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.vm.$el.value).toBe('2017-10-04');
     expect(input.classes()).toContain('form-control');
     expect(input.attributes('name')).toBe('date');
 
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
 });

__test__/props.spec.js

@@ -6,7 +6,7 @@ describe('Flatpickr props', () => {
 
   // Store for future usage
   const props = {
-    value: '2017-10-04',
+    modelValue: '2017-10-04',
     config: {
       dateFormat: 'Y-m-d'
     }
@@ -21,7 +21,7 @@ describe('Flatpickr props', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   test('accepts config via prop', () => {
@@ -30,11 +30,11 @@ describe('Flatpickr props', () => {
   });
 
   test('accepts value via prop', () => {
-    expect(wrapper.props('value')).toBe(props.value);
+    expect(wrapper.props('modelValue')).toBe(props.modelValue);
   });
 
   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);
@@ -44,7 +44,6 @@ describe('Flatpickr props', () => {
     expect(vModel.validator('2017-12-12')).toBe(true);
     expect(vModel.validator(['2017-12-12'])).toBe(true);
     expect(vModel.validator(+new Date())).toBe(true);
-
   });
 
 });

__test__/watchers.spec.js

@@ -11,7 +11,7 @@ describe('Flatpickr watchers', () => {
   beforeEach(() => {
     wrapper = mount(Component, {
       propsData: {
-        value: null,
+        modelValue: null,
         config: {
           locale: HindiLocale
         }
@@ -20,7 +20,7 @@ describe('Flatpickr watchers', () => {
   });
 
   afterEach(() => {
-    wrapper.destroy();
+    wrapper.unmount();
     wrapper = null;
   });
 
@@ -31,7 +31,7 @@ describe('Flatpickr watchers', () => {
     expect(wrapper.vm.$el.value).toEqual('2019-10-04');
   });
 
-  test('updates configs runtime',async () => {
+  test('updates configs runtime', async () => {
     wrapper.setProps({config: {time_24hr: true}});
     await wrapper.vm.$nextTick();
 
@@ -52,7 +52,7 @@ describe('Flatpickr watchers', () => {
     expect(wrapper.vm.fp.config.locale.months.longhand[0]).toBe('January');
   });
 
-  test('updates disabled attribute runtime',async () => {
+  test('updates disabled attribute runtime', async () => {
     wrapper.setProps({disabled: false});
     await wrapper.vm.$nextTick();