<template>
  <section v-show="active">
    <slot></slot>
  </section>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

import ValidatorGroupBase from '../tools/validator-group-base.vue';

@Component({
  extends: ValidatorGroupBase
})
export default class Tab extends Vue {
  @Prop({ type: String, required: true }) readonly title!: string;

  active = false;

  @Watch('isValid')
  onIsValidChange(isValid: boolean) {
    this.$parent.$emit('validate', this, isValid);
  }
}
</script>

<style lang="scss" scoped>
.nav-tabs {
  background-color: #F8F9FA;

  .nav-link {
    color: #212529;

    &.active {
      background: #FFFFFF;
    }
  }
}
</style>
