mirror of
https://github.com/CorentinTh/it-tools.git
synced 2024-08-16 08:40:44 +03:00
Merge a25a69e773 into e876d03608
This commit is contained in:
sharevb
GitHub
commit
590dbbf70d
4
components.d.ts
vendored
4
components.d.ts
vendored
@ -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']
|
||||
|
||||
@ -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,40 +88,89 @@ 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>
|
||||
<c-card>
|
||||
<template v-for="({ label, parse, placeholder, validation, type }, key) in formats" :key="key">
|
||||
<input-copyable
|
||||
v-if="type === 'text'"
|
||||
v-model:value="formats[key].value.value"
|
||||
:test-id="`input-${key}`"
|
||||
:label="`${label}:`"
|
||||
label-position="left"
|
||||
label-width="100px"
|
||||
label-align="right"
|
||||
:placeholder="placeholder"
|
||||
:validation="validation"
|
||||
raw-text
|
||||
clearable
|
||||
mt-2
|
||||
@update:value="(v:string) => updateColorValue(parse(v), key)"
|
||||
/>
|
||||
<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 v-else-if="type === 'color-picker'" :label="`${label}:`" label-width="100" label-placement="left" :show-feedback="false">
|
||||
<n-color-picker
|
||||
<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
|
||||
v-if="type === 'text'"
|
||||
v-model:value="formats[key].value.value"
|
||||
placement="bottom-end"
|
||||
:test-id="`input-${key}`"
|
||||
:label="`${label}:`"
|
||||
label-position="left"
|
||||
label-width="100px"
|
||||
label-align="right"
|
||||
:placeholder="placeholder"
|
||||
:validation="validation"
|
||||
raw-text
|
||||
clearable
|
||||
mt-2
|
||||
@update:value="(v:string) => updateColorValue(parse(v), key)"
|
||||
/>
|
||||
</n-form-item>
|
||||
</template>
|
||||
</c-card>
|
||||
|
||||
<n-form-item v-else-if="type === 'color-picker'" :label="`${label}:`" label-width="100" label-placement="left" :show-feedback="false">
|
||||
<n-color-picker
|
||||
v-model:value="formats[key].value.value"
|
||||
placement="bottom-end"
|
||||
@update:value="(v:string) => updateColorValue(parse(v), key)"
|
||||
/>
|
||||
</n-form-item>
|
||||
</template>
|
||||
</c-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user