UPD: LED Color data in LEDsConfig

src/components/config/pages/LEDsConfig.vue

@@ -8,9 +8,8 @@
           <h2 class="p-6">{{ $t('config_options.light_designer.led_mode') }}</h2>
         </ConfigSection>
         <div class="h-6" />
-        <!-- TODO: Instead of 3 color pickers, add a context select above -->
         <ConfigSection :title="$t('config_options.light_designer.led_colors')" :icon-component="Palette">
-          <PaletteInput />
+          <PaletteInput v-model="colors" />
         </ConfigSection>
       </ScrollArea>
     </div>
@@ -21,4 +20,21 @@ import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { Lightbulb, Palette } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import PaletteInput from '@/components/config/pages/PaletteInput.vue'
+import Color from 'color'
+import { ref } from 'vue'
+
+const colors = ref({
+  primary: {
+    key: 'config_options.light_designer.primary_color',
+    color: Color('#ff0000'),
+  },
+  secondary: {
+    key: 'config_options.light_designer.secondary_color',
+    color: Color('#00ff00'),
+  },
+  pointer: {
+    key: 'config_options.light_designer.pointer_color',
+    color: Color('#0000ff'),
+  },
+})
 </script>

src/components/config/pages/PaletteInput.vue

@@ -6,7 +6,7 @@
       :class="currentOption!==key ? 'hover:bg-zinc-800 text-zinc-200' : 'text-black bg-zinc-200 hover:bg-zinc-100'"
       @click="currentOption = key">
       {{ $t(option.key) }}
-      <div class="h-4 w-full mt-2" :style="{background: option.color.hex()}"/>
+      <div class="h-4 w-full mt-2" :style="{background: option.color.hex()}" />
     </button>
   </div>
   <HSVInput v-model="options[currentOption].color" class="relative z-20" />
@@ -14,23 +14,23 @@
 <script setup>
 import HSVInput from '@/components/HSVInput.vue'
 import Color from 'color'
-import { reactive, ref } from 'vue'
+import { onBeforeMount, reactive, ref } from 'vue'
 
-const currentOption = ref('primary')
+const currentOption = ref(null)
 
 const model = defineModel({
   type: Object,
   default: () => ({
-    primary: {
-      key: 'config_options.light_designer.primary_color',
+    one: {
+      key: 'One',
       color: Color('#ff0000'),
     },
-    secondary: {
-      key: 'config_options.light_designer.secondary_color',
+    two: {
+      key: 'Two',
       color: Color('#00ff00'),
     },
-    pointer: {
-      key: 'config_options.light_designer.pointer_color',
+    three: {
+      key: 'Three',
       color: Color('#0000ff'),
     },
   }),
@@ -38,4 +38,9 @@ const model = defineModel({
 
 const options = reactive(model.value)
 
+onBeforeMount(() => {
+  if (currentOption.value === null)
+    currentOption.value = Object.keys(options)[0]
+})
+
 </script>