mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-04 13:29:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge a25a69e773 into e1b4f9aafe

Browse source
This commit is contained in:
sharevb 2024-08-07 22:41:29 -06:00 • committed by GitHub
commit 9ccfb2967e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 103 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components.d.ts vendored
View file

@ -127,8 +127,10 @@ declare module '@vue/runtime-core' {
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NCode: typeof import('naive-ui')['NCode']
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
NColorPicker: typeof import('naive-ui')['NColorPicker']
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
NDivider: typeof import('naive-ui')['NDivider']
NEllipsis: typeof import('naive-ui')['NEllipsis']
@ -144,6 +146,8 @@ declare module '@vue/runtime-core' {
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
NMenu: typeof import('naive-ui')['NMenu']
NScrollbar: typeof import('naive-ui')['NScrollbar']
NSlider: typeof import('naive-ui')['NSlider']
NSpace: typeof import('naive-ui')['NSpace']
NSpin: typeof import('naive-ui')['NSpin']
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']

79
src/tools/color-converter/color-converter.vue
View file

@ -6,9 +6,11 @@ import cmykPlugin from 'colord/plugins/cmyk';
import hwbPlugin from 'colord/plugins/hwb';
import namesPlugin from 'colord/plugins/names';
import lchPlugin from 'colord/plugins/lch';
import xyzPlugin from 'colord/plugins/xyz';
import labPlugin from 'colord/plugins/lab';
import { buildColorFormat } from './color-converter.models';
extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin]);
extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin, xyzPlugin, labPlugin]);
const formats = {
picker: buildColorFormat({
@ -46,6 +48,18 @@ const formats = {
format: (v: Colord) => v.toCmykString(),
placeholder: 'e.g. cmyk(0, 100%, 100%, 0)',
}),
lab: buildColorFormat({
label: 'lab',
format: (v: Colord) => JSON.stringify(v.toLab()),
placeholder: 'e.g. { l: 14.89, a: 5.77, b: 14.41, alpha: 0.5 }',
parse: value => colord(JSON.parse(value)),
}),
xyz: buildColorFormat({
label: 'xyz',
format: (v: Colord) => JSON.stringify(v.toXyz()),
placeholder: 'e.g. { x: 95.047, y: 100, z: 108.883, a: 1 }',
parse: value => colord(JSON.parse(value)),
}),
name: buildColorFormat({
label: 'name',
format: (v: Colord) => v.toName({ closest: true }) ?? 'Unknown',
@ -53,7 +67,17 @@ const formats = {
}),
};
updateColorValue(colord('#1ea54c'));
const saturation = ref(0);
const brightness = ref(0);
const grayscale = ref(false);
const invert = ref(false);
let lastColor = colord('#1ea54c');
watch([saturation, brightness, grayscale, invert],
() => updateColorValue(lastColor),
);
updateColorValue(lastColor);
function updateColorValue(value: Colord | undefined, omitLabel?: string) {
if (value === undefined) {
@ -64,15 +88,63 @@ function updateColorValue(value: Colord | undefined, omitLabel?: string) {
return;
}
lastColor = value;
let correctedValue = value;
if (grayscale.value) {
correctedValue = correctedValue.grayscale();
}
if (invert.value) {
correctedValue = correctedValue.invert();
}
const saturationFloat = saturation.value / 100.0;
if (saturationFloat > 0) {
correctedValue = correctedValue.saturate(saturationFloat);
}
else if (saturationFloat < 0) {
correctedValue = correctedValue.desaturate(-saturationFloat);
}
const brightnessFloat = brightness.value / 100.0;
if (brightnessFloat > 0) {
correctedValue = correctedValue.lighten(brightnessFloat);
}
else if (brightnessFloat < 0) {
correctedValue = correctedValue.darken(-brightnessFloat);
}
_.forEach(formats, ({ value: valueRef, format }, key) => {
if (key !== omitLabel) {
valueRef.value = format(value);
valueRef.value = format(correctedValue);
}
});
}
</script>
<template>
<div>
<c-card title="Transformations">
<n-form-item label="Saturation" label-placement="left">
<n-slider v-model:value="saturation" :step="1" :min="-100" :max="100" mr-2 />
<n-input-number v-model:value="saturation" size="small" />
</n-form-item>
<n-form-item label="Brightness" label-placement="left">
<n-slider v-model:value="brightness" :step="1" :min="-100" :max="100" mr-2 />
<n-input-number v-model:value="brightness" size="small" />
</n-form-item>
<n-space>
<n-form-item label="Grayscale" label-placement="left">
<n-checkbox v-model:checked="grayscale" mr-2 />
</n-form-item>
<n-form-item label="Invert" label-placement="left">
<n-checkbox v-model:checked="invert" mr-2 />
</n-form-item>
</n-space>
</c-card>
<c-card>
<template v-for="({ label, parse, placeholder, validation, type }, key) in formats" :key="key">
<input-copyable
@ -100,4 +172,5 @@ function updateColorValue(value: Colord | undefined, omitLabel?: string) {
</n-form-item>
</template>
</c-card>
</div>
</template>