docs: update some message api

demo/SiteHeader.vue

@@ -74,6 +74,7 @@
 <script>
 import { computed, ref } from 'vue'
 import version from '../src/version'
+import { useMessage } from '../src'
 import { i18n } from './utils/composables'
 import {
   useThemeName,
@@ -92,8 +93,8 @@ function match (pattern, string) {
 
 export default {
   name: 'SiteHeader',
-  inject: ['message'],
   setup () {
+    const message = useMessage()
     const { t } = i18n({
       'zh-CN': {
         dark: '深色',
@@ -164,6 +165,7 @@ export default {
     ])
     return {
       t,
+      message,
       searchInputValue: ref(''),
       version,
       dev: __DEV__,

demo/pages/docs/theme/zhCN/read-theme-debug.demo.md

@@ -20,7 +20,6 @@
 
 ```js
 export default {
-  inject: ['message'],
   data () {
     return {
       theme: 'dark'
@@ -28,7 +27,7 @@ export default {
   },
   methods: {
     handleThemeChange (theme) {
-      this.message.info(theme)
+      console.log(theme)
     }
   }
 }

src/checkbox/demos/enUS/event.demo.md

@@ -19,23 +19,26 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const checkedRef = ref(false)
+    const citiesRef = ref(null)
+    const message = useMessage()
     return {
-      checked: false,
-      cities: null
-    }
-  },
-  methods: {
-    handleCheckedChange (checked) {
-      this.checked = checked
-      this.message.info(JSON.stringify(checked))
-    },
-    handleUpdateValue (value) {
-      this.cities = value
-      this.message.info(JSON.stringify(value))
+      checked: checkedRef,
+      cities: citiesRef,
+      handleCheckedChange (checked) {
+        checkedRef.value = checked
+        message.info(JSON.stringify(checked))
+      },
+      handleUpdateValue (value) {
+        citiesRef.value = value
+        message.info(JSON.stringify(value))
+      }
     }
   }
-}
+})
 ```

src/checkbox/demos/zhCN/event.demo.md

@@ -19,23 +19,26 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const checkedRef = ref(false)
+    const citiesRef = ref(null)
+    const message = useMessage()
     return {
-      checked: false,
-      cities: null
-    }
-  },
-  methods: {
-    handleCheckedChange (checked) {
-      this.checked = checked
-      this.message.info(JSON.stringify(checked))
-    },
-    handleUpdateValue (value) {
-      this.cities = value
-      this.message.info(JSON.stringify(value))
+      checked: checkedRef,
+      cities: citiesRef,
+      handleCheckedChange (checked) {
+        checkedRef.value = checked
+        message.info(JSON.stringify(checked))
+      },
+      handleUpdateValue (value) {
+        citiesRef.value = value
+        message.info(JSON.stringify(value))
+      }
     }
   }
-}
+})
 ```

src/collapse/demos/enUS/item-header-click.demo.md

@@ -2,7 +2,7 @@
 
 ```html
 <n-collapse
-  v-model:expandedNames="activeNames"
+  v-model:expandedNames="expandedNames"
   @item-header-click="handleItemHeaderClick"
 >
   <n-collapse-item name="1">
@@ -21,17 +21,18 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      activeNames: []
-    }
-  },
-  methods: {
-    handleItemHeaderClick ({ name, expanded }) {
-      this.message.info(`Name: ${name}, Expanded: ${expanded}`)
+      expandedNames: ref([]),
+      handleItemHeaderClick ({ name, expanded }) {
+        message.info(`Name: ${name}, Expanded: ${expanded}`)
+      }
     }
   }
-}
+})
 ```

src/collapse/demos/zhCN/item-header-click.demo.md

@@ -2,7 +2,7 @@
 
 ```html
 <n-collapse
-  v-model:expandedNames="activeNames"
+  v-model:expandedNames="expandedNames"
   @item-header-click="handleItemHeaderClick"
 >
   <n-collapse-item name="1">
