mirror of https://github.com/FreeTubeApp/FreeTube
97 lines
2.7 KiB
Vue
97 lines
2.7 KiB
Vue
<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->
|
|
<template>
|
|
<div
|
|
class="ft-input-component"
|
|
:class="{
|
|
search: isSearch,
|
|
forceTextColor: forceTextColor,
|
|
showActionButton: showActionButton,
|
|
showClearTextButton: showClearTextButton,
|
|
clearTextButtonVisible: inputDataPresent,
|
|
disabled: disabled
|
|
}"
|
|
>
|
|
<label
|
|
v-if="showLabel"
|
|
:for="id"
|
|
class="selectLabel"
|
|
>
|
|
{{ label || placeholder }}
|
|
<ft-tooltip
|
|
v-if="tooltip !== ''"
|
|
class="selectTooltip"
|
|
position="bottom"
|
|
:tooltip="tooltip"
|
|
/>
|
|
</label>
|
|
<font-awesome-icon
|
|
v-if="showClearTextButton"
|
|
:icon="['fas', 'times-circle']"
|
|
class="clearInputTextButton"
|
|
:class="{
|
|
visible: inputDataPresent,
|
|
verticallyCentered: clearInputTextButtonVerticallyCentered,
|
|
}"
|
|
tabindex="0"
|
|
role="button"
|
|
:title="$t('Search Bar.Clear Input')"
|
|
@click="handleClearTextClick"
|
|
@keydown.space.prevent="handleClearTextClick"
|
|
@keydown.enter.prevent="handleClearTextClick"
|
|
/>
|
|
<span class="inputWrapper">
|
|
<input
|
|
:id="id"
|
|
ref="input"
|
|
:value="inputDataDisplayed"
|
|
:list="idDataList"
|
|
class="ft-input"
|
|
:type="inputType"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
:spellcheck="spellcheck"
|
|
:aria-label="!showLabel ? placeholder : null"
|
|
@input="e => handleInput(e.target.value)"
|
|
@focus="handleFocus"
|
|
@blur="handleInputBlur"
|
|
@keydown="handleKeyDown"
|
|
>
|
|
<font-awesome-icon
|
|
v-if="showActionButton"
|
|
:icon="actionButtonIconName"
|
|
class="inputAction"
|
|
:class="{
|
|
enabled: inputDataPresent,
|
|
withLabel: showLabel
|
|
}"
|
|
@click="handleClick"
|
|
/>
|
|
</span>
|
|
<div class="options">
|
|
<ul
|
|
v-if="inputData !== '' && visibleDataList.length > 0 && searchState.showOptions"
|
|
:id="idDataList"
|
|
class="list"
|
|
@mouseenter="searchState.isPointerInList = true"
|
|
@mouseleave="searchState.isPointerInList = false"
|
|
>
|
|
<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
|
|
<li
|
|
v-for="(list, index) in visibleDataList"
|
|
:key="index"
|
|
:class="searchState.selectedOption === index ? 'hover': ''"
|
|
@click="handleOptionClick(index)"
|
|
@mouseenter="searchState.selectedOption = index"
|
|
@mouseleave="searchState.selectedOption = -1"
|
|
>
|
|
{{ list }}
|
|
</li>
|
|
<!-- skipped -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./ft-input.js" />
|
|
<style scoped src="./ft-input.css" />
|