-
🔭 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]
Have a nice day 👋
License: The Unlicense
🔭 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]
Have a nice day 👋
When adjusting the alpha input value, the alpha slider doesn't respond correctly.
Error reported when using a browser that does not support EyeDropper:
Uncaught ReferenceError: EyeDropper is not defined
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"
}
},
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.
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
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
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>
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.
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. 🚀
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.