component(
ref="formEl"
:is="formRegister ? 'w-form-element' : 'div'"
v-bind="formRegister && { validators, inputValue, disabled: isDisabled, readonly: isReadonly, isFocused, noBlurValidation }"
v-model:valid="valid"
:wrap="hasLabel && labelPosition !== 'inside'"
@reset="$emit('update:modelValue', inputValue = '');$emit('input', '')"
:class="classes"
:style="$attrs.style")
//- Left label.
template(v-if="labelPosition === 'left'")
label.w-textarea__label.w-textarea__label--left.w-form-el-shakable(
v-if="$slots.default || label"
:for="inputId"
:class="labelClasses")
slot {{ label }}
//- Input wrapper.
.w-textarea__textarea-wrap(:class="inputWrapClasses")
slot(name="icon-left" :input-id="inputId")
w-icon.w-textarea__icon.w-textarea__icon--inner-left(
v-if="innerIconLeft"
tag="label"
:for="inputId"
@click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
textarea.w-textarea__textarea(
ref="textarea"
v-model="inputValue"
v-bind="attrs"
@input="onInput"
@focus="onFocus"
@blur="onBlur"
:id="inputId"
:name="inputName"
:placeholder="placeholder || null"
:rows="rows || null"
:cols="cols || null"
:readonly="isReadonly || null"
:aria-readonly="isReadonly ? 'true' : 'false'"
:disabled="isDisabled || null"
:required="required || null"
:tabindex="tabindex || null")
template(v-if="labelPosition === 'inside' && showLabelInside")
label.w-textarea__label.w-textarea__label--inside.w-form-el-shakable(
v-if="$slots.default || label"
:class="labelClasses")
slot {{ label }}
slot(name="icon-right" :input-id="inputId")
w-icon.w-textarea__icon.w-textarea__icon--inner-right(
v-if="innerIconRight"
tag="label"
:for="inputId"
@click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
//- Right label.
template(v-if="labelPosition === 'right'")
label.w-textarea__label.w-textarea__label--right.w-form-el-shakable(
v-if="$slots.default || label"
:for="inputId"
:class="labelClasses")
slot {{ label }}