https://dataedo.com/build/assets/LinedTextarea-D_dzs0rH.js

1import{o as c,c as d,n as u,a as h,F as p,r as m,b as g,w as _,v as L,d as f}from"./app-DheFH3_h.js";import{_ as x}from"./_plugin-vue_export-helper-DlAUqK2U.js";import"./_commonjsHelpers-BosuxZz1.js";/* empty css            */const y={name:"LinedTextarea",mounted(){this.content=this.value,this.syncScroll(),this.calculateCharactersPerLine()},data(){return{content:"",widthPerChar:8,numPerLine:1,previousWidth:0,scrolledLength:0}},props:{disabled:{type:Boolean,default:!1},nowrap:{type:Boolean,default:!0},placeholder:{type:String,default:""},styles:{type:Object,default:()=>({height:"300px"})},value:{type:String,default:""},validate:{type:Function,default:()=>!0}},computed:{invalidLines(){const e=[];return this.content.split(`
2`).forEach((t,a)=>{this.validate(t)||e.push(a+1)}),e},lines(){if(this.content==="")return[1];const e=[];let t=1;function a(o,s){if(s<=0)return console.warn("Please set the min-width of textarea to allow at least one character per line."),o.length+1;const i=o.split(" ");let n=1,l=s;return i.forEach(r=>{for(;l===s&&r.length>=l;)n++,r=r.slice(s);if(l===s){l-=r.length;return}r.length+1>l&&(n++,l=s),l-=l===s?r.length:r.length+1}),l===s?n-1:n}return this.content.split(`
3`).forEach(o=>{const s=a(o,this.numPerLine)-1;e.push(t);for(let i=0;i<s;i++)e.push("&nbsp;");t++}),e},longestWidth(){for(let e=this.lines.length-1;e>=0;e--)if(this.lines[e]!=="&nbsp;")return(this.lines[e]+"").length*this.widthPerChar+10}},watch:{longestWidth(e,t){e!==t&&this.$nextTick(()=>this.calculateCharactersPerLine())},nowrap(){this.calculateCharactersPerLine()},value(e){console.log(e),e!==this.content&&(this.content=e)}},methods:{calculateCharactersPerLine(){if(this.nowrap){this.numPerLine=Number.MAX_SAFE_INTEGER;return}const e=this.$refs.textarea,t=getComputedStyle(e),a=parseFloat(t.getPropertyValue("padding-left")),o=parseFloat(t.getPropertyValue("padding-right")),s=t.getPropertyValue("font-size"),i=t.getPropertyValue("font-family"),n=e.clientWidth-a-o,l=this.$refs.helper;l.style.fontSize=s,l.style.fontFamily=i,l.innerHTML="";for(let r=1;r<999;r++)if(l.innerHTML+="a",l.getBoundingClientRect().width>n){this.numPerLine=r-1;break}},detectResize(){const e=this.$refs.textarea,{clientWidth:t,clientHeight:a}=e,o=()=>{const{clientWidth:i,clientHeight:n}=e;(t!==i||a!==n)&&this.calculateCharactersPerLine()},s=()=>{this.calculateCharactersPerLine(),document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",s)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",s)},onInput(){this.$emit("input",this.content),this.recalculate()},recalculate(){const t=this.$refs.textarea.clientWidth;t!==this.previousWidth&&this.calculateCharactersPerLine(),this.previousWidth=t},scrollLines(e){this.scrolledLength=e.target.scrollTop,this.syncScroll()},syncScroll(){this.$refs.lines.style.transform=`translateY(${-this.scrolledLength}px)`}}},v={class:"lined-textarea"},P={class:"lined-textarea__lines__inner",ref:"lines"},b=["innerHTML"],C=["disabled","placeholder"],T={class:"count-helper",ref:"helper"};function w(e,t,a,o,s,i){return c(),d("div",v,[a.disabled?g("",!0):(c(),d("div",{key:0,class:"lined-textarea__lines",style:u({"padding-right":i.longestWidth+"px"})},[h("div",P,[(c(!0),d(p,null,m(i.lines,(n,l)=>(c(),d("p",{key:l,class:f(["lined-textarea__lines__line",{"lined-textarea__lines__line--invalid":i.invalidLines.includes(n)}]),innerHTML:n},null,10,b))),128))],512)],4)),_(h("textarea",{style:u([{resize:"none"},a.styles]),disabled:a.disabled,placeholder:a.placeholder,class:f(["lined-textarea__content",{"lined-textarea__content--disabled":a.disabled,"lined-textarea__content--wrap":!a.nowrap,"lined-textarea__content--nowrap":a.nowrap}]),"onUpdate:modelValue":t[0]||(t[0]=n=>s.content=n),onScroll:t[1]||(t[1]=(...n)=>i.scrollLines&&i.scrollLines(...n)),onInput:t[2]||(t[2]=(...n)=>i.onInput&&i.onInput(...n)),onMousedown:t[3]||(t[3]=(...n)=>i.detectResize&&i.detectResize(...n)),ref:"textarea"},null,46,C),[[L,s.content]]),h("div",T,null,512)])}const F=x(y,[["render",w],["__scopeId","data-v-afab75ac"]]);export{F as default};