useNamespace

一个帮助生成 BEM (Block Element Modifier) 命名规范的工具函数，支持命名空间和 CSS 变量。

@movk-repo/shared/hooks/useNamespace

参数

function useNamespace(
  block: string,
  namespaceOverrides?: Ref<string | undefined>
): {
  namespace: Ref<string>
  b: (blockSuffix?: string) => string
  e: (element?: string) => string
  m: (modifier?: string) => string
  be: (blockSuffix?: string, element?: string) => string
  em: (element?: string, modifier?: string) => string
  bm: (blockSuffix?: string, modifier?: string) => string
  bem: (blockSuffix?: string, element?: string, modifier?: string) => string
  is: {
    (name: string, state: boolean | undefined): string
    (name: string): string
  }
  cssVar: (object: Record<string, string>) => Record<string, string>
  cssVarName: (name: string) => string
  cssVarBlock: (object: Record<string, string>) => Record<string, string>
  cssVarBlockName: (name: string) => string
}

block

BEM 命名规范中的块名称。

• 类型: string
• 描述: 用于生成 BEM 类名的块名称。

namespaceOverrides

可选的命名空间覆盖值。

• 类型: Ref<string | undefined>
• 描述: 用于覆盖默认命名空间的可选值。

示例

import { useNamespace } from '@movk-repo/shared'

const ns = useNamespace('button')

console.log(ns.b()) // 'movk-button'
console.log(ns.e('icon')) // 'movk-button__icon'
console.log(ns.m('primary')) // 'movk-button--primary'
console.log(ns.be('group', 'icon')) // 'movk-button-group__icon'
console.log(ns.em('icon', 'large')) // 'movk-button__icon--large'
console.log(ns.bm('group', 'primary')) // 'movk-button-group--primary'
console.log(ns.bem('group', 'icon', 'large')) // 'movk-button-group__icon--large'
console.log(ns.is('disabled')) // 'is-disabled'
console.log(ns.cssVar({ color: 'red' })) // { '--movk-button-color': 'red' }
console.log(ns.cssVarName('color')) // '--movk-button-color'
console.log(ns.cssVarBlock({ size: 'large' })) // { '--movk-button-size': 'large' }
console.log(ns.cssVarBlockName('size')) // '--movk-button-size'