element-plus/packages/hooks/use-namespace/index.ts

73 lines
2.0 KiB
TypeScript
Raw Normal View History

import { computed, unref } from 'vue'
2022-01-15 18:12:48 +08:00
import { useGlobalConfig } from '../use-global-config'
const defaultNamespace = 'el'
const statePrefix = 'is-'
const _bem = (
namespace: string,
block: string,
blockSuffix: string,
element: string,
modifier: string
) => {
let cls = `${namespace}-${block}`
if (blockSuffix) {
cls += `-${blockSuffix}`
2022-01-15 18:12:48 +08:00
}
if (element) {
cls += `__${element}`
}
if (modifier) {
cls += `--${modifier}`
}
return cls
}
2022-01-15 18:12:48 +08:00
export const useNamespace = (block: string) => {
const globalConfig = useGlobalConfig('namespace')
const namespace = computed(() => globalConfig.value || defaultNamespace)
2022-01-15 18:12:48 +08:00
const b = (blockSuffix = '') =>
_bem(unref(namespace), block, blockSuffix, '', '')
2022-01-15 18:12:48 +08:00
const e = (element?: string) =>
element ? _bem(unref(namespace), block, '', element, '') : ''
2022-01-15 18:12:48 +08:00
const m = (modifier?: string) =>
modifier ? _bem(unref(namespace), block, '', '', modifier) : ''
2022-01-15 18:12:48 +08:00
const be = (blockSuffix?: string, element?: string) =>
blockSuffix && element
? _bem(unref(namespace), block, blockSuffix, element, '')
2022-01-15 18:12:48 +08:00
: ''
const em = (element?: string, modifier?: string) =>
element && modifier
? _bem(unref(namespace), block, '', element, modifier)
: ''
const bm = (blockSuffix?: string, modifier?: string) =>
blockSuffix && modifier
? _bem(unref(namespace), block, blockSuffix, '', modifier)
2022-01-15 18:12:48 +08:00
: ''
const bem = (blockSuffix?: string, element?: string, modifier?: string) =>
blockSuffix && element && modifier
? _bem(unref(namespace), block, blockSuffix, element, modifier)
2022-01-15 18:12:48 +08:00
: ''
const is: {
(name: string, state: boolean | undefined): string
(name: string): string
} = (name: string, ...args: [boolean | undefined] | []) => {
const state = args.length >= 1 ? args[0]! : true
return name && state ? `${statePrefix}${name}` : ''
}
2022-01-15 18:12:48 +08:00
return {
namespace,
b,
e,
m,
be,
em,
bm,
2022-01-15 18:12:48 +08:00
bem,
is,
2022-01-15 18:12:48 +08:00
}
}
export type UseNamespaceReturn = ReturnType<typeof useNamespace>