@progress/kendo-vue-dateinputs 2.6.5-dev.202112060756 → 2.7.0-dev.202112070927

package/dist/es/datepicker/models/DatePickerSettings.d.ts

@@ -30,10 +30,6 @@ export interface DatePickerSettings {
      * ([see example]({% slug custom_rendering_datepicker_native %}#toc-customizing-the-dateinput)).
      */
     dateInput?: any;
-    /**
-     * Sets the `className` of the DatePicker.
-     */
-    className?: string;
     /**
      * Sets the default state of the DatePicker upon render ([see example]({% slug default_value_datepicker_native %})).
      */
@@ -73,11 +69,11 @@ export interface DatePickerSettings {
     /**
      * Fires each time any of the DatePicker elements gets blurred.
      */
-    onBlur?: (event: any) => void;
+    blur?: (event: any) => void;
     /**
      * Fires each time the user focuses any of the DatePicker elements.
      */
-    onFocus?: (event: any) => void;
+    focus?: (event: any) => void;
     /**
      * Configures the popup options of the DatePicker.
      *

package/dist/es/daterangepicker/DateRangePicker.d.ts

@@ -10,16 +10,17 @@ import { DateRangePickerSettings } from './models';
  * @hidden
  */
 export interface ReverseClickEvent {
-    nativeEvent?: any;
+    event?: any;
 }
 /**
  * The arguments for the `onChange` event of the DateRangePicker.
  */
 export interface DateRangePickerChangeEvent {
-    nativeEvent?: any;
+    event?: any;
     value: SelectionRange;
     show?: boolean;
     target: any;
+    component?: any;
 }
 /**
  * Represents the props of the [Kendo UI for Vue DateRangePicker component]({% slug overview_daterangepicker %}).
@@ -36,6 +37,10 @@ export interface DateRangePickerProps extends DateRangePickerSettings {
      * Sets the default value of the DateRangePicker ([see example]({% slug default_value_daterangepicker %})).
      */
     defaultValue?: SelectionRange;
+    /**
+     * @hidden
+     */
+    modelValue?: Date;
     /**
      * Fires each time the user selects a part of a date range ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-value)).
      */
@@ -51,8 +56,11 @@ export interface DateRangePickerProps extends DateRangePickerSettings {
  * @hidden
  */
 export interface DateRangePickerData {
-    show: boolean;
-    value: SelectionRange;
+    currentShow: boolean;
+    currentValue: SelectionRange;
+    valueDuringOnChange: SelectionRange | undefined;
+    shouldFocusDateInput: boolean;
+    shouldFocusCalendar: boolean;
 }
 /**
  * @hidden
@@ -63,7 +71,6 @@ export interface DateRangePickerState {
     _calendar: any;
     _startDateInput: any;
     _endDateInput: any;
-    valueDuringOnChange?: SelectionRange | null;
     showDuringOnChange?: boolean;
     _popupId: string;
     _startInputId: string;
@@ -78,6 +85,7 @@ export interface DateRangePickerState {
  */
 export interface DateRangePickerComputed {
     [key: string]: any;
+    rootClassName: object;
     computedValue: SelectionRange;
     computedShow: boolean;
 }

package/dist/es/daterangepicker/DateRangePicker.js

@@ -22,7 +22,7 @@ var ref = allVue.ref;
 var inject = allVue.inject;
 import { Popup } from '@progress/kendo-vue-popup';
 import { cloneDate } from '@progress/kendo-date-math';
-import { guid, classNames, Keys, canUseDOM } from '@progress/kendo-vue-common';
+import { guid, Keys, canUseDOM } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { validatePackage, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
@@ -41,9 +41,14 @@ var DateRangePicker = {
   emits: {
     blur: null,
     change: null,
+    'changemodel': null,
+    'update:modelValue': null,
     focus: null,
     keydown: null
   },
+  model: {
+    event: 'changemodel'
+  },
   props: {
     allowReverse: {
       type: Boolean,
@@ -60,6 +65,10 @@ var DateRangePicker = {
         return EMPTY_SELECTIONRANGE;
       }
     },
+    modelValue: {
+      type: Object,
+      default: undefined
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -169,8 +178,14 @@ var DateRangePicker = {
     };
   },
   computed: {
+    rootClassName: function rootClassName() {
+      return {
+        'k-daterangepicker': true,
+        'k-state-disabled': this.$props.disabled
+      };
+    },
     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.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
       return value || EMPTY_SELECTIONRANGE;
     },
     computedShow: function computedShow() {
@@ -196,9 +211,6 @@ var DateRangePicker = {
     var value = this.computedValue || EMPTY_SELECTIONRANGE;
     var startDateInputId = (this.$props.startDateInputSettings || {}).id || this._startInputId;
     var endDateInputId = (this.$props.endDateInputSettings || {}).id || this._endInputId;
-    var rootClassName = classNames('k-daterangepicker', {
-      'k-state-disabled': this.$props.disabled
-    }, this.$props.className);
     var localizationService = provideLocalizationService(this);
     var startMessage = localizationService.toLanguageString(start, messages[start]);
     var endMessage = localizationService.toLanguageString(end, messages[end]);
@@ -216,7 +228,7 @@ var DateRangePicker = {
       ariaHasPopup: true,
       ariaExpanded: this.computedShow,
       value: value.start
-    }, this.$props.endDateInputSettings);
+    }, this.$props.startDateInputSettings);
 
     var startDateInputDefaultRendering = h(DateInput, __assign(__assign({
       ref: this.v3 ? function (el) {
@@ -369,7 +381,7 @@ var DateRangePicker = {
       "class": "k-icon k-i-arrows-swap"
     })]);
     return h("span", {
-      "class": rootClassName,
+      "class": this.rootClassName,
       style: this.$props.style,
       id: this.$props.id,
       attrs: this.v3 ? undefined : {
@@ -433,13 +445,11 @@ var DateRangePicker = {
       }
     },
     calculateValue: function calculateValue(props, state) {
-      var value = props.value !== undefined ? props.value // @ts-ignore
-      : state.value;
+      var value = props.value !== undefined ? props.value : state.currentValue;
       return value || EMPTY_SELECTIONRANGE;
     },
     calculateShow: function calculateShow(nextProps, nextState) {
-      return nextProps.show !== undefined ? nextProps.show // @ts-ignore
-      : nextState.show;
+      return nextProps.show !== undefined ? nextProps.show : nextState.currentShow;
     },
     setShow: function setShow(show) {
       if (this.currentShow === show) {
@@ -454,7 +464,7 @@ var DateRangePicker = {
         end: this.computedValue.start
       };
       var args = {
-        nativeEvent: event.nativeEvent
+        event: event.event
       };
       this.handleChange(value, args);
     },
@@ -579,9 +589,16 @@ var DateRangePicker = {
         event: event.event,
         value: this.computedValue,
         show: this.computedShow,
-        target: this
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: this.computedValue,
+          show: this.computedShow
+        }
       };
       this.$emit('change', args);
+      this.$emit('changemodel', this.computedValue);
+      this.$emit('update:modelValue', this.computedValue);
       this.valueDuringOnChange = undefined;
     }
   }

package/dist/es/daterangepicker/models/DateRangePickerSettings.d.ts

@@ -35,10 +35,6 @@ export interface DateRangePickerSettings {
      * Represents the additional props that can be passed to the [MultiViewCalendar]({% slug overview_multiviewcalendar %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-multiviewcalendar)).
      */
     calendarSettings?: DateRangePickerCalendarSettings;
-    /**
-     * Sets the `className` of the DateRangePicker.
-     */
-    className?: string;
     /**
      * Sets the default state of the DateRangePicker upon render ([see example]({% slug default_value_daterangepicker %})).
      */
@@ -85,11 +81,11 @@ export interface DateRangePickerSettings {
     /**
      * Fires each time any of the DateRangePicker elements gets blurred.
      */
-    onBlur?: (event: any) => void;
+    blur?: (event: any) => void;
     /**
      * Fires each time the user focuses any of the DateRangePicker elements.
      */
-    onFocus?: (event: any) => void;
+    focus?: (event: any) => void;
     /**
      * Represents the additional props that will be passed to the [Popup]({% slug overview_popup %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-popup)).
      */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dateinputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1638776971,
+    publishDate: 1638868807,
     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/dist/npm/datepicker/models/DatePickerSettings.d.ts

@@ -30,10 +30,6 @@ export interface DatePickerSettings {
      * ([see example]({% slug custom_rendering_datepicker_native %}#toc-customizing-the-dateinput)).
      */
     dateInput?: any;
-    /**
-     * Sets the `className` of the DatePicker.
-     */
-    className?: string;
     /**
      * Sets the default state of the DatePicker upon render ([see example]({% slug default_value_datepicker_native %})).
      */
@@ -73,11 +69,11 @@ export interface DatePickerSettings {
     /**
      * Fires each time any of the DatePicker elements gets blurred.
      */
-    onBlur?: (event: any) => void;
+    blur?: (event: any) => void;
     /**
      * Fires each time the user focuses any of the DatePicker elements.
      */
-    onFocus?: (event: any) => void;
+    focus?: (event: any) => void;
     /**
      * Configures the popup options of the DatePicker.
      *

package/dist/npm/daterangepicker/DateRangePicker.d.ts

@@ -10,16 +10,17 @@ import { DateRangePickerSettings } from './models';
  * @hidden
  */
 export interface ReverseClickEvent {
-    nativeEvent?: any;
+    event?: any;
 }
 /**
  * The arguments for the `onChange` event of the DateRangePicker.
  */
 export interface DateRangePickerChangeEvent {
-    nativeEvent?: any;
+    event?: any;
     value: SelectionRange;
     show?: boolean;
     target: any;
+    component?: any;
 }
 /**
  * Represents the props of the [Kendo UI for Vue DateRangePicker component]({% slug overview_daterangepicker %}).
@@ -36,6 +37,10 @@ export interface DateRangePickerProps extends DateRangePickerSettings {
      * Sets the default value of the DateRangePicker ([see example]({% slug default_value_daterangepicker %})).
      */
     defaultValue?: SelectionRange;
+    /**
+     * @hidden
+     */
+    modelValue?: Date;
     /**
      * Fires each time the user selects a part of a date range ([see example]({% slug controlled_daterangepicker %}#toc-controlling-the-value)).
      */
@@ -51,8 +56,11 @@ export interface DateRangePickerProps extends DateRangePickerSettings {
  * @hidden
  */
 export interface DateRangePickerData {
-    show: boolean;
-    value: SelectionRange;
+    currentShow: boolean;
+    currentValue: SelectionRange;
+    valueDuringOnChange: SelectionRange | undefined;
+    shouldFocusDateInput: boolean;
+    shouldFocusCalendar: boolean;
 }
 /**
  * @hidden
@@ -63,7 +71,6 @@ export interface DateRangePickerState {
     _calendar: any;
     _startDateInput: any;
     _endDateInput: any;
-    valueDuringOnChange?: SelectionRange | null;
     showDuringOnChange?: boolean;
     _popupId: string;
     _startInputId: string;
@@ -78,6 +85,7 @@ export interface DateRangePickerState {
  */
 export interface DateRangePickerComputed {
     [key: string]: any;
+    rootClassName: object;
     computedValue: SelectionRange;
     computedShow: boolean;
 }

package/dist/npm/daterangepicker/DateRangePicker.js

@@ -60,9 +60,14 @@ var DateRangePicker = {
   emits: {
     blur: null,
     change: null,
+    'changemodel': null,
+    'update:modelValue': null,
     focus: null,
     keydown: null
   },
+  model: {
+    event: 'changemodel'
+  },
   props: {
     allowReverse: {
       type: Boolean,
@@ -79,6 +84,10 @@ var DateRangePicker = {
         return models_1.EMPTY_SELECTIONRANGE;
       }
     },
+    modelValue: {
+      type: Object,
+      default: undefined
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -188,8 +197,14 @@ var DateRangePicker = {
     };
   },
   computed: {
+    rootClassName: function rootClassName() {
+      return {
+        'k-daterangepicker': true,
+        'k-state-disabled': this.$props.disabled
+      };
+    },
     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.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
       return value || models_1.EMPTY_SELECTIONRANGE;
     },
     computedShow: function computedShow() {
@@ -215,9 +230,6 @@ var DateRangePicker = {
     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', {
-      'k-state-disabled': this.$props.disabled
-    }, this.$props.className);
     var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
     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]);
@@ -235,7 +247,7 @@ var DateRangePicker = {
       ariaHasPopup: true,
       ariaExpanded: this.computedShow,
       value: value.start
-    }, this.$props.endDateInputSettings);
+    }, this.$props.startDateInputSettings);
 
     var startDateInputDefaultRendering = h(DateInput_1.DateInput, __assign(__assign({
       ref: this.v3 ? function (el) {
@@ -388,7 +400,7 @@ var DateRangePicker = {
       "class": "k-icon k-i-arrows-swap"
     })]);
     return h("span", {
-      "class": rootClassName,
+      "class": this.rootClassName,
       style: this.$props.style,
       id: this.$props.id,
       attrs: this.v3 ? undefined : {
@@ -452,13 +464,11 @@ var DateRangePicker = {
       }
     },
     calculateValue: function calculateValue(props, state) {
-      var value = props.value !== undefined ? props.value // @ts-ignore
-      : state.value;
+      var value = props.value !== undefined ? props.value : state.currentValue;
       return value || models_1.EMPTY_SELECTIONRANGE;
     },
     calculateShow: function calculateShow(nextProps, nextState) {
-      return nextProps.show !== undefined ? nextProps.show // @ts-ignore
-      : nextState.show;
+      return nextProps.show !== undefined ? nextProps.show : nextState.currentShow;
     },
     setShow: function setShow(show) {
       if (this.currentShow === show) {
@@ -473,7 +483,7 @@ var DateRangePicker = {
         end: this.computedValue.start
       };
       var args = {
-        nativeEvent: event.nativeEvent
+        event: event.event
       };
       this.handleChange(value, args);
     },
@@ -598,9 +608,16 @@ var DateRangePicker = {
         event: event.event,
         value: this.computedValue,
         show: this.computedShow,
-        target: this
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: this.computedValue,
+          show: this.computedShow
+        }
       };
       this.$emit('change', args);
+      this.$emit('changemodel', this.computedValue);
+      this.$emit('update:modelValue', this.computedValue);
       this.valueDuringOnChange = undefined;
     }
   }

package/dist/npm/daterangepicker/models/DateRangePickerSettings.d.ts

@@ -35,10 +35,6 @@ export interface DateRangePickerSettings {
      * Represents the additional props that can be passed to the [MultiViewCalendar]({% slug overview_multiviewcalendar %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-multiviewcalendar)).
      */
     calendarSettings?: DateRangePickerCalendarSettings;
-    /**
-     * Sets the `className` of the DateRangePicker.
-     */
-    className?: string;
     /**
      * Sets the default state of the DateRangePicker upon render ([see example]({% slug default_value_daterangepicker %})).
      */
@@ -85,11 +81,11 @@ export interface DateRangePickerSettings {
     /**
      * Fires each time any of the DateRangePicker elements gets blurred.
      */
-    onBlur?: (event: any) => void;
+    blur?: (event: any) => void;
     /**
      * Fires each time the user focuses any of the DateRangePicker elements.
      */
-    onFocus?: (event: any) => void;
+    focus?: (event: any) => void;
     /**
      * Represents the additional props that will be passed to the [Popup]({% slug overview_popup %}) inside the DateRangePicker ([see example]({% slug child_settings_daterangepicker %}#toc-configuring-the-popup)).
      */

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: 1638776971,
+    publishDate: 1638868807,
     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.5-dev.202112060756",
+  "version": "2.7.0-dev.202112070927",
   "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.5-dev.202112060756",
-    "@progress/kendo-vue-common": "2.6.5-dev.202112060756",
-    "@progress/kendo-vue-labels": "2.6.5-dev.202112060756",
-    "@progress/kendo-vue-popup": "2.6.5-dev.202112060756"
+    "@progress/kendo-vue-buttons": "2.7.0-dev.202112070927",
+    "@progress/kendo-vue-common": "2.7.0-dev.202112070927",
+    "@progress/kendo-vue-labels": "2.7.0-dev.202112070927",
+    "@progress/kendo-vue-popup": "2.7.0-dev.202112070927"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.4",
     "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-dropdowns": "2.6.5-dev.202112060756",
-    "@progress/kendo-vue-intl": "2.6.5-dev.202112060756"
+    "@progress/kendo-vue-dropdowns": "2.7.0-dev.202112070927",
+    "@progress/kendo-vue-intl": "2.7.0-dev.202112070927"
   },
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",