22 lines
3.7 KiB
JavaScript
22 lines
3.7 KiB
JavaScript
|
import{css as s,html as r,Component as h,nextTick as l}from"wkit";class n extends h{static props={value:{type:String,default:"",attribute:!1},type:"",placeholder:"",autofocus:!1,readOnly:!1,disabled:!1,autosize:!1,maxheight:{type:Number,default:null},minheight:{type:Number,default:null},maxlength:{type:Number,default:null},minlength:{type:Number,default:null},showLimit:!1,lazy:0};static styles=[s`:host{display:flex;width:100%;min-height:80px;user-select:none;-moz-user-select:none;color:var(--color-dark-1);border-radius:3px;cursor:text;transition:box-shadow .15s linear}:host([autosize]) textarea{overflow:hidden}.label{position:relative;width:100%;min-height:100%;font-size:14px;border:1px solid var(--color-grey-2);border-radius:inherit;background:var(--bg-color, #fff);color:inherit;cursor:inherit}.label textarea{flex:1;min-width:36px;width:100%;height:100%;padding:5px 8px;border:0;border-radius:inherit;color:inherit;font:inherit;background:none;outline:none;box-shadow:none;cursor:inherit;resize:none}.label textarea::placeholder{color:var(--color-grey-1)}.label .input-stat{display:none;position:absolute;right:4px;bottom:2px;line-height:1;font-size:12px;color:var(--color-grey-2)}:host([show-limit]) .label{padding-bottom:14px}:host([show-limit]) .label .input-stat{display:block}:host([disabled]){cursor:not-allowed}:host([disabled]) .label{background:var(--color-plain-1);opacity:.6}:host([readonly]){cursor:default}:host(:focus-within){box-shadow:0 0 0 2px var(--color-plain-a)}:host([type=primary]:focus-within){box-shadow:0 0 0 2px var(--color-teal-a)}:host([type=info]:focus-within){box-shadow:0 0 0 2px var(--color-blue-a)}:host([type=success]:focus-within){box-shadow:0 0 0 2px var(--color-green-a)}:host([type=danger]:focus-within){box-shadow:0 0 0 2px var(--color-red-a)}:host([type=warning]:focus-within){box-shadow:0 0 0 2px var(--color-orange-a)}:host([type=primary]) .label{border-color:var(--color-teal-2)}:host([type=info]) .label{border-color:var(--color-blue-2)}:host([type=success]) .label{border-color:var(--color-green-2)}:host([type=danger]) .label{border-color:var(--color-red-2)}:host([type=warning]) .label{border-color:var(--color-orange-2)}:host([no-border]),:host(:focus-within[no-border]){box-shadow:none}:host([no-border]) .label,:host(:focus-within[no-border]) .label{border:0}`];onInput(e){this.value=e.target.value,this.autosize&&l(()=>this.adjustTextareaSize())}adjustTextareaSize(){let{maxheight:e,minheight:a}=this;const o=this.$refs.textarea;o.style.height="auto";let t=o.scrollHeight;a&&!Number.isNaN(+a)&&(t=Math.max(a,t)),e&&!Number.isNaN(+e)&&(o.style.overflow=t>e?"auto":"hidden",t=Math.min(e,t)),o.style.height!==t&&(o.style.height=t+"px")}onKeydown(e){let{minlength:a,lazy:o}=this,t=this.value,i=Date.now();if(e.keyCode===13&&(e.ctrlKey||e.metaKey)){if(this.disabled||this.readOnly||o&&i-this.stamp<o||a&&a>0&&t.length<a)return;this.stamp=i,this.$emit("submit",{value:this.value})}}onChange(e){this.$emit(e.type)}render(){return r`
|
||
|
|
<div class="label">
|
||
|
|
<textarea
|
||
|
|
:value=${this.value}
|
||
|
|
ref="textarea"
|
||
|
|
spellcheck="false"
|
||
|
|
placeholder=${this.placeholder}
|
||
|
|
readonly=${this.readOnly}
|
||
|
|
disabled=${this.disabled}
|
||
|
|
maxlength=${this.maxlength}
|
||
|
|
minlength=${this.minlength}
|
||
|
|
autofocus=${this.autofocus}
|
||
|
|
@input=${this.onInput}
|
||
|
|
@keydown=${this.onKeydown}
|
||
|
|
@change=${this.onChange}
|
||
|
|
></textarea>
|
||
|
|
${this.showLimit?r`<div class="input-stat">
|
||
|
|
${this.value.length}/${this.maxlength||"\u221E"}
|
||
|
|
</div>`:""}
|
||
|
|
</div>
|
||
|
|
`}mounted(){this.autofocus&&l(e=>this.$refs.textarea.focus()),this.autosize&&(this.minheight=this.minheight||this.offsetHeight-2,this.adjustTextareaSize())}}n.reg("textarea");
|