<div

class="multiselect__content-wrapper"

:style="{ maxHeight: maxHeight + 'px' }"

ref="list">

<ul class="multiselect__content" :style="contentStyle">

<slot name="beforeList"></slot>

<li v-if="multiple && max === internalValue.length">

<span class="multiselect__option">

<slot name="maxElements">Maximum of {{ max }} options selected. First remove a selected option to select another.</slot>

</li>

<template v-if="!max || internalValue.length < max">

<li class="multiselect__element" v-for="(option, index) of filteredOptions" :key="index">

<span

tabindex="0"

v-if="!(option && option.$isLabel)"

:class="optionHighlight(index, option)"

@mousedown.prevent="select(option)"

@mouseenter="pointerSet(index)"

:data-select="option && option.isTag ? tagPlaceholder : selectLabelText"

:data-selected="selectedLabelText"

:data-deselect="deselectLabelText"

class="multiselect__option">

<slot name="option" :option="option" :search="search">

<span>{{ getOptionLabel(option) }}</span>

</slot>

</span>

<span

v-if="option && option.$isLabel"

:class="optionHighlight(index, option)"

class="multiselect__option multiselect__option--disabled">

{{ option.$groupLabel }}

</span>

</li>

</template>

<li v-show="filteredOptions.length === 0 && search && !loading">

<span class="multiselect__option">

<slot name="noResult">No elements found. Consider changing the search query.</slot>

<slot name="afterList"></slot>

</ul>

</div>