@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"),d=require("@progress/kendo-svg-icons"),c=require("./interfaces/TextAreaResize.js"),B=t.defineComponent({name:"KendoTextArea",model:{event:"changemodel"},emits:{input:e=>!0,change:e=>!0,changemodel:e=>!0,"update:modelValue":e=>!0,focus:e=>!0,blur:e=>!0},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:a}=this.$props;return a||e===c.TextAreaResizeEnum.none?"k-resize-none":e===c.TextAreaResizeEnum.vertical?"k-resize-y":e===c.TextAreaResizeEnum.horizontal?"k-resize-x":"k-resize"},rootClassName(){const{size:e,fillMode:a,rounded:n,required:s,showLoadingIcon:l}=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-${a}`]:a,[`k-rounded-${i.kendoThemeMaps.roundedMap[n]||n}`]:n,"k-disabled":this.$props.disabled,"k-invalid":r,"k-required":s,"k-loading":l,[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-align-items-start":this.flow==="horizontal","k-input-prefix-horizontal":this.flow==="vertical","k-input-prefix-vertical":this.flow==="horizontal"}},suffixRenderClass(){return{"k-input-suffix":!0,"!k-align-items-start":this.flow==="horizontal","k-input-suffix-horizontal":this.flow==="vertical","k-input-suffix-vertical":this.flow==="horizontal"}},suffixIconWrapClass(){return{"k-flex-wrap":!0,"!k-align-items-start":!0}},computedValue(){let e;return this.$props.value!==void 0?e=this.$props.value:this.$props.modelValue!==void 0?e=this.$props.modelValue:e=this.currentValue,e},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;let e;this.$props.dir!==void 0?e=this.$props.dir:e=i.isRtl(this.$el)?"rtl":"ltr",this.currentDir=e,this.setValidity()},updated(){this.element=this.elementRef,this.setValidity()},render(){const{ariaDescribedBy:e,ariaLabelledBy:a,autoSize:n,disabled:s,readOnly:l,required:r,rows:m,id:g,name:x,placeholder:k,tabIndex:v,iconName:o,showValidationIcon:u,showLoadingIcon:h,showClearButton:p,title:V,inputAttributes:b}=this.$props,C={...b,id:g||this.calculatedId,name:x,disabled:s,rows:m,title:V,placeholder:k,readOnly:l,required:r,tabIndex:i.getTabIndex(v,s),"aria-labelledby":a,"aria-describedby":e,"aria-multiline":!0,"aria-disabled":s||void 0,...this.$attrs},S=i.templateRendering.call(this,this.$props.inputPrefix,i.getListeners.call(this)),y=i.templateRendering.call(this,this.$props.inputSuffix,i.getListeners.call(this)),z=i.getTemplate.call(this,{h:t.h,template:S,additionalProps:{value:this.computedValue,valid:this.isValid,className:this.prefixRenderClass}}),I=i.getTemplate.call(this,{h:t.h,template:y,additionalProps:{value:this.computedValue,valid:this.isValid,className:this.suffixRenderClass}}),$=t.h("textarea",{...C,class:this.inputInnerClass,ref:w=>{this.elementRef=w},style:n?{overflow:"hidden",height:this.textAreaHeight}:{},value:this.computedValue,onChange:this.handleChange,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),f=[o&&t.createVNode("span",{class:"k-flex-wrap"},[t.createVNode(i.Icon,{name:o,class:"k-input-icon"},null)]),$,u&&this.isValid&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"check",icon:d.checkCircleIcon,class:"k-input-validation-icon"},null)]),u&&!this.isValid&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"exclamation-circle",icon:d.exclamationCircleIcon,class:"k-input-validation-icon"},null)]),h&&t.createVNode("span",{class:this.suffixIconWrapClass},[t.createVNode(i.Icon,{name:"loading",class:"k-input-loading-icon"},null)]),p&&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:d.xIcon},null)])])];return t.createVNode("span",{class:this.rootClassName,dir:this.currentDir==="rtl"?this.currentDir:"",style:this.$attrs.style},[this.$props.inputPrefix&&z,o||u||h||p?t.createVNode("span",{class:"k-hstack k-flex"},[f]):f,this.$props.inputSuffix&&I])},methods:{setValidity(){var e,a;(a=(e=this.element)==null?void 0:e.setCustomValidity)==null||a.call(e,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,a,n){const s=n;this.$props.disabled||(this.currentValue=s),this.$props.disabled||(this.$emit("changemodel",s),this.$emit("update:modelValue",s),this.$emit(a,{event:e,component:this,name:this.element.name,value:s}))},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=B;