@samatech/vue-color-picker

Instructions

Install

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

Usage

<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

# 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