@progress/kendo-vue-inputs 3.3.3 → 3.3.5-dev.202206141337

package/dist/npm/textarea/TextArea.js

@@ -28,7 +28,10 @@ var gh = allVue.h;
 
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 
-var package_metadata_1 = require("../package-metadata"); // tslint:enable:max-line-length
+var package_metadata_1 = require("../package-metadata");
+/**
+ * @hidden
+ */
 
 
 var TextAreaVue2 = {
@@ -93,7 +96,15 @@ var TextAreaVue2 = {
     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,
+    wrapperClass: String
   },
   created: function created() {
     kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
@@ -107,12 +118,20 @@ var TextAreaVue2 = {
           size = _b.size,
           fillMode = _b.fillMode,
           rounded = _b.rounded,
-          required = _b.required;
+          required = _b.required,
+          showLoadingIcon = _b.showLoadingIcon;
       var invalid = this.validityStyles === true ? !this.isValid : false;
       return _a = {
         'k-input': true,
         'k-textarea': 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-disabled'] = this.$props.disabled, _a['k-invalid'] = invalid, _a['k-required'] = required, _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-disabled'] = this.$props.disabled, _a['k-invalid'] = invalid, _a['k-required'] = required, _a['k-loading'] = showLoadingIcon, _a[this.wrapperClass] = this.wrapperClass, _a;
+    },
+    inputInnerClass: function inputInnerClass() {
+      var _a;
+
+      return _a = {
+        'k-input-inner': true
+      }, _a[this.inputClass] = this.inputClass, _a;
     },
     computedValue: function computedValue() {
       return this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
@@ -160,7 +179,11 @@ var TextAreaVue2 = {
         id = _a.id,
         name = _a.name,
         placeholder = _a.placeholder,
-        tabIndex = _a.tabIndex;
+        tabIndex = _a.tabIndex,
+        iconName = _a.iconName,
+        showValidationIcon = _a.showValidationIcon,
+        showLoadingIcon = _a.showLoadingIcon,
+        showClearButton = _a.showClearButton;
 
     var textAreaAttrs = __assign({
       id: id || this.calculatedId,
@@ -177,9 +200,27 @@ var TextAreaVue2 = {
       'aria-disabled': disabled || undefined
     }, this.$attrs);
 
+    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: this.isValid
+      }
+    });
+    var inputSuffix = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: inputSuffixTemplate,
+      additionalProps: {
+        value: this.computedValue,
+        valid: this.isValid
+      }
+    });
     var textarea = h('textarea', __assign(__assign({}, textAreaAttrs), {
       attrs: this.v3 ? undefined : textAreaAttrs,
-      'class': 'k-input-inner',
+      class: this.inputInnerClass,
       ref: this.v3 ? function (el) {
         _this.elementRef = el;
       } : 'element',
@@ -210,7 +251,27 @@ var TextAreaVue2 = {
         dir: this.currentDir
       },
       style: this.$attrs.style
-    }, [textarea]);
+    }, [iconName && h("span", {
+      "class": "k-input-icon k-icon k-i-" + iconName
+    }), this.$props.inputPrefix && h("span", {
+      "class": "k-input-prefix"
+    }, [inputPrefix]), textarea, this.$props.inputSuffix && h("span", {
+      "class": "k-input-suffix"
+    }, [inputSuffix]), showValidationIcon && this.isValid && h("span", {
+      "class": "k-input-validation-icon k-icon k-i-check"
+    }), showValidationIcon && !this.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"
+    })])]);
   },
   methods: {
     setValidity: function setValidity() {
@@ -222,13 +283,16 @@ var TextAreaVue2 = {
         this.textAreaHeight = this.element.scrollHeight + "px";
       }
     },
+    clearClick: function clearClick(event) {
+      this.emitUpdate(event, 'change', '');
+    },
     focus: function focus() {
       if (this.element) {
         this.element.focus();
       }
     },
-    handleChange: function handleChange(event) {
-      var newValue = event.target.value;
+    emitUpdate: function emitUpdate(event, eventName, value) {
+      var newValue = value;
 
       if (!this.$props.disabled) {
         this.textAreaHeight = 'auto';
@@ -238,7 +302,7 @@ var TextAreaVue2 = {
       if (!this.$props.disabled) {
         this.$emit('changemodel', newValue);
         this.$emit('update:modelValue', newValue);
-        this.$emit('change', {
+        this.$emit(eventName, {
           event: event,
           component: this,
           name: this.element.name,
@@ -246,24 +310,11 @@ var TextAreaVue2 = {
         });
       }
     },
+    handleChange: function handleChange(event) {
+      this.emitUpdate(event, 'change', event.target.value);
+    },
     handleInput: function handleInput(event) {
-      var newValue = event.target.value;
-
-      if (!this.$props.disabled) {
-        this.textAreaHeight = 'auto';
-        this.currentValue = newValue;
-      }
-
-      if (!this.$props.disabled) {
-        this.$emit('changemodel', newValue);
-        this.$emit('update:modelValue', newValue);
-        this.$emit('input', {
-          event: event,
-          component: this,
-          name: this.element.name,
-          value: newValue
-        });
-      }
+      this.emitUpdate(event, 'input', event.target.value);
     },
     handleFocus: function handleFocus(event) {
       if (!this.$props.disabled) {
@@ -286,5 +337,39 @@ var TextAreaVue2 = {
   }
 };
 exports.TextAreaVue2 = TextAreaVue2;
+/**
+ * Represents the [Kendo UI for Vue Native TextArea component]({% slug overview_textarea %}).
+ *
+ * Accepts properties of type [TextAreaProps]({% slug api_inputs_textareaprops %}).
+ * Obtaining the `ref` returns an object of type [TextAreaHandle]({% slug api_inputs_textareahandle %}).
+ *
+ *
+ * ```jsx
+ * <template>
+ *     <k-form
+ *       @submit="handleSubmit">
+ *       <formcontent />
+ *    </k-form>
+ * </template>
+ * <script>
+ * import { Form } from "@progress/kendo-vue-form";
+ * import FormContent from './FormContent.vue';
+ *
+ * export default {
+ *     components: {
+ *       'k-form': Form,
+ *       'formcontent': FormContent
+ *     },
+ *     methods: {
+ *       handleSubmit (dataItem) {
+ *          alert(JSON.stringify(dataItem, null, 2));
+ *       }
+ *     }
+ * };
+ *
+ * </script>
+ * ```
+ */
+
 var TextArea = TextAreaVue2;
 exports.TextArea = TextArea;

package/dist/npm/textarea/interfaces/TextAreaProps.d.ts

@@ -105,7 +105,46 @@ export interface TextAreaProps extends FormComponentProps {
      * Sets the value to be submitted ([see example]({% slug controlled_textarea %})).
      */
     value?: string | string[] | number;
+    /**
+     * If set to `false`, no visual representation of the invalid state of the component will be applied.
+     *
+     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+     *
+     * @default true
+     */
     validityStyles?: boolean;
+    /**
+     * 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 wrapper element.
+     */
+    wrapperClass?: String;
+    /**
+     * Defines additional class to the input element.
+     */
+    inputClass?: String;
     /**
      * The event handler that will be fired when the changes the selected value.
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-inputs",
   "description": "Kendo UI for Vue Input package",
-  "version": "3.3.3",
+  "version": "3.3.5-dev.202206141337",
   "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.3",
-    "@progress/kendo-vue-common": "3.3.3",
-    "@progress/kendo-vue-labels": "3.3.3",
-    "@progress/kendo-vue-popup": "3.3.3"
+    "@progress/kendo-vue-buttons": "3.3.5-dev.202206141337",
+    "@progress/kendo-vue-common": "3.3.5-dev.202206141337",
+    "@progress/kendo-vue-labels": "3.3.5-dev.202206141337",
+    "@progress/kendo-vue-popup": "3.3.5-dev.202206141337"
   },
   "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.3",
-    "@progress/kendo-vue-form": "3.3.3",
-    "@progress/kendo-vue-intl": "3.3.3",
-    "@progress/kendo-vue-labels": "3.3.3",
-    "@progress/kendo-vue-tooltip": "3.3.3",
+    "@progress/kendo-vue-buttons": "3.3.5-dev.202206141337",
+    "@progress/kendo-vue-form": "3.3.5-dev.202206141337",
+    "@progress/kendo-vue-intl": "3.3.5-dev.202206141337",
+    "@progress/kendo-vue-labels": "3.3.5-dev.202206141337",
+    "@progress/kendo-vue-tooltip": "3.3.5-dev.202206141337",
     "cldr-core": "^34.0.0",
     "cldr-dates-full": "^34.0.0",
     "cldr-numbers-full": "^34.0.0"

package/dist/es/numerictextbox/interfaces/NumericTextBoxHandle.d.ts

@@ -1,39 +0,0 @@
-import { FormComponentValidity } from '@progress/kendo-vue-common';
-import { NumericTextBoxProps } from './NumericTextBoxProps';
-/**
- * The NumericTextBox ref.
- */
-export interface NumericTextBoxHandle {
-    /**
-     * The NumericTextBox element.
-     */
-    element: any;
-    /**
-     * Focus the NumericTextBox.
-     */
-    focus: () => void;
-    /**
-     * Gets the `name` property of the NumericTextBox.
-     */
-    name: string | undefined;
-    /**
-     * Gets the value of the NumericTextBox.
-     */
-    value: number | null;
-    /**
-     * Represents the validity state into which the NumericTextBox is set.
-     */
-    validity: FormComponentValidity;
-    /**
-     * @hidden
-     */
-    props: NumericTextBoxProps;
-    /**
-     * @hidden
-     */
-    validityStyles: boolean;
-    /**
-     * @hidden
-     */
-    required: boolean;
-}

package/dist/npm/numerictextbox/interfaces/NumericTextBoxHandle.d.ts

@@ -1,39 +0,0 @@
-import { FormComponentValidity } from '@progress/kendo-vue-common';
-import { NumericTextBoxProps } from './NumericTextBoxProps';
-/**
- * The NumericTextBox ref.
- */
-export interface NumericTextBoxHandle {
-    /**
-     * The NumericTextBox element.
-     */
-    element: any;
-    /**
-     * Focus the NumericTextBox.
-     */
-    focus: () => void;
-    /**
-     * Gets the `name` property of the NumericTextBox.
-     */
-    name: string | undefined;
-    /**
-     * Gets the value of the NumericTextBox.
-     */
-    value: number | null;
-    /**
-     * Represents the validity state into which the NumericTextBox is set.
-     */
-    validity: FormComponentValidity;
-    /**
-     * @hidden
-     */
-    props: NumericTextBoxProps;
-    /**
-     * @hidden
-     */
-    validityStyles: boolean;
-    /**
-     * @hidden
-     */
-    required: boolean;
-}

package/dist/npm/numerictextbox/interfaces/NumericTextBoxHandle.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});