component(
ref="formEl"
:is="formRegister ? 'w-form-element' : 'div'"
v-bind="formRegister && { validators, inputValue, disabled: isDisabled, readonly: isReadonly, isFocused, noBlurValidation }"
v-model:valid="valid"
@reset="$emit('update:modelValue', inputValue = '');$emit('input', '')"
:wrap="hasLabel && labelPosition !== 'inside'"
:class="classes"
:style="$attrs.style")
input(v-if="type === 'hidden'" type="hidden" :name="name || null" v-model="inputValue")
template(v-else)
//- Left label.
template(v-if="labelPosition === 'left'")
label.w-input__label.w-input__label--left.w-form-el-shakable(
v-if="$slots.default || label"
:for="inputId"
:class="labelClasses")
slot {{ label }}
//- Input wrapper.
.w-input__input-wrap(:class="inputWrapClasses")
slot(name="icon-left" :input-id="inputId")
w-icon.w-input__icon.w-input__icon--inner-left(
v-if="innerIconLeft"
tag="label"
:for="inputId"
@click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
//- All types of input except file.
input.w-input__input(
v-if="type !== 'file'"
ref="input"
v-model="inputValue"
@input="onInput"
@focus="onFocus"
@blur="onBlur"
:id="inputId"
:type="type"
:name="inputName"
:placeholder="placeholder || null"
:step="step || null"
:min="min || null"
:max="max || null"
:minlength="minlength || null"
:maxlength="maxlength || null"
:readonly="isReadonly || null"
:aria-readonly="isReadonly ? 'true' : 'false'"
:disabled="isDisabled || null"
:required="required || null"
:tabindex="tabindex || null"
v-bind="attrs"
:class="inputClass")
//- Input type file.
template(v-else)
input(
ref="input"
:id="inputId"
type="file"
:name="name || null"
@focus="onFocus"
@blur="onBlur"
@change="onFileChange"
:multiple="multiple || null"
v-bind="attrs"
:disabled="isDisabled || null"
:data-progress="overallFilesProgress /* Needed to emit the overallProgress. */")
transition-group.w-input__input.w-input__input--file(
tag="label"
name="fade"
:for="inputId")
span.w-input__no-file(v-if="!inputFiles.length && isFocused" key="no-file")
slot(name="no-file")
template(v-if="$slots['no-file'] === undefined") No file
span(v-for="(file, i) in inputFiles" :key="file.lastModified")
| {{ i ? ', ': '' }}
span.filename(:key="`${i}b`") {{ file.base }}
| {{ file.extension ? `.${file.extension}` : '' }}
template(v-if="labelPosition === 'inside' && showLabelInside")
label.w-input__label.w-input__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-input__icon.w-input__icon--inner-right(
v-if="innerIconRight"
tag="label"
:for="inputId"
@click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
w-progress.fill-width(
v-if="hasLoading || (showProgress && (uploadInProgress || uploadComplete))"
size="2"
:color="progressColor || color"
:model-value="showProgress ? (uploadInProgress || uploadComplete) && overallFilesProgress : loadingValue")
//- Files preview.
label.d-flex(v-if="type === 'file' && preview && inputFiles.length" :for="inputId")
template(v-for="(file, i) in inputFiles")
i.w-icon.wi-spinner.w-icon--spin.size--sm.w-input__file-preview.primary(
v-if="file.progress < 100"
:key="`${i}a`")
img.w-input__file-preview(
v-else-if="file.preview"
:key="`${i}b`"
:src="file.preview"
alt="")
i.w-icon.w-input__file-preview.primary.size--md(
v-else
:key="`${i}c`"
:class="preview && typeof preview === 'string' ? preview : 'wi-file'")
//- Right label.
template(v-if="labelPosition === 'right'")
label.w-input__label.w-input__label--right.w-form-el-shakable(
v-if="$slots.default || label"
:for="inputId"
:class="labelClasses")
slot {{ label }}