@opentiny/vue-docs 2.2.8 → 2.2.9

package/demos/mobile/app/button/base.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="button-wrap">
+    <p>按钮类型</p>
+    <tiny-button type="primary" reset-time="500">主要按钮</tiny-button>
+    <tiny-button type="secondary">次要按钮</tiny-button>
+    <tiny-button type="danger">危险按钮</tiny-button>
+    <tiny-button type="text">文字按钮</tiny-button>
+    <tiny-button type="icon" :icon="IconMail"></tiny-button>
+    <tiny-button type="icon" :icon="IconMail" text="图标按钮"></tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      IconMail: iconMail()
+    }
+  }
+}
+</script>
+
+<style scoped>
+body {
+  overflow: hidden;
+}
+.button-wrap {
+  padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
+}
+.button-wrap .tiny-mobile-button {
+  margin-right: 16px;
+  margin-bottom: 16px;
+}
+</style>

package/demos/mobile/app/button/disabled.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="button-wrap">
+    <h3>按钮不可用</h3>
+    <tiny-button type="primary" disabled>主要按钮不可用</tiny-button>
+    <tiny-button type="secondary" disabled>次要按钮不可用</tiny-button>
+    <tiny-button type="text" disabled>文字按钮不可用</tiny-button>
+    <tiny-button type="danger" disabled>危险按钮不可用</tiny-button>
+    <tiny-button type="icon" :icon="IconMail" disabled></tiny-button>
+    <tiny-button type="icon" :icon="IconMail" text="图标按钮" disabled></tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      IconMail: iconMail()
+    }
+  }
+}
+</script>
+
+<style scoped>
+body {
+  overflow: hidden;
+}
+.button-wrap {
+  padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
+}
+.button-wrap .tiny-mobile-button {
+  margin-right: 16px;
+  margin-bottom: 16px;
+}
+</style>

package/demos/mobile/app/button/event.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="button-wrap">
+    <p>点击事件</p>
+    <tiny-button type="secondary" :loading="loading" @click="btnClick" size="small">点我加载</tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  data() {
+    return {
+      IconMail: iconMail(),
+      loading: false
+    }
+  },
+  methods: {
+    btnClick() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 2000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+body {
+  overflow: hidden;
+}
+.button-wrap {
+  padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
+}
+.button-wrap .tiny-mobile-button {
+  margin-right: 16px;
+  margin-bottom: 16px;
+}
+</style>

package/demos/mobile/app/button/icon.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="button-wrap">
-    <tiny-button :icon="IconSearch"></tiny-button>
-    <tiny-button type="primary" :icon="IconEdit">编辑</tiny-button>
-    <tiny-button type="success" :icon="IconYes" text="好的"></tiny-button>
-    <tiny-button type="info" :icon="IconMail"></tiny-button>
-    <tiny-button type="warning" :icon="IconStarO"></tiny-button>
-    <tiny-button type="danger" :icon="IconDel"></tiny-button>
+    <h3>图标</h3>
+    <tiny-button type="icon" :icon="IconSearch"></tiny-button>
+    <tiny-button type="icon" :icon="IconEdit" text="编辑"></tiny-button>
+    <tiny-button type="icon" :icon="IconYes" text="好的"></tiny-button>
+    <tiny-button type="icon" :icon="IconMail"></tiny-button>
+    <tiny-button type="icon" :icon="IconStarO"></tiny-button>
+    <tiny-button type="icon" :icon="IconDel" size="small"></tiny-button>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button } from '@opentiny/vue'
 import { iconDel, iconYes, iconEdit, iconMail, iconStarO, iconSearch } from '@opentiny/vue-icon'
 

package/demos/mobile/app/button/loading.vue

@@ -1,15 +1,12 @@
 <template>
   <div class="button-wrap">
-    <tiny-button loading>加载中</tiny-button>
-    <tiny-button type="primary" loading>加载中</tiny-button>
-    <tiny-button type="success" loading>加载中</tiny-button>
-    <tiny-button type="info" loading>加载中</tiny-button>
-    <tiny-button type="warning" loading>加载中</tiny-button>
-    <tiny-button type="danger" loading>加载中</tiny-button>
+    <h3>按钮加载状态</h3>
+    <tiny-button type="primary" loading>主要按钮-加载</tiny-button>
+    <tiny-button type="secondary" :loading="loading" @click="btnClick">点我加载</tiny-button>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button } from '@opentiny/vue'
 
 export default {
@@ -17,16 +14,31 @@ export default {
     TinyButton: Button
   },
   data() {
-    return {}
+    return {
+      loading: false
+    }
+  },
+  methods: {
+    btnClick() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 2000)
+    }
   }
 }
 </script>
 
 <style scoped>
