Add events prop to customize emitted events, #53

Author: ankurk91

Diff for: CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [6.1.0](https://github.com/ankurk91/vue-flatpickr-component/compare/6.0.0...6.1.0) 
+* Add: `events` props to customise the emitted events, for example, fixes [#53](https://github.com/ankurk91/vue-flatpickr-component/issues/53)
+```html
+<flatpickr v-model="date" events="['onChange']">
+```
+`events` prop is optional and component emits all events when not specified.
+
 ## [6.0.0](https://github.com/ankurk91/vue-flatpickr-component/compare/5.0.5...6.0.0) 
 * Add: emit all events, fixes [#37](https://github.com/ankurk91/vue-flatpickr-component/issues/37)
 * Fix: dynamically change configs, [#20](https://github.com/ankurk91/vue-flatpickr-component/issues/20)

Diff for: README.md

@@ -154,6 +154,7 @@ The component accepts these props:
 | :---             | :---:                                           | :---:                | :---             |
 | v-model / value  | String / Date Object / Array / Timestamp / null | `null`               | Set or Get date-picker value (required) |
 | config           | Object                                          | `{wrap:false}`       | Flatpickr configuration [options](https://chmln.github.io/flatpickr/options/)|
+| events           | Array                                           | Array of all events  | Customise the [events](https://chmln.github.io/flatpickr/events/) to be emitted|
 
 ## Install in non-module environments (without webpack)
 * Include required files

Diff for: __test__/events.spec.js

@@ -46,5 +46,24 @@ describe('Flatpickr events', () => {
     expect(onChangeStub).toHaveBeenCalled();
   });
 
+  test('emits only those are specified via prop', () => {
+    wrapper = shallow(Component, {
+      propsData: {
+        value: null,
+        events: ['onChange']
+      }
+    });
+
+    const onOpen = jest.fn();
+    wrapper.vm.$on('on-open', onOpen);
+    wrapper.trigger('focus');
+    expect(onOpen).not.toHaveBeenCalled();
+
+    const onChange = jest.fn();
+    wrapper.vm.$on('on-change', onChange);
+    wrapper.setProps({value: '2017-10-04'});
+    expect(onChange).toHaveBeenCalled();
+  });
+
 
 });

Diff for: src/component.vue

@@ -50,6 +50,10 @@
           wrap: false
         })
       },
+      events: {
+        type: Array,
+        default: () => hooks
+      }
     },
     data() {
       return {
@@ -64,8 +68,8 @@
       /* istanbul ignore if */
       if (this.fp) return;
 
-      // Inject our method into hooks array
-      hooks.forEach((hook) => {
+      // Inject our method into events array
+      this.events.forEach((hook) => {
         this.config[hook] = arrayify(this.config[hook] || []).concat((...args) => {
           this.$emit(camelToKebab(hook), ...args)
         });
@@ -104,7 +108,8 @@
       config: {
         deep: true,
         handler(newConfig) {
-          // Workaround: Don't pass hooks to configs again
+          // Workaround: Don't pass hooks to configs again otherwise
+          // previously registered hooks will stop working
           hooks.forEach((hook) => {
             delete newConfig[hook];
           });