<commit_before><style lang='scss' scoped>
  @import '~@/styles/mixins';

  .toggle {
    cursor: pointer;
  }

  .content {
    @include transition-normal(height);
    height: 0;
    overflow: hidden;
    pointer-events: none;
    will-change: height;

    &.visible {
      height: auto;
      overflow: auto;
      pointer-events: all;
    }
  }
</style>

<template>
  <div>
    <div class='toggle' @click='toggle'>
      <slot name='toggle'></slot>
    </div>
    <div class='content' :class='{ visible }' ref='content'>
      <slot name='content'></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'element-collapse',

    props: {
      collapsed: Boolean
    },

    data: () => ({
      visible: true
    }),

    methods: {
      updateHeight (delay) {
        let content = this.$refs.content
        let height = content.scrollHeight
        content.style.height = height + 'px'
        setTimeout(() => {
          content.style.height = ''
        }, delay)
      },

      toggle () {
        this.visible = !this.visible
        this.updateHeight(this.visible ? 250 : 100)
      }
    },

    mounted () {
      this.visible = !this.collapsed
    }
  }
</script><commit_msg>Fix typo in collapse component<commit_after><style lang='scss' scoped>
  @import '~@/styles/mixins';

  .toggle {
    cursor: pointer;
  }

  .content {
    @include transition-normal(height);
    height: 0;
    overflow: hidden;
    pointer-events: none;
    will-change: height;

    &.visible {
      height: auto;
      overflow: auto;
      pointer-events: all;
    }
  }
</style>

<template>
  <div>
    <div class='toggle' @click='toggle'>
      <slot name='toggle'></slot>
    </div>
    <div class='content' :class='{ visible }' ref='content'>
      <slot name='content'></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'element-collapse',

    props: {
      collapsed: Boolean
    },

    data: () => ({
      visible: true
    }),

    methods: {
      updateHeight (delay) {
        let content = this.$refs.content
        let height = content.scrollHeight
        content.style.height = height + 'px'
        setTimeout(() => {
          content.style.height = ''
        }, delay)
      },

      toggle () {
        this.visible = !this.visible
        this.updateHeight(this.visible ? 250 : 100)
      }
    },

    created () {
      this.visible = !this.collapsed
    }
  }
</script>
{'fraction_non_alphanumeric': 0.15761535320538997, 'fraction_numerical': 0.0057166190281747655, 'mean_word_length': 2.0510585305105855, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 39, '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': '1976875', 'n_tokens_mistral': 803, 'n_tokens_neox': 774, 'n_words': 165}