+body {
+  overflow: hidden;
+}
 .button-wrap {
   padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
 }
-.button-wrap .tiny-mobile-button:not(:nth-child(3n)) {
+.button-wrap .tiny-mobile-button {
   margin-right: 16px;
   margin-bottom: 16px;
 }

package/demos/mobile/app/button/reset-time.vue

@@ -1,35 +1,28 @@
 <template>
   <div class="button-wrap">
-    <tiny-button round>默认1秒</tiny-button>
-    <tiny-button type="primary" round :reset-time="2000">禁用2秒</tiny-button>
-    <tiny-button type="success" round :reset-time="5000">禁用5秒</tiny-button>
-    <tiny-button round>圆角按钮</tiny-button>
-    <tiny-button type="primary" round disabled>主要按钮</tiny-button>
-    <tiny-button type="success" round disabled>成功按钮</tiny-button>
-    <tiny-button type="info" round disabled>信息按钮</tiny-button>
-    <tiny-button type="warning" round disabled>警告按钮</tiny-button>
-    <tiny-button type="danger" round disabled>危险按钮</tiny-button>
-    <tiny-button type="secondary" round disabled>次要按钮</tiny-button>
-    <tiny-button round disabled>弱按钮</tiny-button>
+    <p>按钮类型</p>
+    <tiny-button type="primary" reset-time="500">重置时间</tiny-button>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button } from '@opentiny/vue'
 
 export default {
   components: {
     TinyButton: Button
-  },
-  data() {
-    return {}
   }
 }
 </script>
 
 <style scoped>
+body {
+  overflow: hidden;
+}
 .button-wrap {
-  padding: 10px 20px;
+  padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
 }
 .button-wrap .tiny-mobile-button {
   margin-right: 16px;

package/demos/mobile/app/button/size.vue

@@ -1,33 +1,50 @@
 <template>
   <div class="button-wrap">
-    <tiny-button round>默认尺寸</tiny-button>
-    <tiny-button type="primary" size="large" round>large</tiny-button>
-    <tiny-button type="success" size="medium" round>medium</tiny-button>
-    <tiny-button type="info" size="small" round>small</tiny-button>
-    <tiny-button type="warning" size="mini" round>mini</tiny-button>
-    <tiny-button type="primary" size="large" round>大号按钮</tiny-button>
-    <tiny-button type="success" size="medium" round>中号按钮</tiny-button>
-    <tiny-button type="info" size="small" round>小号按钮</tiny-button>
-    <tiny-button type="warning" size="mini" round>mini按钮</tiny-button>
+    <h3>按钮小尺寸</h3>
+    <tiny-button type="primary" size="small">主要按钮</tiny-button>
+    <tiny-button type="secondary" size="small">次要按钮</tiny-button>
+    <tiny-button type="danger" size="small">危险按钮</tiny-button>
+    <tiny-button type="text" size="small">文字按钮</tiny-button>
+    <tiny-button type="icon" :icon="IconMail" size="small"></tiny-button>
+    <tiny-button type="icon" :icon="IconMail" text="图标按钮" size="small"></tiny-button>
+    <tiny-button type="primary" loading size="small">主要按钮-加载</tiny-button>
+    <tiny-button type="secondary" :loading="loading" @click="btnClick" size="small">点我加载</tiny-button>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Button } from '@opentiny/vue'
+import { iconMail } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyButton: Button
   },
   data() {
-    return {}
+    return {
+      IconMail: iconMail(),
+      loading: false
+    }
+  },
+  methods: {
+    btnClick() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 2000)
+    }
   }
 }
 </script>
 
 <style scoped>
