Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@cyhnkckali/vue3-color-picker

Package Overview
Dependencies
Maintainers
0
Versions
37
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cyhnkckali/vue3-color-picker

A color picker component library

  • 2.0.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.8K
increased by17.95%
Maintainers
0
Weekly downloads
 
Created
Source

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

<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

ParameterTypeDescription
v-modelstringdefault ''
modestringsolid or gradient default gradient
themestringlight or dark default light
typestringReturn colour value type HEX8 RGBA RGB HEX default HEX8
inputTypestringInput type of colour values RGB HSL HSV CMYK default RGB
disabledbooleandefault false
localobjectdefault { angle: '', positionX: '', positionY: '', solid: '', gradient: '', linear: '', radial: '', colorPalette: '', btnSaveLabel:'Save', btnCancelLabel:'Cancel' }
colorListCountnumberDetermines how many colours to keep in the colour list default 18
showColorListbooleandefault true
showEyeDropbooleandefault true Supports Chrome and Edge only
showAlphabooleandefault true
showInputMenubooleandefault true
showInputSetbooleandefault true
showPickerModebooleandefault true
iconClassesobjectdefault { ruler: '', eyeDroper: '', arrowDown: '', save: '', delete: '' }
gradientModelinear or radialdefault linear Sets the initial gradient mode when the picker is started
showButtonsbooleandefault true

CSS Colour Variables

Variables NameHexDark 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

Keywords

FAQs

Package last updated on 21 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc