mirror of
https://github.com/CorentinTh/it-tools.git
synced 2024-09-11 13:37:53 +03:00
Merge a25a69e773
into e876d03608
This commit is contained in:
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']
|
MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
|
||||||
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
|
MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
|
||||||
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
|
NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
|
||||||
|
NCheckbox: typeof import('naive-ui')['NCheckbox']
|
||||||
NCode: typeof import('naive-ui')['NCode']
|
NCode: typeof import('naive-ui')['NCode']
|
||||||
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
|
NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
|
||||||
|
NColorPicker: typeof import('naive-ui')['NColorPicker']
|
||||||
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
|
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
|
||||||
NDivider: typeof import('naive-ui')['NDivider']
|
NDivider: typeof import('naive-ui')['NDivider']
|
||||||
NEllipsis: typeof import('naive-ui')['NEllipsis']
|
NEllipsis: typeof import('naive-ui')['NEllipsis']
|
||||||
@ -144,6 +146,8 @@ declare module '@vue/runtime-core' {
|
|||||||
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
|
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
|
||||||
NMenu: typeof import('naive-ui')['NMenu']
|
NMenu: typeof import('naive-ui')['NMenu']
|
||||||
NScrollbar: typeof import('naive-ui')['NScrollbar']
|
NScrollbar: typeof import('naive-ui')['NScrollbar']
|
||||||
|
NSlider: typeof import('naive-ui')['NSlider']
|
||||||
|
NSpace: typeof import('naive-ui')['NSpace']
|
||||||
NSpin: typeof import('naive-ui')['NSpin']
|
NSpin: typeof import('naive-ui')['NSpin']
|
||||||
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
|
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']
|
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 hwbPlugin from 'colord/plugins/hwb';
|
||||||
import namesPlugin from 'colord/plugins/names';
|
import namesPlugin from 'colord/plugins/names';
|
||||||
import lchPlugin from 'colord/plugins/lch';
|
import lchPlugin from 'colord/plugins/lch';
|
||||||
|
import xyzPlugin from 'colord/plugins/xyz';
|
||||||
|
import labPlugin from 'colord/plugins/lab';
|
||||||
import { buildColorFormat } from './color-converter.models';
|
import { buildColorFormat } from './color-converter.models';
|
||||||
|
|
||||||
extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin]);
|
extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin, xyzPlugin, labPlugin]);
|
||||||
|
|
||||||
const formats = {
|
const formats = {
|
||||||
picker: buildColorFormat({
|
picker: buildColorFormat({
|
||||||
@ -46,6 +48,18 @@ const formats = {
|
|||||||
format: (v: Colord) => v.toCmykString(),
|
format: (v: Colord) => v.toCmykString(),
|
||||||
placeholder: 'e.g. cmyk(0, 100%, 100%, 0)',
|
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({
|
name: buildColorFormat({
|
||||||
label: 'name',
|
label: 'name',
|
||||||
format: (v: Colord) => v.toName({ closest: true }) ?? 'Unknown',
|
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) {
|
function updateColorValue(value: Colord | undefined, omitLabel?: string) {
|
||||||
if (value === undefined) {
|
if (value === undefined) {
|
||||||
@ -64,40 +88,89 @@ function updateColorValue(value: Colord | undefined, omitLabel?: string) {
|
|||||||
return;
|
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) => {
|
_.forEach(formats, ({ value: valueRef, format }, key) => {
|
||||||
if (key !== omitLabel) {
|
if (key !== omitLabel) {
|
||||||
valueRef.value = format(value);
|
valueRef.value = format(correctedValue);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<c-card>
|
<div>
|
||||||
<template v-for="({ label, parse, placeholder, validation, type }, key) in formats" :key="key">
|
<c-card title="Transformations">
|
||||||
<input-copyable
|
<n-form-item label="Saturation" label-placement="left">
|
||||||
v-if="type === 'text'"
|
<n-slider v-model:value="saturation" :step="1" :min="-100" :max="100" mr-2 />
|
||||||
v-model:value="formats[key].value.value"
|
<n-input-number v-model:value="saturation" size="small" />
|
||||||
:test-id="`input-${key}`"
|
</n-form-item>
|
||||||
: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 v-else-if="type === 'color-picker'" :label="`${label}:`" label-width="100" label-placement="left" :show-feedback="false">
|
<n-form-item label="Brightness" label-placement="left">
|
||||||
<n-color-picker
|
<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"
|
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)"
|
@update:value="(v:string) => updateColorValue(parse(v), key)"
|
||||||
/>
|
/>
|
||||||
</n-form-item>
|
|
||||||
</template>
|
<n-form-item v-else-if="type === 'color-picker'" :label="`${label}:`" label-width="100" label-placement="left" :show-feedback="false">
|
||||||
</c-card>
|
<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>
|
</template>
|
||||||
|
Loading…
Reference in New Issue
Block a user