Color Picker (Popover)

1<script lang="ts" setup>
2import { useTemplateRef } from 'vue'
3import { useForwardPropsEmits } from 'reka-ui'
4import {
5  ColorPickerRoot,
6  ColorPickerCanvas,
7  ColorPickerEyeDropper,
8  ColorPickerSliderHue,
9  ColorPickerSliderAlpha,
10  ColorPickerInputHex,
11  ColorPickerSwatch,
12  type ColorPickerRootProps,
13  type ColorPickerRootEmits
14} from '@vuelor/picker'
15import {
16  PopoverContent,
17  PopoverPortal,
18  PopoverRoot,
19  PopoverTrigger
20} from 'reka-ui'
21 
22type ColorPickerProps = Omit<ColorPickerRootProps, 'styling' | 'ui'>
23 
24const props = defineProps<ColorPickerProps>()
25const emits = defineEmits<ColorPickerRootEmits>()
26 
27const forwarded = useForwardPropsEmits(props, emits)
28 
29const colorPicker = useTemplateRef<typeof ColorPickerRoot>('colorPicker')
30</script>
31 
32<template>
33  <ColorPickerRoot
34    ref="colorPicker"
35    class="p-0 rounded-none bg-transparent !shadow-none w-auto"
36    :ui="{
37      shared: { thumb: 'border-2 h-3 w-3' },
38      slider: { track: 'h-3' },
39      input: { item: 'bg-vuelor-surface', field: 'max-w-16' }
40    }"
41    v-bind="forwarded"
42  >
43    <PopoverRoot>
44      <ColorPickerInputHex class="w-52 shadow bg-vuelor-input rounded-[5px]" >
45        <template #before>
46          <PopoverTrigger as-child>
47            <ColorPickerSwatch
48              type="button"
49              aria-label="Toggle color picker"
50              :value="colorPicker?.color.hexa.value ?? '#B63DDAFF'"
51            />
52          </PopoverTrigger>
53        </template>
54      </ColorPickerInputHex>
55 
56      <PopoverPortal>
57        <PopoverContent
58          align="start"
59          :sideOffset="5"
60          :alignOffset="-4"
61          class="bg-vuelor-surface rounded-[5px] shadow-vuelor-card"
62        >
63          <ColorPickerCanvas :ui="{ root: 'w-52 rounded-none rounded-t-[5px]' }" />
64          <div class="p-3 flex items-center gap-3">
65            <ColorPickerEyeDropper type="button" aria-label="Pick color from screen">
66              <svg width="24" height="24" fill="none" viewBox="0 0 24 24">
67                <path
68                  fill="currentColor"
69                  fill-rule="evenodd"
70                  clip-rule="evenodd"
71// … truncated