Nutritious Pumpkin Meal

    vue-bem-generator

    1.0.3 • Public • Published

    vue-bem-generator

    Generate programmatically BEM classes with a light-weight vue plugin.

    Install

    npm install --save vue-bem-generator
    

    Configuration

    import VueBemGenerator from 'vue-bem-generator';
    
    Vue.use(VueBemGenerator);
    

    Basic usage

    <template>
      <div :class="bem()">
        <div :class="bemElem('content')">
          <button :class="bemElem('button', ['primary', 'big'])">Go Next</button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'main-block',
    };
    </script>
    
    // Renders
    <div class="main-block">
      <div class="main-block__content">
        <button
          class="main-block__button main-block__button--primary main-block__button--big"
        >
          Go Next
        </button>
      </div>
    </div>
    

    Using block name

    <template>
      <div :class="bem()">
        Content
      </div>
    </template>
    
    <script>
    export default {
      name: 'main-block',
    };
    </script>
    
    // Renders
    <div class="main-block">
      Content
    </div>
    

    If don't want to use component name, could be used block.

    <template>
      <div :class="bem()">
        Content
      </div>
    </template>
    
    <script>
    export default {
      name: 'main-block',
      block: 'section-block'
    };
    </script>
    
    // Renders
    <div class="section-block">
      Content
    </div>
    

    Also block and name would be overwritten with bem method.

    <template>
      <div :class="bem('custom-block')">
        Content
      </div>
    </template>
    
    <script>
    export default {
      name: 'main-block',
      block: 'section-block'
    };
    </script>
    
    // Renders
    <div class="custom-block">
      Content
    </div>
    

    Using elements

    <template>
      <div :class="bem()">
        <div :class="bemElem('content')">
          Content
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'main-block',
    };
    </script>
    
    // Renders
    <div class="main-block">
      <div class="main-block__content">
        Content
      </div>
    </div>
    

    Usually you don't need nested elements but it could be used by sending an array.

    <template>
      <div :class="bem()">
        <div :class="bemElem(['content', 'subcontent'])">
          Content
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'main-block',
    };
    </script>
    
    // Renders
    <div class="main-block">
      <div class="main-block__content__subcontent">
        Content
      </div>
    </div>
    

    If you need an element with different block name use bem method instead bemElem (usually that means you need another component but I'm not going to judge you).

    <template>
      <div :class="bem()">
        <div :class="bemElem('content')">
          Content
        </div>
        <div :class="bem('side-block')">
          Content
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'main-block',
    };
    </script>
    
    // Renders
    <div class="main-block">
      <div class="main-block__content">
        Content
      </div>
      <div class="side-block">
        Content
      </div>
    </div>
    

    On elements array, values can be disabled if used falsy values (to enable it again should be used string value).

    <template>
      <div :class="bem()">
        <div :class="bemElem([content, subcontent])">
          Content
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'main-block',
      data() {
        return {
          content: 'content'
          subcontent: false
        };
      }
    };
    </script>
    
    // Renders
    <div class="main-block">
      <div class="main-block__content">
        Content
      </div>
    </div>
    

    Using modifiers

    String or array could be used for simple modifiers.

    <template>
      <div :class="bem()">
        <div :class="bemElem('content')">
          <button :class="bemElem('btn', 'primary')">Update</button>
          <button :class="bemElem('btn', ['danger', 'big'])">Delete</button>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'main-block',
    };
    </script>
    
    // Renders
    <div class="main-block">
      <div class="main-block__content">
        <button class="main-block__btn main-block__btn--primary">Update</button>
        <button class="main-block__btn main-block__btn--danger main-block__btn--big">Delete</button>
      </div>
    </div>
    

    Of course only modifiers could be used.

    <template>
      <div :class="bemMod('fullsize')">
        <div :class="bemElem('head')">
          Head
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'dialog',
    };
    </script>
    
    // Renders
    <div class="dialog dialog--fullsize">
      <div class="dialog__head">
        Head
      </div>
    </div>
    

    In same way like elements, a falsy value can disable a modifier.

    <template>
      <div :class="bemMod([color, bordered])">
        Content
      </div>
    </template>
    
    <script>
    export default {
      name: 'main-block',
      data() {
        return {
          color: 'green',
          bordered: false // Remember to use a string for enable this
        };
      }
    };
    </script>
    
    // Renders
    <div class="main-block main-block-green">
      Content
    </div>
    

    Instead sending string or array for modifiers, send an object allowing you to use hyphenate notation.

    <template>
      <div :class="bemMod({size: 'fullsize', type: 'confirm'})">
        <div :class="bemElem('head')">
          Head
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'dialog',
    };
    </script>
    
    // Renders
    <div class="dialog dialog--size-fullsize dialog--type-confirm">
      <div class="dialog__head">
        Head
      </div>
    </div>
    

    Instead of string on each object element, boolean values can disable/enable them.

    <template>
      <ul :class="bem()">
        <li
          v-for="(item, i) in items"
          :key="i"
          :class="bemElem('item', { selected: item.selected })"
        >
          {{ item.value }}
        </li>
      </ul>
    </template>
    
    <script>
    export default {
      name: 'list',
      data() {
        return {
          items: [
            { value: 'One task', selected: false },
            { value: 'Other task', selected: true }
          ]
        };
      }
    };
    </script>
    
    // Renders
    <ul class="list">
      <li class="list__item">One task</li>
      <li class="list__item list__item--selected">Other task</li>
    </ult>
    

    Api

    bem(block, element, modifiers)

    Defines BEM class with all 3 optional parameters. If no one is sent, block name is set with block or name component value.

    bemElem(element, modifiers)

    Set BEM element and modifiers without overwriting block name.

    bemMod(modifiers)

    Set BEM modifiers without overwriting block name.

    Parameters definition

    Parameter Type Description
    block string Overwrite block and name component value
    element string, array Define class element value
    modifiers string, array, object Define modifiers for current block/element

    Contribution

    All pull requests and suggestions are welcome.

    Keywords

    Install

    npm i vue-bem-generator

    DownloadsWeekly Downloads

    27

    Version

    1.0.3

    License

    none

    Unpacked Size

    15.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • jaes_10