@opentiny/vue-docs 2.2.7 → 2.2.9

package/demos/pc/app/drop-times/basic-usage.vue

@@ -1,11 +1,11 @@
 <template>
-  <div style="width: 270px">
+  <div class="drop-time-demo-basic">
     <tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { DropTimes, Modal } from '@opentiny/vue'
 
 export default {
@@ -24,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.drop-time-demo-basic {
+  width: 270px;
+}
+</style>

package/demos/pc/app/drop-times/size-composition-api.vue

@@ -1,13 +1,23 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times size="medium" v-model="value" placeholder="请选择"></tiny-drop-times>
-    <p>当前选中值：{{ value }}</p>
+  <div class="drop-time-demo-size">
+    <tiny-drop-times size="medium" v-model="value" placeholder="尺寸：medium"></tiny-drop-times>
+    <tiny-drop-times size="small" v-model="value" placeholder="尺寸：small"></tiny-drop-times>
+    <tiny-drop-times size="mini" v-model="value" placeholder="尺寸：mini"></tiny-drop-times>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { DropTimes as TinyDropTimes } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style lang="less" scoped>
+.drop-time-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/drop-times/size.spec.ts

@@ -4,6 +4,10 @@ test('设置组件尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drop-times#size')
 
-  const droptimes = page.locator('.tiny-select')
+  const droptimes = page.locator('.drop-time-demo-size > div:nth-child(1)')
   await expect(droptimes).toHaveClass(/tiny-select--medium/)
+  const droptimesSmall = page.locator('.drop-time-demo-size > div:nth-child(2)')
+  await expect(droptimesSmall).toHaveClass(/tiny-select--small/)
+  const droptimesMini = page.locator('.drop-time-demo-size > div:nth-child(3)')
+  await expect(droptimesMini).toHaveClass(/tiny-select--mini/)
 })

