@dr/bem-helper
Advanced tools
Comparing version 1.0.0 to 1.1.0
@@ -37,3 +37,3 @@ function BEM (...args) { | ||
function modifierReducer (result, [modifier, value]) { | ||
if (value !== false) { | ||
if (value !== false || value !== undefined || value !== null) { | ||
result.push(`--${modifier}${(value !== true) ? `-${value}` : "" }`); | ||
@@ -40,0 +40,0 @@ } |
{ | ||
"name": "@dr/bem-helper", | ||
"version": "1.0.0", | ||
"version": "1.1.0", | ||
"description": "Helper to create BEM-style classnames", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -13,6 +13,12 @@ # bem-helper | ||
``` | ||
```js | ||
var bem = require("@dr/bem-helper"); | ||
var className = bem("dr-module", "list"); | ||
// className === "dr-module__list" | ||
var className = bem("dr-module", { loaded: true }); | ||
// className === "dr-module dr-module--loaded" | ||
// Get all applicable combinations for an element: | ||
@@ -50,5 +56,6 @@ var className = bem("dr-module", "list", { expanded: true }); | ||
var boundSingle = bem.single.bind(null, block); | ||
// Get a single scoped classname for an element: | ||
var className = bem.single("list", { expanded: true }); | ||
var className = boundSingle("list", { expanded: true }); | ||
// className === "dr-module__list--expanded" | ||
@@ -62,5 +69,11 @@ | ||
A function that creates all applicable combinations of classnames for an element in BEM-style. | ||
#### Arguments | ||
* `block` (string) - The block element for the classname. | ||
* additional arguments (string|object) - Optional. Elements are described by strings and modifiers are described by objects: keys are use as the modifier names and boolean values trigger whether the modifier is active, and any other type is used as a value; `{expanded: true}` > `"--expanded"`, `{rating: 3}` > `"--rating-3"`. | ||
* `...args` (string|object) - Optional. Elements are described by strings and modifiers are described by objects: keys are use as the modifier names and boolean values trigger whether the modifier is active, and any other type is used as a value; `{expanded: true}` > `"--expanded"`, `{rating: 3}` > `"--rating-3"`. | ||
### bem.single | ||
Same as `bem` above - but it only returns a single classname. |
4114
76