<commit_before><template>
  <Transition name="slide-fade">
    <div v-if="errors.length" id="errors-alert" class="alert alert-danger alert-dismissible" role="alert">
      <ul class="list-unstyled">
        <li v-for="error in errors" class="">
          {{ error }}
        </li>
      </ul>
      <button type="button" class="close" aria-label="Close" v-on:click="errors = []">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </Transition>
</template>

<script>
export default {
  mounted() {
    let timer;
    this.$root.$on('errorHappened', error => {
      clearTimeout(timer);

      this.errors.push(error);

      timer = setTimeout(() => {
        this.errors = [];
      }, 10000);
    });
  },

  data() {
    return {
      errors: []
    };
  },

  created() {
    this.errors = this.$attrs.errors;
  },

  methods: {}
}
</script>
<style scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.4s;
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(400px);
  opacity: 0;
}
</style><commit_msg>Buy From Character Store: Using component styling for the dismiss button<commit_after><template>
  <Transition name="slide-fade">
    <div v-if="errors.length" id="errors-alert" class="alert alert-danger" role="alert">
      <ul class="list-unstyled">
        <li v-for="error in errors" class="">
          {{ error }}
        </li>
      </ul>
      <button type="button" class="dismiss-message" aria-label="Close" v-on:click="errors = []">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </Transition>
</template>

<script>
export default {
  mounted() {
    let timer;
    this.$root.$on('errorHappened', error => {
      clearTimeout(timer);

      this.errors.push(error);

      timer = setTimeout(() => {
        this.errors = [];
      }, 10000);
    });
  },

  data() {
    return {
      errors: []
    };
  },

  created() {
    this.errors = this.$attrs.errors;
  },

  methods: {}
}
</script>
<style scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.4s;
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(400px);
  opacity: 0;
}
.dismiss-message {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.75rem 1.25rem;
  color: inherit;
  background-color: transparent;
  border: 0;
  float: right;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
}
</style>
{'fraction_non_alphanumeric': 0.18472610955617752, 'fraction_numerical': 0.01759296281487405, 'mean_word_length': 2.663250366032211, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 43, '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': '1356587', 'n_tokens_mistral': 921, 'n_tokens_neox': 857, 'n_words': 175}