<commit_before><template>
  <div class="example">
    <div class="flex justify-center mb-1">
      <button
        v-for="color in colors_1"
        :key="color.value"
        class="mx-1"
        :class="colorClass(color)"
        @click="selectedColor = color"
      >{{ color.label}}</button>
    </div>
    <div class="flex justify-center mb-2">
      <button
        v-for="color in colors_2"
        :key="color.value"
        class="mx-1"
        :class="colorClass(color)"
        @click="selectedColor = color"
      >{{ color.label}}</button>
      <!-- <li class="mr-3">
        <a
          class="inline-block border border-blue rounded py-1 px-3 bg-blue text-white"
          href="#"
        >Active Pill</a>
      </li>-->
    </div>
    <button :class="darkClass" @click="isDark = !isDark">Dark</button>
    <v-calendar :color="selectedColor.value" :is-dark="isDark" :attributes="attrs"/>
  </div>
</template>

<script>
export default {
  data() {
    const colors = [
      {
        value: 'gray',
        label: 'Gray',
      },
      {
        value: 'red',
        label: 'Red',
      },
      {
        value: 'orange',
        label: 'Orange',
      },
      {
        value: 'yellow',
        label: 'Yellow',
      },
      {
        value: 'green',
        label: 'Green',
      },
      {
        value: 'teal',
        label: 'Teal',
      },
      {
        value: 'blue',
        label: 'Blue',
      },
      {
        value: 'indigo',
        label: 'Indigo',
      },
      {
        value: 'purple',
        label: 'Purple',
      },
      {
        value: 'pink',
        label: 'Pink',
      },
    ];
    return {
      selectedColor: colors[0],
      colors_1: colors.slice(0, 5),
      colors_2: colors.slice(5, 10),
      isDark: false,
      attrs: [
        {
          key: 'test',
          highlight: true,
          dates: { start: new Date(2019, 3, 15), end: new Date(2019, 3, 19) },
        },
      ],
    };
  },
  computed: {
    darkClass() {
      const shared =
        'text-sm font-semibold block w-full rounded py-1 mb-4 focus:outline-none';
      if (this.isDark) {
        return `${shared} bg-gray-800 text-white`;
      }
      return `${shared} hover:bg-gray-200 border border-gray-800 text-gray-900`;
    },
  },
  methods: {
    colorClass(color) {
      const sharedClasses = `inline-block text-sm border border-${
        color.value
      }-500 rounded py-1 mb-2 focus:outline-none w-16`;
      if (color === this.selectedColor) {
        return `${sharedClasses} bg-${
          color.value
        }-500 text-white font-semibold`;
      }
      return `${sharedClasses} text-${color.value}-800 hover:bg-${
        color.value
      }-100 font-medium`;
    },
  },
};
</script><commit_msg>Update cal-configure.vue<commit_after><template>
  <div class="example">
    <div class="flex justify-center mb-1">
      <button
        v-for="color in colors_1"
        :key="color.value"
        class="mx-1"
        :class="colorClass(color)"
        @click="selectedColor = color"
      >{{ color.label}}</button>
    </div>
    <div class="flex justify-center mb-2">
      <button
        v-for="color in colors_2"
        :key="color.value"
        class="mx-1"
        :class="colorClass(color)"
        @click="selectedColor = color"
      >{{ color.label}}</button>
      <!-- <li class="mr-3">
        <a
          class="inline-block border border-blue rounded py-1 px-3 bg-blue text-white"
          href="#"
        >Active Pill</a>
      </li>-->
    </div>
    <button :class="darkClass" @click="isDark = !isDark">Dark</button>
    <v-calendar :color="selectedColor.value" :is-dark="isDark" :attributes="attrs"/>
  </div>
</template>

<script>
export default {
  data() {
    const colors = [
      {
        value: 'gray',
        label: 'Gray',
      },
      {
        value: 'red',
        label: 'Red',
      },
      {
        value: 'orange',
        label: 'Orange',
      },
      {
        value: 'yellow',
        label: 'Yellow',
      },
      {
        value: 'green',
        label: 'Green',
      },
      {
        value: 'teal',
        label: 'Teal',
      },
      {
        value: 'blue',
        label: 'Blue',
      },
      {
        value: 'indigo',
        label: 'Indigo',
      },
      {
        value: 'purple',
        label: 'Purple',
      },
      {
        value: 'pink',
        label: 'Pink',
      },
    ];
    return {
      selectedColor: colors[0],
      colors_1: colors.slice(0, 5),
      colors_2: colors.slice(5, 10),
      isDark: false,
      attrs: [
        {
          key: 'test',
          highlight: true,
          dates: { start: new Date(2019, 3, 15), end: new Date(2019, 3, 19) },
        },
      ],
    };
  },
  computed: {
    darkClass() {
      const shared =
        'text-sm font-semibold block w-64 rounded py-1 mb-4 focus:outline-none';
      if (this.isDark) {
        return `${shared} bg-gray-800 text-white`;
      }
      return `${shared} hover:bg-gray-200 border border-gray-800 text-gray-900`;
    },
  },
  methods: {
    colorClass(color) {
      const sharedClasses = `inline-block text-sm border border-${
        color.value
      }-500 rounded py-1 mb-2 focus:outline-none w-16`;
      if (color === this.selectedColor) {
        return `${sharedClasses} bg-${
          color.value
        }-500 text-white font-semibold`;
      }
      return `${sharedClasses} text-${color.value}-800 hover:bg-${
        color.value
      }-100 font-medium`;
    },
  },
};
</script>
{'fraction_non_alphanumeric': 0.16760180995475113, 'fraction_numerical': 0.02244343891402715, 'mean_word_length': 1.6903602726387537, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, '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': '5041057', 'n_tokens_mistral': 1882, 'n_tokens_neox': 1802, 'n_words': 376}