generate BEModifier for vue computed property

modifierClasses.js

export const modifierClasses = (vm) => ((root) => {
  if (vm.modifier) {
    const classArray = (typeof vm.modifier === 'string')
      ? new Array(vm.modifier)
      : [...vm.modifier];
    return classArray.map((modifier) => `${root}--${modifier}`);
  }
  return null;
});

export const modifier = (acceptedValues = []) => ({
  type: [String, Array],
  default: null,
  validator: (value) => {
    if (typeof value === 'string') {
      return acceptedValues.includes(value);
    }
    const checkArray = [];
    value.forEach((item) => {
      checkArray.push(acceptedValues.includes(item));
    });
    return checkArray.every((item) => item);
  },
});

export default modifierClasses;

usage.vue

<template>
  <section
    :class="modifierClasses('teaser')"
    class="teaser">
  </section>
</template>

<script>
import { modifierClasses, modifier } from '@/helpers/modifierClasses';

export default {
  name: 'ImageTeaser',
  props: {
    modifier: modifier(['small-left', 'small-right']),
  },
  computed: {
    modifierClasses,
  },
};
</script>