@progress/kendo-vue-dateinputs 2.6.3 → 2.6.4

package/dist/npm/daterangepicker/DateRangePicker.js

@@ -1,21 +1,5 @@
 "use strict";
 
-var __assign = undefined && undefined.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-
-    return t;
-  };
-
-  return __assign.apply(this, arguments);
-};
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -42,6 +26,8 @@ var package_metadata_1 = require("../package-metadata");
 
 var DateInput_1 = require("../dateinput/DateInput");
 
+var Calendar_1 = require("../calendar/components/Calendar");
+
 var models_1 = require("../calendar/models");
 
 var defaults_1 = require("../defaults");
@@ -80,6 +66,8 @@ var DateRangePicker = {
       type: Boolean,
       default: false
     },
+    startDateInput: [String, Object, Function],
+    endDateInput: [String, Object, Function],
     endDateInputSettings: Object,
     focusedDate: Date,
     format: {
@@ -113,21 +101,38 @@ var DateRangePicker = {
     ariaDescribedBy: String,
     max: {
       type: Date,
-      default: defaults_1.MAX_DATE
+      default: function _default() {
+        return defaults_1.MAX_DATE;
+      }
     },
     min: {
       type: Date,
-      default: defaults_1.MIN_DATE
+      default: function _default() {
+        return defaults_1.MIN_DATE;
+      }
+    },
+    popupSettings: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    show: {
+      type: Boolean,
+      default: undefined
     },
-    popupSettings: Object,
-    show: Boolean,
     startDateInputSettings: Object,
     swapButton: {
       type: Boolean,
       default: false
     },
     tabIndex: Number,
-    value: Object // PropTypes.shape({ start: Date, end: Date })
+    value: {
+      type: Object,
+      default: function _default() {
+        return undefined;
+      }
+    } // PropTypes.shape({ start: Date, end: Date })
 
   },
   created: function created() {
@@ -135,30 +140,36 @@ var DateRangePicker = {
     this._wrapper = null;
     this._calendar = null;
     this._startDateInput = null;
-    this._endDateInput = null; // this.valueDuringOnChange?: SelectionRange | null;
+    this._endDateInput = null; // this.valueDuringOnChange = undefined;
     // this.showDuringOnChange?: boolean;
-    // this.nextTickId: any;
 
     this._popupId = kendo_vue_common_1.guid();
+    this._anchor = kendo_vue_common_1.guid();
     this._startInputId = kendo_vue_common_1.guid();
     this._endInputId = kendo_vue_common_1.guid();
-    this.shouldFocusDateInput = false;
-    this.shouldFocusCalendar = false;
     kendo_vue_common_2.validatePackage(package_metadata_1.packageMetadata);
     this.currentShow = this.$props.show || this.$props.defaultShow;
     this.currentValue = this.$props.value || this.$props.defaultValue;
-    this.nextTick = this.nextTick.bind(this);
-    this.setShow = this.setShow.bind(this);
-    this.focusCalendarElement = this.focusCalendarElement.bind(this);
-    this.focusDateInputElement = this.focusDateInputElement.bind(this);
+    this.initialAnimation = this.currentShow;
   },
   mounted: function mounted() {
+    this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
+    this._startDateInput = this.v3 ? this.startDateInputRef : this.$refs.startDateInput;
+    this._endDateInput = this.v3 ? this.endDateInputRef : this.$refs.endDateInput;
+
     if (this.computedShow) {
       // If defaultShow is true during the initial render, the popup is not aligned.
       this.$forceUpdate();
+      this.$nextTick(function () {
+        this.initialAnimation = false;
+      });
     }
   },
   updated: function updated() {
+    if (!this._calendar) {
+      this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
+    }
+
     if (this.shouldFocusCalendar) {
       this.focusCalendarElement();
     }
@@ -170,19 +181,22 @@ var DateRangePicker = {
     this.shouldFocusCalendar = false;
     this.shouldFocusDateInput = false;
   },
-  destroyed: function destroyed() {
-    clearTimeout(this.nextTickId);
-  },
   data: function data() {
     return {
-      show: false,
-      value: null
+      currentShow: false,
+      currentValue: null,
+      valueDuringOnChange: undefined,
+      shouldFocusDateInput: false,
+      shouldFocusCalendar: false
     };
   },
   computed: {
     computedValue: function computedValue() {
-      var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.currentvalue;
+      var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.currentValue;
       return value || models_1.EMPTY_SELECTIONRANGE;
+    },
+    computedShow: function computedShow() {
+      return this.$props.show !== undefined ? this.$props.show : this.currentShow;
     }
   },
   // @ts-ignore
@@ -201,7 +215,7 @@ var DateRangePicker = {
     var _this = this;
 
     var h = gh || createElement;
-    var value = this.value || models_1.EMPTY_SELECTIONRANGE;
+    var value = this.computedValue || models_1.EMPTY_SELECTIONRANGE;
     var startDateInputId = (this.$props.startDateInputSettings || {}).id || this._startInputId;
     var endDateInputId = (this.$props.endDateInputSettings || {}).id || this._endInputId;
     var rootClassName = kendo_vue_common_1.classNames('k-daterangepicker', {
@@ -211,9 +225,26 @@ var DateRangePicker = {
     var startMessage = localizationService.toLanguageString(messages_1.start, messages_1.messages[messages_1.start]);
     var endMessage = localizationService.toLanguageString(messages_1.end, messages_1.messages[messages_1.end]);
     var separatorMessage = localizationService.toLanguageString(messages_1.separator, messages_1.messages[messages_1.separator]);
-
-    var startDateInputProps = __assign(__assign({
+    var startDateInputRender = this.$props.startDateInput ? kendo_vue_common_2.templateRendering.call(this, this.$props.startDateInput, kendo_vue_common_2.getListeners.call(this)) : undefined;
+    var startDateInputDefaultRendering = // @ts-ignore
+    h(DateInput_1.DateInput, {
+      ref: this.v3 ? function (el) {
+        _this.startDateInputRef = el;
+      } : 'startDateInput',
       label: startMessage,
+      attrs: this.v3 ? undefined : {
+        label: startMessage,
+        format: this.$props.format,
+        min: this.min,
+        max: this.max,
+        id: this._startInputId,
+        disabled: this.$props.disabled,
+        valid: this.$props.valid,
+        ariaHasPopup: true,
+        ariaExpanded: this.computedShow //  ...this.$props.startDateInputSettings,
+        ,
+        value: value.start
+      },
       format: this.$props.format,
       min: this.min,
       max: this.max,
@@ -221,14 +252,41 @@ var DateRangePicker = {
       disabled: this.$props.disabled,
       valid: this.$props.valid,
       ariaHasPopup: true,
-      ariaExpanded: this.show
-    }, this.$props.startDateInputSettings), {
+      ariaExpanded: this.computedShow,
       value: value.start,
-      onChange: this.handleStartChange
+      onChange: this.handleStartChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleStartChange
+      }
     });
-
-    var endDateInputProps = __assign(__assign({
+    var startDateInputRendering = kendo_vue_common_2.getTemplate.call(this, {
+      h: h,
+      template: startDateInputRender,
+      defaultRendering: startDateInputDefaultRendering,
+      additionalListeners: {
+        change: this.handleStartChange
+      }
+    });
+    var endDateInputRender = this.$props.endDateInput ? kendo_vue_common_2.templateRendering.call(this, this.$props.endDateInput, kendo_vue_common_2.getListeners.call(this)) : undefined;
+    var endDateInputDefaultRendering = // @ts-ignore
+    h(DateInput_1.DateInput, {
+      ref: this.v3 ? function (el) {
+        _this.endDateInputRef = el;
+      } : 'endDateInput',
       label: endMessage,
+      attrs: this.v3 ? undefined : {
+        label: endMessage,
+        format: this.$props.format,
+        min: this.min,
+        max: this.max,
+        id: this._endInputId,
+        disabled: this.$props.disabled,
+        valid: this.$props.valid,
+        ariaHasPopup: true,
+        ariaExpanded: this.computedShow // ...this.$props.endDateInputSettings,
+        ,
+        value: value.end
+      },
       format: this.$props.format,
       min: this.min,
       max: this.max,
@@ -236,141 +294,189 @@ var DateRangePicker = {
       disabled: this.$props.disabled,
       valid: this.$props.valid,
       ariaHasPopup: true,
-      ariaExpanded: this.show
-    }, this.$props.endDateInputSettings), {
+      ariaExpanded: this.computedShow,
       value: value.end,
-      onChange: this.handleEndChange
+      onChange: this.handleEndChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleEndChange
+      }
     });
-
-    var popupProps = __assign(__assign({
-      animate: this._wrapper !== null,
-      anchor: this._wrapper,
-      id: this._popupId,
-      anchorAlign: {
-        horizontal: 'left',
-        vertical: 'bottom'
-      },
-      popupAlign: {
-        horizontal: 'left',
-        vertical: 'top'
+    var endDateInputRendering = kendo_vue_common_2.getTemplate.call(this, {
+      h: h,
+      template: endDateInputRender,
+      defaultRendering: endDateInputDefaultRendering,
+      additionalListeners: {
+        change: this.handleEndChange
       }
-    }, this.$props.popupSettings), {
-      show: this.show
     });
-
-    var calendarProps = __assign(__assign({
+    var calendarRender = this.$props.calendar ? kendo_vue_common_2.templateRendering.call(this, this.$props.calendar, kendo_vue_common_2.getListeners.call(this)) : undefined;
+    var calendarDefaultRendering = // @ts-ignore
+    h(Calendar_1.Calendar, {
+      ref: this.v3 ? function (el) {
+        _this.calendarRef = el;
+      } : 'calendar',
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown,
+        "focus": this.calendarFocus,
+        "blur": this.calendarBlur,
+        "change": this.handleCalendarChange
+      },
+      onFocus: this.calendarFocus,
+      onBlur: this.calendarBlur,
       min: this.min,
+      attrs: this.v3 ? undefined : {
+        min: this.min,
+        max: this.max,
+        views: 2,
+        allowReverse: this.$props.allowReverse,
+        mode: 'range',
+        focusedDate: this.$props.focusedDate,
+        disabled: this.$props.disabled //   ...this.$props.calendarSettings,
+        ,
+        value: value
+      },
       max: this.max,
+      views: 2,
       allowReverse: this.$props.allowReverse,
       mode: 'range',
       focusedDate: this.$props.focusedDate,
-      disabled: this.$props.disabled
-    }, this.$props.calendarSettings), {
+      disabled: this.$props.disabled,
       value: value,
       onChange: this.handleCalendarChange
     });
-
-    var calendar = this.$props.calendar ? h(this.$props.calendar) : // @ts-ignore
-    h(MultiViewCalendar // {...calendarProps}
-    , {
-      ref: this.setCalendarRef
+    var calendarRendering = kendo_vue_common_2.getTemplate.call(this, {
+      h: h,
+      template: calendarRender,
+      defaultRendering: calendarDefaultRendering,
+      additionalListeners: {
+        change: this.handleCalendarChange
+      }
+    });
+    var _a = this.$props.popupSettings,
+        popupClass = _a.popupClass,
+        animate = _a.animate,
+        appendTo = _a.appendTo;
+    var popupRender = this.$props.popup ? kendo_vue_common_2.templateRendering.call(this, this.$props.popup, kendo_vue_common_2.getListeners.call(this)) : undefined;
+    var popupDefaultRendering = // @ts-ignore function children
+    h(kendo_vue_popup_1.Popup, {
+      show: this.computedShow,
+      attrs: this.v3 ? undefined : {
+        show: this.computedShow,
+        anchor: this._anchor,
+        id: this._popupId,
+        anchorAlign: {
+          horizontal: 'left',
+          vertical: 'bottom'
+        },
+        popupAlign: {
+          horizontal: 'left',
+          vertical: 'top'
+        },
+        animate: this.initialAnimation ? false : animate,
+        appendTo: appendTo
+      },
+      anchor: this._anchor,
+      id: this._popupId,
+      anchorAlign: {
+        horizontal: 'left',
+        vertical: 'bottom'
+      },
+      popupAlign: {
+        horizontal: 'left',
+        vertical: 'top'
+      },
+      animate: this.initialAnimation ? false : animate,
+      appendTo: appendTo,
+      "class": popupClass
+    }, this.v3 ? function () {
+      return [calendarRendering];
+    } : [calendarRendering]);
+    var popupRendering = kendo_vue_common_2.getTemplate.call(this, {
+      h: h,
+      template: popupRender,
+      defaultRendering: popupDefaultRendering,
+      defaultSlots: calendarRendering
     });
     var reverseButton = h("span", {
       role: "button",
       attrs: this.v3 ? undefined : {
         role: "button",
-        className: "k-select k-button k-flat",
-        title: kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd])
+        title: kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd]),
+        "aria-controls": startDateInputId + ' ' + endDateInputId,
+        "aria-label": kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd])
       },
-      className: "k-select k-button k-flat",
+      "class": "k-select k-button k-flat",
       title: kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd]),
-      onMouseDown: this.handleReverseMouseDown,
+      onMousedown: this.handleReverseMouseDown,
       on: this.v3 ? undefined : {
-        "mouseDown": this.handleReverseMouseDown,
+        "mousedown": this.handleReverseMouseDown,
         "click": this.handleReverseClick
       },
-      onClick: this.handleReverseClick
+      onClick: this.handleReverseClick,
+      "aria-controls": startDateInputId + ' ' + endDateInputId,
+      "aria-label": kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd])
     }, [h("span", {
       style: {
         transform: 'rotate(90deg)'
       },
-      className: "k-icon k-i-arrows-swap",
-      attrs: this.v3 ? undefined : {
-        className: "k-icon k-i-arrows-swap"
-      }
+      "class": "k-icon k-i-arrows-swap"
     })]);
     return h("span", {
-      ref: function ref(span) {
-        _this._element = span;
-      },
-      className: rootClassName,
+      "class": rootClassName,
+      style: this.$props.style,
+      id: this.$props.id,
       attrs: this.v3 ? undefined : {
-        className: rootClassName,
         id: this.$props.id,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         tabIndex: this.$props.tabIndex
       },
-      style: this.$props.style,
-      id: this.$props.id,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       tabIndex: this.$props.tabIndex,
-      onFocus: this.handleFocus,
+      onFocusin: this.handleFocus,
       on: this.v3 ? undefined : {
-        "focus": this.handleFocus,
-        "blur": this.handleBlur,
-        "keyDown": this.handleKeyDown
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur,
+        "keydown": this.handleKeyDown
       },
-      onBlur: this.handleBlur,
-      onKeyDown: this.handleKeyDown
+      onFocusout: this.handleBlur,
+      onKeydown: this.handleKeyDown
     }, [h("span", {
-      ref: function ref(span) {
-        _this._wrapper = span;
-      },
-      className: "k-daterangepicker-wrap",
-      attrs: this.v3 ? undefined : {
-        className: "k-daterangepicker-wrap"
-      },
+      ref: this.v3 ? function (el) {
+        _this.kendoAnchorRef = el;
+      } : this._anchor,
+      "class": "k-daterangepicker-wrap",
       style: WRAPPER_STYLES
-    }, [this.$props.startDateInput ? h(this.$props.startDateInput) : // @ts-ignore
-    h(DateInput_1.DateInput, {
-      // {...startDateInputProps} 
-      ref: this._startDateInput
-    }), (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? reverseButton : separatorMessage, this.$props.endDateInput ? h(this.$props.endDateInput) : // @ts-ignore
-    h(DateInput_1.DateInput, {
-      // {...endDateInputProps} 
-      ref: this._endDateInput
-    })]), this.$props.popup ? h(this.$props.popup, [calendar]) : // @ts-ignore
-    h(kendo_vue_popup_1.Popup, [calendar])]);
+    }, [startDateInputRendering, (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? reverseButton : separatorMessage, endDateInputRendering]), popupRendering]);
   },
   methods: {
     focus: function focus() {
-      if (this.startDateInput) {
-        this.startDateInput.focus();
+      if (this._startDateInput) {
+        this._startDateInput.focus();
       }
     },
-    setCalendarRef: function setCalendarRef(calendar) {
-      this._calendar = calendar;
-    },
     focusCalendarElement: function focusCalendarElement() {
-      if (this._calendar && this._calendar.element) {
-        this._calendar.element.focus({
+      var popup = document.getElementById(this._popupId);
+
+      if (this._calendar && popup) {
+        popup.getElementsByClassName('k-calendar-table')[0].focus({
           preventScroll: true
         });
       }
     },
     focusDateInputElement: function focusDateInputElement() {
-      if (!document || !this.startDateInput || !this.startDateInput.element || !this.endDateInput || !this.endDateInput.element) {
+      if (!document || !this._startDateInput || !this._startDateInput.element() || !this._endDateInput || !this._endDateInput.element()) {
         return;
       }
 
-      if ((this.value.start === null || this.value.end !== null) && document.activeElement !== this.endDateInput.element) {
-        this.startDateInput.element.focus({
+      if ((this.computedValue.start === null || this.computedValue.end !== null) && document.activeElement !== this._endDateInput.element()) {
+        this._startDateInput.focus({
           preventScroll: true
         });
-      } else if (document.activeElement !== this.startDateInput.element) {
-        this.endDateInput.element.focus({
+      } else if (document.activeElement !== this._startDateInput.element()) {
+        this._endDateInput.focus({
           preventScroll: true
         });
       }
@@ -384,26 +490,17 @@ var DateRangePicker = {
       return nextProps.show !== undefined ? nextProps.show // @ts-ignore
       : nextState.show;
     },
-    // nextTick(f: () => any): void {
-    //     // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
-    //     // XXX: https://github.com/facebook/react/issues/3751
-    //     // Handles multiple focus events happening at the same time.
-    //     clearTimeout(this.nextTickId);
-    //     this.nextTickId = window.setTimeout(() => f());
-    // },
     setShow: function setShow(show) {
-      if (this.show === show) {
+      if (this.currentShow === show) {
         return;
       }
 
-      this.setState({
-        show: show
-      });
+      this.currentShow = show;
     },
     handleReverseClick: function handleReverseClick(event) {
       var value = {
-        start: this.value.end,
-        end: this.value.start
+        start: this.computedValue.end,
+        end: this.computedValue.start
       };
       var args = {
         nativeEvent: event.nativeEvent
@@ -414,49 +511,53 @@ var DateRangePicker = {
       event.preventDefault();
     },
     handleFocus: function handleFocus(event) {
-      clearTimeout(this.nextTickId);
-
       if (!this.shouldFocusDateInput) {
         this.setShow(true);
       }
 
-      if (this.startDateInput && this.startDateInput.element) {
-        this.startDateInput.element.classList.add('k-state-focused');
+      if (this._startDateInput && this._startDateInput.element()) {
+        this._startDateInput.element().classList.add('k-state-focused');
       }
 
-      if (this.endDateInput && this.endDateInput.element) {
-        this.endDateInput.element.classList.add('k-state-focused');
+      if (this._endDateInput && this._endDateInput.element()) {
+        this._endDateInput.element().classList.add('k-state-focused');
       }
 
-      var onFocus = this.$props.onFocus;
-
-      if (onFocus) {
-        onFocus.call(undefined, event);
-      }
+      this.$emit('focus', event);
     },
-    handleBlur: function handleBlur(event) {
+    calendarBlur: function calendarBlur() {
+      // this.$emit('blur', event);
+      clearTimeout(this._blurTimeout);
+      this.createBlurTimeout();
+    },
+    calendarFocus: function calendarFocus() {
+      // this.$emit('focus', event);
+      clearTimeout(this._blurTimeout);
+    },
+    createBlurTimeout: function createBlurTimeout() {
       var _this = this;
 
-      this.nextTick(function () {
-        if (_this.startDateInput && _this.startDateInput.element) {
-          _this.startDateInput.element.classList.remove('k-state-focused');
+      this._blurTimeout = setTimeout(function () {
+        if (_this._startDateInput && _this._startDateInput.element()) {
+          _this._startDateInput.element().classList.remove('k-state-focused');
         }
 
-        if (_this.endDateInput && _this.endDateInput.element) {
-          _this.endDateInput.element.classList.remove('k-state-focused');
+        if (_this._endDateInput && _this._endDateInput.element()) {
+          _this._endDateInput.element().classList.remove('k-state-focused');
         }
 
-        _this.setShow(false);
-      });
-      var onBlur = this.$props.onBlur;
-
-      if (onBlur) {
-        onBlur.call(undefined, event);
-      }
+        if (_this._startDateInput && kendo_vue_common_1.canUseDOM && document.activeElement !== _this._startDateInput._element && document.activeElement !== _this._endDateInput._element) {
+          _this.setShow(false);
+        }
+      }, 200);
+    },
+    handleBlur: function handleBlur(event) {
+      this.createBlurTimeout();
+      this.$emit('blur', event);
     },
     handleEndChange: function handleEndChange(event) {
       var value = {
-        start: this.value.start,
+        start: this.computedValue.start,
         end: kendo_date_math_1.cloneDate(event.value || undefined)
       };
       this.handleChange(value, event);
@@ -464,7 +565,7 @@ var DateRangePicker = {
     handleStartChange: function handleStartChange(event) {
       var value = {
         start: kendo_date_math_1.cloneDate(event.value || undefined),
-        end: this.value.end
+        end: this.computedValue.end
       };
       this.handleChange(value, event);
     },
@@ -475,8 +576,8 @@ var DateRangePicker = {
 
       var candidate = Array.isArray(event.value) ? event.value[0] : event.value;
       return {
-        start: this.value.end !== null ? candidate : this.value.start,
-        end: this.value.start !== null ? candidate : this.value.end
+        start: this.computedValue.end !== null ? candidate : this.computedValue.start,
+        end: this.computedValue.start !== null ? candidate : this.computedValue.end
       };
     },
     handleCalendarChange: function handleCalendarChange(event) {
@@ -495,28 +596,21 @@ var DateRangePicker = {
         event.preventDefault();
         this.shouldFocusCalendar = true;
         this.setShow(true);
-      } else if (keyCode === kendo_vue_common_1.Keys.tab && this.show && this._calendar && this._calendar.element && this.endDateInput && this.endDateInput.element && document && document.activeElement === this.endDateInput.element) {
+      } else if (keyCode === kendo_vue_common_1.Keys.tab && this.computedShow && this._calendar && this._calendar.$el && this._endDateInput && this._endDateInput.element() && document && document.activeElement === this._endDateInput.element()) {
         event.preventDefault();
         this.focusCalendarElement();
       }
     },
     handleChange: function handleChange(value, event) {
-      this.setState({
-        value: value
-      });
+      this.currentValue = value;
       this.valueDuringOnChange = value;
-      var onChange = this.$props.onChange;
-
-      if (onChange) {
-        var args = {
-          nativeEvent: event.event,
-          value: this.value,
-          show: this.show,
-          target: this
-        };
-        onChange.call(undefined, args);
-      }
-
+      var args = {
+        event: event.event,
+        value: this.computedValue,
+        show: this.computedShow,
+        target: this
+      };
+      this.$emit('change', args);
       this.valueDuringOnChange = undefined;
     }
   }