refactor(config-provider): change theme-environment prop to theme-environments

demo/documentation/components/configConsumer/enUS/themeEnvironment.md

@@ -1,9 +1,9 @@
-# Theme Environment
+# Theme Environments
 Get current theme environment.
 ```html
 <n-button @click="theme = 'dark'">Dark Theme</n-button>
 <n-button @click="theme = 'light'">Light Theme</n-button>
-<n-config-provider :theme="theme" :theme-environment="env">
+<n-config-provider :theme="theme" :theme-environments="env">
   <n-config-consumer v-slot="{ themeEnvironment }">
     <n-card>
       <n-tag>{{ themeEnvironment }}</n-tag>

demo/documentation/components/configConsumer/zhCN/themeEnvironment.md

@@ -3,7 +3,7 @@
 ```html
 <n-button @click="theme = 'dark'">深色主题</n-button>
 <n-button @click="theme = 'light'">浅色主题</n-button>
-<n-config-provider :theme="theme" :theme-environment="env">
+<n-config-provider :theme="theme" :theme-environments="env">
   <n-config-consumer v-slot="{ themeEnvironment }">
     <n-card>
       <n-tag>{{ themeEnvironment }}</n-tag>

demo/documentation/components/configProvider/enUS/index.md

@@ -13,9 +13,9 @@ transparent
 ## Props
 |Name|Type|Default|Description|
 |-|-|-|-|
+|abstract|`boolean`|`false`|If `n-config-provider` has no wrapper DOM|
 |as|`string`|`'div'`|What tag `n-config-provider` will be rendered as|
 |language|`string`|`'en-US'`|Language of components inside `n-config-provider`|
 |namespace|`string`|`null`|Class name of detached parts of components inside `n-config-provider`|
 |theme|`string`|`null`|Theme name of components inside `n-config-provider`|
-|theme-environment|`{ [themeName: string]: any }`|`null`|An object with some value which can be accessed by `n-config-consumer` or `n-element` inside `n-config-provider`|
-|abstract|`boolean`|`false`|If `n-config-provider` has no wrapper DOM|
+|theme-environments|`{ [themeName: string]: any }`|`null`|An object with some value which can be accessed by `n-config-consumer` or `n-element` inside `n-config-provider`|

demo/documentation/components/configProvider/enUS/themeEnvironment.md

@@ -1,11 +1,11 @@
-# Theme Environment
-Sometimes you may need some component to access some values at specific theme. You can use `theme-environment`.
+# Theme Environments
+Sometimes you may need some component to access some values at specific theme. You can use `theme-environments`.
 ```html
 <div>
   <n-button @click="theme = 'dark'">Dark Theme</n-button>
   <n-button @click="theme = 'light'">Light Theme</n-button>
 </div>
-<n-config-provider :theme="theme" :theme-environment="env">
+<n-config-provider :theme="theme" :theme-environments="env">
   <n-config-consumer v-slot="{ themeEnvironment }">
     <n-card>
       <n-tag>{{ themeEnvironment }}</n-tag>

demo/documentation/components/configProvider/enUS/transparent.md

@@ -5,7 +5,7 @@ If you don't need wrapper DOM, set `abstract` on it. (Note, in this case it can
   <n-button @click="theme = 'dark'">Dark Theme</n-button>
   <n-button @click="theme = 'light'">Light Theme</n-button>
 </div>
-<n-config-provider :theme="theme" :theme-environment="env" abstract>
+<n-config-provider :theme="theme" :theme-environments="env" abstract>
   <n-config-consumer v-slot="{ themeEnvironment }">
     <n-card>
       <n-tag>No Wrapper DOM: {{ themeEnvironment }}</n-tag>

demo/documentation/components/configProvider/zhCN/index.md

@@ -13,10 +13,10 @@ transparent
 ## Props
 |名称|类型|默认值|说明|
 |-|-|-|-|
-|as|`string`|`'div'`|`n-config-provider` 被渲染成什么元素|
+|abstract|`boolean`|`false`|是否不存在 DOM 包裹|
+|as|`string`|`'div'`|`n-config-provider` 被渲染成的元素|
 |language|`string`|`'en-US'`|`n-config-provider` 内部的组件语言|
 |namespace|`string`|`null`|`n-config-provider` 内部组件被卸载于其他位置的 DOM 的类名|
 |theme|`string`|`null`|`n-config-provider` 内部组件的主题|
-|theme-environment|`{ [themeName: string]: any }`|`null`|一个可以被 `n-config-consumer` 或 `n-element` 获取到的主题环境变量，|
-|abstract|`boolean`|`false`|是否不存在 DOM 包裹|
+|theme-environments|`{ [themeName: string]: any }`|`null`|一个可以被 `n-config-consumer` 或 `n-element` 获取到的主题环境变量，|
 

demo/documentation/components/configProvider/zhCN/themeEnvironment.md

@@ -5,7 +5,7 @@
   <n-button @click="theme = 'dark'">深色主题</n-button>
   <n-button @click="theme = 'light'">浅色主题</n-button>
 </div>
-<n-config-provider :theme="theme" :theme-environment="env">
+<n-config-provider :theme="theme" :theme-environments="env">
   <n-config-consumer v-slot="{ themeEnvironment }">
     <n-card>
       <n-tag>{{ themeEnvironment }}</n-tag>

demo/documentation/components/configProvider/zhCN/transparent.md

@@ -5,7 +5,7 @@
   <n-button @click="theme = 'dark'">深色主题</n-button>
   <n-button @click="theme = 'light'">浅色主题</n-button>
 </div>
-<n-config-provider :theme="theme" :theme-environment="env" abstract>
+<n-config-provider :theme="theme" :theme-environments="env" abstract>
   <n-config-consumer v-slot="{ themeEnvironment }">
     <n-card>
       <n-tag>无包裹 DOM：{{ themeEnvironment }}</n-tag>

demo/documentation/theme/enUS/environment.md

@@ -1,11 +1,11 @@
-# Theme Environment
-Sometimes you may need some component to access some values at specific theme. You can use `theme-environment`. Config Consumer & Element have access to theme environment.
+# Theme Environments
+Sometimes you may need some component to access some values at specific theme. You can use `theme-environments`. Config Consumer & Element have access to the current theme environment.
 ```html
 <div>
   <n-button @click="theme = 'dark'">Dark Theme</n-button>
   <n-button @click="theme = 'light'">Light Theme</n-button>
 </div>
