feat: support react and add new components: rich-text-editor/color-picker/divider/calendar-view

.gitignore

@@ -14,6 +14,8 @@ coverage/
 /packages/vue/mobile.ts
 /packages/vue/mobile-first.ts
 /packages/vue/app.ts
+/packages/vue-icon-saas/src
+/packages/vue-icon-saas/index.ts
 
 /packages/react/index.ts
 /packages/react/pc.ts

.prettierrc

@@ -11,6 +11,7 @@
   "useTabs": false,
   "tabWidth": 2,
   "proseWrap": "preserve",
+  "arrowParens": "always",
   "overrides": [
     {
       "files": ".prettierrc",
@@ -19,4 +20,4 @@
       }
     }
   ]
-}
+}

.vscode/settings.json

@@ -81,5 +81,6 @@
       "bold": false,
       "italic": false
     }
-  ]
+  ],
+  "vue.codeActions.enabled": false
 }

examples/docs/newsrc/pc.vue

@@ -97,7 +97,7 @@
       </div>
     </tiny-floatbar>
     <!-- 切换主题 -->
-    <tiny-dropdown class="!fixed bottom20 right140" @item-click="changeTheme">
+    <tiny-dropdown class="!fixed bottom20 right140" :show-icon="false" @item-click="changeTheme">
       <span title="切换主题">
         <SvgTheme></SvgTheme>
       </span>

examples/docs/newsrc/uses/useMonaco.js

@@ -1,31 +0,0 @@
-import * as monaco from 'monaco-editor'
-import { hooks } from '@opentiny/vue-common'
-// monaco ESM模块集成说明 ： https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite
-// https://github.com/vitejs/vite/discussions/1791#discussioncomment-321046
-import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
-self.MonacoEnvironment = {
-  getWorker: () => new HtmlWorker()
-}
-
-export function useMonaco(selector) {
-  const state = {
-    editor: null,
-    getCode: () => state.editor && state.editor.getValue(),
-    setCode: (code) => state.editor && state.editor.setValue(code),
-    hotKey: (key, fn) => state.editor && state.editor.addCommand(key, fn),
-    format: () => state.editor && state.editor.trigger('anyString', 'editor.action.formatDocument'),
-    scrollTop: () => state.editor && state.editor.setScrollTop(0)
-  }
-
-  hooks.onMounted(() => {
-    state.editor = monaco.editor.create(document.querySelector(selector), {
-      value: '',
-      language: 'html',
-      theme: 'vs-dark',
-      tabSize: 2,
-      automaticLayout: true
-    })
-  })
-  hooks.onUnmounted(() => (state.editor = null))
-  return state
-}

examples/docs/resources/mobile-first/app/badge/props-content.vue

@@ -0,0 +1,13 @@
+<template>
+  <tiny-badge data="我的待办" :value="0"></tiny-badge>
+</template>
+
+<script>
+import { Badge } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBadge: Badge
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/button/banner.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <tiny-button type="primary" banner native-type="submit">默认按钮</tiny-button>
+    <tiny-button type="primary" custom-class="mt-4" banner plain>线性按钮</tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/button/button-class.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="demo">
     <tiny-button>默认按钮</tiny-button>
-    <tiny-button button-class="text-color-brand-active bg-color-bg-3"> 主要按钮 </tiny-button>
+    <tiny-button custom-class="text-color-brand-active bg-color-bg-3"> 主要按钮 </tiny-button>
   </div>
 </template>
 

examples/docs/resources/mobile-first/app/button/image.vue

@@ -14,7 +14,7 @@ export default {
   },
   data() {
     return {
-      image: 'webnova/static/images/hae-logo.png'
+      image: '/static/images/hae-logo.png'
     }
   }
 }

examples/docs/resources/mobile-first/app/button/slot-default.vue

@@ -23,7 +23,7 @@ export default {
   },
   data() {
     return {
-      image: 'webnova/static/images/hae-logo.png'
+      image: '/static/images/hae-logo.png'
     }
   }
 }

examples/docs/resources/mobile-first/app/button/webdoc/button.js

@@ -115,7 +115,7 @@ export default {
       codeFiles: ['click.vue']
     },
     {
-      demoId: 'dynamic-disable-button',
+      demoId: 'dynamic-disabled',
       name: {
         'zh-CN': '动态禁用按钮',
         'en-US': 'events'
@@ -124,7 +124,19 @@ export default {
         'zh-CN': '<p>设置  <code>disabled</code>属性为 true 后，可以禁用按钮。<p>',
         'en-US': '<p>bbutton click</p>'
       },
-      codeFiles: ['dynamic-disable-button.vue']
+      codeFiles: ['dynamic-disabled.vue']
+    },
+    {
+      demoId: 'banner',
+      name: {
+        'zh-CN': '通知栏按钮',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>通过添加<code>banner</code>属性设置通栏按钮<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['banner.vue']
     }
   ],
   apis: []

examples/docs/resources/mobile-first/app/carousel/close-loop.vue

@@ -2,16 +2,16 @@
   <div class="w-80">
     <tiny-carousel aspect-ratio="2:1" :loop="false">
       <tiny-carousel-item class="">
-        <img src="webnova/static/images/dsj.png" alt="" />
+        <img src="/static/images/dsj.png" alt="" />
       </tiny-carousel-item>
       <tiny-carousel-item class="">
-        <img src="webnova/static/images/jz.png" alt="" />
+        <img src="/static/images/jz.png" alt="" />
       </tiny-carousel-item>
       <tiny-carousel-item class="">
-        <img src="webnova/static/images/ld.png" alt="" />
+        <img src="/static/images/ld.png" alt="" />
       </tiny-carousel-item>
       <tiny-carousel-item class="">
-        <img src="webnova/static/images/px.png" alt="" />
+        <img src="/static/images/px.png" alt="" />
       </tiny-carousel-item>
     </tiny-carousel>
   </div>

examples/docs/resources/mobile-first/app/cell/basic-usage.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <tiny-cell :data="data"></tiny-cell>
+  </div>
+</template>
+
+<script>
+import { Cell } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCell: Cell
+  },
+  data() {
+    return {
+      data: '进行中'
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/cell/disabled.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <tiny-cell :data="data" disabled></tiny-cell>
+  </div>
+</template>
+
+<script>
+import { Cell } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCell: Cell
+  },
+  data() {
+    return {
+      data: '进行中'
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/cell/icon.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-cell :data="data" :icon="icon"></tiny-cell>
+  </div>
+</template>
+
+<script>
+import { Cell } from '@opentiny/vue'
+import { IconWriting } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCell: Cell
+  },
+  data() {
+    return {
+      data: '',
+      icon: IconWriting()
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/cell/placeholder.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <tiny-cell :data="data" placeholder="请选择日期"></tiny-cell>
+  </div>
+</template>
+
+<script>
+import { Cell } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCell: Cell
+  },
+  data() {
+    return {
+      data: ''
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/cell/webdoc/cell.cn.md

@@ -0,0 +1,9 @@
+---
+title: Cell 单元格
+---
+
+# Cell 单元格
+
+<div>
+此组件主要用于移动下拉选择组件（DatePickerMobile、SelectMobile 等）显示值的承载容器
+</div>

examples/docs/resources/mobile-first/app/cell/webdoc/cell.en.md

@@ -0,0 +1,9 @@
+---
+title: Cell 单元格
+---
+
+# Cell 单元格
+
+<div>
+此组件主要用于移动下拉选择组件（DatePickerMobile、SelectMobile 等）显示值的承载容器
+</div>

examples/docs/resources/mobile-first/app/cell/webdoc/cell.js

@@ -0,0 +1,67 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'with-date-picker',
+      name: {
+        'zh-CN': '结合日期选择一起使用',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['with-date-picker.vue']
+    },
+    {
+      demoId: 'placeholder',
+      name: {
+        'zh-CN': '占位文本',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['placeholder.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'icon',
+      name: {
+        'zh-CN': 'icon 图标',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p>可以传入一个 svg 对象替换默认的下拉图标<p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['icon.vue']
+    }
+  ],
+  apis: []
+}

examples/docs/resources/mobile-first/app/cell/with-date-picker.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <tiny-cell :data="formatDatetime(datetime)" @click="datetimeVisibility = true"></tiny-cell>
+    <tiny-date-picker-mobile-first
+      v-model="datetime"
+      type="datetime"
+      title="日期时间选择"
+      :visible="datetimeVisibility"
+      @update:visible="datetimeVisibility = $event"
+    >
+    </tiny-date-picker-mobile-first>
+  </div>
+</template>
+
+<script>
+import { DatePickerMobileFirst, Cell } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePickerMobileFirst: DatePickerMobileFirst,
+    TinyCell: Cell
+  },
+  data() {
+    return {
+      datetimeVisibility: false,
+      datetime: ''
+    }
+  },
+  methods: {
+    formatDatetime(value) {
+      if (!value) return ''
+      const date = new Date(value)
+      return this.getFormatDate(date)
+    },
+    getFormatDate(date) {
+      // 格式示例：2020/11/11 12:01:22
+      return `${date.getFullYear()}/${this.addZero(date.getMonth() + 1)}/${this.addZero(date.getDate())} ${this.addZero(
+        date.getHours()
+      )}:${this.addZero(date.getMinutes())}:${this.addZero(date.getSeconds())}`
+    },
+    addZero(time) {
+      return ('0' + time).slice(-2)
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/column-list-item/basic-usage.vue

@@ -3,7 +3,7 @@
     <tiny-column-list-item
       v-model="checked"
       :show-checkbox="true"
-      image="webnova/static/images/1.jpg"
+      image="/static/images/1.jpg"
       size="medium"
       :options="options1"
       :flex-grow="[1, 1]"
@@ -25,7 +25,7 @@
         </ul>
       </template>
     </tiny-column-list-item>
-    <tiny-column-list-item image="webnova/static/images/1.jpg" size="medium" :options="options2" class="mb-3">
+    <tiny-column-list-item image="/static/images/1.jpg" size="medium" :options="options2" class="mb-3">
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>

examples/docs/resources/mobile-first/app/column-list-item/custom-width.vue

@@ -1,11 +1,6 @@
 <template>
   <div>
-    <tiny-column-list-item
+    <tiny-column-list-item image="/static/images/1.jpg" :flex-grow="[0, 0]" :flex-basis="['25%', '25%']" class="mb-3">
-      image="webnova/static/images/1.jpg"
-      :flex-grow="[0, 0]"
-      :flex-basis="['25%', '25%']"
-      class="mb-3"
-    >
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>

examples/docs/resources/mobile-first/app/column-list-item/icon-click-event.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-column-list-item image="webnova/static/images/1.jpg" @icon-click="iconClick" :options="options">
+    <tiny-column-list-item image="/static/images/1.jpg" @icon-click="iconClick" :options="options">
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>

examples/docs/resources/mobile-first/app/column-list-item/icon-disabled.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-column-list-item image="webnova/static/images/1.jpg" @icon-click="iconClick" :options="options">
+    <tiny-column-list-item image="/static/images/1.jpg" @icon-click="iconClick" :options="options">
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>

examples/docs/resources/mobile-first/app/column-list-item/size.vue

@@ -3,7 +3,7 @@
     <tiny-column-list-item
       v-model="checked"
       :show-checkbox="true"
-      image="webnova/static/images/1.jpg"
+      image="/static/images/1.jpg"
       :size="size"
       :options="options"
       :flex-grow="[1, 3]"
@@ -23,7 +23,7 @@
         </ul>
       </template>
     </tiny-column-list-item>
-    <tiny-column-list-item image="webnova/static/images/1.jpg" :size="size" :options="options">
+    <tiny-column-list-item image="/static/images/1.jpg" :size="size" :options="options">
       <template #column1>
         <ul>
           <li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>

examples/docs/resources/mobile-first/app/file-upload/display-only-picture.vue

@@ -21,23 +21,23 @@ export default {
       fileList1: [
         {
           name: 'Snipaste_2022-12-02_18-05-51.png',
-          url: 'webnova/static/images/ld.png'
+          url: '/static/images/ld.png'
         }
       ],
       fileList2: [
         {
           name: 'test1.png',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'uploading',
           percentage: '50'
         },
         {
           name: 'test2',
-          url: 'webnova/static/images/ry.png'
+          url: '/static/images/ry.png'
         },
         {
           name: 'test3',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'fail'
         }
       ]

examples/docs/resources/mobile-first/app/file-upload/download-picture.vue

@@ -33,23 +33,23 @@ export default {
       fileList1: [
         {
           name: 'Snipaste_2022-12-02_18-05-51.png',
-          url: 'webnova/static/images/ld.png'
+          url: '/static/images/ld.png'
         }
       ],
       fileList2: [
         {
           name: 'test1.png',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'uploading',
           percentage: '50'
         },
         {
           name: 'test2',
-          url: 'webnova/static/images/ry.png'
+          url: '/static/images/ry.png'
         },
         {
           name: 'test3',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'fail'
         }
       ]

examples/docs/resources/mobile-first/app/file-upload/drag-file-list.vue

@@ -28,7 +28,7 @@ export default {
       fileList1: [
         {
           name: 'ld.png',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'uploading',
           percentage: 30
         }
@@ -36,13 +36,13 @@ export default {
       fileList2: [
         {
           name: 'ld.png',
-          url: 'webnova/static/images/ld.png'
+          url: '/static/images/ld.png'
         }
       ],
       fileList3: [
         {
           name: 'ld.png',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'fail'
         }
       ]

examples/docs/resources/mobile-first/app/file-upload/picture-card.vue

@@ -18,17 +18,17 @@ export default {
       fileList: [
         {
           name: 'test1.png',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'uploading',
           percentage: '50'
         },
         {
           name: 'test2',
-          url: 'webnova/static/images/ry.png'
+          url: '/static/images/ry.png'
         },
         {
           name: 'test3',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'fail'
         }
       ]

examples/docs/resources/mobile-first/app/file-upload/picture-show-name.vue

@@ -18,17 +18,17 @@ export default {
       fileList: [
         {
           name: 'Snipaste_2022-12-02_18-05-51.png',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'uploading',
           percentage: '50'
         },
         {
           name: 'test2',
-          url: 'webnova/static/images/ry.png'
+          url: '/static/images/ry.png'
         },
         {
           name: 'test1',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'fail'
         }
       ]

examples/docs/resources/mobile-first/app/file-upload/picture.vue

@@ -15,7 +15,7 @@ export default {
       fileList: [
         {
           name: 'Snipaste_2022-12-02_18-05-51.png',
-          url: 'webnova/static/images/ld.png'
+          url: '/static/images/ld.png'
         }
       ]
     }

examples/docs/resources/mobile-first/app/file-upload/preview-picture.vue

@@ -23,23 +23,23 @@ export default {
       fileList1: [
         {
           name: 'Snipaste_2022-12-02_18-05-51.png',
-          url: 'webnova/static/images/ld.png'
+          url: '/static/images/ld.png'
         }
       ],
       fileList2: [
         {
           name: 'test1.png',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'uploading',
           percentage: '50'
         },
         {
           name: 'test2',
-          url: 'webnova/static/images/ry.png'
+          url: '/static/images/ry.png'
         },
         {
           name: 'test3',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'fail'
         }
       ]

examples/docs/resources/mobile-first/app/file-upload/re-upload-picture.vue

@@ -17,7 +17,7 @@ export default {
       fileList: [
         {
           name: 'test3',
-          url: 'webnova/static/images/ld.png',
+          url: '/static/images/ld.png',
           status: 'fail'
         }
       ]

examples/docs/resources/mobile-first/app/flowchart/basic-usage.vue

@@ -1,6 +1,7 @@
 <template>
   <tiny-flowchart
     ref="chart"
+    class="text-xs"
     :data="chartData"
     :config="chartConfig"
     @click-node="onClickNode"

examples/docs/resources/mobile-first/app/flowchart/dot-horizon-async.vue

@@ -0,0 +1,120 @@
+<template>
+  <tiny-async-flowchart
+    ref="chart"
+    :fetch="fetchFunc"
+    @click-node="onClickNode"
+    @click-link="onClickLink"
+    @click-blank="onClickBlank"
+  >
+  </tiny-async-flowchart>
+</template>
+
+<script>
+import Flowchart from '@opentiny/vue-flowchart'
+import AsyncFlowchart from '@opentiny/vue-async-flowchart'
+
+const { createConfig, Node } = Flowchart
+const nodeWrapperSize = 32
+
+const chartData = {
+  nodes: [
+    {
+      name: '0',
+      info: {
+        col: 0,
+        row: 0,
+        status: 1,
+        other: { title: '开始', subtitle: '张三', auxi: '2023-01-01' }
+      },
+      hidden: false
+    },
+    {
+      name: '1',
+      info: {
+        col: 1,
+        row: 0,
+        status: 1,
+        other: { title: '申请人', subtitle: '张三', auxi: '2023-01-02' }
+      }
+    },
+    {
+      name: '2',
+      info: {
+        col: 2,
+        row: 0,
+        status: 1,
+        other: { title: '制单会计', subtitle: '协同：张三、张四、张五、张六、张七', auxi: '2023-01-03' }
+      }
+    },
+    {
+      name: '3',
+      info: {
+        col: 3,
+        row: 0,
+        status: 2,
+        other: { title: '应付会计', subtitle: '张四 0035837', auxi: '' }
+      }
+    },
+    {
+      name: '4',
+      info: {
+        col: 4,
+        row: 0,
+        status: 4,
+        other: { title: '应付会计', subtitle: '张四 0035837', auxi: '', error: '人员变更，未同步' }
+      }
+    }
+  ],
+  links: [
+    { from: '0', to: '1', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } },
+    { from: '1', to: '2', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } },
+    { from: '2', to: '3', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } },
+    { from: '3', to: '4', fromJoint: 'right', toJoint: 'left', info: { status: 3, style: 'solid' } }
+  ]
+}
+
+const chartConfig = createConfig()
+
+Object.assign(chartConfig, {
+  width: 0,
+  extraWidth: 100, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
+  height: 0,
+  gap: 60,
+  padding: 12,
+  prior: 'vertical',
+  align: 'left',
+  status: { 1: 'completed', 2: 'ongoing', 3: 'not-started', 4: 'fail' },
+  colors: { 1: '#00a874', 2: '#0067d1', 3: '#999', 4: '#eb171f' },
+  ongoingBackgroundColor: '#f3f8fe',
+  popoverPlacement: 'bottom',
+  renderOuter: (h, node) => {
+    return h(Node, { props: { node, config: chartConfig } })
+  },
+  type: 'dot',
+  nodeWrapperSize
+})
+
+export default {
+  components: {
+    TinyAsyncFlowchart: AsyncFlowchart
+  },
+  methods: {
+    onClickNode(afterNode, e) {
+      console.log(afterNode, e)
+    },
+    onClickLink(afterLink, e) {
+      console.log(afterLink, e)
+    },
+    onClickBlank(param, e) {
+      console.log(param, e)
+    },
+    fetchFunc() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({ data: chartData, config: chartConfig })
+        }, 300)
+      })
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/flowchart/dot-horizon.vue

@@ -79,6 +79,7 @@ const chartConfig = createConfig()
 
 Object.assign(chartConfig, {
   width: 0,
+  extraWidth: 100, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
   height: 0,
   gap: 60,
   padding: 12,

examples/docs/resources/mobile-first/app/flowchart/dot-vertical-async.vue

@@ -0,0 +1,221 @@
+<template>
+  <tiny-async-flowchart
+    ref="chart"
+    :fetch="fetchFunc"
+    @click-node="onClickNode"
+    @click-link="onClickLink"
+    @click-blank="onClickBlank"
+    @click-group="onClickGroup"
+  >
+  </tiny-async-flowchart>
+</template>
+
+<script>
+import Flowchart from '@opentiny/vue-flowchart'
+import AsyncFlowchart from '@opentiny/vue-async-flowchart'
+
+const { createConfig, Node } = Flowchart
+const nodeWrapperSize = 32
+
+const chartData = {
+  nodes: [
+    {
+      name: '0',
+      info: {
+        col: 0,
+        row: 0,
+        status: 1,
+        other: { title: '开始', subtitle: '张三', auxi: '2023-01-01' }
+      },
+      hidden: false
+    },
+    {
+      name: '1',
+      info: {
+        col: 0,
+        row: 1,
+        status: 1,
+        other: { title: '申请人', subtitle: '张三', auxi: '2023-01-02' }
+      }
+    },
+    {
+      name: '2',
+      info: {
+        col: 0,
+        row: 2,
+        status: 1,
+        other: { title: '制单会计', subtitle: '协同：张三、张四、张五、张六、张七', auxi: '2023-01-03' }
+      }
+    },
+    {
+      name: '3',
+      info: {
+        col: 0,
+        row: 3,
+        status: 2,
+        other: { title: '应付会计', subtitle: '张四 0035837', auxi: '' }
+      }
+    },
+    {
+      name: '4',
+      info: {
+        col: 1,
+        row: 3,
+        status: 4,
+        other: { title: '应付会计', subtitle: '张四 0035837', auxi: '', error: '人员变更，未同步' }
+      }
+    },
+    {
+      name: '5',
+      info: {
+        col: 0,
+        row: 4,
+        status: 3,
+        other: { title: '复核会计', subtitle: '协同：张三、张四', auxi: '' }
+      }
+    },
+    {
+      name: '6',
+      info: { col: 0, row: 5, status: 3, other: { title: '结束' } },
+      hidden: false
+    }
+  ],
+  links: [
+    { from: '0', to: '1', fromJoint: 'bottom', toJoint: 'top', info: { status: 1, style: 'solid' } },
+    { from: '1', to: '2', fromJoint: 'bottom', toJoint: 'top', info: { status: 1, style: 'solid' } },
+    { from: '2', to: '3', fromJoint: 'bottom', toJoint: 'top', info: { status: 1, style: 'solid' } },
+    {
+      from: '2',
+      to: '4',
+      fromJoint: 'bottom',
+      toJoint: 'top',
+      linkOffset: 96,
+      showArrow: false,
+      info: { status: 1, style: 'solid', other: { title: '条件1' } }
+    },
+    { from: '3', to: '5', fromJoint: 'bottom', toJoint: 'top', info: { status: 3, style: 'solid' } },
+    {
+      from: '4',
+      to: '5',
+      fromJoint: 'bottom',
+      toJoint: 'top',
+      arrowEndMinus: 96,
+      // showArrow: false,
+      info: { status: 3, style: 'solid', other: { title: '条件2' } }
+    },
+    { from: '5', to: '6', fromJoint: 'bottom', toJoint: 'top', info: { status: 3, style: 'dashed' } }
+  ],
+  groups: [
+    {
+      nodes: ['2', '3'],
+      padding: [20, 100],
+      // fillStyle: '#f5f6f8',
+      lineDash: [6, 6],
+      strokeStyle: '#8d959e',
+      title: '主账',
+      titlePosition: 'top-left' /* top/top-left */,
+      titleClass: 'bg-color-bg-1'
+    }
+  ]
+}
+
+const chartConfig = createConfig()
+
+Object.assign(chartConfig, {
+  width: 0,
+  extraWidth: 200, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
+  height: 0,
+  gap: 60,
+  padding: 12,
+  prior: 'vertical',
+  align: 'left',
+  status: { 1: 'completed', 2: 'ongoing', 3: 'not-started', 4: 'fail' },
+  colors: { 1: '#0067D1', 2: '#0067d1', 3: 'rgba(22,30,38,0.2)', 4: '#eb171f' },
+  ongoingBackgroundColor: '#f3f8fe',
+  popoverPlacement: 'right',
+  type: 'dot',
+  renderOuter: (h, node) => {
+    return h(Node, { props: { node, config: chartConfig, titleClass: 'bg-color-bg-1' } })
+  },
+  nodeLayout: 'left-right' /* up-down/left-right */,
+  nodeSize: 'medium' /* mini/small/medium */,
+  nodeWrapperSize,
+  titleMaxWidth: 90,
+  linkEndMinus: 6,
+  showOnly: '' /* icon/title */,
+  linkPath: [
+    {
+      filter: { from: '4', to: '5' },
+      method: ({ afterLink, afterNodes }) => {
+        const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
+          afterNodes.find((afterNode) => afterNode.raw.name === name)
+        )
+        const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
+        const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
+        // 起点
+        const f = { x: x0 + w0 / 2, y: y0 + h0 }
+        // 终点
+        const t = { x: x1 + w1, y: y1 + h1 / 2 }
+        // 拐点
+        const c = { x: f.x, y: t.y }
+        // // a. 返回连线路径
+        // return [f, c, t]
+        // b. 返回连线路径、中点、线性渐变
+        return {
+          path: [f, c, t],
+          mid: { x: (f.x + c.x) / 2, y: (f.y + c.y) / 2 },
+          linear: { stops: [0, 1], colors: ['gold', 'blue'] }
+        }
+      }
+    },
+    {
+      filter: { from: '2', to: '4' },
+      method: ({ afterLink, afterNodes }) => {
+        const afterNodeCouple = [afterLink.raw.from, afterLink.raw.to].map((name) =>
+          afterNodes.find((afterNode) => afterNode.raw.name === name)
+        )
+        const { x: x0, y: y0, width: w0, height: h0 } = afterNodeCouple[0]
+        const { x: x1, y: y1, width: w1, height: h1 } = afterNodeCouple[1]
+        // 起点
+        const f = { x: x0 + w0, y: y0 + h0 / 2 }
+        // 终点
+        const t = { x: x1 + w1 / 2, y: y1 }
+        // 拐点
+        const c = { x: t.x, y: f.y }
+        // a. 返回连线路径
+        return [f, c, t]
+        // // b. 返回连线路径、中点
+        // return { path: [f, c, t], mid: c }
+      }
+    }
+  ],
+  condClass: 'bg-color-bg-1'
+})
+
+export default {
+  components: {
+    TinyAsyncFlowchart: AsyncFlowchart
+  },
+  methods: {
+    onClickNode(afterNode, e) {
+      console.log(afterNode, e)
+    },
+    onClickLink(afterLink, e) {
+      console.log(afterLink, e)
+    },
+    onClickBlank(param, e) {
+      console.log(param, e)
+    },
+    onClickGroup(afterGroup, e) {
+      console.log(afterGroup, e)
+    },
+    fetchFunc() {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({ data: chartData, config: chartConfig })
+        }, 300)
+      })
+    }
+  }
+}
+</script>

examples/docs/resources/mobile-first/app/flowchart/dot-vertical.vue

@@ -125,6 +125,7 @@ const chartConfig = createConfig()
 
 Object.assign(chartConfig, {
   width: 0,
+  extraWidth: 200, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
   height: 0,
   gap: 60,
   padding: 12,

examples/docs/resources/mobile-first/app/flowchart/holistic-fork.vue

@@ -149,6 +149,7 @@ const chartConfig = createConfig()
 
 Object.assign(chartConfig, {
   width: 0,
+  extraWidth: 100, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
   height: 240,
   gap: 24,
   padding: 12,

examples/docs/resources/mobile-first/app/flowchart/holistic.vue

@@ -81,6 +81,7 @@ const chartConfig = createConfig()
 
 Object.assign(chartConfig, {
   width: 0,
+  extraWidth: 100, // 图形预留宽度，用于图形最小宽度计算，适当修改保证图形宽度不被过分挤压
   height: 0,
   gap: 24,
   padding: 12,

examples/docs/resources/mobile-first/app/flowchart/horizon.vue

@@ -1,6 +1,7 @@
 <template>
   <tiny-flowchart
     ref="chart"
+    class="text-xs"
     :data="chartData"
     :config="chartConfig"
     @click-node="onClickNode"

examples/docs/resources/mobile-first/app/flowchart/webdoc/flowchart.js

@@ -3,7 +3,7 @@ export default {
   owner: '',
   demos: [
     {
-      demoId: '/basic-usage',
+      demoId: 'basic-usage',
       name: {
         'zh-CN': '垂直图形',
         'en-US': 'events'
@@ -12,7 +12,7 @@ export default {
         'zh-CN': '<p><p>',
         'en-US': '<p>bbutton click</p>'
       },
-      codeFiles: ['/basic-usage.vue']
+      codeFiles: ['basic-usage.vue']
     },
     {
       demoId: 'horizon',
@@ -50,6 +50,30 @@ export default {
       },
       codeFiles: ['dot-horizon.vue']
     },
+    {
+      demoId: 'dot-horizon-async',
+      name: {
+        'zh-CN': '点模式-水平图形-异步',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['dot-horizon-async.vue']
+    },
+    {
+      demoId: 'dot-vertical-async',
+      name: {
+        'zh-CN': '点模式-垂直图形-异步',
+        'en-US': 'events'
+      },
+      desc: {
+        'zh-CN': '<p><p>',
+        'en-US': '<p>bbutton click</p>'
+      },
+      codeFiles: ['dot-vertical-async.vue']
+    },
     {
       demoId: 'holistic',
       name: {

examples/docs/resources/mobile-first/app/grid/basic-usage.vue

@@ -103,7 +103,7 @@ export default {
           area: '华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区华东区',
           address: '福州',
           introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          logo: 'webnova/static/images/9.jpg',
+          logo: '/static/images/9.jpg',
           tag1: 'NA',
           tag2: '交通',
           tag3: '总集',
@@ -117,7 +117,7 @@ export default {
           area: '华南区',
           address: '深圳福田区',
           introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          logo: 'webnova/static/images/9.jpg',
+          logo: '/static/images/9.jpg',
           tag1: 'NA',
           tag2: '交通',
           tag3: '总集',
@@ -131,7 +131,7 @@ export default {
           area: '华南区',
           address: '中山市',
           introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          logo: 'webnova/static/images/9.jpg',
+          logo: '/static/images/9.jpg',
           tag1: 'NA',
           tag2: '交通',
           tag3: '总集',
@@ -145,7 +145,7 @@ export default {
           area: '华北区',
           address: '梅州',
           introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          logo: 'webnova/static/images/9.jpg',
+          logo: '/static/images/9.jpg',
           tag1: 'NA',
           tag2: '交通',
           tag3: '总集',
@@ -159,7 +159,7 @@ export default {
           area: '华南区',
           address: '韶关',
           introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          logo: 'webnova/static/images/9.jpg',
+          logo: '/static/images/9.jpg',
           tag1: 'NA',
           tag2: '交通',
           tag3: '总集',
@@ -173,7 +173,7 @@ export default {
           area: '华北区',
           address: '广州天河区',
           introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
-          logo: 'webnova/static/images/9.jpg',
+          logo: '/static/images/9.jpg',
           tag1: 'NA',
           tag2: '如果内容超过100px',
           tag3: '总集',

examples/docs/resources/mobile-first/app/search/big-mode.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-search mini></tiny-search>
+  <tiny-search v-model="value" placeholder="请输入关键词" big></tiny-search>
 </template>
 
 <script>
@@ -8,6 +8,11 @@ import { Search } from '@opentiny/vue'
 export default {
   components: {
     TinySearch: Search
+  },
+  data() {
+    return {
+      value: ''
+    }
   }
 }
 </script>

examples/docs/resources/mobile-first/app/search/webdoc/search.js

@@ -28,28 +28,16 @@ export default {
       codeFiles: ['clearable.vue']
     },
     {
-      demoId: 'mini-mode',
+      demoId: 'big-mode',
       name: {
-        'zh-CN': '迷你模式',
+        'zh-CN': '大尺寸',
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>可通过 `mini` 设置组件为 mini 模式。<p>',
+        'zh-CN': '<p>可通过 `big` 设置组件为 big 模式。<p>',
         'en-US': '<p>bbutton click</p>'
       },
-      codeFiles: ['mini-mode.vue']
+      codeFiles: ['big-mode.vue']
-    },
-    {
-      demoId: 'transparent-mode',
-      name: {
-        'zh-CN': '透明模式',
-        'en-US': 'events'
-      },
-      desc: {
-        'zh-CN': '<p>可通过 `transparent` 设置组件为透明模式（`mini`模式下有效）。<p>',
-        'en-US': '<p>bbutton click</p>'
-      },
-      codeFiles: ['transparent-mode.vue']
     },
     {
       demoId: 'default-value',

examples/docs/resources/mobile-first/app/standard-list-item/basic-usage.vue

@@ -40,7 +40,7 @@ export default {
       userHeadOption: {
         type: 'image',
         size: 40,
-        value: 'webnova/static/images/1.jpg',
+        value: '/static/images/1.jpg',
         round: true
       },
       iconOptions: [

examples/docs/resources/mobile-first/app/standard-list-item/content-slot.vue

@@ -24,7 +24,7 @@ export default {
       userHeadOption: {
         type: 'image',
         size: 40,
-        value: 'webnova/static/images/1.jpg',
+        value: '/static/images/1.jpg',
         round: true
       },
       iconOptions: [

examples/docs/resources/mobile-first/app/standard-list-item/type.vue

@@ -41,7 +41,7 @@ export default {
       userHeadOption: {
         type: 'image',
         size: 40,
-        value: 'webnova/static/images/1.jpg',
+        value: '/static/images/1.jpg',
         round: true
       },
       iconOptions: [

examples/docs/resources/mobile-first/app/time-line/auto-slot.vue

@@ -1,11 +1,11 @@
 <template>
-  <div style="display: flex; justify-content: space-between">
+  <div class="flex justify-between">
     <tiny-time-line :data="data">
       <template #left="data">
-        <div style="margin-top: -14px; margin-left: 10px">
+        <div class="ml-1.5 -mt-1.5">
-          <tiny-user-head type="image" round v-model="imgUrl" scale="0.8"></tiny-user-head>
+          <tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
         </div>
-        <span style="margin-left: 6px; display: inline-block; font-size: 12px">
+        <span class="ml-2 inline-block text-xs leading-5 mb-6">
           {{ data.slotScope.title }}
         </span>
       </template>
@@ -13,10 +13,12 @@
 
     <tiny-time-line :data="data1">
       <template #left="data1">
-        <div style="margin-top: -14px; margin-left: 10px">
+        <div class="ml-1.5 -mt-1.5">
-          <tiny-user-head type="image" round v-model="imgUrl" scale="0.8"></tiny-user-head>
+          <tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
         </div>
-        <span style="margin-left: 6px; display: inline-block; font-size: 12px"> {{ data1.slotScope.title }} </span>
+        <span class="ml-2 inline-block text-xs leading-5 mb-6">
+          {{ data1.slotScope.title }}
+        </span>
       </template>
     </tiny-time-line>
   </div>
@@ -33,7 +35,7 @@ export default {
   },
   data() {
     return {
-      imgUrl: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+      imgUrl: '/static/images/1.jpg',
       data: [{ title: '节点标题1' }, { title: '节点标题2' }, { title: '节点标题3' }, { title: '节点标题4' }],
       data1: [
         { title: '节点标题1' },

examples/docs/resources/mobile-first/app/user-head/basic-usage.vue

@@ -30,7 +30,7 @@ export default {
     return {
       text: '中文',
       textEn: 'Meta',
-      imgUrl: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg'
+      imgUrl: '/static/images/1.jpg'
     }
   }
 }

examples/docs/resources/mobile-first/app/user-head/user-head-group.vue

@@ -117,67 +117,67 @@ export default {
       imageList1: [
         {
           type: 'image',
-          modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+          modelValue: '/static/images/1.jpg',
           round: true
         },
         {
           type: 'image',
-          modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+          modelValue: '/static/images/1.jpg',
           round: true
         }
       ],
       imageList2: [
         {
           type: 'image',
-          modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+          modelValue: '/static/images/1.jpg',
           round: true
         },
         {
           type: 'image',
-          modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+          modelValue: '/static/images/1.jpg',
           round: true
         },
         {
           type: 'image',
-          modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+          modelValue: '/static/images/1.jpg',
           round: true
         }
       ],
       imageList3: [
         {
           type: 'image',
-          modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+          modelValue: '/static/images/1.jpg',
           round: true
         },
         {
           type: 'image',
-          modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+          modelValue: '/static/images/1.jpg',
           round: true
         },
         {
           type: 'image',
-          modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+          modelValue: '/static/images/1.jpg',
           round: true
         },
         {
           type: 'image',
-          modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+          modelValue: '/static/images/1.jpg',
           round: true
         },
         {
           type: 'image',
-          modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+          modelValue: '/static/images/1.jpg',
           round: true
         },
         {
           type: 'image',
-          modelValue: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg',
+          modelValue: '/static/images/1.jpg',
           round: true
         }
       ],
       text: '中文',
       textEn: 'Meta',
-      imgUrl: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg'
+      imgUrl: '/static/images/1.jpg'
     }
   }
 }

examples/docs/resources/mobile-first/app/user-head/user-head-size.vue

@@ -63,7 +63,7 @@ export default {
   data() {
     return {
       text: '文字',
-      imgUrl: 'https:/webnova/static/img/tiny3bg.b5dd307.jpg'
+      imgUrl: '/static/images/1.jpg'
     }
   }
 }

examples/docs/resources/mobile-first/menus.js

@@ -29,6 +29,7 @@ export const cmpMenus = [
     labelEn: 'Container',
     key: 'cmp_container',
     children: [
+      { name: 'Cell', nameCn: '单元格', key: 'cell' },
       { name: 'ActionSheet', nameCn: '动作面板', key: 'action-sheet' },
       { name: 'Drawer', nameCn: '抽屉', key: 'drawer' },
       { name: 'Card', nameCn: '卡片', key: 'card' },

examples/docs/vite-plugins/vite-plugin-uno-preset.ts

@@ -191,9 +191,9 @@ const colorRules = [
   [/^(c|bg)-([\w|-]+)$/, ([, attr, color]) => ({ [`${_s5[attr]}`]: `var(--${color})` })],
   [/^(c|bg)#(\w+)$/, ([, attr, color]) => ({ [`${_s5[attr]}`]: `#${color}` })]
 ]
-export const rules = [...sizeRules, ...layoutRules, ...fontRules, ...borderRules, ...utilRules, ...colorRules]
+export const rules: any[] = [...sizeRules, ...layoutRules, ...fontRules, ...borderRules, ...utilRules, ...colorRules]
 
-export const shortcuts = [
+export const shortcuts: any[] = [
   [/^(m|p)x(-?\d+)$/, ([, t, c]) => `${t}l${c} ${t}r${c}`],
   [/^(m|p)y(-?\d+)$/, ([, t, c]) => `${t}t${c} ${t}b${c}`],
 

examples/sites/.prettierrc

@@ -11,6 +11,7 @@
   "useTabs": false,
   "tabWidth": 2,
   "proseWrap": "preserve",
+  "arrowParens": "always",
   "overrides": [
     {
       "files": ".prettierrc",
@@ -19,4 +20,4 @@
       }
     }
   ]
-}
+}

examples/sites/README.md

@@ -1,56 +0,0 @@
-## @opentiny/tiny-toolkit-docs 套件说明  2023.3.11
-
-### 1.项目技术架构
-1.  vite + vue3 + naive UI
-2.  特色：
-    - 支持 md 格式文档！
-    - 国际化切换、主题切换、配置/非配置化文档切换！
-    - 支持组件的 demo 导航，API 属性向 demo 跳转！
-    - 支持单列 demo 及 2 列 demo 展示！
-
-### 2. 启动命令说明：
-`tiny start` -----> 启动新官网
-
-### 4.项目部署
-
-tiny build之后，套件前台工程部署完成后
-
-在server仓库中配置相应路由 仓库： https://codehub-g.huawei.com/Tiny/tiny-club/tinyui-design-server/files?ref=master    
-                        
-再部署 tinyui-design-server 流水线： https://fuxi.huawei.com/mine/components/10089577/pipeline/list/259496
-
-测试环境验证： https://tinyuidesign-alpha.cloudbu.huawei.com/
-
-内网环境验证： https://tinyuidesign.cloudbu.huawei.com/
-
-
-
-### 5. 更换环境时
-
-1、检查 env 中的context变量
-2、检查 viteconfig 中的base路径
-
-
-### Angular官网 自适应方案 2023.1.4 
-
-#### 1.屏幕宽度为`1920px`以下时
-
-a. 总览组件单行显示4个
-
-#### 2.屏幕宽度为`1280px`以下时
-
-a. 组件示例和文档页面，隐藏快速导航
-
-b. 总览组件单行显示2个
-
-#### 3.屏幕宽度为`1024px`以下时
-
-a. 页面整体隐藏左侧菜单
-
-#### 4.屏幕宽度为`768px`以下时
-
-a. 组件示例页面，代码示例单行显示
-
-#### 图片说明：
-
-![layout](public/images/layout.png)

examples/sites/demos/app/action-menu/webdoc/action-menu.js

@@ -124,7 +124,7 @@ export default {
         },
         {
           'name': 'label',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '菜单项的显示值', 'en-US': 'Display value of a menu item' },
           'demoId': 'basic-usage'
@@ -138,14 +138,14 @@ export default {
         },
         {
           'name': 'divided',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': 'false',
           'desc': { 'zh-CN': '显示分割线。默认值：false', 'en-US': 'Displays the split line. Default value: false' },
           'demoId': 'basic-usage'
         },
         {
           'name': 'disabled',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
             'zh-CN': '是否禁用。默认：false',
@@ -155,7 +155,7 @@ export default {
         },
         {
           'name': 'text-field',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': 'label',
           'desc': {
             'zh-CN': '设置菜单按钮显示文本的键值,默认值为 label',
@@ -165,7 +165,7 @@ export default {
         },
         {
           'name': 'more-text',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '更多',
           'desc': {
             'zh-CN': '配置下拉按钮显示文本,默认值为“更多”',
@@ -175,7 +175,7 @@ export default {
         },
         {
           'name': 'spacing',
-          'type': '[String,Number]',
+          'type': '[string,number]',
           'defaultValue': '5px',
           'desc': {
             'zh-CN': '配置菜单按钮之间的间距,默认值为 5px',
@@ -185,7 +185,7 @@ export default {
         },
         {
           'name': 'popper-class',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '设置下拉面板的类名，自定义样式',
@@ -195,7 +195,7 @@ export default {
         },
         {
           'name': 'max-show-num',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '2',
           'desc': {
             'zh-CN': ' 配置显示菜单按钮的最大个数，默认值为2',
@@ -208,10 +208,10 @@ export default {
         {
           'name': 'item-click',
           'type': 'Function',
-          'defaultValue': 'Function(data:Object)',
+          'defaultValue': 'Function(data:object)',
           'desc': {
             'zh-CN':
-              '当选中菜单项时触发。返回数据data为Object类型，对象包含字段 itemData 和 vm 字段，itemData 为当前选中项的数据（仅配置式时生效），vm 为当前选中项的实例',
+              '当选中菜单项时触发。返回数据data为object类型，对象包含字段 itemData 和 vm 字段，itemData 为当前选中项的数据（仅配置式时生效），vm 为当前选中项的实例',
             'en-US':
               'The itemClick event is triggered when a menu item is selected. The transferred parameter is the data of the selected item.'
           },

examples/sites/demos/app/alert/base-composition-api.vue

@@ -3,10 +3,12 @@
     <tiny-alert description="type 为默认值 success"></tiny-alert>
     <tiny-alert type="error" description="type 为 error"></tiny-alert>
     <tiny-alert type="info" description="type 为 info"></tiny-alert>
-    <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
+    <tiny-alert type="warning">
+      <template #description> type 为 warning </template>
+    </tiny-alert>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Alert as TinyAlert } from '@opentiny/vue'
 </script>

examples/sites/demos/app/alert/base.vue

@@ -3,11 +3,13 @@
     <tiny-alert description="type 为默认值 success"></tiny-alert>
     <tiny-alert type="error" description="type 为 error"></tiny-alert>
     <tiny-alert type="info" description="type 为 info"></tiny-alert>
-    <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
+    <tiny-alert type="warning">
+      <template #description> type 为 warning </template>
+    </tiny-alert>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Alert } from '@opentiny/vue'
 
 export default {

examples/sites/demos/app/alert/center-composition-api.vue

@@ -2,6 +2,6 @@
   <tiny-alert center description="文字居中"></tiny-alert>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Alert as TinyAlert } from '@opentiny/vue'
 </script>

examples/sites/demos/app/alert/center.vue

@@ -2,7 +2,7 @@
   <tiny-alert center description="文字居中"></tiny-alert>
 </template>
 
-<script lang="jsx">
+<script>
 import { Alert } from '@opentiny/vue'
 
 export default {

examples/sites/demos/app/alert/closable-composition-api.vue

@@ -1,10 +0,0 @@
-<template>
-  <div>
-    <tiny-alert description="closable 默认值为 true"></tiny-alert>
-    <tiny-alert :closable="false" description="closable 设置为 false"></tiny-alert>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { Alert as TinyAlert } from '@opentiny/vue'
-</script>

examples/sites/demos/app/alert/closable.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('测试 Alert 不可关闭', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/alert/closable')
-
-  // 关闭按钮不存在
-  const noClosable = page.locator('.tiny-alert').last()
-  await expect(noClosable.locator('.tiny-alert__close')).toHaveCount(0)
-})

examples/sites/demos/app/alert/closable.vue

@@ -1,16 +0,0 @@
-<template>
-  <div>
-    <tiny-alert description="closable 默认值为 true"></tiny-alert>
-    <tiny-alert :closable="false" description="closable 设置为 false"></tiny-alert>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Alert } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyAlert: Alert
-  }
-}
-</script>

examples/sites/demos/app/alert/close-composition-api.vue

@@ -1,11 +0,0 @@
-<template>
-  <tiny-alert description="自定义的 close 事件" @close="close"></tiny-alert>
-</template>
-
-<script setup lang="jsx">
-import { Alert as TinyAlert, Modal } from '@opentiny/vue'
-
-function close() {
-  Modal.message('关闭了')
-}
-</script>

examples/sites/demos/app/alert/close-text-composition-api.vue

@@ -1,15 +0,0 @@
-<template>
-  <div>
-    <tiny-alert description="默认关闭按钮"></tiny-alert>
-    <tiny-alert description="关闭按钮自定义文本" close-text="关闭" @close="close"></tiny-alert>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { Alert as TinyAlert } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
-
-function close() {
-  alert('关闭了')
-}
-</script>

examples/sites/demos/app/alert/close-text.spec.ts

@@ -1,18 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('测试 Alert 自定义关闭按钮文本', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/alert/close-text')
-
-  const alert = page.locator('.tiny-alert')
-  const closeText = alert.last().locator('.is-custom')
-
-  // 关闭按钮不存在，关闭文字展示
-  await expect(alert.locator('.tiny-alert__close')).toHaveCount(0)
-  await expect(closeText).toHaveCount(1)
-  await expect(closeText).toHaveText(/关闭/)
-
-  // 关闭文字点击可关闭警告,页面只剩一个alert
-  await closeText.click()
-  await expect(alert).toHaveCount(1)
-})

examples/sites/demos/app/alert/close-text.vue

@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <tiny-alert description="默认关闭按钮"></tiny-alert>
-    <tiny-alert description="关闭按钮自定义文本" close-text="关闭" @close="close"></tiny-alert>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Alert } from '@opentiny/vue'
-import { alert } from '@opentiny/vue-modal'
-
-export default {
-  components: {
-    TinyAlert: Alert
-  },
-  methods: {
-    close() {
-      alert('关闭了')
-    }
-  }
-}
-</script>

examples/sites/demos/app/alert/close.spec.ts

@@ -1,14 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('测试 Alert 关闭事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/alert/close-events')
-
-  const alert = page.locator('.tiny-alert')
-  const close = alert.locator('.tiny-alert__close')
-
-  // 点击关闭后警告消失，自定义事件modalBox提示出现
-  await close.click()
-  await expect(alert).toBeHidden()
-  await expect(page.locator('.tiny-modal__box')).toBeVisible()
-})

examples/sites/demos/app/alert/close.vue

@@ -1,18 +0,0 @@
-<template>
-  <tiny-alert description="自定义的 close 事件" @close="close"></tiny-alert>
-</template>
-
-<script lang="jsx">
-import { Alert, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyAlert: Alert
-  },
-  methods: {
-    close() {
-      Modal.message('关闭了')
-    }
-  }
-}
-</script>

examples/sites/demos/app/alert/custom-close-composition-api.vue

@@ -1,20 +1,27 @@
 <template>
   <div>
     <tiny-button @click="show = !show">显示或隐藏警告</tiny-button>
-    <tiny-alert description="type 为默认值 success" v-show="show" :closable="false">
+    <tiny-alert description="自定义关闭按钮" v-show="show" :closable="false">
       <template #close>
         <tiny-icon-close-circle @click="show = !show"></tiny-icon-close-circle>
       </template>
     </tiny-alert>
+    <tiny-alert type="error" description="关闭按钮自定义文本" close-text="关闭" ></tiny-alert>
+    <tiny-alert type="warning" description="自定义的 close 事件" @close="close"></tiny-alert>
+    <tiny-alert :closable="false" description="closable 设置为 false, 不可关闭"></tiny-alert>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup >
 import { ref } from 'vue'
-import { Button as TinyButton, Alert as TinyAlert } from '@opentiny/vue'
+import { Button as TinyButton, Alert as TinyAlert, Modal } from '@opentiny/vue'
 import { iconCloseCircle } from '@opentiny/vue-icon'
 
 const show = ref(true)
 
 const TinyIconCloseCircle = iconCloseCircle()
+
+const close = () => {
+  Modal.message('关闭了')
+}
 </script>

examples/sites/demos/app/alert/custom-close.spec.ts

@@ -25,3 +25,37 @@ test('自定义关闭图标，控制警告的再次显示或隐藏', async ({ pa
   await btn.click()
   await expect(alertSuccess).toBeVisible()
 })
+
+test('关闭按钮事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/alert/custom-close')
+
+  const alertWarning = page.locator('.tiny-alert')
+  const close = alertWarning.locator('.tiny-alert__close')
+
+  // 点击关闭后警告消失，自定义事件modalBox提示出现
+  await close.click()
+  await expect(alertWarning).toBeHidden()
+  await expect(page.locator('.tiny-modal__box')).toBeVisible()
+})
+
+test('自定义关闭按钮文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/alert/custom-close')
+
+  const alertError = page.locator('.tiny-alert')
+  const closeText = alertError.locator('.tiny-alert__close')
+
+  // 自定义按钮文字
+  await expect(alertError.locator('.tiny-alert__close')).not.toBeVisible()
+  await expect(closeText).toBeVisible()
+})
+
+test('不可关闭警告', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/alert/custom-close')
+
+  // 关闭按钮不存在
+  const noClosable = page.locator('.tiny-alert').last()
+  await expect(noClosable.locator('.tiny-alert__close')).toHaveCount(0)
+})

examples/sites/demos/app/alert/custom-close.vue

@@ -1,16 +1,19 @@
 <template>
   <div>
     <tiny-button @click="show = !show">显示或隐藏警告</tiny-button>
-    <tiny-alert description="type 为默认值 success" v-show="show" :closable="false">
+    <tiny-alert description="自定义关闭按钮" v-show="show" :closable="false">
       <template #close>
         <icon-close-circle @click="show = !show"></icon-close-circle>
       </template>
     </tiny-alert>
+    <tiny-alert type="error" description="关闭按钮自定义文本" close-text="关闭"></tiny-alert>
+    <tiny-alert type="warning" description="自定义的 close 事件" @close="close"></tiny-alert>
+    <tiny-alert :closable="false" description="closable 设置为 false, 不可关闭"></tiny-alert>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
-import { Button, Alert } from '@opentiny/vue'
+import { Button, Alert, Modal } from '@opentiny/vue'
 import { iconCloseCircle } from '@opentiny/vue-icon'
 
 export default {
@@ -23,6 +26,11 @@ export default {
     return {
       show: true
     }
+  },
+  methods: {
+    close() {
+      Modal.message('关闭了')
+    }
   }
 }
 </script>

examples/sites/demos/app/alert/custom-description-composition-api.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <tiny-alert size="large" description="size 为 large 时根据 description 属性自定义内容"></tiny-alert>
-    <br />
-    <tiny-alert size="large">
-      <template #description> size 为 large 时根据 description slot 自定义内容 </template>
-    </tiny-alert>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { Alert as TinyAlert } from '@opentiny/vue'
-</script>

examples/sites/demos/app/alert/custom-description.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('测试 Alert 自定义提示内容', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/alert/custom-description')
-
-  // size为large时，才可自定义提示内容
-  const largeAlert = page.locator('.tiny-alert--large').first()
-  const description = largeAlert.locator('.tiny-alert__description')
-  await expect(description).toBeVisible()
-})

examples/sites/demos/app/alert/custom-description.vue

@@ -1,19 +0,0 @@
-<template>
-  <div>
-    <tiny-alert size="large" description="size 为 large 时根据 description 属性自定义内容"></tiny-alert>
-    <br />
-    <tiny-alert size="large">
-      <template #description> size 为 large 时根据 description slot 自定义内容 </template>
-    </tiny-alert>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Alert } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyAlert: Alert
-  }
-}
-</script>

examples/sites/demos/app/alert/feedback-of-result-composition-api.vue

@@ -1,19 +0,0 @@
-<template>
-  <div>
-    <tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
-      <a href="javascript: void(0);">继续提交</a>
-      <a href="javascript: void(0);">取消操作</a>
-    </tiny-alert>
-    <br />
-    <tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
-    <br />
-    <tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
-      <a href="javascript: void(0);">继续提交</a>
-      <a href="javascript: void(0);">取消操作</a>
-    </tiny-alert>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { Alert as TinyAlert } from '@opentiny/vue'
-</script>

examples/sites/demos/app/alert/feedback-of-result.spec.ts

@@ -1,14 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('测试 Alert 表单提交结果反馈', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/alert/feedback-of-result')
-
-  // size为large时可通过description和插槽渲染反馈界面
-  const alert = page.locator('.tiny-alert--large').first()
-  const description = alert.locator('.tiny-alert__description')
-  const opration = alert.locator('.tiny-alert__opration')
-
-  await expect(description).toBeVisible()
-  await expect(opration).toBeVisible()
-})

examples/sites/demos/app/alert/feedback-of-result.vue

@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <tiny-alert type="success" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
-      <a href="javascript: void(0);">继续提交</a>
-      <a href="javascript: void(0);">取消操作</a>
-    </tiny-alert>
-    <br />
-    <tiny-alert type="error" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。"></tiny-alert>
-    <br />
-    <tiny-alert type="warning" size="large" description="提交结果页用于反馈一系列操作任务的处理结果。">
-      <a href="javascript: void(0);">继续提交</a>
-      <a href="javascript: void(0);">取消操作</a>
-    </tiny-alert>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Alert } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyAlert: Alert
-  }
-}
-</script>

examples/sites/demos/app/alert/icon.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Alert } from '@opentiny/vue'
 import { IconBoat } from '@opentiny/vue-icon'
 

examples/sites/demos/app/alert/show-icon-composition-api.vue

@@ -5,6 +5,6 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Alert as TinyAlert } from '@opentiny/vue'
 </script>

examples/sites/demos/app/alert/show-icon.vue

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

examples/sites/demos/app/alert/size-composition-api.vue

@@ -5,6 +5,6 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Alert as TinyAlert } from '@opentiny/vue'
 </script>

examples/sites/demos/app/alert/size.vue

@@ -1,16 +0,0 @@
-<template>
-  <div>
-    <tiny-alert size="normal" description="size 为 normal"></tiny-alert>
-    <tiny-alert size="large" title="size 为 large"></tiny-alert>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Alert } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyAlert: Alert
-  }
-}
-</script>

examples/sites/demos/app/alert/slot-default-composition-api.vue

@@ -23,7 +23,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Alert as TinyAlert } from '@opentiny/vue'
 </script>
 

examples/sites/demos/app/alert/slot-default.vue

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

examples/sites/demos/app/alert/title-composition-api.vue

@@ -8,6 +8,6 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Alert as TinyAlert } from '@opentiny/vue'
 </script>

examples/sites/demos/app/alert/title.vue

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

examples/sites/demos/app/alert/type-composition-api.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <tiny-alert description="type 为默认值 success"></tiny-alert>
-    <tiny-alert type="info" description="type 为 info"></tiny-alert>
-    <tiny-alert type="error" description="type 为 error"></tiny-alert>
-    <tiny-alert type="success" description="type 为 success"></tiny-alert>
-    <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { Alert as TinyAlert } from '@opentiny/vue'
-</script>

examples/sites/demos/app/alert/type.spec.ts

@@ -1,69 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('测试success类型警告', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/alert/type')
-
-  const successAlert = page.locator('.tiny-alert--success').first()
-  const icon = successAlert.locator('.tiny-alert__icon').first()
-  const close = successAlert.locator('.tiny-alert__close')
-
-  await expect(successAlert).toHaveCSS(
-    'background',
-    'rgb(237, 255, 249) none repeat scroll 0% 0% / auto padding-box border-box'
-  )
-  await expect(successAlert).toHaveCSS('border-color', 'rgb(172, 242, 220)')
-  await expect(icon).toHaveCSS('fill', 'rgb(80, 212, 171)')
-  await expect(close).toHaveCSS('fill', 'rgb(80, 212, 171)')
-})
-
-test('测试info类型警告', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/alert/type')
-
-  const infoAlert = page.locator('.tiny-alert--info')
-  const icon = infoAlert.locator('.tiny-alert__icon').first()
-  const close = infoAlert.locator('.tiny-alert__close')
-
-  await expect(infoAlert).toHaveCSS(
-    'background',
-    'rgb(235, 246, 255) none repeat scroll 0% 0% / auto padding-box border-box'
-  )
-  await expect(infoAlert).toHaveCSS('border-color', 'rgb(190, 204, 250)')
-  await expect(icon).toHaveCSS('fill', 'rgb(94, 124, 224)')
-  await expect(close).toHaveCSS('fill', 'rgb(94, 124, 224)')
-})
-
-test('测试error类型警告', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/alert/type')
-
-  const errorAlert = page.locator('.tiny-alert--error')
-  const icon = errorAlert.locator('.tiny-alert__icon').first()
-  const close = errorAlert.locator('.tiny-alert__close')
-
-  await expect(errorAlert).toHaveCSS(
-    'background',
-    'rgb(255, 238, 237) none repeat scroll 0% 0% / auto padding-box border-box'
-  )
-  await expect(errorAlert).toHaveCSS('border-color', 'rgb(255, 188, 186)')
-  await expect(icon).toHaveCSS('fill', 'rgb(246, 111, 106)')
-  await expect(close).toHaveCSS('fill', 'rgb(246, 111, 106)')
-})
-
-test('测试warning类型警告', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/alert/type')
-
-  const warningAlert = page.locator('.tiny-alert--warning')
-  const icon = warningAlert.locator('.tiny-alert__icon').first()
-  const close = warningAlert.locator('.tiny-alert__close')
-
-  await expect(warningAlert).toHaveCSS(
-    'background',
-    'rgb(255, 243, 232) none repeat scroll 0% 0% / auto padding-box border-box'
-  )
-  await expect(warningAlert).toHaveCSS('border-color', 'rgb(255, 208, 166)')
-  await expect(icon).toHaveCSS('fill', 'rgb(250, 152, 65)')
-  await expect(close).toHaveCSS('fill', 'rgb(250, 152, 65)')
-})

examples/sites/demos/app/alert/type.vue

@@ -1,19 +0,0 @@
-<template>
-  <div>
-    <tiny-alert description="type 为默认值 success"></tiny-alert>
-    <tiny-alert type="info" description="type 为 info"></tiny-alert>
-    <tiny-alert type="error" description="type 为 error"></tiny-alert>
-    <tiny-alert type="success" description="type 为 success"></tiny-alert>
-    <tiny-alert type="warning" description="type 为 warning"></tiny-alert>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Alert } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyAlert: Alert
-  }
-}
-</script>

examples/sites/demos/app/alert/webdoc/alert.js

@@ -5,23 +5,17 @@ export default {
     {
       'demoId': 'base',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN':
+          '通过 <code>type</code> 设置不同的类型 可选值：success、warning、info、error，默认值：success。<br> 通过 <code>description</code> 属性或插槽设置自定义提示内容。',
+        'en-US':
+          'Set different types through <code>type</code>. The options are success, warning, info, and error. The default value is success. <br/> You can customize the prompt content through the <code>description</code> attribute or slot. '
+      },
       'codeFiles': ['base.vue']
     },
-    {
-      'demoId': 'type',
-      'name': { 'zh-CN': '类型', 'en-US': 'Type' },
-      'desc': {
-        'zh-CN':
-          '<p>通过 <code>type</code> 设置不同的类型。可选值：success、warning、info、error，默认值：success 。</p>\n',
-        'en-US':
-          '<p>Set different types through <code>type</code>. The options are success, warning, info, and error. The default value is success. </p>\n'
-      },
-      'codeFiles': ['type.vue']
-    },
     {
       'demoId': 'size',
-      'name': { 'zh-CN': '大尺寸', 'en-US': 'Large Size' },
+      'name': { 'zh-CN': '尺寸', 'en-US': 'Size' },
       'desc': {
         'zh-CN': '<p>通过 <code>size</code> 属性设置不同的尺寸，可选值：nomal、large，默认值：nomal 。</p>\n',
         'en-US':
@@ -34,7 +28,7 @@ export default {
       'name': { 'zh-CN': '自定义标题', 'en-US': 'Custom Title' },
       'desc': {
         'zh-CN':
-          '<p>当 <code>size</code> 为 large 时显示标题，可设置 <code>title</code> 或 <code>slot</code> 自定义标题。默认标题根据设置的 <code>type</code> 显示。</p>\n',
+          '<p>当 <code>size</code> 为 large 时显示标题，可设置 <code>title</code> 或 <code>title</code> 插槽自定义标题。默认标题根据设置的 <code>type</code> 显示。</p>\n',
         'en-US':
           '<p>When <code>size</code> is set to large, the title is displayed. You can set <code>title</code> or <code>slot</code> to customize the title. The default title is displayed according to the set <code>type</code>. </p>\n'
       },
@@ -49,15 +43,6 @@ export default {
       },
       'codeFiles': ['center.vue']
     },
-    {
-      'demoId': 'close-text',
-      'name': { 'zh-CN': '自定义关闭按钮文本', 'en-US': 'Customize the close button text' },
-      'desc': {
-        'zh-CN': '<p>通过属性 <code>close-text</code> 自定义关闭按钮文本。</p>\n',
-        'en-US': '<p>Customize the close button text through the <code>close-text</code> attribute. </p>\n'
-      },
-      'codeFiles': ['close-text.vue']
-    },
     {
       'demoId': 'icon',
       'name': { 'zh-CN': '自定义警告图标', 'en-US': 'Customized warning icon' },
@@ -67,26 +52,6 @@ export default {
       },
       'codeFiles': ['icon.vue']
     },
-    {
-      'demoId': 'closable',
-      'name': { 'zh-CN': '不可关闭', 'en-US': 'Cannot be closed' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>closable</code> 属性可设置是否显示关闭按钮，没有关闭按钮，警告框将不可关闭。</p>\n',
-        'en-US':
-          '<p>You can set whether to display the close button through the <code>closable</code> attribute. If there is no close button, the warning box cannot be closed. </p>\n'
-      },
-      'codeFiles': ['closable.vue']
-    },
-    {
-      'demoId': 'custom-description',
-      'name': { 'zh-CN': '自定义提示内容', 'en-US': 'Customized prompt content' },
-      'desc': {
-        'zh-CN': '<p>可通过 <code>description</code> 属性或插槽设置自定义提示内容。</p>\n',
-        'en-US':
-          '<p>You can customize the prompt content through the <code>description</code> attribute or slot. </p>\n'
-      },
-      'codeFiles': ['custom-description.vue']
-    },
     {
       'demoId': 'slot-default',
       'name': { 'zh-CN': '自定义交互操作', 'en-US': 'Customized Interaction' },
@@ -96,26 +61,6 @@ export default {
       },
       'codeFiles': ['slot-default.vue']
     },
-    {
-      'demoId': 'close-events',
-      'name': { 'zh-CN': '关闭事件', 'en-US': 'Close Event' },
-      'desc': {
-        'zh-CN': '<p><code>close</code> 事件，关闭警告框时触发。</p>\n',
-        'en-US': '<p><code>close</code> event, triggered when the warning dialog box is closed. </p>\n'
-      },
-      'codeFiles': ['close.vue']
-    },
-    {
-      'demoId': 'feedback-of-result',
-      'name': { 'zh-CN': '表单提交结果反馈', 'en-US': 'Form submission result feedback' },
-      'desc': {
-        'zh-CN':
-          '<p>当 <code>size</code> 为 large时，属性 <code>description</code> 和默认插槽结合使用，可渲染提交反馈界面。</p>\n',
-        'en-US':
-          '<p>When <code>size</code> is set to large, the <code>description</code> attribute is used together with the default slot to render the feedback submission interface. </p>\n'
-      },
-      'codeFiles': ['feedback-of-result.vue']
-    },
     {
       'demoId': 'show-icon',
       'name': { 'zh-CN': '是否显示图标', 'en-US': 'Display icon' },
@@ -127,10 +72,12 @@ export default {
     },
     {
       'demoId': 'custom-close',
-      'name': { 'zh-CN': '自定义关闭按钮', 'en-US': '' },
+      'name': { 'zh-CN': '关闭按钮', 'en-US': 'custom close button' },
       'desc': {
-        'zh-CN': '<p>通过配置 <code>close</code> 插槽自定义关闭按钮,当 <code>closable</code> 属性为false时有效</p>\n',
+        'zh-CN':
-        'en-US': ''
+          '<p>通过 <code>closable</code> 属性可设置是否显示关闭按钮，没有关闭按钮，警告框将不可关闭。<br/>通过配置 <code>close</code> 插槽自定义关闭按钮,当 <code>closable</code> 属性为false时有效 <br/> 通过属性 <code>close-text</code> 自定义关闭按钮文本。</p>\n',
+        'en-US':
+          'You can set whether to display the close button through the <code>closable</code> attribute. If there is no close button, the warning box cannot be closed. <br/> Customize the close button by configuring the <code>close</code> slot. This parameter is valid when the <code>closable</code> attribute is false.<br/> Customize the close button text through the <code>close-text</code> attribute.'
       },
       'codeFiles': ['custom-close.vue']
     }
@@ -139,18 +86,42 @@ export default {
     {
       'name': 'alert',
       'type': 'component',
-      'properties': [
+      'props': [
+        {
+          'name': 'center',
+          'type': 'boolean',
+          'defaultValue': '该属性的默认值为 false',
+          'desc': { 'zh-CN': '文字是否居中', 'en-US': 'Whether the text is centered' },
+          'demoId': 'center'
+        },
         {
           'name': 'closable',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 true',
           'desc': { 'zh-CN': '设置警告是否可以关闭', 'en-US': 'Set whether alarms can be disabled.' },
-          'demoId': 'closable'
+          'demoId': 'custom-close'
+        },
+        {
+          'name': 'close-text',
+          'type': 'string',
+          'defaultValue': '--',
+          'desc': { 'zh-CN': '关闭按钮自定义文本', 'en-US': 'Customized text of the close button' },
+          'demoId': 'custom-close'
+        },
+        {
+          'name': 'description',
+          'type': 'string',
+          'defaultValue': '--',
+          'desc': {
+            'zh-CN': '设置警告的提示内容，默认为空;',
+            'en-US': 'Set the warning prompt content. The default value is null.'
+          },
+          'demoId': 'base'
         },
         {
           'name': 'icon',
-          'type': 'String , Object',
+          'type': 'string , object',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '设置警告的图标，默认会根据 type 值自动使用对应图标',
             'en-US':
@@ -158,9 +129,16 @@ export default {
           },
           'demoId': 'icon'
         },
+        {
+          'name': 'show-icon',
+          'type': 'boolean',
+          'defaultValue': '该属性的默认值为 true',
+          'desc': { 'zh-CN': '是否显示图标', 'en-US': 'Display icon' },
+          'demoId': 'show-icon'
+        },
         {
           'name': 'size',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '该属性的默认值为 normal',
           'desc': {
             'zh-CN': '设置警告的大小 nomal/large， 缺省为 nomal。;该属性的可选值为 nomal / large',
@@ -171,8 +149,8 @@ export default {
         },
         {
           'name': 'title',
-          'type': 'String',
+          'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '设置警告的标题，在 size 为 large 时有效，默认根据 type 自动设置',
             'en-US':
@@ -182,59 +160,35 @@ export default {
         },
         {
           'name': 'type',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '该属性的默认值为 success',
           'desc': {
             'zh-CN': '设置警告的类型;该属性的可选值为 success/warning/info/error',
             'en-US': 'Set the alarm type. The value of this attribute can be success / warning / info / error'
           },
-          'demoId': 'type'
+          'demoId': 'base'
-        },
-        {
-          'name': 'description',
-          'type': 'String',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '设置警告的提示内容，默认为空;',
-            'en-US': 'Set the warning prompt content. The default value is null.'
-          },
-          'demoId': 'custom-description'
-        },
-        {
-          'name': 'center',
-          'type': 'Boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '文字是否居中', 'en-US': 'Whether the text is centered' },
-          'demoId': 'center'
-        },
-        {
-          'name': 'close-text',
-          'type': 'String',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '关闭按钮自定义文本', 'en-US': 'Customized text of the close button' },
-          'demoId': 'close-text'
-        },
-        {
-          'name': 'show-icon',
-          'type': 'Boolean',
-          'defaultValue': '该属性的默认值为 true',
-          'desc': { 'zh-CN': '是否显示图标', 'en-US': 'Display icon' },
-          'demoId': 'show-icon'
         }
       ],
       'events': [
         {
           'name': 'close',
-          'type': '',
+          'type': 'Function()',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '关闭 alert 时触发的事件',
             'en-US': 'Event triggered when the alert function is disabled'
           },
-          'demoId': 'close-events'
+          'demoId': 'custom-close'
         }
       ],
       'slots': [
+        {
+          'name': 'close',
+          'type': '',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '自定义关闭按钮，当 closable 属性为 false 时有效', 'en-US': '' },
+          'demoId': 'custom-close'
+        },
         {
           'name': 'default',
           'type': '',
@@ -242,26 +196,19 @@ export default {
           'desc': { 'zh-CN': '组件默认插槽', 'en-US': 'Default slot of the component' },
           'demoId': 'slot-default'
         },
+        {
+          'name': 'description',
+          'type': '',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '提示内容', 'en-US': 'Prompt Content' },
+          'demoId': 'base'
+        },
         {
           'name': 'title',
           'type': '',
           'defaultValue': '',
           'desc': { 'zh-CN': '标题的内容', 'en-US': 'Title content' },
           'demoId': 'title'
-        },
-        {
-          'name': 'description',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '提示内容', 'en-US': 'Prompt Content' },
-          'demoId': 'custom-description'
-        },
-        {
-          'name': 'close',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '自定义关闭按钮，当 closable 属性为 false 时有效', 'en-US': '' },
-          'demoId': 'custom-close'
         }
       ]
     }

examples/sites/demos/app/amount/webdoc/amount.js

@@ -13,9 +13,9 @@ export default {
       'name': { 'zh-CN': '设置日期', 'en-US': 'Set Date' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>date</code> 属性设置日期后，将会在金额组件中显示日期框。值可设置为 String 或者 Date() 类型。\n通过 <code>change</code> 获取改变后的值。</p>\n',
+          '<p>通过 <code>date</code> 属性设置日期后，将会在金额组件中显示日期框。值可设置为 string 或者 Date() 类型。\n通过 <code>change</code> 获取改变后的值。</p>\n',
         'en-US':
-          '<p>After the date is set through the <code>date</code> attribute, the date box is displayed in the amount component. The value can be of the String or Date() type. \n Obtain the changed value through <code>change</code>. </p>\n'
+          '<p>After the date is set through the <code>date</code> attribute, the date box is displayed in the amount component. The value can be of the string or Date() type. \n Obtain the changed value through <code>change</code>. </p>\n'
       },
       'codeFiles': ['set-date.vue']
     },
@@ -78,21 +78,21 @@ export default {
       'properties': [
         {
           'name': 'placeholder',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '当数据为空时的占位符', 'en-US': 'Placeholder when data is empty' },
           'demoId': 'custom-service'
         },
         {
           'name': 'size',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '设置组件大小', 'en-US': 'Set the component size' },
           'demoId': 'size'
         },
         {
           'name': 'format',
-          'type': 'Object',
+          'type': 'object',
           'defaultValue': '',
           'desc': {
             'zh-CN':
@@ -104,14 +104,14 @@ export default {
         },
         {
           'name': 'currency',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '该属性的默认值为 CNY',
           'desc': { 'zh-CN': '', 'en-US': '' },
           'demoId': 'custom-currency'
         },
         {
           'name': 'digits',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '该属性的默认值为 2',
           'desc': {
             'zh-CN': '设置小数点位数，默认为 2 位。',
@@ -121,18 +121,18 @@ export default {
         },
         {
           'name': 'date',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置弹出框内显示日期框。值可设置为 String 或者 Date() 类型。',
+            'zh-CN': '设置弹出框内显示日期框。值可设置为 string 或者 Date() 类型。',
             'en-US':
-              'Set the date box to be displayed in the pop-up box. The value can be of the String or Date() type.'
+              'Set the date box to be displayed in the pop-up box. The value can be of the string or Date() type.'
           },
           'demoId': 'set-date'
         },
         {
           'name': 'disabled',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 false',
           'desc': {
             'zh-CN': '设置是否禁用，默认为 false。',
@@ -142,7 +142,7 @@ export default {
         },
         {
           'name': 'max-len',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '该属性的默认值为 15',
           'desc': {
             'zh-CN': '整数位最大长度，默认为 15 位。',
@@ -152,7 +152,7 @@ export default {
         },
         {
           'name': 'negative',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '',
           'desc': {
             'zh-CN': '是否可为负数，默认为 true ，可设为负数。',
@@ -163,7 +163,7 @@ export default {
         },
         {
           'name': 'popper-class',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
@@ -173,7 +173,7 @@ export default {
         },
         {
           'name': 'popper-append-to-body',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 true',
           'desc': {
             'zh-CN':
@@ -185,14 +185,14 @@ export default {
         },
         {
           'name': 'value',
-          'type': 'String , Number',
+          'type': 'string , number',
           'defaultValue': '',
           'desc': { 'zh-CN': '设置金额组件的值。', 'en-US': 'Set the value of the amount component.' },
           'demoId': 'digits-maxlen'
         },
         {
           'name': 'rounding',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '',
           'desc': { 'zh-CN': '控制输入金额四舍五入。', 'en-US': 'Controls the rounding of the input amount.' },
           'demoId': 'digits-maxlen'
@@ -210,7 +210,7 @@ export default {
         },
         {
           'name': 'fields',
-          'type': 'Object',
+          'type': 'object',
           'defaultValue': '',
           'desc': {
             'zh-CN': '自定义金额组件数据映射，在没有使用框架服务时必填',

examples/sites/demos/app/anchor/on-change-composition-api.vue

@@ -4,8 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Anchor as TinyAnchor } from '@opentiny/vue'
+import { Anchor as TinyAnchor, Modal } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
 
 const links = ref([
   {
@@ -43,6 +42,6 @@ const links = ref([
 ])
 
 function handleChange(link) {
-  message(`change${link}`)
+  Modal.message(`change${link}`)
 }
 </script>

examples/sites/demos/app/anchor/on-change.vue

@@ -3,8 +3,7 @@
 </template>
 
 <script>
-import { Anchor } from '@opentiny/vue'
+import { Anchor, Modal } from '@opentiny/vue'
-import { message } from '@opentiny/vue-modal'
 
 export default {
   components: {
@@ -50,7 +49,7 @@ export default {
   },
   methods: {
     handleChange(link) {
-      message(`change${link}`)
+      Modal.message(`change${link}`)
     }
   }
 }

examples/sites/demos/app/anchor/webdoc/anchor.js

@@ -48,14 +48,14 @@ export default {
       'properties': [
         {
           'name': 'container-id',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': 'document.body',
           'desc': { 'zh-CN': '指定滚动容器的id值', 'en-US': 'Specify the scrolling container ID.' },
           'demoId': 'set-container'
         },
         {
           'name': 'is-affix',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': 'false',
           'desc': { 'zh-CN': '固定模式', 'en-US': 'Fixed mode' },
           'demoId': 'is-affix'
@@ -72,7 +72,7 @@ export default {
         },
         {
           'name': 'mask-class',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '自定义滚动的目标元素类名',

examples/sites/demos/app/area/webdoc/area.js

@@ -59,14 +59,14 @@ export default {
       'properties': [
         {
           'name': 'modelValue / v-model',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '设置片区默认值', 'en-US': 'Set the default value of a region.' },
           'demoId': 'basic-usage'
         },
         {
           'name': 'size',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '设置组件大小，可设置值为：medium，small，mini',
@@ -76,14 +76,14 @@ export default {
         },
         {
           'name': 'placeholder',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '当数据为空时的占位符', 'en-US': 'Placeholder when data is empty' },
           'demoId': 'custom-service'
         },
         {
           'name': 'popper-class',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
@@ -93,7 +93,7 @@ export default {
         },
         {
           'name': 'popper-append-to-body',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 true',
           'desc': {
             'zh-CN':
@@ -105,14 +105,14 @@ export default {
         },
         {
           'name': 'disabled',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '',
           'desc': { 'zh-CN': '禁用输入框;默认为 false', 'en-US': 'Disable the text box. The default value is false' },
           'demoId': 'disabled'
         },
         {
           'name': 'props',
-          'type': 'Object',
+          'type': 'object',
           'defaultValue': '',
           'desc': {
             'zh-CN':

examples/sites/demos/app/autocomplete/webdoc/autocomplete.js

@@ -194,28 +194,28 @@ export default {
       'properties': [
         {
           'name': 'clearable',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 false',
           'desc': { 'zh-CN': '是否可清空', 'en-US': 'Whether to clear data' },
           'demoId': 'clearable'
         },
         {
           'name': 'placeholder',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '输入框占位文本', 'en-US': 'Placeholder text in the text box' },
           'demoId': 'hide-loading1'
         },
         {
           'name': 'disabled',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '',
           'desc': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
           'demoId': 'disabled1'
         },
         {
           'name': 'value-key',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '输入建议对象中用于显示的键名',
@@ -225,21 +225,21 @@ export default {
         },
         {
           'name': 'value',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '必填值，输入绑定值', 'en-US': 'This parameter is mandatory. Enter a bound value.' },
           'demoId': 'clearable'
         },
         {
           'name': 'debounce',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '该属性的默认值为 300',
           'desc': { 'zh-CN': '获取输入建议的去抖延时', 'en-US': 'Obtain the recommended input dejitter delay.' },
           'demoId': 'debounce'
         },
         {
           'name': 'placement',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '该属性的默认值为 bottom-start',
           'desc': {
             'zh-CN': '菜单弹出位置;该属性的可选值为 top / top-start / top-end / bottom / bottom-start / bottom-end',
@@ -250,7 +250,7 @@ export default {
         },
         {
           'name': 'popper-class',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': 'Autocomplete 下拉列表的类名',
@@ -260,7 +260,7 @@ export default {
         },
         {
           'name': 'size',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '设置组件大小，可设置为：medium，small，mini',
@@ -270,7 +270,7 @@ export default {
         },
         {
           'name': 'trigger-on-focus',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 true',
           'desc': {
             'zh-CN': '是否在输入框 focus 时显示建议列表',
@@ -280,14 +280,14 @@ export default {
         },
         {
           'name': 'name',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '原生属性', 'en-US': 'Native attribute' },
           'demoId': 'clearable'
         },
         {
           'name': 'select-when-unmatched',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 false',
           'desc': {
             'zh-CN': '在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件',
@@ -298,28 +298,28 @@ export default {
         },
         {
           'name': 'label',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '输入框关联的label文字', 'en-US': 'Label text associated with the text box' },
           'demoId': ''
         },
         {
           'name': 'prefix-icon',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '输入框头部图标', 'en-US': 'Icon on the header of the text box' },
           'demoId': 'custom-icon'
         },
         {
           'name': 'suffix-icon',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '输入框尾部图标', 'en-US': 'Icon at the end of the text box' },
           'demoId': 'custom-icon'
         },
         {
           'name': 'hide-loading',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 false',
           'desc': {
             'zh-CN': '是否隐藏远程加载时的加载图标',
@@ -329,7 +329,7 @@ export default {
         },
         {
           'name': 'popper-append-to-body',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 true',
           'desc': {
             'zh-CN': '是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false',
@@ -351,7 +351,7 @@ export default {
         },
         {
           'name': 'highlight-first-item',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 false',
           'desc': {
             'zh-CN': '是否默认突出显示远程搜索建议中的第一项',

examples/sites/demos/app/badge/webdoc/badge.js

@@ -100,7 +100,7 @@ export default {
       'properties': [
         {
           'name': 'value',
-          'type': 'Number | String',
+          'type': 'number | string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '数据集对象，支持静态及动态数据。;显示值',
@@ -110,26 +110,26 @@ export default {
         },
         {
           'name': 'href',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '指定跳转的目标页面地址。', 'en-US': 'Specify the URL of the target page.' },
           'demoId': 'target'
         },
         {
           'name': 'max',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '',
           'desc': {
             'zh-CN':
-              '指定徽章显示的最大值,如果实际获取的徽章值超过该最大值，则以最大值后接一个"+"的形式显示徽章数;最大值，超过最大值会显示 \'{max}+\'，要求 value 是 Number 类型',
+              '指定徽章显示的最大值,如果实际获取的徽章值超过该最大值，则以最大值后接一个"+"的形式显示徽章数;最大值，超过最大值会显示 \'{max}+\'，要求 value 是 number 类型',
             'en-US':
-              'Specifies the maximum number of badges to be displayed. If the actual badge value exceeds the maximum value, the number of badges is displayed in the format of "+". Maximum value. If the value exceeds the maximum value, \'{max}+\' is displayed. The value must be of the Number type.'
+              'Specifies the maximum number of badges to be displayed. If the actual badge value exceeds the maximum value, the number of badges is displayed in the format of "+". Maximum value. If the value exceeds the maximum value, \'{max}+\' is displayed. The value must be of the number type.'
           },
           'demoId': 'max'
         },
         {
           'name': 'is-dot',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 false',
           'desc': {
             'zh-CN': '设置是否有默认的新消息提示。;小圆点',
@@ -139,14 +139,14 @@ export default {
         },
         {
           'name': 'hidden',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': '该属性的默认值为 false',
           'desc': { 'zh-CN': '隐藏 badge', 'en-US': 'Hide badge' },
           'demoId': 'dynamic-hidden'
         },
         {
           'name': 'type',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '该属性的可选值为 primary / success / warning / danger / info',
@@ -156,7 +156,7 @@ export default {
         },
         {
           'name': 'target',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '指定点击徽章 Dom 节点时链接到目标页面的跳转方式，仅在 href 属性存在时使用。',