@progress/kendo-vue-dateinputs 2.5.0 → 2.5.1

package/dist/es/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/es/timepicker/TimePicker.js

@@ -20,6 +20,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
 var inject = allVue.inject;
+import { FloatingLabel } from '@progress/kendo-vue-labels';
 import { Popup } from '@progress/kendo-vue-popup';
 import { cloneDate } from '@progress/kendo-date-math';
 import { classNames, guid, Keys, templateRendering, getListeners, getTemplate, canUseDOM } from '@progress/kendo-vue-common';
@@ -36,6 +37,7 @@ var TimePicker = {
   emits: {
     'changemodel': null,
     'update:modelValue': null,
+    'iconclick': null,
     'change': null,
     'focus': null,
     'blur': null
@@ -110,6 +112,8 @@ var TimePicker = {
       }
     },
     name: String,
+    label: String,
+    placeholder: String,
     popupSettings: {
       type: Object,
       default: function _default() {
@@ -183,7 +187,8 @@ var TimePicker = {
       currentValue: null,
       currentShow: false,
       valueDuringOnChange: undefined,
-      showDuringOnChange: undefined
+      showDuringOnChange: undefined,
+      isFocused: false
     };
   },
   computed: {
@@ -212,7 +217,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];
 
@@ -223,7 +228,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];
 
@@ -262,6 +267,7 @@ var TimePicker = {
         tabIndex = _a.tabIndex,
         title = _a.title,
         id = _a.id,
+        placeholder = _a.placeholder,
         format = _a.format,
         formatPlaceholder = _a.formatPlaceholder,
         smoothScroll = _a.smoothScroll,
@@ -282,9 +288,9 @@ var TimePicker = {
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var rootClassName = classNames('k-widget k-timepicker');
     var wrapperClassNames = 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 = classNames('k-group k-reset', popupClass);
     var localizationService = provideLocalizationService(this);
@@ -293,9 +299,12 @@ var TimePicker = {
     var dateInput = this.$props.dateInput ? templateRendering.call(this, this.$props.dateInput, getListeners.call(this)) : undefined;
     var dateInputDefaultRendering = // @ts-ignore  function children
     h(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,
@@ -314,6 +323,7 @@ var TimePicker = {
         validityStyles: validityStyles,
         value: this.computedValue && this.normalizeTime(this.computedValue)
       },
+      disabled: disabled,
       format: format,
       formatPlaceholder: formatPlaceholder,
       id: id,
@@ -417,7 +427,7 @@ var TimePicker = {
       defaultRendering: popupDefaultRendering,
       defaultSlots: timeSelector
     });
-    return h("div", {
+    var timePicker = h("div", {
       "class": rootClassName,
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {
@@ -456,6 +466,28 @@ var TimePicker = {
     }, [h("span", {
       "class": "k-icon k-i-clock"
     })])]), popupRendering]);
+    return this.$props.label ? // @ts-ignore function children
+    h(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() {
@@ -474,6 +506,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();
@@ -522,11 +557,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) {
@@ -545,9 +576,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 && canUseDOM && document.activeElement !== _this._dateInput.element() && document.activeElement && document.activeElement.className.indexOf('k-time-list') === -1) {
           _this.setShow(false);
@@ -557,13 +586,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/es/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/es/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/es/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/dist/npm/calendar/components/CalendarCell.d.ts

@@ -15,6 +15,7 @@ export interface CalendarCellProps extends CellContext {
  * @hidden
  */
 export interface CalendarCellMethods {
+    [key: string]: any;
     handleClick?: (e: any) => void;
     handleMouseDown?: (e: any) => void;
     handleMouseEnter?: () => void;

package/dist/npm/calendar/components/CalendarHeaderTitle.d.ts

@@ -15,6 +15,7 @@ export interface CalendarHeaderTitleProps {
  * @hidden
  */
 export interface CalendarHeaderTitleMethods {
+    [key: string]: any;
     handleClick: (e: any) => void;
 }
 /**

package/dist/npm/calendar/components/Header.d.ts

@@ -33,6 +33,7 @@ export interface HeaderProps {
  * @hidden
  */
 export interface HeaderMethods {
+    [key: string]: any;
     getTitle: () => string;
     handleTitleClick: (event: any) => void;
     handleTodayClick: (event: any) => void;
@@ -47,6 +48,7 @@ export interface HeaderMethods {
  * @hidden
  */
 export interface HeaderComputed {
+    [key: string]: any;
     navigate?: () => void;
     todayIsInRange?: () => boolean;
 }

package/dist/npm/calendar/components/View.d.ts

@@ -61,6 +61,7 @@ export interface ViewProps {
  * @hidden
  */
 export interface ViewComputed {
+    [key: string]: any;
     isMonthView?: boolean;
     weekNumber?: boolean;
     isHorizontal?: boolean;
@@ -69,6 +70,7 @@ export interface ViewComputed {
  * @hidden
  */
 export interface ViewMethods {
+    [key: string]: any;
     buildWeekNumber: (row: any, idx: number) => void;
     buildRow: (row: any) => void;
     firstDate: (row: any) => any;

package/dist/npm/calendar/components/ViewList.d.ts

@@ -69,6 +69,7 @@ export interface ViewListState {
  * @hidden
  */
 export interface ViewListComputed {
+    [key: string]: any;
     weekNames?: string[];
     weekNumber?: boolean;
     animate?: boolean;
@@ -77,6 +78,7 @@ export interface ViewListComputed {
  * @hidden
  */
 export interface ViewListMethods {
+    [key: string]: any;
     blurActiveDate: () => void;
     focusActiveDate: (event: any) => void;
     handleCellEnter: (event: any) => void;

package/dist/npm/calendar/components/ViewList.js

@@ -241,7 +241,7 @@ var ViewList = {
   render: function render(createElement) {
     var h = gh || createElement;
     var selectionRange = this.$props.allowReverse ? this.rotateSelectionRange(this.$props.selectionRange) : this.$props.selectionRange;
-    var rootClassNames = kendo_vue_common_1.classNames('k-calendar-view', 'k-hstck k-align-items-start k-justify-content-center', {
+    var rootClassNames = kendo_vue_common_1.classNames('k-calendar-view', 'k-hstack k-align-items-start k-justify-content-center', {
       'k-calendar-monthview': this.$props.activeView === models_1.CalendarViewEnum.month,
       'k-calendar-yearview': this.$props.activeView === models_1.CalendarViewEnum.year,
       'k-calendar-decadeview': this.$props.activeView === models_1.CalendarViewEnum.decade,

package/dist/npm/calendar/components/interfaces/CalendarComputed.d.ts

@@ -3,6 +3,7 @@ import { SelectionRangeEnd } from '../../models';
  * @hidden
  */
 export interface CalendarComputed {
+    [key: string]: any;
     activeRange?: SelectionRangeEnd;
     currentMin: Date;
     currentMax: Date;

package/dist/npm/calendar/components/interfaces/CalendarMethods.d.ts

@@ -4,6 +4,7 @@ import { ViewListEventArguments } from '../ViewList';
  * @hidden
  */
 export interface CalendarMethods {
+    [key: string]: any;
     computedValue: () => Date | Date[] | SelectionRange | null;
     focus: (event?: any) => void;
     handleTodayClick: (e: any) => void;

package/dist/npm/dateinput/DateInput.js

@@ -46,6 +46,8 @@ var utils_3 = require("../timepicker/utils");
 
 var defaults_1 = require("../defaults");
 
+var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
+
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var DateInput = {
   name: 'DateInput',
@@ -148,9 +150,9 @@ var DateInput = {
       currentFormat: undefined,
       valueDuringOnChange: undefined,
       hasMounted: false,
-      focused: false,
       isEmpty: undefined,
-      lastSelectedSymbol: undefined
+      lastSelectedSymbol: undefined,
+      isFocused: false
     };
   },
   created: function created() {
@@ -177,14 +179,15 @@ var DateInput = {
         return this.kendoDate && this.kendoDate.getDateObject();
       }
     },
-    spanClassNames: {
+    wrapperClassNames: {
       get: function get() {
         var isValid = !this.$data.hasMounted || !this.$props.validityStyles || this.validity().valid;
+        var disabled = this.$props.disabled;
         return {
-          'k-floating-label-container': true,
-          'k-state-focused': this.$data.focused,
-          'k-state-empty': this.$data.isEmpty && this.$props.placeholder === '',
+          'k-dateinput-wrap': true,
+          'k-state-disabled': disabled,
           'k-state-invalid': !isValid && isValid !== undefined,
+          'k-state-focused': this.isFocused,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
@@ -216,11 +219,11 @@ var DateInput = {
       }
     },
     handleFocus: function handleFocus(e) {
-      this.$data.focused = true;
+      this.$data.isFocused = true;
       this.$emit('focus', e);
     },
     handleBlur: function handleBlur(e) {
-      this.$data.focused = false;
+      this.$data.isFocused = false;
       this.$emit('blur', e);
     },
     intl: function intl() {
@@ -560,7 +563,7 @@ var DateInput = {
 
     this.$data.currentFormat = currentFormat;
     this.$data.isEmpty = currentText === this._emptyText;
-    var showPlaceHolder = this.$props.placeholder !== undefined && this.$data.isEmpty && !this.$data.focused;
+    var showPlaceHolder = this.$props.placeholder !== undefined && this.$data.isEmpty && !this.$data.isFocused;
     var textToDisplay = !showPlaceHolder ? currentText : null;
     var inputId = id || this._inputId;
     var isValid = !this.$props.validityStyles || this.validity().valid;
@@ -576,9 +579,9 @@ var DateInput = {
       attrs: this.v3 ? undefined : {
         dir: this.$props.dir
       },
-      "class": isValid ? wrapperClassesInstance.join(' ') : Array.prototype.concat([], wrapperClassesInstance, utils_1.invalidClasses).join(' ')
+      "class": wrapperClassesInstance.join(' ')
     }, [h("span", {
-      "class": 'k-dateinput-wrap' + (this.$props.disabled ? ' k-state-disabled' : '')
+      "class": this.wrapperClassNames
     }, [h("input", {
       role: "spinbutton",
       attrs: this.v3 ? undefined : {
@@ -671,21 +674,25 @@ var DateInput = {
     }, [h("span", {
       "class": "k-icon k-i-arrow-s"
     })])])])]);
-    return label ? h("span", {
-      "class": this.spanClassNames,
-      dir: this.$props.dir,
-      attrs: this.v3 ? undefined : {
-        dir: this.$props.dir
-      }
-    }, [dateinput, this.$props.label ? inputId ? h("label", {
-      "for": inputId,
+    return label ? // @ts-ignore function children
+    h(kendo_vue_labels_1.FloatingLabel, {
+      label: label,
       attrs: this.v3 ? undefined : {
-        "for": inputId
+        label: label,
+        editorId: inputId,
+        editorValue: textToDisplay,
+        editorPlaceholder: this.$props.placeholder,
+        editorValid: isValid,
+        editorDisabled: this.$props.disabled
       },
-      "class": "k-label"
-    }, [this.$props.label]) : h("span", {
-      "class": "k-label"
-    }, [this.$props.label]) : null]) : dateinput;
+      editorId: inputId,
+      editorValue: textToDisplay,
+      editorPlaceholder: this.$props.placeholder,
+      editorValid: isValid,
+      editorDisabled: this.$props.disabled
+    }, this.v3 ? function () {
+      return [dateinput];
+    } : [dateinput]) : dateinput;
   }
 };
 exports.DateInput = DateInput;

package/dist/npm/dateinput/interfaces/DateInputComputed.d.ts

@@ -2,6 +2,7 @@
  * @hidden
  */
 export interface DateInputComputed {
+    [key: string]: any;
     computedValue: any;
-    spanClassNames: any;
+    wrapperClassNames: object;
 }

package/dist/npm/dateinput/interfaces/DateInputData.d.ts

@@ -7,4 +7,5 @@ export interface DateInputData {
     currentFormat: string;
     valueDuringOnChange: Date | null | undefined;
     lastSelectedSymbol: string;
+    isFocused: boolean;
 }

package/dist/npm/dateinput/interfaces/DateInputMethods.d.ts

@@ -5,6 +5,7 @@ import { Selection } from '../models';
  * @hidden
  */
 export interface DateInputMethods {
+    [key: string]: any;
     handleFocus?: (_: any) => void;
     handleBlur?: (_: any) => void;
     element: () => HTMLInputElement | null;

package/dist/npm/datepicker/DatePicker.js

@@ -34,7 +34,9 @@ var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 
 var ToggleButton_1 = require("./ToggleButton");
 
-var PickerWrap_1 = require("../common/PickerWrap"); // tslint:enable:max-line-length
+var PickerWrap_1 = require("../common/PickerWrap");
+
+var kendo_vue_labels_1 = require("@progress/kendo-vue-labels"); // tslint:enable:max-line-length
 
 
 var DatePicker = {
@@ -52,6 +54,7 @@ var DatePicker = {
     'change': null,
     'changemodel': null,
     'update:modelValue': null,
+    'iconclick': null,
     'focus': null,
     'blur': null
   },
@@ -90,6 +93,7 @@ var DatePicker = {
         return undefined;
       }
     },
+    label: String,
     placeholder: String,
     popup: {
       type: [String, Object, Function],
@@ -251,7 +255,6 @@ var DatePicker = {
       get: function get() {
         var disabled = this.$props.disabled;
         return {
-          'k-state-default': !disabled,
           'k-state-disabled': disabled,
           'k-state-focused': this.$data.isFocused
         };
@@ -336,6 +339,9 @@ var DatePicker = {
       var value = this.mergeTime(event.value);
       this.handleValueChange(value, event);
     },
+    getDateInputText: function getDateInputText() {
+      return this._dateInput ? this._dateInput._element.value : '';
+    },
     handleValueChange: function handleValueChange(value, event) {
       this.$data.currentValue = kendo_date_math_1.cloneDate(value || undefined);
       this.$data.currentShow = false;
@@ -369,6 +375,7 @@ var DatePicker = {
 
       this.$data.shouldFocusDateInput = true;
       this.setShow(!this.computedShow);
+      this.$emit('iconclick', event);
     },
     handleIconMouseDown: function handleIconMouseDown(event) {
       event.stopPropagation();
@@ -487,7 +494,6 @@ var DatePicker = {
       placeholder: this.$props.placeholder,
       attrs: this.v3 ? undefined : {
         placeholder: this.$props.placeholder,
-        label: this.$props.label,
         disabled: disabled,
         format: format,
         formatPlaceholder: formatPlaceholder,
@@ -503,7 +509,6 @@ var DatePicker = {
         validityStyles: validityStyles,
         value: value
       },
-      label: this.$props.label,
       disabled: disabled,
       format: format,
       formatPlaceholder: formatPlaceholder,
@@ -621,7 +626,7 @@ var DatePicker = {
       defaultRendering: popupDefaultRendering,
       defaultSlots: calendarRendering
     });
-    return h("span", {
+    var datepicker = h("span", {
       ref: this.v3 ? function (el) {
         _this.kendoAnchorRef = el;
       } : this._anchor,
@@ -641,6 +646,28 @@ var DatePicker = {
       onFocusin: this.handleFocus,
       onFocusout: this.handleBlur
     }, [pickerWrapRendering, 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 [datepicker];
+    } : [datepicker]) : datepicker;
   }
 };
 exports.DatePicker = DatePicker;

package/dist/npm/datepicker/interfaces/DatePickerComputed.d.ts

@@ -2,6 +2,7 @@
  * @hidden
  */
 export interface DatePickerComputed {
+    [key: string]: any;
     computedValue: Date | null;
     computedShow: boolean;
     wrapperClassNames: object;

package/dist/npm/datepicker/interfaces/DatePickerMethods.d.ts

@@ -5,6 +5,7 @@ import { DatePickerState } from './DatePickerState';
  * @hidden
  */
 export interface DatePickerMethods {
+    [key: string]: any;
     emitBlur?: (_: any) => void;
     validity: () => FormComponentValidity;
     nextValue: (nextProps: DatePickerProps, nextState: DatePickerState) => any;
@@ -18,6 +19,7 @@ export interface DatePickerMethods {
     handleBlur: (event: any) => void;
     calendarFocus: (event: any) => void;
     calendarBlur: (event: any) => void;
+    getDateInputText: () => string;
     createBlurTimeout: () => void;
     handleIconClick: () => void;
     handleIconMouseDown: (event: any) => void;

package/dist/npm/datepicker/interfaces/DatePickerProps.d.ts

@@ -17,6 +17,14 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps
      * Fires each time the user selects a new value ([see example]({% slug controlled_datepicker_native %}#toc-controlling-the-date-value)).
      */
     change?: (event: DatePickerChangeEvent) => void;
+    /**
+     * Fires when the icon element is clicked.
+     */
+    iconclick?: (event: any) => void;
+    /**
+     * Renders a floating label for the DatePicker.
+     */
+    label?: string;
     /**
      * Specifies the value of the placeholder.
      */