@progress/kendo-vue-inputs 3.3.2 → 3.3.3-dev.202205261455

package/dist/es/input/Input.d.ts

@@ -89,6 +89,34 @@ export interface InputProps extends FormComponentProps {
      * Specifies the placeholder of an `input` element. Used to define if the input is empty.
      */
     placeholder?: string;
+    /**
+     * Defines a string prop that controls the input icon.
+     */
+    iconName: String;
+    /**
+     * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputPrefix: Boolean | String | Object | Function;
+    /**
+     * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputSuffix: Boolean | String | Object | Function;
+    /**
+     * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
+     */
+    showValidationIcon: Boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
+     */
+    showLoadingIcon: Boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
+     */
+    showClearButton: Boolean;
+    /**
+     * Defines additional class to the inner input element.
+     */
+    inputClass: String;
 }
 /**
  * @hidden
@@ -121,7 +149,7 @@ export interface InputMethods {
     isInvalid: (state: any) => any;
     setValidity: () => void;
     handleInput?: () => void;
-    handleChange?: (event: any) => void;
+    handleChange: (event: any) => void;
     handleKeyup?: (event: any) => void;
     handleKeydown?: (event: any) => void;
     handleKeypress?: (event: any) => void;

package/dist/es/input/Input.js

@@ -19,7 +19,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
-import { guid, validatePackage, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { guid, templateDefinition, validatePackage, kendoThemeMaps, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { FloatingLabel } from '@progress/kendo-vue-labels';
 var InputVue2 = {
@@ -99,7 +99,14 @@ var InputVue2 = {
     validityStyles: {
       type: Boolean,
       default: true
-    }
+    },
+    iconName: String,
+    inputPrefix: templateDefinition,
+    inputSuffix: templateDefinition,
+    showValidationIcon: Boolean,
+    showLoadingIcon: Boolean,
+    showClearButton: Boolean,
+    inputClass: String
   },
   data: function data() {
     return {
@@ -138,12 +145,15 @@ var InputVue2 = {
     var _this = this;
 
     var h = gh || createElement;
-    var listeners = this.v3 ? this.$attrs : this.$listeners;
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var _a = this.$props,
         label = _a.label,
         id = _a.id,
-        required = _a.required;
+        required = _a.required,
+        iconName = _a.iconName,
+        showValidationIcon = _a.showValidationIcon,
+        showLoadingIcon = _a.showLoadingIcon,
+        showClearButton = _a.showClearButton;
     var inputId = id || this._inputId;
     var textbox = h('input', __assign(__assign({
       domProps: this.v3 ? null : __assign(__assign({}, this.$attrs), {
@@ -183,9 +193,47 @@ var InputVue2 = {
       onAnimationstart: this.handleAutoFill,
       onAnimationend: this.handleAutoFillEnd
     }));
+    var inputPrefixTemplate = templateRendering.call(this, this.$props.inputPrefix, getListeners.call(this));
+    var inputSuffixTemplate = templateRendering.call(this, this.$props.inputSuffix, getListeners.call(this));
+    var inputPrefix = getTemplate.call(this, {
+      h: h,
+      template: inputPrefixTemplate,
+      additionalProps: {
+        value: this.computedValue,
+        valid: isValid
+      }
+    });
+    var inputSuffix = getTemplate.call(this, {
+      h: h,
+      template: inputSuffixTemplate,
+      additionalProps: {
+        value: this.computedValue,
+        valid: isValid
+      }
+    });
     var inputWrapper = h("span", {
       "class": this.inputWrapperClass()
-    }, [textbox]);
+    }, [iconName && h("span", {
+      "class": "k-input-icon k-icon k-i-" + iconName
+    }), this.$props.inputPrefix && h("span", {
+      "class": "k-input-prefix"
+    }, [inputPrefix]), textbox, this.$props.inputSuffix && h("span", {
+      "class": "k-input-suffix"
+    }, [inputSuffix]), showValidationIcon && isValid && h("span", {
+      "class": "k-input-validation-icon k-icon k-i-check"
+    }), showValidationIcon && !isValid && h("span", {
+      "class": "k-input-validation-icon k-icon k-i-warning"
+    }), showLoadingIcon && h("span", {
+      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showClearButton && this.computedValue && h("span", {
+      onClick: this.clearClick,
+      on: this.v3 ? undefined : {
+        "click": this.clearClick
+      },
+      "class": "k-clear-value"
+    }, [h("span", {
+      "class": "k-icon k-i-x"
+    })])]);
     return label ? // @ts-ignore function children
     h(FloatingLabel, {
       label: label,
@@ -226,6 +274,9 @@ var InputVue2 = {
     handleKeypress: function handleKeypress(e) {
       this.$emit('keypress', e);
     },
+    clearClick: function clearClick(event) {
+      this.emitUpdate(event, 'change', '');
+    },
     focus: function focus() {
       if (this._input) {
         this._input.focus();
@@ -265,32 +316,26 @@ var InputVue2 = {
       }
     },
     handleInput: function handleInput(event) {
-      var that = this;
-      this.$data.currentValue = event.target.value;
-      this.$data.valueDuringOnChange = event.target.value;
-      this.$nextTick(function () {
-        that.$emit('changemodel', event.target.value);
-        that.$emit('update:modelValue', event.target.value);
-        that.$emit('input', {
-          event: event,
-          value: event.target.value,
-          component: that,
-          target: event.target,
-          validity: that.validity()
-        });
-        that.$data.valueDuringOnChange = undefined;
-      });
+      this.emitUpdate(event, 'input', event.target.value);
     },
     handleChange: function handleChange(event) {
+      this.emitUpdate(event, 'change', event.target.value);
+    },
+    emitUpdate: function emitUpdate(event, eventName, value) {
       var that = this;
-      this.$data.currentValue = event.target.value;
-      this.$data.valueDuringOnChange = event.target.value;
+
+      if (this.disabled) {
+        return;
+      }
+
+      this.$data.currentValue = value;
+      this.$data.valueDuringOnChange = value;
       this.$nextTick(function () {
-        that.$emit('changemodel', event.target.value);
-        that.$emit('update:modelValue', event.target.value);
-        that.$emit('change', {
+        that.$emit('changemodel', value);
+        that.$emit('update:modelValue', value);
+        that.$emit(eventName, {
           event: event,
-          value: event.target.value,
+          value: value,
           component: that,
           target: event.target,
           validity: that.validity()
@@ -331,7 +376,7 @@ var InputVue2 = {
       return _a = {
         'k-textbox': true,
         'k-input': true
-      }, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a;
+      }, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.inputClass] = this.inputClass, _a;
     }
   },
   computed: {

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: 1653315229,
+    publishDate: 1653576328,
     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/input/Input.d.ts

@@ -89,6 +89,34 @@ export interface InputProps extends FormComponentProps {
      * Specifies the placeholder of an `input` element. Used to define if the input is empty.
      */
     placeholder?: string;
