@opentiny/vue-docs 2.2.8 → 2.2.9

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', '')
 })

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

@@ -36,34 +36,34 @@ const fileList = ref([
 ])
 
 function handleRemove() {
-  Modal.message('触发删除文件回调事件')
+  Modal.message({ message: '触发删除文件回调事件', status: 'info' })
 }
 
 function handlePreview(file) {
-  Modal.message(file.url)
+  Modal.message({ message: file.url, status: 'info' })
 }
 
 function progressEvent() {
-  Modal.message('文件上传时的回调 返回进程')
+  Modal.message({ message: '文件上传时的回调 返回进程', status: 'loading' })
 }
 
 function errorEvent() {
-  Modal.message('文件上传失败回调')
+  Modal.message({ message: '文件上传失败回调', status: 'error' })
 }
 
 function handleExceed() {
-  Modal.message('触发文件超出个数限制回调事件')
+  Modal.message({ message: '触发文件超出个数限制回调事件', status: 'warning' })
 }
 
 function handleAvatarSuccess() {
-  Modal.message('触发上传文件成功回调事件')
+  Modal.message({ message: '触发上传文件成功回调事件', status: 'success' })
 }
 
 function handleChange() {
-  Modal.message('触发上传文件改变回调事件')
+  Modal.message({ message: '触发上传文件改变回调事件', status: 'info' })
 }
 
 function handleHashProgress() {
-  Modal.message('文件上传生成hash值时的回调 返回进程')
+  Modal.message({ message: '文件上传生成hash值时的回调 返回进程', status: 'info' })
 }
 </script>

package/demos/pc/app/file-upload/upload-events.vue

@@ -44,28 +44,28 @@ export default {
   },
   methods: {
     handleRemove() {
-      Modal.message('触发删除文件回调事件')
+      Modal.message({ message: '触发删除文件回调事件', status: 'info' })
     },
     handlePreview(file) {
-      Modal.message(file.url)
+      Modal.message({ message: file.url, status: 'info' })
     },
     progressEvent() {
-      Modal.message('文件上传时的回调 返回进程')
+      Modal.message({ message: '文件上传时的回调 返回进程', status: 'loading' })
     },
     errorEvent() {
-      Modal.message('文件上传失败回调')
+      Modal.message({ message: '文件上传失败回调', status: 'error' })
     },
     handleExceed() {
-      Modal.message('触发文件超出个数限制回调事件')
+      Modal.message({ message: '触发文件超出个数限制回调事件', status: 'warning' })
     },
     handleAvatarSuccess() {
-      Modal.message('触发上传文件成功回调事件')
+      Modal.message({ message: '触发上传文件成功回调事件', status: 'success' })
     },
     handleChange() {
-      Modal.message('触发上传文件改变回调事件')
+      Modal.message({ message: '触发上传文件改变回调事件', status: 'info' })
     },
     handleHashProgress() {
-      Modal.message('文件上传生成hash值时的回调 返回进程')
+      Modal.message({ message: '文件上传生成hash值时的回调 返回进程', status: 'info' })
     }
   }
 }

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

@@ -30,7 +30,7 @@ const headers = ref({
 })
 
 function beforeUpload() {
-  Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+  Modal.message({ message: '查看请求头示例请打开浏览器开发者工具 network 的 upload 请求', status: 'info' })
 
   return true
 }

package/demos/pc/app/file-upload/upload-request.vue

@@ -38,7 +38,7 @@ export default {
   },
   methods: {
     beforeUpload() {
-      Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+      Modal.message({ message: '查看请求头示例请打开浏览器开发者工具 network 的 upload 请求', status: 'info' })
 
       return true
     }