<commit_before><template>
  <q-page padding class="row justify-center">
    <div style="width: 500px; max-width: 90vw;">
      <q-field
        icon="format size"
        :label="`Size: ${size}px`"
      >
        <q-slider v-model="size" :min="20" :max="256" />
      </q-field>

      <q-field
        icon="palette"
        label="Color"
      >
        <div class="row no-wrap">
          <q-input
            v-model="color"
            class="col"
            float-label="Color Palette"
          />
          <q-select
            class="col"
            v-model="color"
            float-label="Quick Pick"
            :options="colorOptions"
          />
        </div>
      </q-field>

      <p class="caption">
        Hover over them to see their names
      </p>

      <div style="margin-top: 20px">
        <div v-for="spinner in spinners" :key="spinner" class="inline-block q-ma-sm">
          <component
            :is="`q-spinner-${spinner}`"
            :size="size"
            :color="color"
          />
          <q-tooltip :offset="[0, 8]">{{ spinner }}</q-tooltip>
        </div>
      </div>

      <p class="caption">
        Default Theme Spinner:
        <q-spinner :color="color" :size="size" style="margin-left: 1rem;" />
      </p>
    </div>
  </q-page>
</template>

<script>
export default {
  data () {
    return {
      size: 36,
      color: 'primary',
      spinners: [
        'audio', 'ball', 'bars', 'circles', 'comment',
        'cube', 'dots', 'facebook', 'gears', 'grid', 'hearts',
        'hourglass', 'infinity', 'ios', 'mat', 'oval',
        'pie', 'puff', 'radio', 'rings', 'tail'
      ],
      colorOptions: [
        {
          label: 'Black',
          color: 'black',
          value: 'black'
        },
        {
          label: 'Primary',
          color: 'primary',
          value: 'primary'
        },
        {
          label: 'Secondary',
          color: 'secondary',
          value: 'secondary'
        },
        {
          label: 'Red',
          color: 'red',
          value: 'red'
        },
        {
          label: 'Green',
          color: 'green',
          value: 'green'
        },
        {
          label: 'Blue',
          color: 'blue',
          value: 'blue'
        }
      ]
    }
  }
}
</script><commit_msg>Update Spinner page<commit_after><template>
  <q-page padding class="row justify-center">
    <div style="width: 500px; max-width: 90vw;">
      <q-field
        icon="format size"
        :label="`Size: ${size}px`"
      >
        <q-slider v-model="size" :min="20" :max="256" />
      </q-field>

      <q-field
        icon="palette"
        label="Color"
      >
        <q-color
          v-model="color"
        />
      </q-field>

      <p class="caption">
        Hover over them to see their names
      </p>

      <div style="margin-top: 20px">
        <div v-for="spinner in spinners" :key="spinner" class="inline-block q-ma-sm">
          <component
            :is="`q-spinner-${spinner}`"
            :size="size"
            :style="spinnerStyle"
          />
          <q-tooltip :offset="[0, 8]">{{ spinner }}</q-tooltip>
        </div>
      </div>

      <p class="caption">
        Default Theme Spinner:
        <q-spinner color="primary" :size="size" style="margin-left: 1rem;" />
      </p>
    </div>
  </q-page>
</template>

<script>
export default {
  data () {
    return {
      size: 36,
      color: '#027be3ff',
      spinners: [
        'audio', 'ball', 'bars', 'circles', 'comment',
        'cube', 'dots', 'facebook', 'gears', 'grid', 'hearts',
        'hourglass', 'infinity', 'ios', 'mat', 'oval',
        'pie', 'puff', 'radio', 'rings', 'tail'
      ]
    }
  },
  computed: {
    spinnerStyle () {
      return `color: ${this.color}`
    }
  }
}
</script>
{'fraction_non_alphanumeric': 0.18198577824598366, 'fraction_numerical': 0.010007900974453516, 'mean_word_length': 1.5766621438263229, 'pattern_counts': {'":': 0, '<': 58, '<?xml version=': 0, '>': 58, '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': '5155311', 'n_tokens_mistral': 1280, 'n_tokens_neox': 1240, 'n_words': 262}