From b5243c43638f37a2d727b015bba61fab0d1b9fe9 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Fri, 15 Apr 2022 21:57:44 +0200
Subject: [PATCH] feat(tool): add lch in color converter

---
 src/tools/color-converter/color-converter.vue | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/tools/color-converter/color-converter.vue b/src/tools/color-converter/color-converter.vue
index 2c357b64..7df61cc8 100644
--- a/src/tools/color-converter/color-converter.vue
+++ b/src/tools/color-converter/color-converter.vue
@@ -20,6 +20,9 @@
       <n-form-item label="hwb:">
         <n-input v-model:value="hwb" :on-input="(v: string) => onInputUpdated(v, 'hwb')" />
       </n-form-item>
+      <n-form-item label="lch:">
+        <n-input v-model:value="lch" :on-input="(v: string) => onInputUpdated(v, 'lch')" />
+      </n-form-item>
       <n-form-item label="cmyk:">
         <n-input v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" />
       </n-form-item>
@@ -34,8 +37,9 @@ import { colord, extend } from "colord";
 import cmykPlugin from "colord/plugins/cmyk";
 import hwbPlugin from "colord/plugins/hwb";
 import namesPlugin from "colord/plugins/names";
+import lchPlugin from "colord/plugins/lch";
 
-extend([cmykPlugin, hwbPlugin, namesPlugin]);
+extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin]);
 
 const name = ref('')
 const hex = ref('#1ea54cff')
@@ -43,16 +47,18 @@ const rgb = ref('')
 const hsl = ref('')
 const hwb = ref('')
 const cmyk = ref('')
+const lch = ref('')
 
 function onInputUpdated(value: string, omit: string) {
   const color = colord(value);
 
-  omit !== 'name' && (name.value = color.toName({ closest: true }) ?? '');
-  omit !== 'hex' && (hex.value = color.toHex());
-  omit !== 'rgb' && (rgb.value = color.toRgbString());
-  omit !== 'hsl' && (hsl.value = color.toHslString());
-  omit !== 'hwb' && (hwb.value = color.toHwbString());
-  omit !== 'cmyk' && (cmyk.value = color.toCmykString());
+  if (omit !== 'name') name.value = color.toName({ closest: true }) ?? '';
+  if (omit !== 'hex') hex.value = color.toHex();
+  if (omit !== 'rgb') rgb.value = color.toRgbString();
+  if (omit !== 'hsl') hsl.value = color.toHslString();
+  if (omit !== 'hwb') hwb.value = color.toHwbString();
+  if (omit !== 'cmyk') cmyk.value = color.toCmykString();
+  if (omit !== 'lch') lch.value = color.toLchString();
 }
 
 onInputUpdated(hex.value, 'hex')