Vue3: Color Picker Component

Summary

The following is a simple color picker component for Vue3.

<template>
  <div class="color-picker">
    <input
      type="color"
      :value="color"
      @input="onColorChange"
      ref="colorPicker"
      class="color-picker-input"
    />
    <button @click="openColorPicker">Choose color</button>
  </div>
</template>

<script>
export default {
  name: "ColorPicker",
  props: {
    modelValue: {
      type: String,
      default: "#000000",
    },
  },
  data() {
    return {
      color: this.modelValue,
    };
  },
  watch: {
    modelValue(newValue) {
      this.color = newValue;
    },
  },
  methods: {
    onColorChange(event) {
      this.color = event.target.value;
      this.$emit("update:modelValue", this.color);
    },
    openColorPicker() {
      this.$refs.colorPicker.click();
    },
  },
};
</script>

<style scoped>
.color-picker {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.color-picker-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

button {
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  padding: 5px 10px;
  position: relative;
  z-index: 1;
}
</style>