vxe-pc-ui/lib/textarea/src/textarea.min.js

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let autoTxtElem;var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTextarea",props:{modelValue:[String,Number],className:String,immediate:{type:Boolean,default:!0},name:String,readonly:{type:Boolean,default:null},editable:{type:Boolean,default:!0},disabled:{type:Boolean,default:null},placeholder:String,maxLength:[String,Number],rows:{type:[String,Number],default:null},cols:{type:[String,Number],default:null},showWordCount:Boolean,countMethod:Function,autosize:[Boolean,Object],form:String,resize:{type:String,default:()=>(0,_ui.getConfig)().textarea.resize},size:{type:String,default:()=>(0,_ui.getConfig)().textarea.size||(0,_ui.getConfig)().size},maxlength:[String,Number]},emits:["update:modelValue","input","keydown","keyup","click","change","focus","blur"],setup(_,e){const a=e["emit"],u=(0,_vue.inject)("$xeForm",null),l=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();const f=(0,_ui.useSize)(_)["computeSize"],g=(0,_vue.reactive)({inputValue:_.modelValue}),h=(0,_vue.ref)(),b=(0,_vue.ref)(),i={refElem:h,refTextarea:b},r={xID:t,props:_,context:e,reactData:g,getRefMaps:()=>i};let n;const y=(0,_vue.computed)(()=>{var e=_["readonly"];return null===e?!!u&&u.props.readonly:e}),z=(0,_vue.computed)(()=>{var e=_["disabled"];return null===e?!!u&&u.props.disabled:e}),V=(0,_vue.computed)(()=>{var e=_["editable"];return y.value||!e}),N=(0,_vue.computed)(()=>{var e=_["placeholder"];return(e=e||(0,_ui.getConfig)().textarea.placeholder)?(0,_utils.getFuncText)(e):(0,_ui.getI18n)("vxe.base.pleaseInput")}),T=(0,_vue.computed)(()=>{var{maxLength:e,maxlength:t}=_;return e||t}),E=(0,_vue.computed)(()=>_xeUtils.default.getSize(g.inputValue)),S=(0,_vue.computed)(()=>{var e=E.value,t=T.value;return t&&e>_xeUtils.default.toNumber(t)}),o=(0,_vue.computed)(()=>Object.assign({minRows:1,maxRows:10},(0,_ui.getConfig)().textarea.autosize,_.autosize)),s=()=>{var e,{size:t,autosize:u}=_,a=g["inputValue"];u&&((autoTxtElem=autoTxtElem||document.createElement("div")).parentNode||document.body.appendChild(autoTxtElem),u=b.value)&&(e=getComputedStyle(u),autoTxtElem.className=["vxe-textarea--autosize",t?"size--"+t:""].join(" "),autoTxtElem.style.width=u.clientWidth+"px",autoTxtElem.style.padding=e.padding,autoTxtElem.innerText=(""+(a||"　")).replace(/\n$/,"\n　"))},d=()=>{_.autosize&&(0,_vue.nextTick)(()=>{var{minRows:t,maxRows:u}=o.value,a=b.value;if(a){var l=autoTxtElem.clientHeight,i=getComputedStyle(a),r=_xeUtils.default.toNumber(i.lineHeight),i=_xeUtils.default.toNumber(i.paddingTop)+_xeUtils.default.toNumber(i.paddingBottom)+_xeUtils.default.toNumber(i.borderTopWidth)+_xeUtils.default.toNumber(i.borderBottomWidth),l=(l-i)/r,l=l&&/[0-9]/.test(""+l)?l:Math.floor(l)+1;let e=l;l<t?e=t:u<l&&(e=u),a.style.height=e*r+i+"px"}})},w=e=>{var t=g.inputValue;r.dispatchEvent(e.type,{value:t},e)},v=(e,t)=>{g.inputValue=e,a("update:modelValue",e),_xeUtils.default.toValueString(_.modelValue)!==e&&(n.dispatchEvent("change",{value:e},t),u)&&l&&u.triggerItemEvent(t,l.itemConfig.field,e)},C=e=>{var t=_["immediate"],u=e.target.value;g.inputValue=u,t&&v(u,e),r.dispatchEvent("input",{value:u},e),d()},U=e=>{var t=_["immediate"];t?w(e):v(g.inputValue,e)},k=e=>{var t=_["immediate"],u=g["inputValue"];t||v(u,e),r.dispatchEvent("blur",{value:u},e)};n={dispatchEvent(e,t,u){a(e,(0,_ui.createEvent)(u,{$textarea:r},t))},focus(){return b.value.focus(),(0,_vue.nextTick)()},blur(){return b.value.blur(),(0,_vue.nextTick)()}},Object.assign(r,n),(0,_vue.watch)(()=>_.modelValue,e=>{g.inputValue=e,s()}),(0,_vue.watch)(o,()=>{s(),d()}),(0,_vue.nextTick)(()=>{var e=_["autosize"];e&&(s(),d())});return r.renderVN=()=>{var{className:e,resize:t,autosize:u,showWordCount:a,countMethod:l,rows:i,cols:r}=_,n=g["inputValue"],o=f.value,s=z.value,d=S.value,v=E.value,p=V.value,m=y.value,c=N.value,x=T.value;return m?(0,_vue.h)("div",{ref:h,class:["vxe-textarea--readonly",e]},n):(0,_vue.h)("div",{ref:h,class:["vxe-textarea",e,{["size--"+o]:o,"is--autosize":u,"is--count":a,"is--disabled":s,"is--rows":!_xeUtils.default.eqNull(i),"is--cols":!_xeUtils.default.eqNull(r)}],spellcheck:!1},[(0,_vue.h)("textarea",{ref:b,class:"vxe-textarea--inner",value:n,name:_.name,placeholder:c,maxlength:x,readonly:p,disabled:s,rows:i,cols:r,style:t?{resize:t}:null,onInput:C,onChange:U,onKeydown:w,onKeyup:w,onClick:w,onFocus:w,onBlur:k}),a?(0,_vue.h)("span",{class:["vxe-textarea--count",{"is--error":d}]},l?""+l({value:n}):v+(x?"/"+x:"")):null])},r},render(){return this.renderVN()}});