@ohu-mobile/core
Version:
70 lines (69 loc) • 3.02 kB
TypeScript
/**
* Simple Class Helper: making class management more convenient, more clean, more easy
* Api Draft
* import { createBemHelper } from './classHelper';
* const helper = createBemHelper({
* prefix: 'ohu-',
* elementJoin: '__',
* modifierJoin: '--',
* });
* // BlockContext
* let btnClass = helper.block('button'); // ['ohu-button']
* btnClass.is('active'); // ['ohu-button', 'is-active']
* btnClass.isNot('active'); // ['ohu-button']
* btnClass.has('icon'); // ['ohu-button', 'has-icon']
* btnClass.without('icon'); // ['ohu-button']
* btnClass.modifer('mixed'); // ['ohu-button', 'ohu-button--mixed']
* btnClass.noModifer('mixed'); // ['ohu-button']
* // bulk add and remove
* btnClass.is('active', 'disabled'); // ['ohu-button', 'is-active', 'is-disabled']
* btnClass.isNot('active', 'disable'); // ['ohu-button']
* btnClass.has(['icon', 'text']); // ['ohu-button', 'has-icon', 'has-text']
* btnClass.without(['icon', 'text']); // ['ohu-button']
* btnClass.is({'loading': true, 'active': false});
* // element
* let btnIconClass = btnClass.element('icon'); // ['ohu-button__icon']
* // block
* let btnBlockClass = btnClass.block('icon'); // ['ohu-button-icon']
*/
export interface BemHelperOptions {
prefix?: string;
elementJoin?: string | ClassTransformFunc;
modifierJoin?: string | ClassTransformFunc;
blockJoin?: string | ClassTransformFunc;
isJoin?: string | ClassTransformFunc;
hasJoin?: string | ClassTransformFunc;
noJoin?: string | ClassTransformFunc;
}
export interface CreateBemHelper {
block(name: string): BlockContext;
}
export type ClassOptions = any[] | Record<string, boolean> | string | false;
type ClassTransformFunc = (...classItem: string[]) => string;
export declare class BlockContext extends Array<string> {
private rootName;
private options?;
baseName: string;
private isJoinTransform;
private noJoinTransform;
private hasJoinTransform;
private blockJoinTransform;
private modiferJoinTransform;
private elementJoinTransform;
constructor(rootName: string, options?: BemHelperOptions | undefined);
private addClassItem;
private removeClassItem;
addClasses(options?: ClassOptions, transformClass?: ClassTransformFunc): this;
removeClasses(options?: ClassOptions, transformClass?: ClassTransformFunc): this;
is(options?: ClassOptions | string, ...items: string[]): this;
isNot(options?: ClassOptions | string, ...items: string[]): this;
no(options?: ClassOptions | string, ...items: string[]): this;
has(options?: ClassOptions | string, ...items: string[]): this;
without(options?: ClassOptions | string, ...items: string[]): this;
modifer(options?: ClassOptions | string, ...items: string[]): this;
noModifer(options?: ClassOptions | string, ...items: string[]): this;
element(name: string): BlockContext;
block(name: string): BlockContext;
}
export declare function createBemHelper(options?: BemHelperOptions): CreateBemHelper;
export {};