Color Picker

1<script lang="ts" setup>
2import { ref, computed } from 'vue'
3import { useForwardPropsEmits } from 'reka-ui'
4import {
5  ColorPickerRoot,
6  ColorPickerCanvas,
7  ColorPickerEyeDropper,
8  ColorPickerSliderHue,
9  ColorPickerSliderAlpha,
10  ColorPickerInputHex,
11  ColorPickerInputHSL,
12  ColorPickerInputRGB,
13  ColorPickerInputHSB,
14  type ColorPickerRootProps,
15  type ColorPickerRootEmits
16} from '@vuelor/picker'
17 
18import ColorPickerSelect from '@/registry/default/color-picker/ColorPickerSelect.vue'
19 
20const INPUTS = {
21  Hex: ColorPickerInputHex,
22  RGB: ColorPickerInputRGB,
23  HSL: ColorPickerInputHSL,
24  HSB: ColorPickerInputHSB
25}
26 
27type ColorPickerProps = Omit<ColorPickerRootProps, 'styling' | 'ui'>
28 
29const props = defineProps<ColorPickerProps>()
30const emits = defineEmits<ColorPickerRootEmits>()
31 
32const forwarded = useForwardPropsEmits(props, emits)
33 
34const format = ref<'Hex' | 'RGB' | 'HSL' | 'HSB'>('Hex')
35const formatOptions = ['Hex', 'RGB', 'HSL', 'HSB']
36const canvasType = computed<'HSL' | 'HSV'>(() => {
37  return format.value === 'HSL' ? 'HSL' : 'HSV'
38})
39</script>
40 
41<template>
42  <ColorPickerRoot
43    :ui="{ input: { label: 'hidden' } }"
44    v-bind="forwarded"
45  >
46    <ColorPickerCanvas :type="canvasType" />
47    <div class="flex items-center gap-3">
48      <ColorPickerEyeDropper type="button" aria-label="Pick color from screen">
49        <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
50          <path
51            fill="currentColor"
52            fill-rule="evenodd"
53            clip-rule="evenodd"
54            d="M17.52 6.471a1.62 1.62 0 0 0-2.295.003l-1.87 1.88-.354.355-.355-.354-.01-.01a.9.9 0 0 0-1.272 0l-.02.02a.9.9 0 0 0 0 1.273l.51.51 2 2 .51.51a.9.9 0 0 0 1.272 0l.02-.02a.9.9 0 0 0 0-1.273l-.01-.01-.352-.353.351-.353 1.879-1.888a1.62 1.62 0 0 0-.003-2.29m-3.004-.702a2.621 2.621 0 1 1 3.717 3.697l-1.57 1.579a1.9 1.9 0 0 1-.3 2.3l-.02.02a1.9 1.9 0 0 1-2.687 0l-.156-.157-5.647 5.642a.5.5 0 0 1-.353.147H5.504a.5.5 0 0 1-.5-.5L5 16.503a.5.5 0 0 1 .146-.354l5.647-5.647-.157-.156a1.9 1.9 0 0 1 0-2.687l.02-.02a1.9 1.9 0 0 1 2.299-.3zm-3.016 5.44 1.293 1.292-5.5 5.496h-1.29L6 16.707z"
55          />
56        </svg>
57      </ColorPickerEyeDropper>
58      <div class="flex flex-col flex-1 gap-2">
59        <ColorPickerSliderHue />
60        <ColorPickerSliderAlpha />
61      </div>
62    </div>
63    <div class="flex items-center gap-2">
64      <ColorPickerSelect
65        v-model="format"
66        class="w-[56px]"
67        label="Color Format"
68        placeholder="Format"
69// … truncated