fix: maps mouse events to document for improved UX

[mariojankovic]

Problem

The mousemove and mouseup events were previously bound directly to the board element div. This caused difficulties for users trying to select colors at the extreme edges of the color picker, such as full black or full white. Users had to position their mouse precisely at the edges, which was often impossible, resulting in inaccurate color selection (e.g., a greyish color instead of full black or white).

Solution

The mousemove and mouseup events have been remapped to the document object. This change ensures that the color selection can be accurately tracked even when the mouse moves outside the boundaries of the color picker element. Users can now easily select colors at the extreme edges without needing to precisely position their mouse.

Video

✅ Improved UX (note how my cursor is leaving the board element while holding the left mouse button and still picking the proper color):

CleanShot.2024-07-24.at.16.44.31.mp4

❌ Previous state:

CleanShot.2024-07-24.at.16.44.02.mp4

[mariojankovic]

I published the package with the above changes until this goes out to main: https://www.npmjs.com/package/@mariojankovic/vue3-colorpicker

[gigabites19]

@aesoper101 can we get this merged?