<commit_before><template>
	<div class="color-selector">
		<div
			class="color-selector__color"
			v-for="color in values"
			:class="{ '-light': color.title == 'white', '-is-active': isSelected(color.title) }"
			:style="{ backgroundColor: color.value }"
			@click="toggle(color.title)"
		></div>
	</div>
</template>

<script>
export default {
	name: 'color-selector',
	props: {
		values: { type: Array },
		options: {
			type: Object,
			default() {
				return {};
			}
		},
		defaultValue: {
			type: Object,
			default() {
				return {}
			}
		},
		selection: {
			type: [Object, Array]
		}
	},
	data() {
		return {
			selected: []
		}
	},
	watch: {
		/**
		 * Watch the selected property to emit the input event whenever it's
		 * changed
		 */
		selected() {
			this.$emit('input', this.selected);
		}
	},

	mounted() {
		// Set default selection to first color
		if (this.defaultValue.title) {
			this.selected.push(this.defaultValue.title);
		}

		if (this.selection.length) {
			this.selection.forEach((selection) => {
				this.values.forEach((value) => {<commit_msg>Update prop requirements on color-selector<commit_after><template>
	<div class="color-selector">
		<div
			class="color-selector__color"
			v-for="color in values"
			:class="{ '-light': color.title == 'white', '-is-active': isSelected(color.title) }"
			:style="{ backgroundColor: color.value }"
			@click="toggle(color.title)"
		></div>
	</div>
</template>

<script>
export default {
	name: 'color-selector',
	props: {
		values: { type: Array },
		options: {
			type: Object,
			default() {
				return {};
			}
		},
		defaultValue: {
			type: Object,
			default() {
				return {};
			}
		},
		selection: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			selected: []
		}
	},
	watch: {
		/**
		 * Watch the selected property to emit the input event whenever it's
		 * changed
		 */
		selected() {
			this.$emit('input', this.selected);
		}
	},

	mounted() {
		// Set default selection to first color
		if (this.defaultValue.title) {
			this.selected.push(this.defaultValue.title);
		}

		if (this.selection.length) {
			this.selection.forEach((selection) => {
				this.values.forEach((value) => {
{'fraction_non_alphanumeric': 0.17708333333333334, 'fraction_numerical': 0.0, 'mean_word_length': 2.973021582733813, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 21, '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': '3301919', 'n_tokens_mistral': 895, 'n_tokens_neox': 745, 'n_words': 159}