All files option.vue

100% Statements 2/2
100% Branches 2/2
100% Functions 2/2
100% Lines 2/2
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                                  465x               489x                                                                        
<template>
  <div class="v-option" :class="state" :style="{ 'padding-left': `${12 + 12 * option.state.depth}px` }" role="option" v-bind="aria">
    <div class="label" v-html="option.item"></div>
  </div>
</template>
 
<script type="text/javascript">
export default {
  name: 'VOption',
  props: {
    option: {
      type: Object,
      required: true
    }
  },
  computed: {
    aria: function(){
      return {
        'aria-disabled': this.option.disabled,
        // The selected attribute should show no matter what,
        // so we provide the value in an always "truthy" format (aka string)
        'aria-selected': this.option.selected ? 'true' : 'false'
      }
    },
    state: function(){
      return {
        'is-disabled':    this.option.disabled,
        'is-selected':    this.option.selected,
        'is-highlighted': this.option.state.highlighted,
        'is-hovered':     this.option.state.hovered
      }
    }
  }
}
</script>
 
<style lang="scss" scoped>
.v-option {
  padding: 8px 12px;
 
  &.is-hovered {
    background-color: #e5e5e5;
  }
 
  &.is-disabled {
    cursor: default;
    opacity: .7;
  }
 
  &.is-highlighted {
    color: #fff;
    background-color: #231e49;
  }
}
 
.label {
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
</style>