@opentiny/vue-docs 3.25.0 → 3.26.1

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

@@ -68,27 +68,27 @@ export default {
 }
 
 .demo-container .tiny-container :deep(.tiny-container__header) {
-  background-color: var(--tv-color-info-bg-light);
-  border: 3px solid var(--tv-color-border-container);
-  color: var(--tv-color-info-text);
+  background-color: var(--tv-color-info-bg-light, #0067d1);
+  border: 3px solid var(--tv-color-border-container, #fff);
+  color: var(--tv-color-info-text, #fff);
   line-height: 48px;
 }
 
 .demo-container .tiny-container :deep(.tiny-container__aside) {
-  background-color: var(--tv-color-error-bg-light);
-  border: 3px solid var(--tv-color-border-container);
-  color: var(--tv-color-error-text);
+  background-color: var(--tv-color-error-bg-light, #0067d180);
+  border: 3px solid var(--tv-color-border-container, #fff);
+  color: var(--tv-color-error-text, #fff);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__main) {
-  background-color: var(--tv-color-warn-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-warn-bg-light, #0067d133);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-warn-text);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__footer) {
-  background-color: var(--tv-color-success-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-success-bg-light, #f0f7ff);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-success-text);
 }
 .demo-center {

package/demos/pc/app/container/custom-with-height-composition-api.vue

@@ -40,26 +40,26 @@ const headerHeight = ref(80)
 }
 
 .demo-container .tiny-container :deep(.tiny-container__header) {
-  background-color: var(--tv-color-info-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-info-bg-light, #0067d1);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-info-text);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__aside) {
-  background-color: var(--tv-color-error-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-error-bg-light, #0067d180);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-error-text);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__main) {
-  background-color: var(--tv-color-warn-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-warn-bg-light, #0067d133);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-warn-text);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__footer) {
-  background-color: var(--tv-color-success-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-success-bg-light, #f0f7ff);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-success-text);
 }
 

package/demos/pc/app/container/custom-with-height.vue

@@ -49,26 +49,26 @@ export default {
 }
 
 .demo-container .tiny-container :deep(.tiny-container__header) {
-  background-color: var(--tv-color-info-bg-light);
-  border: 3px solid var(--tv-color-border-container);
-  color: var(--tv-color-info-text);
+  background-color: var(--tv-color-info-bg-light, #0067d1);
+  border: 3px solid var(--tv-color-border-container, #fff);
+  color: var(--tv-color-info-text, #fff);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__aside) {
-  background-color: var(--tv-color-error-bg-light);
-  border: 3px solid var(--tv-color-border-container);
-  color: var(--tv-color-error-text);
+  background-color: var(--tv-color-error-bg-light, #0067d180);
+  border: 3px solid var(--tv-color-border-container, #fff);
+  color: var(--tv-color-error-text, #fff);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__main) {
-  background-color: var(--tv-color-warn-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-warn-bg-light, #0067d133);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-warn-text);
 }
 
 .demo-container .tiny-container :deep(.tiny-container__footer) {
-  background-color: var(--tv-color-success-bg-light);
-  border: 3px solid var(--tv-color-border-container);
+  background-color: var(--tv-color-success-bg-light, #f0f7ff);
+  border: 3px solid var(--tv-color-border-container, #fff);
   color: var(--tv-color-success-text);
 }
 

package/demos/pc/app/dialog-select/nest-grid-single.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 表格单选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#nest-grid-single')
+
+  await page.locator('#nest-grid-single').getByRole('button', { name: '打开窗口' }).click()
+
+  await page.locator('.tiny-grid-body__row').first().waitFor()
+  let rows
+  rows = await page.locator('.tiny-grid-body__row').all()
+  for (const row of rows) {
+    const checked = await row.locator('input[type="radio"]').isChecked()
+    expect(checked).toBe(false)
+  }
+
+  await page.getByRole('row', { name: 'GFD 科技有限公司 福建 福州' }).locator('path').nth(1).click()
+
+  rows = await page.locator('.tiny-grid-body__row').all()
+  for (let i = 0; i < rows.length; i++) {
+    const checked = await rows[i].locator('input[type="radio"]').first().isChecked()
+    if (i === 0) {
+      expect(checked).toBe(true)
+    } else {
+      expect(checked).toBe(false)
+    }
+  }
+
+  await page.getByRole('row', { name: 'WWW 科技有限公司 广东 深圳' }).locator('path').nth(1).click()
+
+  rows = await page.locator('.tiny-grid-body__row').all()
+  for (let i = 0; i < rows.length; i++) {
+    const checked = await rows[i].locator('input[type="radio"]').first().isChecked()
+    if (i === 1) {
+      expect(checked).toBe(true)
+    } else {
+      expect(checked).toBe(false)
+    }
+  }
+})

package/demos/pc/app/dialog-select/nest-tree-multi.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 树多选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#nest-tree-multi')
+  await page.locator('#nest-tree-multi').getByRole('button', { name: '打开窗口', exact: true }).click()
+
+  const nodeContent = await page.locator('.tiny-tree-node__content-left label').nth(1)
+
+  const iconNode = await nodeContent.getAttribute('class')
+
+  expect(iconNode?.includes('tiny-radio')).toBe(false)
+  expect(iconNode?.includes('tiny-checkbox')).toBe(true)
+
+  let isChecked
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeFalsy()
+
+  let current
+  current = await page.getByRole('treeitem', { name: '三级 9' }).locator('path').nth(1)
+  await current.click()
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeTruthy()
+
+  await page
+    .locator('div')
+    .filter({ hasText: /^一级 1二级 4三级 8三级 9暂无数据$/ })
+    .getByRole('img')
+    .nth(3)
+    .click()
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeFalsy()
+
+  await page.getByRole('treeitem', { name: '三级 9' }).locator('path').nth(1).click()
+
+  isChecked = await page
+    .getByRole('treeitem', { name: '三级 9' })
+    .locator('.tiny-checkbox input[type="checkbox"]')
+    .isChecked()
+  expect(isChecked).toBeTruthy()
+})

package/demos/pc/app/dialog-select/nest-tree-single.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 树单选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#nest-tree-single')
+  await page.locator('#nest-tree-single').getByRole('button', { name: '打开窗口' }).click()
+
+  const nodeContent = await page.locator('.tiny-tree-node__content-left label').nth(1)
+
+  const iconNode = await nodeContent.getAttribute('class')
+
+  expect(iconNode?.includes('tiny-radio')).toBe(true)
+  expect(iconNode?.includes('tiny-checkbox')).toBe(false)
+
+  let current
+  current = await page.getByText('201一级')
+  await current.click()
+  expect(await current.locator('input[type="radio"]').isChecked()).toBe(true)
+
+  current = await page.getByRole('treeitem', { name: '二级 6' }).locator('label')
+  await current.click()
+  expect(await current.locator('input[type="radio"]').isChecked()).toBe(true)
+  current = await page.getByText('201一级')
+  expect(await current.locator('input[type="radio"]').isChecked()).toBe(false)
+})

package/demos/pc/app/dialog-select/set-selection.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('dialogSelect 设置多选状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dialog-select#set-selection')
+  await page.locator('#set-selection').getByRole('button', { name: '打开窗口' }).click()
+  await page.getByRole('button', { name: 'Close' }).click()
+  await page.getByRole('button', { name: '切换第二行选中状态' }).click()
+  await page.locator('#set-selection').getByRole('button', { name: '打开窗口' }).click()
+
+  const trs = await page.locator('.tiny-grid table tbody tr').all()
+  for (let i = 0; i < trs.length; i++) {
+    const classes = await trs[i].getAttribute('class')
+    if (i === 1) {
+      expect(classes?.includes('row__selected')).toBeTruthy()
+    } else {
+      expect(classes?.includes('row__selected')).toBeFalsy()
+    }
+  }
+})

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" :before-upload="beforeAvatarUpload">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/before-upload-limit.spec.ts

@@ -9,7 +9,7 @@ test('定义上传前限制', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#before-upload-limit')
 
-  const upload = page.getByRole('button', { name: '选取文件' })
+  const upload = page.getByRole('button', { name: '点击上传' })
   const modal = page.locator('.tiny-modal').nth(1)
   const modalCancel = page.getByRole('button', { name: '取消' })
   const lists = page.locator('.tiny-upload-list__item')

package/demos/pc/app/file-upload/before-upload-limit.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="upload" :action="action" :file-list="fileList" :before-upload="beforeAvatarUpload">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="uploadRef" :action="action">
     <template #trigger>
-      <tiny-button>我是触发源</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

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

@@ -6,5 +6,5 @@ test('触发源插槽', async ({ page }) => {
 
   const upload = page.locator('.tiny-upload')
 
-  await expect(upload).toHaveText('我是触发源')
+  await expect(upload).toHaveText('点击上传')
 })

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="upload" :action="action">
     <template #trigger>
-      <tiny-button>我是触发源</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

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

@@ -8,7 +8,7 @@
     :re-upload-tip="reUploadTip"
   >
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
     <template #tip>
       <div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过 500 kb</div>

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

@@ -8,7 +8,7 @@
     :re-upload-tip="reUploadTip"
   >
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
     <template #tip>
       <div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过 500 kb</div>

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

@@ -17,7 +17,7 @@
         @remove="handleRemove"
       >
         <template #trigger>
-          <tiny-button>选取文件</tiny-button>
+          <tiny-button>点击上传</tiny-button>
         </template>
         <template #tip>
           <div class="tiny-upload__tip">只能上传 jpg/png 文件</div>

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

@@ -18,7 +18,7 @@
           @remove="handleRemove"
         >
           <template #trigger>
-            <tiny-button>选取文件</tiny-button>
+            <tiny-button>点击上传</tiny-button>
           </template>
           <template #tip>
             <div class="tiny-upload__tip">只能上传 jpg/png 文件</div>

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

@@ -7,7 +7,7 @@
     :before-upload="beforeUpload"
   >
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
     <template #tip>
       <div class="tiny-upload__tip">只允许上传 image 类型文件</div>

package/demos/pc/app/file-upload/image-size.spec.ts

@@ -9,7 +9,7 @@ test('获取图片的原始尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#image-size')
 
-  const upload = page.getByRole('button', { name: '选取文件' })
+  const upload = page.getByRole('button', { name: '点击上传' })
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
   const modal = page.locator('.tiny-modal')
 

package/demos/pc/app/file-upload/image-size.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload accept="image/*" ref="upload" :action="action" :file-list="fileList" :before-upload="beforeUpload">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
     <template #tip>
       <div class="tiny-upload__tip">只允许上传 image 类型文件</div>

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload :action="action" :multiple="true">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

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

@@ -9,7 +9,7 @@ test('文件多选', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#multiple-file')
 
-  const upload = page.getByRole('button', { name: '选取文件' })
+  const upload = page.getByRole('button', { name: '点击上传' })
   const lists = page.locator('.tiny-upload-list__item')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
   const input = page.locator('.tiny-upload__input')

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload :action="action" :multiple="true">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" :before-remove="beforeRemove">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/file-upload/prevent-delete-file.vue

@@ -1,7 +1,7 @@
 <template>
   <tiny-file-upload ref="upload" :action="action" :file-list="fileList" :before-remove="beforeRemove">
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

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

@@ -8,7 +8,7 @@
     :before-upload="beforeUpload"
   >
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

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

@@ -12,7 +12,7 @@ test.describe('设置上传请求', () => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('file-upload#upload-request')
 
-    const upload = page.getByRole('button', { name: '选取文件' })
+    const upload = page.getByRole('button', { name: '点击上传' })
     const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
     await fileChooser.setFiles(path1)
     page.on('requestfailed', (request) => {
@@ -25,7 +25,7 @@ test.describe('设置上传请求', () => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('file-upload#upload-request')
 
-    const upload = page.getByRole('button', { name: '选取文件' })
+    const upload = page.getByRole('button', { name: '点击上传' })
     const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
     await fileChooser.setFiles(path1)
     page.on('requestfailed', (request) => {

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

@@ -8,7 +8,7 @@
     :before-upload="beforeUpload"
   >
     <template #trigger>
-      <tiny-button>选取文件</tiny-button>
+      <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>

package/demos/pc/app/grid/data-source/auto-load.spec.js

@@ -4,7 +4,6 @@ test('自动加载数据', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-data-source#data-source-auto-load')
   // 判断 auto-load 为 false 时不加载数据
-  await page.getByRole('paragraph').nth(1).click()
   const demo = page.locator('#data-source-auto-load')
   await expect(demo.getByText('暂无数据')).toHaveText('暂无数据')
 })

package/demos/pc/app/grid/dynamically-columns/dynamically-columns.spec.js

@@ -3,7 +3,8 @@ import { test, expect } from '@playwright/test'
 test('根据日期动态生成列', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-dynamically-columns#dynamically-columns-dynamically-columns')
-  await page.getByRole('textbox').nth(1).click()
+  const demo = page.locator('#dynamically-columns-dynamically-columns')
+  await demo.locator('.tiny-picker.tiny-date-container').click()
   await page.getByText('12 月').first().click()
   await page.getByText('2 月').nth(2).click()
   await expect(page.getByRole('cell', { name: '12' }).first()).toBeVisible()

package/demos/pc/app/grid/filter/custom-filter.spec.js

@@ -4,9 +4,9 @@ test('列筛选规则', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-filter#filter-custom-filter')
   await page.getByRole('cell', { name: '名称' }).getByRole('img').click()
-  await page.getByRole('textbox').nth(1).click()
-  await page.getByRole('textbox').nth(1).press('CapsLock')
-  await page.getByRole('textbox').nth(1).fill('WWW')
+  await page.locator('.tiny-grid__filter-wrapper.filter__active input').click()
+  await page.locator('.tiny-grid__filter-wrapper.filter__active input').press('CapsLock')
+  await page.locator('.tiny-grid__filter-wrapper.filter__active input').fill('WWW')
   await page.getByRole('button', { name: 'confirm' }).click()
   await expect(page.getByRole('cell', { name: 'WWW 科技 YX 公司' })).toBeVisible()
 })

package/demos/pc/app/grid/filter/simple-filter.spec.ts

@@ -6,11 +6,12 @@ test('简化版筛选面板 - 单选/多选菜单', async ({ page }) => {
   await page.getByRole('cell', { name: '公司名称' }).getByRole('img').click()
 
   // 筛选面板搜索功能
-  await page.getByRole('textbox').nth(1).click()
-  await page.getByRole('textbox').nth(1).fill('a')
+  const filterInput = page.locator('.tiny-grid__filter-wrapper.filter__active input')
+  await filterInput.click()
+  await filterInput.fill('a')
   await expect(page.getByRole('listitem').filter({ hasText: '暂无数据' })).toBeVisible()
-  await page.getByRole('textbox').nth(1).click()
-  await page.getByRole('textbox').nth(1).fill('')
+  await filterInput.click()
+  await filterInput.fill('')
   await page.getByTitle('GFD 科技 YX 公司').click()
   await page.getByTitle('WWW 科技 YX 公司').click()