vue-fluent-ui/dist/src/utils/namespace.d.ts

一个winui3/fluent design风格的vue组件库

/**
 * @fileoverview Vue Fluent UI 组件库 CSS 类名生成工具
 *
 * 这个模块提供了一套简洁高效的 BEM (Block Element Modifier) 风格的 CSS 类名生成工具。
 * 专注于为 Vue Fluent UI 组件库提供统一的命名规范和类名管理。
 *
 * 主要功能：
 * - BEM 风格的类名生成 (Block, Element, Modifier)
 * - 状态类名生成 (is-disabled, is-loading 等)
 * - 统一的命名空间管理
 *
 * @example
 * ```TypeScript
 * // 在组件中使用
 * const ns = useNamespace('button')
 *
 * // 生成各种类名
 * ns.b() // 'vf-button'
 * ns.e('icon') // 'vf-button__icon'
 * ns.m('primary') // 'vf-button--primary'
 * ns.is('disabled') // 'vf-is-disabled'
 * ```
 *
 * @author Vue Fluent UI Team
 * @version 1.0.0
 */
/**
 * 默认的组件库命名空间前缀
 *
 * 用作所有 CSS 类名的前缀，确保组件库的类名不会与其他样式冲突
 *
 * @example 'vf' -> 'vf-button', 'vf-input', 'vf-table' 等
 */
export declare const defaultNamespace = "vf";
/**
 * Vue Fluent UI 命名空间钩子函数
 *
 * 这是组件库的核心工具函数，为指定的组件块提供一整套 BEM 风格的类名生成工具。
 * 简洁高效，专注于最常用的功能，去除了复杂的配置选项以提高性能和易用性。
 *
 * @param block - 组件的块名，如 'button', 'input', 'table', 'modal' 等
 *
 * @returns 包含各种类名生成工具的对象
 *
 * @example
 * ```TypeScript
 * // 在 Button 组件中使用
 * const ns = useNamespace('button')
 *
 * // 在模板中使用
 * <button :class="[
 *   ns.b(),                      // 'vf-button'
 *   ns.m(type),                  // 'vf-button--primary'
 *   ns.is('disabled', disabled), // 'vf-is-disabled' 或 ''
 *   ns.is('loading', loading)    // 'vf-is-loading' 或 ''
 * ]">
 *   <i :class="ns.e('icon')" v-if="icon"></i>  <!-- 'vf-button__icon' -->
 *   <span :class="ns.e('text')">              <!-- 'vf-button__text' -->
 *     <slot></slot>
 *   </span>
 * </button>
 *
 * // 复杂组件示例 (ButtonGroup)
 * const ns = useNamespace('button')
 * ns.b('group') // 'vf-button-group'
 * ns.be('group', 'item') // 'vf-button-group__item'
 * ns.bm('group', 'vertical') // 'vf-button-group--vertical'
 * ns.bem('group', 'item', 'first') // 'vf-button-group__item--first'
 * ```
 */
export declare const useNamespace: (block: string) => {
    /** 当前使用的命名空间字符串 */
    namespace: string;
    /** Block - 块类名生成器 */
    b: (blockSuffix?: string) => string;
    /** Element - 元素类名生成器 */
    e: (element?: string) => string;
    /** Modifier - 修饰符类名生成器 */
    m: (modifier?: string) => string;
    /** Block + Element - 复合块元素类名生成器 */
    be: (blockSuffix?: string, element?: string) => string;
    /** Element + Modifier - 元素修饰符类名生成器 */
    em: (element?: string, modifier?: string) => string;
    /** Block + Modifier - 块修饰符类名生成器 */
    bm: (blockSuffix?: string, modifier?: string) => string;
    /** Block + Element + Modifier - 完整 BEM 类名生成器 */
    bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
    /** State - 状态类名生成器 */
    is: {
        (name: string, state: boolean | undefined): string;
        (name: string): string;
    };
};