@progress/kendo-vue-dateinputs 2.6.4 → 2.6.5-dev.202112031051

package/dist/npm/daterangepicker/DateRangePicker.js

@@ -1,5 +1,21 @@
 "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
 });
@@ -44,7 +60,8 @@ var DateRangePicker = {
   emits: {
     blur: null,
     change: null,
-    focus: null
+    focus: null,
+    keydown: null
   },
   props: {
     allowReverse: {
@@ -66,6 +83,8 @@ var DateRangePicker = {
       type: Boolean,
       default: false
     },
+    popup: [String, Object, Function],
+    calendar: [String, Object, Function],
     startDateInput: [String, Object, Function],
     endDateInput: [String, Object, Function],
     endDateInputSettings: Object,
@@ -76,26 +95,6 @@ var DateRangePicker = {
         return 'd';
       }
     },
-    // PropTypes.oneOfType([
-    //     PropTypes.string,
-    //     PropTypes.shape({
-    //         skeleton: PropTypes.string,
-    //         pattern: PropTypes.string,
-    //         date: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
-    //         time: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
-    //         datetime: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
-    //         era: PropTypes.oneOf(['narrow', 'short', 'long']),
-    //         year: PropTypes.oneOf(['numeric', '2-digit']),
-    //         month: PropTypes.oneOf(['numeric', '2-digit', 'narrow', 'short', 'long']),
-    //         day: PropTypes.oneOf(['numeric', '2-digit']),
-    //         weekday: PropTypes.oneOf(['narrow', 'short', 'long']),
-    //         hour: PropTypes.oneOf(['numeric', '2-digit']),
-    //         hour12: Boolean,
-    //         minute: PropTypes.oneOf(['numeric', '2-digit']),
-    //         second: PropTypes.oneOf(['numeric', '2-digit']),
-    //         timeZoneName: PropTypes.oneOf(['short', 'long'])
-    //     })
-    // ]),
     id: String,
     ariaLabelledBy: String,
     ariaDescribedBy: String,
@@ -132,21 +131,19 @@ var DateRangePicker = {
       default: function _default() {
         return undefined;
       }
-    } // PropTypes.shape({ start: Date, end: Date })
-
+    }
   },
   created: function created() {
     this._element = null;
     this._wrapper = null;
     this._calendar = null;
     this._startDateInput = null;
-    this._endDateInput = null; // this.valueDuringOnChange = undefined;
-    // this.showDuringOnChange?: boolean;
-
+    this._endDateInput = null;
     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._calendarId = kendo_vue_common_1.guid();
     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;
@@ -166,9 +163,9 @@ var DateRangePicker = {
     }
   },
   updated: function updated() {
-    if (!this._calendar) {
-      this._calendar = this.v3 ? this.calendarRef : this.$refs.calendar;
-    }
+    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.shouldFocusCalendar) {
       this.focusCalendarElement();
@@ -226,25 +223,9 @@ var DateRangePicker = {
     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 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',
+
+    var startSettings = __assign({
       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,
@@ -253,12 +234,20 @@ var DateRangePicker = {
       valid: this.$props.valid,
       ariaHasPopup: true,
       ariaExpanded: this.computedShow,
-      value: value.start,
-      onChange: this.handleStartChange,
+      value: value.start
+    }, this.$props.endDateInputSettings);
+
+    var startDateInputDefaultRendering = h(DateInput_1.DateInput, __assign(__assign({
+      ref: this.v3 ? function (el) {
+        _this.startDateInputRef = el;
+      } : 'startDateInput',
+      attrs: this.v3 ? undefined : startSettings
+    }, startSettings), {
+      onChange: this.handleEndChange,
       on: this.v3 ? undefined : {
-        "change": this.handleStartChange
+        'change': this.handleEndChange
       }
-    });
+    }));
     var startDateInputRendering = kendo_vue_common_2.getTemplate.call(this, {
       h: h,
       template: startDateInputRender,
@@ -268,25 +257,9 @@ var DateRangePicker = {
       }
     });
     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',
+
+    var endSettings = __assign({
       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,
@@ -295,12 +268,20 @@ var DateRangePicker = {
       valid: this.$props.valid,
       ariaHasPopup: true,
       ariaExpanded: this.computedShow,
-      value: value.end,
+      value: value.end
+    }, this.$props.endDateInputSettings);
+
+    var endDateInputDefaultRendering = h(DateInput_1.DateInput, __assign(__assign({
+      ref: this.v3 ? function (el) {
+        _this.endDateInputRef = el;
+      } : 'endDateInput',
+      attrs: this.v3 ? undefined : endSettings
+    }, endSettings), {
       onChange: this.handleEndChange,
       on: this.v3 ? undefined : {
-        "change": this.handleEndChange
+        'change': this.handleEndChange
       }
-    });
+    }));
     var endDateInputRendering = kendo_vue_common_2.getTemplate.call(this, {
       h: h,
       template: endDateInputRender,
@@ -310,72 +291,53 @@ var DateRangePicker = {
       }
     });
     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, {
+
+    var calendarSettings = __assign({
+      id: this._calendarId,
+      min: this.min,
+      max: this.max,
+      views: 2,
+      allowReverse: this.$props.allowReverse,
+      mode: 'range',
+      focusedDate: this.$props.focusedDate,
+      disabled: this.$props.disabled,
+      value: value
+    }, this.$props.calendarSettings);
+
+    var calendarDefaultRendering = h(Calendar_1.Calendar, __assign({
       ref: this.v3 ? function (el) {
         _this.calendarRef = el;
       } : 'calendar',
+      attrs: this.v3 ? undefined : calendarSettings,
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {
-        "keydown": this.handleKeyDown,
-        "focus": this.calendarFocus,
-        "blur": this.calendarBlur,
-        "change": this.handleCalendarChange
+        '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,
-      value: value,
       onChange: this.handleCalendarChange
-    });
+    }, calendarSettings));
     var calendarRendering = kendo_vue_common_2.getTemplate.call(this, {
       h: h,
       template: calendarRender,
       defaultRendering: calendarDefaultRendering,
       additionalListeners: {
-        change: this.handleCalendarChange
+        change: this.handleCalendarChange,
+        keydown: this.handleKeyDown,
+        focus: this.calendarFocus,
+        blur: this.calendarBlur
       }
     });
     var _a = this.$props.popupSettings,
         popupClass = _a.popupClass,
