WeColorPicker

A flexible color selector component that provides both a predefined palette of colors and a custom color picker option. It integrates with Vuetify's text field and color picker components for a seamless user experience.

Usage

<template>
  <!-- Basic usage -->
  <WeColorPicker v-model="selectedColor" />
  
  <!-- With custom colors palette -->
  <WeColorPicker 
    v-model="selectedColor" 
    :colors="['#FF5733', '#33FF57', '#3357FF', '#F3FF33', '#FF33F3']" 
  />
  
  <!-- With label and other text field props -->
  <WeColorPicker 
    v-model="selectedColor"
    label="Brand Color"
    placeholder="Choose a color"
    :rules="[validatorRequired]"
  />
</template>

Props

Prop	Type	Default	Description
modelValue	String	undefined	v-model value (color in hex format)
colors	Array<String>	[]	Array of custom colors to display in the palette (defaults to system colors if empty)
maxWidth	String | Number	300	Maximum width of the color picker dropdown

Note: The component also accepts all Vuetify v-text-field props through v-bind="$attrs"

Events

Event	Payload	Description
update:modelValue	String	Emitted when a color is selected or changed

Features

• Predefined Palette: Quick selection from a set of predefined colors
• Custom Color Picker: Advanced color selection with Vuetify's color picker
• Dual Mode: Toggle between palette and custom color picker
• Visual Indicator: Shows the selected color as an icon in the field
• Hex Format: Returns color values in hex format

Examples

Basic Color Selection

<script setup>
import { ref } from 'vue'

const brandColor = ref('#3357FF')
</script>

<template>
  <v-form>
    <v-row>
      <v-col cols="12" md="6">
        <WeColorPicker
          v-model="brandColor"
          label="Brand Color"
        />
      </v-col>
    </v-row>
    
    <div class="mt-4">
      <p>Selected Color: {{ brandColor }}</p>
      <div 
        class="color-preview" 
        :style="`background-color: ${brandColor}; width: 100px; height: 100px`"
      ></div>
    </div>
  </v-form>
</template>

Custom Color Palette

<script setup>
import { ref } from 'vue'

const statusColor = ref(null)
const themeColors = ref([
  '#E53935', // red
  '#43A047', // green
  '#FB8C00', // orange
  '#1E88E5', // blue
  '#8E24AA', // purple
])
</script>

<template>
  <WeColorPicker
    v-model="statusColor"
    :colors="themeColors"
    label="Status Color"
    hint="Select a color for this status"
  />
</template>

With Form Validation

<script setup>
import { ref } from 'vue'
import { useValidators } from '#imports'

const { validatorRequired } = useValidators()
const themeColor = ref(null)

const rules = [
  validatorRequired,
  value => {
    // Only allow dark colors
    if (!value) return true
    const hex = value.replace('#', '')
    const r = parseInt(hex.substr(0, 2), 16)
    const g = parseInt(hex.substr(2, 2), 16)
    const b = parseInt(hex.substr(4, 2), 16)
    const brightness = (r * 299 + g * 587 + b * 114) / 1000
    return brightness < 128 || 'Please select a darker color'
  }
]
</script>

<template>
  <WeColorPicker
    v-model="themeColor"
    label="Theme Color"
    :rules="rules"
    required
  />
</template>

Source Code