/** * @see copy https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-namespace/index.ts */ export const defaultNamespace = 'vben'; const statePrefix = 'is-'; const _bem = ( namespace: string, block: string, blockSuffix: string, element: string, modifier: string, ) => { let cls = `${namespace}-${block}`; if (blockSuffix) { cls += `-${blockSuffix}`; } if (element) { cls += `__${element}`; } if (modifier) { cls += `--${modifier}`; } return cls; }; const is: { (name: string): string; // eslint-disable-next-line @typescript-eslint/unified-signatures (name: string, state: boolean | undefined): string; } = (name: string, ...args: [] | [boolean | undefined]) => { const state = args.length > 0 ? args[0] : true; return name && state ? `${statePrefix}${name}` : ''; }; const useNamespace = (block: string) => { const namespace = defaultNamespace; const b = (blockSuffix = '') => _bem(namespace, block, blockSuffix, '', ''); const e = (element?: string) => element ? _bem(namespace, block, '', element, '') : ''; const m = (modifier?: string) => modifier ? _bem(namespace, block, '', '', modifier) : ''; const be = (blockSuffix?: string, element?: string) => blockSuffix && element ? _bem(namespace, block, blockSuffix, element, '') : ''; const em = (element?: string, modifier?: string) => element && modifier ? _bem(namespace, block, '', element, modifier) : ''; const bm = (blockSuffix?: string, modifier?: string) => blockSuffix && modifier ? _bem(namespace, block, blockSuffix, '', modifier) : ''; const bem = (blockSuffix?: string, element?: string, modifier?: string) => blockSuffix && element && modifier ? _bem(namespace, block, blockSuffix, element, modifier) : ''; // for css var // --el-xxx: value; const cssVar = (object: Record) => { const styles: Record = {}; for (const key in object) { if (object[key]) { styles[`--${namespace}-${key}`] = object[key]; } } return styles; }; // with block const cssVarBlock = (object: Record) => { const styles: Record = {}; for (const key in object) { if (object[key]) { styles[`--${namespace}-${block}-${key}`] = object[key]; } } return styles; }; const cssVarName = (name: string) => `--${namespace}-${name}`; const cssVarBlockName = (name: string) => `--${namespace}-${block}-${name}`; return { b, be, bem, bm, // css cssVar, cssVarBlock, cssVarBlockName, cssVarName, e, em, is, m, namespace, }; }; type UseNamespaceReturn = ReturnType; export type { UseNamespaceReturn }; export { useNamespace };