<commit_before><template lang="jade">
div.fit-tabs
  div.title-container(el:"title-container")
    div(:class="moveBarClassnames", :style="moveBarStyle")
    div.title-item(v-for="tab of tabs", @click="changeTab($index)", v-text="tab.titleContent", :class="{active: activeKey == $index}")
  div.content-container
    slot
</template>
<script>
export default {
  props: ['default-active-key'],
  data () {
    return {
      activeKey: this.defaultActiveKey,
      moveBarClassNames: {
        'move-bar': true,
        'forward': this.isForward,
        'backward': !this.isForward
      }
    }
  },
  computed: {
    tabs () {
      const result = []
      for (const child of this.$children) {
        if (child.$options.name === 'tab-panel') {
          result.push({titleContent: child._props.tab.raw})
        }
      }
      return result
    }
  },
  methods: {
    changeTab (index) {
      const previousTitleIndex = +this.activeKey
      if (index !== previousTitleIndex) {
        this.$emit('change')
        this.activeKey = index
      }
    }
  }
}
</script>
<style scoped>
.fit-tabs .title-container {
  font-size: 14px;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #333;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative; }
  .fit-tabs .title-container .title-item {
    cursor: pointer;
    padding: 5px 10px 10px 10px; }
    .fit-tabs .title-container .title-item.active {<commit_msg>Tabs with move-bar<commit_after><template lang="jade">
div.fit-tabs
  div.title-container(v-el:"title-container")
    div.move-bar(:class="moveBarClassNames", :style="moveBarStyle")
    div.title-item(v-for="tab of tabs", @click="changeTab($index)", v-text="tab.titleContent", :class="{active: activeKey == $index, [`title-item-${$index}`]: true}")
  div.content-container
    slot
</template>
<script>
import Vue from 'vue'
export default {
  props: ['default-active-key'],
  data () {
    return {
      activeKey: this.defaultActiveKey,
      moveBarStyle: {},
      isForward: null
    }
  },
  ready () {
    Vue.nextTick(() => this.changeTab(this.activeKey))
  },
  computed: {
    tabs () {
      const result = []
      for (const child of this.$children) {
        if (child.$options.name === 'tab-panel') {
          result.push({titleContent: child._props.tab.raw})
        }
      }
      return result
    },
    moveBarClassNames () {
      return {
        'forward': this.isForward,
        'backward': !this.isForward
      }
    }
  },
  methods: {
    changeTab (index) {
      const previousTitleIndex = +this.activeKey
      const $titleContainer = this.$els.titleContainer
      const $titleItem = $titleContainer.querySelector(`.title-item-${index}`)
      const currentLeft = $titleItem.offsetLeft
      this.activeKey = index
      this.isForward = index > previousTitleIndex
      console.log(index, previousTitleIndex)
      this.moveBarStyle = {
        left: currentLeft + 'px',
        right: parseFloat(global.getComputedStyle($titleContainer).width) - +currentLeft - parseFloat(global.getComputedStyle($titleItem).width) - 20 + 'px'
      }
      if (index !== previousTitleIndex) {
        this.$emit('change')
        this.activeKey = index
      }
    }
  }
}
</script>
<style scoped>
.fit-tabs .title-container {
  font-size: 14px;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #333;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative; }
  .fit-tabs .title-container .title-item {
    cursor: pointer;
    padding: 5px 10px 10px 10px; }
    .fit-tabs .title-container .title-item.active {
{'fraction_non_alphanumeric': 0.15235602094240838, 'fraction_numerical': 0.006806282722513089, 'mean_word_length': 2.8440643863179074, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 15, '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': '4313518', 'n_tokens_mistral': 1278, 'n_tokens_neox': 1243, 'n_words': 247}