69 lines
2.1 KiB
Vue
69 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { inputNumberValue } from '@open-pencil/vue'
|
|
import { colorToCSS } from '@open-pencil/core/color'
|
|
|
|
import PickerSlider from '@/components/PickerSlider.vue'
|
|
import { useColorPickerPanelContext } from '@/components/ColorPickerPanel/context'
|
|
|
|
const ctx = useColorPickerPanelContext()
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="grid grid-cols-[repeat(3,minmax(0,1fr))] gap-px overflow-hidden rounded border border-border bg-border"
|
|
>
|
|
<input
|
|
type="number"
|
|
class="bg-input px-2 py-1 text-xs text-surface outline-none"
|
|
:value="Math.round(ctx.hslColor.h ?? 0)"
|
|
min="0"
|
|
max="360"
|
|
@change="ctx.updateHSLChannelValue('h', inputNumberValue($event))"
|
|
/>
|
|
<input
|
|
type="number"
|
|
class="bg-input px-2 py-1 text-xs text-surface outline-none"
|
|
:value="Math.round(ctx.hslColor.s ?? 0)"
|
|
min="0"
|
|
max="100"
|
|
@change="ctx.updateHSLChannelValue('s', inputNumberValue($event))"
|
|
/>
|
|
<input
|
|
type="number"
|
|
class="bg-input px-2 py-1 text-xs text-surface outline-none"
|
|
:value="Math.round(ctx.hslColor.l ?? 0)"
|
|
min="0"
|
|
max="100"
|
|
@change="ctx.updateHSLChannelValue('l', inputNumberValue($event))"
|
|
/>
|
|
</div>
|
|
|
|
<PickerSlider
|
|
label="S"
|
|
:model-value="ctx.hslColor.s ?? 0"
|
|
:min="0"
|
|
:max="100"
|
|
:step="0.1"
|
|
:display="{ value: Math.round(ctx.hslColor.s ?? 0), min: 0, max: 100, step: 1 }"
|
|
:gradient-style="ctx.sliderGradient.hslSaturation"
|
|
:thumb-fill="colorToCSS(ctx.sliderPreview.hslSaturation)"
|
|
test-id="color-slider-hsl-s"
|
|
@update:model-value="ctx.updateHSLChannelValue('s', $event)"
|
|
/>
|
|
|
|
<PickerSlider
|
|
label="L"
|
|
:model-value="ctx.hslColor.l ?? 0"
|
|
:min="0"
|
|
:max="100"
|
|
:step="0.1"
|
|
:display="{ value: Math.round(ctx.hslColor.l ?? 0), min: 0, max: 100, step: 1 }"
|
|
:gradient-style="ctx.sliderGradient.hslLightness"
|
|
:thumb-fill="colorToCSS(ctx.sliderPreview.hslLightness)"
|
|
test-id="color-slider-hsl-l"
|
|
@update:model-value="ctx.updateHSLChannelValue('l', $event)"
|
|
/>
|
|
|
|
<p class="text-[10px] leading-4 text-muted">{{ ctx.panels.colorHintHsl }}</p>
|
|
</template>
|