npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-bem-directive

v1.2.0

Published

BEM computed class name generator for Vue.JS

Downloads

8

Readme

vue-bem-directive

Build Status Coverage Status Codacy Badge

Install

import bem from 'vue-bem-directive';

Vue.use(bem, {
  delimiters: {
    mod: '_',
  },
});

Use

The prop block, non-standard option block or option name of the component will be used as Block part of the class names.

<template>
<div>
  <div v-bem></div>
  <div v-bem:element></div>
  <div v-bem:element="{ mod: true, mod2: false }"></div>
</div>
</template>

<script>
export default {
  name: 'block'
};
</script>

will produce

<div>
  <div class="block"></div>
  <div class="block__element"></div>
  <div class="block__element_mod"></div>
</div>

Configuration

You can pass in an object defining the delimiters and a namespace when registering the directive.

| Option | Description | Default | | ------ | ----------------------------------------------- | ------------ | | ns | Namespace | '' (empty) | | el | Separator between Block and Element part | '__' | | mod | Separator between Element and Modifier part | '_' | | modVal | Separator between Modifier name and value | '-' |

Syntax

The directive can be used with one or multiple arguments or with an expression and can control the output with modifiers.

See spec for all use cases.

Arguments

The first argument is used as Element part. Second and third arguments are Modifier name and value. If the .b modifier is used, the first argument becomes the Block part, second the Element, etc.

    v-bem:element            =>  block__element
    v-bem:element:mod        =>  block__element_mod
    v-bem:element:mod:value  =>  block__element_mod-value
    v-bem:another:element.b  =>  another__element

Expressions

Plugin was created mostly for this use cases.

If the expression is a boolean value, it will control the output of the last argument:

    v-bem="false"          =>
    v-bem:element="true"   =>  block__element
    v-bem:element="false"  =>

If the expression is a string it will be used as dynamic Element / Modifier:

    v-bem="'element'"    =>  block__element
    v-bem:element="'mod'"  =>  block__element_mod

If the expression is an object it will define multiple dynamic Modifier name.

    v-bem:element="{ mod: true, mod2: false }"  =>  block__element_mod
    v-bem:element="{ mod: true, mod2: true }"   =>  block__element_mod block__element_mod2

Using the .e modifier it is possible to specify multiple dynamic Element names:

    v-bem.e="{ element: true, element2: true }"   =>  block__element block__element2
    v-bem.e="{ element: true, element2: false }"  =>  block__element

Modifiers

Modifiers can be set either on the directive name (v-bem) or on a the argument.

| Modifier | Description | Example | | :------- | :----------------------------------------------------------------- | :------------------------------------------------------------ | | .e | Use the expression as Element part(s) | v-bem.e="'element'"'block__element' | | .b | Use the first argument as Block part of the class name | v-bem:yoghurt:element.b'yoghurt__element' | | .f | Used on an Element, also print the class name without modifiers. | v-bem:element:mod.f'block__element block__element_mod' | | .f | Used on Block level, also output the block class name. | v-bem.e.f="{ element: true }"'block block__element' |

Changelog

Detailed changes for each release are documented in the release notes.

License

ISC