A color picker component for Vue.js 3.
Home Page: https://vue-accessible-color-picker.netlify.app
License: MIT License
Hey! I’m Philipp and I’m a front-end developer and open source contributor who’s currently living in the Netherlands.
<template>
<div>
<div>
<button v-on:click="setColor">Set Color</button>
</div>
<VueColorPicker :color="selectedColor" default-format="hex" v-on:color-change="updateColor"/>
</div>
</template>
<script>
import { ColorPicker } from 'vue-accessible-color-picker';
import 'vue-accessible-color-picker/styles';
export default {
components: {
'VueColorPicker': ColorPicker,
},
data() {
return {
selectedColor: '#000000',
};
},
methods: {
updateColor(eventData) {
console.log(eventData);
},
setColor(){
this.selectedColor = '#f50c0cff';
},
},
};
</script>
When the "Set Color" button is pressed, the event "color-change" is triggered only the first time
When you press the "Set Color" button, the color should change and the event "color-change" should fire. The problem is that the event "color-change" fires only the first time the button is clicked; if you manually change, for example, transparency or color, and then click the button again, the event does not work.
The vue-jest package requires the package typescript to be installed as a dependency even though the project doesn’t use TypeScript.
Once a new version of vue-jest with the fix has been released, update this package and remove the typescript development dependency.
Please indicate whether you want the color picker to support Lab/LCH color formats by leaving a 👍🏻 or 👎🏻 reaction below.
The CSS Color Module Level 4 specification defines Device-independent Colors: Lab and LCH. The specification also provides Sample code for color conversions. At a first glance, these conversions seem to be more complex than the ones between the currently supported formats (i.e. HSL, HSV, HWB, and RGB) of the color picker. For this reason and because they’re currently not implemented in any browsers (as far as I can tell from MDN <color>: Browser compatibility), I don’t want to add those format for now.
Looks way cleaner and easier to use than vue-color but cannot use as there are no types - it is this already in progress?
In current stage, it seems that we can not disable the alpha chanel from input or output
Sometimes we want colours without alpha chanel, we can ignore from result, but we can not hide or disable it to the user
Please indicate whether you want the color picker to be distributed as a set of untranspiled ES modules by leaving a 👍🏻 or 👎🏻 reaction below.
To give package users more flexibility, provide a set of untranspiled ES module bundles next to the already-existing transpiled bundles.
The JavaScript package ecosystem will most likely move towards having package authors distribute untranspiled ES modules instead of transpiled UMD/AMD/CJS modules because that allows the consumer of the package to transpile according to their own needs rather than have the package author determine the browser support matrix.
For a package that contains a Vue.js component like this, there is only a limited need to take browser support into account. For example, this package uses CSS custom properties which cannot be polyfilled but which can be used in a way to not needlessly prevent them from being used in browsers not supporting them. Illustrative example:
p {
color: #222;
color: var(--text-color, #222);
}In essence, if a package is distributed as an ES module without being transpiled, package consumers are free to transpile the package using their browser support matrix.
main branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here are some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.
If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.
Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.
Good luck with your project ✨
Your semantic-release bot 📦🚀
I’d like to have a test coverage badge in the readme to give package users a sense of the state this project is in. Users should be able to see the percentage of code that is covered by tests.
I would also like to have a mechanism on pull requests that allows repository maintainers to see the test coverage of the pull request’s branch.
I had a short look at a few code coverage services (Codecov, Coveralls, and Codacy). They are definitely able to provide these features. However, they only provide single sign-on mechanisms for creating an account and require me to hand over a substantial amount of access to my GitHub account right at the time of creating an account. I really dislike that, in particular it’s not clear whether this degree of access is actually warranted for my specific use case.
Gradient on vacp-color-space doesn't appear if initialization color is #ffffff. Demo is here.
Hi,
I've disabled the alpha channel, but the alpha channel is still visible inside the hex color.
I'm aware of the previous bugfix #17
The code:
<ColorPicker
:visible-formats="['hex', 'hsl', 'rgb']"
color="#23a96a"
alpha-channel="hide"
default-format="hex"
></ColorPicker>
On load the color will be cut off
#23a96a will show as #23a9
After moving the picker
#23a9 will show as #25a468ff, with the alpha channel init.
(The color is an example, depends what color you pick ofcourse)
Side note:
Here you see the colorChange function for example:
const colorChange = (eventData) => {
console.log(eventData.cssColor);
console.log(eventData.colors.hex);
}
On load this function fires and logs the following:
#23a6
#23a69a
So on load the color.hex is correct.
After picking a color it logs:
#658784
#658784ff
now the css color is correct, but the colors.hex ain't.
The color should not be cut off, nor display the alpha channel.
I'm using the newest version 4.0.2,
I might think it's a bug, or what am I doing wrong?
Thank you in advance :)
TS1046: Top-level declarations in .d.ts files must start with either a 'declare' or 'export' modifier.
I've copied and pasted basic usage from the docs, but I'm not able to get the plugin to run with basic install and import. I've reproduced my issue in the codesandbox below? Is there something wrong with how I'm importing it?
<template>
<div id="app">
<ColorPicker />
</div>
</template>
<script>
import { ColorPicker } from "vue-accessible-color-picker";
export default {
name: "App",
components: {
ColorPicker,
},
};
</script>
https://codesandbox.io/s/vue-accessible-color-picker-0dr3tv?file=/src/App.vue
(0 , $csb__vue.createTextVNode) is not a function
Basic install works
The vue-accessible-color-picker package should use Vue.js 3. Since this change is not backwards-compatible, a new major version should be released when making the changes for the migration.
The vue-jest package requires the package typescript to be installed as a dependency even though the project doesn’t use TypeScript.
The vue-test-utils package is unable to find a wrapper object via wrapper.findComponent({ ref: 'colorSpace' }).
When using Wrapper.findComponent like this, the test errors unexpectedly with:
TypeError: Cannot read property 'subTree' of undefined
Upstream bug report: not filed.
Workaround: Use wrapper.find('.vacp-color-space') where vacp-color-space is a class name used on the element that is using ref="colorSpace".
Solution: This is not supposed to work according to vue-test-utils API reference: findComponent:
ref -
findComponent({ ref: 'dropdown' })- Can be used only on direct ref children of mounted component
The rollup-plugin-vue package is unable to compile the distribution bundles in the same way it does for the current version of the vue-accessible-color-picker package (see vuejs/rollup-plugin-vue#364 (comment) for more details).
.css/.scss/.sass (with Vue.js 3 beta) Testing the vue-accessible-color-picker package via npm link doesn’t work because of a difference in behavior compared with an actual npm installed dependency: Since the vue-accessible-color-picker package lists vue as a development dependency, it will be installed in its project directory and thus it’ll be part of the packages in that directory’s node_modules directory. A project consuming the npm linked dependency via npm link vue-accessible-color-picker will behave different than it would have with an npm installed dependency because code (e.g. vue) may resolve packages from the dependency rather than from itself. In essence, using npm install, a dependency’s development dependencies are not installed, but with npm link, they’re effectively installed.
Now, when testing the package using npm link in the package and npm link vue-accessible-color-picker in a consuming project (e.g. vue-accessible-color-picker-website), two different instances of the Vue.js packages are being used. This causes unexpected rendering errors due to the use of Symbols in Vue.js. The package vue should be declared as a peer dependency (i.e. as [email protected]) instead of a development dependency because no development processes in the package itself actually require Vue to be installed at all. Unfortunately, vue-test-utils start to fail when removing the vue package.
Workaround: Not available.
There is one cumbersome way to get this working temporarily for plugins which have no production dependencies whatsoever by npm-linking the plugin and then removing its node_modules directory. This will require you to re-install you plugin package’s dependencies again each time.
# Link package
cd vue-accessible-color-picker
npm run build
npm link
rm -rf node_modules
# Reference linked package
cd ../../sites/vue-accessible-color-picker-website
npm install
npm link vue-accessible-color-picker
npm startversion 4.0.6
<ColorPicker :visible-formats="['hex']" />
First of all, thanks for building this great library! It's working very well for us, but there's one small detail I think would make it perfect :)
When clicking on the color space to select a color, nothing happens until the mouse is moved. As in, you need to click-and-drag to move the color-space-thumb, not just click.
This is fine once you know the trick, but at first it feels like the colorpicker doesn't work correctly; It feels like only some clicks are registering.
I've tried using a mouse and a trackpad, both have the same issue.
In contrast, the native chrome color picker (as can be demoed here) moves the selector on click immediately.
The issue is live here: https://vue-accessible-color-picker.netlify.app/
Here's a screen recording. The circle shows up around my cursor when I click.
https://user-images.githubusercontent.com/1063061/140169496-188317b2-62f0-482a-bb6e-927870d57673.mov
Hi. How I can implement color viewer like 'Copy color' button ? I need to preview color in separate div elemement
Thanks
Hex input field have alpha channel even if alpha channel option is set to 'hide'.
Hex code with alpha channel.
Hex code without alpha channel.
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.