vexip-ui/lib/components/textarea/textarea.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../icon/index.cjs");require("../form/index.cjs");const l=require("@vexip-ui/config"),i=require("@vexip-ui/utils"),O=require("./props.cjs"),Q=require("../form/helper.cjs"),W=require("../icon/icon.cjs"),X=["id"],Y=["value","rows","autofocus","autocomplete","spellcheck","disabled","readonly","placeholder","maxlength","name","aria-labelledby"],Z=e.defineComponent({name:"Textarea",__name:"textarea",props:O.textareaProps,emits:["update:value"],setup(N,{expose:K,emit:B}){const{idFor:h,state:I,labelId:q,disabled:F,loading:P,validateField:g,getFieldValue:S,setFieldValue:y}=Q.useFieldStore(()=>{var t;return(t=r.value)==null?void 0:t.focus()}),_=N,n=l.useProps("textarea",_,{state:l.createStateProp(I),locale:null,value:{default:()=>S(),static:!0},placeholder:null,rows:2,noResize:!1,autofocus:!1,spellcheck:!1,autocomplete:!1,readonly:!1,disabled:()=>F.value,debounce:!1,delay:null,maxLength:0,hideCount:!1,loading:()=>P.value,loadingIcon:l.createIconProp(),loadingLock:!1,loadingEffect:null,sync:!1,controlClass:null,controlAttrs:null,name:{default:"",static:!0}}),b=B,u=l.useNameHelper("textarea"),z=l.useLocale("input",e.toRef(n,"locale")),d=l.useIcons(),f=e.ref(!1),o=e.ref(n.value),c=e.ref(n.value?n.value.length:0),s=e.ref(!1),r=e.ref();let m=n.value;const v=e.computed(()=>n.loading&&n.loadingLock||n.readonly),A=e.computed(()=>({[u.b()]:!0,[u.ns("input-vars")]:!0,[u.bs("vars")]:!0,[u.bm("inherit")]:n.inherit,[u.bm("focused")]:f.value,[u.bm("disabled")]:n.disabled,[u.bm("readonly")]:v.value,[u.bm("loading")]:n.loading,[u.bm("no-resize")]:n.noResize,[u.bm(n.state)]:n.state!=="default"})),R=e.computed(()=>typeof n.autocomplete=="boolean"?n.autocomplete?"on":"off":n.autocomplete);e.watch(()=>n.value,t=>{o.value=t,m=t,x()}),K({idFor:h,currentValue:o,currentLength:c,composing:s,isReadonly:v,textarea:r,copyValue:G,focus:t=>{var a;return(a=r.value)==null?void 0:a.focus(t)},blur:()=>{var t;return(t=r.value)==null?void 0:t.blur()}});function $(t){f.value=!0,l.emitEvent(n.onFocus,t)}function D(t){f.value=!1,l.emitEvent(n.onBlur,t)}function p(t){const a=t.type;if(s.value){if(a==="input")return;s.value=!1}if(o.value=t.target.value,x(),a==="change"){if(m===o.value)return;m=o.value,n.sync||(b("update:value",o.value),y(o.value)),l.emitEvent(n.onChange,o.value),n.sync||g()}else n.sync&&(b("update:value",o.value),y(o.value)),l.emitEvent(n.onInput,o.value),n.sync&&g()}function T(){l.emitEvent(n.onEnter)}function U(t){l.emitEvent(n.onKeyDown,t)}function H(t){l.emitEvent(n.onKeyPress,t)}function j(t){l.emitEvent(n.onKeyUp,t)}function x(){let t=o.value;if(i.isNull(t)){c.value=0;return}const a=n.maxLength;a&&t.length>a&&(t=t.slice(0,a)),c.value=t.length,o.value=t}function G(){const t=document.createElement("textarea");t.style.height="0",t.setAttribute("readonly","readonly"),t.value=o.value,document.body.appendChild(t),t.select();const a=document.execCommand("copy");return document.body.removeChild(t),a}const C=i.toNumber(n.delay),E=n.debounce?i.debounce(p,C||100):i.throttle(p,C||16);function J(t){s.value=!0,l.emitEvent(n.onCompositionStart,t)}function M(t){s.value&&(s.value=!1,r.value&&r.value.dispatchEvent(new Event("input"))),l.emitEvent(n.onCompositionStart,t)}return(t,a)=>{var k,L;return e.openBlock(),e.createElementBlock("div",{id:e.unref(h),class:e.normalizeClass(A.value),onClick:a[1]||(a[1]=V=>{var w;return(w=r.value)==null?void 0:w.focus()})},[e.createElementVNode("textarea",e.mergeProps(e.unref(n).controlAttrs,{ref_key:"textarea",ref:r,class:[e.unref(u).be("control"),(k=e.unref(n).controlAttrs)==null?void 0:k.class,e.unref(n).controlClass],value:o.value,rows:e.unref(n).rows,autofocus:e.unref(n).autofocus,autocomplete:R.value,spellcheck:e.unref(n).spellcheck,disabled:e.unref(n).disabled,readonly:v.value,placeholder:e.unref(n).placeholder??e.unref(z).placeholder,maxlength:e.unref(n).maxLength>0?e.unref(n).maxLength:void 0,name:e.unref(n).name||((L=e.unref(n).controlAttrs)==null?void 0:L.name),"aria-labelledby":e.unref(q),onBlur:D,onFocus:$,onKeyup:[e.withKeys(T,["enter"]),j],onKeypress:H,onKeydown:U,onInput:a[0]||(a[0]=(...V)=>e.unref(E)&&e.unref(E)(...V)),onChange:p,onCompositionstart:J,onCompositionend:M}),null,16,Y),e.createElementVNode("div",{class:e.normalizeClass(e.unref(u).be("extra"))},[e.createVNode(e.Transition,{name:e.unref(u).ns("fade"),appear:""},{default:e.withCtx(()=>[e.unref(n).loading?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(u).be("loading"))},[e.createVNode(e.unref(W),e.mergeProps(e.unref(d).loading,{effect:e.unref(n).loadingEffect||e.unref(d).loading.effect,icon:e.unref(n).loadingIcon||e.unref(d).loading.icon,label:"loading"}),null,16,["effect","icon"])],2)):e.createCommentVNode("",!0)]),_:1},8,["name"]),e.unref(n).maxLength>0&&!e.unref(n).hideCount?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(u).be("count"))},[e.renderSlot(t.$slots,"count",{value:o.value},()=>[e.createTextVNode(e.toDisplayString(e.unref(n).maxLength===1/0?c.value:`${c.value}/${e.unref(n).maxLength}`),1)])],2)):e.createCommentVNode("",!0)],2)],10,X)}}});module.exports=Z;
//# sourceMappingURL=textarea.vue2.cjs.map