vuestic-ui/dist/es/src/composables/useBem.js

Vue 3 UI Framework

import { computed, unref } from "vue";
import { i as isDev } from "../utils/env.js";
import { c as camelCaseToKebabCase } from "../utils/text-case.js";
const useBem = (prefix, modifiers) => {
  if (isDev && !prefix) {
    console.warn('You must pass the @param "prefix" to the useBem hook!');
  }
  const modifiersList = computed(() => typeof modifiers === "function" ? modifiers() : unref(modifiers));
  const computedBemClassesObject = computed(() => {
    return Object.entries(unref(modifiersList)).reduce((classesObj, [modifierName, value]) => {
      if (value) {
        classesObj[`${prefix}--${camelCaseToKebabCase(modifierName)}`] = true;
      }
      return classesObj;
    }, {});
  });
  const computedBemClassesArray = computed(() => Object.keys(computedBemClassesObject.value));
  const computedBemClassesString = computed(() => computedBemClassesArray.value.join(" "));
  return new Proxy({}, {
    ownKeys() {
      return Reflect.ownKeys(computedBemClassesObject.value);
    },
    getOwnPropertyDescriptor(_, key) {
      return Reflect.getOwnPropertyDescriptor(computedBemClassesObject.value, key);
    },
    get(_, key, receiver) {
      switch (key) {
        case "asArray":
          return computedBemClassesArray;
        case "asString":
          return computedBemClassesString;
        case "asObject":
          return computedBemClassesObject;
        default:
          return Reflect.get(computedBemClassesObject.value, key, receiver);
      }
    }
  });
};
export {
  useBem as u
};
//# sourceMappingURL=useBem.js.map