mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-23 00:06:15 -04:00
refactor: cleaned ColorConverter
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset
Corentin THOMASSET
parent
3e5a26c54c
commit
9f4a257599
1 changed files with 115 additions and 50 deletions
|
|
@ -10,7 +10,7 @@
|
|||
canvas-height="300"
|
||||
hide-inputs
|
||||
mode="rgba"
|
||||
v-model="rgb"
|
||||
v-model="rgbPicker"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" align="center">
|
||||
|
|
@ -18,7 +18,8 @@
|
|||
outlined
|
||||
ref="hex"
|
||||
label="hex"
|
||||
v-model="_hex"
|
||||
:value="hex"
|
||||
@input="(v) => updateColors(v, 'hex')"
|
||||
:rules="rules.hex"
|
||||
dense
|
||||
/>
|
||||
|
|
@ -26,7 +27,8 @@
|
|||
outlined
|
||||
label="rgb"
|
||||
ref="rgb"
|
||||
v-model="_rgb"
|
||||
:value="rgb"
|
||||
@input="(v) => updateColors(v, 'rgb')"
|
||||
:rules="rules.rgb"
|
||||
dense
|
||||
/>
|
||||
|
|
@ -34,17 +36,19 @@
|
|||
outlined
|
||||
label="hsl"
|
||||
ref="hsl"
|
||||
v-model="_hsl"
|
||||
:value="hsl"
|
||||
:rules="rules.hsl"
|
||||
@input="(v) => updateColors(v, 'hsl')"
|
||||
dense
|
||||
/>
|
||||
<v-autocomplete
|
||||
v-model="_keyword"
|
||||
<v-combobox
|
||||
:value="keyword"
|
||||
outlined
|
||||
label="css keyword"
|
||||
ref="keyword"
|
||||
:items="colorsName"
|
||||
:rules="rules.keyword"
|
||||
@change="(v) => updateColors(v, 'keyword')"
|
||||
no-data-text="This is not an authorized color name."
|
||||
dense
|
||||
/>
|
||||
|
|
@ -63,7 +67,7 @@
|
|||
export default {
|
||||
name: "ColorConverter",
|
||||
data: () => ({
|
||||
rgb: {
|
||||
rgbPicker: {
|
||||
"r": 76,
|
||||
"g": 175,
|
||||
"b": 80
|
||||
|
|
@ -87,62 +91,123 @@
|
|||
required,
|
||||
v => !!colors[v] || 'Value should be from the list'
|
||||
]
|
||||
}
|
||||
},
|
||||
hex: '#4CAF50',
|
||||
rgb: undefined,
|
||||
hsl: undefined,
|
||||
keyword: undefined,
|
||||
}),
|
||||
computed: {
|
||||
_hex: {
|
||||
get() {
|
||||
const result = convert.rgb.hex(this.rgb.r, this.rgb.g, this.rgb.b)
|
||||
return `#${result}`
|
||||
},
|
||||
set(value) {
|
||||
if (this.$refs.hex.validate()) {
|
||||
const [r, g, b] = convert.hex.rgb(value.replace(/#/g, ''))
|
||||
this.rgb = {r, g, b}
|
||||
}
|
||||
}
|
||||
mounted() {
|
||||
this.updateColors(this.hex, 'hex');
|
||||
},
|
||||
methods: {
|
||||
setHSL(r, g, b) {
|
||||
const [h, s, l] = convert.rgb.hsl(r, g, b)
|
||||
this.hsl = `hsl(${Math.floor(h)}, ${Math.floor(s)}%, ${Math.floor(l)}%)`;
|
||||
},
|
||||
_rgb: {
|
||||
get() {
|
||||
return `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})`
|
||||
},
|
||||
set(value) {
|
||||
if (this.$refs.rgb.validate()) {
|
||||
setRGB(r, g, b) {
|
||||
this.rgb = `rgb(${r}, ${g}, ${b})`;
|
||||
},
|
||||
setHEX(r, g, b) {
|
||||
const result = convert.rgb.hex(r, g, b);
|
||||
this.hex = `#${result}`
|
||||
},
|
||||
setKeyword(r, g, b) {
|
||||
this.keyword = convert.rgb.keyword(r, g, b);
|
||||
},
|
||||
updateColors(value, fromType) {
|
||||
if (this.$refs[fromType].validate()) {
|
||||
if (fromType === 'rgb') {
|
||||
const [r, g, b] = value.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(v => parseInt(v));
|
||||
this.rgb = {r, g, b}
|
||||
}
|
||||
}
|
||||
},
|
||||
_hsl: {
|
||||
get() {
|
||||
const [h, s, l] = convert.rgb.hsl(this.rgb.r, this.rgb.g, this.rgb.b)
|
||||
return `hsl(${Math.floor(h)}, ${Math.floor(s)}%, ${Math.floor(l)}%)`
|
||||
},
|
||||
set(value) {
|
||||
if (this.$refs.hsl.validate()) {
|
||||
this.rgbPicker = {r, g, b}
|
||||
|
||||
this.setHEX(r, g, b);
|
||||
this.setHSL(r, g, b);
|
||||
this.setKeyword(r, g, b);
|
||||
} else if (fromType === 'hex') {
|
||||
const [r, g, b] = convert.hex.rgb(value.replace(/#/g, ''));
|
||||
this.rgbPicker = {r, g, b}
|
||||
|
||||
this.setRGB(r, g, b);
|
||||
this.setHSL(r, g, b);
|
||||
this.setKeyword(r, g, b);
|
||||
} else if (fromType === 'hsl') {
|
||||
const [h, s, l] = value.match(/^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/).slice(1).map(v => parseInt(v));
|
||||
const [r, g, b] = convert.hsl.rgb(h, s, l)
|
||||
this.rgbPicker = {r, g, b}
|
||||
|
||||
this.rgb = {r, g, b}
|
||||
}
|
||||
}
|
||||
},
|
||||
_keyword: {
|
||||
get() {
|
||||
return convert.rgb.keyword(this.rgb.r, this.rgb.g, this.rgb.b)
|
||||
},
|
||||
set(value) {
|
||||
if (this.$refs.keyword.validate()) {
|
||||
this.setRGB(r, g, b);
|
||||
this.setHEX(r, g, b);
|
||||
this.setKeyword(r, g, b);
|
||||
} else if (fromType === 'keyword') {
|
||||
try {
|
||||
const [r, g, b] = convert.keyword.rgb(value)
|
||||
this.rgb = {r, g, b}
|
||||
const [r, g, b] = convert.keyword.rgb(value);
|
||||
this.rgbPicker = {r, g, b}
|
||||
|
||||
this.setRGB(r, g, b);
|
||||
this.setHEX(r, g, b);
|
||||
this.setHSL(r, g, b);
|
||||
} catch (ignored) {
|
||||
// ignored
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// computed: {
|
||||
// _hex: {
|
||||
// get() {
|
||||
// const result = convert.rgb.hex(this.rgb.r, this.rgb.g, this.rgb.b)
|
||||
// return `#${result}`
|
||||
// },
|
||||
// set(value) {
|
||||
// if (this.$refs.hex.validate()) {
|
||||
// const [r, g, b] = convert.hex.rgb(value.replace(/#/g, ''))
|
||||
// this.rgb = {r, g, b}
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// _rgb: {
|
||||
// get() {
|
||||
// return `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})`
|
||||
// },
|
||||
// set(value) {
|
||||
// if (this.$refs.rgb.validate()) {
|
||||
// const [r, g, b] = value.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(v => parseInt(v));
|
||||
// this.rgb = {r, g, b}
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// _hsl: {
|
||||
// get() {
|
||||
// const [h, s, l] = convert.rgb.hsl(this.rgb.r, this.rgb.g, this.rgb.b)
|
||||
// return `hsl(${Math.floor(h)}, ${Math.floor(s)}%, ${Math.floor(l)}%)`
|
||||
// },
|
||||
// set(value) {
|
||||
// if (this.$refs.hsl.validate()) {
|
||||
// const [h, s, l] = value.match(/^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/).slice(1).map(v => parseInt(v));
|
||||
// const [r, g, b] = convert.hsl.rgb(h, s, l)
|
||||
//
|
||||
// this.rgb = {r, g, b}
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// _keyword: {
|
||||
// get() {
|
||||
// return convert.rgb.keyword(this.rgb.r, this.rgb.g, this.rgb.b)
|
||||
// },
|
||||
// set(value) {
|
||||
// if (this.$refs.keyword.validate()) {
|
||||
// try {
|
||||
// const [r, g, b] = convert.keyword.rgb(value)
|
||||
// this.rgb = {r, g, b}
|
||||
// } catch (ignored) {
|
||||
// // ignored
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue