matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX: Value slider color

Browse Source
This commit is contained in:
Robert Kossessa
2024-01-26 17:06:00 +01:00
parent 36b3178235
commit a1899e55eb
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/HSVInput.vue
View File

@@ -37,12 +37,19 @@ const valueSliderModel = computed({
}, },
}) })
const color = ref(Color('#FF0000')) const color = defineModel({
type: Color,
default: () => Color.rgb(255, 0, 0),
})
const sliderColor = computed(() => { const saturationSliderColor = computed(() => {
return Color.hsv(hueSliderModel.value[0], 100, valueSliderModel.value[0]) return Color.hsv(hueSliderModel.value[0], 100, valueSliderModel.value[0])
}) })
const valueSliderColor = computed(() => {
return Color.hsv(hueSliderModel.value[0], saturationSliderModel.value[0], 100)
})
const hexInput = ref('FF0000') const hexInput = ref('FF0000')
const hueInput = ref('000') const hueInput = ref('000')
const saturationInput = ref('100') const saturationInput = ref('100')
@@ -147,7 +154,7 @@ function shake() {
class="w-full flex p-4 font-heading" class="w-full flex p-4 font-heading"
:style="{backgroundColor: `hsl(${color.hue()},${color.saturationl()}%,${color.lightness()}%)`}"> :style="{backgroundColor: `hsl(${color.hue()},${color.saturationl()}%,${color.lightness()}%)`}">
<div <div
ref="colorFieldText" class="w-full flex opacity-50" ref="colorFieldText" class="w-full flex opacity-70"
:class="color.lighten(0.37).isLight() ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'" :class="color.lighten(0.37).isLight() ? 'text-black selection:bg-black selection:text-white' : 'selection:bg-white selection:text-black'"
style="transition: color 0.2s ease-in-out"> style="transition: color 0.2s ease-in-out">
<div> <div>
@@ -241,7 +248,7 @@ function shake() {
class="relative flex w-full touch-none select-none items-center"> class="relative flex w-full touch-none select-none items-center">
<SliderTrack <SliderTrack
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900" class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
:style="{background: `linear-gradient(90deg, hsl(0, 0%, ${sliderColor.lightness()}%) 0%, hsl(${sliderColor.hue()}, 100%, ${sliderColor.lightness()}%) 100%)`}" /> :style="{background: `linear-gradient(90deg, hsl(0, 0%, ${saturationSliderColor.lightness()}%) 0%, hsl(${saturationSliderColor.hue()}, 100%, ${saturationSliderColor.lightness()}%) 100%)`}" />
<SliderThumb <SliderThumb
class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" /> class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
</SliderRoot> </SliderRoot>
@@ -253,7 +260,7 @@ function shake() {
class="relative flex w-full touch-none select-none items-center"> class="relative flex w-full touch-none select-none items-center">
<SliderTrack <SliderTrack
class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900" class="relative h-2.5 w-full grow overflow-hidden rounded-full border-2 border-zinc-900"
:style="{background: `linear-gradient(90deg, black, hsl(${sliderColor.hue()}, ${color.saturationl()}%, 50%) 100%`}" /> :style="{background: `linear-gradient(90deg, black, hsl(${valueSliderColor.hue()}, ${valueSliderColor.saturationl()}%, ${valueSliderColor.lightness()}%) 100%`}" />
<SliderThumb <SliderThumb
class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" /> class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
</SliderRoot> </SliderRoot>