quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 3.77 kB
JavaScript
import{_ as e,a as t}from"../typeof.js";import{_ as a,a as n,b as o,c as r,P as i,H as l,d as s,N as c,O as u,B as p}from"../index2.js";import{_ as h}from"../defineProperty.js";import{Local as d}from"../locale/index.js";function v(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,r=a(e);if(t){var i=a(this).constructor;o=Reflect.construct(r,arguments,i)}else o=r.apply(this,arguments);return n(this,o)}}var f=function(a){o(s,l);var n=v(s);function s(){var t;e(this,s);for(var a=arguments.length,o=new Array(a),l=0;l<a;l++)o[l]=arguments[l];return t=n.call.apply(n,[this].concat(o)),h(r(t),"name",""),h(r(t),"rows",1),h(r(t),"autosize",!1),h(r(t),"placeholder",d.current.placehold),h(r(t),"maxlength",""),h(r(t),"showcount",!1),h(r(t),"readonly",!1),h(r(t),"disabled",!1),h(r(t),"autocomplete","off"),h(r(t),"id",""),h(r(t),"value",""),h(r(t),"textAreaRef",i()),h(r(t),"evenFn",(function(e){return function(a){if(t.textAreaRef||t.textAreaRef.current){a.stopPropagation();var n=t.textAreaRef.current;t.value=n.value,t.$emit(e,{detail:{value:t.value}}),"change"===e&&t.autosize&&(n.style.height="auto",n.style.height="".concat(n.scrollHeight,"px"))}}})),t}return t(s,[{key:"componentDidMount",value:function(){var e=this;requestAnimationFrame((function(){if((e.textAreaRef||e.textAreaRef.current)&&e.autosize){var t=e.textAreaRef.current;t.style.height="".concat(t.scrollHeight,"px")}}))}},{key:"render",value:function(){return l.h("div",{class:"quark-textarea",part:"root"},l.h("textarea",{class:"quark-text-area",part:"textarea",ref:this.textAreaRef,value:this.value,id:this.id,rows:this.rows,disabled:this.disabled,autocomplete:this.autocomplete,maxlength:this.maxlength,placeholder:this.placeholder,readonly:this.readonly,onChange:this.evenFn("change"),onInput:this.evenFn("change"),onBlur:this.evenFn("blur"),onFocus:this.evenFn("focus"),onClick:this.evenFn("click")}),this.showcount&&l.h("div",{class:"quark-textarea-text-count",part:"count"},this.value.length||0,this.maxlength&&l.h("span",{part:"maxlength"},"/",this.maxlength)))}}]),s}();s([c()],f.prototype,"name",void 0),s([c()],f.prototype,"rows",void 0),s([c({type:Boolean})],f.prototype,"autosize",void 0),s([c()],f.prototype,"placeholder",void 0),s([c()],f.prototype,"maxlength",void 0),s([c({type:Boolean})],f.prototype,"showcount",void 0),s([c({type:Boolean})],f.prototype,"readonly",void 0),s([c({type:Boolean})],f.prototype,"disabled",void 0),s([c()],f.prototype,"autocomplete",void 0),s([c()],f.prototype,"id",void 0),s([u()],f.prototype,"value",void 0);var x=f=s([p({tag:"quark-textarea",style:":host {\n display: block;\n}\n\n:host .quark-textarea {\n padding: var(--textarea-padding, 3.2vw);\n background: rgb(255, 255, 255);\n border: 1px solid var(--textarea-border-color);\n display: block;\n}\n\n:host .quark-text-area {\n resize: none;\n flex: auto;\n display: block;\n box-sizing: border-box;\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n padding: 0;\n margin: 0;\n color: var(--textarea-color, #242729);\n font-size: var(--textarea-font-size, 3.73333vw);\n line-height: var(--textarea-line-height, 1.5);\n background: 0 0;\n border: 0;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n min-height: 1.5em;\n text-align: var(--textarea-text-align, left);\n}\n\n:host .quark-textarea-text-count {\n text-align: var(--textarea-text-count-align, right);\n color: var(--textarea-count-color, gray);\n padding-top: 2.13333vw;\n font-size: 3.73333vw;\n}\n"})],f);export{x as default};