-        animate = _a.animate,
-        appendTo = _a.appendTo;
+        animate = _a.animate;
     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, {
+
+    var popupSettings = __assign({
       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: {
@@ -386,10 +348,13 @@ var DateRangePicker = {
         horizontal: 'left',
         vertical: 'top'
       },
-      animate: this.initialAnimation ? false : animate,
-      appendTo: appendTo,
-      "class": popupClass
-    }, this.v3 ? function () {
+      animate: this.initialAnimation ? false : animate
+    }, this.$props.popupSettings);
+
+    var popupDefaultRendering = h(kendo_vue_popup_1.Popup, __assign({
+      attrs: this.v3 ? undefined : popupSettings,
+      'class': popupClass
+    }, popupSettings), this.v3 ? function () {
       return [calendarRendering];
     } : [calendarRendering]);
     var popupRendering = kendo_vue_common_2.getTemplate.call(this, {
@@ -453,30 +418,35 @@ var DateRangePicker = {
   },
   methods: {
     focus: function focus() {
-      if (this._startDateInput) {
-        this._startDateInput.focus();
+      var startInput = this.getStartInput();
+
+      if (startInput) {
+        startInput.focus();
       }
     },
     focusCalendarElement: function focusCalendarElement() {
-      var popup = document.getElementById(this._popupId);
+      var calendar = this.getCalendar();
 
-      if (this._calendar && popup) {
-        popup.getElementsByClassName('k-calendar-table')[0].focus({
+      if (calendar) {
+        calendar.focus({
           preventScroll: true
         });
       }
     },
     focusDateInputElement: function focusDateInputElement() {
-      if (!document || !this._startDateInput || !this._startDateInput.element() || !this._endDateInput || !this._endDateInput.element()) {
+      var startInput = this.getStartInput();
+      var endInput = this.getEndInput();
+
+      if (!document || !startInput || !endInput) {
         return;
       }
 
-      if ((this.computedValue.start === null || this.computedValue.end !== null) && document.activeElement !== this._endDateInput.element()) {
-        this._startDateInput.focus({
+      if ((this.computedValue.start === null || this.computedValue.end !== null) && document.activeElement !== endInput) {
+        startInput.focus({
           preventScroll: true
         });
-      } else if (document.activeElement !== this._startDateInput.element()) {
-        this._endDateInput.focus({
+      } else if (document.activeElement !== startInput) {
+        endInput.focus({
           preventScroll: true
         });
       }
@@ -511,16 +481,19 @@ var DateRangePicker = {
       event.preventDefault();
     },
     handleFocus: function handleFocus(event) {
+      var startInput = this.getStartInput();
+      var endInput = this.getEndInput();
+
       if (!this.shouldFocusDateInput) {
         this.setShow(true);
       }
 
-      if (this._startDateInput && this._startDateInput.element()) {
-        this._startDateInput.element().classList.add('k-state-focused');
+      if (startInput) {
+        startInput.classList.add('k-state-focused');
       }
 
-      if (this._endDateInput && this._endDateInput.element()) {
-        this._endDateInput.element().classList.add('k-state-focused');
+      if (endInput) {
+        endInput.classList.add('k-state-focused');
       }
 
       this.$emit('focus', event);
@@ -538,19 +511,32 @@ var DateRangePicker = {
       var _this = this;
 
       this._blurTimeout = setTimeout(function () {
-        if (_this._startDateInput && _this._startDateInput.element()) {
-          _this._startDateInput.element().classList.remove('k-state-focused');
+        var startInput = _this.getStartInput();
+
+        var endInput = _this.getEndInput();
+
+        if (startInput) {
+          startInput.classList.remove('k-state-focused');
         }
 
-        if (_this._endDateInput && _this._endDateInput.element()) {
-          _this._endDateInput.element().classList.remove('k-state-focused');
+        if (endInput) {
+          endInput.classList.remove('k-state-focused');
         }
 
-        if (_this._startDateInput && kendo_vue_common_1.canUseDOM && document.activeElement !== _this._startDateInput._element && document.activeElement !== _this._endDateInput._element) {
+        if (startInput && endInput && kendo_vue_common_1.canUseDOM && startInput && document.activeElement !== endInput) {
           _this.setShow(false);
         }
       }, 200);
     },
+    getStartInput: function getStartInput() {
+      return this._startDateInput && this._startDateInput.element ? this._startDateInput.element() : document.getElementById(this._startInputId);
+    },
+    getEndInput: function getEndInput() {
+      return this._endDateInput && this._endDateInput.element ? this._endDateInput.element() : document.getElementById(this._endInputId);
+    },
+    getCalendar: function getCalendar() {
+      return this._calendar && this._calendar.element ? this._calendar : document.getElementById(this._calendarId);
+    },
     handleBlur: function handleBlur(event) {
       this.createBlurTimeout();
       this.$emit('blur', event);
@@ -587,6 +573,8 @@ var DateRangePicker = {
     handleKeyDown: function handleKeyDown(event) {
       var keyCode = event.keyCode,
           altKey = event.altKey;
+      var endInput = this.getEndInput();
+      var calendar = this.getCalendar();
 
       if (keyCode === kendo_vue_common_1.Keys.esc) {
         event.preventDefault();
@@ -596,10 +584,12 @@ var DateRangePicker = {
         event.preventDefault();
         this.shouldFocusCalendar = true;
         this.setShow(true);
-      } 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()) {
+      } else if (keyCode === kendo_vue_common_1.Keys.tab && this.computedShow && calendar && endInput && document && document.activeElement === endInput) {
         event.preventDefault();
         this.focusCalendarElement();
       }
+
+      this.$emit('keydown', event);
     },
     handleChange: function handleChange(value, event) {
       this.currentValue = value;

package/dist/npm/datetimepicker/DateTimePicker.js

@@ -388,7 +388,8 @@ var DateTimePicker = {
         maxTime: maxTime,
         focusedDate: focusedDate,
         format: format,
-        calendar: calendar
+        calendar: calendar,
+        steps: steps
       },
       value: this.computedValue,
       onChange: this.handleValueChange,
@@ -409,6 +410,7 @@ var DateTimePicker = {
       focusedDate: focusedDate,
       format: format,
       calendar: calendar,
+      steps: steps,
       onFocus: this.timeSelectorFocus,
       onBlur: this.timeSelectorBlur,
       onKeydown: this.handleKeyDown

package/dist/npm/datetimepicker/DateTimeSelector.d.ts

@@ -4,6 +4,7 @@ declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
+import { TimePickerIncrementalSteps } from '../timepicker/models';
 import { DateFormatOptions } from '@progress/kendo-vue-intl';
 import { CalendarChangeEvent } from '../main';
 /**
@@ -36,6 +37,7 @@ export interface DateTimeSelectorProps {
     minTime?: Date;
     maxTime?: Date;
     weekNumber?: boolean;
+    steps?: TimePickerIncrementalSteps;
     focusedDate?: Date;
     format?: string | DateFormatOptions;
     calendar?: any;

package/dist/npm/datetimepicker/DateTimeSelector.js

@@ -69,6 +69,12 @@ var DateTimeSelector = {
       type: Boolean,
       default: false
     },
+    steps: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
     focusedDate: Date,
     format: String,
     calendar: Object
@@ -144,7 +150,8 @@ var DateTimeSelector = {
         max = _a.max,
         weekNumber = _a.weekNumber,
         focusedDate = _a.focusedDate,
-        format = _a.format;
+        format = _a.format,
+        steps = _a.steps;
     var rootClassName = kendo_vue_common_1.classNames({
       'k-date-tab': this.currentTab === 'date',
       'k-time-tab': this.currentTab === 'time',
@@ -287,13 +294,15 @@ var DateTimeSelector = {
         min: this.computedMinTime || utils_1.MIN_TIME,
         max: this.computedMaxTime || utils_1.MAX_TIME,
         value: this.timeValue,
-        format: format
+        format: format,
+        steps: steps
       },
       ref: 'timePart',
       min: this.computedMinTime || utils_1.MIN_TIME,
       max: this.computedMaxTime || utils_1.MAX_TIME,
       value: this.timeValue,
       format: format,
+      steps: steps,
       onChange: this.handleTimeListContainerChange,
       onMount: this.handleTimePartMount,
       onFocus: this.handleFocus,

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-dateinputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1638285376,
+    publishDate: 1638528278,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-dateinputs",
   "description": "Kendo UI for Vue Date Inputs package",
-  "version": "2.6.4",
+  "version": "2.6.5-dev.202112031051",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -46,16 +46,16 @@
   },
   "dependencies": {
     "@progress/kendo-date-math": "1.5.1",
-    "@progress/kendo-vue-buttons": "2.6.4",
-    "@progress/kendo-vue-common": "2.6.4",
-    "@progress/kendo-vue-labels": "2.6.4",
-    "@progress/kendo-vue-popup": "2.6.4"
+    "@progress/kendo-vue-buttons": "2.6.5-dev.202112031051",
+    "@progress/kendo-vue-common": "2.6.5-dev.202112031051",
+    "@progress/kendo-vue-labels": "2.6.5-dev.202112031051",
+    "@progress/kendo-vue-popup": "2.6.5-dev.202112031051"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.4",
     "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-dropdowns": "2.6.4",
-    "@progress/kendo-vue-intl": "2.6.4"
+    "@progress/kendo-vue-dropdowns": "2.6.5-dev.202112031051",
+    "@progress/kendo-vue-intl": "2.6.5-dev.202112031051"
   },
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",