<commit_before><template>
  <div class="tabs">
    <ul class="nav nav-tabs">
      <li class="nav-item" v-for="(item,index) in items" @click="setActive(index)">
                <span :class="['nav-link','btn',btnSize,item.active ? 'active' : '',item.disabled ? 'disabled' : '']">
                    {{item.title}}
                </span>
      </li>
    </ul>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import {csstransitions} from '../utils/helpers';

  // this is directly linked to the bootstrap animation timing in _tabs.scss
  // for browsers that do not support transitions like IE9 just change slide immediately
  const TRANSITION_DURATION = csstransitions() ? 150 : 0;

  // export component object
  export default {
      replace: true,
      data() {
          let currentTab = this.value || 0
          return {
              currentTab,
              items: []
          };
      },
      computed: {
          btnSize() {
              return !this.size || this.size === 'default' ? '' : `btn-${this.size}`;
          }
      },
      props: {
          fade: {
              type: Boolean,
              default: true
          },
          size: {
              type: String,
              default: 'md'
          },
          value: {
              type: Number,
              default: 0
          }
      },
      watch: {<commit_msg>[Tabs Component] Allow to change style of the tabs<commit_after><template>
  <div class="tabs" >
    <ul :class="['nav','nav-' + navStyle]">
      <li class="nav-item" v-for="(item,index) in items" @click="setActive(index)">
                <span :class="['nav-link','btn',btnSize,item.active ? 'active' : '',item.disabled ? 'disabled' : '']">
                    {{item.title}}
                </span>
      </li>
    </ul>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import {csstransitions} from '../utils/helpers';

  // this is directly linked to the bootstrap animation timing in _tabs.scss
  // for browsers that do not support transitions like IE9 just change slide immediately
  const TRANSITION_DURATION = csstransitions() ? 150 : 0;

  // export component object
  export default {
      replace: true,
      data() {
          let currentTab = this.value || 0
          return {
              currentTab,
              items: []
          };
      },
      computed: {
          btnSize() {
              return !this.size || this.size === 'default' ? '' : `btn-${this.size}`;
          }
      },
      props: {
          fade: {
              type: Boolean,
              default: true
          },
          size: {
              type: String,
              default: 'md'
          },
          value: {
              type: Number,
              default: 0
          },
          navStyle: {
              type: String,
              default: 'tabs'
          }
      },
      watch: {
{'fraction_non_alphanumeric': 0.14290551981036234, 'fraction_numerical': 0.004740941415509651, 'mean_word_length': 1.5076400679117148, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4076376', 'n_tokens_mistral': 861, 'n_tokens_neox': 833, 'n_words': 213}