@opentiny/vue-docs 2.2.12 → 2.2.14

package/demos/mobile-first/app/loading/spinner.vue

@@ -12,7 +12,8 @@ export default {
       text: '自定义loading图标',
       spinner: IconLoading(), // 添加自定义类名，动画需要自己实现
       target: document.getElementById('boxseven'),
-      background: 'rgba(0, 0, 0, 0.7)'
+      background: 'rgba(0, 0, 0, 0.7)',
+      tiny_mode: 'mobile-first'
     })
   }
 }

package/demos/mobile-first/app/loading/webdoc/loading.js

@@ -14,7 +14,6 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
-
     {
       demoId: 'loading-tip-text',
       name: {
@@ -88,18 +87,6 @@ export default {
       },
       codeFiles: ['spinner.vue']
     },
-    {
-      demoId: 'target',
-      name: {
-        'zh-CN': '区域加载',
-        'en-US': 'events'
-      },
-      desc: {
-        'zh-CN': '<p>通过 `target` 指定 Loading 需要覆盖的 DOM 节点。<p>',
-        'en-US': '<p>bbutton click</p>'
-      },
-      codeFiles: ['target.vue']
-    },
     {
       demoId: 'loading-size',
       name: {
@@ -113,6 +100,5 @@ export default {
       },
       codeFiles: ['loading-size.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/menu/webdoc/menu.js

@@ -9,9 +9,8 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': `<p>通过 <code>data</code> 设置树形菜单的数据。<br>
-        注意：由于树形菜单是通过节点 id 来查找子节点和关联父节点的，所以必须保证 id 的必填性和唯一性。<br>
-        树形菜单移动端最多只能展示两层数据结构<p>`,
+        'zh-CN':
+          '<p>通过 <code>data</code> 设置树形菜单的数据。<br>\n        注意：由于树形菜单是通过节点 id 来查找子节点和关联父节点的，所以必须保证 id 的必填性和唯一性。<br>\n        树形菜单移动端最多只能展示两层数据结构<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['basic-usage.vue']
@@ -124,6 +123,5 @@ export default {
       },
       codeFiles: ['with-icon.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/message/webdoc/message.js

@@ -51,6 +51,5 @@ export default {
       },
       codeFiles: ['id.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/modal/webdoc/modal.js

@@ -281,7 +281,7 @@ export default {
       codeFiles: ['zoom-event.vue']
     },
     {
-      demoId: 'value',
+      demoId: 'default-slot',
       name: {
         'zh-CN': '默认插槽',
         'en-US': 'events'
@@ -329,6 +329,5 @@ export default {
       },
       codeFiles: ['before-close.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/numeric/webdoc/numeric.js

@@ -14,7 +14,6 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
-
     {
       demoId: 'numeric-size',
       name: {
@@ -118,7 +117,7 @@ export default {
     {
       demoId: 'blur-event',
       name: {
-        'zh-CN': 'blur event',
+        'zh-CN': '失焦事件',
         'en-US': 'events'
       },
       desc: {
@@ -139,6 +138,5 @@ export default {
       },
       codeFiles: ['change-event.vue']
     }
-  ],
-  apis: []
+  ]
 }

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

@@ -1,9 +1,7 @@
 ---
-title: Filter 过滤器
+title: Pager 分页
 ---
 
-# Filter 过滤器
+# Pager 分页
 
-<div>
-
-</div>
+<div>当数据量过多时，使用分页分解数据，常用于 Grid 和 Repeater 组件。</div>

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

@@ -1,9 +1,7 @@
 ---
-title: Filter 过滤器
+title: Pager Pagination
 ---
 
-# Filter 过滤器
+# Pager Pagination
 
-<div>
-
-</div>
+<div>When there is a large amount of data, data is split by page. This function is usually used in Grid and Repeater components.</div>

package/demos/mobile-first/app/pager/webdoc/pager.js

@@ -9,50 +9,106 @@ export default {
         'en-US': 'basic usage'
       },
       desc: {
-        'zh-CN':
-          '<p>过滤类型 <code>type</code> 包括 <code>单选、多选、枚举单选 (radio | checkbox | enum-radio)<code>。</p>',
-        'en-US': '<p>button type</p>'
+        'zh-CN': '',
+        'en-US': ''
       },
       codeFiles: ['basic-usage.vue']
     },
     {
-      demoId: 'column-num',
+      demoId: 'current-page',
       name: {
-        'zh-CN': '面板每行标签数',
-        'en-US': 'button round'
+        'zh-CN': '当前页',
+        'en-US': ''
       },
       desc: {
-        'zh-CN': '<p>通过 <code>column-num</code> 属性设置面板每行标签数，默认值为 3。</p>',
-        'en-US': '<p>button round</p>'
+        'zh-CN': '通过 `current-page` 设置初始加载页码数, 通过 `total` 设置总条数',
+        'en-US': ''
       },
-      codeFiles: ['column-num.vue']
+      codeFiles: ['current-page.vue']
     },
     {
-      demoId: 'filter-group',
+      demoId: 'page-size',
       name: {
-        'zh-CN': '过滤组',
-        'en-US': '过滤组'
+        'zh-CN': '每页显示数量',
+        'en-US': ''
       },
       desc: {
-        'zh-CN':
-          '<p>通过 <code>filter-group</code> 属性开启过滤组功能，<code>filter-value</code> 绑定过滤组的值。过滤组类型 <code>type</code> 包括 <code>单选、多选 (radio | checkbox)</code>。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '`page-sizes` 和 `page-size` 结合使用调整每页显示数量',
+        'en-US': ''
       },
-      codeFiles: ['filter-group.vue']
+      codeFiles: ['page-size.vue']
     },
     {
-      demoId: 'enumeration',
+      demoId: 'hide-on-single-page',
       name: {
-        'zh-CN': '枚举单选',
-        'en-US': 'events'
+        'zh-CN': '只有一页时隐藏分页',
+        'en-US': ''
       },
       desc: {
-        'zh-CN':
-          '<p>设置过滤类型 <code>type: "enum-radio"</code> 时，当前数据为枚举单选，通过 <code>showAll: true</code> 显示 <code>全部</code> 选择项。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '`hide-on-single-page` 只有一页时隐藏分页',
+        'en-US': ''
       },
-      codeFiles: ['enumeration.vue']
+      codeFiles: ['hide-on-single-page.vue']
+    },
+    {
+      demoId: 'custom-next-prev-text',
+      name: {
+        'zh-CN': '自定义上下页按钮文本',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '`prev-text` ,`next-text` 自定义上下页按钮文本',
+        'en-US': ''
+      },
+      codeFiles: ['custom-next-prev-text.vue']
+    },
+    {
+      demoId: 'current-change',
+      name: {
+        'zh-CN': '当前页改变事件',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '`current-change` 切换当前页码时触发',
+        'en-US': ''
+      },
+      codeFiles: ['current-change.vue']
+    },
+    {
+      demoId: 'prev-click',
+      name: {
+        'zh-CN': '上一页事件',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '`prev-click` 切换至前一页时触发',
+        'en-US': ''
+      },
+      codeFiles: ['prev-click.vue']
+    },
+    {
+      demoId: 'next-click',
+      name: {
+        'zh-CN': '下一页事件',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '`next-click` 切换至后一页时触发',
+        'en-US': ''
+      },
+      codeFiles: ['next-click.vue']
+    },
+    {
+      demoId: 'before-page-change',
+      name: {
+        'zh-CN': '切换分页前事件',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '`before-page-change` 切换分页前事件',
+        'en-US': ''
+      },
+      codeFiles: ['before-page-change.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/popconfirm/basic-usage.vue

@@ -3,7 +3,7 @@
     <div class="block">
       <tiny-popconfirm
         title="这是气泡标题"
-        content="这是气泡确认框提示内容文本描述，这是两行的样是两行的样式，内容很长很长。"
+        message="这是气泡确认框提示内容文本描述，这是两行的样是两行的样式，内容很长很长。"
       >
         <template #reference>
           <tiny-button>悬浮我提示</tiny-button>
@@ -18,7 +18,7 @@
         trigger="click"
         placement="right"
         :cancel-button="false"
-        content="内容很短"
+        message="内容很短"
       >
         <template #reference>
           <tiny-button>点击弹出，info 信息，右侧显示</tiny-button>
@@ -27,7 +27,7 @@
     </div>
 
     <div class="block">
-      <tiny-popconfirm type="warning" title="这是警告气泡" placement="bottom" content="内容很短">
+      <tiny-popconfirm type="warning" title="这是警告气泡" placement="bottom" message="内容很短">
         <template #reference>
           <tiny-button>默认悬浮弹出，warning 警告，下面显示</tiny-button>
         </template>

package/demos/mobile-first/app/popconfirm/webdoc/popconfirm.js

@@ -14,6 +14,5 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/popover/webdoc/popover.js

@@ -14,7 +14,6 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
-
     {
       demoId: 'popover-content',
       name: {
@@ -204,6 +203,5 @@ export default {
       },
       codeFiles: ['popover-events.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/progress/progress-type-circle.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-progress type="circle" :percentage="50" status="exception" width="180"></tiny-progress>
+  <tiny-progress type="circle" :percentage="50" status="exception" :width="180"></tiny-progress>
 </template>
 
 <script>

package/demos/mobile-first/app/progress/status-error.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="flex">
+    <span class="flex mr-5 text-color-none items-center text-xs">失败:</span>
+    <div class="flex-1">
+      <div class="flex justify-between mb-2">
+        <div class="inline-block h-5 leading-5 text-xs">安装进度</div>
+      </div>
+      <tiny-progress class="progress" type="line" :percentage="percentage" status="exception"></tiny-progress>
+      <div class="flex items-center mt-2">
+        <icon-operationfaild-l class="fill-color-error"></icon-operationfaild-l>
+        <div class="inline-block ml-2 h-5 leading-5 text-xs">上传失败</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Progress } from '@opentiny/vue'
+import { IconOperationfaildL } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyProgress: Progress,
+    IconOperationfaildL: IconOperationfaildL()
+  },
+  data() {
+    return {
+      percentage: 50
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/progress/status-loading.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex">
+    <span class="flex mr-5 text-color-none items-center text-xs">上传中:</span>
+    <div class="flex-1">
+      <div class="flex justify-between mb-2">
+        <div class="inline-block h-5 leading-5 text-xs">安装进度</div>
+        <div class="flex text-color-brand mr-10 cursor-pointer text-xs">
+          <div class="inline-block h-5 mr-2" @click="clickHandler1">暂停</div>
+          <div class="inline-block h-5" @click="clickHandler2">取消</div>
+        </div>
+      </div>
+      <tiny-progress class="progress" type="line" :percentage="percentage"></tiny-progress>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Progress } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProgress: Progress
+  },
+  data() {
+    return {
+      percentage: 0,
+      process: null
+    }
+  },
+  mounted() {
+    this.getTimer()
+  },
+  methods: {
+    clickHandler1() {
+      clearTimeout(this.process)
+    },
+    clickHandler2() {
+      clearTimeout(this.process)
+      this.percentage = 0
+    },
+    getTimer() {
+      this.process = setInterval(() => {
+        this.percentage = this.percentage + 5
+
+        if (this.percentage === 100) {
+          clearTimeout(this.process)
+        }
+      }, 300)
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/progress/status-reloading.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex">
+    <span class="flex mr-5 text-color-none items-center text-xs">失败可重试:</span>
+    <div class="flex-1">
+      <div class="flex justify-between mb-2">
+        <div class="inline-block h-5 leading-5 text-xs">安装进度</div>
+      </div>
+      <tiny-progress class="progress" type="line" :percentage="percentage" status="exception"></tiny-progress>
+      <div class="flex items-center mt-2">
+        <icon-operationfaild-l class="fill-color-error"></icon-operationfaild-l>
+        <div class="inline-block ml-2 h-5 leading-5 text-xs">
+          安装失败，请<i class="ml-1 align-middle cursor-pointer not-italic text-color-brand" @click="clickHandler"
+            >重试</i
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Progress } from '@opentiny/vue'
+import { IconOperationfaildL } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyProgress: Progress,
+    IconOperationfaildL: IconOperationfaildL()
+  },
+  data() {
+    return {
+      percentage: 0,
+      process: null
+    }
+  },
+  mounted() {
+    this.getTimer()
+  },
+  methods: {
+    clickHandler() {
+      this.percentage = 0
+      location.reload()
+    },
+    getTimer() {
+      this.process = setInterval(() => {
+        this.percentage = this.percentage + 5
+
+        if (this.percentage === 50) {
+          clearTimeout(this.process)
+        }
+      }, 300)
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/progress/status-sucess.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="flex">
+    <span class="flex mr-5 text-color-none items-center text-xs">成功:</span>
+    <div class="flex-1">
+      <div class="flex justify-between mb-2">
+        <div class="inline-block h-5 leading-5 text-xs">安装进度</div>
+      </div>
+      <tiny-progress class="progress" type="line" :percentage="percentage" status="success"></tiny-progress>
+      <div class="flex items-center mt-2">
+        <icon-successful class="fill-color-success"></icon-successful>
+        <div class="inline-block ml-2 h-5 leading-5 text-color-success text-xs">安装成功</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Progress } from '@opentiny/vue'
+import { IconSuccessful } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyProgress: Progress,
+    IconSuccessful: IconSuccessful()
+  },
+  data() {
+    return {
+      percentage: 100
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/progress/webdoc/progress.js

@@ -14,7 +14,6 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
-
     {
       demoId: 'progress-type',
       name: {
@@ -59,7 +58,7 @@ export default {
         'en-US': 'events'
       },
       desc: {
-        'zh-CN': '<p><code>stroke-width<code>自定义进度条的宽度，单位 px<p>',
+        'zh-CN': '<p><code>stroke-width<code>自定义进度条的宽度，单位 px。<p>',
         'en-US': '<p>bbutton click</p>'
       },
       codeFiles: ['progress-width.vue']
@@ -67,15 +66,63 @@ export default {
     {
       demoId: 'progress-status',
       name: {
-        'zh-CN': '状态',
-        'en-US': 'events'
+        'zh-CN': '进度条状态',
+        'en-US': 'Progress bar status'
       },
       desc: {
-        'zh-CN': '<p><code>status</code>进度条当前状态（success/exception/warning）<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p><code>status</code>进度条状态（success/exception/warning）。<p>',
+        'en-US': '<p><code>status</code>Progress bar status (success/exception/warning).</p>'
       },
       codeFiles: ['progress-status.vue']
     },
+    {
+      demoId: 'status-loading',
+      name: {
+        'zh-CN': '定义加载状态',
+        'en-US': 'Defines the loading status'
+      },
+      desc: {
+        'zh-CN': '<p>定义加载状态。<p>',
+        'en-US': '<p>Defines the loading status.</p>'
+      },
+      codeFiles: ['status-loading.vue']
+    },
+    {
+      demoId: 'status-error',
+      name: {
+        'zh-CN': '定义错误状态',
+        'en-US': 'Defines the error status'
+      },
+      desc: {
+        'zh-CN': '<p>定义错误状态。<p>',
+        'en-US': '<p>Defines the error status.</p>'
+      },
+      codeFiles: ['status-error.vue']
+    },
+    {
+      demoId: 'status-reloading',
+      name: {
+        'zh-CN': '定义重载状态',
+        'en-US': 'Defines the overload status'
+      },
+      desc: {
+        'zh-CN': '<p>定义重载状态。<p>',
+        'en-US': '<p>Defines the overload status.</p>'
+      },
+      codeFiles: ['status-reloading.vue']
+    },
+    {
+      demoId: 'status-sucess',
+      name: {
+        'zh-CN': '定义成功状态',
+        'en-US': 'Define Success Status'
+      },
+      desc: {
+        'zh-CN': '<p>定义成功状态。<p>',
+        'en-US': '<p>Define Success Status.</p>'
+      },
+      codeFiles: ['status-sucess.vue']
+    },
     {
       demoId: 'text-inside-or-no-text',
       name: {
@@ -125,6 +172,5 @@ export default {
       },
       codeFiles: ['dynamic-control-changes.vue']
     }
-  ],
-  apis: []
+  ]
 }