Object to Vue style class name object converter.
import vind from 'vind'
const obj = {
ghost: true,
color: 'primary'
size: 'large'
}
// Simple use
console.log(vind(obj))
/*
{
'ghost': true,
'primary': true,
'large': true
}
*/
// Custom prefix
console.log(vind(obj, 'is-')) // FLOCSS style
/*
{
'is-ghost': true,
'is-primary': true,
'is-large': true
}
*/
// Custom prefix
console.log(vind(obj, '--')) // BEM Style
/*
{
'--ghost': true,
'--primary': true,
'--large': true
}
*/
<template>
<button :class="buttonClass"></button>
</template>
<script>
import vind from 'vind'
export default {
props: {
ghost: Boolean,
size: String,
color: String
},
computed : {
buttonClass () {
const { ghost, size, button } = this
return vind({ghost, size, button})
}
}
}
</script>
MIT