vuestic-ui/dist/types/composables/useBem.d.ts

Vue 3 UI Framework

import { Ref, ComputedRef } from 'vue';
type ClassesObject<Key extends string> = Record<Key, boolean | undefined>;
type ComputedClasses<Key extends string> = ClassesObject<Key> & {
    readonly asObject: ComputedRef<ClassesObject<Key>>;
    readonly asArray: ComputedRef<Key[]>;
    readonly asString: ComputedRef<string>;
};
/**
 * @description creates BEM modifiers based on transferred prefix (base BEM class) & modifiers list.
 * camelCase modifiers names will be transformed to the kebab-case.
 * @param prefix string that classes start with (base BEM class).
 * @param modifiers list of options that will serve as state BEM modifiers.
 * @returns computed classes starting with "prefix" and ending with form state BEM modifier.
 * @example
 *  const result = useBem('va-component', computed(() => pick(props, ['success, noError'])))
 *  // if success & noError are `true`
 *  { ...result }: { 'va-component--success': true, va-component--no-error: true }
 *  result.asObject.value: { 'va-component--success': true, va-component--no-error: true }
 *  result.asArray.value: ['va-component--success', 'va-component--no-error']
 *  result.asString.value: 'va-component--success va-component--no-error'
 */
export declare const useBem: <ModifierKey extends string, Prefix extends string>(prefix: Prefix, modifiers: Record<ModifierKey, boolean | undefined> | Ref<Record<ModifierKey, boolean | undefined>> | (() => Record<ModifierKey, boolean | undefined>)) => ComputedClasses<`${Prefix}--${ModifierKey}`>;
export {};