mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
feat(ConfigProvider): add theme-vars-scope props enable root affects (#12240)
* feat(ConfigProvider): add theme-vars-in-root props enable root affects * feat(ConfigProvider): add theme-vars-in-root props enable root affects * feat(ConfigProvider): add theme-vars-in-root props enable root affects
This commit is contained in:
ShuGang Zhou
GitHub
parent
ee2788796b
commit
5bcd41cfef
@ -26,6 +26,8 @@ const [name, bem] = createNamespace('config-provider');
|
||||
|
||||
export type ConfigProviderTheme = 'light' | 'dark';
|
||||
|
||||
export type ConfigProviderThemeVarsScope = 'local' | 'global';
|
||||
|
||||
export type ConfigProviderProvide = {
|
||||
iconPrefix?: string;
|
||||
};
|
||||
@ -42,6 +44,7 @@ export const configProviderProps = {
|
||||
themeVars: Object as ThemeVars,
|
||||
themeVarsDark: Object as ThemeVars,
|
||||
themeVarsLight: Object as ThemeVars,
|
||||
themeVarsScope: makeStringProp<ConfigProviderThemeVarsScope>('local'),
|
||||
iconPrefix: String,
|
||||
};
|
||||
|
||||
@ -55,6 +58,22 @@ function mapThemeVarsToCSSVars(themeVars: Record<string, Numeric>) {
|
||||
return cssVars;
|
||||
}
|
||||
|
||||
function syncThemeVarsOnRoot(
|
||||
newStyle: Record<string, Numeric> = {},
|
||||
oldStyle: Record<string, Numeric> = {},
|
||||
) {
|
||||
Object.keys(newStyle).forEach((key) => {
|
||||
if (newStyle[key] !== oldStyle[key]) {
|
||||
document.documentElement.style.setProperty(key, newStyle[key] as string);
|
||||
}
|
||||
});
|
||||
Object.keys(oldStyle).forEach((key) => {
|
||||
if (!newStyle[key]) {
|
||||
document.documentElement.style.removeProperty(key);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name,
|
||||
|
||||
@ -93,6 +112,38 @@ export default defineComponent({
|
||||
onActivated(addTheme);
|
||||
onDeactivated(removeTheme);
|
||||
onBeforeUnmount(removeTheme);
|
||||
|
||||
watch(
|
||||
style,
|
||||
(newStyle, oldStyle) => {
|
||||
if (props.themeVarsScope === 'global') {
|
||||
syncThemeVarsOnRoot(
|
||||
newStyle as Record<string, Numeric>,
|
||||
oldStyle as Record<string, Numeric>,
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.themeVarsScope,
|
||||
(newScope, oldStyle) => {
|
||||
if (oldStyle === 'global') {
|
||||
// remove on Root
|
||||
syncThemeVarsOnRoot({}, style.value as Record<string, Numeric>);
|
||||
}
|
||||
if (newScope === 'global') {
|
||||
// add on root
|
||||
syncThemeVarsOnRoot(style.value as Record<string, Numeric>, {});
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
provide(CONFIG_PROVIDER_KEY, props);
|
||||
@ -104,7 +155,10 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
return () => (
|
||||
<props.tag class={bem()} style={style.value}>
|
||||
<props.tag
|
||||
class={bem()}
|
||||
style={props.themeVarsScope === 'local' ? style.value : undefined}
|
||||
>
|
||||
{slots.default?.()}
|
||||
</props.tag>
|
||||
);
|
||||
|
||||
@ -161,7 +161,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
> Tips: ConfigProvider only affects its child components.
|
||||
> Tips: ConfigProvider by default only affects its child components. set to `global` for the entire page to take effect.
|
||||
|
||||
#### Use In TypeScript
|
||||
|
||||
@ -316,6 +316,7 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
|
||||
| theme-vars | Theme variables | _object_ | - |
|
||||
| theme-vars-dark | Theme variables that work in dark mode，will override `theme-vars` | _object_ | - |
|
||||
| theme-vars-light | Theme variables that work in light mode, will override `theme-vars` | _object_ | - |
|
||||
| theme-vars-scope | by default only affects its child components，set to `global` for the entire page to take effect | _ConfigProviderThemeVarsScope_ | `local` |
|
||||
| z-index | Set the z-index of all popup components, this property takes effect globally | _number_ | `2000` |
|
||||
| tag | HTML Tag of root element | _string_ | `div` |
|
||||
| icon-prefix | Icon className prefix | _string_ | `van-icon` |
|
||||
@ -329,5 +330,6 @@ import type {
|
||||
ConfigProviderProps,
|
||||
ConfigProviderTheme,
|
||||
ConfigProviderThemeVars,
|
||||
ConfigProviderThemeVarsScope,
|
||||
} from 'vant';
|
||||
```
|
||||
|
||||
@ -159,7 +159,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
> 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。
|
||||
> 注意：ConfigProvider 默认仅影响它的子组件的样式，不影响全局 root 节点。设置为 `global` 整个页面生效。
|
||||
|
||||
#### 在 TypeScript 中使用
|
||||
|
||||
@ -318,6 +318,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
|
||||
| theme-vars | 自定义主题变量，局部生效 | _object_ | - |
|
||||
| theme-vars-dark | 仅在深色模式下生效的主题变量，优先级高于 `theme-vars` | _object_ | - |
|
||||
| theme-vars-light | 仅在浅色模式下生效的主题变量，优先级高于 `theme-vars` | _object_ | - |
|
||||
| theme-vars-scope | 默认仅影响子组件的样式，设置为 `global` 整个页面生效 | _ConfigProviderThemeVarsScope_ | `local` |
|
||||
| tag | 根节点对应的 HTML 标签名 | _string_ | `div` |
|
||||
| z-index | 设置所有弹窗类组件的 z-index，该属性对全局生效 | _number_ | `2000` |
|
||||
| icon-prefix | 所有图标的类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
|
||||
@ -331,5 +332,6 @@ import type {
|
||||
ConfigProviderProps,
|
||||
ConfigProviderTheme,
|
||||
ConfigProviderThemeVars,
|
||||
ConfigProviderThemeVarsScope,
|
||||
} from 'vant';
|
||||
```
|
||||
|
||||
@ -7,6 +7,7 @@ export { configProviderProps } from './ConfigProvider';
|
||||
export type {
|
||||
ConfigProviderProps,
|
||||
ConfigProviderTheme,
|
||||
ConfigProviderThemeVarsScope,
|
||||
} from './ConfigProvider';
|
||||
export type { ConfigProviderThemeVars } from './types';
|
||||
|
||||
|
||||
@ -78,3 +78,78 @@ test('should apply theme-vars-dark in dark mode', () => {
|
||||
'--van-rate-icon-full-color: green;',
|
||||
);
|
||||
});
|
||||
|
||||
test('should apply theme-vars-scope enable root affects', async () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme="dark"
|
||||
themeVars={{ rateIconFullColor: 'red' }}
|
||||
themeVarsDark={{ rateIconFullColor: 'green' }}
|
||||
themeVarsLight={{ rateIconFullColor: 'blue' }}
|
||||
themeVarsScope="global"
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
expect(document.documentElement.getAttribute('style')).toEqual(
|
||||
'--van-rate-icon-full-color: green;',
|
||||
);
|
||||
expect(
|
||||
wrapper.element.getAttribute('style') ===
|
||||
'--van-rate-icon-full-color: green;',
|
||||
).toBeFalsy();
|
||||
|
||||
await wrapper.setProps({
|
||||
themeVarsScope: 'local',
|
||||
});
|
||||
|
||||
expect(wrapper.element.getAttribute('style')).toEqual(
|
||||
'--van-rate-icon-full-color: green;',
|
||||
);
|
||||
expect(
|
||||
document.documentElement.getAttribute('style') ===
|
||||
'--van-rate-icon-full-color: green;',
|
||||
).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should apply theme-vars-scope enable root affects and sync theme vars', async () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme="dark"
|
||||
themeVars={{ rateIconFullColor: 'red' }}
|
||||
themeVarsScope="global"
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
expect(document.documentElement.getAttribute('style')).toEqual(
|
||||
'--van-rate-icon-full-color: red;',
|
||||
);
|
||||
|
||||
await wrapper.setProps({
|
||||
themeVars: {
|
||||
rateIconFullColor: 'red',
|
||||
buttonPrimaryColor: 'red',
|
||||
},
|
||||
});
|
||||
|
||||
expect(document.documentElement.getAttribute('style')).toEqual(
|
||||
'--van-rate-icon-full-color: red; --van-button-primary-color: red;',
|
||||
);
|
||||
|
||||
await wrapper.setProps({
|
||||
themeVars: {
|
||||
buttonPrimaryColor: 'red',
|
||||
},
|
||||
});
|
||||
|
||||
expect(document.documentElement.getAttribute('style')).toEqual(
|
||||
'--van-button-primary-color: red;',
|
||||
);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user