94 lines
2.6 KiB
PHP
94 lines
2.6 KiB
PHP
<cx-vui-component-wrapper
|
|
:elementId="currentId"
|
|
:label="label"
|
|
:description="description"
|
|
:wrapper-css="wrapperCss"
|
|
:preventWrap="preventWrap"
|
|
v-if="isVisible()"
|
|
>
|
|
<div class="cx-vui-f-select">
|
|
<div :class="{
|
|
'cx-vui-f-select__selected': true,
|
|
'cx-vui-f-select__selected-not-empty': this.currentValues.length > 0
|
|
}">
|
|
<div
|
|
v-for="option in selectedOptions"
|
|
class="cx-vui-f-select__selected-option"
|
|
@click="handleResultClick( option.value )"
|
|
>
|
|
<span class="cx-vui-f-select__selected-option-icon">
|
|
<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>
|
|
</span>
|
|
{{ option.label }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-click-outside.capture="onClickOutside"
|
|
v-click-outside:mousedown.capture="onClickOutside"
|
|
v-click-outside:touchstart.capture="onClickOutside"
|
|
|
|
@keydown.up.prevent="handleOptionsNav"
|
|
@keydown.down.prevent="handleOptionsNav"
|
|
@keydown.tab="handleOptionsNav"
|
|
@keydown.enter="handleEnter"
|
|
|
|
class="cx-vui-f-select__control"
|
|
>
|
|
<input
|
|
:id="currentId"
|
|
:autocomplete="autocomplete"
|
|
type="text"
|
|
:value="query"
|
|
@input="handleInput"
|
|
@focus="handleFocus"
|
|
:class="{
|
|
'cx-vui-f-select__input': true,
|
|
'cx-vui-input--in-focus': this.inFocus,
|
|
'cx-vui-input': true,
|
|
'size-fullwidth': true,
|
|
'has-error': error,
|
|
}"
|
|
>
|
|
<div class="cx-vui-f-select__results" v-if="inFocus">
|
|
<div v-if="remote && loading" class="cx-vui-f-select__results-loading" v-html="loadingMessage"></div>
|
|
<div
|
|
v-else-if="remote && charsDiff > 0"
|
|
v-html="parsedRemoteTriggerMessage"
|
|
class="cx-vui-f-select__results-message"
|
|
></div>
|
|
<div
|
|
v-else-if="! filteredOptions.length"
|
|
v-html="notFoundMeassge"
|
|
class="cx-vui-f-select__results-message"
|
|
></div>
|
|
<div v-else>
|
|
|
|
<div
|
|
v-for="( option, optionIndex ) in filteredOptions"
|
|
:class="{
|
|
'cx-vui-f-select__result': true,
|
|
'in-focus': optionIndex === optionInFocus,
|
|
'is-selected': isOptionSelected( option )
|
|
}"
|
|
@click="handleResultClick( option.value )"
|
|
>{{ option.label }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<select
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
:readonly="readonly"
|
|
:name="name"
|
|
:multiple="multiple"
|
|
:value="currentValues"
|
|
class="cx-vui-f-select__select-tag"
|
|
>
|
|
<option
|
|
v-for="option in currentValues"
|
|
:value="option"
|
|
selected
|
|
></option>
|
|
</select>
|
|
</div>
|
|
</cx-vui-component-wrapper> |