+body {
+  overflow: hidden;
+}
 .button-wrap {
   padding: 0 10px;
+  overflow-y: scroll;
+  height: 100%;
 }
 .button-wrap .tiny-mobile-button {
   margin-right: 16px;

package/demos/mobile/app/button/webdoc/button.js

@@ -3,28 +3,28 @@ export default {
   owner: '',
   demos: [
     {
-      demoId: 'event-click',
+      demoId: 'base',
       name: {
-        'zh-CN': '点击事件',
-        'en-US': 'button type'
+        'zh-CN': '基础用法',
+        'en-US': 'base'
       },
       desc: {
-        'zh-CN': '<p>单击事件</p>',
-        'en-US': '<p>button type</p>'
+        'zh-CN': '<p>基础用法</p>',
+        'en-US': '<p>base</p>'
       },
-      codeFiles: ['event-click.vue']
+      codeFiles: ['base.vue']
     },
     {
-      demoId: 'icon',
+      demoId: 'disabled',
       name: {
-        'zh-CN': '图标按钮',
-        'en-US': 'button round'
+        'zh-CN': '不可用',
+        'en-US': 'disabled'
       },
       desc: {
-        'zh-CN': '<p>图标按钮</p>',
-        'en-US': '<p>button round</p>'
+        'zh-CN': '<p>不可用</p>',
+        'en-US': '<p>disabled</p>'
       },
-      codeFiles: ['icon.vue']
+      codeFiles: ['disabled.vue']
     },
     {
       demoId: 'loading',
@@ -39,77 +39,52 @@ export default {
       codeFiles: ['loading.vue']
     },
     {
-      demoId: 'native-type',
+      demoId: 'size',
       name: {
-        'zh-CN': '按钮属性',
+        'zh-CN': '不同尺寸',
         'en-US': 'events'
       },
       desc: {
-        'zh-CN':
-          '<p>通过<code>native-type</code>属性可以设置原生 type 属性，该属性的可选值为 button / submit / reset</p>',
+        'zh-CN': '<p>不同尺寸</p>',
         'en-US': '<p>bbutton click</p>'
       },
-      codeFiles: ['native-type.vue']
+      codeFiles: ['size.vue']
     },
     {
-      demoId: 'plain',
+      demoId: 'icon',
       name: {
-        'zh-CN': '朴素按钮',
-        'en-US': 'events'
+        'zh-CN': '图标',
+        'en-US': 'icon'
       },
       desc: {
-        'zh-CN': '<p>朴素按钮</p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>图标</p>',
+        'en-US': '<p>icon</p>'
       },
-      codeFiles: ['plain.vue']
+      codeFiles: ['icon.vue']
     },
     {
       demoId: 'reset-time',
       name: {
-        'zh-CN': '禁用时间',
-        'en-US': 'events'
+        'zh-CN': '重置时间',
+        'en-US': 'reset time'
       },
       desc: {
-        'zh-CN': '<p>通过<code>reset-time</code>属性可以设置按钮禁用时间，防止重复提交，单位毫秒,该属性默认为 1000</p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>重置时间</p>',
+        'en-US': '<p>reset-time</p>'
       },
       codeFiles: ['reset-time.vue']
     },
     {
-      demoId: 'round',
+      demoId: 'event',
       name: {
-        'zh-CN': '圆角按钮',
-        'en-US': 'events'
-      },
-      desc: {
-        'zh-CN': '<p>圆角按钮</p>',
-        'en-US': '<p>bbutton click</p>'
-      },
-      codeFiles: ['round.vue']
-    },
-    {
-      demoId: 'size',
-      name: {
-        'zh-CN': '不同尺寸',
-        'en-US': 'events'
-      },
-      desc: {
-        'zh-CN': '<p>不同尺寸</p>',
-        'en-US': '<p>bbutton click</p>'
-      },
-      codeFiles: ['size.vue']
-    },
-    {
-      demoId: 'text',
-      name: {
-        'zh-CN': '文字按钮',
+        'zh-CN': '点击事件',
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p>文字按钮</p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>点击事件</p>',
+        'en-US': '<p>button click</p>'
       },
-      codeFiles: ['text.vue']
+      codeFiles: ['event.vue']
     }
   ],
   apis: [
@@ -119,17 +94,17 @@ export default {
       properties: [
         {
           name: 'disabled',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: 'false',
           desc: {
             'zh-CN': '<p>设置按钮是否被禁用,该属性默认为false</p>',
             'en-US': 'display different button'
           },
-          demoId: ''
+          demoId: 'disabled'
         },
         {
           name: 'icon',
-          type: 'Object',
+          type: 'VueComponent',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>svg 图片对象</p>',
@@ -139,7 +114,7 @@ export default {
         },
         {
           name: 'loading',
-          type: 'Boolean',
+          type: 'boolean',
           defaultValue: 'false',
           desc: {
             'zh-CN': '<p>svg 是否加载中状态，该属性默认为false</p>',
@@ -147,49 +122,19 @@ export default {
           },
           demoId: 'loading'
         },
-        {
-          name: 'native-type',
-          type: 'String',
-          defaultValue: 'button',
-          desc: {
-            'zh-CN': '<p>原生 type 属性,该属性默认为button</p>',
-            'en-US': 'display different button'
-          },
-          demoId: 'native-type'
-        },
-        {
-          name: 'plain',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否朴素按钮,该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          demoId: 'plain'
-        },
         {
           name: 'reset-time',
-          type: 'Number',
-          defaultValue: '1000',
+          type: 'number',
+          defaultValue: '0',
           desc: {
             'zh-CN': '<p>设置按钮禁用时间，防止重复提交，单位毫秒,该属性默认为1000</p>',
             'en-US': 'display different button'
           },
           demoId: 'reset-time'
         },
-        {
-          name: 'round',
-          type: 'Boolean',
-          defaultValue: 'false',
-          desc: {
-            'zh-CN': '<p>是否圆角按钮，该属性默认为false</p>',
-            'en-US': 'display different button'
-          },
-          demoId: 'round'
-        },
         {
           name: 'size',
-          type: 'String',
+          type: 'string',
           defaultValue: '"large" | "medium" | "small" | "mini"',
           desc: {
             'zh-CN': '<p>尺寸</p>',
@@ -199,13 +144,13 @@ export default {
         },
         {
           name: 'type',
-          type: '"primary" | "success" | "warning" |"info" | "danger"',
+          type: '"primary" | "secondary" | "text" |"icon" | "danger"',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>类型</p>',
             'en-US': 'display different button'
           },
-          demoId: 'icon'
+          demoId: 'base'
         },
         {
           name: 'text',
@@ -215,19 +160,19 @@ export default {
             'zh-CN': '<p>设置按钮显示的文本，可配置国际化 </p>',
             'en-US': 'display different button'
           },
-          demoId: 'icon'
+          demoId: 'base'
         }
       ],
       events: [
         {
           name: 'click',
-          type: '',
+          type: '(event: PointEvent) => void',
           defaultValue: '',
           desc: {
             'zh-CN': '<p>设置当按钮被点击时触发的回调函数。</p>',
             'en-US': 'Click'
           },
-          demoId: 'event-click'
+          demoId: 'event'
         }
       ],
       slots: [

package/demos/mobile/app/file-upload/custom-upload-tip.vue

@@ -3,7 +3,7 @@
     <template #trigger>
       <icon-upload></icon-upload>
     </template>
-    <template #tip> 只能上传jpg/png文件，且不超过500kb </template>
+    <template #tip> 只能上传 jpg/png 文件，且不超过500 kb </template>
   </tiny-file-upload>
 </template>
 

package/demos/mobile/app/switch/webdoc/switch.cn.md

@@ -1,12 +1,11 @@
 ---
-title: Switch 开关 
+title: Switch 开关
 ---
 
-# Switch 开关 
+# Switch 开关
 
 <div>
 
-Switch 在两种状态间切换选择。
+在两种状态间切换选择。
 
 </div>
-

package/demos/mobile-first/app/switch/webdoc/switch.cn.md

@@ -5,5 +5,5 @@ title: Switch 开关
 # Switch 开关
 
 <div>
-Switch 在两种状态间切换选择。
+在两种状态间切换选择。
 </div>

package/demos/mobile-first/app/switch/webdoc/switch.en.md

@@ -5,5 +5,5 @@ title: Switch 开关
 # Switch 开关
 
 <div>
-Switch 在两种状态间切换选择。
+在两种状态间切换选择。
 </div>

package/demos/pc/app/action-menu/webdoc/action-menu.js

@@ -173,7 +173,7 @@ export default {
         },
         {
           'name': 'suffix-icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': {
             'zh-CN': '下拉触发源图标',
@@ -259,7 +259,7 @@ interface IItemData {
   disabled: boolean       // 是否禁用
   divided: boolean        // 是否显示分割线
   children: IItemData[]   // 菜单项子集
-  icon: VueComponent      // 菜单项图标
+  icon: Component      // 菜单项图标
 }
 `
     },

package/demos/pc/app/alert/basic-usage-composition-api.vue

@@ -6,6 +6,7 @@
     <tiny-alert type="warning">
       <template #description> type 为 warning </template>
     </tiny-alert>
+    <tiny-alert type="simple" description="type 为 simple"></tiny-alert>
   </div>
 </template>
 

package/demos/pc/app/alert/basic-usage.vue

@@ -6,6 +6,7 @@
     <tiny-alert type="warning">
       <template #description> type 为 warning </template>
     </tiny-alert>
+    <tiny-alert type="simple" description="type 为 simple"></tiny-alert>
   </div>
 </template>
 

package/demos/pc/app/alert/custom-close.spec.ts

@@ -7,7 +7,7 @@ test('关闭按钮', async ({ page }) => {
   const demo = page.locator('#custom-close')
   const customAlert = demo.locator('.tiny-alert').first()
   const defaultClose = customAlert.locator('.tiny-alert__close')
-  const customClose = customAlert.locator('.icon')
+  const customClose = customAlert.locator('.is-custom .tiny-svg')
   const switchBtn = demo.locator('.tiny-switch')
 
   // 自定义关闭图标