maestro-server/bootue

<div class="form-group selected"
     :class="[showState]">

  <slot name="label">
    <label v-if="label" class="control-label" :class="labelClass()">{{label}}</label>
  </slot>

  <div :class="wrapperClass()">
    <slot name="before"></slot>

    <div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
      <div ref="toggle" @mousedown.prevent="toggleDropdown"
           :class="['dropdown-toggle', 'clearfix', {'disabled': disabled}, {'dropdown-single': !multiple}]">

      <span class="selected-tag" v-for="option in valueAsArray" v-bind:key="option.index">
        <slot name="selected-option" v-bind="option">
          {{ getOptionLabel(option) }}
        </slot>
        <button v-if="multiple" @click="deselect(option)" type="button" class="vclose" aria-label="Remove option">
          <span aria-hidden="true">&times;</span>
        </button>
      </span>

        <input
          ref="search"
          v-model="search"
          @keydown.delete="maybeDeleteValue"
          @keyup.esc="onEscape"
          @keydown.up.prevent="typeAheadUp"
          @keydown.down.prevent="typeAheadDown"
          @keydown.enter.prevent="typeAheadSelect"
          @blur="onSearchBlur"
          @focus="onSearchFocus"
          type="search"
          :class="[{'disabled': disabled}, 'form-control']"
          :placeholder="searchPlaceholder"
          :readonly="!searchable"
          :style="{ width: isValueEmpty ? '100%' : 'auto' }"
          :id="inputId"
          aria-label="Search for option"
        >

        <i v-if="!noDrop" ref="openIndicator" role="presentation"
           :class="[{'disabled': disabled}, 'open-indicator']"></i>

        <slot name="spinner">
          <div class="spinner" v-show="mutableLoading">Loading...</div>
        </slot>
      </div>

      <transition :name="transition">
        <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
          <li v-for="(option, index) in filteredOptions" v-bind:key="index"
              :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }"
              @mouseover="typeAheadPointer = index">
            <a @mousedown.prevent="select(option)">
              <slot name="option" v-bind="option">
                {{ getOptionLabel(option) }}
              </slot>
            </a>
          </li>
          <li v-if="!filteredOptions.length" class="no-options">
            <slot name="no-options">Sorry, no matching options.</slot>
          </li>
        </ul>
      </transition>
    </div>


    <slot name="after"></slot>

    <div v-if="showHelp" class="help-block relative">{{help}}</div>
    <div v-if="showError" class="help-block with-errors relative">{{error}}</div>
  </div>

</div>