@@ -21,17 +21,18 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      activeNames: []
-    }
-  },
-  methods: {
-    handleItemHeaderClick ({ name, expanded }) {
-      this.message.info(`Name: ${name}, Expanded: ${expanded}`)
+      expandedNames: ref([]),
+      handleItemHeaderClick ({ name, expanded }) {
+        message.info(`Name: ${name}, Expanded: ${expanded}`)
+      }
     }
   }
-}
+})
 ```

src/config-consumer/demos/enUS/basic.demo.md

@@ -14,10 +14,9 @@ Get current namespace.
 
 ```js
 export default {
-  inject: ['message'],
   methods: {
     handleNamespaceChange (value, oldValue) {
-      this.message.info('Namespace Change: `' + value + '` namespace')
+      console.log('Namespace Change: `' + value + '` namespace')
     }
   }
 }

src/config-consumer/demos/zhCN/basic.demo.md

@@ -14,10 +14,9 @@
 
 ```js
 export default {
-  inject: ['message'],
   methods: {
     handleNamespaceChange (value, oldValue) {
-      this.message.info('Namespace Change: `' + value + '` namespace')
+      console.log('Namespace Change: `' + value + '` namespace')
     }
   }
 }

src/input-number/demos/enUS/event.demo.md

@@ -6,25 +6,30 @@ Blur & change events are exposed.
 <n-input-number
   v-model:value="value"
   @update:value="handleChange"
+  @focus="handleFocus"
   @blur="handleBlur"
 />
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      value: 0
-    }
-  },
-  methods: {
-    handleChange (v) {
-      this.message.info(`value: ${v}`)
-    },
-    handleBlur (v) {
-      this.message.info('blur: ' + v)
+      value: ref(0),
+      handleChange (v) {
+        message.info(`update:value(${v})`)
+      },
+      handleBlur () {
+        message.info('blur')
+      },
+      handleFocus () {
+        message.info('focus')
+      }
     }
   }
-}
+})
 ```

src/input-number/demos/zhCN/event.demo.md

@@ -10,23 +10,24 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      value: 0
-    }
-  },
-  methods: {
-    handleChange (v) {
-      this.message.info(`update:value(${v})`)
-    },
-    handleBlur () {
-      this.message.info('blur')
-    },
-    handleFocus () {
-      this.message.info('focus')
+      value: ref(0),
+      handleChange (v) {
+        message.info(`update:value(${v})`)
+      },
+      handleBlur () {
+        message.info('blur')
+      },
+      handleFocus () {
+        message.info('focus')
+      }
     }
   }
-}
+})
 ```

src/popconfirm/demos/enUS/basic.demo.md

@@ -13,15 +13,20 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handlePositiveClick () {
-      this.message.success('Yes')
-    },
-    handleNegativeClick () {
-      this.message.warning('No')
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    return {
+      handlePositiveClick () {
+        message.info('Yes')
+      },
+      handleNegativeClick () {
+        message.info('No')
+      }
     }
   }
-}
+})
 ```

src/popconfirm/demos/enUS/event.demo.md

@@ -16,15 +16,20 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handlePositiveClick () {
-      this.message.info('positive click')
-    },
-    handleNegativeClick () {
-      this.message.info('negative click')
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    return {
+      handlePositiveClick () {
+        message.info('positive click')
+      },
+      handleNegativeClick () {
+        message.info('negative click')
+      }
     }
   }
-}
+})
 ```

src/popconfirm/demos/zhCN/basic.demo.md

@@ -13,15 +13,20 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handlePositiveClick () {
-      this.message.success('是的')
-    },
-    handleNegativeClick () {
-      this.message.warning('并不')
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    return {
+      handlePositiveClick () {
+        message.info('是的')
+      },
+      handleNegativeClick () {
+        message.info('并不')
+      }
     }
   }
-}
+})
 ```

src/popconfirm/demos/zhCN/event.demo.md

@@ -15,15 +15,20 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handlePositiveClick () {
-      this.message.info('positive click')
-    },
-    handleNegativeClick () {
-      this.message.info('negative click')
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    return {
+      handlePositiveClick () {
+        message.info('positive click')
+      },
+      handleNegativeClick () {
+        message.info('negative click')
+      }
     }
   }
