<commit_before><template>
  <v-sheet
    class="mb-9 v-example"
    outlined
    rounded
  >
    <v-lazy min-height="52">
      <div class="text-end pa-2">
        <app-tooltip-btn
          v-for="(tooltip, i) in tooltips"
          :key="i"
          :disabled="hasError"
          :href="tooltip.href ? tooltip.href : undefined"
          :icon="tooltip.icon"
          :path="tooltip.path"
          :target="tooltip.href ? '_blank' : undefined"
          @click="tooltip.onClick"
        />
      </div>
    </v-lazy>

    <v-divider />

    <v-lazy v-if="pen">
      <div>
        <v-expand-transition>
          <div v-show="expand">
            <v-item-group
              v-model="selected"
              class="pa-2"
              mandatory
            >
              <template v-for="(section, i) in sections">
                <v-item
                  :key="`item-${i}`"
                  :value="section"
                >
                  <template v-slot="{ active, toggle }">
                    <v-btn
                      :input-value="active"
                      class="mr-2"
                      text
                      @click="toggle"
                    >
                      {{ section }}
                    </v-btn>
                  </template>
                </v-item>
              </template>
            </v-item-group>

            <v-divider />

            <v-window
              v-model="selected"
              class="grey lighten-5"
            >
              <template v-for="(section, i) in sections">
                <v-window-item
                  :key="`window-${i}`"
                  :value="section"
                >
                  <markup :code="pen[section]" />
                </v-window-item>
              </template>
            </v-window>

            <v-divider />
          </div>
        </v-expand-transition>

        <codepen
          ref="codepen"
          :pen="pen"
        />
      </div>
    </v-lazy>

    <v-theme-provider :dark="dark">
      <v-fade-transition appear>
        <v-sheet
          v-if="file"
          class="pa-4"
          @mouseenter.once="importTemplate"
        >
          <vue-file
            :file="file"
            @error="hasError = true"
          />
        </v-sheet>
      </v-fade-transition>
    </v-theme-provider>
  </v-sheet>
</template>

<script>
  // Mixins
  import Codepen from '@/mixins/codepen'

  // Utilities
  import { get } from 'vuex-pathify'

  export default {
    name: 'Example',

    mixins: [Codepen],

    props: { file: String },

    data: () => ({
      dark: false,
      expand: false,
      hasError: false,
      selected: 'template',
    }),

    computed: {
      branch: get('app/branch'),
      sections () {
        return [
          'template',
          'script',
          'style',
        ].filter(section => this.pen[section])
      },
      tooltips () {
        return [
          {
            icon: '$mdiInvertColors',
            path: 'invert-example-colors',
            onClick: () => (this.dark = !this.dark),
          },
          {
            icon: '$mdiCodepen',
            path: 'edit-in-codepen',
            onClick: this.sendToCodepen,
          },
          {
            icon: '$mdiGithub',
            path: 'view-in-github',
            href: `https://github.com/vuetifyjs/vuetify/tree/${this.branch}/packages/docs/src/examples/${this.file}.vue`,
            onClick: () => {},
          },
          {
            icon: '$mdiCodeTags',
            path: 'view-source',
            onClick: () => (this.expand = !this.expand),
          },
        ]
      },
    },
  }
</script>

<style lang="sass">
  .v-example
    code[class*="language-"],
    pre[class*="language-"]
      text-shadow: none

    pre.language-markup::after
      content: 'vue'
</style>
<commit_msg>docs(Example): round button sheet edges for border-radius<commit_after><template>
  <v-sheet
    class="mb-9 v-example"
    outlined
    rounded
  >
    <v-lazy min-height="52">
      <div class="text-end pa-2">
        <app-tooltip-btn
          v-for="(tooltip, i) in tooltips"
          :key="i"
          :disabled="hasError"
          :href="tooltip.href ? tooltip.href : undefined"
          :icon="tooltip.icon"
          :path="tooltip.path"
          :target="tooltip.href ? '_blank' : undefined"
          @click="tooltip.onClick"
        />
      </div>
    </v-lazy>

    <v-divider />

    <v-lazy v-if="pen">
      <div>
        <v-expand-transition>
          <div v-show="expand">
            <v-item-group
              v-model="selected"
              class="pa-2"
              mandatory
            >
              <template v-for="(section, i) in sections">
                <v-item
                  :key="`item-${i}`"
                  :value="section"
                >
                  <template v-slot="{ active, toggle }">
                    <v-btn
                      :input-value="active"
                      class="mr-2"
                      text
                      @click="toggle"
                    >
                      {{ section }}
                    </v-btn>
                  </template>
                </v-item>
              </template>
            </v-item-group>

            <v-divider />

            <v-window
              v-model="selected"
              class="grey lighten-5"
            >
              <template v-for="(section, i) in sections">
                <v-window-item
                  :key="`window-${i}`"
                  :value="section"
                >
                  <markup :code="pen[section]" />
                </v-window-item>
              </template>
            </v-window>

            <v-divider />
          </div>
        </v-expand-transition>

        <codepen
          ref="codepen"
          :pen="pen"
        />
      </div>
    </v-lazy>

    <v-theme-provider :dark="dark">
      <v-fade-transition appear>
        <v-sheet
          v-if="file"
          class="pa-4"
          rounded="b"
          @mouseenter.once="importTemplate"
        >
          <vue-file
            :file="file"
            @error="hasError = true"
          />
        </v-sheet>
      </v-fade-transition>
    </v-theme-provider>
  </v-sheet>
</template>

<script>
  // Mixins
  import Codepen from '@/mixins/codepen'

  // Utilities
  import { get } from 'vuex-pathify'

  export default {
    name: 'Example',

    mixins: [Codepen],

    props: { file: String },

    data: () => ({
      dark: false,
      expand: false,
      hasError: false,
      selected: 'template',
    }),

    computed: {
      branch: get('app/branch'),
      sections () {
        return [
          'template',
          'script',
          'style',
        ].filter(section => this.pen[section])
      },
      tooltips () {
        return [
          {
            icon: '$mdiInvertColors',
            path: 'invert-example-colors',
            onClick: () => (this.dark = !this.dark),
          },
          {
            icon: '$mdiCodepen',
            path: 'edit-in-codepen',
            onClick: this.sendToCodepen,
          },
          {
            icon: '$mdiGithub',
            path: 'view-in-github',
            href: `https://github.com/vuetifyjs/vuetify/tree/${this.branch}/packages/docs/src/examples/${this.file}.vue`,
            onClick: () => {},
          },
          {
            icon: '$mdiCodeTags',
            path: 'view-source',
            onClick: () => (this.expand = !this.expand),
          },
        ]
      },
    },
  }
</script>

<style lang="sass">
  .v-example
    code[class*="language-"],
    pre[class*="language-"]
      text-shadow: none

    pre.language-markup::after
      content: 'vue'
</style>

{'fraction_non_alphanumeric': 0.15401441070509522, 'fraction_numerical': 0.002058672156459084, 'mean_word_length': 1.165784341042073, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 111, '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': '526789', 'n_tokens_mistral': 2364, 'n_tokens_neox': 2321, 'n_words': 379}