@progress/kendo-vue-inputs 3.4.5-dev.202207300828 → 3.5.0-dev.202208010922

package/dist/es/colors/ColorGradient.js

@@ -9,7 +9,7 @@ import { packageMetadata } from '../package-metadata';
 import { Slider } from './../main';
 import { fitIntoBounds, isPresent } from './utils/misc';
 import { getColorFromHue, parseColor, getHSV, getColorFromHSV, getRGBA, getColorFromRGBA } from './utils/color-parser';
-import { cacheHsva, removeCachedColor, getCachedHsva, getCachedRgba, getCachedHex, cacheRgba, cacheHex } from './utils/color-cache';
+import { removeCachedColor } from './utils/color-cache';
 import { ColorInput } from './ColorInput';
 import { ColorContrastLabels } from './ColorContrastLabels';
 import { ColorContrastSvg } from './ColorContrastSvg';
@@ -66,11 +66,11 @@ var ColorGradientVue2 = {
     this.guid = guid();
   },
   computed: {
-    isUncontrolled: function isUncontrolled() {
-      return this.$props.value === undefined;
+    valueSet: function valueSet() {
+      return this.value || this.modelValue || this.modelRgbaValue;
     },
     computedValue: function computedValue() {
-      var value = this.value || this.defaultValue || this.modelValue || this.modelRgbaValue || this.currentValue || parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
+      var value = this.valueSet || this.currentValue || this.defaultValue || parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
 
       if (!isPresent(parseColor(value, 'hex', this.opacity))) {
         // Validate/sanitize the input.
@@ -80,13 +80,13 @@ var ColorGradientVue2 = {
       return value;
     },
     hsva: function hsva() {
-      return this.currentHsva || getCachedHsva(this.guid, this.computedValue) || getHSV(this.computedValue);
+      return this.valueSet ? getHSV(this.computedValue) : this.currentHsva || getHSV(this.computedValue);
     },
     rgba: function rgba() {
-      return this.currentRgba || getCachedRgba(this.guid, this.computedValue) || getRGBA(this.computedValue);
+      return this.valueSet ? getRGBA(this.computedValue) : this.currentRgba;
     },
     hex: function hex() {
-      return this.currentHex || getCachedHex(this.guid, this.computedValue) || parseColor(this.computedValue, 'hex', this.opacity);
+      return this.valueSet ? parseColor(this.computedValue, 'hex', this.opacity) : this.currentHex;
     },
     computedBgColor: function computedBgColor() {
       return this.currentBgColor || getColorFromHue(this.hsva.h);
@@ -196,13 +196,13 @@ var ColorGradientVue2 = {
       tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
-      onFocusin: this.onFocus,
+      onFocus: this.onFocus,
       on: this.v3 ? undefined : {
-        "focusin": this.onFocus,
-        "focusout": this.onBlur,
+        "focus": this.onFocus,
+        "blur": this.onBlur,
         "keydown": this.onKeyDownHandler
       },
-      onFocusout: this.onBlur,
+      onBlur: this.onBlur,
       onKeydown: this.onKeyDownHandler
     }, [h("div", {
       "class": "k-colorgradient-canvas k-hstack"
@@ -351,33 +351,21 @@ var ColorGradientVue2 = {
     },
     onHexChange: function onHexChange(hex, value, event) {
       var rgba = getRGBA(value);
-
-      if (this.isUncontrolled) {
-        var hsva = getHSV(value);
-        this.currentHsva = hsva;
-        this.currentBgColor = getColorFromHue(hsva.h);
-        this.currentRgba = rgba;
-        this.currentHex = hex;
-      } else {
-        cacheHex(this.guid, value, hex);
-      }
-
+      var hsva = getHSV(value);
+      this.currentHsva = hsva;
+      this.currentBgColor = getColorFromHue(hsva.h);
+      this.currentRgba = rgba;
+      this.currentHex = hex;
       this.dispatchChangeEvent(value, event.event, hex, value);
     },
     onRgbaChange: function onRgbaChange(rgba, event) {
       var value = getColorFromRGBA(rgba);
       var hex = parseColor(value, 'hex', this.opacity);
-
-      if (this.isUncontrolled) {
-        var hsva = getHSV(value);
-        this.currentHsva = hsva;
-        this.currentBgColor = getColorFromHue(hsva.h);
-        this.currentRgba = rgba;
-        this.currentHex = hex;
-      } else {
-        cacheRgba(this.guid, value, rgba);
-      }
-
+      var hsva = getHSV(value);
+      this.currentHsva = hsva;
+      this.currentBgColor = getColorFromHue(hsva.h);
+      this.currentRgba = rgba;
+      this.currentHex = hex;
       this.dispatchChangeEvent(value, event.event, hex, value);
     },
     onAlphaSliderChange: function onAlphaSliderChange(event) {
@@ -461,16 +449,10 @@ var ColorGradientVue2 = {
       var value = getColorFromHSV(hsva);
       var hex = parseColor(value, 'hex', this.opacity);
       var rgba = parseColor(value, 'rgba');
-
-      if (this.isUncontrolled) {
-        this.currentHsva = hsva;
-        this.currentBgColor = getColorFromHue(hsva.h);
-        this.currentRgba = getRGBA(value);
-        this.currentHex = hex;
-      } else {
-        cacheHsva(this.guid, value, hsva);
-      }
-
+      this.currentHsva = hsva;
+      this.currentBgColor = getColorFromHue(hsva.h);
+      this.currentRgba = getRGBA(value);
+      this.currentHex = hex;
       this.dispatchChangeEvent(value, event, hex, rgba);
     },
     dispatchChangeEvent: function dispatchChangeEvent(value, event, hex, rgbaValue) {

package/dist/es/colors/ColorInput.js

@@ -44,7 +44,12 @@ var ColorInputVue2 = {
   },
   props: {
     tabIndex: Number,
-    rgba: Object,
+    rgba: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
     hex: String,
     opacity: Boolean,
     disabled: Boolean

package/dist/es/colors/ColorPicker.js

@@ -234,7 +234,7 @@ var ColorPickerVue2 = {
         on: this.v3 ? undefined : {
           'keydown': this.onKeyDownHandler,
           'change': this.onFlatChangeHandler,
-          'blur': this.onBlurHandler,
+          'focusout': this.onBlurHandler,
           'viewchange': this.onViewChange
         },
         ref: setRef(this, 'flatcolorpicker'),
@@ -255,8 +255,10 @@ var ColorPickerVue2 = {
           gradientSettings: this.gradientSettings
         }, this.flatColorPickerSettings),
         onChange: this.onFlatChangeHandler,
-        onBlur: this.onBlurHandler,
-        onViewchange: this.onViewChange
+        onFocusout: this.onBlurHandler,
+        onViewchange: this.onViewChange,
+        paletteSettings: this.paletteSettings,
+        gradientSettings: this.gradientSettings
       }, this.flatColorPickerSettings));
     }; // const dir = useDir(focusableElementGuid, props.dir);
 
@@ -429,8 +431,11 @@ var ColorPickerVue2 = {
     isViewFocused: function isViewFocused() {
       return !!(document.activeElement && document.activeElement.closest("#" + this._popupId));
     },
-    onButtonBlur: function onButtonBlur() {
+    onButtonBlur: function onButtonBlur(event) {
       this.focused = this.isViewFocused();
+      this.$emit('blur', {
+        event: event
+      });
     },
     onFocusHandler: function onFocusHandler(event) {
       if (this.blurTimeoutRef) {
@@ -458,14 +463,11 @@ var ColorPickerVue2 = {
       this.focused = viewIsFocused;
       this.blurTimeoutRef = undefined;
     },
-    onBlurHandler: function onBlurHandler(event) {
+    onBlurHandler: function onBlurHandler() {
       clearTimeout(this.blurTimeoutRef);
       this.palette = getRef(this, 'palette');
       this.gradient = getRef(this, 'gradient');
       this.blurTimeoutRef = setTimeout(this.onBlurTimeout, 200);
-      this.$emit('blur', {
-        event: event
-      });
     },
     onViewChange: function onViewChange(event) {
       this.$emit('viewchange', event);

package/dist/es/colors/FlatColorPicker.js

@@ -42,6 +42,7 @@ var FlatColorPickerVue2 = {
     'update:modelRgbaValue': null,
     'focus': null,
     'blur': null,
+    'focusout': null,
     'keydown': null,
     'change': null
   },
@@ -210,13 +211,15 @@ var FlatColorPickerVue2 = {
         tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled),
         "aria-disabled": this.$props.disabled
       },
-      onFocusin: this.onFocus,
+      onFocus: this.onFocus,
       on: this.v3 ? undefined : {
-        "focusin": this.onFocus,
-        "focusout": this.onBlur,
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "focusout": this.onFocusout,
         "keydown": this.onKeyDownHandler
       },
-      onFocusout: this.onBlur,
+      onBlur: this.onBlur,
+      onFocusout: this.onFocusout,
       onKeydown: this.onKeyDownHandler,
       "class": classNames('k-flatcolorpicker k-coloreditor', {
         'k-disabled': this.$props.disabled
@@ -519,6 +522,12 @@ var FlatColorPickerVue2 = {
         event: event,
         target: this
       });
+    },
+    onFocusout: function onFocusout(event) {
+      this.$emit('focusout', {
+        event: event,
+        target: this
+      });
     }
   }
 };

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: 1659169206,
+    publishDate: 1659345217,
     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/colors/ColorGradient.js

@@ -86,11 +86,11 @@ var ColorGradientVue2 = {
     this.guid = kendo_vue_common_1.guid();
   },
   computed: {
-    isUncontrolled: function isUncontrolled() {
-      return this.$props.value === undefined;
+    valueSet: function valueSet() {
+      return this.value || this.modelValue || this.modelRgbaValue;
     },
     computedValue: function computedValue() {
-      var value = this.value || this.defaultValue || this.modelValue || this.modelRgbaValue || this.currentValue || color_parser_1.parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
+      var value = this.valueSet || this.currentValue || this.defaultValue || color_parser_1.parseColor(DEFAULT_SELECTED_COLOR, FORMAT);
 
       if (!misc_1.isPresent(color_parser_1.parseColor(value, 'hex', this.opacity))) {
         // Validate/sanitize the input.
@@ -100,13 +100,13 @@ var ColorGradientVue2 = {
       return value;
     },
     hsva: function hsva() {
-      return this.currentHsva || color_cache_1.getCachedHsva(this.guid, this.computedValue) || color_parser_1.getHSV(this.computedValue);
+      return this.valueSet ? color_parser_1.getHSV(this.computedValue) : this.currentHsva || color_parser_1.getHSV(this.computedValue);
     },
     rgba: function rgba() {
-      return this.currentRgba || color_cache_1.getCachedRgba(this.guid, this.computedValue) || color_parser_1.getRGBA(this.computedValue);
+      return this.valueSet ? color_parser_1.getRGBA(this.computedValue) : this.currentRgba;
     },
     hex: function hex() {
-      return this.currentHex || color_cache_1.getCachedHex(this.guid, this.computedValue) || color_parser_1.parseColor(this.computedValue, 'hex', this.opacity);
+      return this.valueSet ? color_parser_1.parseColor(this.computedValue, 'hex', this.opacity) : this.currentHex;
     },
     computedBgColor: function computedBgColor() {
       return this.currentBgColor || color_parser_1.getColorFromHue(this.hsva.h);
@@ -216,13 +216,13 @@ var ColorGradientVue2 = {
       tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled),
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy,
-      onFocusin: this.onFocus,
+      onFocus: this.onFocus,
       on: this.v3 ? undefined : {
-        "focusin": this.onFocus,
-        "focusout": this.onBlur,
+        "focus": this.onFocus,
+        "blur": this.onBlur,
         "keydown": this.onKeyDownHandler
       },
-      onFocusout: this.onBlur,
+      onBlur: this.onBlur,
       onKeydown: this.onKeyDownHandler
     }, [h("div", {
       "class": "k-colorgradient-canvas k-hstack"
@@ -371,33 +371,21 @@ var ColorGradientVue2 = {
     },
     onHexChange: function onHexChange(hex, value, event) {
       var rgba = color_parser_1.getRGBA(value);
-
-      if (this.isUncontrolled) {
-        var hsva = color_parser_1.getHSV(value);
-        this.currentHsva = hsva;
-        this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
-        this.currentRgba = rgba;
-        this.currentHex = hex;
-      } else {
-        color_cache_1.cacheHex(this.guid, value, hex);
-      }
-
+      var hsva = color_parser_1.getHSV(value);
+      this.currentHsva = hsva;
+      this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
+      this.currentRgba = rgba;
+      this.currentHex = hex;
       this.dispatchChangeEvent(value, event.event, hex, value);
     },
     onRgbaChange: function onRgbaChange(rgba, event) {
       var value = color_parser_1.getColorFromRGBA(rgba);
       var hex = color_parser_1.parseColor(value, 'hex', this.opacity);
-
-      if (this.isUncontrolled) {
-        var hsva = color_parser_1.getHSV(value);
-        this.currentHsva = hsva;
-        this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
-        this.currentRgba = rgba;
-        this.currentHex = hex;
-      } else {
-        color_cache_1.cacheRgba(this.guid, value, rgba);
-      }
-
+      var hsva = color_parser_1.getHSV(value);
+      this.currentHsva = hsva;
+      this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
+      this.currentRgba = rgba;
+      this.currentHex = hex;
       this.dispatchChangeEvent(value, event.event, hex, value);
     },
     onAlphaSliderChange: function onAlphaSliderChange(event) {
@@ -481,16 +469,10 @@ var ColorGradientVue2 = {
       var value = color_parser_1.getColorFromHSV(hsva);
       var hex = color_parser_1.parseColor(value, 'hex', this.opacity);
       var rgba = color_parser_1.parseColor(value, 'rgba');
-
-      if (this.isUncontrolled) {
-        this.currentHsva = hsva;
-        this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
-        this.currentRgba = color_parser_1.getRGBA(value);
-        this.currentHex = hex;
-      } else {
-        color_cache_1.cacheHsva(this.guid, value, hsva);
-      }
-
+      this.currentHsva = hsva;
+      this.currentBgColor = color_parser_1.getColorFromHue(hsva.h);
+      this.currentRgba = color_parser_1.getRGBA(value);
+      this.currentHex = hex;
       this.dispatchChangeEvent(value, event, hex, rgba);
     },
     dispatchChangeEvent: function dispatchChangeEvent(value, event, hex, rgbaValue) {

package/dist/npm/colors/ColorInput.js

@@ -59,7 +59,12 @@ var ColorInputVue2 = {
   },
   props: {
     tabIndex: Number,
-    rgba: Object,
+    rgba: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
     hex: String,
     opacity: Boolean,
     disabled: Boolean

package/dist/npm/colors/ColorPicker.js

@@ -247,7 +247,7 @@ var ColorPickerVue2 = {
         on: this.v3 ? undefined : {
           'keydown': this.onKeyDownHandler,
           'change': this.onFlatChangeHandler,
-          'blur': this.onBlurHandler,
+          'focusout': this.onBlurHandler,
           'viewchange': this.onViewChange
         },
         ref: kendo_vue_common_1.setRef(this, 'flatcolorpicker'),
@@ -268,8 +268,10 @@ var ColorPickerVue2 = {
           gradientSettings: this.gradientSettings
         }, this.flatColorPickerSettings),
         onChange: this.onFlatChangeHandler,
-        onBlur: this.onBlurHandler,
-        onViewchange: this.onViewChange
+        onFocusout: this.onBlurHandler,
+        onViewchange: this.onViewChange,
+        paletteSettings: this.paletteSettings,
+        gradientSettings: this.gradientSettings
       }, this.flatColorPickerSettings));
     }; // const dir = useDir(focusableElementGuid, props.dir);
 
@@ -442,8 +444,11 @@ var ColorPickerVue2 = {
     isViewFocused: function isViewFocused() {
       return !!(document.activeElement && document.activeElement.closest("#" + this._popupId));
     },
-    onButtonBlur: function onButtonBlur() {
+    onButtonBlur: function onButtonBlur(event) {
       this.focused = this.isViewFocused();
+      this.$emit('blur', {
+        event: event
+      });
     },
     onFocusHandler: function onFocusHandler(event) {
       if (this.blurTimeoutRef) {
@@ -471,14 +476,11 @@ var ColorPickerVue2 = {
       this.focused = viewIsFocused;
       this.blurTimeoutRef = undefined;
     },
-    onBlurHandler: function onBlurHandler(event) {
+    onBlurHandler: function onBlurHandler() {
       clearTimeout(this.blurTimeoutRef);
       this.palette = kendo_vue_common_1.getRef(this, 'palette');
       this.gradient = kendo_vue_common_1.getRef(this, 'gradient');
       this.blurTimeoutRef = setTimeout(this.onBlurTimeout, 200);
-      this.$emit('blur', {
-        event: event
-      });
     },
     onViewChange: function onViewChange(event) {
       this.$emit('viewchange', event);

package/dist/npm/colors/FlatColorPicker.js

@@ -59,6 +59,7 @@ var FlatColorPickerVue2 = {
     'update:modelRgbaValue': null,
     'focus': null,
     'blur': null,
+    'focusout': null,
     'keydown': null,
     'change': null
   },
@@ -227,13 +228,15 @@ var FlatColorPickerVue2 = {
         tabindex: kendo_vue_common_1.getTabIndex(this.$props.tabIndex, this.$props.disabled),
         "aria-disabled": this.$props.disabled
       },
-      onFocusin: this.onFocus,
+      onFocus: this.onFocus,
       on: this.v3 ? undefined : {
-        "focusin": this.onFocus,
-        "focusout": this.onBlur,
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "focusout": this.onFocusout,
         "keydown": this.onKeyDownHandler
       },
-      onFocusout: this.onBlur,
+      onBlur: this.onBlur,
+      onFocusout: this.onFocusout,
       onKeydown: this.onKeyDownHandler,
       "class": kendo_vue_common_1.classNames('k-flatcolorpicker k-coloreditor', {
         'k-disabled': this.$props.disabled
@@ -536,6 +539,12 @@ var FlatColorPickerVue2 = {
         event: event,
         target: this
       });
+    },
+    onFocusout: function onFocusout(event) {
+      this.$emit('focusout', {
+        event: event,
+        target: this
+      });
     }
   }
 };

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: 1659169206,
+    publishDate: 1659345217,
     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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-inputs",
   "description": "Kendo UI for Vue Input package",
-  "version": "3.4.5-dev.202207300828",
+  "version": "3.5.0-dev.202208010922",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -38,22 +38,22 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-buttons": "3.4.5-dev.202207300828",
-    "@progress/kendo-vue-common": "3.4.5-dev.202207300828",
-    "@progress/kendo-vue-labels": "3.4.5-dev.202207300828",
-    "@progress/kendo-vue-popup": "3.4.5-dev.202207300828"
+    "@progress/kendo-vue-buttons": "3.5.0-dev.202208010922",
+    "@progress/kendo-vue-common": "3.5.0-dev.202208010922",
+    "@progress/kendo-vue-labels": "3.5.0-dev.202208010922",
+    "@progress/kendo-vue-popup": "3.5.0-dev.202208010922"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.5",
     "@progress/kendo-date-math": "^1.5.4",
     "@progress/kendo-drawing": "^1.8.0",
     "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-buttons": "3.4.5-dev.202207300828",
-    "@progress/kendo-vue-dropdowns": "3.4.5-dev.202207300828",
-    "@progress/kendo-vue-form": "3.4.5-dev.202207300828",
-    "@progress/kendo-vue-intl": "3.4.5-dev.202207300828",
-    "@progress/kendo-vue-labels": "3.4.5-dev.202207300828",
-    "@progress/kendo-vue-tooltip": "3.4.5-dev.202207300828",
+    "@progress/kendo-vue-buttons": "3.5.0-dev.202208010922",
+    "@progress/kendo-vue-dropdowns": "3.5.0-dev.202208010922",
+    "@progress/kendo-vue-form": "3.5.0-dev.202208010922",
+    "@progress/kendo-vue-intl": "3.5.0-dev.202208010922",
+    "@progress/kendo-vue-labels": "3.5.0-dev.202208010922",
+    "@progress/kendo-vue-tooltip": "3.5.0-dev.202208010922",
     "cldr-core": "^41.0.0",
     "cldr-dates-full": "^41.0.0",
     "cldr-numbers-full": "^41.0.0"