<commit_before><template lang="pug">
  section.component-example(:id="id")
    //- Section header
    h3(v-if="header").title.layout.align-center.mb-3
      router-link(
        :to="{ hash: id }"
        v-if="id"
        style="text-decoration: none;"
      ).mr-2
        v-icon(color="accent") mdi-pound
      span(v-text="header")

    //- Description
    markdown(v-if="desc" :source="desc")

    v-card(:class="{ 'elevation-0': readonly }").mt-4
      //- Example options
      v-toolbar(flat dense card v-if="!readonly").pr-1
        v-spacer
        v-tooltip(top v-if="hasInverted")
          v-btn(icon slot="activator" @click="invertedProxy = !invertedProxy")
            v-icon(color="grey darken-1") invert_colors
          span Invert colors
        v-tooltip(top)
          v-btn(
            icon
            tag="a"
            :href="`https://github.com/vuetifyjs/vuetifyjs.com/tree/master/examples/${file}.vue`"
            target="_blank"
            slot="activator"
          )
            v-icon(color="grey darken-1") fa-github
          span View on Github
        v-tooltip(top)
          v-btn(
            icon
            @click="sendToCodepen"
            slot="activator"
          )
            v-icon(color="grey darken-1") fa-codepen
          span Edit in codepen
        v-tooltip(top)
          v-btn(
            icon
            @click.stop="panel = !panel"
            slot="activator"
          )
            v-icon(color="grey darken-1") code
          span View source

      //- Example markup
      v-expansion-panel.elevation-0
        v-expansion-panel-content(v-model="panel" lazy)
          v-divider(v-if="!readonly")
          v-tabs(
            ref="tabs"
            color="grey lighten-4"
            v-show="!readonly"
          )
            v-tab(
              v-for="tab in tabs"
              :key="tab"
              v-show="parsed[tab]"
              active-class=""
              class="body-2"
            ) {{ tab }}
            v-tabs-items(class="grey lighten-3")
              v-tab-item(v-for="tab in tabs" :key="tab")
                markup(:lang="getLang(tab)" v-if="parsed[tab]").ma-0
                  | {{ parsed[tab] }}

      v-divider(v-if="!readonly")

      //- Example mount
      div(data-app :class="exampleClasses").application.application--example.pa-3
        component(:is="component")

    //- Codepen
    codepen(ref="codepen" :pen="parsed")
</template>

<script>
  import Vue from 'vue'
  const release = process.env.RELEASE

  export default {
    data () {
      return {
        tabs: ['template', 'script', 'style'],
        component: null,
        invertedProxy: this.inverted,
        panel: false,
        parsed: {
          script: null,
          style: null,
          template: null
        },
        url: release ? `releases/${release}/` : ''
      }
    },

    props: {
      active: Boolean,
      hasInverted: Boolean,
      file: String,
      header: String,
      desc: String,
      inverted: Boolean,
      newIn: String,
      id: String,
      readonly: Boolean
    },

    computed: {
      currentColor () {
        return this.$store.state.currentColor
      },
      exampleClasses () {
        return {
          'theme--dark': this.invertedProxy,
          'theme--light': !this.invertedProxy,
          'grey lighten-3': !this.invertedProxy
        }
      }
    },

    created () {
      if (this.active || this.readonly) {<commit_msg>fix: render example markup as soon as it's available<commit_after><template lang="pug">
  section.component-example(:id="id")
    //- Section header
    h3(v-if="header").title.layout.align-center.mb-3
      router-link(
        :to="{ hash: id }"
        v-if="id"
        style="text-decoration: none;"
      ).mr-2
        v-icon(color="accent") mdi-pound
      span(v-text="header")

    //- Description
    markdown(v-if="desc" :source="desc")

    v-card(:class="{ 'elevation-0': readonly }").mt-4
      //- Example options
      v-toolbar(flat dense card v-if="!readonly").pr-1
        v-spacer
        v-tooltip(top v-if="hasInverted")
          v-btn(icon slot="activator" @click="invertedProxy = !invertedProxy")
            v-icon(color="grey darken-1") invert_colors
          span Invert colors
        v-tooltip(top)
          v-btn(
            icon
            tag="a"
            :href="`https://github.com/vuetifyjs/vuetifyjs.com/tree/master/examples/${file}.vue`"
            target="_blank"
            slot="activator"
          )
            v-icon(color="grey darken-1") fa-github
          span View on Github
        v-tooltip(top)
          v-btn(
            icon
            @click="sendToCodepen"
            slot="activator"
          )
            v-icon(color="grey darken-1") fa-codepen
          span Edit in codepen
        v-tooltip(top)
          v-btn(
            icon
            @click.stop="panel = !panel"
            slot="activator"
          )
            v-icon(color="grey darken-1") code
          span View source

      //- Example markup
      v-expansion-panel.elevation-0
        v-expansion-panel-content(v-model="panel")
          v-divider(v-if="!readonly")
          v-tabs(
            ref="tabs"
            color="grey lighten-4"
            v-show="!readonly"
          )
            v-tab(
              v-for="tab in tabs"
              :key="tab"
              v-show="parsed[tab]"
              active-class=""
              class="body-2"
            ) {{ tab }}
            v-tabs-items(class="grey lighten-3")
              v-tab-item(v-for="tab in tabs" :key="tab")
                markup(:lang="getLang(tab)" v-if="parsed[tab]").ma-0
                  | {{ parsed[tab] }}

      v-divider(v-if="!readonly")

      //- Example mount
      div(data-app :class="exampleClasses").application.application--example.pa-3
        component(:is="component")

    //- Codepen
    codepen(ref="codepen" :pen="parsed")
</template>

<script>
  import Vue from 'vue'
  const release = process.env.RELEASE

  export default {
    data () {
      return {
        tabs: ['template', 'script', 'style'],
        component: null,
        invertedProxy: this.inverted,
        panel: false,
        parsed: {
          script: null,
          style: null,
          template: null
        },
        url: release ? `releases/${release}/` : ''
      }
    },

    props: {
      active: Boolean,
      hasInverted: Boolean,
      file: String,
      header: String,
      desc: String,
      inverted: Boolean,
      newIn: String,
      id: String,
      readonly: Boolean
    },

    computed: {
      currentColor () {
        return this.$store.state.currentColor
      },
      exampleClasses () {
        return {
          'theme--dark': this.invertedProxy,
          'theme--light': !this.invertedProxy,
          'grey lighten-3': !this.invertedProxy
        }
      }
    },

    watch: {
      panel () {
        this.$nextTick(this.$refs.tabs.callSlider)
      }
    },

    created () {
      if (this.active || this.readonly) {
{'fraction_non_alphanumeric': 0.14547001276052743, 'fraction_numerical': 0.004820643697717284, 'mean_word_length': 1.596245859403754, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 2, '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': '5391255', 'n_tokens_mistral': 2217, 'n_tokens_neox': 2159, 'n_words': 386}