refactor(message): use n-message-provider

demo/Entry.vue

@@ -5,17 +5,19 @@
     :theme="theme"
     :language="lang"
   >
-    <n-layout position="absolute" class="root-layout">
-      <doc-header
-        :lang="lang"
-        :items="flattenedItems"
-        :env="env"
-        @lang-change="handleLangChange"
-      />
-      <n-layout class="home-layout" style="top: 64px; overflow: hidden;" position="absolute">
-        <router-view />
+    <n-message-provider>
+      <n-layout position="absolute" class="root-layout">
+        <doc-header
+          :lang="lang"
+          :items="flattenedItems"
+          :env="env"
+          @lang-change="handleLangChange"
+        />
+        <n-layout class="home-layout" style="top: 64px; overflow: hidden;" position="absolute">
+          <router-view />
+        </n-layout>
       </n-layout>
-    </n-layout>
+    </n-message-provider>
   </n-config-provider>
 </template>
 

demo/documentation/components/message/zhCN/about-theme.demo.md

@@ -1,7 +1,6 @@
 # 关于主题的注意事项
-如果你不明确指明主题，被创建信息的主题会与对应 `n-message-controller` 的主题一致。
+如果你不明确指明主题，被创建信息的主题会与对应 `n-message-provider` 的主题一致。
 ```html
-<n-message-controller ref="message" />
 <n-button @click="info" style="margin: 0 8px 12px 0;">
   你可以在 Message 还在的时候切换主题
 </n-button>
@@ -12,15 +11,16 @@
 
 ```js
 export default {
+  inject: ['message'],
   methods: {
     info () {
-      this.$refs.message.info(
+      this.message.info(
         "I don't know why nobody told you how to unfold your love",
         { duration: 5000 }
       )
     },
     loading () {
-      this.$refs.message.info(
+      this.message.info(
         "I don't know why nobody told you how to unfold your love",
         { duration: 5000, theme: 'dark' }
       )

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

@@ -1,6 +1,5 @@
 # 基础用法
 ```html
-<n-message-controller ref="message" />
 <n-button @click="info">
   信息
 </n-button>
@@ -19,29 +18,30 @@
 ```
 ```js
 export default {
+  inject: ['message'],
   methods: {
     info () {
-      this.$refs.message.info(
+      this.message.info(
         "I don't know why nobody told you how to unfold your love"
       )
     },
     error () {
-      this.$refs.message.error(
+      this.message.error(
         "Once upon a time you dressed so fine"
       )
     },
     warning () {
-      this.$refs.message.warning(
+      this.message.warning(
         "How many roads must a man walk down"
       )
     },
     success () {
-      this.$refs.message.success(
+      this.message.success(
         "'Cause you walked hand in hand With another man in my place"
       )
     },
     loading () {
-      this.$refs.message.loading(
+      this.message.loading(
         "If I were you, I will realize that I love you more than any other guy"
       )
     }

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

@@ -1,7 +1,6 @@
 # 可关闭
 设定 `closable` 使 Message 可以通过点击关闭。
 ```html
-<n-message-controller ref="message" />
 <n-button @click="createMessage">
   打开信息
 </n-button>
@@ -9,9 +8,10 @@
 
 ```js
 export default {
+  inject: ['message'],
   methods: {
     createMessage() {
-      this.$refs.message.info(
+      this.message.info(
         "I don't know why nobody told you how to unfold your love",
         {
           closable: true,

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

@@ -1,6 +1,5 @@
 # 图标
 ```html
-<n-message-controller ref="message" />
 <n-button @click="createMessage">
   漏斗图标
 </n-button>
@@ -10,9 +9,10 @@ import { h } from 'vue'
 import mdHourglass from 'naive-ui/lib/icons/md-hourglass'
 
 export default {
+  inject: ['message'],
   methods: {
     createMessage() {
-      this.$refs.message.warning("I never needed anybody's help in any way", {
+      this.message.warning("I never needed anybody's help in any way", {
         icon: () => h(mdHourglass)
       })
     }

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

@@ -1,5 +1,10 @@
 # 信息 Message
 （一般是）从浏览器顶部降下来的神谕。
+
+<n-alert title="注意" type="warning">
+  以下所有例子需要 <n-text code>n-message-provider</n-text> 的包裹，并在组件中注入 <n-text code>message</n-text>。
+</n-alert>
+
 ## 演示
 ```demo
 basic
@@ -12,8 +17,13 @@ about-theme
 ```
 
 ## API
-### MessageController API
-#### MessageController Methods
+### MessageProvider Props
+|名称|类型|默认值|说明|
+|-|-|-|-|
+|to|`string \| HTMLElement`|`'body'`|Message 容器节点的位置|
+
+### MessageProvider Injection API
+#### MessageProvider Injection Methods
 |名称|类型|说明|
 |-|-|-|
 |info|`(content: string, option?: MessageOption) => MessageReactive`||

demo/documentation/components/message/zhCN/manually-close.demo.md

@@ -1,6 +1,5 @@
 # 手动关闭
 ```html
-<n-message-controller ref="message" />
 <n-button @click="createMessage">
   打开
 </n-button>
@@ -10,6 +9,7 @@
 ```
 ```js
 export default {
+  inject: ['message'],
   data () {
     return {
       message: null
@@ -21,7 +21,7 @@ export default {
   methods: {
     createMessage () {
       if (!this.message) {
-        this.message = this.$refs.message.info('3 * 3 * 4 * 4 * ?', {
+        this.message = this.message.info('3 * 3 * 4 * 4 * ?', {
           duration: 0
         })
       }

demo/documentation/components/message/zhCN/modify-content.demo.md

@@ -1,6 +1,5 @@
 # 修改创建的信息
 ```html
-<n-message-controller ref="message" />
 <n-button @click="createMessage">
   先开个信息
 </n-button>
@@ -9,6 +8,7 @@
 ```
 ```js
 export default {
+  inject: ['message'],
   data () {
     return {
       count: 0,
@@ -36,7 +36,7 @@ export default {
       }
     },
     createMessage () {
-      this.message = this.$refs.message[this.type](
+      this.message = this.message[this.type](
         '' + this.count, { duration: 10000 }
       )
     }

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

@@ -1,7 +1,6 @@
 # 时间
 设定 Message 的持续时间。
 ```html
-<n-message-controller ref="message" />
 <n-button @click="createMessage">
   持续 5 秒
 </n-button>
@@ -9,9 +8,10 @@
 
 ```js
 export default {
+  inject: ['message'],
   methods: {
     createMessage() {
-      this.$refs.message.info(
+      this.message.info(
         "I don't know why nobody told you how to unfold your love",
         { duration: 5000 }
       )

src/message/index.js

@@ -1,7 +1,7 @@
-import MessageController from './src/MessageController'
+import MessagePrivider from './src/MessageProvider'
 
-MessageController.install = function (app, naive) {
-  app.component(naive.componentPrefix + MessageController.name, MessageController)
+MessagePrivider.install = function (app, naive) {
+  app.component(naive.componentPrefix + MessagePrivider.name, MessagePrivider)
 }
 
-export default MessageController
+export default MessagePrivider

src/message/src/MessageEnvironment.js

@@ -1,5 +1,5 @@
 
-import { h, Transition, Teleport } from 'vue'
+import { h, Transition } from 'vue'
 import NMessage from './Message.js'
 import props from './message-props'
 
@@ -81,31 +81,25 @@ export default {
     }
   },
   render () {
-    return h(Teleport, {
-      to: '.n-message-container'
-    }, {
-      default: () => [
-        h(
-          Transition, {
-            name: 'message-transition',
-            appear: true,
-            onAfterLeave: this.handleAfterLeave
-          },
-          {
-            default: () => [
-              this.show
-                ? h(NMessage, {
-                  theme: this.theme,
-                  content: this.content,
-                  type: this.type,
-                  icon: this.icon,
-                  closable: this.closable,
-                  onClose: this.handleClose
-                }) : null
-            ]
-          }
-        )
-      ]
-    })
+    return h(
+      Transition, {
+        name: 'message-transition',
+        appear: true,
+        onAfterLeave: this.handleAfterLeave
+      },
+      {
+        default: () => [
+          this.show
+            ? h(NMessage, {
+              theme: this.theme,
+              content: this.content,
+              type: this.type,
+              icon: this.icon,
+              closable: this.closable,
+              onClose: this.handleClose
+            }) : null
+        ]
+      }
+    )
   }
 }

src/message/src/MessageProvider.js

@@ -1,41 +1,44 @@
-import { Fragment, ref, h, nextTick, toRef } from 'vue'
+import { Fragment, Teleport, ref, h, reactive } from 'vue'
 import createId from '../../_utils/vue/createId'
 import MessageEnvironment from './MessageEnvironment.js'
-import { useContainer } from '../../_utils/composition'
 import omit from '../../_utils/vue/omit'
 
 export default {
-  name: 'MessageController',
+  name: 'MessageProvider',
   props: {
     to: {
       type: [String, Object],
       default: 'body'
     }
   },
-  setup (props) {
-    const messageListRef = ref([])
-    const [mountContainerIfNotExist, unmountContainerIfEmpty] = useContainer(
-      toRef(props, 'to'),
-      ref('n-message-container')
-    )
+  provide () {
     return {
-      messageList: messageListRef,
-      mountContainerIfNotExist,
-      unmountContainerIfEmpty
+      message: {
+        info: this.info,
+        success: this.success,
+        warning: this.warning,
+        error: this.error,
+        loading: this.loading
+      }
+    }
+  },
+  setup () {
+    const messageListRef = ref([])
+    return {
+      messageList: messageListRef
     }
   },
   methods: {
     create (content, options = {}) {
-      this.mountContainerIfNotExist()
       const key = createId()
-      const messageReactive = {
+      const messageReactive = reactive({
         ...options,
         content,
         key,
         destroy: () => {
           this.$refs[`n-message-${key}`].hide()
         }
-      }
+      })
       this.messageList.push(messageReactive)
       return messageReactive
     },
@@ -57,18 +60,27 @@ export default {
         messageList.findIndex(message => message.key === key),
         1
       )
-      nextTick(() => {
-        this.unmountContainerIfEmpty()
-      })
     }
   },
   render () {
-    return h(Fragment, null, this.messageList.map(
-      message => h(MessageEnvironment, {
-        ref: `n-message-${message.key}`,
-        ...omit(message, ['destroy']),
-        onInternalAfterLeave: this.handleAfterLeave
-      }))
+    return h(Fragment, null,
+      [
+        this.messageList.length ? h(Teleport, {
+          to: this.to
+        }, [
+          h('div', {
+            class: 'n-message-container',
+            key: 'n-message-container'
+          }, this.messageList.map(
+            message => h(MessageEnvironment, {
+              ref: `n-message-${message.key}`,
+              ...omit(message, ['destroy']),
+              onInternalAfterLeave: this.handleAfterLeave
+            })
+          ))
+        ]) : null,
+        this.$slots.default()
+      ]
     )
   }
 }