Turn Palette Color Picker

Palette.vue

<template>
  <ul>
    <li v-for="color in colors" :style="{ background: `rgb(${color[0]},${color[1]},${color[2]})`}" @click="selectColor(color)"></li>
  </ul>
</template>

<script>
export default{
  props: ['colors'],
  methods: {
    selectColor(color) {
      this.$nuxt.$emit('COLOR_SELECTED', color)
    }
  }
}
</script>

<style scope>
ul{
  display: flex;
  height: 1em;
  margin-bottom: 0.5em;
  width: 100%;
}

ul li{
  cursor: pointer;
  flex: 1;
}

ul li:first-child{
  border-radius: 0.25em 0 0 0.25em;
}

ul li:last-child{
  border-radius: 0 0.25em 0.25em 0;
}
</style>