@progress/kendo-vue-dateinputs 2.7.2 → 2.8.0-dev.202201121019

package/dist/npm/timepicker/TimePart.js

@@ -11,6 +11,8 @@ var allVue = Vue;
 var gh = allVue.h;
 var inject = allVue.inject;
 
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
+
 var kendo_date_math_1 = require("@progress/kendo-date-math");
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
@@ -94,7 +96,8 @@ var TimePart = {
   emits: {
     'change': null,
     'focus': null,
-    'blur': null
+    'blur': null,
+    'nowclick': null
   },
   created: function created() {
     this.timeLists = [];
@@ -173,22 +176,27 @@ var TimePart = {
       "class": "k-time-header"
     }, [h("span", {
       "class": "k-title"
-    }, [this.intl.formatDate(this.computedValue, this.dateFormatParts.reduce(this.timeFormatReducer, ''))]), this.showNowButton() && h("button", {
+    }, [this.intl.formatDate(this.computedValue, this.dateFormatParts.reduce(this.timeFormatReducer, ''))]), this.showNowButton() && // @ts-ignore  function children
+    h(kendo_vue_buttons_1.Button, {
       ref: 'nowButton',
-      "class": "k-button k-flat k-time-now",
-      title: selectNowMessage,
+      fillMode: 'flat',
       attrs: this.v3 ? undefined : {
+        fillMode: 'flat',
         title: selectNowMessage,
         "aria-label": selectNowMessage,
         tabIndex: disabled ? -1 : 0
       },
+      "class": "k-time-now",
+      title: selectNowMessage,
       "aria-label": selectNowMessage,
       onClick: this.onNowClick,
       on: this.v3 ? undefined : {
         "click": this.onNowClick
       },
       tabIndex: disabled ? -1 : 0
-    }, [localizationService.toLanguageString(messages_1.now, messages_1.messages[messages_1.now])])]), h("div", {
+    }, this.v3 ? function () {
+      return [localizationService.toLanguageString(messages_1.now, messages_1.messages[messages_1.now])];
+    } : [localizationService.toLanguageString(messages_1.now, messages_1.messages[messages_1.now])])]), h("div", {
       "class": "k-time-list-container",
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {
@@ -293,7 +301,7 @@ var TimePart = {
       return formatRegExp.test(part.type || '');
     },
     hasActiveButton: function hasActiveButton() {
-      return kendo_vue_common_1.canUseDOM && document.activeElement === this._nowButton;
+      return kendo_vue_common_1.canUseDOM && document.activeElement === this._nowButton.$el;
     },
     focusList: function focusList(dir) {
       if (!this.timeLists.length) {

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

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -106,7 +105,7 @@ export interface TimePickerComputed {
 /**
  * @hidden
  */
-export interface TimePickerAll extends Vue, TimePickerMethods, TimePickerData, TimePickerComputed, TimePickerState {
+export interface TimePickerAll extends Vue2type, TimePickerMethods, TimePickerData, TimePickerComputed, TimePickerState {
 }
 declare let TimePicker: ComponentOptions<TimePickerAll, DefaultData<TimePickerData>, DefaultMethods<TimePickerAll>, TimePickerComputed, RecordPropsDefinition<TimePickerProps>>;
 declare const TimePickerVue3: DefineComponent<TimePickerProps, any, TimePickerData, TimePickerComputed, TimePickerMethods, {}, {}, {}, string, TimePickerProps, TimePickerProps, {}>;

package/dist/npm/timepicker/TimePicker.js

@@ -38,6 +38,8 @@ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
+
 var messages_1 = require("../messages");
 
 var DateInput_1 = require("../dateinput/DateInput");
@@ -115,6 +117,27 @@ var TimePicker = {
         return utils_3.defaultFormatPlaceholder;
       }
     },
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return ['solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    },
     id: String,
     ariaLabelledBy: String,
     ariaDescribedBy: String,
@@ -278,38 +301,43 @@ var TimePicker = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _a;
+
     var _this = this;
 
     var h = gh || createElement;
-    var _a = this.$props,
-        disabled = _a.disabled,
-        tabIndex = _a.tabIndex,
-        title = _a.title,
-        id = _a.id,
-        placeholder = _a.placeholder,
-        format = _a.format,
-        formatPlaceholder = _a.formatPlaceholder,
-        smoothScroll = _a.smoothScroll,
-        width = _a.width,
-        name = _a.name,
-        steps = _a.steps,
-        cancelButton = _a.cancelButton,
-        nowButton = _a.nowButton,
-        validationMessage = _a.validationMessage,
-        required = _a.required,
-        validityStyles = _a.validityStyles,
-        ariaLabelledBy = _a.ariaLabelledBy,
-        ariaDescribedBy = _a.ariaDescribedBy;
-    var _b = this.$props.popupSettings,
-        popupClass = _b.popupClass,
-        appendTo = _b.appendTo,
-        animate = _b.animate;
+    var defaultSlot = kendo_vue_common_1.getDefaultSlots(this);
+    var _b = this.$props,
+        disabled = _b.disabled,
+        tabIndex = _b.tabIndex,
+        title = _b.title,
+        id = _b.id,
+        placeholder = _b.placeholder,
+        format = _b.format,
+        formatPlaceholder = _b.formatPlaceholder,
+        smoothScroll = _b.smoothScroll,
+        width = _b.width,
+        name = _b.name,
+        steps = _b.steps,
+        cancelButton = _b.cancelButton,
+        nowButton = _b.nowButton,
+        validationMessage = _b.validationMessage,
+        required = _b.required,
+        validityStyles = _b.validityStyles,
+        ariaLabelledBy = _b.ariaLabelledBy,
+        ariaDescribedBy = _b.ariaDescribedBy,
+        size = _b.size,
+        rounded = _b.rounded,
+        fillMode = _b.fillMode;
+    var _c = this.$props.popupSettings,
+        popupClass = _c.popupClass,
+        appendTo = _c.appendTo,
+        animate = _c.animate;
     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-invalid': !isValid,
-      'k-state-disabled': disabled,
-      'k-state-focused': this.isFocused
+      'k-invalid': !isValid,
+      'k-disabled': disabled,
+      'k-focus': this.isFocused
     });
     var popupClassNames = kendo_vue_common_1.classNames('k-group k-reset', popupClass);
     var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
@@ -328,6 +356,9 @@ var TimePicker = {
         format: format,
         formatPlaceholder: formatPlaceholder,
         id: id,
+        size: null,
+        rounded: null,
+        fillMode: null,
         ariaLabelledBy: ariaLabelledBy,
         ariaDescribedBy: ariaDescribedBy,
         max: this.normalizeTime(this.$props.max),
@@ -346,6 +377,9 @@ var TimePicker = {
       format: format,
       formatPlaceholder: formatPlaceholder,
       id: id,
+      size: null,
+      rounded: null,
+      fillMode: null,
       ariaLabelledBy: ariaLabelledBy,
       ariaDescribedBy: ariaDescribedBy,
       max: this.normalizeTime(this.$props.max),
@@ -363,7 +397,9 @@ var TimePicker = {
       validationMessage: validationMessage,
       validityStyles: validityStyles,
       value: this.computedValue && this.normalizeTime(this.computedValue)
-    });
+    }, this.v3 ? function () {
+      return [defaultSlot];
+    } : [defaultSlot]);
     var timeSelector = // @ts-ignore  function children
     h(TimeSelector_1.TimeSelector, {
       ref: 'timeSelector',
@@ -447,7 +483,7 @@ var TimePicker = {
       defaultSlots: timeSelector
     });
     var timePicker = h("div", {
-      "class": rootClassName,
+      "class": kendo_vue_common_1.classNames('k-input', 'k-timepicker', (_a = {}, _a["k-input-" + (kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-valid'] = isValid, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a['k-focus'] = this.isFocused, _a)),
       onKeydown: this.handleKeyDown,
       on: this.v3 ? undefined : {
         "keydown": this.handleKeyDown,
@@ -458,16 +494,15 @@ var TimePicker = {
         width: width
       },
       onFocusin: this.handleFocus,
-      onFocusout: this.handleBlur
-    }, [h("span", {
+      onFocusout: this.handleBlur,
       ref: this.v3 ? function (el) {
         _this.kendoAnchorRef = el;
-      } : this._anchor,
-      "class": wrapperClassNames
-    }, [dateInputRendering, h("span", {
-      role: "button",
+      } : this._anchor
+    }, [dateInputRendering, // @ts-ignore
+    h(kendo_vue_buttons_1.Button, {
+      icon: 'clock',
       attrs: this.v3 ? undefined : {
-        role: "button",
+        icon: 'clock',
         title: toggleTimeMessage,
         "aria-controls": this._popupId,
         "aria-label": toggleClockMessage
@@ -479,12 +514,10 @@ var TimePicker = {
       },
       onClick: this.handleIconClick,
       title: toggleTimeMessage,
-      "class": "k-select",
+      "class": "k-input-button",
       "aria-controls": this._popupId,
       "aria-label": toggleClockMessage
-    }, [h("span", {
-      "class": "k-icon k-i-clock"
-    })])]), popupRendering]);
+    }), popupRendering]);
     return this.$props.label ? // @ts-ignore function children
     h(kendo_vue_labels_1.FloatingLabel, {
       label: this.$props.label,

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

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -84,7 +83,7 @@ export interface TimeSelectorComputed {
 /**
  * @hidden
  */
-export interface TimeSelectorAll extends Vue, TimeSelectorMethods, TimeSelectorData, TimeSelectorComputed, TimeSelectorState {
+export interface TimeSelectorAll extends Vue2type, TimeSelectorMethods, TimeSelectorData, TimeSelectorComputed, TimeSelectorState {
 }
 declare let TimeSelector: ComponentOptions<TimeSelectorAll, DefaultData<TimeSelectorData>, DefaultMethods<TimeSelectorAll>, TimeSelectorComputed, RecordPropsDefinition<TimeSelectorProps>>;
 declare const TimeSelectorVue3: DefineComponent<TimeSelectorProps, any, TimeSelectorData, TimeSelectorComputed, TimeSelectorMethods, {}, {}, {}, string, TimeSelectorProps, TimeSelectorProps, {}>;

package/dist/npm/timepicker/TimeSelector.js

@@ -11,6 +11,8 @@ var allVue = Vue;
 var gh = allVue.h;
 var inject = allVue.inject;
 
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
+
 var kendo_date_math_1 = require("@progress/kendo-date-math");
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
@@ -207,10 +209,11 @@ var TimeSelector = {
       nowButton: nowButton,
       steps: steps
     }), h("div", {
-      "class": "k-time-footer k-action-buttons"
-    }, [cancelButton && h("button", {
+      "class": "k-time-footer k-actions k-actions-stretched"
+    }, [cancelButton && // @ts-ignore  function children
+    h(kendo_vue_buttons_1.Button, {
       ref: 'cancelButton',
-      "class": "k-button k-time-cancel",
+      "class": "k-time-cancel",
       onClick: this.handleReject,
       on: this.v3 ? undefined : {
         "click": this.handleReject
@@ -221,20 +224,27 @@ var TimeSelector = {
         "aria-label": cancelMessage
       },
       "aria-label": cancelMessage
-    }, [cancelMessage]), h("button", {
+    }, this.v3 ? function () {
+      return [cancelMessage];
+    } : [cancelMessage]), // @ts-ignore  function children
+    h(kendo_vue_buttons_1.Button, {
       ref: 'acceptButton',
-      "class": "k-time-accept k-button k-primary",
+      themeColor: 'primary',
+      attrs: this.v3 ? undefined : {
+        themeColor: 'primary',
+        title: setMessage,
+        "aria-label": setMessage
+      },
+      "class": "k-time-accept",
       onClick: this.handleAccept,
       on: this.v3 ? undefined : {
         "click": this.handleAccept
       },
       title: setMessage,
-      attrs: this.v3 ? undefined : {
-        title: setMessage,
-        "aria-label": setMessage
-      },
       "aria-label": setMessage
-    }, [setMessage])])]);
+    }, this.v3 ? function () {
+      return [setMessage];
+    } : [setMessage])])]);
   },
   methods: {
     handleBlur: function handleBlur(event) {
@@ -257,7 +267,7 @@ var TimeSelector = {
         return false;
       }
 
-      return kendo_vue_common_1.canUseDOM && (document.activeElement === this._acceptButton || document.activeElement === this._cancelButton);
+      return kendo_vue_common_1.canUseDOM && (document.activeElement === this._acceptButton.$el || document.activeElement === this._cancelButton.$el);
     },
     handleKeyDown: function handleKeyDown(event) {
       var keyCode = event.keyCode;

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

@@ -65,6 +65,45 @@ export interface TimePickerSettings {
      * Specifies the value of the placeholder.
      */
     placeholder?: string;
+    /**
+     * Configures the `size` of the TimeInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the TimeInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null—Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the TimeInput.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null—Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
     /**
      * Fires each time any of the TimePicker elements gets blurred.
      */

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

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -102,7 +101,7 @@ export interface VirtualizationProps {
 /**
  * @hidden
  */
-export interface VirtualizationAll extends Vue, VirtualizationMethods, VirtualizationData, VirtualizationComputed, VirtualizationState {
+export interface VirtualizationAll extends Vue2type, VirtualizationMethods, VirtualizationData, VirtualizationComputed, VirtualizationState {
 }
 declare let Virtualization: ComponentOptions<VirtualizationAll, DefaultData<VirtualizationData>, DefaultMethods<VirtualizationAll>, VirtualizationComputed, RecordPropsDefinition<VirtualizationProps>>;
 declare const VirtualizationVue3: DefineComponent<VirtualizationProps, any, VirtualizationData, VirtualizationComputed, VirtualizationMethods, {}, {}, {}, string, VirtualizationProps, VirtualizationProps, {}>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-dateinputs",
   "description": "Kendo UI for Vue Date Inputs package",
-  "version": "2.7.2",
+  "version": "2.8.0-dev.202201121019",
   "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.7.2",
-    "@progress/kendo-vue-common": "2.7.2",
-    "@progress/kendo-vue-labels": "2.7.2",
-    "@progress/kendo-vue-popup": "2.7.2"
+    "@progress/kendo-vue-buttons": "2.8.0-dev.202201121019",
+    "@progress/kendo-vue-common": "2.8.0-dev.202201121019",
+    "@progress/kendo-vue-labels": "2.8.0-dev.202201121019",
+    "@progress/kendo-vue-popup": "2.8.0-dev.202201121019"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.4",
     "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-dropdowns": "2.7.2",
-    "@progress/kendo-vue-intl": "2.7.2"
+    "@progress/kendo-vue-dropdowns": "2.8.0-dev.202201121019",
+    "@progress/kendo-vue-intl": "2.8.0-dev.202201121019"
   },
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",