chore: some docs refined & unify themed properties code style

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

@@ -24,16 +24,16 @@ after-select
 |blur-after-select|`boolean`|`false`||
 |clear-after-select|`boolean`|`false`||
 
-### AutoCompleteOption Type
-|Property|Type|Description|
+### AutoCompleteOption Properties
+|Name|Type|Description|
 |-|-|-|
 |label|`string`||
 |value|`string \| number`|Should be unique in options.|
 |disabled|`boolean`||
 |render|`function`||
 
-### AutoCompleteOptionGroup Type
-|Property|Type|Description|
+### AutoCompleteOptionGroup Properties
+|Name|Type|Description|
 |-|-|-|
 |type|`'group'`||
 |name|`string`||

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

@@ -25,16 +25,16 @@ after-select
 |blur-after-select|`boolean`|`false`||
 |clear-after-select|`boolean`|`false`||
 
-### AutoCompleteOption Type
-|属性|类型|介绍|
+### AutoCompleteOption Properties
+|名称|类型|介绍|
 |-|-|-|
 |label|`string`||
 |value|`string \| number`|Should be unique in options.|
 |disabled|`boolean`||
 |render|`function`||
 
-### AutoCompleteOptionGroup Type
-|属性|类型|介绍|
+### AutoCompleteOptionGroup Properties
+|名称|类型|介绍|
 |-|-|-|
 |type|`'group'`||
 |name|`string`||

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

@@ -13,7 +13,12 @@ basic
 |`finish`|`(option: LoadingBarOption) => void`||
 |`error`|`(option: LoadingBarOption) => void`||
 
-#### LoadingBarOption Type
-|Property|Type|Description|
+#### $NLoadingBar Properties
+|Name|Type|Description|
 |-|-|-|
-|theme|`'light' \| 'dark'`||
+|theme|`'light' \| 'dark'`|If set, it will be used as the global theme of `$NLoadingBar`. If not set, the global theme of `$NLoadingBar` will depends on where it is called. (It works nearly the same as <n-a to="n-message#about-theme">$NMessage's theme</n-a>, and in most cases you don't need to set the property.)|
+
+#### LoadingBarOption Properties
+|Name|Type|Description|
+|-|-|-|
+|theme|`'light' \| 'dark'`|If set it will be used as the theme of loading bar. If not the global theme of `$NLoadingBar` will be used.|

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

@@ -13,7 +13,12 @@ basic
 |`finish`|`(option: LoadingBarOption) => void`||
 |`error`|`(option: LoadingBarOption) => void`||
 
-#### LoadingBarOption Type
-|属性|类型|说明|
+#### $NLoadingBar Properties
+|名称|类型|说明|
 |-|-|-|
-|theme|`'light' \| 'dark'`||
+|theme|`'light' \| 'dark'`|如果设定会将 `$NLoadingBar` 的全局主题设为该主题，如果没有设定则全局主题则取决于调用位置（它工作起来和 <n-a to="n-message#about-theme">$NMessage 的主题</n-a>比较像，在大多数情况下你不用为此而操心）|
+
+#### LoadingBarOption Properties
+|名称|类型|说明|
+|-|-|-|
+|theme|`'light' \| 'dark'`|如果设定会将该加载条的主题设为该主题，如果没有设定则会使用 `$NLoadingBar` 的全局主题|

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

@@ -20,7 +20,7 @@ about-theme
 |error|`(message: string, option?: MessageOption) => MessageEnvironment`||
 |loading|`(message: string, option?: MessageOption) => MessageEnvironment`||
 
-### MessageOption Type
+### MessageOption Properties
 |Name|Type|Description|
 |-|-|-|
 |content|`string \|(() => VNode \| Array<VNode>)`|Can be a render function|

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

@@ -20,7 +20,7 @@ about-theme
 |error|`(content: string, option?: MessageOption) => MessageEnvironment`||
 |loading|`(content: string, option?: MessageOption) => MessageEnvironment`||
 