+    /**
+     * Defines a string prop that controls the input icon.
+     */
+    iconName: String;
+    /**
+     * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputPrefix: Boolean | String | Object | Function;
+    /**
+     * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputSuffix: Boolean | String | Object | Function;
+    /**
+     * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
+     */
+    showValidationIcon: Boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
+     */
+    showLoadingIcon: Boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
+     */
+    showClearButton: Boolean;
+    /**
+     * Defines additional class to the inner input element.
+     */
+    inputClass: String;
 }
 /**
  * @hidden
@@ -121,7 +149,7 @@ export interface InputMethods {
     isInvalid: (state: any) => any;
     setValidity: () => void;
     handleInput?: () => void;
-    handleChange?: (event: any) => void;
+    handleChange: (event: any) => void;
     handleKeyup?: (event: any) => void;
     handleKeydown?: (event: any) => void;
     handleKeypress?: (event: any) => void;

package/dist/npm/input/Input.js

@@ -110,7 +110,14 @@ var InputVue2 = {
     validityStyles: {
       type: Boolean,
       default: true
-    }
+    },
+    iconName: String,
+    inputPrefix: kendo_vue_common_1.templateDefinition,
+    inputSuffix: kendo_vue_common_1.templateDefinition,
+    showValidationIcon: Boolean,
+    showLoadingIcon: Boolean,
+    showClearButton: Boolean,
+    inputClass: String
   },
   data: function data() {
     return {
@@ -149,12 +156,15 @@ var InputVue2 = {
     var _this = this;
 
     var h = gh || createElement;
-    var listeners = this.v3 ? this.$attrs : this.$listeners;
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var _a = this.$props,
         label = _a.label,
         id = _a.id,
-        required = _a.required;
+        required = _a.required,
+        iconName = _a.iconName,
+        showValidationIcon = _a.showValidationIcon,
+        showLoadingIcon = _a.showLoadingIcon,
+        showClearButton = _a.showClearButton;
     var inputId = id || this._inputId;
     var textbox = h('input', __assign(__assign({
       domProps: this.v3 ? null : __assign(__assign({}, this.$attrs), {
@@ -194,9 +204,47 @@ var InputVue2 = {
       onAnimationstart: this.handleAutoFill,
       onAnimationend: this.handleAutoFillEnd
     }));
+    var inputPrefixTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.inputPrefix, kendo_vue_common_1.getListeners.call(this));
+    var inputSuffixTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.inputSuffix, kendo_vue_common_1.getListeners.call(this));
+    var inputPrefix = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: inputPrefixTemplate,
+      additionalProps: {
+        value: this.computedValue,
+        valid: isValid
+      }
+    });
+    var inputSuffix = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: inputSuffixTemplate,
+      additionalProps: {
+        value: this.computedValue,
+        valid: isValid
+      }
+    });
     var inputWrapper = h("span", {
       "class": this.inputWrapperClass()
-    }, [textbox]);
+    }, [iconName && h("span", {
+      "class": "k-input-icon k-icon k-i-" + iconName
+    }), this.$props.inputPrefix && h("span", {
+      "class": "k-input-prefix"
+    }, [inputPrefix]), textbox, this.$props.inputSuffix && h("span", {
+      "class": "k-input-suffix"
+    }, [inputSuffix]), showValidationIcon && isValid && h("span", {
+      "class": "k-input-validation-icon k-icon k-i-check"
+    }), showValidationIcon && !isValid && h("span", {
+      "class": "k-input-validation-icon k-icon k-i-warning"
+    }), showLoadingIcon && h("span", {
+      "class": "k-input-loading-icon k-icon k-i-loading"
+    }), showClearButton && this.computedValue && h("span", {
+      onClick: this.clearClick,
+      on: this.v3 ? undefined : {
+        "click": this.clearClick
+      },
+      "class": "k-clear-value"
+    }, [h("span", {
+      "class": "k-icon k-i-x"
+    })])]);
     return label ? // @ts-ignore function children
     h(kendo_vue_labels_1.FloatingLabel, {
       label: label,
@@ -237,6 +285,9 @@ var InputVue2 = {
     handleKeypress: function handleKeypress(e) {
       this.$emit('keypress', e);
     },
+    clearClick: function clearClick(event) {
+      this.emitUpdate(event, 'change', '');
+    },
     focus: function focus() {
       if (this._input) {
         this._input.focus();
@@ -276,32 +327,26 @@ var InputVue2 = {
       }
     },
     handleInput: function handleInput(event) {
-      var that = this;
-      this.$data.currentValue = event.target.value;
-      this.$data.valueDuringOnChange = event.target.value;
-      this.$nextTick(function () {
-        that.$emit('changemodel', event.target.value);
-        that.$emit('update:modelValue', event.target.value);
-        that.$emit('input', {
-          event: event,
-          value: event.target.value,
-          component: that,
-          target: event.target,
-          validity: that.validity()
-        });
-        that.$data.valueDuringOnChange = undefined;
-      });
+      this.emitUpdate(event, 'input', event.target.value);
     },
     handleChange: function handleChange(event) {
+      this.emitUpdate(event, 'change', event.target.value);
+    },
+    emitUpdate: function emitUpdate(event, eventName, value) {
       var that = this;
-      this.$data.currentValue = event.target.value;
-      this.$data.valueDuringOnChange = event.target.value;
+
+      if (this.disabled) {
+        return;
+      }
+
+      this.$data.currentValue = value;
+      this.$data.valueDuringOnChange = value;
       this.$nextTick(function () {
-        that.$emit('changemodel', event.target.value);
-        that.$emit('update:modelValue', event.target.value);
-        that.$emit('change', {
+        that.$emit('changemodel', value);
+        that.$emit('update:modelValue', value);
+        that.$emit(eventName, {
           event: event,
-          value: event.target.value,
+          value: value,
           component: that,
           target: event.target,
           validity: that.validity()
@@ -342,7 +387,7 @@ var InputVue2 = {
       return _a = {
         'k-textbox': true,
         'k-input': true
-      }, _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-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _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-invalid'] = !isValid, _a['k-required'] = this.required, _a['k-disabled'] = this.$props.disabled, _a[this.inputClass] = this.inputClass, _a;
     }
   },
   computed: {

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: 1653315229,
+    publishDate: 1653576328,
     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.3.2",
+  "version": "3.3.3-dev.202205261455",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -38,21 +38,21 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-buttons": "3.3.2",
-    "@progress/kendo-vue-common": "3.3.2",
-    "@progress/kendo-vue-labels": "3.3.2",
-    "@progress/kendo-vue-popup": "3.3.2"
+    "@progress/kendo-vue-buttons": "3.3.3-dev.202205261455",
+    "@progress/kendo-vue-common": "3.3.3-dev.202205261455",
+    "@progress/kendo-vue-labels": "3.3.3-dev.202205261455",
+    "@progress/kendo-vue-popup": "3.3.3-dev.202205261455"
   },
   "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.3.2",
-    "@progress/kendo-vue-form": "3.3.2",
-    "@progress/kendo-vue-intl": "3.3.2",
-    "@progress/kendo-vue-labels": "3.3.2",
-    "@progress/kendo-vue-tooltip": "3.3.2",
+    "@progress/kendo-vue-buttons": "3.3.3-dev.202205261455",
+    "@progress/kendo-vue-form": "3.3.3-dev.202205261455",
+    "@progress/kendo-vue-intl": "3.3.3-dev.202205261455",
+    "@progress/kendo-vue-labels": "3.3.3-dev.202205261455",
+    "@progress/kendo-vue-tooltip": "3.3.3-dev.202205261455",
     "cldr-core": "^34.0.0",
     "cldr-dates-full": "^34.0.0",
     "cldr-numbers-full": "^34.0.0"