Color Picker Component

The OColorPicker component provides a user-friendly interface for selecting color values.

Usage Examples

Basic Usage

<template>
  <OColorPicker
    :value="selectedColor"
    placeholder="Select color"
    @onSelectColor="handleColorChange"
  />
</template>

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

const selectedColor = ref('#4a90e2')

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

With Custom Formatting

<template>
  <OColorPicker
    :value="selectedColor"
    placeholder="Select color"
    @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'

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>

Simplified Interface

<template>
  <OColorPicker
    :value="selectedColor"
    placeholder="Simple color picker"
    :hideInputs="true"
    :hideSliders="false"
    :hideCanvas="false"
    :showSwatches="true"
    @onSelectColor="handleColorChange"
  />
</template>

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

const selectedColor = ref('#4a90e2')

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

Custom Width and Swatches

<template>
  <OColorPicker
    :value="selectedColor"
    placeholder="Custom width and swatches"
    :width="300"
    :swatchesMaxHeight="150"
    :showSwatches="true"
    @onSelectColor="handleColorChange"
  />
</template>

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

const selectedColor = ref('#4a90e2')

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

Props Reference

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
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