.fv-inputbox.fv-input(ref="inputEl",
:focus="isFocused || showOut",
:opened="showOut",
:disabled="disabled",
@click="onEnter",
@keydown.enter="onEnter",
@keydown.esc="showOut = false")
.placeholder(v-if="showPlaceholder", v-text="placeholder")
.value-container
.item(v-for="singleValue in values")
span(v-if="$scopedSlots.value || $slots.value")
slot(name="value", :value="singleValue")
span(v-else) {{singleValue}}
span.button(v-if="deleteButton", v-html="deleteIcon", fv-inputbox-cancel-enter, @click.stop="onValueDelete(singleValue)")
.item.transparent
input.input(:value="searchQuery",
v-if="input",
@focus="onFocus",
@blur="onBlur",
:disabled="disabled"
@keydown="onInputKeydown",
@input="onTyping",
:size="searchQuery ? searchQuery.length + 1 : 1",
:type="inputType",
ref="input")
.input(v-else,
tabindex="0",
@focus="onFocus",
@blur="onBlur",
@keydown="onInputKeydown",
ref="input")
.caret-icon(v-if="caretIcon",
v-html="caretIcon")
transition(name="fv-inputbox")
.out-container(v-show="showOut", :class="outClass")
slot(name="out")