Vue color picker code written by chatGPT

ColorPicker.vue

// Define the component
Vue.component('gradient-picker', {
  // The component's options go here
  data() {
    return {
      angle: 0, // The angle of the gradient
      colors: [ // An array of objects representing the gradient's colors
        {
          color: '#000000', // The color's hex code
          start: 0, // The color's start position in the gradient (as a percentage)
          end: 100 // The color's end position in the gradient (as a percentage)
        }
      ]
    }
  },
  template: `
    <div>
      <label>Angle:</label>
      <input type="number" v-model="angle" />

      <ul>
        <li v-for="(color, index) in colors" :key="index"
            @dragstart="dragStart(index)"
            @dragover="dragOver"
            @drop="drop(index)"
            draggable="true">
          <label>Color {{ index + 1 }}:</label>
          <input type="color" v-model="color.color" />
          <label>Start:</label>
          <input type="range" min="0" max="100" v-model="color.start" />
          <label>End:</label>
          <input type="range" min="0" max="100" v-model="color.end" />
          <button @click="removeColor(index)">Remove</button>
        </li>
      </ul>

      <button @click="addColor">Add Color</button>
    </div>
  `,
  methods: {
    addColor() {
      // Add a new color to the gradient
      this.colors.push({
        color: '#000000',
        start: 0,
        end: 100
      });
    },
    removeColor(index) {
      // Remove the color at the specified index from the gradient
      this.colors.splice(index, 1);
    },
    dragStart(index) {
      // Store the dragged color's index in the data object
      this.draggedColorIndex = index;
    },
    dragOver(index) {
      // Prevent default behavior (to allow dropping)
      event.preventDefault();
    },
    drop(index) {
      // Insert the dragged color at the new index
      this.colors.splice(index, 0, this.colors.splice(this.draggedColorIndex, 1)[0]);
    }
  }
});

// Create a new Vue instance, and mount it to the page
new Vue({
  el: '#app'
});