| 1 |
<cx-vui-component-wrapper |
| 2 |
:elementId="currentId" |
| 3 |
:label="label" |
| 4 |
:description="description" |
| 5 |
:wrapper-css="wrapperCss" |
| 6 |
:preventWrap="preventWrap" |
| 7 |
v-if="isVisible()" |
| 8 |
> |
| 9 |
<div class="cx-vui-f-select"> |
| 10 |
<div :class="{ |
| 11 |
'cx-vui-f-select__selected': true, |
| 12 |
'cx-vui-f-select__selected-not-empty': this.currentValues.length > 0 |
| 13 |
}"> |
| 14 |
<div |
| 15 |
v-for="option in selectedOptions" |
| 16 |
class="cx-vui-f-select__selected-option" |
| 17 |
@click="handleResultClick( option.value )" |
| 18 |
> |
| 19 |
<span class="cx-vui-f-select__selected-option-icon"> |
| 20 |
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.00671L6.00671 5L10 8.99329L8.99329 10L5 6.00671L1.00671 10L0 8.99329L3.99329 5L0 1.00671L1.00671 0L5 3.99329L8.99329 0L10 1.00671Z"/></svg> |
| 21 |
</span> |
| 22 |
{{ option.label }} |
| 23 |
</div> |
| 24 |
</div> |
| 25 |
<div |
| 26 |
v-click-outside.capture="onClickOutside" |
| 27 |
v-click-outside:mousedown.capture="onClickOutside" |
| 28 |
v-click-outside:touchstart.capture="onClickOutside" |
| 29 |
|
| 30 |
@keydown.up.prevent="handleOptionsNav" |
| 31 |
@keydown.down.prevent="handleOptionsNav" |
| 32 |
@keydown.tab="handleOptionsNav" |
| 33 |
@keydown.enter="handleEnter" |
| 34 |
|
| 35 |
class="cx-vui-f-select__control" |
| 36 |
> |
| 37 |
<input |
| 38 |
:id="currentId" |
| 39 |
:placeholder="placeholder" |
| 40 |
:autocomplete="autocomplete" |
| 41 |
type="text" |
| 42 |
:value="query" |
| 43 |
@input="handleInput" |
| 44 |
@focus="handleFocus" |
| 45 |
:class="{ |
| 46 |
'cx-vui-f-select__input': true, |
| 47 |
'cx-vui-input--in-focus': this.inFocus, |
| 48 |
'cx-vui-input': true, |
| 49 |
'size-fullwidth': true, |
| 50 |
'has-error': error, |
| 51 |
}" |
| 52 |
> |
| 53 |
<div class="cx-vui-f-select__results" v-if="inFocus"> |
| 54 |
<div v-if="remote && loading" class="cx-vui-f-select__results-loading" v-html="loadingMessage"></div> |
| 55 |
<div |
| 56 |
v-else-if="remote && charsDiff > 0" |
| 57 |
v-html="parsedRemoteTriggerMessage" |
| 58 |
class="cx-vui-f-select__results-message" |
| 59 |
></div> |
| 60 |
<div |
| 61 |
v-else-if="! filteredOptions.length" |
| 62 |
v-html="notFoundMeassge" |
| 63 |
class="cx-vui-f-select__results-message" |
| 64 |
></div> |
| 65 |
<div v-else> |
| 66 |
|
| 67 |
<div |
| 68 |
v-for="( option, optionIndex ) in filteredOptions" |
| 69 |
:class="{ |
| 70 |
'cx-vui-f-select__result': true, |
| 71 |
'in-focus': optionIndex === optionInFocus, |
| 72 |
'is-selected': isOptionSelected( option ) |
| 73 |
}" |
| 74 |
@click="handleResultClick( option.value )" |
| 75 |
>{{ option.label }}</div> |
| 76 |
</div> |
| 77 |
</div> |
| 78 |
</div> |
| 79 |
<select |
| 80 |
:placeholder="placeholder" |
| 81 |
:disabled="disabled" |
| 82 |
:readonly="readonly" |
| 83 |
:name="name" |
| 84 |
:multiple="multiple" |
| 85 |
:value="currentValues" |
| 86 |
class="cx-vui-f-select__select-tag" |
| 87 |
> |
| 88 |
<option |
| 89 |
v-for="option in currentValues" |
| 90 |
:value="option" |
| 91 |
selected |
| 92 |
></option> |
| 93 |
</select> |
| 94 |
</div> |
| 95 |
<slot></slot> |
| 96 |
</cx-vui-component-wrapper> |
| 97 |
|
