dreipol/vue-ui

View on GitHub
src/mixins/bem/index.js

Summary

Maintainability
A
1 hr
Test Coverage
import {
  getComputedConfig,
  getPropsConfig,
  mapFacets,
  createBemClass,
  DEFAULT_OPTIONS,
} from './helpers'

/**
 * Add BEM related helpers to a component
 * @param {string} bemRoot - The block name
 * @param {IBemMixinOptions} [config] - The mixin config
 * @return {object} The vue mixin
 */
export default function bemMixin(bemRoot, config) {
  const options = {
    ...DEFAULT_OPTIONS,
    useProp: true,
    ...config,
  }

  return {
    props: {
      ...getPropsConfig(bemRoot, options),
    },
    computed: {
      ...getComputedConfig(bemRoot, options),
      bemFacets() {
        return mapFacets(this.bemRoot, this.facets, options)
      },
    },
    methods: {
      bemAdd(modifierName, elementName, rootName) {
        const blockName = rootName || this.bemRoot
        return createBemClass({
          blockName,
          modifierName,
          elementName,
          ...options,
        })
      },
      bemIf(condition, trueModifier, falseModifier, elementName = '') {
        return this.bemAdd(
          condition ? trueModifier : falseModifier,
          elementName,
        )
      },
    },
  }
}