-### MessageOption Type
+### MessageOption Properties
 |名称|类型|说明|
 |-|-|-|
 |content|`string \| (() => VNode \| Array<VNode>)`|可以是 render 函数|
@@ -33,7 +33,7 @@ about-theme
 #### MessageEnvironment Properties
 |名称|类型|说明|
 |-|-|-|
-|content|`string \| (() => VNode \| Array<VNode>)`|可以是 render 函数n|
+|content|`string \| (() => VNode \| Array<VNode>)`|可以是 render 函数|
 |icon|`string \| (() => VNode)`|可以是 render 函数|
 |type|`'info' \| 'success' \| 'warning' \| 'error' \| 'loading'`||
 |onHide|`function`||

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

@@ -27,10 +27,10 @@ duration
 |-|-|-|-|
 |scrollable|`boolean`|`false`||
 
-### NotificationOption Type
+### NotificationOption Properties
 |Name|Type|Default|Description|
 |-|-|-|-|
-|theme|`'light' \| 'dark'`|`null`||
+|theme|`'light' \| 'dark'`|`null`|If set it will be used as the theme of notification. (It works nearly the same as <n-a to="n-message#about-theme">$NMessage's theme</n-a>, and in most cases you don't need to set the property.)|
 |avatar|`() => VNode \| Array<VNode>`|`null`|Can be a render function|
 |title|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be a render function|
 |description|`string \| (() => VNode \| Array<VNode>)`|`null`|Can be a render function|
@@ -49,6 +49,7 @@ Properties of NofiticationEnvironment Instance can be dynamically set.
 
 |Name|Type|Description|
 |-|-|-|
+|theme|`'light' \| 'dark'`|If set it will be used as the theme of notification. (It works nearly the same as <n-a to="n-message#about-theme">$NMessage's theme</n-a>, and in most cases you don't need to set the property.)|
 |avatar|`() => VNode \| Array<VNode>`|Can be a render function|
 |title|`string \| (() => VNode \| Array<VNode>)`|Can be a render function|
 |description|`string \| (() => VNode \| Array<VNode>)`|Can be a render function|

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

@@ -29,11 +29,11 @@ duration
 |scrollable|`boolean`|`false`||
 
 ### NotificationOption API
-#### NotificationOption Type
+#### NotificationOption Properties
 
 |名称|类型|默认值|说明|
 |-|-|-|-|
-|theme|`'light' \| 'dark'`|`null`||
+|theme|`'light' \| 'dark'`|`null`|如果设定会将该通知的主题设为该主题，如果没有设定则全局主题则取决于调用位置（它工作起来和 <n-a to="n-message#about-theme">$NMessage 的主题</n-a>比较像，在大多数情况下你不用为此而操心）|
 |avatar|`() => VNode \| Array<VNode>`|`null`|可以是 render 函数|
 |title|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
 |description|`string \| (() => VNode \| Array<VNode>)`|`null`|可以是 render 函数|
@@ -52,6 +52,7 @@ NofiticationEnvironment 实例的属性可以被动态改变。
 
 |名称|类型|说明|
 |-|-|-|
+|theme|`'light' \| 'dark'`|如果设定会将该通知的主题设为该主题，如果没有设定则全局主题则取决于调用位置（它工作起来和 <n-a to="n-message#about-theme">$NMessage 的主题</n-a>比较像，在大多数情况下你不用为此而操心）|
 |avatar|`() => VNode \| Array<VNode>`|可以是 render 函数|
 |title|`string \| (() => VNode \| Array<VNode>)`|可以是 render 函数|
 |description|`string \| (() => VNode \| Array<VNode>)`|可以是 render 函数|

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

