UIAdvancedColorPicker

UIAdvancedColorPicker

An advanced color picker component that supports multiple color modes, brand colors, and custom color management.

<template>
  <UIAdvancedColorPicker
    v-model:value="selectedColor"
    :modes="['HEXA', 'RGBA', 'HSLA']"
    :disableAlpha="false"
    :showBrandColors="true"
    :brandColors="brandColorSwatches"
    @update:value="handleColorChange"
    @modeChange="handleModeChange"
  />
</template>

<script setup lang="ts">
interface SwatchDetail {
  id: string
  name: string
  value: string
  description?: string
}

const selectedColor = ref('#FF5733')
const brandColorSwatches = ref<SwatchDetail[]>([
  { id: '1', name: 'Primary', value: '#1a73e8', description: 'Brand primary' },
  { id: '2', name: 'Secondary', value: '#7b1fa2', description: 'Brand secondary' },
  { id: '3', name: 'Accent', value: '#ff4081', description: 'Brand accent' }
])

const handleColorChange = (color: string) => {
  console.log('Color changed:', color)
}

const handleModeChange = (mode: string) => {
  console.log('Mode changed:', mode)
}
</script>

Props

• value (string): Selected color value
• defaultValue (string): Default color value
• modes (Array): Available color modes (HEXA, HEX, RGBA, HSLA, CUSTOM)
• disableAlpha (boolean): Disable alpha channel
• disableHue (boolean): Disable hue selection
• disableDropper (boolean): Disable color dropper
• showBrandColors (boolean): Show brand colors section
• brandColors (Array): Brand color swatches
• sectionOptions (Array): Color section options
• selectedSection (string): Currently selected section

Events

• update:value: Emitted when color value changes
• onAdd: Emitted when color is added
• onUpdate: Emitted when color is updated
• onDelete: Emitted when color is deleted
• modeChange: Emitted when color mode changes
• customValue: Emitted when custom value is entered

Usage Examples

1. Basic Usage:

<template>
  <UIAdvancedColorPicker
    v-model:value="color"
    :modes="['HEXA']"
  />
</template>

2. With Brand Colors:

<template>
  <UIAdvancedColorPicker
    v-model:value="color"
    :showBrandColors="true"
    :brandColors="brandColors"
  >
    <template #brand-color-header>
      <div class="text-sm font-medium">Brand Colors</div>
    </template>
  </UIAdvancedColorPicker>
</template>

<script setup>
const brandColors = [
  { id: 'primary', name: 'Primary', value: '#1a73e8' },
  { id: 'secondary', name: 'Secondary', value: '#7b1fa2' }
]
</script>

3. Custom Color Sections:

<template>
  <UIAdvancedColorPicker
    v-model:value="color"
    :sectionOptions="sections"
    selectedSection="gradients"
  />
</template>

<script setup>
const sections = [
  {
    id: 'solid',
    name: 'Solid Colors',
    colors: ['#ff0000', '#00ff00', '#0000ff']
  },
  {
    id: 'gradients',
    name: 'Gradients',
    colors: ['linear-gradient(to right, #ff0000, #00ff00)']
  }
]
</script>

4. With Alpha and Custom Input:

<template>
  <UIAdvancedColorPicker
    v-model:value="color"
    :disableAlpha="false"
    @customValue="handleCustomValue"
  />
</template>

<script setup>
const handleCustomValue = (value: string) => {
  // Validate and handle custom color input
  if (isValidColor(value)) {
    color.value = value
  }
}
</script>

Best Practices

1. Color Management:

   • Use consistent color formats
   • Provide color validation
   • Include preset color palettes
   • Support color history

2. User Experience:

   • Show color preview
   • Enable quick color selection
   • Provide color format switching
   • Include color suggestions

3. Accessibility:

   • Support keyboard navigation
   • Include color contrast info
   • Provide clear labels
   • Show color values

4. Performance:

   • Optimize color calculations
   • Cache color conversions
   • Debounce color updates
   • Lazy load color sections

5. Integration:

   • Support design system
   • Enable theme switching
   • Allow custom color formats
   • Provide color utilities