All files / select/src/components/select/components state.vue

0% Statements 0/1
100% Branches 0/0
100% Functions 0/0
0% Lines 0/1
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                                                                                                     
<template>
  <div class="v-option" :class="{ 'is-disabled': option.disabled, 'is-selected': option.selected, 'is-highlighted': option.state.highlighted, 'is-hovered': option.state.hovered }" :style="{ 'padding-left': `${12 + 12 * option.state.depth}px` }">
    <img class="icon" src="https://placekitten.com/20/20" width="20" height="20" />
    <div class="label" v-html="option.item"></div>
  </div>
</template>
 
<script type="text/javascript">
import VOption from './option.vue'
 
export default {
  name: 'VState',
  extends: VOption
}
</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: #19A187;
  }
}
 
.icon {
  float: left;
  margin-right: 8px;
  border-radius: 50%;
}
 
.label {
  flex: 1 1 auto;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  font-size: 14px;
  font-weight: normal;
}
</style>