45 lines
1.3 KiB
Vue
45 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import type { NodeProps } from '@vue-flow/core'
|
|
import { Handle, Position } from '@vue-flow/core'
|
|
import type { Colors } from '../flows/utils'
|
|
|
|
interface RGBNodeProps extends Pick<NodeProps<{ color: Colors }>, 'data'> {
|
|
data: {
|
|
color: Colors
|
|
}
|
|
amount: Record<Colors, number>
|
|
}
|
|
|
|
const props = defineProps<RGBNodeProps>()
|
|
|
|
const emit = defineEmits<{ (event: 'change', data: { color: Colors; val: number }): void }>()
|
|
|
|
const currentColor = toRef(props.data, 'color', 'red')
|
|
|
|
function onChange(e: InputEvent) {
|
|
return emit('change', { color: currentColor.value, val: Number.parseInt((e.target as HTMLInputElement).value) })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="px-4 py-2 bg-white rounded-md border-2 border-solid border-black text-left transform scale-75 lg:scale-100">
|
|
<div class="text-md font-semibold text-center" :style="{ color: currentColor }">{{ `${currentColor}`.toUpperCase() }}</div>
|
|
|
|
<input
|
|
:value="amount[currentColor]"
|
|
class="slider nodrag"
|
|
:style="{ '--color': currentColor }"
|
|
type="range"
|
|
min="0"
|
|
max="255"
|
|
@input="onChange"
|
|
/>
|
|
|
|
<Handle
|
|
type="source"
|
|
:position="Position.Right"
|
|
:style="{ backgroundColor: currentColor, right: '-6px', width: '12px', height: '12px' }"
|
|
/>
|
|
</div>
|
|
</template>
|