package/demos/pc/app/drop-times/size.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times size="medium" v-model="value" placeholder="请选择"></tiny-drop-times>
-    <p>当前选中值：{{ value }}</p>
+  <div class="drop-time-demo-size">
+    <tiny-drop-times size="medium" v-model="value" placeholder="尺寸：medium"></tiny-drop-times>
+    <tiny-drop-times size="small" v-model="value" placeholder="尺寸：small"></tiny-drop-times>
+    <tiny-drop-times size="mini" v-model="value" placeholder="尺寸：mini"></tiny-drop-times>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { DropTimes } from '@opentiny/vue'
 
 export default {
@@ -19,3 +20,12 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.drop-time-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/drop-times/start-end-step-composition-api.vue

@@ -1,23 +1,18 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times
-      v-model="value"
-      placeholder="请选择"
-      :end="720"
-      :start="60"
-      :step="5"
-      @change="change"
-    ></tiny-drop-times>
+  <div class="drop-time-demo-sse">
+    <tiny-drop-times v-model="value" placeholder="请选择" :start="60" :step="5" :end="720"></tiny-drop-times>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { DropTimes as TinyDropTimes, Modal } from '@opentiny/vue'
+import { DropTimes as TinyDropTimes } from '@opentiny/vue'
 
 const value = ref('')
+</script>
 
-function change(value) {
-  Modal.message({ message: 'change 事件，当前值为 ' + value })
+<style scoped>
+.drop-time-demo-sse {
+  width: 270px;
 }
-</script>
+</style>

package/demos/pc/app/drop-times/start-end-step.spec.ts

@@ -4,7 +4,7 @@ test('步长与时间区间', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drop-times#start-end-step')
 
-  const droptimes = page.getByPlaceholder('请选择')
+  const droptimes = page.locator('#start-end-step').getByRole('textbox', { name: '请选择' })
   const option1 = page.locator('.tiny-select-dropdown__item').first()
   const option2 = page.locator('.tiny-select-dropdown__item').nth(1)
   const option3 = page.locator('.tiny-select-dropdown__item').last()

package/demos/pc/app/drop-times/start-end-step.vue

@@ -1,18 +1,11 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times
-      v-model="value"
-      placeholder="请选择"
-      :end="720"
-      :start="60"
-      :step="5"
-      @change="change"
-    ></tiny-drop-times>
+  <div class="drop-time-demo-sse">
+    <tiny-drop-times v-model="value" placeholder="请选择" :start="60" :step="5" :end="720"></tiny-drop-times>
   </div>
 </template>
 
-<script lang="jsx">
-import { DropTimes, Modal } from '@opentiny/vue'
+<script>
+import { DropTimes } from '@opentiny/vue'
 
 export default {
   components: {
@@ -22,11 +15,12 @@ export default {
     return {
       value: ''
     }
-  },
-  methods: {
-    change(value) {
-      Modal.message({ message: 'change 事件，当前值为 ' + value })
-    }
   }
 }
 </script>
+
+<style scoped>
+.drop-time-demo-sse {
+  width: 270px;
+}
+</style>

package/demos/pc/app/drop-times/webdoc/drop-times.js

@@ -21,7 +21,7 @@ export default {
     },
     {
       'demoId': 'size',
-      'name': { 'zh-CN': '设置组件大小的size属性', 'en-US': 'Set the size attribute of the component size' },
+      'name': { 'zh-CN': '尺寸', 'en-US': 'Set the size attribute of the component size' },
       'desc': {
         'zh-CN': '<p>可设置为：medium，small，mini</p>\n',
         'en-US': '<p>The value can be medium, small, or mini</p>\n'
@@ -36,17 +36,17 @@ export default {
       'props': [
         {
           'name': 'modelValue / v-model',
-          'type': '—',
-          'defaultValue': '该属性的默认值为 {}',
+          'type': 'string',
+          'defaultValue': '--',
           'desc': { 'zh-CN': '绑定值', 'en-US': 'Set the component size. The value can be medium, small, or mini.' },
-          'demoId': 'start-end-step'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'size',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置组件大小，可以设置为：medium，small，mini',
+            'zh-CN': '输入框尺寸',
             'en-US': 'Class name added to the DropTimes drop-down list box'
           },
           'demoId': 'size'
@@ -54,7 +54,7 @@ export default {
         {
           'name': 'popper-class',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '为 DropTimes 下拉弹框添加的 class 类名',
             'en-US':
@@ -65,7 +65,7 @@ export default {
         {
           'name': 'popper-append-to-body',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': ' true',
           'desc': {
             'zh-CN':
               '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
@@ -81,14 +81,14 @@ export default {
             'zh-CN': '设置输入框内的提示占位文本',
             'en-US': 'Set the prompt placeholder text in the text box.'
           },
-          'demoId': 'start-end-step'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'end',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 1440',
+          'defaultValue': ' 1440',
           'desc': {
-            'zh-CN': '结束时间，以分钟计算，默认值为 1440。',
+            'zh-CN': '结束时间，以分钟计算',
             'en-US': 'End time, in minutes. The default value is 1440.'
           },
           'demoId': 'start-end-step'
@@ -96,9 +96,9 @@ export default {
         {
           'name': 'start',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 0',
+          'defaultValue': ' 0',
           'desc': {
-            'zh-CN': '开始时间，以分钟计算，默认值为 0。',
+            'zh-CN': '开始时间，以分钟计算',
             'en-US': 'Start time, in minutes. The default value is 0.'
           },
           'demoId': 'start-end-step'
@@ -106,24 +106,34 @@ export default {
         {
           'name': 'step',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 15',
+          'defaultValue': ' 15',
           'desc': {
-            'zh-CN': '间隔时间，以分钟计算，默认值为 15。',
+            'zh-CN': '间隔时间，以分钟计算',
             'en-US': 'Interval, in minutes. The default value is 15.'
           },
           'demoId': 'start-end-step'
+        },
+        {
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': ' false',
+          'desc': {
+            'zh-CN': '禁用状态',
+            'en-US': 'Disabled state'
+          },
+          'demoId': ''
         }
       ],
       'events': [
         {
           'name': 'change',
-          'type': '',
+          'type': '(value: string) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '下拉切换当前时间后触发该事件',
             'en-US': 'This event is triggered after the current time is switched by the pull-down button.'
           },
-          'demoId': 'start-end-step'
+          'demoId': 'basic-usage'
         }
       ],
       'slots': []

package/demos/pc/app/dropdown/webdoc/dropdown.js

@@ -271,7 +271,7 @@ export default {
         },
         {
           'name': 'suffix-icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': {
             'zh-CN': '下拉触发源图标',
@@ -473,7 +473,7 @@ export default {
         },
         {
           'name': 'icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': {
             'zh-CN': '内嵌图标',

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

@@ -5,15 +5,9 @@ export default {
     {
       'demoId': 'data-basic',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例。', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['data-resource.vue']
-    },
-    {
-      'demoId': 'data-resource',
-      'name': { 'zh-CN': '数据源', 'en-US': 'Data Source' },
       'desc': {
-        'zh-CN': '<p>通过 <code>data</code> 设置瀑布菜单的数据。</p>\n',
-        'en-US': '<p>Set the data of the waterfall menu through <code>data</code>. </p>\n'
+        'zh-CN': '可通过<code>data</code>属性设置瀑布菜单数据。',
+        'en-US': 'Menu data can be set through the<code>data</code>attribute.'
       },
       'codeFiles': ['data-resource.vue']
     },
@@ -22,7 +16,7 @@ export default {
       'name': { 'zh-CN': '自定义左/右侧图标', 'en-US': 'Customizing Left/Right Icons' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>left</code> 插槽自定义左侧切换图标为 IconLeft ，通过 <code>right</code> 插槽右侧切换图标 IconRight 。</p>\n',
+          '<p>可通过 <code>left</code> 属性设置插槽自定义左侧切换图标为 IconLeft ， <code>right</code> 属性设置插槽右侧切换图标 IconRight 。</p>\n',
         'en-US':
           '<p>Use the <code>left</code> slot to set the left switch icon to IconLeft, and use the <code>right</code> slot to set the right switch icon to IconRight. </p>\n'
       },
@@ -33,7 +27,7 @@ export default {
       'name': { 'zh-CN': '自定义内容', 'en-US': 'Custom Content' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>level1</code> 插槽自定义一级菜单内容，通过 <code>level2</code> 插槽自定义二级菜单内容，通过 <code>level3</code> 插槽自定义三级菜单内容。</p>\n',
+          '<p>可通过 <code>level1</code>属性设置插槽自定义一级菜单内容，<code>level2</code> 属性设置插槽自定义二级菜单内容，<code>level3</code>属性设置插槽自定义三级菜单内容。</p>\n',
         'en-US':
           '<p>The level-1 menu content is customized through the <code>level1</code> slot, the level-2 menu content is customized through the <code>level2</code> slot, and the level-3 menu content is customized through the <code>level3</code> slot. </p>\n'
       },

package/demos/pc/app/file-upload/abort-quest-composition-api.vue

@@ -16,7 +16,7 @@ const action = ref('http://localhost:3000/api/upload')
 const uploadRef = ref()
 
 function cancelUpload() {
-  Modal.message('手动取消上传')
+  Modal.message({ message: '手动取消上传', status: 'info' })
   uploadRef.value.abort()
 }
 </script>

package/demos/pc/app/file-upload/abort-quest.vue

@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     cancelUpload() {
-      Modal.message('手动取消上传')
+      Modal.message({ message: '手动取消上传', status: 'info' })
       this.$refs.upload.abort()
     }
   }

package/demos/pc/app/file-upload/basic-usage.spec.ts

@@ -5,13 +5,13 @@ test('基本用法', async ({ page }) => {
   await page.goto('file-upload#basic-usage')
 
   const upload = page.getByRole('button', { name: '点击上传' })
-  const lists = page.locator('.tiny-upload-list__item')
+  const lists = page.locator('.tiny-upload-list__li')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
 
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
   await fileChooser.setFiles(currentPath)
-  await expect(lists).toHaveCount(1)
+  await page.getByText('测试.jpg').isVisible()
   await expect(lists).toHaveText('测试.jpg按 delete 键可删除')
 })

package/demos/pc/app/file-upload/{prevent-upload-file-composition-api.vue → before-upload-limit-composition-api.vue}

@@ -1,5 +1,5 @@
 <template>
-  <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" :before-upload="beforeUpload">
+  <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" :before-upload="beforeAvatarUpload">
     <template #trigger>
       <tiny-button type="primary">选取文件</tiny-button>
     </template>
@@ -18,11 +18,19 @@ const fileList = ref([
   }
 ])
 
-function beforeUpload(file) {
+function beforeAvatarUpload(file) {
   return new Promise((resolve, reject) => {
-    Modal.confirm(`确定要上传 ${file.name}？`).then((res) => {
-      res === 'confirm' ? resolve() : reject()
-    })
+    const isJPG = file.type === 'image/jpeg'
+    const isLt2M = file.size / 1024 / 1024 < 2
+    const allow = isJPG && isLt2M
+
+    if (!allow) {
+      Modal.confirm(`自定义提示：《${file.name}》文件不合规范，文件类型或大小超出限制，确定要上传吗？`).then((res) => {
+        res === 'confirm' ? resolve() : reject()
+      })
+    } else {
+      resolve()
+    }
   })
 }
 </script>

package/demos/pc/app/file-upload/{prevent-upload-file.spec.ts → before-upload-limit.spec.ts}

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('阻止上传文件', async ({ page }) => {
+test('定义上传前限制', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('file-upload#prevent-upload-file')
+  await page.goto('file-upload#before-upload-limit')
 
   const upload = page.getByRole('button', { name: '选取文件' })
   const modal = page.locator('.tiny-modal').nth(1)
@@ -12,12 +12,17 @@ test('阻止上传文件', async ({ page }) => {
 
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
+  const exceedFilePath = path.resolve(__dirname, 'before-upload-limit.vue')
 
   await expect(lists).toHaveCount(1)
-  await expect(lists).toHaveText(/test1/)
+  await page.getByText('test1').isVisible()
+  await page.getByText('测试.jpg').isVisible()
   await fileChooser.setFiles(currentPath)
+  await page.getByText('测试.jpg').isVisible()
+
+  await fileChooser.setFiles(exceedFilePath)
   await modal.waitFor({ state: 'attached', timeout: 100 })
   await modalCancel.click()
   await expect(lists).toHaveCount(1)
-  await expect(lists).toHaveText(/test1/)
+  await page.getByText('test1').isVisible()
 })

package/demos/pc/app/file-upload/{prevent-upload-file.vue → before-upload-limit.vue}

@@ -1,5 +1,5 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" :before-upload="beforeUpload">
+  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" :before-upload="beforeAvatarUpload">
     <template #trigger>
       <tiny-button type="primary">选取文件</tiny-button>
     </template>
@@ -26,11 +26,21 @@ export default {
     }
   },
   methods: {
-    beforeUpload(file) {
+    beforeAvatarUpload(file) {
       return new Promise((resolve, reject) => {
-        Modal.confirm(`确定要上传 ${file.name}？`).then((res) => {
-          res === 'confirm' ? resolve() : reject()
-        })
+        const isJPG = file.type === 'image/jpeg'
+        const isLt2M = file.size / 1024 / 1024 < 2
+        const allow = isJPG && isLt2M
+
+        if (!allow) {
+          Modal.confirm(`自定义提示：《${file.name}》文件不合规范，文件类型或大小超出限制，确定要上传吗？`).then(
+            (res) => {
+              res === 'confirm' ? resolve() : reject()
+            }
+          )
+        } else {
+          resolve()
+        }
       })
     }
   }

package/demos/pc/app/file-upload/custom-upload-tip-composition-api.vue

@@ -4,7 +4,7 @@
       <tiny-button type="primary">选取文件</tiny-button>
     </template>
     <template #tip>
-      <div class="tiny-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+      <div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过500 kb</div>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/custom-upload-tip.spec.ts

@@ -6,5 +6,5 @@ test('自定义上传提示', async ({ page }) => {
 
   const tip = page.locator('.tiny-upload__tip')
 
-  await expect(tip).toHaveText('只能上传jpg/png文件，且不超过500kb')
+  await expect(tip).toHaveText('只能上传 jpg/png 文件，且不超过500 kb')
 })

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

@@ -4,7 +4,7 @@
       <tiny-button type="primary">选取文件</tiny-button>
     </template>
     <template #tip>
-      <div class="tiny-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+      <div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过500 kb</div>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/form-validation-composition-api.vue

@@ -20,7 +20,7 @@
           <tiny-button type="primary">选取文件</tiny-button>
         </template>
         <template #tip>
-          <div class="tiny-upload__tip">只能上传jpg/png文件</div>
+          <div class="tiny-upload__tip">只能上传 jpg/png 文件</div>
         </template>
       </tiny-file-upload>
     </tiny-form-item>
@@ -65,6 +65,9 @@ const rules = reactive({
 const uploadSuccess = () => {
   // 模拟上传成功后，返回的数据信息,以此通过validatePass的校验
   createData.files = `https://res.hc-cdn.com/tiny-vue-web-doc/3.10.5.20230903162611/static/images/book.jpg`
+
+  // 上传成功后再进行表单验证
+  formValidate()
 }
 
 const beforeUpload = (file) => {
@@ -72,21 +75,24 @@ const beforeUpload = (file) => {
   uploadSuccess()
 }
 
-const handleSubmit = () => {
+const formValidate = () => {
   ruleFormRef.value.validate((valid) => {
     if (valid) {
       Modal.alert('校验通过')
     } else {
-      Modal.message({ message: '校验不通过！！', status: 'warning' })
+      Modal.message({ message: '校验不通过', status: 'warning' })
       return false
     }
   })
 }
 
+const handleSubmit = () => {
+  formValidate()
+}
+
 const handleRemove = (file) => {
   const index = fileList.findIndex((item) => item.name === file.name)
   fileList.splice(index, 1)
-  console.log('fileList', fileList)
   createData.files = ''
 }
 </script>

package/demos/pc/app/file-upload/form-validation.vue

@@ -21,7 +21,7 @@
             <tiny-button type="primary">选取文件</tiny-button>
           </template>
           <template #tip>
-            <div class="tiny-upload__tip">只能上传jpg/png文件</div>
+            <div class="tiny-upload__tip">只能上传 jpg/png 文件</div>
           </template>
         </tiny-file-upload>
       </tiny-form-item>
@@ -67,21 +67,27 @@ export default {
     uploadSuccess() {
       // 模拟上传成功后，返回的数据信息,以此通过validatePass的校验
       this.createData.files = `https://res.hc-cdn.com/tiny-vue-web-doc/3.10.5.20230903162611/static/images/book.jpg`
+
+      // 上传成功后再进行表单验证
+      this.formValidate()
     },
     beforeUpload(file) {
       this.fileList.push({ name: file.name, url: file.url })
       this.uploadSuccess()
     },
-    handleSubmit() {
+    formValidate() {
       this.$refs.ruleFormRef.validate((valid) => {
         if (valid) {
           Modal.alert('校验通过')
         } else {
-          Modal.message({ message: '校验不通过！！', status: 'warning' })
+          Modal.message({ message: '校验不通过', status: 'warning' })
           return false
         }
       })
     },
+    handleSubmit() {
+      this.formValidate()
+    },
     handleRemove(file) {
       const index = this.fileList.findIndex((item) => item.name === file.name)
       this.fileList.splice(index, 1)

package/demos/pc/app/file-upload/multiple-file.spec.ts

@@ -16,6 +16,8 @@ test('文件多选', async ({ page }) => {
 
   await expect(fileChooser.isMultiple()).toBe(true)
   await fileChooser.setFiles([path1, path2, path3])
-  await expect(lists).toHaveCount(3)
+  await lists.getByText('测试.jpg').isVisible()
+  await lists.getByText('测试.svg').isVisible()
+  await lists.getByText('测试.png').isVisible()
   await expect(input).toHaveAttribute('multiple', '')
 })