@@ -40,17 +40,16 @@ action
 |tag|`boolean`|`false`|Whether it can create new option, should be used with `filterable`.|
 |on-create|`(label: string) => SelectOption`|`label => ({ label, value: label })`|How to create a option when you input a string to create a option. Note that `filter` will be applied to the created option too. And make sure the value of the created option is not the same as any other option.|
 
-## API
-### SelectOption Type
-|Property|Type|Description|
+### SelectOption Properties
+|Name|Type|Description|
 |-|-|-|
 |label|`string`||
 |value|`string \| number`|Should be unique in options.|
 |disabled|`boolean`||
 |render|`function`||
 
-### SelectOptionGroup Type
-|Property|Type|Description|
+### SelectOptionGroup Properties
+|Name|Type|Description|
 |-|-|-|
 |type|`'group'`||
 |name|`string`||

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

@@ -40,18 +40,16 @@ action
 |tag|`boolean`|`false`|是否可以创建新的选项，需要和 `filterable` 一起使用|
 |on-create|`(label: string) => SelectOption`|`label => ({ label, value: label })`|在输入内容时如何创建一个选项。注意 `filter` 对这个生成的选项同样会生效。同时确保这个选项和其他选项的 `value` 不要有重复|
 
-
-## API
-### SelectOption Type
-|属性|类型|说明|
+### SelectOption Properties
+|名称|类型|说明|
 |-|-|-|
 |label|`string`||
 |value|`string \| number`|在选项中应该是唯一的|
 |disabled|`boolean`||
 |render|`function`||
 
-### SelectOptionGroup Type
-|属性|类型|说明|
+### SelectOptionGroup Properties
+|名称|类型|说明|
 |-|-|-|
 |type|`'group'`||
 |name|`string`||

src/LoadingBar/src/LoadingBarPlugin.js

@@ -1,50 +1,60 @@
 import NLoadingBar from './LoadingBar.vue'
 
