public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(tool): add lch in color converter

Browse Source
This commit is contained in:
Corentin Thomasset 2022-04-15 21:57:44 +02:00
parent 4e50b7a973
commit b5243c4363
No known key found for this signature in database
GPG Key ID: DBD997E935996158
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/tools/color-converter/color-converter.vue
View File

@ -20,6 +20,9 @@
<n-form-item label="hwb:"> <n-form-item label="hwb:">
<n-input v-model:value="hwb" :on-input="(v: string) => onInputUpdated(v, 'hwb')" /> <n-input v-model:value="hwb" :on-input="(v: string) => onInputUpdated(v, 'hwb')" />
</n-form-item> </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-form-item label="cmyk:">
<n-input v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" /> <n-input v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" />
</n-form-item> </n-form-item>
@ -34,8 +37,9 @@ import { colord, extend } from "colord";
import cmykPlugin from "colord/plugins/cmyk"; import cmykPlugin from "colord/plugins/cmyk";
import hwbPlugin from "colord/plugins/hwb"; import hwbPlugin from "colord/plugins/hwb";
import namesPlugin from "colord/plugins/names"; 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 name = ref('')
const hex = ref('#1ea54cff') const hex = ref('#1ea54cff')
@ -43,16 +47,18 @@ const rgb = ref('')
const hsl = ref('') const hsl = ref('')
const hwb = ref('') const hwb = ref('')
const cmyk = ref('') const cmyk = ref('')
const lch = ref('')
function onInputUpdated(value: string, omit: string) { function onInputUpdated(value: string, omit: string) {
const color = colord(value); const color = colord(value);
omit !== 'name' && (name.value = color.toName({ closest: true }) ?? ''); if (omit !== 'name') name.value = color.toName({ closest: true }) ?? '';
omit !== 'hex' && (hex.value = color.toHex()); if (omit !== 'hex') hex.value = color.toHex();
omit !== 'rgb' && (rgb.value = color.toRgbString()); if (omit !== 'rgb') rgb.value = color.toRgbString();
omit !== 'hsl' && (hsl.value = color.toHslString()); if (omit !== 'hsl') hsl.value = color.toHslString();
omit !== 'hwb' && (hwb.value = color.toHwbString()); if (omit !== 'hwb') hwb.value = color.toHwbString();
omit !== 'cmyk' && (cmyk.value = color.toCmykString()); if (omit !== 'cmyk') cmyk.value = color.toCmykString();
if (omit !== 'lch') lch.value = color.toLchString();
} }
onInputUpdated(hex.value, 'hex') onInputUpdated(hex.value, 'hex')