@progress/kendo-vue-inputs 3.3.4 → 3.3.6-dev.202206170937

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,6 +96,28 @@ 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,
+    flow: {
+      type: String,
+      default: 'horizontal',
+      validator: function validator(value) {
+        return ['horizontal', 'vertical'].includes(value);
+      }
+    },
+    resizable: {
+      type: String,
+      default: 'vertical',
+      validator: function validator(value) {
+        return ['both', 'horizontal', 'vertical', 'none'].includes(value);
+      }
     }
   },
   created: function created() {
@@ -107,12 +132,46 @@ var TextAreaVue2 = {
           size = _b.size,
           fillMode = _b.fillMode,
           rounded = _b.rounded,
-          required = _b.required;
+          required = _b.required,
+          showLoadingIcon = _b.showLoadingIcon,
+          resizable = _b.resizable,
+          autoSize = _b.autoSize;
       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["k-resize-" + resizable] = autoSize ? 'none' : resizable, _a['!k-flex-col'] = this.flow === 'vertical', _a['!k-flex-row'] = this.flow === 'horizontal', _a[this.wrapperClass] = this.wrapperClass, _a;
+    },
+    inputInnerClass: function inputInnerClass() {
+      var _a;
+
+      return _a = {
+        'k-input-inner': true,
+        '!k-resize-none': true,
+        'k-flex': true
+      }, _a[this.inputClass] = this.inputClass, _a;
+    },
+    prefixRenderClass: function prefixRenderClass() {
+      return {
+        'k-input-prefix': true,
+        '!k-flex-col': this.flow === 'horizontal',
+        '!k-flex-row': this.flow === 'vertical',
+        '!k-align-items-start': this.flow === 'horizontal'
+      };
+    },
+    suffixRenderClass: function suffixRenderClass() {
+      return {
+        'k-input-suffix': true,
+        '!k-flex-col': this.flow === 'horizontal',
+        '!k-flex-row': this.flow === 'vertical',
+        '!k-align-items-start': this.flow === 'horizontal'
+      };
+    },
+    suffixIconWrapClass: function suffixIconWrapClass() {
+      return {
+        'k-flex-wrap': true,
+        '!k-align-items-start': true
+      };
     },
     computedValue: function computedValue() {
       return this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
@@ -128,6 +187,11 @@ var TextAreaVue2 = {
       currentDir: 'ltr'
     };
   },
+  watch: {
+    size: function size() {
+      this.textAreaHeight = 'auto';
+    }
+  },
   mounted: function mounted() {
     this.element = this.v3 ? this.elementRef : this.$refs.element;
     this.currentDir = this.$props.dir !== undefined ? this.$props.dir : kendo_vue_common_1.isRtl(this.$el) ? 'rtl' : 'ltr';
@@ -160,7 +224,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,14 +245,31 @@ 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',
       style: autoSize ? {
-        resize: 'none',
         overflow: 'hidden',
         height: this.textAreaHeight
       } : {},
@@ -205,12 +290,44 @@ var TextAreaVue2 = {
     }));
     return h("span", {
       "class": this.rootClassName,
-      dir: this.currentDir,
+      dir: this.currentDir === 'rtl' ? this.currentDir : '',
       attrs: this.v3 ? undefined : {
-        dir: this.currentDir
+        dir: this.currentDir === 'rtl' ? this.currentDir : ''
       },
       style: this.$attrs.style
-    }, [textarea]);
+    }, [this.$props.inputPrefix && h("span", {
+      "class": this.prefixRenderClass
+    }, [inputPrefix]), h("span", {
+      "class": "k-hstack k-flex"
+    }, [iconName && h("span", {
+      "class": "k-flex-wrap"
+    }, [h("span", {
+      "class": "k-input-icon k-icon k-i-" + iconName
+    })]), textarea, showValidationIcon && this.isValid && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
+      "class": "k-input-validation-icon k-icon k-i-check"
+    })]), showValidationIcon && !this.isValid && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
+      "class": "k-input-validation-icon k-icon k-i-warning"
+    })]), showLoadingIcon && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
+      "class": "k-input-loading-icon k-icon k-i-loading"
+    })]), showClearButton && this.computedValue && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
+      onClick: this.clearClick,
+      on: this.v3 ? undefined : {
+        "click": this.clearClick
+      },
+      "class": "k-clear-value"
+    }, [h("span", {
+      "class": "k-icon k-i-x"
+    })])])]), this.$props.inputSuffix && h("span", {
+      "class": this.suffixRenderClass
+    }, [inputSuffix])]);
   },
   methods: {
     setValidity: function setValidity() {
@@ -222,13 +339,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 +358,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 +366,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 +393,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/TextAreaFlow.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Specifies the flow direction of the TextArea sections.
+ *
+ * The possible values are:
+ * * `vertical`(Default) —TextArea sections are placed from top to bottom.
+ * * `horizontal`—TextArea sections are placed from left to right in `ltr`, and from right to left in `rtl` mode.
+ */
+export declare type TextAreaFlow = 'horizontal' | 'vertical';

package/dist/npm/textarea/interfaces/TextAreaFlow.js

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

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

@@ -1,7 +1,9 @@
 import { FormComponentProps } from '@progress/kendo-vue-common';
 import { TextAreaBlurEvent } from './TextAreaBlurEvent';
 import { TextAreaChangeEvent } from './TextAreaChangeEvent';
+import { TextAreaFlow } from './TextAreaFlow';
 import { TextAreaFocusEvent } from './TextAreaFocusEvent';
+import { TextAreaResize } from './TextAreaResize';
 /**
  * Represents the props of the [Kendo UI for Vue TextArea component]({% slug overview_textarea %}).
  */
@@ -105,7 +107,54 @@ 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 the flow direction of the TextArea sections.
+     */
+    flow?: TextAreaFlow | String;
+    /**
+     * Defines the way the TextArea will resize.
+     */
+    resizable?: TextAreaResize | String;
+    /**
+     * Defines additional class to the input element.
+     */
+    inputClass?: String;
     /**
      * The event handler that will be fired when the changes the selected value.
      */

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

@@ -0,0 +1,10 @@
+/**
+ * Specifies the resize direction of the TextArea sections.
+ *
+ * The possible values are:
+ * `vertical`(Default) —TextArea can be resized only vertically.
+ * `horizontal`—TextArea can be resized only horizontally.
+ * `both`—TextArea can be resized both vertically and horizontally.
+ * `nont`—TextArea can not be manually resized.
+ */
+export declare type TextAreaResize = 'both' | 'horizontal' | 'vertical';

package/dist/npm/textarea/interfaces/TextAreaResize.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-inputs",
   "description": "Kendo UI for Vue Input package",
-  "version": "3.3.4",
+  "version": "3.3.6-dev.202206170937",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -38,21 +38,22 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-buttons": "3.3.4",
-    "@progress/kendo-vue-common": "3.3.4",
-    "@progress/kendo-vue-labels": "3.3.4",
-    "@progress/kendo-vue-popup": "3.3.4"
+    "@progress/kendo-vue-buttons": "3.3.6-dev.202206170937",
+    "@progress/kendo-vue-common": "3.3.6-dev.202206170937",
+    "@progress/kendo-vue-labels": "3.3.6-dev.202206170937",
+    "@progress/kendo-vue-popup": "3.3.6-dev.202206170937"
   },
   "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.4",
-    "@progress/kendo-vue-form": "3.3.4",
-    "@progress/kendo-vue-intl": "3.3.4",
-    "@progress/kendo-vue-labels": "3.3.4",
-    "@progress/kendo-vue-tooltip": "3.3.4",
+    "@progress/kendo-vue-buttons": "3.3.6-dev.202206170937",
+    "@progress/kendo-vue-dropdowns": "3.3.6-dev.202206170937",
+    "@progress/kendo-vue-form": "3.3.6-dev.202206170937",
+    "@progress/kendo-vue-intl": "3.3.6-dev.202206170937",
+    "@progress/kendo-vue-labels": "3.3.6-dev.202206170937",
+    "@progress/kendo-vue-tooltip": "3.3.6-dev.202206170937",
     "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
-});