fix(ColorPicker): update color conversion logic (#4550)

Author: hywax

playground/app/pages/components/color-picker.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 const colorHex = ref('#9C27B0')
+
+function handleColorChange(event: Event) {
+  colorHex.value = (event.target as HTMLInputElement).value
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-5">
     <div class="flex items-center gap-2">
       <span :style="{ backgroundColor: colorHex }" class="inline-flex w-5 h-5 rounded" />
-      <code class="font-mono">{{ colorHex }}</code>
+      <UInput :model-value="colorHex" @change="handleColorChange" />
     </div>
     <USeparator />
     <div class="flex justify-between gap-2">
@@ -21,6 +25,6 @@ const colorHex = ref('#9C27B0')
       </UButton>
     </div>
     <USeparator />
-    <UColorPicker v-model="colorHex" @update:model-value="() => console.log('model update')" />
+    <UColorPicker v-model="colorHex" />
   </div>
 </template>

src/runtime/components/ColorPicker.vue

@@ -31,7 +31,7 @@ function HSVtoHSL(hsv: HSVColor): HSLObject {
   return {
     H: hsv.h,
     S: x === 0 || x === 200 ? 0 : Math.round(hsv.s * hsv.v / (x <= 100 ? x : 200 - x)),
-    L: Math.round(x / 2)
+    L: x / 2
   }
 }
 
@@ -102,7 +102,6 @@ const pickedColor = computed<HSVColor>({
   },
   set(value) {
     const color = new ColorTranslator(HSVtoHSL(value), {
-      decimals: 2,
       labUnit: 'percent',
       cmykUnit: 'percent',
       cmykFunction: 'cmyk'