blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

fix(ConfigProvider): failed to set some basic theme vars (#12272)

Browse Source 
* fix(ConfigProvider): failed to set some basic theme vars

* chore: add comments
This commit is contained in:
neverland 2023-09-10 09:35:08 +08:00 committed by GitHub
parent 76e27da360
commit 1eab3cf468
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/vant/src/config-provider/ConfigProvider.tsx
View File

@ -50,10 +50,16 @@ export const configProviderProps = {
export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>;
/** map `gray1` to `gray-1` */
function insertDash(str: string) {
return str.replace(/([a-zA-Z])(\d)/g, '$1-$2');
}
function mapThemeVarsToCSSVars(themeVars: Record<string, Numeric>) {
const cssVars: Record<string, Numeric> = {};
Object.keys(themeVars).forEach((key) => {
cssVars[`--van-${kebabCase(key)}`] = themeVars[key];
const formattedKey = insertDash(kebabCase(key));
cssVars[`--van-${formattedKey}`] = themeVars[key];
});
return cssVars;
}

20
packages/vant/src/config-provider/test/index.spec.tsx
View File

@ -1,8 +1,8 @@
import { ref } from 'vue';
import { ConfigProvider } from '..';
import { ConfigProvider, type ConfigProviderThemeVars } from '..';
import { Icon } from '../../icon';
import { Popup } from '../../popup';
import { later, mount } from '../../../test';
import Popup from '../../popup';
test('should render tag prop correctly', () => {
const wrapper = mount(ConfigProvider, {
@ -60,6 +60,22 @@ test('should apply theme-vars-light in light mode', () => {
);
});
test('should apply basic theme vars correctly', () => {
const wrapper = mount({
render() {
const themeVars: ConfigProviderThemeVars = {
gray1: '#111',
background2: 'red',
};
return <ConfigProvider themeVars={themeVars} />;
},
});
expect(wrapper.element.getAttribute('style')).toEqual(
'--van-gray-1: #111; --van-background-2: red;',
);
});
test('should apply theme-vars-dark in dark mode', () => {
const wrapper = mount({
render() {