-export default {
+const LoadingBar = {
   Vue: null,
-  theme: null,
+  theme: null, // theme is exposed to user
+  inheritedTheme: null,
   loadingBarInstance: null,
+  handleThemeChange (theme) {
+    LoadingBar.inheritedTheme = theme
+    const syntheticTheme = LoadingBar.theme || LoadingBar.inheritedTheme
+    if (LoadingBar.loadingBarInstance) {
+      LoadingBar.loadingBarInstance.inheritedTheme = syntheticTheme
+    }
+  },
   finishCallback () {
-    if (this.loadingBarInstance) {
-      this.loadingBarInstance.$el.remove()
-      this.loadingBarInstance.$destroy()
-      this.loadingBarInstance = null
+    if (LoadingBar.loadingBarInstance) {
+      LoadingBar.loadingBarInstance.$el.remove()
+      LoadingBar.loadingBarInstance.$destroy()
+      LoadingBar.loadingBarInstance = null
     }
   },
   start ({ theme } = { theme: null }) {
-    if (!this.loadingBarInstance) {
-      this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
-      document.body.appendChild(this.loadingBarInstance.$el)
+    if (!LoadingBar.loadingBarInstance) {
+      LoadingBar.loadingBarInstance = new LoadingBar.Vue(NLoadingBar).$mount()
+      document.body.appendChild(LoadingBar.loadingBarInstance.$el)
     }
-    this.loadingBarInstance.inheritedTheme = this.theme
-    this.loadingBarInstance.theme = theme
-    this.loadingBarInstance.start()
+    LoadingBar.loadingBarInstance.inheritedTheme = LoadingBar.theme || LoadingBar.inheritedTheme
+    LoadingBar.loadingBarInstance.theme = theme
+    LoadingBar.loadingBarInstance.start()
   },
   error ({ theme } = { theme: null }) {
-    if (!this.loadingBarInstance) {
-      this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
-      document.body.appendChild(this.loadingBarInstance.$el)
+    if (!LoadingBar.loadingBarInstance) {
+      LoadingBar.loadingBarInstance = new LoadingBar.Vue(NLoadingBar).$mount()
+      document.body.appendChild(LoadingBar.loadingBarInstance.$el)
     }
-    this.loadingBarInstance.inheritedTheme = this.theme
-    this.loadingBarInstance.theme = theme
-    this.loadingBarInstance.error(this.finishCallback.bind(this))
+    LoadingBar.loadingBarInstance.inheritedTheme = LoadingBar.theme || LoadingBar.inheritedTheme
+    LoadingBar.loadingBarInstance.theme = theme
+    LoadingBar.loadingBarInstance.error(LoadingBar.finishCallback.bind(LoadingBar))
   },
   finish ({ theme } = { theme: null }) {
-    if (!this.loadingBarInstance) {
-      this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
-      document.body.appendChild(this.loadingBarInstance.$el)
+    if (!LoadingBar.loadingBarInstance) {
+      LoadingBar.loadingBarInstance = new LoadingBar.Vue(NLoadingBar).$mount()
+      document.body.appendChild(LoadingBar.loadingBarInstance.$el)
     }
-    this.loadingBarInstance.inheritedTheme = this.theme
-    this.loadingBarInstance.theme = theme
-    this.loadingBarInstance.finish(this.finishCallback.bind(this))
+    LoadingBar.loadingBarInstance.inheritedTheme = LoadingBar.theme || LoadingBar.inheritedTheme
+    LoadingBar.loadingBarInstance.theme = theme
+    LoadingBar.loadingBarInstance.finish(LoadingBar.finishCallback.bind(LoadingBar))
   },
   update ({ percent, theme } = { theme: null }) {
-    if (!this.loadingBarInstance) {
-      this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
-      document.body.appendChild(this.loadingBarInstance.$el)
+    if (!LoadingBar.loadingBarInstance) {
+      LoadingBar.loadingBarInstance = new LoadingBar.Vue(NLoadingBar).$mount()
+      document.body.appendChild(LoadingBar.loadingBarInstance.$el)
     }
-    this.loadingBarInstance.inheritedTheme = this.theme
-    this.loadingBarInstance.theme = theme
-    this.loadingBarInstance.update(percent)
+    LoadingBar.loadingBarInstance.inheritedTheme = LoadingBar.theme || LoadingBar.inheritedTheme
+    LoadingBar.loadingBarInstance.theme = theme
+    LoadingBar.loadingBarInstance.update(percent)
   }
 }
+
+export default LoadingBar

src/Message/src/MessagePlugin.js

@@ -50,7 +50,7 @@ function updateMessage (instance, content, option) {
   instance.type = option.type
   instance.content = content
   instance.theme = option.theme
-  instance.inheritedTheme = Message.theme
+  instance.inheritedTheme = option.inheritedTheme
 }
 
 function unmountMessage (instance) {
@@ -73,37 +73,43 @@ const Message = {
     top: 20
   },
   theme: null,
+  inheritedTheme: null,
   instances: new Set(),
   handleThemeChange (theme) {
-    for (const instance of this.instances) {
-      instance.inheritedTheme = theme
+    Message.inheritedTheme = theme
+    const syntheticTheme = Message.theme || Message.inheritedTheme
+    for (const instance of Message.instances) {
+      instance.inheritedTheme = syntheticTheme
     }
   },
   notice (content, option) {
     mountMessageContainer()
-    const instance = createMessage(content, option)
+    const syntheticTheme = Message.theme || Message.inheritedTheme
+    const instance = createMessage(content, Object.assign(option, {
+      inheritedTheme: syntheticTheme
+    }))
     mountMessage(instance)
     return instance
   },
   info (content, option = {}) {
     option.type = 'info'
-    return this.notice(content, option)
+    return Message.notice(content, option)
   },
   success (content, option = {}) {
     option.type = 'success'
-    return this.notice(content, option)
+    return Message.notice(content, option)
   },
   warning (content, option = {}) {
     option.type = 'warning'
-    return this.notice(content, option)
+    return Message.notice(content, option)
   },
   error (content, option = {}) {
     option.type = 'error'
-    return this.notice(content, option)
+    return Message.notice(content, option)
   },
   loading (content, option = {}) {
     option.type = 'loading'
-    return this.notice(content, option)
+    return Message.notice(content, option)
   }
 }
 

src/Notification/src/NotificationPlugin.js

@@ -84,6 +84,7 @@ function updateNotification (instance, option) {
 
 const Notification = {
   theme: null,
+  inheritedTheme: null,
   instances: new Set(),
   container: null,
   _scrollable: false,
@@ -98,19 +99,22 @@ const Notification = {
   },
   handleThemeChange (theme) {
     const container = Notification.container
+    Notification.inheritedTheme = theme
+    const syntheticTheme = Notification.theme || Notification.inheritedTheme
     if (container) {
-      container.theme = theme
+      container.theme = syntheticTheme
     }
     Notification.instances.forEach(instance => {
-      instance.inheritedTheme = theme
+      instance.inheritedTheme = syntheticTheme
     })
   },
   open (options, type = 'default') {
     mountNotificationContainer()
-    if (Notification.container && Notification.theme) {
-      Notification.container.theme = Notification.theme
+    const syntheticTheme = Notification.theme || Notification.inheritedTheme
+    if (Notification.container && syntheticTheme) {
+      Notification.container.theme = syntheticTheme
     }
-    const notificationOptions = { type, ...options, theme: options.theme || Notification.theme }
+    const notificationOptions = { type, ...options, inheritedTheme: syntheticTheme }
     const instance = createNotification(notificationOptions)
     mountNotification(instance)
     return instance

src/_utils/naive/installThemeAwarableProperty.js

@@ -8,7 +8,7 @@ function createThemeChangeHandler (property) {
 
 function getTheme (componentInstance, property, configProviderToWatchThemeChange) {
   let cursor = componentInstance
-  let lastThemedConfigProvider = null
+  let outermostThemedConfigProvider = null
   let theme = null
   while (cursor) {
     const name = cursor.$options.name
@@ -16,7 +16,7 @@ function getTheme (componentInstance, property, configProviderToWatchThemeChange
       while (cursor) {
         if (cursor.syntheticTheme) {
           theme = cursor.syntheticTheme
-          lastThemedConfigProvider = cursor
+          outermostThemedConfigProvider = cursor
         }
         cursor = cursor.NConfigProvider
       }
@@ -24,13 +24,13 @@ function getTheme (componentInstance, property, configProviderToWatchThemeChange
       cursor = cursor.$parent
     }
   }
-  if (lastThemedConfigProvider && property && configProviderToWatchThemeChange) {
-    if (!configProviderToWatchThemeChange.has(lastThemedConfigProvider)) {
-      lastThemedConfigProvider.$watch('syntheticTheme', createThemeChangeHandler(property))
-      configProviderToWatchThemeChange.add(lastThemedConfigProvider)
+  if (outermostThemedConfigProvider && property && configProviderToWatchThemeChange) {
+    if (!configProviderToWatchThemeChange.has(outermostThemedConfigProvider)) {
+      outermostThemedConfigProvider.$watch('syntheticTheme', createThemeChangeHandler(property))
+      configProviderToWatchThemeChange.add(outermostThemedConfigProvider)
     }
   }
-  return { theme, configProvider: lastThemedConfigProvider }
+  return { theme, configProvider: outermostThemedConfigProvider }
 }
 
 function install (Vue, property, name) {
@@ -44,7 +44,7 @@ function install (Vue, property, name) {
       apply (target, thisArg, argumentsList) {
         if (thisArg instanceof Vue) {
           const { theme } = getTheme(thisArg, property, configProviderToWatchThemeChange)
-          property.theme = theme
+          property.inheritedTheme = theme
         }
         return target.bind(thisArg)(...argumentsList)
       }