<template>
  <div class="color-picker">
    <div
      v-for="color in colorList"
      :key="color"
      class="color"
      :class="{ active: modelValue === color }"
      :style="{ background: color }"
      @click="picker(color)"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref } from "vue";
defineProps({
  modelValue: String
});
const emit = defineEmits(["update:modelValue"]);
const colorList = ref(["#FF2600", "#FF9E40", "#67C23A", "#409EFF", "#6640FF", "#F56CD8"]);
function picker(color: string) {
  emit("update:modelValue", color);
}
</script>

<style lang="scss" scoped>
.color-picker {
  display: flex;
  align-items: center;
  .color {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 1px;
    &.active {
      width: 30px;
      height: 30px;
      border: 1px solid #ffffff;
      box-shadow: 0 3px 7px 0 rgb(0 0 0 / 31%);
    }
  }
}
</style>
