@progress/kendo-vue-inputs/textarea/TextArea.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),i=require("@progress/kendo-vue-common"),N=require("../package-metadata.js"),m=require("@progress/kendo-svg-icons"),d=require("./interfaces/TextAreaResize.js"),A=t.defineComponent({name:"KendoTextArea",model:{event:"changemodel"},emits:{input:null,change:null,changemodel:null,"update:modelValue":null,focus:null,blur:null},props:{title:String,ariaDescribedBy:String,ariaLabelledBy:String,autoSize:Boolean,modelValue:{type:[String,Array,Number],default:void 0},defaultValue:[String,Number],dir:String,disabled:Boolean,readOnly:Boolean,rows:Number,id:String,name:String,validationMessage:String,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"solid","flat","outline"].includes(e)}},required:Boolean,placeholder:String,tabIndex:Number,valid:{type:Boolean,default:void 0},value:[String,Array,Number],validityStyles:{type:Boolean,default:!0},iconName:String,inputPrefix:[String,Function],inputSuffix:[String,Function],showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,wrapperClass:String,flow:{type:String,default:"horizontal",validator:function(e){return["horizontal","vertical"].includes(e)}},resizable:{type:String,default:"vertical",validator:function(e){return["both","horizontal","vertical","none"].includes(e)}},inputAttributes:Object},created(){i.validatePackage(N.packageMetadata),this.calculatedId=i.guid()},computed:{resizableClass(){const{resizable:e,autoSize:s}=this.$props;return s||e===d.TextAreaResizeEnum.none?"k-resize-none":e===d.TextAreaResizeEnum.vertical?"k-resize-y":e===d.TextAreaResizeEnum.horizontal?"k-resize-x":"k-resize"},rootClassName(){const{size:e,fillMode:s,rounded:l,required:a,showLoadingIcon:n}=this.$props,r=this.validityStyles===!0?!this.isValid:!1;return{"k-input":!0,"k-textarea":!0,[`k-input-${i.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-input-${s}`]:s,[`k-rounded-${i.kendoThemeMaps.roundedMap[l]||l}`]:l,"k-disabled":this.$props.disabled,"k-invalid":r,"k-required":a,"k-loading":n,[this.resizableClass]:!0,"!k-flex-col":this.flow==="vertical","!k-flex-row":this.flow==="horizontal",[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,"!k-resize-none":!0,"!k-overflow-auto":!0,"k-flex":!0,[this.inputClass]:this.inputClass}},prefixRenderClass(){return{"k-input-prefix":!0,"!k-flex-col":this.flow==="horizontal","!k-flex-row":this.flow==="vertical","!k-align-items-start":this.flow==="horizontal"}},suffixRenderClass(){return{"k-input-suffix":!0,"!k-flex-col":this.flow==="horizontal","!k-flex-row":this.flow==="vertical","!k-align-items-start":this.flow==="horizontal"}},suffixIconWrapClass(){return{"k-flex-wrap":!0,"!k-align-items-start":!0}},computedValue(){return this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.currentValue},isValid(){return this.valid!==void 0?this.valid:this.required?!!this.computedValue:!0}},data(){return{currentValue:this.$props.defaultValue,textAreaHeight:"auto",currentDir:"ltr"}},watch:{size(){this.textAreaHeight="auto"},computedValue(){this.textAreaHeight="auto"}},mounted(){this.element=this.elementRef,this.currentDir=this.$props.dir!==void 0?this.$props.dir:i.isRtl(this.$el)?"rtl":"ltr",this.setValidity()},updated(){this.element=this.elementRef,this.setValidity()},render(){const{ariaDescribedBy:e,ariaLabelledBy:s,autoSize:l,disabled:a,readOnly:n,required:r,rows:f,id:g,name:x,placeholder:k,tabIndex:V,iconName:o,showValidationIcon:u,showLoadingIcon:c,showClearButton:h,title:v,inputAttributes:b}=this.$props,y={...b,id:g||this.calculatedId,name:x,disabled:a,rows:f,title:v,placeholder:k,readOnly:n,required:r,tabIndex:i.getTabIndex(V,a),"aria-labelledby":s,"aria-describedby":e,"aria-multiline":!0,"aria-disabled":a||void 0,...this.$attrs},C=i.templateRendering.call(this,this.$props.inputPrefix,i.getListeners.call(this)),S=i.templateRendering.call(this,this.$props.inputSuffix,i.getListeners.call(this)),w=i.getTemplate.call(this,{h:t.h,template:C,additionalProps:{value:this.computedValue,valid:this.isValid}}),$=i.getTemplate.call(this,{h:t.h,template:S,additionalProps:{value:this.computedValue,valid:this.isValid}}),I=t.h("textarea",{...y,class:this.inputInnerClass,ref:z=>{this.elementRef=z},style:l?{overflow:"hidden",height:this.textAreaHeight}:{},value:this.computedValue,onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),p=[o&&t.createVNode("span",{class:"k-flex-wrap"},[t.createVNode(i.Icon,{name:o,class:"k-input-icon"},null)]),I,u&&this.isValid&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"check",class:"k-input-validation-icon"},null)]),u&&!this.isValid&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"exclamation-circle",icon:m.exclamationCircleIcon,class:"k-input-validation-icon"},null)]),c&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"loading",class:"k-input-loading-icon"},null)]),h&&this.computedValue&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[t.createVNode(i.Icon,{name:"x",icon:m.xIcon},null)])])];return t.createVNode("span",{class:this.rootClassName,dir:this.currentDir==="rtl"?this.currentDir:"",style:this.$attrs.style},[this.$props.inputPrefix&&t.createVNode("span",{class:this.prefixRenderClass},[w]),o||u||c||h?t.createVNode("span",{class:"k-hstack k-flex"},[p]):p,this.$props.inputSuffix&&t.createVNode("span",{class:this.suffixRenderClass},[$])])},methods:{setValidity(){this.element&&this.element.setCustomValidity&&this.element.setCustomValidity(this.isValid?"":this.validationMessage||""),this.element&&(this.textAreaHeight=`${this.element.scrollHeight}px`)},clearClick(e){this.emitUpdate(e,"change","")},focus(){this.element&&this.element.focus()},emitUpdate(e,s,l){const a=l;this.$props.disabled||(this.currentValue=a),this.$props.disabled||(this.$emit("changemodel",a),this.$emit("update:modelValue",a),this.$emit(s,{event:e,component:this,name:this.element.name,value:a}))},handleChange(e){this.emitUpdate(e,"change",e.target.value)},handleInput(e){this.emitUpdate(e,"input",e.target.value)},handleFocus(e){this.$props.disabled||this.$emit("focus",{event:e,component:this,name:this.element.name})},handleBlur(e){this.$props.disabled||this.$emit("blur",{event:e,component:this,name:this.element.name})}}});exports.TextArea=A;