Color Picker (Gradient)

1<script lang="ts" setup>
2import { ref, computed, watch } from 'vue'
3import { createReusableTemplate, useMediaQuery, useMounted } from '@vueuse/core'
4import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
5import { PopoverContent, PopoverPortal, PopoverRoot } from 'reka-ui'
6import { ColorPickerInputHex, ColorPickerInputHSL, ColorPickerInputRGB, ColorPickerInputHSB } from '@vuelor/picker'
7import { ColorPickerRoot, ColorPickerCanvas, ColorPickerEyeDropper, ColorPickerSwatch } from '@vuelor/picker'
8import { ColorPickerSliderHue, ColorPickerSliderAlpha, useVModel } from '@vuelor/picker'
9import { GradientPickerRoot, GradientPickerSlider, GradientPickerPositionInput } from '@vuelor/gradient'
10import { GradientPickerAddStop, GradientPickerRemoveStop, GradientPickerReverse, GradientPickerRotate } from '@vuelor/gradient'
11import { normalizeHexa, parseGradient, serializeGradient } from '@vuelor/gradient'
12import type { GradientType, UseGradientReturn } from '@vuelor/gradient'
13 
14import ColorPickerSelect from '@/registry/default/color-picker-gradient/ColorPickerSelect.vue'
15 
16const [DefineColorPickerTemplate, ColorPicker] = createReusableTemplate()
17 
18const isDesktop = useMediaQuery('(min-width: 640px)')
19// The media query resolves only in the browser; gating the mobile-only picker
20// on mounted keeps server and first client render identical (no hydration
21// mismatch) while still unmounting the duplicate instance on desktop.
22const isMounted = useMounted()
23 
24const INPUTS = {
25  Hex: ColorPickerInputHex,
26  RGB: ColorPickerInputRGB,
27  HSL: ColorPickerInputHSL,
28  HSB: ColorPickerInputHSB
29}
30 
31type ModelValue = string | null
32type Format = keyof typeof INPUTS
33 
34interface Props {
35  class?: string
36  disabled?: boolean
37  modelValue?: ModelValue
38}
39 
40const props = withDefaults(defineProps<Props>(), {
41  disabled: false,
42  modelValue: null
43})
44 
45const emit = defineEmits<{
46  (e: 'update:modelValue', value: ModelValue): void
47  (e: 'close'): void
48}>()
49 
50const format = ref<Format>('Hex')
51const formatOptions = Object.keys(INPUTS)
52 
53function handleFormatChange (value: string) {
54  if (value in INPUTS) format.value = value as Format
55}
56 
57const swatches = [
58  '#00C3D0FF',
59  '#00C8B3FF',
60  '#34C759FF',
61  '#FFCC00FF',
62  '#FF383CFF',
63  '#FF8D2825',
64  '#FF383C40',
65  '#FF8D2880',
66  '#FFCC0080',
67  '#34C759FF',
68  '#00C8B3FF',
69  '#00C3D0FF',
70  '#0088FFFF',
71  '#6155F5FF',
72  '#CB30E0FF',
73  '#FF2D55FF',
74  '#FF2D5525',
75  '#AC7F5EFF'
76]
77 
78const canvasType = computed<'HSL' | 'HSV'>(() => {
79// … truncated