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

A vue based PC component library

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