div(
:class=`[
"gb-field-input",
"gb-field-input--" + size,
"gb-field-input--" + computedTheme,
"gb-field-input--" + computedStatus,
{
"gb-field-input--borders": borders,
"gb-field-input--clearable": clearable,
"gb-field-input--disabled": disabled,
"gb-field-input--focused": focused,
"gb-field-input--full-width": fullWidth,
"gb-field-input--readonly": readonly,
"gb-field-input--rounded": rounded,
"gb-field-input--with-icon": leftIcon || rightIcon
}
]`
)
field-label(
v-if="label"
:forField="uuid"
:required="required"
:size="size"
:theme="theme"
class="gb-field-input__label"
) {{ label }}
div(
@click="onContainerClick"
class="gb-field-input__container"
)
span(
v-if="prepend"
@click="onPrependClick"
:class=`[
"gb-field-input__block",
"gb-field-input__block--prepend",
{
"gb-field-input__block--clickable": $listeners.prependClick
}
]`
) {{ prepend }}
base-icon(
v-if="leftIcon"
:name="leftIcon"
class="gb-field-input__icon gb-field-input__icon--left"
)
input(
@blur="onFieldBlur"
@change="onFieldChange"
@focus="onFieldFocus"
@input="onFieldInput"
@keydown="onFieldKeyDown"
@keyup="onFieldKeyUp"
:autocomplete="autocomplete ? 'on' : 'off'"
:disabled="disabled"
:id="uuid"
:max="max"
:min="min"
:name="name"
:placeholder="placeholder"
:spellcheck="spellcheck"
:readonly="readonly"
:type="type"
:value="innerValue"
class="gb-field-input__field js-tag-for-autofocus"
)
base-icon(
v-if="computedRightIcon"
@click="onRightIconClick"
:name="computedRightIcon"
class="gb-field-input__icon gb-field-input__icon--right"
)
span(
v-if="append"
@click="onAppendClick"
:class=`[
"gb-field-input__block",
"gb-field-input__block--append",
{
"gb-field-input__block--clickable": $listeners.appendClick
}
]`
) {{ append }}
field-message(
v-if="fieldMessageStatus"
:message="fieldMessageContent"
:size="size"
:status="fieldMessageStatus"
:theme="theme"
)