32 lines
1.0 KiB
TypeScript
32 lines
1.0 KiB
TypeScript
import { computed, provide, unref, type Ref } from 'vue'
|
|
import { type ConfigProviderThemeVars } from '../wd-config-provider/types'
|
|
import { objToStyle } from '../common/util'
|
|
|
|
export const USE_CONFIG_PROVIDER_KEY = '__CONFIG_PROVIDER__'
|
|
|
|
export const kebabCase = (str: string): string => {
|
|
str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase())
|
|
return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase())
|
|
}
|
|
|
|
export const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
|
|
if (!themeVars) return
|
|
const cssVars: Record<string, string> = {}
|
|
Object.keys(themeVars).forEach((key) => {
|
|
cssVars[`--wot-${kebabCase(key)}`] = themeVars[key]
|
|
})
|
|
|
|
return cssVars
|
|
}
|
|
|
|
export function useConfigProvider({ themeVars }: { themeVars: ConfigProviderThemeVars | Ref<ConfigProviderThemeVars> }) {
|
|
const themeStyle = computed(() => {
|
|
const styleObj = mapThemeVarsToCSSVars(unref(themeVars))
|
|
return styleObj ? `${objToStyle(styleObj)}` : ''
|
|
})
|
|
|
|
provide(USE_CONFIG_PROVIDER_KEY, {
|
|
themeStyle
|
|
})
|
|
}
|