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

package/dist/es/colors/FlatColorPicker.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { classNames, validatePackage, getTabIndex } from '@progress/kendo-vue-common';
 import { ButtonGroup, Button } from '@progress/kendo-vue-buttons';
 import { ColorPalette } from './ColorPalette';
@@ -54,21 +55,23 @@ var FlatColorPickerVue2 = {
     };
   },
   // @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 _this2 = this;
+
     var _this = this;
 
     var h = gh || createElement;
     return h("div", {
-      tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
       attrs: this.v3 ? undefined : {
-        tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled)
       },
       "class": classNames('k-flatcolorpicker k-coloreditor', {
         'k-disabled': this.$props.disabled
@@ -86,16 +89,24 @@ var FlatColorPickerVue2 = {
       return [// @ts-ignore  function children
       h(Button, {
         type: "button",
-        attrs: _this.v3 ? undefined : {
+        attrs: _this2.v3 ? undefined : {
           type: "button",
           togglable: true,
           fillMode: 'flat',
-          selected: _this.colorGradientView
+          selected: _this2.isColorGradient
         },
         togglable: true,
         fillMode: 'flat',
-        selected: _this.colorGradientView
-      }, _this.v3 ? function () {
+        selected: _this2.isColorGradient,
+        onClick: function onClick(e) {
+          return _this.handleViewChange(e, 'ColorGradient');
+        },
+        on: _this2.v3 ? undefined : {
+          "click": function onClick(e) {
+            return _this.handleViewChange(e, 'ColorGradient');
+          }
+        }
+      }, _this2.v3 ? function () {
         return [h("span", {
           "class": "k-icon k-i-color-canvas"
         })];
@@ -104,16 +115,24 @@ var FlatColorPickerVue2 = {
       })]), // @ts-ignore  function children
       h(Button, {
         type: "button",
-        attrs: _this.v3 ? undefined : {
+        attrs: _this2.v3 ? undefined : {
           type: "button",
           togglable: true,
           fillMode: 'flat',
-          selected: !_this.colorGradientView
+          selected: !_this2.isColorGradient
         },
         togglable: true,
         fillMode: 'flat',
-        selected: !_this.colorGradientView
-      }, _this.v3 ? function () {
+        selected: !_this2.isColorGradient,
+        onClick: function onClick(e) {
+          return _this.handleViewChange(e, 'ColorPalette');
+        },
+        on: _this2.v3 ? undefined : {
+          "click": function onClick(e) {
+            return _this.handleViewChange(e, 'ColorPalette');
+          }
+        }
+      }, _this2.v3 ? function () {
         return [h("span", {
           "class": "k-icon k-i-palette"
         })];
@@ -122,16 +141,24 @@ var FlatColorPickerVue2 = {
       })])];
     } : [h(Button, {
       type: "button",
-      attrs: _this.v3 ? undefined : {
+      attrs: _this2.v3 ? undefined : {
         type: "button",
         togglable: true,
         fillMode: 'flat',
-        selected: _this.colorGradientView
+        selected: _this2.isColorGradient
       },
       togglable: true,
       fillMode: 'flat',
-      selected: _this.colorGradientView
-    }, _this.v3 ? function () {
+      selected: _this2.isColorGradient,
+      onClick: function onClick(e) {
+        return _this.handleViewChange(e, 'ColorGradient');
+      },
+      on: _this2.v3 ? undefined : {
+        "click": function onClick(e) {
+          return _this.handleViewChange(e, 'ColorGradient');
+        }
+      }
+    }, _this2.v3 ? function () {
       return [h("span", {
         "class": "k-icon k-i-color-canvas"
       })];
@@ -139,16 +166,24 @@ var FlatColorPickerVue2 = {
       "class": "k-icon k-i-color-canvas"
     })]), h(Button, {
       type: "button",
-      attrs: _this.v3 ? undefined : {
+      attrs: _this2.v3 ? undefined : {
         type: "button",
         togglable: true,
         fillMode: 'flat',
-        selected: !_this.colorGradientView
+        selected: !_this2.isColorGradient
       },
       togglable: true,
       fillMode: 'flat',
-      selected: !_this.colorGradientView
-    }, _this.v3 ? function () {
+      selected: !_this2.isColorGradient,
+      onClick: function onClick(e) {
+        return _this.handleViewChange(e, 'ColorPalette');
+      },
+      on: _this2.v3 ? undefined : {
+        "click": function onClick(e) {
+          return _this.handleViewChange(e, 'ColorPalette');
+        }
+      }
+    }, _this2.v3 ? function () {
       return [h("span", {
         "class": "k-icon k-i-palette"
       })];
@@ -253,8 +288,12 @@ var FlatColorPickerVue2 = {
         this.$el.focus();
       }
     },
-    handleViewChange: function handleViewChange(viewType) {
+    handleViewChange: function handleViewChange(event, viewType) {
       this.currentView = viewType;
+      this.$emit('viewchange', {
+        event: event,
+        viewType: viewType
+      });
     },
     handleResetColor: function handleResetColor() {
       this.colorValue = 'rgba(255, 255, 255, 1)';
@@ -277,7 +316,7 @@ var FlatColorPickerVue2 = {
       }
     },
     handleFlatColorPickerBlur: function handleFlatColorPickerBlur() {
-      this.prevColor(this.colorValue);
+      this.prevColor = this.colorValue;
     }
   }
 };

package/dist/es/colors/HexInput.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { parseColor } from './utils/color-parser';
 import { isPresent } from './utils/misc';
 import { Input } from '../input/Input';
@@ -11,19 +12,30 @@ import { Input } from '../input/Input';
 
 var HexInputVue2 = {
   name: 'KendoHexInput',
+  // @ts-ignore
+  emits: {
+    'hexchange': null,
+    'blur': null,
+    'focus': null
+  },
   props: {
     hex: String,
     disabled: Boolean
   },
   data: function data() {
     return {
-      hex: this.$props.hex,
+      currentHex: this.$props.hex,
       originalHex: this.$props.hex
     };
   },
+  computed: {
+    computedHex: function computedHex() {
+      return this.hex !== undefined ? this.hex : this.currentHex;
+    }
+  },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };
@@ -32,16 +44,18 @@ var HexInputVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     return h(Input, {
-      value: this.hex,
+      value: this.computedHex,
       attrs: this.v3 ? undefined : {
-        value: this.hex,
+        value: this.computedHex,
         disabled: this.$props.disabled
       },
       onChange: this.onChange,
       on: this.v3 ? undefined : {
         "change": this.onChange,
+        "focus": this.onFocus,
         "blur": this.onBlur
       },
+      onFocus: this.onFocus,
       onBlur: this.onBlur,
       disabled: this.$props.disabled
     });
@@ -50,16 +64,21 @@ var HexInputVue2 = {
     onChange: function onChange(event) {
       var hex = event.target.value;
       var value = parseColor(hex, 'rgba');
-      this.hex = hex;
+      this.currentHex = hex;
 
       if (isPresent(value)) {
-        this.$props.onHexChange(hex, value, event);
+        this.$emit('hexchange', hex, value, event);
       }
     },
-    onBlur: function onBlur() {
+    onBlur: function onBlur(event) {
       if (!isPresent(parseColor(this.hex, 'rgba'))) {
-        this.hex = this.originalHex;
+        this.currentHex = this.originalHex;
       }
+
+      this.$emit('blur', event);
+    },
+    onFocus: function onFocus(event) {
+      this.$emit('focus', event);
     }
   }
 };

package/dist/es/colors/Picker.js

@@ -2,6 +2,7 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 import { Popup } from '@progress/kendo-vue-popup';
 import { classNames, getDefaultSlots } from '@progress/kendo-vue-common';
 /**
@@ -44,8 +45,8 @@ var PickerVue2 = {
     }
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

package/dist/es/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/es/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/es/colors/utils/color-palette.service.js

@@ -18,8 +18,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 (!isPresent(color)) {
             return;
         }
@@ -28,23 +30,12 @@ var ColorPaletteService = /** @class */ (function () {
         if (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/es/input/Input.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 { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
@@ -138,8 +139,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/es/input-separator/InputSeparator.js

@@ -3,6 +3,7 @@ import { validatePackage } from '@progress/kendo-licensing';
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 import { packageMetadata } from '../package-metadata';
 /**
@@ -14,8 +15,8 @@ var InputSeparatorVue2 = {
     validatePackage(packageMetadata);
   },
   // @ts-ignore
-  setup: !gh ? undefined : function () {
-    var v3 = !!gh;
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
     return {
       v3: v3
     };

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

@@ -1,3 +1,4 @@
+export { ColorGradient } from './colors/ColorGradient';
 export { ColorPalette } from './colors/ColorPalette';
 export * from './colors/ColorPicker';
 export * from './colors/interfaces/ColorPaletteChangeEvent';

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -2,10 +2,11 @@
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+var isV3 = allVue.version[0] === '3';
 var ref = allVue.ref;
 import { MaskingService } from './masking.service';
 import { defaultRules, maskingChanged, returnFalse } from './utils';
-import { guid, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { guid, getTabIndex, validatePackage, kendoThemeMaps, templateDefinition, templateRendering, getListeners, getTemplate, setRef } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
  * @hidden
@@ -120,8 +121,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,
@@ -372,8 +373,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,
@@ -419,26 +418,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: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
-        accessKey: this.$props.accessKey,
+        tabindex: 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 : {
@@ -448,29 +447,27 @@ var MaskedTextBoxVue2 = {
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
       name: this.$props.name,
-      tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, true),
-      accessKey: this.$props.accessKey,
+      tabindex: 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: setRef(this, 'input'),
       onInput: this.onChangeHandler,
       on: this.v3 ? undefined : {
         "input": this.onChangeHandler,
         "paste": this.pasteHandler,
         "focus": this.focusHandler,
         "blur": this.blurHandler,
-        "dragStart": returnFalse,
+        "dragstart": returnFalse,
         "drop": returnFalse
       },
       onPaste: this.pasteHandler,
       onFocus: this.focusHandler,
       onBlur: this.blurHandler,
-      onDragStart: returnFalse,
+      onDragstart: returnFalse,
       onDrop: returnFalse
     }), this.$props.inputSuffix && h("span", {
       "class": "k-input-suffix"

package/dist/es/numerictextbox/NumericTextBox.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 { canUseDOM, getDefaultSlots, getListeners, getTemplate, kendoThemeMaps, templateDefinition, templateRendering } from '@progress/kendo-vue-common';
+import { canUseDOM, getDefaultSlots, getListeners, getRef, getTemplate, kendoThemeMaps, setRef, templateDefinition, templateRendering } from '@progress/kendo-vue-common';
 import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
 import { guid, validatePackage } from '@progress/kendo-vue-common';
 import { Button as KButton } from '@progress/kendo-vue-buttons';
@@ -141,7 +142,7 @@ var NumericTextBoxVue2 = {
     }
   },
   mounted: function mounted() {
-    this._input = this.v3 ? this.inputRef : this.$refs.input;
+    this._input = getRef(this, 'input');
     this._elementWrapper = this.v3 ? this.elementWrapperRef : this.$refs.elementWrapper;
     this.$data.hasMounted = true;
 
@@ -472,8 +473,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', {});
@@ -488,8 +489,6 @@ var NumericTextBoxVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this = this;
-
     var h = gh || createElement;
     var _a = this.$props,
         iconName = _a.iconName,
@@ -540,33 +539,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,
@@ -589,9 +588,7 @@ var NumericTextBoxVue2 = {
       onFocus: this.emitFocus,
       onBlur: this.emitBlur,
       onPaste: this.onPasteHandler,
-      ref: this.v3 ? function (el) {
-        _this.inputRef = el;
-      } : 'input'
+      ref: setRef(this, 'input')
     }), this.$props.inputSuffix && h("span", {
       "class": "k-input-suffix"
     }, [inputSuffix]), showValidationIcon && isValid && h("span", {

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var 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'
 };