@progress/kendo-vue-inputs 3.4.1 → 3.4.3-dev.202207111225

package/dist/npm/colors/Picker.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 
 var kendo_vue_popup_1 = require("@progress/kendo-vue-popup");
 
@@ -54,8 +55,8 @@ var PickerVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/npm/colors/interfaces/ColorPickerProps.d.ts

@@ -5,6 +5,7 @@ import { ColorPickerActiveColorClick } from './ColorPickerActiveColorClick';
 import { ColorPickerPopupSettings } from './ColorPickerPopupSettings';
 import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
 import { ColorPickerView } from './ColorPickerView';
+import { ColorGradientProps } from './ColorGradientProps';
 /**
  * Represents the props of the [Kendo UI for Vue ColorPicker component]({% slug overview_colorpicker %}).
  */
@@ -46,7 +47,7 @@ export interface ColorPickerProps {
      * Sets the view which the ColorPicker will render in the popup
      * ([see example]({% slug combinedview_colorpicker %})).
      */
-    view?: ColorPickerView;
+    view?: ColorPickerView | string;
     /**
      * Represents the `dir` HTML attribute.
      */
@@ -68,6 +69,10 @@ export interface ColorPickerProps {
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-customizing-the-palette-popup)).
      */
     paletteSettings?: ColorPickerPaletteSettings;
+    /**
+     * Configures the ColorGradient that is displayed in the ColorPicker popup.
+     */
+    gradientSettings?: ColorGradientProps;
     /**
      * Configures the popup of the ColorPicker.
      */

package/dist/npm/colors/utils/color-palette.service.d.ts

