Gradient Picker

1<script lang="ts" setup>
2import { ref } from 'vue'
3import {
4  GradientPickerRoot,
5  GradientPickerSlider,
6  GradientPickerPreview,
7  GradientPickerPositionInput,
8  GradientPickerAngleInput,
9  GradientPickerAddStop,
10  GradientPickerRemoveStop,
11  GradientPickerReverse,
12  GradientPickerRotate
13} from '@vuelor/gradient'
14import { ColorPickerRoot, ColorPickerCanvas } from '@vuelor/picker'
15import { ColorPickerSliderHue, ColorPickerSliderAlpha, ColorPickerInputHex } from '@vuelor/picker'
16 
17const value = ref('linear-gradient(90deg, #FF98C2FF 0%, #4DC1FFFF 50%, #FFFA7AFF 100%)')
18</script>
19 
20<template>
21  <!-- The panel surface is always light, so it declares its own text color —
22       otherwise a dark host page bleeds light text into it via inheritance
23       (and via Tailwind preflight's `button { color: inherit }`). -->
24  <GradientPickerRoot
25    v-slot="{ gradient, commitValue }"
26    v-model="value"
27    class="text-black"
28  >
29    <div class="flex items-center justify-between">
30      <GradientPickerAngleInput />
31      <div class="flex items-center gap-1">
32        <GradientPickerReverse />
33        <GradientPickerRotate />
34        <GradientPickerRemoveStop />
35        <GradientPickerAddStop />
36      </div>
37    </div>
38 
39    <div class="pt-4">
40      <GradientPickerSlider />
41    </div>
42 
43    <!-- The nested picker edits the selected stop through the selectedColor
44         bridge and forwards its end-of-interaction signal to the gradient. -->
45    <ColorPickerRoot
46      v-model="gradient.selectedColor.value"
47      class="w-auto rounded-none bg-transparent p-0 shadow-none"
48      :ui="{ input: { label: 'hidden' } }"
49      @value-commit="commitValue()"
50    >
51      <ColorPickerCanvas class="h-28" />
52      <ColorPickerSliderHue />
53      <ColorPickerSliderAlpha />
54      <div class="flex items-center gap-2">
55        <GradientPickerPositionInput />
56        <ColorPickerInputHex class="flex-1" />
57      </div>
58    </ColorPickerRoot>
59 
60    <GradientPickerPreview />
61  </GradientPickerRoot>
62</template>