Skip to content

fix(ColorPicker): make thumb touch draggable #4101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 10, 2025
+58 −58
Merged

fix(ColorPicker): make thumb touch draggable #4101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d668591
fix(ColorPicker): make thumbs touch draggable
mkalino1 May 7, 2025
c7f12d1
Merge branch 'v3' into fix/color-picker-touch-draggable
benjamincanac May 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/theme/color-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ export default {
slots: {
root: 'data-[disabled]:opacity-75',
picker: 'flex gap-4',
selector: 'rounded-md',
selector: 'rounded-md touch-none',
selectorBackground: 'w-full h-full relative rounded-md',
selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
track: 'w-[8px] relative rounded-md',
track: 'w-[8px] relative rounded-md touch-none',
trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed'
},
variants: {
Expand Down
56 changes: 28 additions & 28 deletions test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
exports[`ColorPicker > renders with as correctly 1`] = `
"<section data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
Expand All @@ -18,12 +18,12 @@ exports[`ColorPicker > renders with as correctly 1`] = `
exports[`ColorPicker > renders with class correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75 w-96">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
Expand All @@ -33,12 +33,12 @@ exports[`ColorPicker > renders with class correctly 1`] = `
exports[`ColorPicker > renders with disabled correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75" data-disabled="true">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
</div>
</div>
Expand All @@ -48,12 +48,12 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
exports[`ColorPicker > renders with format cmyk correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.310000000000002%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48666666666667%;"></div>
</div>
</div>
Expand All @@ -63,12 +63,12 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
exports[`ColorPicker > renders with format hex correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
</div>
</div>
Expand All @@ -78,12 +78,12 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
exports[`ColorPicker > renders with format hsl correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
</div>
</div>
Expand All @@ -93,12 +93,12 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
exports[`ColorPicker > renders with format lab correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF6F;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C757; left: 100%; top: 22.031043999999994%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF6F; top: 40.609066111111105%;"></div>
</div>
</div>
Expand All @@ -108,12 +108,12 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
exports[`ColorPicker > renders with format rgb correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313726000000003%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704666666667%;"></div>
</div>
</div>
Expand All @@ -123,12 +123,12 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
exports[`ColorPicker > renders with size lg correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-44 h-44" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-44" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-44" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
Expand All @@ -138,12 +138,12 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
exports[`ColorPicker > renders with size md correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
Expand All @@ -153,12 +153,12 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
exports[`ColorPicker > renders with size sm correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-40 h-40" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-40" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-40" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
Expand All @@ -168,12 +168,12 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
exports[`ColorPicker > renders with size xl correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-46 h-46" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-46" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-46" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
Expand All @@ -183,12 +183,12 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
exports[`ColorPicker > renders with size xs correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-4">
<div data-v-c9a043d6="" class="rounded-md w-38 h-38" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-38" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-38" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
Expand All @@ -198,12 +198,12 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
exports[`ColorPicker > renders with ui correctly 1`] = `
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
<div data-v-c9a043d6="" class="flex gap-8">
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
</div>
</div>
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
</div>
</div>
Expand Down
Loading