-}
+})
 ```

src/switch/demos/enUS/event.demo.md

@@ -5,17 +5,18 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      active: false
-    }
-  },
-  methods: {
-    handleChange (value) {
-      this.message.info(`Update value: ${value}`)
+      active: ref(false),
+      handleChange (value) {
+        message.info(`Update value: ${value}`)
+      }
     }
   }
-}
+})
 ```

src/switch/demos/zhCN/event.demo.md

@@ -5,17 +5,18 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      active: false
-    }
-  },
-  methods: {
-    handleChange (value) {
-      this.message.info(`Update value: ${value}`)
+      active: ref(false),
+      handleChange (value) {
+        message.info(`Update value: ${value}`)
+      }
     }
   }
-}
+})
 ```

src/tag/demos/enUS/closable.demo.md

@@ -13,12 +13,17 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handleClose () {
-      this.message.info('tag close')
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    return {
+      handleClose () {
+        message.info('tag close')
+      }
     }
   }
-}
+})
 ```

src/tag/demos/enUS/disabled.demo.md

@@ -20,17 +20,18 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handleClose () {
-      this.message.info('tag close')
-    }
-  },
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      disabled: true
+      disabled: ref(true),
+      handleClose () {
+        message.info('tag close')
+      }
     }
   }
-}
+})
 ```

src/tag/demos/enUS/shape.demo.md

@@ -13,12 +13,17 @@ Round tag looks like a capsule.
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handleClose () {
-      this.message.info('tag close')
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    return {
+      handleClose () {
+        message.info('tag close')
+      }
     }
   }
-}
+})
 ```

src/tag/demos/enUS/size.demo.md

@@ -11,12 +11,17 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handleClose () {
-      this.message.info('tag close')
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    return {
+      handleClose () {
+        message.info('tag close')
+      }
     }
   }
-}
+})
 ```

src/tag/demos/zhCN/closable.demo.md

@@ -11,12 +11,17 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handleClose () {
-      this.message.info('tag close')
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    return {
+      handleClose () {
+        message.info('tag close')
+      }
     }
   }
-}
+})
 ```

src/tag/demos/zhCN/disabled.demo.md

@@ -20,17 +20,18 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handleClose () {
-      this.message.info('tag close')
-    }
-  },
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
     return {
-      disabled: true
+      disabled: ref(true),
+      handleClose () {
+        message.info('tag close')
+      }
     }
   }
-}
+})
 ```

src/tag/demos/zhCN/shape.demo.md

@@ -15,12 +15,17 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handleClose () {
-      this.message.info('tag close')
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    return {
+      handleClose () {
+        message.info('tag close')
+      }
     }
   }
-}
+})
 ```

src/tag/demos/zhCN/size.demo.md

@@ -11,12 +11,17 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  methods: {
-    handleClose () {
-      this.message.info('tag close')
+import { defineComponent } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    return {
+      handleClose () {
+        message.info('tag close')
+      }
     }
   }
-}
+})
 ```

src/upload/demos/enUS/controlled.demo.md

@@ -14,60 +14,62 @@ Example is only a joke.
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    const fileListRef = ref([
+      {
+        id: 'url-test',
+        name: 'URL Test',
+        url: 'http://www.mocky.io/v2/5e4bafc63100007100d8b70f',
+        status: 'finished'
+      },
+      {
+        id: 'text-message',
+        name: 'Your text messages',
+        status: 'error'
+      },
+      {
+        id: 'notification',
+        name: 'You notifications',
+        status: 'finished'
+      },
+      {
+        id: 'contact',
+        name: 'You contact info',
+        status: 'finished'
+      }
+    ])
     return {
-      fileList: [
-        {
-          id: 'url-test',
-          name: 'URL Test',
-          url: 'http://www.mocky.io/v2/5e4bafc63100007100d8b70f',
-          status: 'finished'
-        },
-        {
-          id: 'text-message',
-          name: 'Your text messages',
-          status: 'error'
-        },
-        {
-          id: 'notification',
-          name: 'You notifications',
-          status: 'finished'
-        },
-        {
-          id: 'contact',
-          name: 'You contact info',
-          status: 'finished'
+      fileList: fileListRef,
+      handleUploadChange ({ fileList }) {
+        fileListRef.value = fileList
+      },
+      handleRemove ({ file, fileList }) {
+        if (file.id === 'text-message') {
+          message.info("Oops... It's now uploaded. Okay, delete it.")
+        } else if (file.id === 'notification') {
+          message.error('No, this is useful for us. Removal not allowed.')
+          return false
+        } else if (file.id === 'contact') {
+          message.loading(
+            "Don' know whether it is useful for us, let me ask the server",
+            {
+              duration: 4000
+            }
+          )
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              message.error("Oh no, they said you can't delete it too!")
+              resolve(false)
+            }, 4000)
+          })
         }
-      ]
-    }
-  },
-  methods: {
-    handleUploadChange ({ fileList }) {
-      this.fileList = fileList
-    },
-    handleRemove ({ file, fileList }) {
-      if (file.id === 'text-message') {
-        this.message.info("Oops... It's now uploaded. Okay, delete it.")
-      } else if (file.id === 'notification') {
-        this.message.error('No, this is useful for us. Removal not allowed.')
-        return false
-      } else if (file.id === 'contact') {
-        this.message.loading(
-          "Don' know whether it is useful for us, let me ask the server",
-          {
-            duration: 4000
-          }
-        )
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            this.message.error("Oh no, they said you can't delete it too!")
-            resolve(false)
-          }, 4000)
-        })
       }
     }
   }
-}
+})
 ```

