color-picker-fork

Vue 3 Color Picker

A colour selective component for Vue 3. Fast and with small package size. Gradient and Solid in one! No dependency! Fully customisable!

Live Demo

Install

NPM Install

 npm i @cyhnkckali/vue3-color-picker

Yarn Install

  yarn add @cyhnkckali/vue3-color-picker

Import

Import where you want to use it

import {Vue3ColorPicker} from '@cyhnkckali/vue3-color-picker';

Import the style file into your main.js file

import '@cyhnkckali/vue3-color-picker/dist/style.css'

Use/Examples

<script setup>
import {Vue3ColorPicker} from '@cyhnkckali/vue3-color-picker';
</script>

<template>   

    <Vue3ColorPicker v-model="value" mode="solid" :showColorList="false" :showEyeDrop="false" type="RGBA"/>

    <Vue3ColorPicker v-model="value" mode="gradient" :showColorList="false" :showEyeDrop="false"/>

</template>

Options

Parameter	Type	Description
v-model	string	default ''
mode	string	solid or gradient default gradient
theme	string	light or dark default light
type	string	Return colour value type HEX8 RGBA RGB HEX default HEX8
inputType	string	Input type of colour values RGB HSL HSV CMYK default RGB
disabled	boolean	default false
local	object	default { angle: '', positionX: '', positionY: '' }
colorListCount	number	Determines how many colours to keep in the colour list default 18
showColorList	boolean	default true
showEyeDrop	boolean	default true Supports Chrome and Edge only
showAlpha	boolean	default true
showInputMenu	boolean	default true
showInputSet	boolean	default true
iconClasses	object	default { linear: '', radial: '', ruler: '', eyeDroper: '', inputMenu: '', save: '', delete: '' }

CSS Colour Variables

Variables Name	Hex	Dark Hex
--cp-container-bg	#FFF	#212529
--cp-ps-color	#707070
--cp-act-color	#5983fc
--cp-range-border	#f7f7f7
--cp-input-menu-bg	#F5F5F5	#242629
--cp-border-color	#e5e5e5	#43474b
--cp-range-shadow	#4c86f3
--cp-label-color	#787878
--cp-container-shadow	#58585881	#2b262696
--cp-font-color	#141414	#e7e7e7
--cp-button-color	#F5F5F5	#1a1d20

Roadmap

• Widget type to add