# All files / src TabGroup.vue

0% Statements 0/17
0% Branches 0/11
0% Functions 0/7
0% Lines 0/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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
    70
    71
    72
    73

     <template>
      <div>
        <slot></slot>
        <div ref="header" class="d-none">
          <slot name="_header"></slot>
        </div>
      </div>
    </template>

    <script>
    import {coerce} from './utils/utils.js'

    export default {
      props: {
        disabled: {
          type: Boolean,
          default: false
        },
        header: {
          type: String
        }
      },
      data () {
        return {
          tabs: [],
          show: false
        }
      },
      computed: {
        active () {
          return ~this.tabs.indexOf(this._tabset.show)
        },
        headerRendered () {
          return this.$refs.header.innerHTML
        },
        disabledBool () {
          return coerce.boolean(this.disabled)
        }
      },
      created () {
        this._tabgroup = true
        let tabset = (this.$parent && this.$parent._tabset === true) ? this.$parent : {}
        if (this.$parent && this.$parent._tabgroup) {
          console.error('Can\'t nest tabgroups.')
        }
        while (tabset && !tabset._tabset && tabset.$parent) {
          tabset = tabset.$parent
        }
        if (!tabset._tabset) {
          this._tabset = {}
          this.show = true
          console.warn('Warning: tabgroup depend on tabset to work properly.')
        } else {
          this._tabset = tabset
        }
      },
      methods: {
        blur () {
          this.show = false
        },
        toggle () {
          this.show = !this.show
        }
      }
    }
    </script>

    <style scoped>
    .nav-tabs {
      margin-bottom: 15px;
    }
    </style>