@progress/kendo-vue-dateinputs 2.6.3 → 2.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,20 +1,4 @@
1
- var __assign = this && this.__assign || function () {
2
- __assign = Object.assign || function (t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
-
6
- for (var p in s) {
7
- if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
8
- }
9
- }
10
-
11
- return t;
12
- };
13
-
14
- return __assign.apply(this, arguments);
15
- }; // @ts-ignore
16
-
17
-
1
+ // @ts-ignore
18
2
  import * as Vue from 'vue';
19
3
  var allVue = Vue;
20
4
  var gh = allVue.h;
@@ -22,11 +6,12 @@ var ref = allVue.ref;
22
6
  var inject = allVue.inject;
23
7
  import { Popup } from '@progress/kendo-vue-popup';
24
8
  import { cloneDate } from '@progress/kendo-date-math';
25
- import { guid, classNames, Keys } from '@progress/kendo-vue-common';
9
+ import { guid, classNames, Keys, canUseDOM } from '@progress/kendo-vue-common';
26
10
  import { provideLocalizationService } from '@progress/kendo-vue-intl';
27
- import { validatePackage } from '@progress/kendo-vue-common';
11
+ import { validatePackage, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
28
12
  import { packageMetadata } from '../package-metadata';
29
13
  import { DateInput } from '../dateinput/DateInput';
14
+ import { Calendar } from '../calendar/components/Calendar';
30
15
  import { EMPTY_SELECTIONRANGE } from '../calendar/models';
31
16
  import { MIN_DATE, MAX_DATE } from '../defaults';
32
17
  import { swapStartEnd, start, end, separator, messages } from '../messages';
@@ -62,6 +47,8 @@ var DateRangePicker = {
62
47
  type: Boolean,
63
48
  default: false
64
49
  },
50
+ startDateInput: [String, Object, Function],
51
+ endDateInput: [String, Object, Function],
65
52
  endDateInputSettings: Object,
66
53
  focusedDate: Date,
67
54
  format: {
@@ -95,21 +82,38 @@ var DateRangePicker = {
95
82
  ariaDescribedBy: String,
96
83
  max: {
97
84
  type: Date,
98
- default: MAX_DATE
85
+ default: function _default() {
86
+ return MAX_DATE;
87
+ }
99
88
  },
100
89
  min: {
101
90
  type: Date,
102
- default: MIN_DATE
91
+ default: function _default() {
92
+ return MIN_DATE;
93
+ }
94
+ },
95
+ popupSettings: {
96
+ type: Object,
97
+ default: function _default() {
98
+ return {};
99
+ }
100
+ },
101
+ show: {
102
+ type: Boolean,
103
+ default: undefined
103
104
  },
104
- popupSettings: Object,
105
- show: Boolean,
106
105
  startDateInputSettings: Object,
107
106
  swapButton: {
108
107
  type: Boolean,
109
108
  default: false
110
109
  },
111
110
  tabIndex: Number,
112
- value: Object // PropTypes.shape({ start: Date, end: Date })
111
+ value: {
112
+ type: Object,
113
+ default: function _default() {
114
+ return undefined;
115
+ }
116
+ } // PropTypes.shape({ start: Date, end: Date })
113
117
 
114
118
  },
115
119
  created: function created() {
@@ -117,30 +121,36 @@ var DateRangePicker = {
117
121
  this._wrapper = null;
118
122
  this._calendar = null;
119
123
  this._startDateInput = null;
120
- this._endDateInput = null; // this.valueDuringOnChange?: SelectionRange | null;
124
+ this._endDateInput = null; // this.valueDuringOnChange = undefined;
121
125
  // this.showDuringOnChange?: boolean;
122
- // this.nextTickId: any;
123
126
 
124
127
  this._popupId = guid();
128
+ this._anchor = guid();
125
129
  this._startInputId = guid();
126
130
  this._endInputId = guid();
127
- this.shouldFocusDateInput = false;
128
- this.shouldFocusCalendar = false;
129
131
  validatePackage(packageMetadata);
130
132
  this.currentShow = this.$props.show || this.$props.defaultShow;
131
133
  this.currentValue = this.$props.value || this.$props.defaultValue;
132
- this.nextTick = this.nextTick.bind(this);
133
- this.setShow = this.setShow.bind(this);
134
- this.focusCalendarElement = this.focusCalendarElement.bind(this);
135
- this.focusDateInputElement = this.focusDateInputElement.bind(this);
134
+ this.initialAnimation = this.currentShow;
136
135
  },
137
136
  mounted: function mounted() {
137
+ this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
138
+ this._startDateInput = this.v3 ? this.startDateInputRef : this.$refs.startDateInput;
139
+ this._endDateInput = this.v3 ? this.endDateInputRef : this.$refs.endDateInput;
140
+
138
141
  if (this.computedShow) {
139
142
  // If defaultShow is true during the initial render, the popup is not aligned.
140
143
  this.$forceUpdate();
144
+ this.$nextTick(function () {
145
+ this.initialAnimation = false;
146
+ });
141
147
  }
142
148
  },
143
149
  updated: function updated() {
150
+ if (!this._calendar) {
151
+ this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
152
+ }
153
+
144
154
  if (this.shouldFocusCalendar) {
145
155
  this.focusCalendarElement();
146
156
  }
@@ -152,19 +162,22 @@ var DateRangePicker = {
152
162
  this.shouldFocusCalendar = false;
153
163
  this.shouldFocusDateInput = false;
154
164
  },
155
- destroyed: function destroyed() {
156
- clearTimeout(this.nextTickId);
157
- },
158
165
  data: function data() {
159
166
  return {
160
- show: false,
161
- value: null
167
+ currentShow: false,
168
+ currentValue: null,
169
+ valueDuringOnChange: undefined,
170
+ shouldFocusDateInput: false,
171
+ shouldFocusCalendar: false
162
172
  };
163
173
  },
164
174
  computed: {
165
175
  computedValue: function computedValue() {
166
- var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.currentvalue;
176
+ var value = this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.value !== undefined ? this.$props.value : this.currentValue;
167
177
  return value || EMPTY_SELECTIONRANGE;
178
+ },
179
+ computedShow: function computedShow() {
180
+ return this.$props.show !== undefined ? this.$props.show : this.currentShow;
168
181
  }
169
182
  },
170
183
  // @ts-ignore
@@ -183,7 +196,7 @@ var DateRangePicker = {
183
196
  var _this = this;
184
197
 
185
198
  var h = gh || createElement;
186
- var value = this.value || EMPTY_SELECTIONRANGE;
199
+ var value = this.computedValue || EMPTY_SELECTIONRANGE;
187
200
  var startDateInputId = (this.$props.startDateInputSettings || {}).id || this._startInputId;
188
201
  var endDateInputId = (this.$props.endDateInputSettings || {}).id || this._endInputId;
189
202
  var rootClassName = classNames('k-daterangepicker', {
@@ -193,9 +206,26 @@ var DateRangePicker = {
193
206
  var startMessage = localizationService.toLanguageString(start, messages[start]);
194
207
  var endMessage = localizationService.toLanguageString(end, messages[end]);
195
208
  var separatorMessage = localizationService.toLanguageString(separator, messages[separator]);
196
-
197
- var startDateInputProps = __assign(__assign({
209
+ var startDateInputRender = this.$props.startDateInput ? templateRendering.call(this, this.$props.startDateInput, getListeners.call(this)) : undefined;
210
+ var startDateInputDefaultRendering = // @ts-ignore
211
+ h(DateInput, {
212
+ ref: this.v3 ? function (el) {
213
+ _this.startDateInputRef = el;
214
+ } : 'startDateInput',
198
215
  label: startMessage,
216
+ attrs: this.v3 ? undefined : {
217
+ label: startMessage,
218
+ format: this.$props.format,
219
+ min: this.min,
220
+ max: this.max,
221
+ id: this._startInputId,
222
+ disabled: this.$props.disabled,
223
+ valid: this.$props.valid,
224
+ ariaHasPopup: true,
225
+ ariaExpanded: this.computedShow // ...this.$props.startDateInputSettings,
226
+ ,
227
+ value: value.start
228
+ },
199
229
  format: this.$props.format,
200
230
  min: this.min,
201
231
  max: this.max,
@@ -203,14 +233,41 @@ var DateRangePicker = {
203
233
  disabled: this.$props.disabled,
204
234
  valid: this.$props.valid,
205
235
  ariaHasPopup: true,
206
- ariaExpanded: this.show
207
- }, this.$props.startDateInputSettings), {
236
+ ariaExpanded: this.computedShow,
208
237
  value: value.start,
209
- onChange: this.handleStartChange
238
+ onChange: this.handleStartChange,
239
+ on: this.v3 ? undefined : {
240
+ "change": this.handleStartChange
241
+ }
210
242
  });
211
-
212
- var endDateInputProps = __assign(__assign({
243
+ var startDateInputRendering = getTemplate.call(this, {
244
+ h: h,
245
+ template: startDateInputRender,
246
+ defaultRendering: startDateInputDefaultRendering,
247
+ additionalListeners: {
248
+ change: this.handleStartChange
249
+ }
250
+ });
251
+ var endDateInputRender = this.$props.endDateInput ? templateRendering.call(this, this.$props.endDateInput, getListeners.call(this)) : undefined;
252
+ var endDateInputDefaultRendering = // @ts-ignore
253
+ h(DateInput, {
254
+ ref: this.v3 ? function (el) {
255
+ _this.endDateInputRef = el;
256
+ } : 'endDateInput',
213
257
  label: endMessage,
258
+ attrs: this.v3 ? undefined : {
259
+ label: endMessage,
260
+ format: this.$props.format,
261
+ min: this.min,
262
+ max: this.max,
263
+ id: this._endInputId,
264
+ disabled: this.$props.disabled,
265
+ valid: this.$props.valid,
266
+ ariaHasPopup: true,
267
+ ariaExpanded: this.computedShow // ...this.$props.endDateInputSettings,
268
+ ,
269
+ value: value.end
270
+ },
214
271
  format: this.$props.format,
215
272
  min: this.min,
216
273
  max: this.max,
@@ -218,142 +275,189 @@ var DateRangePicker = {
218
275
  disabled: this.$props.disabled,
219
276
  valid: this.$props.valid,
220
277
  ariaHasPopup: true,
221
- ariaExpanded: this.show
222
- }, this.$props.endDateInputSettings), {
278
+ ariaExpanded: this.computedShow,
223
279
  value: value.end,
224
- onChange: this.handleEndChange
280
+ onChange: this.handleEndChange,
281
+ on: this.v3 ? undefined : {
282
+ "change": this.handleEndChange
283
+ }
225
284
  });
226
-
227
- var popupProps = __assign(__assign({
228
- animate: this._wrapper !== null,
229
- anchor: this._wrapper,
230
- id: this._popupId,
231
- anchorAlign: {
232
- horizontal: 'left',
233
- vertical: 'bottom'
234
- },
235
- popupAlign: {
236
- horizontal: 'left',
237
- vertical: 'top'
285
+ var endDateInputRendering = getTemplate.call(this, {
286
+ h: h,
287
+ template: endDateInputRender,
288
+ defaultRendering: endDateInputDefaultRendering,
289
+ additionalListeners: {
290
+ change: this.handleEndChange
238
291
  }
239
- }, this.$props.popupSettings), {
240
- show: this.show
241
292
  });
242
-
243
- var calendarProps = __assign(__assign({
293
+ var calendarRender = this.$props.calendar ? templateRendering.call(this, this.$props.calendar, getListeners.call(this)) : undefined;
294
+ var calendarDefaultRendering = // @ts-ignore
295
+ h(Calendar, {
296
+ ref: this.v3 ? function (el) {
297
+ _this.calendarRef = el;
298
+ } : 'calendar',
299
+ onKeydown: this.handleKeyDown,
300
+ on: this.v3 ? undefined : {
301
+ "keydown": this.handleKeyDown,
302
+ "focus": this.calendarFocus,
303
+ "blur": this.calendarBlur,
304
+ "change": this.handleCalendarChange
305
+ },
306
+ onFocus: this.calendarFocus,
307
+ onBlur: this.calendarBlur,
244
308
  min: this.min,
309
+ attrs: this.v3 ? undefined : {
310
+ min: this.min,
311
+ max: this.max,
312
+ views: 2,
313
+ allowReverse: this.$props.allowReverse,
314
+ mode: 'range',
315
+ focusedDate: this.$props.focusedDate,
316
+ disabled: this.$props.disabled // ...this.$props.calendarSettings,
317
+ ,
318
+ value: value
319
+ },
245
320
  max: this.max,
321
+ views: 2,
246
322
  allowReverse: this.$props.allowReverse,
247
323
  mode: 'range',
248
324
  focusedDate: this.$props.focusedDate,
249
- disabled: this.$props.disabled
250
- }, this.$props.calendarSettings), {
325
+ disabled: this.$props.disabled,
251
326
  value: value,
252
327
  onChange: this.handleCalendarChange
253
328
  });
254
-
255
- var calendar = this.$props.calendar ? h(this.$props.calendar) : // @ts-ignore
256
- h(MultiViewCalendar // {...calendarProps}
257
- , {
258
- ref: this.setCalendarRef
329
+ var calendarRendering = getTemplate.call(this, {
330
+ h: h,
331
+ template: calendarRender,
332
+ defaultRendering: calendarDefaultRendering,
333
+ additionalListeners: {
334
+ change: this.handleCalendarChange
335
+ }
336
+ });
337
+ var _a = this.$props.popupSettings,
338
+ popupClass = _a.popupClass,
339
+ animate = _a.animate,
340
+ appendTo = _a.appendTo;
341
+ var popupRender = this.$props.popup ? templateRendering.call(this, this.$props.popup, getListeners.call(this)) : undefined;
342
+ var popupDefaultRendering = // @ts-ignore function children
343
+ h(Popup, {
344
+ show: this.computedShow,
345
+ attrs: this.v3 ? undefined : {
346
+ show: this.computedShow,
347
+ anchor: this._anchor,
348
+ id: this._popupId,
349
+ anchorAlign: {
350
+ horizontal: 'left',
351
+ vertical: 'bottom'
352
+ },
353
+ popupAlign: {
354
+ horizontal: 'left',
355
+ vertical: 'top'
356
+ },
357
+ animate: this.initialAnimation ? false : animate,
358
+ appendTo: appendTo
359
+ },
360
+ anchor: this._anchor,
361
+ id: this._popupId,
362
+ anchorAlign: {
363
+ horizontal: 'left',
364
+ vertical: 'bottom'
365
+ },
366
+ popupAlign: {
367
+ horizontal: 'left',
368
+ vertical: 'top'
369
+ },
370
+ animate: this.initialAnimation ? false : animate,
371
+ appendTo: appendTo,
372
+ "class": popupClass
373
+ }, this.v3 ? function () {
374
+ return [calendarRendering];
375
+ } : [calendarRendering]);
376
+ var popupRendering = getTemplate.call(this, {
377
+ h: h,
378
+ template: popupRender,
379
+ defaultRendering: popupDefaultRendering,
380
+ defaultSlots: calendarRendering
259
381
  });
260
382
  var reverseButton = h("span", {
261
383
  role: "button",
262
384
  attrs: this.v3 ? undefined : {
263
385
  role: "button",
264
- className: "k-select k-button k-flat",
265
- title: provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd])
386
+ title: provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd]),
387
+ "aria-controls": startDateInputId + ' ' + endDateInputId,
388
+ "aria-label": provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd])
266
389
  },
267
- className: "k-select k-button k-flat",
390
+ "class": "k-select k-button k-flat",
268
391
  title: provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd]),
269
- onMouseDown: this.handleReverseMouseDown,
392
+ onMousedown: this.handleReverseMouseDown,
270
393
  on: this.v3 ? undefined : {
271
- "mouseDown": this.handleReverseMouseDown,
394
+ "mousedown": this.handleReverseMouseDown,
272
395
  "click": this.handleReverseClick
273
396
  },
274
- onClick: this.handleReverseClick
397
+ onClick: this.handleReverseClick,
398
+ "aria-controls": startDateInputId + ' ' + endDateInputId,
399
+ "aria-label": provideLocalizationService(this).toLanguageString(swapStartEnd, messages[swapStartEnd])
275
400
  }, [h("span", {
276
401
  style: {
277
402
  transform: 'rotate(90deg)'
278
403
  },
279
- className: "k-icon k-i-arrows-swap",
280
- attrs: this.v3 ? undefined : {
281
- className: "k-icon k-i-arrows-swap"
282
- }
404
+ "class": "k-icon k-i-arrows-swap"
283
405
  })]);
284
406
  return h("span", {
285
- ref: function ref(span) {
286
- _this._element = span;
287
- },
288
- className: rootClassName,
407
+ "class": rootClassName,
408
+ style: this.$props.style,
409
+ id: this.$props.id,
289
410
  attrs: this.v3 ? undefined : {
290
- className: rootClassName,
291
411
  id: this.$props.id,
292
412
  "aria-labelledby": this.$props.ariaLabelledBy,
293
413
  "aria-describedby": this.$props.ariaDescribedBy,
294
414
  tabIndex: this.$props.tabIndex
295
415
  },
296
- style: this.$props.style,
297
- id: this.$props.id,
298
416
  "aria-labelledby": this.$props.ariaLabelledBy,
299
417
  "aria-describedby": this.$props.ariaDescribedBy,
300
418
  tabIndex: this.$props.tabIndex,
301
- onFocus: this.handleFocus,
419
+ onFocusin: this.handleFocus,
302
420
  on: this.v3 ? undefined : {
303
- "focus": this.handleFocus,
304
- "blur": this.handleBlur,
305
- "keyDown": this.handleKeyDown
421
+ "focusin": this.handleFocus,
422
+ "focusout": this.handleBlur,
423
+ "keydown": this.handleKeyDown
306
424
  },
307
- onBlur: this.handleBlur,
308
- onKeyDown: this.handleKeyDown
425
+ onFocusout: this.handleBlur,
426
+ onKeydown: this.handleKeyDown
309
427
  }, [h("span", {
310
- ref: function ref(span) {
311
- _this._wrapper = span;
312
- },
313
- className: "k-daterangepicker-wrap",
314
- attrs: this.v3 ? undefined : {
315
- className: "k-daterangepicker-wrap"
316
- },
428
+ ref: this.v3 ? function (el) {
429
+ _this.kendoAnchorRef = el;
430
+ } : this._anchor,
431
+ "class": "k-daterangepicker-wrap",
317
432
  style: WRAPPER_STYLES
318
- }, [this.$props.startDateInput ? h(this.$props.startDateInput) : // @ts-ignore
319
- h(DateInput // {...startDateInputProps}
320
- , {
321
- ref: this._startDateInput
322
- }), (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? reverseButton : separatorMessage, this.$props.endDateInput ? h(this.$props.endDateInput) : // @ts-ignore
323
- h(DateInput // {...endDateInputProps}
324
- , {
325
- ref: this._endDateInput
326
- })]), this.$props.popup ? h(this.$props.popup, [calendar]) : // @ts-ignore
327
- h(Popup // {...popupProps}
328
- , [calendar])]);
433
+ }, [startDateInputRendering, (this.$props.allowReverse || this.$props.calendarSettings && this.$props.calendarSettings.allowReverse) && this.$props.swapButton ? reverseButton : separatorMessage, endDateInputRendering]), popupRendering]);
329
434
  },
330
435
  methods: {
331
436
  focus: function focus() {
332
- if (this.startDateInput) {
333
- this.startDateInput.focus();
437
+ if (this._startDateInput) {
438
+ this._startDateInput.focus();
334
439
  }
335
440
  },
336
- setCalendarRef: function setCalendarRef(calendar) {
337
- this._calendar = calendar;
338
- },
339
441
  focusCalendarElement: function focusCalendarElement() {
340
- if (this._calendar && this._calendar.element) {
341
- this._calendar.element.focus({
442
+ var popup = document.getElementById(this._popupId);
443
+
444
+ if (this._calendar && popup) {
445
+ popup.getElementsByClassName('k-calendar-table')[0].focus({
342
446
  preventScroll: true
343
447
  });
344
448
  }
345
449
  },
346
450
  focusDateInputElement: function focusDateInputElement() {
347
- if (!document || !this.startDateInput || !this.startDateInput.element || !this.endDateInput || !this.endDateInput.element) {
451
+ if (!document || !this._startDateInput || !this._startDateInput.element() || !this._endDateInput || !this._endDateInput.element()) {
348
452
  return;
349
453
  }
350
454
 
351
- if ((this.value.start === null || this.value.end !== null) && document.activeElement !== this.endDateInput.element) {
352
- this.startDateInput.element.focus({
455
+ if ((this.computedValue.start === null || this.computedValue.end !== null) && document.activeElement !== this._endDateInput.element()) {
456
+ this._startDateInput.focus({
353
457
  preventScroll: true
354
458
  });
355
- } else if (document.activeElement !== this.startDateInput.element) {
356
- this.endDateInput.element.focus({
459
+ } else if (document.activeElement !== this._startDateInput.element()) {
460
+ this._endDateInput.focus({
357
461
  preventScroll: true
358
462
  });
359
463
  }
@@ -367,26 +471,17 @@ var DateRangePicker = {
367
471
  return nextProps.show !== undefined ? nextProps.show // @ts-ignore
368
472
  : nextState.show;
369
473
  },
370
- // nextTick(f: () => any): void {
371
- // // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
372
- // // XXX: https://github.com/facebook/react/issues/3751
373
- // // Handles multiple focus events happening at the same time.
374
- // clearTimeout(this.nextTickId);
375
- // this.nextTickId = window.setTimeout(() => f());
376
- // },
377
474
  setShow: function setShow(show) {
378
- if (this.show === show) {
475
+ if (this.currentShow === show) {
379
476
  return;
380
477
  }
381
478
 
382
- this.setState({
383
- show: show
384
- });
479
+ this.currentShow = show;
385
480
  },
386
481
  handleReverseClick: function handleReverseClick(event) {
387
482
  var value = {
388
- start: this.value.end,
389
- end: this.value.start
483
+ start: this.computedValue.end,
484
+ end: this.computedValue.start
390
485
  };
391
486
  var args = {
392
487
  nativeEvent: event.nativeEvent
@@ -397,49 +492,53 @@ var DateRangePicker = {
397
492
  event.preventDefault();
398
493
  },
399
494
  handleFocus: function handleFocus(event) {
400
- clearTimeout(this.nextTickId);
401
-
402
495
  if (!this.shouldFocusDateInput) {
403
496
  this.setShow(true);
404
497
  }
405
498
 
406
- if (this.startDateInput && this.startDateInput.element) {
407
- this.startDateInput.element.classList.add('k-state-focused');
499
+ if (this._startDateInput && this._startDateInput.element()) {
500
+ this._startDateInput.element().classList.add('k-state-focused');
408
501
  }
409
502
 
410
- if (this.endDateInput && this.endDateInput.element) {
411
- this.endDateInput.element.classList.add('k-state-focused');
503
+ if (this._endDateInput && this._endDateInput.element()) {
504
+ this._endDateInput.element().classList.add('k-state-focused');
412
505
  }
413
506
 
414
- var onFocus = this.$props.onFocus;
415
-
416
- if (onFocus) {
417
- onFocus.call(undefined, event);
418
- }
507
+ this.$emit('focus', event);
419
508
  },
420
- handleBlur: function handleBlur(event) {
509
+ calendarBlur: function calendarBlur() {
510
+ // this.$emit('blur', event);
511
+ clearTimeout(this._blurTimeout);
512
+ this.createBlurTimeout();
513
+ },
514
+ calendarFocus: function calendarFocus() {
515
+ // this.$emit('focus', event);
516
+ clearTimeout(this._blurTimeout);
517
+ },
518
+ createBlurTimeout: function createBlurTimeout() {
421
519
  var _this = this;
422
520
 
423
- this.nextTick(function () {
424
- if (_this.startDateInput && _this.startDateInput.element) {
425
- _this.startDateInput.element.classList.remove('k-state-focused');
521
+ this._blurTimeout = setTimeout(function () {
522
+ if (_this._startDateInput && _this._startDateInput.element()) {
523
+ _this._startDateInput.element().classList.remove('k-state-focused');
426
524
  }
427
525
 
428
- if (_this.endDateInput && _this.endDateInput.element) {
429
- _this.endDateInput.element.classList.remove('k-state-focused');
526
+ if (_this._endDateInput && _this._endDateInput.element()) {
527
+ _this._endDateInput.element().classList.remove('k-state-focused');
430
528
  }
431
529
 
432
- _this.setShow(false);
433
- });
434
- var onBlur = this.$props.onBlur;
435
-
436
- if (onBlur) {
437
- onBlur.call(undefined, event);
438
- }
530
+ if (_this._startDateInput && canUseDOM && document.activeElement !== _this._startDateInput._element && document.activeElement !== _this._endDateInput._element) {
531
+ _this.setShow(false);
532
+ }
533
+ }, 200);
534
+ },
535
+ handleBlur: function handleBlur(event) {
536
+ this.createBlurTimeout();
537
+ this.$emit('blur', event);
439
538
  },
440
539
  handleEndChange: function handleEndChange(event) {
441
540
  var value = {
442
- start: this.value.start,
541
+ start: this.computedValue.start,
443
542
  end: cloneDate(event.value || undefined)
444
543
  };
445
544
  this.handleChange(value, event);
@@ -447,7 +546,7 @@ var DateRangePicker = {
447
546
  handleStartChange: function handleStartChange(event) {
448
547
  var value = {
449
548
  start: cloneDate(event.value || undefined),
450
- end: this.value.end
549
+ end: this.computedValue.end
451
550
  };
452
551
  this.handleChange(value, event);
453
552
  },
@@ -458,8 +557,8 @@ var DateRangePicker = {
458
557
 
459
558
  var candidate = Array.isArray(event.value) ? event.value[0] : event.value;
460
559
  return {
461
- start: this.value.end !== null ? candidate : this.value.start,
462
- end: this.value.start !== null ? candidate : this.value.end
560
+ start: this.computedValue.end !== null ? candidate : this.computedValue.start,
561
+ end: this.computedValue.start !== null ? candidate : this.computedValue.end
463
562
  };
464
563
  },
465
564
  handleCalendarChange: function handleCalendarChange(event) {
@@ -478,28 +577,21 @@ var DateRangePicker = {
478
577
  event.preventDefault();
479
578
  this.shouldFocusCalendar = true;
480
579
  this.setShow(true);
481
- } else if (keyCode === Keys.tab && this.show && this._calendar && this._calendar.element && this.endDateInput && this.endDateInput.element && document && document.activeElement === this.endDateInput.element) {
580
+ } else if (keyCode === Keys.tab && this.computedShow && this._calendar && this._calendar.$el && this._endDateInput && this._endDateInput.element() && document && document.activeElement === this._endDateInput.element()) {
482
581
  event.preventDefault();
483
582
  this.focusCalendarElement();
484
583
  }
485
584
  },
486
585
  handleChange: function handleChange(value, event) {
487
- this.setState({
488
- value: value
489
- });
586
+ this.currentValue = value;
490
587
  this.valueDuringOnChange = value;
491
- var onChange = this.$props.onChange;
492
-
493
- if (onChange) {
494
- var args = {
495
- nativeEvent: event.event,
496
- value: this.value,
497
- show: this.show,
498
- target: this
499
- };
500
- onChange.call(undefined, args);
501
- }
502
-
588
+ var args = {
589
+ event: event.event,
590
+ value: this.computedValue,
591
+ show: this.computedShow,
592
+ target: this
593
+ };
594
+ this.$emit('change', args);
503
595
  this.valueDuringOnChange = undefined;
504
596
  }
505
597
  }