vind
v1.0.0
Published
<p align="center"> <a href="https://travis-ci.org/potato4d/vind"><img src="https://travis-ci.org/potato4d/vind.svg?branch=master" alt="Build Status"></a> <a href="https://www.npmjs.com/package/vind"><img src="https://img.shields.io/npm/dm/vind.svg" alt="D
Downloads
41
Readme
vind
Object to Vue style class name object converter.
Usage
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
}
*/
Use in Vue.js
<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>
LICENSE
MIT