-<n-config-provider :theme="theme" :theme-environment="env">
+<n-config-provider :theme="theme" :theme-environments="env">
   <n-card>
     <n-config-consumer v-slot="{ themeEnvironment }">
       <n-tag>{{ themeEnvironment }}</n-tag>

demo/documentation/theme/zhCN/environment.md

@@ -5,7 +5,7 @@
   <n-button @click="theme = 'dark'">深色主题</n-button>
   <n-button @click="theme = 'light'">浅色主题</n-button>
 </div>
-<n-config-provider :theme="theme" :theme-environment="env">
+<n-config-provider :theme="theme" :theme-environments="env">
   <n-card>
     <n-config-consumer v-slot="{ themeEnvironment }">
       <n-tag>{{ themeEnvironment }}</n-tag>

src/ConfigConsumer/src/main.vue

@@ -14,7 +14,7 @@ export default {
       this.$emit('namespace-change', value, oldValue)
     },
     syntheticThemeEnvironment: function (value, oldValue) {
-      this.$emit('theme-environment-change', value, oldValue)
+      this.$emit('theme-environments-change', value, oldValue)
     },
     'NConfigProvider.inheritedLanguage': function (value, oldValue) {
       this.$emit('language-change', value, oldValue)

src/ConfigProvider/src/main.vue

@@ -31,6 +31,10 @@ export default {
       type: Object,
       default: null
     },
+    themeEnvironments: {
+      type: Object,
+      default: null
+    },
     language: {
       validator (value) {
         return ['zh-CN', 'en-US'].includes(value)
@@ -45,8 +49,12 @@ export default {
     }
   },
   computed: {
-    inheritedThemeEnvironment () {
-      return this.themeEnvironment || (this.NConfigProvider ? this.NConfigProvider.inheritedThemeEnvironment : null)
+    adpatedThemeEnvironments () {
+      return this.themeEnvironments || this.themeEnvironment
+    },
+    inheritedThemeEnvironments () {
+      const NConfigProvider = this.NConfigProvider
+      return this.adpatedThemeEnvironments || (NConfigProvider ? NConfigProvider.inheritedThemeEnvironments : null)
     },
     inheritedNamespace () {
       return this.namespace || (this.NConfigProvider ? this.NConfigProvider.inheritedNamespace : null)

src/_mixins/themeable.js

@@ -42,8 +42,8 @@ export default {
     syntheticThemeEnvironment () {
       const NConfigProvider = this.NConfigProvider
       const syntheticTheme = this.syntheticTheme
-      if (syntheticTheme && NConfigProvider && NConfigProvider.inheritedThemeEnvironment) {
-        return NConfigProvider.inheritedThemeEnvironment[syntheticTheme] || null
+      if (syntheticTheme && NConfigProvider && NConfigProvider.inheritedThemeEnvironments) {
+        return NConfigProvider.inheritedThemeEnvironments[syntheticTheme] || null
       }
     }
   }