UIColorPicker

UIColorPicker

A color picker component with various modes and formats.

<template>
  <UIColorPicker
    v-model:value="color"
    :swatches="presetColors"
    :showAlpha="true"
    format="hex"
    @change="handleColorChange"
  />
</template>

<script setup lang="ts">
const color = ref('#FF0000')
const presetColors = [
  '#FF0000',
  '#00FF00',
  '#0000FF'
]

const handleColorChange = (value: string) => {
  console.log('Selected color:', value)
}
</script>

Props

• value (string): Selected color value
• defaultValue (string): Default color value
• format (‘hex’ | ‘rgb’ | ‘hsl’): Color format
• showAlpha (boolean): Show alpha channel control
• disabled (boolean): Disable color picker
• swatches (string[]): Preset color swatches
• showInput (boolean): Show color input field
• size (‘small’ | ‘medium’ | ‘large’): Component size

Events

• update:value: Emitted when color value changes
• change: Emitted when color selection is confirmed
• open: Emitted when color picker panel opens
• close: Emitted when color picker panel closes