ColorPicker

Popover color picker. Click the trigger button to open a full-featured color panel, with adaptive positioning powered by Floating UI.

Basic Usage

<TColorPicker v-model="color" />

Hide Value

<TColorPicker v-model="color" :show-value="false" />

With Label

<TColorPicker v-model="color" label="Theme color" />

Output Format

<TColorPicker v-model="color" color-format="rgb" />

Alpha Support

<TColorPicker v-model="color" show-alpha />

Predefined Colors

<TColorPicker v-model="color" :predefine="['#f00', '#ff0', '#0f0']" />

Sizes

<TColorPicker v-model="color" size="sm" />
<TColorPicker v-model="color" size="md" />
<TColorPicker v-model="color" size="lg" />

Disabled

<TColorPicker v-model="color" disabled />

API

Props

Prop	Type	Default	Description
v-model	string	'#066fd1'	Color value
color-format	'hex' | '#hex' | 'rgb' | 'hsv' | 'hsl'	'#hex'	Output format
show-alpha	boolean	false	Show alpha slider
show-value	boolean	true	Show color value text
predefine	string[]	—	Predefined color swatches
disabled	boolean	false	Disabled state
label	string	—	Label text
size	'sm' | 'md'	'md'	Trigger button size

Emits

Event	Description	Callback
update:modelValue	v-model update	(value: string)
change	Color changed	(value: string)