<template>
  <select v-model="value" :style="{backgroundColor: value}">
    <option
      v-for="colorLabel in colorLabels" :value="colorLabel.color"
      :style="{backgroundColor: colorLabel.color}"
    >{{ colorLabel.label }}</option>
  </select>
</template>

<script>
import { defineComponent, computed } from 'vue';
import { keys as injectionKeys, inject } from '../injection';


export default defineComponent({
  naem: 'InputEventColor',
  props: {
    modelValue: { type: String, required: true },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const colorLabels = inject(injectionKeys.colorLabelStore).colorLabels;
    const value = computed({
      get() { return props.modelValue; },
      set(val) { emit('update:modelValue', val); }
    });
    return { colorLabels, value };
  },
});
</script>
