From 96ca6679b09e8099c6d7ec641941bdcdb12baa05 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 13 Jun 2021 20:22:23 +0800 Subject: [PATCH] feat: add ConfigProvider component (#8854) --- src/config-provider/ConfigProvider.tsx | 41 +++ src/config-provider/README.md | 82 ++++++ src/config-provider/README.zh-CN.md | 82 ++++++ src/config-provider/demo/index.vue | 111 +++++++++ src/config-provider/index.ts | 7 + .../test/__snapshots__/demo.spec.ts.snap | 234 ++++++++++++++++++ src/config-provider/test/demo.spec.ts | 4 + vant.config.js | 8 + 8 files changed, 569 insertions(+) create mode 100644 src/config-provider/ConfigProvider.tsx create mode 100644 src/config-provider/README.md create mode 100644 src/config-provider/README.zh-CN.md create mode 100644 src/config-provider/demo/index.vue create mode 100644 src/config-provider/index.ts create mode 100644 src/config-provider/test/__snapshots__/demo.spec.ts.snap create mode 100644 src/config-provider/test/demo.spec.ts diff --git a/src/config-provider/ConfigProvider.tsx b/src/config-provider/ConfigProvider.tsx new file mode 100644 index 000000000..d1e064cb3 --- /dev/null +++ b/src/config-provider/ConfigProvider.tsx @@ -0,0 +1,41 @@ +import { computed, CSSProperties, defineComponent, PropType } from 'vue'; +import { createNamespace } from '../utils'; + +const [name, bem] = createNamespace('config-provider'); + +export function kebabCase(word: string) { + return word + .replace(/([A-Z])/g, '-$1') + .toLowerCase() + .replace(/^-/, ''); +} + +function mapThemeVarsToCSSVars(themeVars: Record) { + const cssVars: Record = {}; + Object.keys(themeVars).forEach((key) => { + cssVars[`--van-${kebabCase(key)}`] = themeVars[key]; + }); + return cssVars; +} + +export default defineComponent({ + name, + + props: { + themeVars: Object as PropType>, + }, + + setup(props, { slots }) { + const style = computed(() => { + if (props.themeVars) { + return mapThemeVarsToCSSVars(props.themeVars); + } + }); + + return () => ( +
+ {slots.default?.()} +
+ ); + }, +}); diff --git a/src/config-provider/README.md b/src/config-provider/README.md new file mode 100644 index 000000000..a558cbcb8 --- /dev/null +++ b/src/config-provider/README.md @@ -0,0 +1,82 @@ +# ConfigProvider + +### Intro + +Used to config the theme of Vant components. + +### Install + +Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways. + +```js +import { createApp } from 'vue'; +import { ConfigProvider } from 'vant'; + +const app = createApp(); +app.use(ConfigProvider); +``` + +## Usage + +### Custom Theme + +Use `theme-vars` prop to custom theme variables。 + +```html + + + + + + + + +
+ + Submit + +
+ + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const rate = ref(4); + const slider = ref(50); + const switchChecked = ref(true); + + const themeVars = { + rateIconFullColor: '#07c160', + sliderBarHeight: '4px', + sliderButtonWidth: '20px', + sliderButtonHeight: '20px', + sliderActiveBackgroundColor: '#07c160', + buttonPrimaryBorderColor: '#07c160', + buttonPrimaryBackgroundColor: '#07c160', + }; + + return { + rate, + slider, + themeVars, + switchChecked, + }; + }, +}; +``` + +## API + +### Props + +| Attribute | Description | Type | Default | +| ---------- | --------------- | -------- | ------- | +| theme-vars | Theme variables | _object_ | - | diff --git a/src/config-provider/README.zh-CN.md b/src/config-provider/README.zh-CN.md new file mode 100644 index 000000000..35df9be9c --- /dev/null +++ b/src/config-provider/README.zh-CN.md @@ -0,0 +1,82 @@ +# ConfigProvider 全局配置 + +### 介绍 + +用于配置 Vant 组件的主题样式，从 3.1.0 版本开始支持。 + +### 引入 + +通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。 + +```js +import { createApp } from 'vue'; +import { ConfigProvider } from 'vant'; + +const app = createApp(); +app.use(ConfigProvider); +``` + +## 代码演示 + +### 自定义主题 + +通过 `theme-vars` 属性来自定义主题变量。 + +```html + + + + + + + + +
+ + 提交 + +
+ + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const rate = ref(4); + const slider = ref(50); + const switchChecked = ref(true); + + const themeVars = { + rateIconFullColor: '#07c160', + sliderBarHeight: '4px', + sliderButtonWidth: '20px', + sliderButtonHeight: '20px', + sliderActiveBackgroundColor: '#07c160', + buttonPrimaryBorderColor: '#07c160', + buttonPrimaryBackgroundColor: '#07c160', + }; + + return { + rate, + slider, + themeVars, + switchChecked, + }; + }, +}; +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| ---------- | -------------- | -------- | ------ | +| theme-vars | 自定义主题变量 | _object_ | - | diff --git a/src/config-provider/demo/index.vue b/src/config-provider/demo/index.vue new file mode 100644 index 000000000..5d3d05440 --- /dev/null +++ b/src/config-provider/demo/index.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/src/config-provider/index.ts b/src/config-provider/index.ts new file mode 100644 index 000000000..345ac3689 --- /dev/null +++ b/src/config-provider/index.ts @@ -0,0 +1,7 @@ +import { withInstall } from '../utils'; +import _ConfigProvider from './ConfigProvider'; + +const ConfigProvider = withInstall(_ConfigProvider); + +export default ConfigProvider; +export { ConfigProvider }; diff --git a/src/config-provider/test/__snapshots__/demo.spec.ts.snap b/src/config-provider/test/__snapshots__/demo.spec.ts.snap new file mode 100644 index 000000000..f88ff0310 --- /dev/null +++ b/src/config-provider/test/__snapshots__/demo.spec.ts.snap @@ -0,0 +1,234 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render demo and match snapshot 1`] = ` +
+
+
+
+ + Rate + +
+
+
+
+
+ + + + + +
+
+
+
+
+
+
+ + Slider + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + Rate + +
+
+
+
+
+ + + + + +
+
+
+
+
+
+
+ + Slider + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+`; diff --git a/src/config-provider/test/demo.spec.ts b/src/config-provider/test/demo.spec.ts new file mode 100644 index 000000000..c0e0c95b9 --- /dev/null +++ b/src/config-provider/test/demo.spec.ts @@ -0,0 +1,4 @@ +import Demo from '../demo/index.vue'; +import { snapshotDemo } from '../../../test/demo'; + +snapshotDemo(Demo); diff --git a/vant.config.js b/vant.config.js index db769cde3..64c157119 100644 --- a/vant.config.js +++ b/vant.config.js @@ -119,6 +119,10 @@ module.exports = { path: 'cell', title: 'Cell 单元格', }, + { + path: 'config-provider', + title: 'ConfigProvider 全局配置', + }, { path: 'icon', title: 'Icon 图标', @@ -520,6 +524,10 @@ module.exports = { path: 'cell', title: 'Cell', }, + { + path: 'config-provider', + title: 'ConfigProvider', + }, { path: 'icon', title: 'Icon',