docs(dialog): use composition api (#971)

* docs(dialog): 将对话框组件的示例更改为composition api

* docs(dialog): 修改return中的函数形式

* Apply suggestions from code review

Co-authored-by: 07akioni <07akioni2@gmail.com>

src/dialog/demos/enUS/action.demo.md

@@ -9,9 +9,10 @@ Sometimes you may want to customize `action` and `content` .
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useDialog, NTag } from 'naive-ui'
 
-export default {
+export default defineComponent({
   components: {
     NTag
   },
@@ -27,5 +28,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/dialog/demos/enUS/async.demo.md

@@ -7,16 +7,17 @@ Dialog can be async.
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useDialog } from 'naive-ui'
 
 const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000))
 const countDown = (second) => `Count down ${second} second`
 
-export default {
+export default defineComponent({
   setup () {
     const dialog = useDialog()
     return {
-      handleClick (e) {
+      handleClick () {
         const d = dialog.success({
           title: 'Async',
           content: 'Click and count down 3 second',
@@ -43,5 +44,5 @@ export default {
       }
     }
   }
-}
+})
 ```

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

@@ -3,15 +3,18 @@
 Inject `dialog` to create a dialog.
 
 ```html
-<n-button @click="handleConfirm"> Confirm </n-button>
-<n-button @click="handleSuccess"> Success </n-button>
-<n-button @click="handleError"> Error </n-button>
+<n-space>
+  <n-button @click="handleConfirm"> Confirm </n-button>
+  <n-button @click="handleSuccess"> Success </n-button>
+  <n-button @click="handleError"> Error </n-button>
+</n-space>
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage, useDialog } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     const dialog = useDialog()
@@ -52,5 +55,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/dialog/demos/enUS/index.demo-entry.md

@@ -16,10 +16,11 @@ For example:
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useDialog } from 'naive-ui'
 
 // content
-export default {
+export default defineComponent({
   setup () {
     const dialog = useDialog()
     return {
@@ -28,7 +29,7 @@ export default {
       }
     }
   }
-}
+})
 ```
 
 ## Demos

src/dialog/demos/enUS/mask.demo.md

@@ -7,9 +7,10 @@ I think user is smart enough that they know if nothing happens after mask is cli
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage, useDialog } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     const dialog = useDialog()
@@ -21,12 +22,12 @@ export default {
           positiveText: 'Sure',
           negativeText: 'Not Sure',
           maskClosable: false,
-          onMaskClick: (e) => {
+          onMaskClick: () => {
             message.success('cannot close')
           }
         })
       }
     }
   }
-}
+})
 ```

src/dialog/demos/enUS/use-component.demo.md

@@ -15,9 +15,10 @@ Sometimes you may want to use a component.
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -29,5 +30,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/dialog/demos/zhCN/action.demo.md

@@ -9,9 +9,10 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useDialog, NTag } from 'naive-ui'
 
-export default {
+export default defineComponent({
   components: {
     NTag
   },
@@ -27,5 +28,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/dialog/demos/zhCN/async.demo.md

@@ -7,12 +7,13 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useDialog } from 'naive-ui'
 
 const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000))
 const countDown = (second) => `倒计时 ${second} 秒`
 
-export default {
+export default defineComponent({
   setup () {
     const dialog = useDialog()
     return {
@@ -43,5 +44,5 @@ export default {
       }
     }
   }
-}
+})
 ```

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

@@ -11,9 +11,10 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage, useDialog } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     const dialog = useDialog()
@@ -54,5 +55,5 @@ export default {
       }
     }
   }
-}
+})
 ```

src/dialog/demos/zhCN/index.demo-entry.md

@@ -16,10 +16,11 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useDialog } from 'naive-ui'
 
 // content
-export default {
+export default defineComponent({
   setup () {
     const dialog = useDialog()
     return {
@@ -28,7 +29,7 @@ export default {
       }
     }
   }
-}
+})
 ```
 
 ## 演示

src/dialog/demos/zhCN/mask.demo.md

@@ -7,12 +7,14 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage, useDialog } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     const dialog = useDialog()
+
     return {
       handleButtonClick () {
         dialog.success({
@@ -21,12 +23,12 @@ export default {
           positiveText: '确定',
           negativeText: '不确定',
           maskClosable: false,
-          onMaskClick: (e) => {
+          onMaskClick: () => {
             message.success('不能关闭')
           }
         })
       }
     }
   }
-}
+})
 ```

src/dialog/demos/zhCN/use-component.demo.md

@@ -15,9 +15,10 @@
 ```
 
 ```js
+import { defineComponent } from 'vue'
 import { useMessage } from 'naive-ui'
 
-export default {
+export default defineComponent({
   setup () {
     const message = useMessage()
     return {
@@ -29,5 +30,5 @@ export default {
       }
     }
   }
-}
+})
 ```