Color Picker (Tabs)

1<script lang="ts" setup>
2import { ref, computed } from 'vue'
3import { useForwardPropsEmits } from 'reka-ui'
4import { TabsRoot, TabsContent, TabsList, TabsTrigger } from 'reka-ui'
5import {
6  ColorPickerRoot,
7  ColorPickerCanvas,
8  ColorPickerEyeDropper,
9  ColorPickerSliderHue,
10  ColorPickerSliderAlpha,
11  ColorPickerInputHex,
12  ColorPickerInputHSL,
13  ColorPickerInputRGB,
14  ColorPickerInputHSB,
15  ColorPickerSwatch,
16  type ColorPickerRootProps,
17  type ColorPickerRootEmits
18} from '@vuelor/picker'
19 
20type ColorPickerProps = Omit<ColorPickerRootProps, 'styling' | 'ui'>
21 
22const props = defineProps<ColorPickerProps>()
23const emits = defineEmits<ColorPickerRootEmits>()
24 
25const forwarded = useForwardPropsEmits(props, emits)
26 
27const format = ref<string>('hex')
28 
29const canvasType = computed<'HSL' | 'HSV'>(() => {
30  return format.value === 'hsl' ? 'HSL' : 'HSV'
31})
32 
33const swatches = ref<string[]>([
34  '#00C3D0FF',
35  '#00C8B3FF',
36  '#34C759FF',
37  '#FFCC00FF',
38  '#FF383CFF',
39  '#FF8D2825',
40  '#FF383C40',
41  '#FF8D2880',
42  '#FFCC0080',
43  '#34C759FF',
44  '#00C8B3FF',
45  '#00C3D0FF',
46  '#0088FFFF',
47  '#6155F5FF',
48  '#CB30E0FF',
49  '#FF2D55FF',
50  '#FF2D5525',
51  '#AC7F5EFF'
52])
53 
54 
55</script>
56 
57<template>
58  <ColorPickerRoot
59    v-bind="forwarded"
60  >
61    <ColorPickerCanvas :type="canvasType" />
62    <div class="flex items-center gap-3">
63      <ColorPickerEyeDropper type="button" aria-label="Pick color from screen">
64        <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
65          <path
66            fill="currentColor"
67            fill-rule="evenodd"
68            clip-rule="evenodd"
69            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"
70          />
71        </svg>
72      </ColorPickerEyeDropper>
73      <div class="flex flex-col flex-1 gap-2">
74        <ColorPickerSliderHue />
75        <ColorPickerSliderAlpha />
76      </div>
77    </div>
78    <div class="flex items-center gap-2">
79      <TabsRoot
80        v-model="format"
81        default-value="hex"
82      >
83// … truncated