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

package/dist/es/radiobutton/RadioButton.js

@@ -2,9 +2,10 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { guid, getTabIndex, getDefaultSlots, templateRendering, getTemplate, getListeners, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { guid, getTabIndex, getDefaultSlots, templateRendering, getTemplate, getListeners, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
 import { validatePackage } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
@@ -54,7 +55,7 @@ var RadioButtonVue2 = {
     validatePackage(packageMetadata);
   },
   mounted: function mounted() {
-    this.input = this.v3 ? this.inputRef : this.$refs.input;
+    this.input = getRef(this, 'input');
   },
   computed: {
     inputClassName: function inputClassName() {
@@ -89,8 +90,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,
@@ -98,8 +99,6 @@ var RadioButtonVue2 = {
     };
   },
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
     var _a = this.$props,
@@ -147,17 +146,15 @@ var RadioButtonVue2 = {
         id: id || this.calculatedId,
         name: name,
         disabled: disabled,
-        tabIndex: getTabIndex(tabIndex, disabled),
+        tabindex: 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: setRef(this, 'input'),
       disabled: disabled,
-      tabIndex: getTabIndex(tabIndex, disabled),
+      tabindex: getTabIndex(tabIndex, disabled),
       checked: this.v3 ? checked : null,
       domProps: this.v3 ? undefined : {
         "checked": checked,

package/dist/es/radiobutton/RadioGroup.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 import { RadioButton } from './RadioButton';
@@ -124,8 +125,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/es/range-slider/RangeSlider.js

@@ -18,6 +18,7 @@ var __assign = this && this.__assign || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 import { Draggable, Keys, // useDir,
@@ -145,8 +146,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 {
@@ -234,14 +235,14 @@ var RangeSliderVue2 = {
         role: "slider",
         attrs: _this.v3 ? undefined : {
           role: "slider",
-          tabIndex: getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
+          tabindex: 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(sliderDragTitle, messages[sliderDragTitle])
         },
-        tabIndex: getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
+        tabindex: 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,
@@ -267,14 +268,14 @@ var RangeSliderVue2 = {
         role: "slider",
         attrs: _this.v3 ? undefined : {
           role: "slider",
-          tabIndex: getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
+          tabindex: 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(sliderDragTitle, messages[sliderDragTitle])
         },
-        tabIndex: getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
+        tabindex: 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,
@@ -332,14 +333,14 @@ var RangeSliderVue2 = {
       role: "slider",
       attrs: _this.v3 ? undefined : {
         role: "slider",
-        tabIndex: getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
+        tabindex: 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(sliderDragTitle, messages[sliderDragTitle])
       },
-      tabIndex: getTabIndex(_this.startTabIndex, _this.$props.disabled, undefined),
+      tabindex: 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,
@@ -365,14 +366,14 @@ var RangeSliderVue2 = {
       role: "slider",
       attrs: _this.v3 ? undefined : {
         role: "slider",
-        tabIndex: getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
+        tabindex: 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(sliderDragTitle, messages[sliderDragTitle])
       },
-      tabIndex: getTabIndex(_this.endTabIndex, _this.$props.disabled, undefined),
+      tabindex: 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/es/slider/Slider.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 import { Button } from '@progress/kendo-vue-buttons';
@@ -19,6 +20,14 @@ var SliderVue2 = {
   model: {
     event: 'changemodel'
   },
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    'change': null,
+    'blur': null,
+    'focus': null
+  },
   props: {
     modelValue: {
       type: Number,
@@ -117,8 +126,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 {
@@ -148,7 +157,7 @@ var SliderVue2 = {
         dir: this.currentDir,
         role: "slider",
         id: this.$props.id,
-        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined)
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined)
       },
       "aria-valuemax": this.$props.max,
       "aria-valuenow": this.computedValue,
@@ -159,7 +168,7 @@ var SliderVue2 = {
       role: "slider",
       id: this.$props.id,
       style: this.$props.style,
-      tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
       onFocus: this.onFocus,
       on: this.v3 ? undefined : {
         "focus": this.onFocus,
@@ -307,11 +316,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/es/slider/SliderLabel.js

@@ -18,6 +18,7 @@ var __assign = this && this.__assign || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 import { getDefaultSlots } from '@progress/kendo-vue-common';
 /**
@@ -59,8 +60,8 @@ var SliderLabelVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/switch/Switch.js

@@ -2,7 +2,8 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
-import { guid, noop, Keys, getTabIndex, validatePackage, isRtl, kendoThemeMaps } from '@progress/kendo-vue-common';
+var isV3 = allVue.version[0] === '3';
+import { guid, noop, Keys, getTabIndex, validatePackage, isRtl, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, switchValidation } from './../messages';
 import { packageMetadata } from '../package-metadata';
@@ -136,8 +137,8 @@ var SwitchVue2 = {
     }
   },
   mounted: function mounted() {
-    this._element = this.v3 ? this.elementRef : this.$refs.element;
-    this.input = this.v3 ? this.inputRef : this.$refs.input;
+    this._element = getRef(this, 'element');
+    this.input = getRef(this, 'input');
     this.currentDir = this.$props.dir !== undefined ? this.$props.dir : isRtl(this.$el) ? 'rtl' : 'ltr';
     this.setValidity();
   },
@@ -145,16 +146,14 @@ var SwitchVue2 = {
     this.setValidity();
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var _a = this.$props,
         disabled = _a.disabled,
@@ -189,24 +188,22 @@ var SwitchVue2 = {
         "aria-disabled": disabled || undefined,
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
-        tabIndex: getTabIndex(tabIndex, disabled, undefined),
-        accessKey: this.$props.accessKey
+        tabindex: getTabIndex(tabIndex, disabled, undefined),
+        accesskey: this.$props.accessKey
       },
       role: 'switch',
       "aria-checked": this.computedValue,
       "aria-disabled": disabled || undefined,
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
-      ref: this.v3 ? function (el) {
-        _this.elementRef = el;
-      } : 'element',
-      tabIndex: getTabIndex(tabIndex, disabled, undefined),
-      accessKey: this.$props.accessKey
+      ref: setRef(this, 'element'),
+      tabindex: getTabIndex(tabIndex, disabled, undefined),
+      accesskey: this.$props.accessKey
     }, [h("input", {
       type: "checkbox",
       attrs: this.v3 ? undefined : {
         type: "checkbox",
-        tabIndex: -1,
+        tabindex: -1,
         name: this.$props.name,
         required: required !== undefined ? required : false,
         "aria-hidden": true
@@ -216,10 +213,8 @@ var SwitchVue2 = {
         "checked": this.$props.checked,
         "value": this.computedValue
       },
-      ref: this.v3 ? function (el) {
-        _this.inputRef = el;
-      } : 'input',
-      tabIndex: -1,
+      ref: setRef(this, 'input'),
+      tabindex: -1,
       name: this.$props.name,
       required: required !== undefined ? required : false,
       "aria-hidden": true,

package/dist/es/textarea/TextArea.js

@@ -18,6 +18,7 @@ var __assign = this && this.__assign || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { guid, isRtl, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate // useDir,
 } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
@@ -193,8 +194,8 @@ var TextAreaVue2 = {
     this.setValidity();
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/npm/checkbox/Checkbox.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;
 
@@ -157,7 +158,7 @@ var CheckboxVue2 = {
     }
   },
   mounted: function mounted() {
-    this.input = this.v3 ? this.inputRef : this.$refs.input;
+    this.input = kendo_vue_common_1.getRef(this, 'input');
 
     if (!this.currentDir && window && this.$el) {
       // Note: getComputedStyle forces reflow
@@ -172,14 +173,14 @@ var CheckboxVue2 = {
   },
   updated: function updated() {
     if (!this.input) {
-      this.input = this.v3 ? this.inputRef : this.$refs.input;
+      this.input = kendo_vue_common_1.getRef(this, 'input');
     }
 
     this.setValidity();
   },
   // @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 {
@@ -220,8 +221,6 @@ var CheckboxVue2 = {
     }, _a["k-checkbox-" + kendo_vue_common_1.kendoThemeMaps.sizeMap[size]] = size, _a["k-rounded-" + kendo_vue_common_1.kendoThemeMaps.roundedMap[rounded]] = rounded, _a['k-state-indeterminate'] = this.indeterminateProp, _a['k-state-invalid k-invalid'] = !(this.isValid || validityStyles !== undefined || validityStyles === true), _a));
 
     var checkboxInput = function checkboxInput() {
-      var _this = this;
-
       return h("input", {
         type: 'checkbox',
         attrs: this.v3 ? undefined : {
@@ -231,7 +230,7 @@ var CheckboxVue2 = {
           "aria-labelledby": ariaLabelledBy,
           "aria-describedby": ariaDescribedBy,
           disabled: disabled,
-          tabIndex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
+          tabindex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
           role: 'checkbox',
           required: required !== undefined ? required : false,
           "aria-checked": this.computedChecked || this.checkedProp ? true : this.indeterminateProp ? 'mixed' : false,
@@ -240,9 +239,7 @@ var CheckboxVue2 = {
         "class": inputClasses,
         name: name,
         id: id || this.calculatedId,
-        ref: this.v3 ? function (el) {
-          _this.inputRef = el;
-        } : 'input',
+        ref: kendo_vue_common_1.setRef(this, 'input'),
         "aria-labelledby": ariaLabelledBy,
         "aria-describedby": ariaDescribedBy,
         checked: this.v3 ? Boolean(this.checkedProp) : null,
@@ -250,7 +247,7 @@ var CheckboxVue2 = {
           "checked": Boolean(this.checkedProp)
         },
         disabled: disabled,
-        tabIndex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
+        tabindex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
         role: 'checkbox',
         required: required !== undefined ? required : false,
         "aria-checked": this.computedChecked || this.checkedProp ? true : this.indeterminateProp ? 'mixed' : false,

package/dist/npm/colors/ColorContrastLabels.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_intl_1 = require("@progress/kendo-vue-intl");
 
@@ -32,8 +33,8 @@ var ColorContrastLabelsVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/npm/colors/ColorContrastSvg.d.ts

@@ -8,7 +8,7 @@ import { HSVA } from './models/hsva';
  * @hidden
  */
 export interface ColorContrastSvgProps {
-    metrics: ClientRect | undefined;
+    metrics: any;
     backgroundColor: string;
     hsva: HSVA;
 }

package/dist/npm/colors/ColorContrastSvg.js

@@ -9,6 +9,7 @@ var Vue = require("vue");
 
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 
 var svg_calc_1 = require("./utils/svg-calc");
 
@@ -29,8 +30,8 @@ var ColorContrastSvgVue2 = {
     hsva: Object
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/npm/colors/ColorGradient.d.ts

@@ -12,6 +12,7 @@ import { ColorGradientProps } from './interfaces/ColorGradientProps';
 export interface ColorGradientState {
     guidId: string;
     gradientWrapper: any;
+    alphaSlider: any;
 }
 /**
  * @hidden