# All files / src Tabset.vue

0% Statements 0/8
0% Branches 0/2
0% Functions 0/7
0% Lines 0/8

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
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83

     <template>
      <div :class="[addClass]">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" :class="getNavStyleClass" role="tablist">
          <template v-for="t in headers">
            <li v-if="!t._tabgroup" class="nav-item" @click.prevent="select(t)">
              <a class="nav-link" :class="{active: t.active, disabled:t.disabledBool}" href="#"><span v-html="t.headerRendered"></span></a>
            </li>
            <dropdown v-else class="nav-item nav-link" :header="t.headerRendered" :class="{active:t.active}" :disabled="t.disabled">
              <li v-for="tab in t.tabs"><a class="nav-link" :class="{disabled:tab.disabled}" href="#" @click.prevent="select(tab)" v-html="tab.headerRendered"></a></li>
            </dropdown>
          </template>
        </ul>
        <div class="tab-content" ref="tab-content">
          <slot></slot>
        </div>
      </div>
    </template>

    <script>
    import {toNumber} from './utils/utils.js'
    import dropdown from './Dropdown.vue'

    export default {
      components: {
        dropdown
      },
      props: {
        navStyle: {
          type: String,
          default: 'tabs'
        },
        active: {
          type: Number,
          default: 0
        },
        addClass: {
          type: String,
          default: ''
        }
      },
      data () {
        return {
          show: null,
          headers: [],
          tabs: []
        }
      },
      created () {
        this._tabset = true
      },
      computed: {
        getNavStyleClass() {
          return `nav-${this.navStyle}`;
        },
        activeNumber () {
           return toNumber(this.active);
        },
      },
      watch: {
        activeNumber (val) {
          this.show = this.tabs[val]
        }
      },
      mounted () {
        this.show = this.tabs[this.activeNumber]
      },
      methods: {
        select (tab) {
          if (!tab.disabled) {
            this.active = tab.index
          }
        }
      }
    }
    </script>

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