Color Picker (Tabs, Vertical)

1<script lang="ts" setup>
2import { ref, computed } from 'vue'
3import { useForwardPropsEmits } from 'reka-ui'
4import { TabsRoot, 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 INPUTS = {
28  hex: ColorPickerInputHex,
29  rgb: ColorPickerInputRGB,
30  hsl: ColorPickerInputHSL,
31  hsb: ColorPickerInputHSB
32}
33 
34const format = ref<keyof typeof INPUTS>('rgb')
35 
36const canvasType = computed<'HSL' | 'HSV'>(() => {
37  return format.value === 'hsl' ? 'HSL' : 'HSV'
38})
39 
40const swatches = ref<string[]>([
41  '#FF690050',
42  '#FCB900FF',
43  '#7BDCB5FF',
44  '#00D084FF',
45  '#8ED1FCFF',
46  '#0693E3FF',
47  '#ABB8C344',
48  '#EB144CFF',
49  '#F78DA7FF',
50  '#9900EFFF',
51  '#F6BD6044',
52  '#84A59DBA',
53])
54 
55 
56</script>
57 
58<template>
59  <ColorPickerRoot
60    class="w-[295px] p-0 gap-0"
61    :ui="{
62      input: {
63        group: '!outline-none gap-2',
64        item: '!rounded-[6px] hover:outline-1 outline-vuelor-border focus-within:outline-1 focus-within:outline-vuelor-primary'
65      },
66      shared: {
67        thumb: 'border-[3px] w-3.5 h-3.5'
68      },
69      canvas: {
70        root: 'rounded-lg'
71      },
72      slider: {
73        track: 'w-4'
74      }
75    }"
76    v-bind="forwarded"
77  >
78    <div class="pt-4 px-4 pb-3 flex flex-col gap-3">
79      <div class="flex gap-3">
80        <ColorPickerCanvas :type="canvasType" />
81        <ColorPickerSliderHue orientation="vertical" />
82        <ColorPickerSliderAlpha orientation="vertical" />
83      </div>
84      <TabsRoot
85        v-model="format"
86        default-value="hex"
87      >
88        <TabsList class="grid grid-cols-4 items-center justify-center rounded-[7px] bg-vuelor-input p-0.5 w-full">
89          <TabsTrigger class="h-6 inline-flex items-center justify-center rounded-[5px] px-1 py-0.5 text-[11px] font-medium focus-within:outline-1 focus-within:outline-vuelor-primary disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-vuelor-surface data-[state=active]:shadow" value="hex">Hex</TabsTrigger>
90// … truncated