Skip to content

Commit cc20a26

Browse files
mkalino1benjamincanac
mkalino1
and
benjamincanac
authored
fix(ColorPicker): make thumb touch draggable (#4101)
Co-authored-by: Benjamin Canac <[email protected]>
1 parent 983c638 commit cc20a26

File tree

3 files changed

+58
-58
lines changed

3 files changed

+58
-58
lines changed

‎src/theme/color-picker.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ export default {
22
slots: {
33
root: 'data-[disabled]:opacity-75',
44
picker: 'flex gap-4',
5-
selector: 'rounded-md',
5+
selector: 'rounded-md touch-none',
66
selectorBackground: 'w-full h-full relative rounded-md',
77
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',
8-
track: 'w-[8px] relative rounded-md',
8+
track: 'w-[8px] relative rounded-md touch-none',
99
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'
1010
},
1111
variants: {

‎test/components/__snapshots__/ColorPicker-vue.spec.ts.snap

+28-28
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
exports[`ColorPicker > renders with as correctly 1`] = `
44
"<section data-v-c9a043d6="" class="data-[disabled]:opacity-75">
55
<div data-v-c9a043d6="" class="flex gap-4">
6-
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
6+
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
77
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
88
<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>
99
</div>
1010
</div>
11-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
11+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
1212
<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>
1313
</div>
1414
</div>
@@ -18,12 +18,12 @@ exports[`ColorPicker > renders with as correctly 1`] = `
1818
exports[`ColorPicker > renders with class correctly 1`] = `
1919
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75 w-96">
2020
<div data-v-c9a043d6="" class="flex gap-4">
21-
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
21+
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
2222
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
2323
<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>
2424
</div>
2525
</div>
26-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
26+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
2727
<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>
2828
</div>
2929
</div>
@@ -33,12 +33,12 @@ exports[`ColorPicker > renders with class correctly 1`] = `
3333
exports[`ColorPicker > renders with disabled correctly 1`] = `
3434
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75" data-disabled="true">
3535
<div data-v-c9a043d6="" class="flex gap-4">
36-
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
36+
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
3737
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
3838
<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>
3939
</div>
4040
</div>
41-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
41+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
4242
<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>
4343
</div>
4444
</div>
@@ -48,12 +48,12 @@ exports[`ColorPicker > renders with disabled correctly 1`] = `
4848
exports[`ColorPicker > renders with format cmyk correctly 1`] = `
4949
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
5050
<div data-v-c9a043d6="" class="flex gap-4">
51-
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
51+
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
5252
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
5353
<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>
5454
</div>
5555
</div>
56-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
56+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
5757
<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>
5858
</div>
5959
</div>
@@ -63,12 +63,12 @@ exports[`ColorPicker > renders with format cmyk correctly 1`] = `
6363
exports[`ColorPicker > renders with format hex correctly 1`] = `
6464
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
6565
<div data-v-c9a043d6="" class="flex gap-4">
66-
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
66+
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
6767
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
6868
<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>
6969
</div>
7070
</div>
71-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
71+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
7272
<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>
7373
</div>
7474
</div>
@@ -78,12 +78,12 @@ exports[`ColorPicker > renders with format hex correctly 1`] = `
7878
exports[`ColorPicker > renders with format hsl correctly 1`] = `
7979
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
8080
<div data-v-c9a043d6="" class="flex gap-4">
81-
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
81+
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
8282
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
8383
<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>
8484
</div>
8585
</div>
86-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
86+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
8787
<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>
8888
</div>
8989
</div>
@@ -93,12 +93,12 @@ exports[`ColorPicker > renders with format hsl correctly 1`] = `
9393
exports[`ColorPicker > renders with format lab correctly 1`] = `
9494
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
9595
<div data-v-c9a043d6="" class="flex gap-4">
96-
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF6F;">
96+
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF6F;">
9797
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
9898
<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>
9999
</div>
100100
</div>
101-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
101+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
102102
<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>
103103
</div>
104104
</div>
@@ -108,12 +108,12 @@ exports[`ColorPicker > renders with format lab correctly 1`] = `
108108
exports[`ColorPicker > renders with format rgb correctly 1`] = `
109109
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
110110
<div data-v-c9a043d6="" class="flex gap-4">
111-
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #00FF8C;">
111+
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #00FF8C;">
112112
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
113113
<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>
114114
</div>
115115
</div>
116-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
116+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
117117
<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>
118118
</div>
119119
</div>
@@ -123,12 +123,12 @@ exports[`ColorPicker > renders with format rgb correctly 1`] = `
123123
exports[`ColorPicker > renders with size lg correctly 1`] = `
124124
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
125125
<div data-v-c9a043d6="" class="flex gap-4">
126-
<div data-v-c9a043d6="" class="rounded-md w-44 h-44" style="background-color: #FF0000;">
126+
<div data-v-c9a043d6="" class="rounded-md touch-none w-44 h-44" style="background-color: #FF0000;">
127127
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
128128
<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>
129129
</div>
130130
</div>
131-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-44" data-color-picker-track="">
131+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-44" data-color-picker-track="">
132132
<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>
133133
</div>
134134
</div>
@@ -138,12 +138,12 @@ exports[`ColorPicker > renders with size lg correctly 1`] = `
138138
exports[`ColorPicker > renders with size md correctly 1`] = `
139139
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
140140
<div data-v-c9a043d6="" class="flex gap-4">
141-
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
141+
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
142142
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
143143
<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>
144144
</div>
145145
</div>
146-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
146+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
147147
<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>
148148
</div>
149149
</div>
@@ -153,12 +153,12 @@ exports[`ColorPicker > renders with size md correctly 1`] = `
153153
exports[`ColorPicker > renders with size sm correctly 1`] = `
154154
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
155155
<div data-v-c9a043d6="" class="flex gap-4">
156-
<div data-v-c9a043d6="" class="rounded-md w-40 h-40" style="background-color: #FF0000;">
156+
<div data-v-c9a043d6="" class="rounded-md touch-none w-40 h-40" style="background-color: #FF0000;">
157157
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
158158
<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>
159159
</div>
160160
</div>
161-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-40" data-color-picker-track="">
161+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-40" data-color-picker-track="">
162162
<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>
163163
</div>
164164
</div>
@@ -168,12 +168,12 @@ exports[`ColorPicker > renders with size sm correctly 1`] = `
168168
exports[`ColorPicker > renders with size xl correctly 1`] = `
169169
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
170170
<div data-v-c9a043d6="" class="flex gap-4">
171-
<div data-v-c9a043d6="" class="rounded-md w-46 h-46" style="background-color: #FF0000;">
171+
<div data-v-c9a043d6="" class="rounded-md touch-none w-46 h-46" style="background-color: #FF0000;">
172172
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
173173
<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>
174174
</div>
175175
</div>
176-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-46" data-color-picker-track="">
176+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-46" data-color-picker-track="">
177177
<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>
178178
</div>
179179
</div>
@@ -183,12 +183,12 @@ exports[`ColorPicker > renders with size xl correctly 1`] = `
183183
exports[`ColorPicker > renders with size xs correctly 1`] = `
184184
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
185185
<div data-v-c9a043d6="" class="flex gap-4">
186-
<div data-v-c9a043d6="" class="rounded-md w-38 h-38" style="background-color: #FF0000;">
186+
<div data-v-c9a043d6="" class="rounded-md touch-none w-38 h-38" style="background-color: #FF0000;">
187187
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
188188
<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>
189189
</div>
190190
</div>
191-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-38" data-color-picker-track="">
191+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-38" data-color-picker-track="">
192192
<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>
193193
</div>
194194
</div>
@@ -198,12 +198,12 @@ exports[`ColorPicker > renders with size xs correctly 1`] = `
198198
exports[`ColorPicker > renders with ui correctly 1`] = `
199199
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
200200
<div data-v-c9a043d6="" class="flex gap-8">
201-
<div data-v-c9a043d6="" class="rounded-md w-42 h-42" style="background-color: #FF0000;">
201+
<div data-v-c9a043d6="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
202202
<div data-v-c9a043d6="" class="w-full h-full relative rounded-md" data-color-picker-background="">
203203
<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>
204204
</div>
205205
</div>
206-
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md h-42" data-color-picker-track="">
206+
<div data-v-c9a043d6="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
207207
<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>
208208
</div>
209209
</div>

0 commit comments

Comments
 (0)