ColorPicker API Reference

Props

Prop	Type	Default	Description
value	String	"#FFFFFF"	The selected color value in hex format
placeholder	String	"Select color"	Placeholder text when no color is selected
disabled	Boolean	false	Whether the color picker is disabled
hideInputs	Boolean	false	Whether to hide the color input fields
hideCanvas	Boolean	false	Whether to hide the color canvas
hideSliders	Boolean	false	Whether to hide the color sliders
showSwatches	Boolean	true	Whether to show color swatches
swatches	Array	[]	Custom color swatches to display
elevation	Number	1	Elevation level for the color picker dropdown (0-24)
scale	Number	1	Scale factor for the color picker dropdown
emitColorOnCloseDropdown	Boolean	false	Whether to emit color only when dropdown closes
bgColor	String	'white'	Background color for the color picker
width	Number/String	200	Width of the color picker dropdown
swatchesMaxHeight	Number/String	100	Maximum height of the swatches section

Events

Event	Payload	Description
onSelectColor	String	Emitted when the selected color changes, with the new color value in hex format

Slots

Slot	Props	Description
formattedColor	-	Custom formatting for the selected color display

Methods

The component doesn't expose any methods via template refs.

Example Usage

<template>
  <OColorPicker
    :value="selectedColor"
    placeholder="Select color"
    :showSwatches="true"
    @onSelectColor="handleColorChange"
  >
    <template #formattedColor>
      <div class="custom-color-display">
        <div class="color-box" :style="{ backgroundColor: selectedColor }"></div>
        <span>{{ selectedColor || 'No color selected' }}</span>
      </div>
    </template>
  </OColorPicker>
</template>

<script setup>
import { ref } from 'vue'
import { OColorPicker } from 'your-component-library'

const selectedColor = ref('#4a90e2')

const handleColorChange = (color) => {
  selectedColor.value = color
}
</script>

<style scoped>
.custom-color-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
</style>

Dependencies

This component requires the v-color-picker component from Vuetify to be available, which should be imported and registered in your application.