@@ -5,6 +5,7 @@ import { TableCell } from '../models/table-cell';
 export declare class ColorPaletteService {
     colorRows: string[][];
     setColorMatrix(palette: string[], columns: number): void;
+    isInColors(colors: any, current: any): boolean;
     getCellCoordsFor(color?: string): TableCell | undefined;
     getColorAt(cellCoords: TableCell): string | undefined;
     getNextCell(current: TableCell, horizontalStep: number, verticalStep: number): TableCell;

package/dist/npm/colors/utils/color-palette.service.js

@@ -21,8 +21,10 @@ var ColorPaletteService = /** @class */ (function () {
             this.colorRows.push(row);
         }
     };
+    ColorPaletteService.prototype.isInColors = function (colors, current) {
+        return colors.some(function (c) { return c === current; });
+    };
     ColorPaletteService.prototype.getCellCoordsFor = function (color) {
-        var _this = this;
         if (!misc_1.isPresent(color)) {
             return;
         }
@@ -31,23 +33,12 @@ var ColorPaletteService = /** @class */ (function () {
         if (misc_1.isPresent(parsedColor)) {
             colors.push(parsedColor.toCss(), parsedColor.toCssRgba());
         }
-        var _loop_1 = function (row) {
-            var _loop_2 = function (col) {
-                if (colors.some(function (c) { return c === _this.colorRows[row][col]; })) {
-                    return { value: { row: row, col: col } };
+        for (var row = 0; row < this.colorRows.length; row++) {
+            for (var col = 0; col < this.colorRows[row].length; col++) {
+                if (this.isInColors(colors, this.colorRows[row][col])) {
+                    return { row: row, col: col };
                 }
-            };
-            for (var col = 0; col < this_1.colorRows[row].length; col++) {
-                var state_2 = _loop_2(col);
-                if (typeof state_2 === "object")
-                    return state_2;
             }
-        };
-        var this_1 = this;
-        for (var row = 0; row < this.colorRows.length; row++) {
-            var state_1 = _loop_1(row);
-            if (typeof state_1 === "object")
-                return state_1.value;
         }
     };
     ColorPaletteService.prototype.getColorAt = function (cellCoords) {

package/dist/npm/input/Input.js

@@ -25,6 +25,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
@@ -149,8 +150,8 @@ var InputVue2 = {
     this.setValidity();
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     return {
       v3: v3,

package/dist/npm/input-separator/InputSeparator.js

@@ -11,6 +11,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 
 var package_metadata_1 = require("../package-metadata");
@@ -24,8 +25,8 @@ var InputSeparatorVue2 = {
     kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/npm/main.d.ts

@@ -1,5 +1,6 @@
 import { FormComponentValidity } from '@progress/kendo-vue-common';
 export { FormComponentValidity };
+export { ColorGradient, ColorGradientState } from './colors/ColorGradient';
 export { ColorPalette, ColorPaletteState } from './colors/ColorPalette';
 export * from './colors/ColorPicker';
 export * from './colors/interfaces/ColorPaletteChangeEvent';

package/dist/npm/main.js

@@ -10,6 +10,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var ColorGradient_1 = require("./colors/ColorGradient");
+Object.defineProperty(exports, "ColorGradient", { enumerable: true, get: function () { return ColorGradient_1.ColorGradient; } });
 var ColorPalette_1 = require("./colors/ColorPalette");
 Object.defineProperty(exports, "ColorPalette", { enumerable: true, get: function () { return ColorPalette_1.ColorPalette; } });
 __exportStar(require("./colors/ColorPicker"), exports);

package/dist/npm/maskedtextbox/MaskedTextBox.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 
 var masking_service_1 = require("./masking.service");
@@ -132,8 +133,8 @@ var MaskedTextBoxVue2 = {
     this.isPasted = false;
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     return {
       v3: v3,
@@ -384,8 +385,6 @@ var MaskedTextBoxVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var inputId = this.$props.id || this.inputId;
     var _a = this.$props,
@@ -431,26 +430,26 @@ var MaskedTextBoxVue2 = {
       type: this.$props.type,
       attrs: this.v3 ? undefined : {
         type: this.$props.type,
-        autoComplete: "off",
-        autoCorrect: "off",
-        autoCapitalize: "off",
-        spellCheck: false,
+        autocomplete: "off",
+        autocorrect: "off",
+        autocapitalize: "off",
+        spellcheck: false,
         id: inputId,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         name: this.$props.name,
-        tabIndex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
-        accessKey: this.$props.accessKey,
+        tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
+        accesskey: this.$props.accessKey,
         title: this.$props.title,
         disabled: this.$props.disabled || undefined,
-        readOnly: this.$props.readonly || undefined,
+        readonly: this.$props.readonly || undefined,
         placeholder: this.$props.placeholder,
         required: this.$props.required
       },
-      autoComplete: "off",
-      autoCorrect: "off",
-      autoCapitalize: "off",
-      spellCheck: false,
+      autocomplete: "off",
+      autocorrect: "off",
+      autocapitalize: "off",
+      spellcheck: false,
       "class": this.inputInnerClass,
       value: this.v3 ? newValue : null,
       domProps: this.v3 ? undefined : {
@@ -460,29 +459,27 @@ var MaskedTextBoxVue2 = {
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       name: this.$props.name,
-      tabIndex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
-      accessKey: this.$props.accessKey,
+      tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
+      accesskey: this.$props.accessKey,
       title: this.$props.title,
       disabled: this.$props.disabled || undefined,
-      readOnly: this.$props.readonly || undefined,
+      readonly: this.$props.readonly || undefined,
       placeholder: this.$props.placeholder,
       required: this.$props.required,
-      ref: this.v3 ? function (el) {
-        _this.inputRef = el;
-      } : 'input',
+      ref: kendo_vue_common_1.setRef(this, 'input'),
       onInput: this.onChangeHandler,
       on: this.v3 ? undefined : {
         "input": this.onChangeHandler,
         "paste": this.pasteHandler,
         "focus": this.focusHandler,
         "blur": this.blurHandler,
-        "dragStart": utils_1.returnFalse,
+        "dragstart": utils_1.returnFalse,
         "drop": utils_1.returnFalse
       },
       onPaste: this.pasteHandler,
       onFocus: this.focusHandler,
       onBlur: this.blurHandler,
-      onDragStart: utils_1.returnFalse,
+      onDragstart: utils_1.returnFalse,
       onDrop: utils_1.returnFalse
     }), this.$props.inputSuffix && h("span", {
       "class": "k-input-suffix"

package/dist/npm/numerictextbox/NumericTextBox.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 
@@ -156,7 +157,7 @@ var NumericTextBoxVue2 = {
     }
   },
   mounted: function mounted() {
-    this._input = this.v3 ? this.inputRef : this.$refs.input;
+    this._input = kendo_vue_common_1.getRef(this, 'input');
     this._elementWrapper = this.v3 ? this.elementWrapperRef : this.$refs.elementWrapper;
     this.$data.hasMounted = true;
 
@@ -487,8 +488,8 @@ var NumericTextBoxVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     var elementWrapperRef = ref(null);
     var kendoLocalizationService = inject('kendoLocalizationService', {});
@@ -503,8 +504,6 @@ var NumericTextBoxVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var _a = this.$props,
         iconName = _a.iconName,
@@ -555,33 +554,33 @@ var NumericTextBoxVue2 = {
     }), this.$props.inputPrefix && h("span", {
       "class": "k-input-prefix"
     }, [inputPrefix]), h("input", {
-      tabIndex: this.$props.tabIndex,
+      tabindex: this.$props.tabIndex,
       attrs: this.v3 ? undefined : {
-        tabIndex: this.$props.tabIndex,
-        accessKey: this.$props.accessKey,
+        tabindex: this.$props.tabIndex,
+        accesskey: this.$props.accessKey,
         disabled: this.$props.disabled,
         title: this.$props.title,
         "aria-valuemin": this.$props.min,
         "aria-valuemax": this.$props.max,
         placeholder: this.$props.placeholder,
         type: this.$props.inputType || 'tel',
-        spellCheck: false,
-        autoComplete: "off",
-        autoCorrect: "off",
+        spellcheck: false,
+        autocomplete: "off",
+        autocorrect: "off",
         id: inputId,
         "aria-valuenow": this.$data.currentValue !== null ? this.$data.currentValue : undefined,
         name: this.$props.name
       },
-      accessKey: this.$props.accessKey,
+      accesskey: this.$props.accessKey,
       disabled: this.$props.disabled,
       title: this.$props.title,
       "aria-valuemin": this.$props.min,
       "aria-valuemax": this.$props.max,
       placeholder: this.$props.placeholder,
       type: this.$props.inputType || 'tel',
-      spellCheck: false,
-      autoComplete: "off",
-      autoCorrect: "off",
+      spellcheck: false,
+      autocomplete: "off",
+      autocorrect: "off",
       "class": this.inputInnerClass,
       id: inputId,
       value: this.v3 ? this.looseValue : null,
@@ -604,9 +603,7 @@ var NumericTextBoxVue2 = {
       onFocus: this.emitFocus,
       onBlur: this.emitBlur,
       onPaste: this.onPasteHandler,
-      ref: this.v3 ? function (el) {
-        _this.inputRef = el;
-      } : 'input'
+      ref: kendo_vue_common_1.setRef(this, 'input')
     }), this.$props.inputSuffix && h("span", {
       "class": "k-input-suffix"
     }, [inputSuffix]), showValidationIcon && isValid && h("span", {

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1656415338,
+    publishDate: 1657541784,
     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/radiobutton/RadioButton.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 
@@ -65,7 +66,7 @@ var RadioButtonVue2 = {
     kendo_vue_common_2.validatePackage(package_metadata_1.packageMetadata);
   },
   mounted: function mounted() {
-    this.input = this.v3 ? this.inputRef : this.$refs.input;
+    this.input = kendo_vue_common_1.getRef(this, 'input');
   },
   computed: {
     inputClassName: function inputClassName() {
@@ -100,8 +101,8 @@ var RadioButtonVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     return {
       v3: v3,
@@ -109,8 +110,6 @@ var RadioButtonVue2 = {
     };
   },
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var defaultSlot = kendo_vue_common_1.getDefaultSlots(this);
     var _a = this.$props,
@@ -158,17 +157,15 @@ var RadioButtonVue2 = {
         id: id || this.calculatedId,
         name: name,
         disabled: disabled,
-        tabIndex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
+        tabindex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
         "aria-describedby": ariaDescribedBy
       },
       id: id || this.calculatedId,
       name: name,
       "class": this.inputClassName,
-      ref: this.v3 ? function (el) {
-        _this.inputRef = el;
-      } : 'input',
+      ref: kendo_vue_common_1.setRef(this, 'input'),
       disabled: disabled,
-      tabIndex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
+      tabindex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
       checked: this.v3 ? checked : null,
       domProps: this.v3 ? undefined : {
         "checked": checked,

package/dist/npm/radiobutton/RadioGroup.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 
@@ -135,8 +136,8 @@ var RadioGroupVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     return {
       v3: v3,

package/dist/npm/range-slider/RangeSlider.js

@@ -25,6 +25,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 
@@ -157,8 +158,8 @@ var RangeSliderVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     var kendoLocalizationService = inject('kendoLocalizationService', {});
     return {
@@ -246,14 +247,14 @@ var RangeSliderVue2 = {
         role: "slider",
         attrs: _this.v3 ? undefined : {
           role: "slider",
-          tabIndex: kendo_vue_common_1.getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
+          tabindex: kendo_vue_common_1.getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
           "aria-valuemin": _this.min,
           "aria-valuemax": Math.max(_this.max, _this.computedValue.end),
           "aria-valuenow": _this.computedValue.start,
           "aria-disabled": _this.disabled ? 'true' : undefined,
           title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle])
         },
-        tabIndex: kendo_vue_common_1.getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
+        tabindex: kendo_vue_common_1.getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
         "aria-valuemin": _this.min,
         "aria-valuemax": Math.max(_this.max, _this.computedValue.end),
         "aria-valuenow": _this.computedValue.start,
@@ -279,14 +280,14 @@ var RangeSliderVue2 = {
         role: "slider",
         attrs: _this.v3 ? undefined : {
           role: "slider",
-          tabIndex: kendo_vue_common_1.getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
+          tabindex: kendo_vue_common_1.getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
           "aria-valuemin": Math.min(_this.min, _this.computedValue.start),
           "aria-valuemax": _this.max,
           "aria-valuenow": _this.computedValue.end,
           "aria-disabled": _this.disabled ? 'true' : undefined,
           title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle])
         },
-        tabIndex: kendo_vue_common_1.getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
+        tabindex: kendo_vue_common_1.getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
         "aria-valuemin": Math.min(_this.min, _this.computedValue.start),
         "aria-valuemax": _this.max,
         "aria-valuenow": _this.computedValue.end,
@@ -344,14 +345,14 @@ var RangeSliderVue2 = {
       role: "slider",
       attrs: _this.v3 ? undefined : {
         role: "slider",
-        tabIndex: kendo_vue_common_1.getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
+        tabindex: kendo_vue_common_1.getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
         "aria-valuemin": _this.min,
         "aria-valuemax": Math.max(_this.max, _this.computedValue.end),
         "aria-valuenow": _this.computedValue.start,
         "aria-disabled": _this.disabled ? 'true' : undefined,
         title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle])
       },
-      tabIndex: kendo_vue_common_1.getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
+      tabindex: kendo_vue_common_1.getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
       "aria-valuemin": _this.min,
       "aria-valuemax": Math.max(_this.max, _this.computedValue.end),
       "aria-valuenow": _this.computedValue.start,
@@ -377,14 +378,14 @@ var RangeSliderVue2 = {
       role: "slider",
       attrs: _this.v3 ? undefined : {
         role: "slider",
-        tabIndex: kendo_vue_common_1.getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
+        tabindex: kendo_vue_common_1.getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
         "aria-valuemin": Math.min(_this.min, _this.computedValue.start),
         "aria-valuemax": _this.max,
         "aria-valuenow": _this.computedValue.end,
         "aria-disabled": _this.disabled ? 'true' : undefined,
         title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle])
       },
-      tabIndex: kendo_vue_common_1.getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
+      tabindex: kendo_vue_common_1.getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
       "aria-valuemin": Math.min(_this.min, _this.computedValue.start),
       "aria-valuemax": _this.max,
       "aria-valuenow": _this.computedValue.end,

package/dist/npm/slider/Slider.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 
@@ -33,6 +34,14 @@ var SliderVue2 = {
   model: {
     event: 'changemodel'
   },
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    'change': null,
+    'blur': null,
+    'focus': null
+  },
   props: {
     modelValue: {
       type: Number,
@@ -131,8 +140,8 @@ var SliderVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     var inputRef = ref(null);
     var kendoLocalizationService = inject('kendoLocalizationService', {});
     return {
@@ -162,7 +171,7 @@ var SliderVue2 = {
         dir: this.currentDir,
         role: "slider",
         id: this.$props.id,
-        tabIndex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined)
+        tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined)
       },
       "aria-valuemax": this.$props.max,
       "aria-valuenow": this.computedValue,
@@ -173,7 +182,7 @@ var SliderVue2 = {
       role: "slider",
       id: this.$props.id,
       style: this.$props.style,
-      tabIndex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
+      tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
       onFocus: this.onFocus,
       on: this.v3 ? undefined : {
         "focus": this.onFocus,
@@ -321,11 +330,13 @@ var SliderVue2 = {
 
       return false;
     },
-    onFocus: function onFocus() {
+    onFocus: function onFocus(event) {
       this.currentFocused = true;
+      this.$emit('focus', event);
     },
-    onBlur: function onBlur() {
+    onBlur: function onBlur(event) {
       this.currentFocused = false;
+      this.$emit('blur', event);
     },
     onKeyDown: function onKeyDown(e) {
       var newValue = undefined;

package/dist/npm/slider/SliderLabel.js

@@ -25,6 +25,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
@@ -68,8 +69,8 @@ var SliderLabelVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };