docs(site): [notify] Improve documentation (#792)

* docs(site): [notify] Improve documentation

* docs(site): [notify] Improve documentation 2

examples/sites/demos/pc/app/notify/basic-usage-composition-api.vue

@@ -10,7 +10,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
 function handleClick() {
   Notify({
     type: 'info',
-    title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+    title: (h, params) => <h4>通知消息的标题</h4>,
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     position: 'top-right',
     duration: 5000,

examples/sites/demos/pc/app/notify/basic-usage.vue

@@ -15,7 +15,7 @@ export default {
     handleClick() {
       Notify({
         type: 'info',
-        title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+        title: (h, params) => <h4>通知消息的标题</h4>,
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         position: 'top-right',
         duration: 5000,

examples/sites/demos/pc/app/notify/beforeClose-composition-api.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Button as TinyButton, Notify, Modal } from '@opentiny/vue'
 
 function baseClick() {

examples/sites/demos/pc/app/notify/beforeClose.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button, Notify, Modal } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/notify/closeIcon-composition-api.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Button as TinyButton, Notify } from '@opentiny/vue'
 import { IconCloseSquare } from '@opentiny/vue-icon'
 

examples/sites/demos/pc/app/notify/closeIcon.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button, Notify } from '@opentiny/vue'
 import { IconCloseSquare } from '@opentiny/vue-icon'
 

examples/sites/demos/pc/app/notify/debounceDelay-composition-api.vue

@@ -11,7 +11,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
 const handleClick = ref(
   Notify({
     type: 'info',
-    title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+    title: (h, params) => <h4>通知消息的标题</h4>,
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     position: 'top-right',
     duration: 1000,

examples/sites/demos/pc/app/notify/debounceDelay.vue

@@ -15,7 +15,7 @@ export default {
     return {
       handleClick: Notify({
         type: 'info',
-        title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+        title: (h, params) => <h4>通知消息的标题</h4>,
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         position: 'top-right',
         duration: 1000,

examples/sites/demos/pc/app/notify/duration-composition-api.vue

@@ -12,7 +12,7 @@ import { Button as TinyButton, Notify } from '@opentiny/vue'
 function baseClick() {
   Notify({
     type: 'info',
-    title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+    title: (h, params) => <h4>通知消息的标题</h4>,
     message: '默认4500 ms后自动关闭提示框',
     position: 'top-right'
   })
@@ -21,7 +21,7 @@ function baseClick() {
 function successClick() {
   Notify({
     type: 'success',
-    title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+    title: (h, params) => <h4>通知消息的标题</h4>,
     message: '500ms后自动关闭提示框',
     position: 'top-right',
     duration: 500
@@ -31,7 +31,7 @@ function successClick() {
 function errorClick() {
   Notify({
     type: 'error',
-    title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+    title: (h, params) => <h4>通知消息的标题</h4>,
     message: '5000ms后自动关闭提示框',
     position: 'top-right',
     duration: 5000

examples/sites/demos/pc/app/notify/duration.vue

@@ -17,7 +17,7 @@ export default {
     baseClick() {
       Notify({
         type: 'info',
-        title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+        title: (h, params) => <h4>通知消息的标题</h4>,
         message: '默认4500 ms后自动关闭提示框',
         position: 'top-right'
       })
@@ -25,7 +25,7 @@ export default {
     successClick() {
       Notify({
         type: 'success',
-        title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+        title: (h, params) => <h4>通知消息的标题</h4>,
         message: '500ms后自动关闭提示框',
         position: 'top-right',
         duration: 500
@@ -34,7 +34,7 @@ export default {
     errorClick() {
       Notify({
         type: 'error',
-        title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+        title: (h, params) => <h4>通知消息的标题</h4>,
         message: '5000ms后自动关闭提示框',
         position: 'top-right',
         duration: 5000

examples/sites/demos/pc/app/notify/message-composition-api.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Button as TinyButton, Notify } from '@opentiny/vue'
 
 function baseClick() {

examples/sites/demos/pc/app/notify/message.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button, Notify } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/notify/onClose-composition-api.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Button as TinyButton, Notify, Modal } from '@opentiny/vue'
 
 function baseClick() {

examples/sites/demos/pc/app/notify/onClose.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button, Notify, Modal } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/notify/position-composition-api.vue

@@ -11,7 +11,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
 function infoClick() {
   Notify({
     type: 'info',
-    title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+    title: (h, params) => <h4>通知消息的标题</h4>,
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文'
   })
 }

examples/sites/demos/pc/app/notify/position.vue

@@ -16,7 +16,7 @@ export default {
     infoClick() {
       Notify({
         type: 'info',
-        title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+        title: (h, params) => <h4>通知消息的标题</h4>,
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文'
       })
     },

examples/sites/demos/pc/app/notify/showClose-composition-api.vue

@@ -10,7 +10,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
 function baseClick() {
   Notify({
     type: 'info',
-    title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+    title: (h, params) => <h4>通知消息的标题</h4>,
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     showClose: false,
     position: 'top-right',

examples/sites/demos/pc/app/notify/showClose.vue

@@ -15,7 +15,7 @@ export default {
     baseClick() {
       Notify({
         type: 'info',
-        title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+        title: (h, params) => <h4>通知消息的标题</h4>,
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         showClose: false,
         position: 'top-right',

examples/sites/demos/pc/app/notify/showIcon-composition-api.vue

@@ -10,7 +10,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
 function baseClick() {
   Notify({
     type: 'info',
-    title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+    title: (h, params) => <h4>通知消息的标题</h4>,
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     showIcon: false,
     position: 'top-right',

examples/sites/demos/pc/app/notify/showIcon.vue

@@ -15,7 +15,7 @@ export default {
     baseClick() {
       Notify({
         type: 'info',
-        title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+        title: (h, params) => <h4>通知消息的标题</h4>,
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         showIcon: false,
         position: 'top-right',

examples/sites/demos/pc/app/notify/statusIcon-composition-api.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Button as TinyButton, Notify } from '@opentiny/vue'
 import { IconInfo } from '@opentiny/vue-icon'
 

examples/sites/demos/pc/app/notify/statusIcon.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button, Notify } from '@opentiny/vue'
 import { IconInfo } from '@opentiny/vue-icon'
 

examples/sites/demos/pc/app/notify/title-composition-api.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Button as TinyButton, Notify } from '@opentiny/vue'
 
 function baseClick() {

examples/sites/demos/pc/app/notify/title.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button, Notify } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/notify/type-composition-api.vue

@@ -13,7 +13,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
 function infoClick() {
   Notify({
     type: 'info',
-    title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+    title: (h, params) => <h4>通知消息的标题</h4>,
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     position: 'top-right',
     duration: 500000,

examples/sites/demos/pc/app/notify/type.vue

@@ -18,7 +18,7 @@ export default {
     infoClick() {
       Notify({
         type: 'info',
-        title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+        title: (h, params) => <h4>通知消息的标题</h4>,
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         position: 'top-right',
         duration: 500000,

examples/sites/demos/pc/app/notify/verticalOffset-composition-api.vue

@@ -10,7 +10,7 @@ import { Notify, Button as TinyButton } from '@opentiny/vue'
 function handleClick() {
   Notify({
     type: 'info',
-    title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+    title: (h, params) => <h4>通知消息的标题</h4>,
     message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
     position: 'top-right',
     duration: 500000,

examples/sites/demos/pc/app/notify/verticalOffset.vue

@@ -15,7 +15,7 @@ export default {
     handleClick() {
       Notify({
         type: 'info',
-        title: (h, params) => <h4 style="margin:0">通知消息的标题</h4>,
+        title: (h, params) => <h4>通知消息的标题</h4>,
         message: '通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文，通知消息的正文',
         position: 'top-right',
         duration: 500000,

examples/sites/demos/pc/app/notify/webdoc/notify.js

@@ -50,7 +50,7 @@ export default {
     },
     {
       'demoId': 'message',
-      'name': { 'zh-CN': '自定义内容', 'en-US': 'Custom Content' },
+      'name': { 'zh-CN': '内容自定义', 'en-US': 'Custom Content' },
       'desc': {
         'zh-CN': '<p>可通过 <code>message</code>  属性设置通知框的内容。</p>\n',
         'en-US': '<p>You can set the content of the notification box through the <code>message</code> attribute. </p>\n'
@@ -99,7 +99,7 @@ export default {
     },
     {
       'demoId': 'beforeClose',
-      'name': { 'zh-CN': '关闭通知框前触发的事件', 'en-US': 'Event triggered before the notification box is closed' },
+      'name': { 'zh-CN': '关闭前的事件', 'en-US': 'Event before closing' },
       'desc': {
         'zh-CN': '<p>可通过 <code>beforeClose</code>  属性设置通知框关闭前的事件。</p>\n',
         'en-US':
@@ -110,8 +110,8 @@ export default {
     {
       'demoId': 'close',
       'name': {
-        'zh-CN': '点击关闭按钮时触发事件',
-        'en-US': 'This event is triggered when the close button is clicked.'
+        'zh-CN': '关闭事件',
+        'en-US': 'Event of closing'
       },
       'desc': {
         'zh-CN': '<p>可通过 <code>onClose</code>  属性设置通知点击关闭按钮时触发事件。</p>\n',
@@ -122,7 +122,7 @@ export default {
     },
     {
       'demoId': 'debounceDelay',
-      'name': { 'zh-CN': '配置防抖', 'en-US': 'Configure image stabilization' },
+      'name': { 'zh-CN': '防抖', 'en-US': 'Anti-shake' },
       'desc': {
         'zh-CN': '<p>可通过 <code>debounceDelay</code> 设置防抖时间\n',
         'en-US': '<p>You can use <code>debounceDelay</code> to set the image stabilization time.\n'
@@ -131,7 +131,7 @@ export default {
     },
     {
       'demoId': 'verticalOffset',
-      'name': { 'zh-CN': '垂直方向偏离距离', 'en-US': '' },
+      'name': { 'zh-CN': '垂直偏移量', 'en-US': 'Vertical Offset' },
       'desc': { 'zh-CN': '<p>可通过 <code>verticalOffset</code> 设置垂直方向偏离距离\n', 'en-US': '' },
       'codeFiles': ['verticalOffset.vue']
     }
@@ -143,18 +143,19 @@ export default {
       'properties': [
         {
           'name': 'type',
-          'type': 'string',
+          'type': '"info" | "success" | "warning" | "error"',
           'defaultValue': 'info',
           'desc': {
-            'zh-CN': '通知消息类型，可选值为 info、success、warning、error',
-            'en-US': 'Notification message type. The options are info, success, warning, and error.'
+            'zh-CN': '通知消息类型',
+            'en-US': 'Notification message type'
           },
           'demoId': 'type'
         },
         {
           'name': 'title',
-          'type': '[string, Function]',
-          'defaultValue': 'undefined',
+          'typeAnchorName': 'INotifyTitle',
+          'type': 'INotifyTitle',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '通知消息标题，可用 jsx 定制',
             'en-US': 'Notification message title, which can be customized by JSX.'
@@ -163,8 +164,9 @@ export default {
         },
         {
           'name': 'message',
-          'type': '[string, Function]',
-          'defaultValue': 'undefined',
+          'typeAnchorName': 'INotyfyMessage',
+          'type': 'INotyfyMessage',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '通知消息文本，可用 jsx 定制',
             'en-US': 'Notification message text, which can be customized using JSX.'
@@ -173,11 +175,11 @@ export default {
         },
         {
           'name': 'position',
-          'type': 'string',
+          'type': '"top-right" | "bottom-right"',
           'defaultValue': 'bottom-right',
           'desc': {
-            'zh-CN': '通知显示位置，可选值为 top-right、bottom-right',
-            'en-US': 'Notification display position. The value can be top-right or bottom-right.'
+            'zh-CN': '通知显示位置',
+            'en-US': 'Notification display position.'
           },
           'demoId': 'position'
         },
@@ -190,8 +192,8 @@ export default {
         },
         {
           'name': 'customClass',
-          'type': '[string, object]',
-          'defaultValue': 'undefined',
+          'type': 'string',
+          'defaultValue': '',
           'desc': { 'zh-CN': '自定义样式类', 'en-US': 'Custom style class' },
           'demoId': 'basic-usage'
         },
@@ -211,14 +213,14 @@ export default {
         },
         {
           'name': 'closeIcon',
-          'type': 'object',
+          'type': 'Component',
           'defaultValue': 'IconClose',
           'desc': { 'zh-CN': '关闭图标组件对象', 'en-US': 'Close icon component object' },
           'demoId': 'closeIcon'
         },
         {
           'name': 'statusIcon',
-          'type': 'object',
+          'type': 'Component',
           'defaultValue': 'IconInfoSolid',
           'desc': { 'zh-CN': '类型图标组件对象', 'en-US': 'Type icon component object' },
           'demoId': 'statusIcon'
@@ -232,8 +234,8 @@ export default {
         },
         {
           'name': 'verticalOffset',
-          'type': '[number,string]',
-          'defaultValue': 16,
+          'type': 'number | string',
+          'defaultValue': '16',
           'desc': { 'zh-CN': '设置垂直方向偏离距离,单位px', 'en-US': '' },
           'demoId': 'verticalOffset'
         }
@@ -241,8 +243,8 @@ export default {
       'events': [
         {
           'name': 'beforeClose',
-          'type': 'Function',
-          'defaultValue': 'undefined',
+          'type': '() => void',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '关闭前回调方法，返回 false 可阻止关闭',
             'en-US': 'Callback method before closing. If false is returned, closing is prevented.'
@@ -250,9 +252,9 @@ export default {
           'demoId': 'beforeClose'
         },
         {
-          'name': 'close',
-          'type': 'object',
-          'defaultValue': 'undefined',
+          'name': 'onClose',
+          'type': '() => void',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '关闭 notify 时触发的事件',
             'en-US': 'Event triggered when the notify function is disabled'
@@ -262,5 +264,17 @@ export default {
       ],
       'slots': []
     }
+  ],
+  types: [
+    {
+      name: 'INotifyTitle',
+      type: 'type',
+      code: `type INotifyTitle = string | (h: Vue.h, params: { titleClass: string, vm }) => JSX.Element`
+    },
+    {
+      name: 'INotyfyMessage',
+      type: 'type',
+      code: `type INotyfyMessage = string | (h: Vue.h, params: { messageClass: string, vm }) => JSX.Element`
+    }
   ]
 }