src/upload/demos/zhCN/controlled.demo.md

@@ -14,57 +14,59 @@
 ```
 
 ```js
-export default {
-  inject: ['message'],
-  data () {
+import { defineComponent, ref } from 'vue'
+import { useMessage } from 'naive-ui'
+
+export default defineComponent({
+  setup () {
+    const message = useMessage()
+    const fileListRef = ref([
+      {
+        id: 'url-test',
+        name: 'URL 测试',
+        url: 'http://www.mocky.io/v2/5e4bafc63100007100d8b70f',
+        status: 'finished'
+      },
+      {
+        id: 'text-message',
+        name: '你的短信',
+        status: 'error'
+      },
+      {
+        id: 'notification',
+        name: '你的通知',
+        status: 'finished'
+      },
+      {
+        id: 'contact',
+        name: '你的联系人信息',
+        status: 'finished'
+      }
+    ])
     return {
-      fileList: [
-        {
-          id: 'url-test',
-          name: 'URL 测试',
-          url: 'http://www.mocky.io/v2/5e4bafc63100007100d8b70f',
-          status: 'finished'
-        },
-        {
-          id: 'text-message',
-          name: '你的短信',
-          status: 'error'
-        },
-        {
-          id: 'notification',
-          name: '你的通知',
-          status: 'finished'
-        },
-        {
-          id: 'contact',
-          name: '你的联系人信息',
-          status: 'finished'
+      fileList: fileListRef,
+      handleUploadChange ({ fileList }) {
+        fileListRef.value = fileList
+      },
+      handleRemove ({ file, fileList }) {
+        if (file.id === 'text-message') {
+          message.info('居然没传上去，算了，删了吧')
+        } else if (file.id === 'notification') {
+          message.error('不行，这个有用，不许删')
+          return false
+        } else if (file.id === 'contact') {
+          message.loading('不知道这个有没有用，等我问问服务器能不能删', {
+            duration: 4000
+          })
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              message.error('不行，他们也不许删这个')
+              resolve(false)
+            }, 4000)
+          })
         }
-      ]
-    }
-  },
-  methods: {
-    handleUploadChange ({ fileList }) {
-      this.fileList = fileList
-    },
-    handleRemove ({ file, fileList }) {
-      if (file.id === 'text-message') {
-        this.message.info('居然没传上去，算了，删了吧')
-      } else if (file.id === 'notification') {
-        this.message.error('不行，这个有用，不许删')
-        return false
-      } else if (file.id === 'contact') {
-        this.message.loading('不知道这个有没有用，等我问问服务器能不能删', {
-          duration: 4000
-        })
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            this.message.error('不行，他们也不许删这个')
-            resolve(false)
-          }, 4000)
-        })
       }
     }
   }
-}
+})
 ```