vue-amazing-ui/lib/textarea/Textarea.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),z=require("../utils/index.cjs"),C=["data-count"],S=["value","placeholder","maxlength","disabled"],b=e.defineComponent({__name:"Textarea",props:{width:{default:"100%"},allowClear:{type:Boolean,default:!1},autoSize:{type:[Boolean,Object],default:!1},disabled:{type:Boolean,default:!1},placeholder:{default:void 0},maxlength:{default:void 0},showCount:{type:Boolean,default:!1},value:{default:""},valueModifiers:{default:()=>({})}},emits:["update:value","change","enter"],setup(d,{emit:f}){const a=d,r=e.ref(null),n=e.ref(32),{colorPalettes:u,shadowColor:h}=z.useInject("Textarea"),m=e.computed(()=>typeof a.width=="number"?`${a.width}px`:a.width),i=e.computed(()=>{if(typeof a.autoSize=="object"){const t={height:`${n.value}px`,resize:"none"};return"minRows"in a.autoSize&&(t["min-height"]=a.autoSize.minRows*22+10+"px"),"maxRows"in a.autoSize&&(t["max-height"]=a.autoSize.maxRows*22+10+"px"),t}if(typeof a.autoSize=="boolean")return a.autoSize?{height:`${n.value}px`,resize:"none"}:{}}),s=e.computed(()=>!a.disabled&&a.allowClear&&a.value),p=e.computed(()=>a.maxlength?`${a.value.length} / ${a.maxlength}`:a.value.length),v=e.computed(()=>"lazy"in a.valueModifiers);e.watch(()=>a.value,async()=>{JSON.stringify(i.value)!=="{}"&&(n.value=32,await e.nextTick(),c())},{flush:"post"}),e.onMounted(()=>{c()});function c(){n.value=r.value.scrollHeight+2}const o=f;function g(t){const l=t.target;v.value||(o("update:value",l.value),o("change",t))}function x(t){const l=t.target;l.value!==a.value&&(o("update:value",l.value),o("change",t))}function y(t){o("enter",t)}function w(){var t;o("update:value",""),(t=r.value)==null||t.focus()}return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-textarea",{"show-count":t.showCount}]),style:e.normalizeStyle(`
      --textarea-width: ${m.value};
      --textarea-primary-color-hover: ${e.unref(u)[4]};
      --textarea-primary-color-focus: ${e.unref(u)[4]};
      --textarea-primary-shadow-color: ${e.unref(h)};
    `),"data-count":p.value},[e.createElementVNode("textarea",{ref_key:"textareaRef",ref:r,type:"hidden",class:e.normalizeClass(["textarea-item",{"clear-class":s.value,"textarea-disabled":t.disabled}]),style:e.normalizeStyle(i.value),value:t.value,placeholder:t.placeholder,maxlength:t.maxlength,disabled:t.disabled,onInput:g,onChange:x,onKeydown:e.withKeys(y,["enter"])},null,46,S),s.value?(e.openBlock(),e.createElementBlock("svg",{key:0,class:"clear-svg",onClick:w,focusable:"false","data-icon":"close-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},l[0]||(l[0]=[e.createElementVNode("path",{d:"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"},null,-1)]))):e.createCommentVNode("",!0)],14,C))}});exports.default=b;