cyhnkckali/vue3-color-picker

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

vue3-color-picker's Issues

colorValue not updating without re-render of component.

The value passed into v-model doesn't update the color picker value unless the component is re-rendered.

As a workaround, I can force a re-render of the component, but this doesn't feel right.
This looks like:

<Vue3ColorPicker :key="componentKey"
      v-model="colorValue"
      mode="solid"
      :show-color-List="false"
      :show-eye-drop="false"
      type="RGB"
      show-color-list="true"
      color-list-count="10"
    />

<script setup lang="ts">
import { Vue3ColorPicker } from '@cyhnkckali/vue3-color-picker'

const conponentKey = ref(0)
const colorValue = ref('rgba(255, 255, 255, 1)') 

watch(
  computedButtonId,
  (newButtonId, oldButtonId) => {
    if (newButtonId !== oldButtonId) {
      colorValue.value = ledControlState.value[newButtonId] || 'rgba(255, 255, 255, 1)';
      // Increment componentKey to force re-render
      componentKey.value += 1;
    }
  } 
);
</script>

Add ability to change hex input behaviour

Current behaviour:
When user tries to add hex by input after user add 3rd char picker applies it as a short hex (for example 123 => 112233). Another case is when user uses backspace to delete chars in hex user is not able to delete value since every time 3 chars left picker applies it as a short hex

Expected behaviour
As it works, for example, in figma, hex is applied only on enter/return or on blur.

Solution

• Change default behaviour to apply changed on enter/blur
• [not sure about that] add a prop to switch to current behavior (apply-hex-on-change).

typescript support, need to define type export in package.json exports

Could not find a declaration file for module @cyhnkckali/vue3-color-picker.

package.json

  "exports": {
    ".": {
      "import": "./dist/vue3-color-picker.js",
      "require": "./dist/vue3-color-picker.umd.cjs",
      "types": "./dist/index.d.ts" // add this line
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },
  

Handle invalid hex string

Current behavior:
If user, for example, inputs #RRR he get's #RRRRRR.

Expected behavior:
If hex input value is not valid hex string set previous value.

Change number input behaviour

Current behaviour:
When user clears the field we have a warning

and after user unfocus this field is stay empty.
Also when user tries to type 101 in field that max value is 100 he won't be able to do that, so 10 will be the value in that case.

Expected behaviour:
As an example Figma behaviour.
Save value only on Enter keydown or unfocus as it already works in hex input.
Empty field save as previous value.
If value > max save as max.

Benefits:
Prevent warnings.
Make behaviour more clear.
Less fn calls = faster work. 🚀

Add type to buttons

When colorpicker is in the form picker menu buttons are set as "submit" type as default and trigger submit event when u click on it.

Solution
Set type "button" for buttons in picker menu.

ColorPicker breaks when multiple instances on the page.

Steps to reproduce:
Add meltiple color pickers on one page.
Explore that gradient bar is broken for some of them.

Possible solution:
replace document.querySelector since it breaks functionality and add template ref.

Alpha slider behavior not correctly

When adjusting the alpha input value, the alpha slider doesn't respond correctly.

EyeDropper is not defined

Error reported when using a browser that does not support EyeDropper：
Uncaught ReferenceError: EyeDropper is not defined

"Color Picker Functionality Error After Upgrading to Version 1.1.6

After upgrading to version 1.1.6, I encountered an issue where the color picker functionality doesn't work. However, reverting back to version 1.1.5 resolves the problem and the color picker functions normally.

You can observe the issue in this demo: link