Code Monkey home page Code Monkey logo

vue3-color-picker's Introduction

Hi 👋, I'm Ceyhun Küçükali

A passionate frontend developer from Türkiye

cyhnkckali

cyhnkckali

https://twitter.com/cyhnkali

  • 🔭 I’m currently working on React Native and Vue 3

  • 💬 Ask me about React Native, Vue 3 and JavaScript

  • 📫 How to reach me [email protected]

Connect with me:

https://twitter.com/cyhnkali

Languages and Tools:

bootstrap git html5 javascript quasar reactnative vuejs

Support:

cyhnkckali


Have a nice day 👋

cyhnkckali

 cyhnkckali

cyhnkckali

vue3-color-picker's People

Contributors

cyhnkckali avatar kaskenov avatar stringke avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

vue3-color-picker's Issues

EyeDropper is not defined

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

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"
    }
  },
  

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.

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).

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>

Change number input behaviour

Current behaviour:
When user clears the field we have a warning
Screenshot 2024-04-04 at 22 01 02
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. 🚀

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.