# All files / src Tab.vue

0% Statements 0/27
0% Branches 0/21
0% Functions 0/8
0% Lines 0/27

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
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94

     <template>
      <transition name="fade">
        <div role="tabpanel" class="tab-pane active" v-show="show"
          :class="{hide:!show}"
        >
          <slot></slot>
          <div ref="header" class="d-none">
            <slot name="_header"></slot>
          </div>
          <hr />
        </div>
      </transition>
    </template>

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

    export default {
      props: {
        header: {
          type: String
        },
        disabled: {
          type: Boolean,
          default: false
        }
      },
      computed: {
        headerRendered () {
          return this.$refs.header.innerHTML
        },
        active () {
          return this._tabset.show === this
        },
        index () {
          return this._tabset.tabs.indexOf(this)
        },
        show () {
          return this._tabset && this._tabset.show === this
        },
        transition () {
          return this._tabset ? this._tabset.effect : null
        },
        disabledBool () {
          return toBoolean(this.disabled)
        }
      },
      created () {
        this._ingroup = this.$parent && this.$parent._tabgroup
        let tabset = this
        while (tabset && tabset._tabset!==true && tabset.$parent) {
          tabset = tabset.$parent
        }
        if (!tabset._tabset) {
          this._tabset = {}
          console.warn('Warning: "tab" depend on "tabset" to work properly.')
        } else {
          tabset.tabs.push(this)
          if (!this._ingroup) {
            tabset.headers.push(this)
          } else {
            if (!~tabset.headers.indexOf(this.$parent)) {
              tabset.headers.push(this.$parent)
            }
          }
          this._tabset = tabset
        }
        if (this._ingroup) {
          this.$parent.tabs.push(this)
        }
      },
      beforeDestroy () {
        if (this._tabset.active === this.index) { this._tabset.active = 0 }
        if (this._ingroup) {
          var index = parent.tabs.indexOf(this);
          parent.tabs.splice(index, 1)
        }
        var index = this._tabset.tabs.indexOf(this);
        this._tabset.tabs.splice(index, 1)
      }
    }
    </script>
    <style>
        .tab-pane > hr {
            margin: 0;
        }
        .fade-enter-active {
          transition: opacity .5s;
        }
        .fade-leave-active {
          transition: opacity 0s;
        }
    </style>