60bb484ee4
- Forward data-test-id attrs through rendered controls instead of exposing test-id props - Move shell chrome components into the Shell namespace - Remove internal planning docs from published VitePress docs - Add guardrails and contributor guidance for test hooks and component placement
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.hsbColor.h)"
|
|
min="0"
|
|
max="360"
|
|
@change="ctx.updateHSBChannelValue('h', inputNumberValue($event))"
|
|
/>
|
|
<input
|
|
type="number"
|
|
class="bg-input px-2 py-1 text-xs text-surface outline-none"
|
|
:value="Math.round(ctx.hsbColor.s)"
|
|
min="0"
|
|
max="100"
|
|
@change="ctx.updateHSBChannelValue('s', inputNumberValue($event))"
|
|
/>
|
|
<input
|
|
type="number"
|
|
class="bg-input px-2 py-1 text-xs text-surface outline-none"
|
|
:value="Math.round(ctx.hsbColor.b)"
|
|
min="0"
|
|
max="100"
|
|
@change="ctx.updateHSBChannelValue('b', inputNumberValue($event))"
|
|
/>
|
|
</div>
|
|
|
|
<PickerSlider
|
|
label="S"
|
|
:model-value="ctx.hsbColor.s"
|
|
:min="0"
|
|
:max="100"
|
|
:step="0.1"
|
|
:display="{ value: Math.round(ctx.hsbColor.s), min: 0, max: 100, step: 1 }"
|
|
:gradient-style="ctx.sliderGradient.hsbSaturation"
|
|
:thumb-fill="colorToCSS(ctx.sliderPreview.hsbSaturation)"
|
|
data-test-id="color-slider-hsb-s"
|
|
@update:model-value="ctx.updateHSBChannelValue('s', $event)"
|
|
/>
|
|
|
|
<PickerSlider
|
|
label="B"
|
|
:model-value="ctx.hsbColor.b"
|
|
:min="0"
|
|
:max="100"
|
|
:step="0.1"
|
|
:display="{ value: Math.round(ctx.hsbColor.b), min: 0, max: 100, step: 1 }"
|
|
:gradient-style="ctx.sliderGradient.hsbBrightness"
|
|
:thumb-fill="colorToCSS(ctx.sliderPreview.hsbBrightness)"
|
|
data-test-id="color-slider-hsb-b"
|
|
@update:model-value="ctx.updateHSBChannelValue('b', $event)"
|
|
/>
|
|
|
|
<p class="text-[10px] leading-4 text-muted">{{ ctx.panels.colorHintHsb }}</p>
|
|
</template>
|