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-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')