@progress/kendo-vue-dateinputs 2.5.0 → 2.5.1

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

@@ -51,6 +51,7 @@ export interface DateTimePickerData {
     valueDuringOnChange?: Date | null;
     showDuringOnChange?: boolean;
     shouldFocusDateInput: boolean;
+    isFocused: boolean;
 }
 /**
  * @hidden
@@ -59,6 +60,7 @@ export interface DateTimePickerState {
     _popupId: string;
     _wrapper: any;
     _dateInput: any;
+    dateInputRef: any;
     _dateTimeSelector: any;
     _anchor: any;
     _oldShow: boolean;
@@ -70,6 +72,7 @@ export interface DateTimePickerState {
  * @hidden
  */
 export interface DateTimePickerComputed {
+    [key: string]: any;
     computedValue: Date | null;
     computedShow: boolean;
 }
@@ -77,6 +80,7 @@ export interface DateTimePickerComputed {
  * @hidden
  */
 export interface DateTimePickerMethods {
+    [key: string]: any;
     validity: () => FormComponentValidity;
     focus: () => void;
     setShow: (show: boolean) => void;
@@ -91,6 +95,7 @@ export interface DateTimePickerMethods {
     timeSelectorBlur: (event: any) => void;
     timeSelectorFocus: () => void;
     createBlurTimeout: () => void;
+    getDateInputText: () => string;
 }
 /**
  * @hidden

package/dist/npm/datetimepicker/DateTimePicker.js

@@ -12,6 +12,8 @@ var gh = allVue.h;
 var ref = allVue.ref;
 var inject = allVue.inject;
 
+var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
+
 var kendo_vue_popup_1 = require("@progress/kendo-vue-popup");
 
 var kendo_date_math_1 = require("@progress/kendo-date-math");
@@ -39,6 +41,15 @@ var utils_3 = require("../dateinput/utils"); // tslint:enable:max-line-length
 
 var DateTimePicker = {
   name: 'KendoDateTimePicker',
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    'iconclick': null,
+    'change': null,
+    'focus': null,
+    'blur': null
+  },
   props: {
     modelValue: {
       type: Date,
@@ -115,6 +126,7 @@ var DateTimePicker = {
       }
     },
     name: String,
+    label: String,
     placeholder: String,
     popupSettings: {
       type: Object,
@@ -191,7 +203,8 @@ var DateTimePicker = {
       currentShow: false,
       valueDuringOnChange: undefined,
       showDuringOnChange: undefined,
-      shouldFocusDateInput: false
+      shouldFocusDateInput: false,
+      isFocused: false
     };
   },
   computed: {
@@ -220,6 +233,7 @@ var DateTimePicker = {
     var dateInputElement = this.dateInputElement();
     this._dateTimeSelector = this.$refs.dateTimeSelector;
     this._wrapper = this.$refs[this._anchor];
+    this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
 
     if (dateInputElement) {
       dateInputElement.setAttribute('aria-haspopup', 'true');
@@ -297,13 +311,15 @@ var DateTimePicker = {
       'k-state-invalid': !isValid
     });
     var wrapperClassNames = kendo_vue_common_1.classNames('k-picker-wrap', {
-      'k-state-default': !disabled,
-      'k-state-disabled': disabled
+      'k-state-disabled': disabled,
+      'k-state-focused': this.isFocused
     });
     var dateInput = this.$props.dateInput ? kendo_vue_common_1.templateRendering.call(this, this.$props.dateInput, kendo_vue_common_1.getListeners.call(this)) : undefined;
     var dateInputDefaultRendering = // @ts-ignore  function children
     h(DateInput_1.DateInput, {
-      ref: 'dateInput',
+      ref: this.v3 ? function (el) {
+        _this.dateInputRef = el;
+      } : 'dateInput',
       placeholder: placeholder,
       attrs: this.v3 ? undefined : {
         placeholder: placeholder,
@@ -439,7 +455,7 @@ var DateTimePicker = {
       defaultRendering: popupDefaultRendering,
       defaultSlots: dataTimeSelector
     });
-    return h("div", {
+    var dateTimePicker = h("div", {
       "class": rootClassName,
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {
@@ -480,6 +496,28 @@ var DateTimePicker = {
     }, [h("span", {
       "class": "k-icon k-i-calendar"
     })])])]), popupRendering]);
+    return this.$props.label ? // @ts-ignore function children
+    h(kendo_vue_labels_1.FloatingLabel, {
+      label: this.$props.label,
+      attrs: this.v3 ? undefined : {
+        label: this.$props.label,
+        editorId: id,
+        editorValid: isValid,
+        editorValue: this.getDateInputText(),
+        editorPlaceholder: this.$props.placeholder,
+        editorDisabled: this.$props.disabled
+      },
+      editorId: id,
+      editorValid: isValid,
+      editorValue: this.getDateInputText(),
+      editorPlaceholder: this.$props.placeholder,
+      editorDisabled: this.$props.disabled,
+      style: {
+        width: width
+      }
+    }, this.v3 ? function () {
+      return [dateTimePicker];
+    } : [dateTimePicker]) : dateTimePicker;
   },
   methods: {
     validity: function validity() {
@@ -495,6 +533,9 @@ var DateTimePicker = {
         valueMissing: this.computedValue === null
       };
     },
+    getDateInputText: function getDateInputText() {
+      return this._dateInput ? this._dateInput._element.value : '';
+    },
     focus: function focus() {
       var dateInputElement = this.dateInputElement();
 
@@ -535,10 +576,7 @@ var DateTimePicker = {
       this.showDuringOnChange = undefined;
     },
     handleFocus: function handleFocus(event) {
-      if (this._wrapper) {
-        this._wrapper.classList.add('k-state-focused');
-      }
-
+      this.isFocused = true;
       this.$emit('focus', event);
     },
     handleBlur: function handleBlur(event) {
@@ -557,22 +595,21 @@ var DateTimePicker = {
       var _this = this;
 
       this._blurTimeout = setTimeout(function () {
-        if (_this._wrapper) {
-          _this._wrapper.classList.remove('k-state-focused');
-        }
+        _this.isFocused = false;
 
         if (_this._dateInput && kendo_vue_common_1.canUseDOM && document.activeElement !== _this._dateInput.element() && document.activeElement && document.activeElement.className.indexOf('k-time-list') === -1) {
           _this.setShow(false);
         }
       }, 200);
     },
-    handleDateIconClick: function handleDateIconClick() {
+    handleDateIconClick: function handleDateIconClick(event) {
       if (this.$props.disabled) {
         return;
       }
 
       this.shouldFocusDateInput = true;
       this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
     },
     handleIconMouseDown: function handleIconMouseDown(event) {
       event.preventDefault();

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

@@ -63,6 +63,7 @@ export interface DateTimeSelectorState {
  * @hidden
  */
 export interface DateTimeSelectorComputed {
+    [key: string]: any;
     hasDateValue: boolean;
     computedMinTime: Date | null;
     computedMaxTime: Date | null;
@@ -71,6 +72,7 @@ export interface DateTimeSelectorComputed {
  * @hidden
  */
 export interface DateTimeSelectorMethods {
+    [key: string]: any;
     focus: (args?: any) => void;
     calendarElement: () => any;
     normalizeRange: (candidate: Date, value: Date | null) => Date | null;

package/dist/npm/datetimepicker/models/DateTimePickerSettings.d.ts

@@ -74,6 +74,10 @@ export interface DateTimePickerSettings {
      * Specifies the `name` property of the `input` DOM element.
      */
     name?: string;
+    /**
+     * Renders a floating label for the DateTimePicker.
+     */
+    label?: string;
     /**
      * Specifies the value of the placeholder.
      */
@@ -96,6 +100,10 @@ export interface DateTimePickerSettings {
      * Fires each time the user focuses any of the DateTimePicker elements.
      */
     focus?: (event: any) => void;
+    /**
+     * Fires when the icon element is clicked.
+     */
+    iconclick?: (event: any) => void;
     /**
      * Specifies if the popup will be displayed
      * ([see example]({% slug controlled_datetimepicker %}#toc-controlling-the-popup-state)).
@@ -132,4 +140,9 @@ export interface DateTimePickerSettings {
      * Specifies the validate of the DateTimePicker.
      */
     validate?: boolean;
+    /**
+     * Controls the form error message of the component. If set to an empty string, no error will be thrown.
+     *
+     */
+    validationMessage?: string;
 }

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: 1631597913,
+    publishDate: 1633591049,
     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/timepicker/TimeList.d.ts

@@ -46,6 +46,7 @@ export interface TimeListState {
  * @hidden
  */
 export interface TimeListComputed {
+    [key: string]: any;
     animate: boolean;
 }
 /**
@@ -58,6 +59,7 @@ export interface TimeListData {
  * @hidden
  */
 export interface TimeListMethods {
+    [key: string]: any;
     focus: (args?: any) => void;
     itemOffset: (scrollTop: number) => number;
     calculateHeights: () => void;

package/dist/npm/timepicker/TimePart.d.ts

@@ -58,6 +58,7 @@ export interface TimePartData {
  * @hidden
  */
 export interface TimePartComputed {
+    [key: string]: any;
     element: HTMLSpanElement | null;
     computedValue: Date;
     intl: IntlService;
@@ -68,6 +69,7 @@ export interface TimePartComputed {
  * @hidden
  */
 export interface TimePartMethods {
+    [key: string]: any;
     focus: (args?: any) => void;
     timeFormatReducer: (acc: string, current: DateFormatPart) => any;
     timeFormatFilter: (part: DateFormatPart, index: number, all: DateFormatPart[]) => boolean;

package/dist/npm/timepicker/TimePicker.d.ts

@@ -47,6 +47,7 @@ export interface TimePickerState {
     _popupId: string;
     _element: HTMLSpanElement | null;
     _dateInput: any;
+    dateInputRef: any;
     _timeSelector: any;
     _wrapper: any;
     _anchor: any;
@@ -62,6 +63,7 @@ export interface TimePickerState {
  * @hidden
  */
 export interface TimePickerMethods {
+    [key: string]: any;
     validity: () => FormComponentValidity;
     focus: () => void;
     setDateInputRef: (dateInput: any) => void;
@@ -82,6 +84,7 @@ export interface TimePickerMethods {
     timeFocus: (event: any) => void;
     timeBlur: (event: any) => void;
     createBlurTimeout: () => void;
+    getDateInputText: () => string;
 }
 /**
  * @hidden
@@ -89,11 +92,13 @@ export interface TimePickerMethods {
 export interface TimePickerData {
     currentValue: Date | null;
     currentShow: boolean;
+    isFocused: boolean;
 }
 /**
  * @hidden
  */
 export interface TimePickerComputed {
+    [key: string]: any;
     timeSelector: any;
     computedValue: Date | null;
     computedShow: boolean;

package/dist/npm/timepicker/TimePicker.js

@@ -28,6 +28,8 @@ var gh = allVue.h;
 var ref = allVue.ref;
 var inject = allVue.inject;
 
+var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
+
 var kendo_vue_popup_1 = require("@progress/kendo-vue-popup");
 
 var kendo_date_math_1 = require("@progress/kendo-date-math");
@@ -54,6 +56,7 @@ var TimePicker = {
   emits: {
     'changemodel': null,
     'update:modelValue': null,
+    'iconclick': null,
     'change': null,
     'focus': null,
     'blur': null
@@ -128,6 +131,8 @@ var TimePicker = {
       }
     },
     name: String,
+    label: String,
+    placeholder: String,
     popupSettings: {
       type: Object,
       default: function _default() {
@@ -201,7 +206,8 @@ var TimePicker = {
       currentValue: null,
       currentShow: false,
       valueDuringOnChange: undefined,
-      showDuringOnChange: undefined
+      showDuringOnChange: undefined,
+      isFocused: false
     };
   },
   computed: {
@@ -230,7 +236,7 @@ var TimePicker = {
       this.$forceUpdate();
     }
 
-    this._dateInput = this.$refs.dateInput;
+    this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
     this._timeSelector = this.$refs.timeSelector;
     this._wrapper = this.$refs[this._anchor];
 
@@ -241,7 +247,7 @@ var TimePicker = {
     }
   },
   updated: function updated() {
-    this._dateInput = this.$refs.dateInput;
+    this._dateInput = this.v3 ? this.dateInputRef : this.$refs.dateInput;
     this._timeSelector = this.$refs.timeSelector;
     this._wrapper = this.$refs[this._anchor];
 
@@ -280,6 +286,7 @@ var TimePicker = {
         tabIndex = _a.tabIndex,
         title = _a.title,
         id = _a.id,
+        placeholder = _a.placeholder,
         format = _a.format,
         formatPlaceholder = _a.formatPlaceholder,
         smoothScroll = _a.smoothScroll,
@@ -300,9 +307,9 @@ var TimePicker = {
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var rootClassName = kendo_vue_common_1.classNames('k-widget k-timepicker');
     var wrapperClassNames = kendo_vue_common_1.classNames('k-picker-wrap', {
-      'k-state-default': !disabled && isValid,
       'k-state-invalid': !isValid,
-      'k-state-disabled': disabled
+      'k-state-disabled': disabled,
+      'k-state-focused': this.isFocused
     });
     var popupClassNames = kendo_vue_common_1.classNames('k-group k-reset', popupClass);
     var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
@@ -311,9 +318,12 @@ var TimePicker = {
     var dateInput = this.$props.dateInput ? kendo_vue_common_1.templateRendering.call(this, this.$props.dateInput, kendo_vue_common_1.getListeners.call(this)) : undefined;
     var dateInputDefaultRendering = // @ts-ignore  function children
     h(DateInput_1.DateInput, {
-      ref: 'dateInput',
-      disabled: disabled,
+      ref: this.v3 ? function (el) {
+        _this.dateInputRef = el;
+      } : 'dateInput',
+      placeholder: placeholder,
       attrs: this.v3 ? undefined : {
+        placeholder: placeholder,
         disabled: disabled,
         format: format,
         formatPlaceholder: formatPlaceholder,
@@ -332,6 +342,7 @@ var TimePicker = {
         validityStyles: validityStyles,
         value: this.computedValue && this.normalizeTime(this.computedValue)
       },
+      disabled: disabled,
       format: format,
       formatPlaceholder: formatPlaceholder,
       id: id,
@@ -435,7 +446,7 @@ var TimePicker = {
       defaultRendering: popupDefaultRendering,
       defaultSlots: timeSelector
     });
-    return h("div", {
+    var timePicker = h("div", {
       "class": rootClassName,
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {
@@ -474,6 +485,28 @@ var TimePicker = {
     }, [h("span", {
       "class": "k-icon k-i-clock"
     })])]), popupRendering]);
+    return this.$props.label ? // @ts-ignore function children
+    h(kendo_vue_labels_1.FloatingLabel, {
+      label: this.$props.label,
+      attrs: this.v3 ? undefined : {
+        label: this.$props.label,
+        editorId: id,
+        editorValid: isValid,
+        editorValue: this.getDateInputText(),
+        editorPlaceholder: this.$props.placeholder,
+        editorDisabled: this.$props.disabled
+      },
+      editorId: id,
+      editorValid: isValid,
+      editorValue: this.getDateInputText(),
+      editorPlaceholder: this.$props.placeholder,
+      editorDisabled: this.$props.disabled,
+      style: {
+        width: width
+      }
+    }, this.v3 ? function () {
+      return [timePicker];
+    } : [timePicker]) : timePicker;
   },
   methods: {
     validity: function validity() {
@@ -492,6 +525,9 @@ var TimePicker = {
         valueMissing: this.computedValue === null
       };
     },
+    getDateInputText: function getDateInputText() {
+      return this._dateInput ? this._dateInput._element.value : '';
+    },
     focus: function focus() {
       if (this._dateInput) {
         this._dateInput.focus();
@@ -540,11 +576,7 @@ var TimePicker = {
     },
     handleFocus: function handleFocus(event) {
       this._oldShow = this.computedShow;
-
-      if (this._wrapper) {
-        this._wrapper.classList.add('k-state-focused');
-      }
-
+      this.isFocused = true;
       this.$emit('focus', event);
     },
     handleBlur: function handleBlur(event) {
@@ -563,9 +595,7 @@ var TimePicker = {
       var _this = this;
 
       this._blurTimeout = setTimeout(function () {
-        if (_this._wrapper) {
-          _this._wrapper.classList.remove('k-state-focused');
-        }
+        _this.isFocused = false;
 
         if (_this._dateInput && kendo_vue_common_1.canUseDOM && document.activeElement !== _this._dateInput.element() && document.activeElement && document.activeElement.className.indexOf('k-time-list') === -1) {
           _this.setShow(false);
@@ -575,13 +605,14 @@ var TimePicker = {
     handleValueReject: function handleValueReject(_) {
       this.setShow(false);
     },
-    handleIconClick: function handleIconClick(_) {
+    handleIconClick: function handleIconClick(event) {
       if (this.$props.disabled) {
         return;
       }
 
       this.shouldFocusDateInput = true;
       this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
     },
     handleIconMouseDown: function handleIconMouseDown(event) {
       event.preventDefault();

package/dist/npm/timepicker/TimeSelector.d.ts

@@ -61,6 +61,7 @@ export interface TimeSelectorData {
  * @hidden
  */
 export interface TimeSelectorMethods {
+    [key: string]: any;
     focusActiveList: () => void;
     hasActiveButton: () => any;
     handleKeyDown: (event: any) => void;
@@ -75,6 +76,7 @@ export interface TimeSelectorMethods {
  * @hidden
  */
 export interface TimeSelectorComputed {
+    [key: string]: any;
     computedValue: Date | null;
     intl: IntlService;
     current: Date | null;

package/dist/npm/timepicker/models/TimePickerSettings.d.ts

@@ -57,14 +57,26 @@ export interface TimePickerSettings {
      * Specifies the `name` property of the `input` DOM element.
      */
     name?: string;
+    /**
+     * Renders a floating label for the TimePicker.
+     */
+    label?: string;
+    /**
+     * Specifies the value of the placeholder.
+     */
+    placeholder?: string;
     /**
      * Fires each time any of the TimePicker elements gets blurred.
      */
-    onBlur?: (event: any) => void;
+    blur?: (event: any) => void;
     /**
      * Fires each time the user focuses any of the TimePicker elements.
      */
-    onFocus?: (event: any) => void;
+    focus?: (event: any) => void;
+    /**
+     * Fires when the icon element is clicked.
+     */
+    iconclick?: (event: any) => void;
     /**
      * Configures the popup options of the TimePicker.
      *

package/dist/npm/virtualization/Virtualization.d.ts

@@ -50,6 +50,7 @@ export interface VirtualizationData {
  * @hidden
  */
 export interface VirtualizationMethods {
+    [key: string]: any;
     activeIndex: () => number;
     itemIndex: (offset: number) => number;
     itemOffset: (index: number) => number;
@@ -76,6 +77,7 @@ export interface VirtualizationMethods {
  * @hidden
  */
 export interface VirtualizationComputed {
+    [key: string]: any;
     element: HTMLDivElement | null;
 }
 /**

package/package.json

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