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

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: 1655214960,
+    publishDate: 1655458045,
     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/es/textarea/TextArea.js

@@ -95,7 +95,21 @@ var TextAreaVue2 = {
     showLoadingIcon: Boolean,
     showClearButton: Boolean,
     inputClass: String,
-    wrapperClass: 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() {
     validatePackage(packageMetadata);
@@ -110,20 +124,46 @@ var TextAreaVue2 = {
           fillMode = _b.fillMode,
           rounded = _b.rounded,
           required = _b.required,
-          showLoadingIcon = _b.showLoadingIcon;
+          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-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (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;
+      }, _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-input-" + fillMode] = fillMode, _a["k-rounded-" + (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-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;
     },
@@ -138,6 +178,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 : isRtl(this.$el) ? 'rtl' : 'ltr';
@@ -216,7 +261,6 @@ var TextAreaVue2 = {
         _this.elementRef = el;
       } : 'element',
       style: autoSize ? {
-        resize: 'none',
         overflow: 'hidden',
         height: this.textAreaHeight
       } : {},
@@ -237,24 +281,34 @@ 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
+    }, [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
-    }), 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", {
+    })]), 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", {
+    })]), showValidationIcon && !this.isValid && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
       "class": "k-input-validation-icon k-icon k-i-warning"
-    }), showLoadingIcon && h("span", {
+    })]), showLoadingIcon && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
       "class": "k-input-loading-icon k-icon k-i-loading"
-    }), showClearButton && this.computedValue && h("span", {
+    })]), showClearButton && this.computedValue && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
       onClick: this.clearClick,
       on: this.v3 ? undefined : {
         "click": this.clearClick
@@ -262,7 +316,9 @@ var TextAreaVue2 = {
       "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() {

package/dist/es/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/es/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 %}).
  */
@@ -141,6 +143,14 @@ export interface TextAreaProps extends FormComponentProps {
      * 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.
      */

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

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1655214960,
+    publishDate: 1655458045,
     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/textarea/TextArea.js

@@ -104,7 +104,21 @@ var TextAreaVue2 = {
     showLoadingIcon: Boolean,
     showClearButton: Boolean,
     inputClass: String,
-    wrapperClass: 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() {
     kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
@@ -119,20 +133,46 @@ var TextAreaVue2 = {
           fillMode = _b.fillMode,
           rounded = _b.rounded,
           required = _b.required,
-          showLoadingIcon = _b.showLoadingIcon;
+          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['k-loading'] = showLoadingIcon, _a[this.wrapperClass] = this.wrapperClass, _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-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;
     },
@@ -147,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';
@@ -225,7 +270,6 @@ var TextAreaVue2 = {
         _this.elementRef = el;
       } : 'element',
       style: autoSize ? {
-        resize: 'none',
         overflow: 'hidden',
         height: this.textAreaHeight
       } : {},
@@ -246,24 +290,34 @@ 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
+    }, [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
-    }), 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", {
+    })]), 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", {
+    })]), showValidationIcon && !this.isValid && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
       "class": "k-input-validation-icon k-icon k-i-warning"
-    }), showLoadingIcon && h("span", {
+    })]), showLoadingIcon && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
       "class": "k-input-loading-icon k-icon k-i-loading"
-    }), showClearButton && this.computedValue && h("span", {
+    })]), showClearButton && this.computedValue && h("span", {
+      "class": this.suffixIconWrapClass
+    }, [h("span", {
       onClick: this.clearClick,
       on: this.v3 ? undefined : {
         "click": this.clearClick
@@ -271,7 +325,9 @@ var TextAreaVue2 = {
       "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() {

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 %}).
  */
@@ -141,6 +143,14 @@ export interface TextAreaProps extends FormComponentProps {
      * 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.
      */

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.5",
+  "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.5",
-    "@progress/kendo-vue-common": "3.3.5",
-    "@progress/kendo-vue-labels": "3.3.5",
-    "@progress/kendo-vue-popup": "3.3.5"
+    "@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.5",
-    "@progress/kendo-vue-form": "3.3.5",
-    "@progress/kendo-vue-intl": "3.3.5",
-    "@progress/kendo-vue-labels": "3.3.5",
-    "@progress/kendo-vue-tooltip": "3.3.5",
+    "@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"