@samatech/vue-color-picker

Vue color picker component

Instructions

Install

npm i -S @samatech/vue-color-picker

Usage

Displays the picker and updates refs on color/gradient selection. See packages/demo for a slightly more advanced example.

<template>
  <ColorPicker
    :color="selectedColor"
    :gradient="selectedGradient"
    :forceNonGradient="false"
    :selectedThemeColors="themeColors"
    @selectColor="selectColor"
    @update="update"
    @applyGradient="applyGradient"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  ColorPicker,
  getRgbaCss,
  IPickerColor,
  IThemedGradient,
  IThemeColor,
  IRgba,
} from '@samatech/vue-color-picker'
import '@samatech/vue-color-picker/dist/style.css'

const selectedColor = ref<string | undefined>()
const selectedGradient = ref()
const themeColors = ref<IThemeColor[]>([])

const update = (color: IPickerColor | IThemedGradient | undefined) => {
  if (color && 'raw' in color) {
    selectedGradient.value = color.raw
    selectedColor.value = undefined
  } else {
    selectedColor.value = getRgbaCss(color?.rgba)
    selectedGradient.value = undefined
  }
}

const addThemeColor = (color: string | undefined) => {
  if (color && !themeColors.value.find((c) => c.key === color)) {
    themeColors.value.push({ key: color, value: color })
  }
}

const selectColor = (color: IPickerColor | undefined) => {
  selectedColor.value = getRgbaCss(color?.rgba)
  selectedGradient.value = undefined
  addThemeColor(selectedColor.value)
}

const applyGradient = (gradient: IThemedGradient | undefined) => {
  selectedGradient.value = gradient?.raw
  selectedColor.value = undefined
}
</script>

Development

We use PNPM workspaces for development

# Clone
git clone git@github.com:samatechtw/vue-color-picker
cd vue-color-picker

# Install dependencies
pnpm install

# Build library
pnpm run build

# Run example site
pnpm run demo

License

MIT License © 2021 - 2025 SamaTech Limited Company