<template>
<div class="tab-panel"
  :class="{ 'is-hiding' : !show }"
  v-show="show"
  :transition="transiton"
  transition-mode="out-in">
  <slot></slot>
</div>
</template>

<script>
module.exports = {
  data () {
    return {
      show: false,
      index: 0
    }
  },
  props: {
    header: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    show () {
      return this.$parent.activeIndex === this.index
    },
    transiton () {
      return this.$parent.effect
    }
  },
  created () {
    this.$parent.tabs.push({
      header: this.header,
      disabled: this.disabled
    })

    this.index = this.$parent.tabs.length - 1
  }
}
</script>

<style lang="stylus" scoped>
.tab-panel {

  &.is-hiding {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
    width 100%
  }
}
</style>