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!

#### Features with Version 2.0

* Ability to change mode instantly
* Change the value in the colour list
* Delete a value in the colour list
* New style variables
* New ui design

Don't forget to star for motivation :)

Try it now Live Demo

Download 1.1.9 to continue with the old version !!!



!gradient
!solid

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

`javascript



`

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: '', solid: '', gradient: '', linear: '', radial: '', colorPalette: '', btnSaveLabel:'Save', btnCancelLabel:'Cancel' } |
| 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 |
| showPickerMode | boolean | default true |
| iconClasses | object | default { ruler: '', eyeDroper: '', arrowDown: '', save: '', delete: '' } |
| gradientMode | linear or radial | default linear Sets the initial gradient mode when the picker is started |
| showButtons | boolean | default true |

Emits

| Parameter | Type | Description |
| :-------- | :------- | :------------------------- |
| update:model-value | event | return 'color value'|
| onSave | event | return 'color value'|
| onCancel | event | return 'color value'`|

CSS Colour Variables

| Variables Name | Hex | Dark Hex
| :----------------- | :--------------------------- | :-------------------------------------- |
| --cp-primary| !#5983fc #5983fc |!#5983fc #5983fc |
| --cp-container-bg | !#FFF #FFF |!#212529 #212529 |
| --cp-select-color| !#2c5ae6af #2c5ae6af |!#2c5ae6af #2c5ae6af |
| --cp-range-border| !#f7f7f7 #f7f7f7 |!#f7f7f7 #f7f7f7 |
| --cp-range-shadow| !#4c86f3 #4c86f3 |!#4c86f3 #4c86f3 |
| --cp-container-shadow| !#58585881 #58585881 |!#2b262696 #2b262696 |
| --cp-gray-100 | !#f9f9f9 #f9f9f9 |!#1b1c22 #1b1c22 |
| --cp-gray-200 | !#f1f1f4 #f1f1f4 |!#26272f #26272f |
| --cp-gray-300 | !#dbdfe9 #dbdfe9 |!#363843 #363843 |
| --cp-gray-400 | !#c4cada #c4cada |!#464852 #464852 |
| --cp-gray-500 | !#99a1b7 #99a1b7 |!#636674 #636674 |
| --cp-gray-600 | !#78829d #78829d |!#808290 #808290 |
| --cp-gray-700 | !#4b5675 #4b5675 |!#9a9cae #9a9cae |
| --cp-gray-800 | !#252f4a #252f4a |!#b5b7c8 #b5b7c8 |
| --cp-gray-900 | !#071437 #071437 |!#f5f5f5 #f5f5f5 |
| --cp-inverse-dark | !#57575723 #57575723 |!#6b6b6b56 #6b6b6b56 |
| --cp-inverse-white | !#9292920d #9292920d |!#92929256 #92929256 |

Roadmap

- Widget type to add