# All files VueTypeaheadBootstrapListItem.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69

    1x
    1x
    1x
    1x
    1x

     <template>
      <a
        @keydown.tab="$emit('listItemBlur')"
        @keydown.esc.stop.prevent="$emit('listItemBlur')"
        @keydown.down.prevent
        @keydown.up.prevent
        @keyup.down="$parent.selectNextListItem($event)"
        @keyup.up="$parent.selectPreviousListItem($event)"
        tabindex="0"
        href="#"
        :class="textClasses"
      >
        <div class="sr-only">{{screenReaderText}}</div>
        <div aria-hidden="true">
          <slot name="suggestion" v-bind="{ data: data, htmlText: htmlText }">
            <span v-html="htmlText"></span>
          </slot>
        </div>
      </a>
    </template>

    <script>
    export default {
      name: 'VueTypeaheadBootstrapListItem',

      props: {
        active: {
          type: Boolean
        },
        data: {},
        screenReaderText: {
          type: String
        },
        htmlText: {
          type: String
        },
        disabled: {
          type: Boolean
        },
        backgroundVariant: {
          type: String
        },
        textVariant: {
          type: String
        }
      },

      computed: {
        textClasses() {
          const classes = ['vbst-item', 'list-group-item', 'list-group-item-action']
    I      if (this.backgroundVariant) classes.push(`bg-${this.backgroundVariant}`)
    I      if (this.textVariant) classes.push(`text-${this.textVariant}`)
    I      if (this.disabled) classes.push('disabled')
          return classes.join(' ')
        }
      }
    }
    </script>

    <style scoped>
      a:not(.disabled){
        cursor: pointer;
      }
      a.disabled{
        cursor: default;
        pointer-events: none;
      }
    </style>