Hi I'm trying to create an Vue app which takes one key color and creates a color palette from the key color. 2 colors lighter and 2 colors darker. I have an input field where you enter a hex code and it will then generate the other 4 colours. I'm using the library chroma.js to generate darker/brighter colors and the syntax looks like this:
chroma('red').darken(.4)
And this is the input field
<input class="w-100 pv3 pl4 input-reset ba b--black-20" @keyup="getColor(colorValue)" v-model="colorValue" placeholder="0AD674" >
This is my for loop
<li v-for="item in items">
{{ item.colorProperty }}
{{ item.intensity }}
{{ colorValue }}
</li>
And my data inside the Vue instance.
data () {
return {
colorValue: '4e35e1',
items: [
{
intensity: 3,
colorProperty: 'darken'
},
{
intensity: 1,
colorProperty: 'darken'
},
{
intensity: 0,
colorProperty: ''
},
{
intensity: 1,
colorProperty: 'brighten'
},
{
intensity: 3,
colorProperty: 'brighten'
}
],
}
}
All of this generates something like
3 darken 4e35e1
1 darken 4e35e1
0 4e35e1
1 brighten 4e35e1
3 brighten 4e35e1
Which is cool but ideally I would use the data values to feed the Chroma.js syntax like
transformColor: function(value, property, intensity) {
return chroma(value).property(intensity)
}
But obviously that doesn't work. What's the best way to achieve this?
I realise this is a open ended question. But I have had troubles figuring out whether I should use a filter or a component or a computed function. I tried most things but none of them would work. I come from a jQuery background so this new data-centric approach is proving to be difficult to wrap my head around. I'm grateful for any pointers!
Solved by using map()
computed: {
colors() {
return this.items.map((item) => {
var colorHex = chroma(this.colorValue)[item.colorProperty](item.intensity).toString();
var colorName = _.kebabCase(namer(colorHex).ntc[0].name);
return {colorHex, colorName}
});
}
}