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 !!!
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: '', 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 | ||
| --cp-container-bg | ||
| --cp-select-color | ||
| --cp-range-border | ||
| --cp-range-shadow | ||
| --cp-container-shadow | ||
| --cp-gray-100 | ||
| --cp-gray-200 | ||
| --cp-gray-300 | ||
| --cp-gray-400 | ||
| --cp-gray-500 | ||
| --cp-gray-600 | ||
| --cp-gray-700 | ||
| --cp-gray-800 | ||
| --cp-gray-900 | ||
| --cp-inverse-dark | ||
| --cp-inverse-white |
Roadmap
- Widget type to add