<commit_before><template>
  <div class="row">
    <div class="medium-10 medium-offset-1 columns">
      <h1>{{ msg }}</h1>
      <ul id="accordion" class="accordion" data-accordion>
        <li class="accordion-item is-active" data-accordion-item>
          <a href="#" class="accordion-title">Accordion 1</a>
          <div class="accordion-content" data-tab-content>
            If you init Foundation in the component, this will work fine.
          </div>
        </li>
        <li class="accordion-item" data-accordion-item>
          <a href="#" class="accordion-title">Accordion 2</a>
          <div class="accordion-content" data-tab-content>
            I need to be clicked, in order to show up.
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'accordion',
  mounted () {
    this.accordion = new Foundation.Accordion($('#accordion'), {
      // These options can be declarative using the data attributes
      slideSpeed: 250,
      multiExpand: false
    })
  },
  data () {
    return {
      msg: 'Accordion'
    }
  },
  destroyed () {<commit_msg>Add props to Accordion component for Javascript options<commit_after><template>
  <div class="row">
    <div class="medium-10 medium-offset-1 columns">
      <h1>{{ msg }}</h1>
      <ul
        id="accordion"
        class="accordion"
        data-accordion
        v-bind:data-slide-speed="speed"
        v-bind:data-multi-expand="multi"
        v-bind:data-allow-all-closed="allClosed"
        v-bind:data-deep-link="dL"
        v-bind:data-deep-link-smudge="dLSmudge"
        v-bind:data-deep-link-smudge-delay="dLSmudgeDelay"
        v-bind:data-update-history="history">
        <li class="accordion-item is-active" data-accordion-item>
          <a href="#" class="accordion-title">Accordion 1</a>
          <div class="accordion-content" data-tab-content>
            If you init Foundation in the component, this will work fine.
          </div>
        </li>
        <li class="accordion-item" data-accordion-item>
          <a href="#" class="accordion-title">Accordion 2</a>
          <div class="accordion-content" data-tab-content>
            I need to be clicked, in order to show up.
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'accordion',
  mounted () {
    this.accordion = new Foundation.Accordion($('#accordion'))
  },
  data () {
    return {
      msg: 'Accordion',
      speed: this.slideSpeed ? this.slideSpeed : 250,
      multi: this.multiExpand ? this.multiExpand : false,
      allClosed: this.allowAllClosed ? this.allowAllClosed : false,
      dL: this.deepLink ? this.deepLink : false,
      dLSmudge: this.deepLinkSmudge ? this.deepLinkSmudge : false,
      dLSmudgeDelay: this.deepLinkSmudgeDelay ? this.deepLinkSmudgeDelay : 300,
      history: this.updateHistory ? this.updateHistory : false
    }
  },
  props: {
    slideSpeed: {
      type: Number,
      default: () => 250
    },
    multiExpand: {
      type: Boolean,
      default: () => false
    },
    allowAllClosed: {
      type: Boolean,
      default: () => false
    },
    deepLink: {
      type: Boolean,
      default: () => false
    },
    deepLinkSmudge: {
      type: Boolean,
      default: () => false
    },
    deepLinkSmudgeDelay: {
      type: Number,
      default: () => 300
    },
    updateHistory: {
      type: Boolean,
      default: () => false
    }
  },
  destroyed () {
{'fraction_non_alphanumeric': 0.14375896700143473, 'fraction_numerical': 0.008321377331420373, 'mean_word_length': 2.264044943820225, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 56, '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': '5375364', 'n_tokens_mistral': 1164, 'n_tokens_neox': 1101, 'n_words': 247}