web-padawan / vanilla-colorful Goto Github PK

hey there 👋

that looks very nice 👍

any chance we can get an import that does not register the custom element? e.g. if you wanna use it with a scoped registry... or you need to allow 2 versions of the component to be loaded.

strawman proposal

import { ColorPickerHex } from 'vanilla-colorful/ColorPickerHex.js';

PS: could be archived by providing an export map 👍

Windows 11.
Chrome: Version 119.0.6045.160 (Official Build) (64-bit)
Breaks on devices that support both touch and mouse.

1. If I start by using the mouse I can later switch to touch. - Expected.
2. If I start by using touch I cannot switch to mouse. - Not as expected.
3. If I start by using the mouse and then switch to touch I cannot switch back to mouse. - Not as expected.

Mouse and touch should work interchangeably in all of the above scenarios.

I couldn’t find any trace of SCSS syntax in src/lib/styles, so I wonder if using plain CSS files would be better. Less complicated, more future-proof.

I know that the whole project is 100% pure TypeScript, but at least there is a reason for that 😀 The only use for Sass I could find is to combine and compress files during the build process. I would suggest using CSSO for that. It would also save you 28 bytes! (1871 vs 1843) Not too much, but every JS byte counts, right?

Sorry for just an issue, not PR. But I hope you’d like the idea.

I tryed add element from CDN <script type="module" src="https://unpkg.com/vanilla-colorful?module"></script>
and get problem on FF browser http://prntscr.com/uma6a1 // and unfortunately, I still could not get to display the value of the current color of picker

We could enhance components by using template literal types instead of string, for example:

type AnySpace = '' | ' ';

export type RgbString = `rgb(${number},${AnySpace}${number},${AnySpace}${number})`;

Windows machine with pixel ratio 1:1

Hi, I am using vanilla-colorful web component in one of my projects. I would like to change the direction of hue pointer drag position from top to bottom ( currently I can able to drag left to right)

Hi,

Loading the vanilla-colorful module works well on a static HTML page : the color picker shows and the "color-changed" event is fired properly.

However, if I dynamically add a element to the DOM using jQuery, the color picker does appear in the page, but no "color-changed" event is fired.

You can see the difference in the inspector between the 8th line from the top (static, in the DOM before importing the module) and the 4th line from the bottom (dynamically added element).

Is there any way to "reload" the module dynamically, or to force adding the custom element ?

I import the module through UnPKG.

Thank you!

Hi there! I currently writing a simple reusable blade component in my project and I'm having a difficult time trying to have multiple colorful instances work. What would be your strategy on this?

Example of what component: https://gist.github.com/robertdrakedennis/35461b629722c2adbbe0c1938c4178d8

Vue example is broken:

Update the index.vue to make it work:
<hex-color-picker :color="color.value" @color-changed="this.handleColorChanged"></hex-color-picker>
to
<hex-color-picker :color="color.value" @color-changed="handleColorChanged"></hex-color-picker>

Hey, thank you so much for this package, I loved it a lot.

I have a problem where I've been using this package (due to how small and beautiful it is) on my Svelte app, it had no problems until I ported it over to tauri. Tauri uses webview, and on Windows machine, Tauri uses webview from legacy Edge.

I read your README, and found out that your package does not support legacy Edge. So I thought about polyfills, and try to get vanilla-colorful working without needing me to use other packages as alternatives (because frankly, they don't look as good and my styling skills are questionable).

I've found webcomponent's polyfills and used their shadydom and shadycss modules. But I am not sure how I can apply their ShadyCSS interface with vanilla-colorful, since I don't know where to apply their prepareTemplate function with vanilla-colorful, may I please have some guidance regarding this?

I'm not sure if this is the place to ask questions, but I'm going to give it a shot anyway since I don't really know where else to ask, if this is the wrong place to ask, please do direct me to the correct direction. Thank you so much for your time and effort!

By having a starting color of #000 or #FFF, if you pick the hue of the new color before the saturation/brightness, the hue is reset when the new saturation/brightness is selected (ie : the correct saturation/brightness will be selected, but for the color red).

I do understand why it may do it, but is there a fix possible, rather than having to start with #010101/#FEFEFE ?

https://youtu.be/fePgS06AVwU

It seems there is no public method to update a picker color without triggering a color-changed event.

Looking at the implementation, there is a private update method:
https://github.com/web-padawan/vanilla-colorful/blob/master/src/lib/components/color-picker.ts#L103

For people implementing their own input-color element, such a method would be really convenient, or simply an optional argument to the existing color setter to specify whether an event must be dispatched.

If you backspace the hex-input value and then move focus from the input, it resets back to the last known valid value. It'd be great to be able to leave the field blank though, because in my case the field is optional.

Congratulations, the colorpicker looks great. We could use it in our project but we need an opacity slider as well. Can you add it?

Hello,

This html <hex-input><input class="form-control form-unit__input mb-1" part="input" spellcheck="false"></hex-input>

Produces this:

DOM nodes:

Can you add example to FAQ how to return of chosen value of component ? For example to console.log

Current Behavior

When trying to run Jest in a repo that is importing vanilla-colorful, I get the following error message: "Cannot use import statement outside a module"

Steps to Reproduce

1. Import vanilla-colorful into project
2. Try to run Jest

Context (Environment)

• vanilla-colorful 0.7.2
• jest 27.5.1
• vue 2.6.14

Detailed Description

Currently I am importing vanilla-colorful in to a Vue project. When I try to run Jest I get the following error message:

I have tried what Jest suggests; adding experimental decorators and get the following message:

I have also tried tried adding vanilla-colorful as a custom transformIgnorePattern.

Any insight on this would be appreciated, thanks.

Hi guys. Thanks for the great package.

When using JS components in Laravel Livewire, every event triggers a server request. So using color-changed can be quite brutal on the server because a request is fired for every pixel moved when users are dragging the selector.

Would it be possible to add an additional event which fires only when dragging is complete? That would allow us to send a single request after a user has stopped moving the selector.

See the discussion at omgovich/react-colorful#57

Currently the aria-label attributes are using hardcoded values. We should make this configurable.

Thanks for your great work on this library!

Is it possible to have a HEX picker including the alpha channel, resulting in 4-byte outputs like #aabbccff? I don't see it as an option in the "Available pickers" table.