@opentiny/vue-docs 2.2.6 → 2.2.7

package/demos/pc/app/steps/size.spec.ts

@@ -4,5 +4,6 @@ test('尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#size')
 
-  // TODO
+  const miniSteps = page.locator('#size .tiny-steps-block').first()
+  await expect(miniSteps).toHaveClass(/small/)
 })

package/demos/pc/app/steps/slot-item.spec.ts

@@ -2,7 +2,13 @@ import { test, expect } from '@playwright/test'
 
 test('插槽的使用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('steps#slot')
+  await page.goto('steps#slot-item')
 
-  // TODO
+  const steps = page.locator('#slot-item .tiny-steps')
+  const nodes = steps.locator('li')
+
+  await expect(nodes.first()).toHaveText('Basic Info')
+  await expect(nodes.nth(1)).toHaveText('BOQ Info')
+  await expect(nodes.nth(2)).toHaveText('Involved Parties')
+  await expect(nodes.nth(3)).toHaveText('Billing')
 })

package/demos/pc/app/steps/slot-item.vue

@@ -2,12 +2,12 @@
   <div class="demo-steps-slot-item">
     <tiny-steps :data="stepsData">
       <template #item="data">
-        <a class="label"
-          ><span>{{ data.slotScope.name }}</span></a
-        >
+        <div class="label">
+          <span>{{ data.slotScope.name }}</span>
+        </div>
         <span>
           <div :class="['dot', data.slotScope.status]">
-            <component :is="data.slotScope.status == 'done' ? IconYes : IconClose" class="tiny-svg-size" />
+            <component :is="data.slotScope.status === 'done' ? IconYes : IconClose" class="tiny-svg-size" />
           </div>
         </span>
       </template>

package/demos/pc/app/steps/text-position.spec.ts

@@ -4,5 +4,6 @@ test('文本内容位置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#text-position')
 
-  // TODO
+  const steps1 = page.locator('#text-position .tiny-steps')
+  await expect(steps1.locator('.tiny-steps-normal')).toHaveClass(/text-right/)
 })

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-tabs v-model="activeName">
     <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。</tiny-tab-item>
-    <tiny-tab-item title="数据组件" name="second">
+    <tiny-tab-item title="数据组件" name="second" disabled>
       数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
     <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。</tiny-tab-item>

package/demos/pc/app/tabs/basic-usage.spec.ts

@@ -7,6 +7,7 @@ test('基本用法', async ({ page }) => {
   const tabs = page.locator('.tiny-tabs')
   const tabItems = tabs.getByRole('tab')
   const item1 = tabItems.nth(0)
+  const item2 = tabItems.nth(1)
   const content = tabs.getByRole('tabpanel')
   const activeBar = tabs.locator('.tiny-tabs__active-bar')
 
@@ -21,4 +22,9 @@ test('基本用法', async ({ page }) => {
   await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
   await expect(item1).toHaveCSS('color', 'rgb(94, 124, 224)')
   await expect(content).toHaveText(/表单组件/)
+
+  // 禁用
+  await item2.click()
+  await expect(item1).toHaveClass(/is-active/)
+  await expect(content).toHaveText(/表单组件/)
 })

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-tabs v-model="activeName">
     <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。</tiny-tab-item>
-    <tiny-tab-item title="数据组件" name="second">
+    <tiny-tab-item title="数据组件" name="second" disabled>
       数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
     <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。</tiny-tab-item>

package/demos/pc/app/tabs/tabs-events-close-composition-api.vue

@@ -1,6 +1,12 @@
 <template>
   <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" @close="close">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item
+      :key="item.name"
+      v-for="item in Tabs"
+      :title="item.title"
+      :name="item.name"
+      :with-close="item.withClose"
+    >
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -35,7 +41,8 @@ const Tabs = ref([
   {
     title: '其他组件',
     name: 'fifth',
-    content: '其他组件，更多种类组件。'
+    content: '其他组件，更多种类组件。',
+    withClose: false
   }
 ])
 const instance = getCurrentInstance()

package/demos/pc/app/tabs/tabs-events-close.vue

@@ -1,6 +1,12 @@
 <template>
   <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" @close="close">
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item
+      :key="item.name"
+      v-for="item in Tabs"
+      :title="item.title"
+      :name="item.name"
+      :with-close="item.withClose"
+    >
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -41,7 +47,8 @@ export default {
         {
           title: '其他组件',
           name: 'fifth',
-          content: '其他组件，更多种类组件。'
+          content: '其他组件，更多种类组件。',
+          withClose: false
         }
       ]
     }

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

@@ -6,10 +6,10 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': ` <code>Tabs</code> ：通过 <code>v-model</code> 设置选中的页签项，对应 <code>TabItem</code> 页签项中 <code>name</code> 属性的值；<br />
-        <code>TabItem</code> ：通过 <code>title</code> 设置页签项标题。`,
-        'en-US': ` <code>Tabs</code> :Set the selected tag item through the <code>v-model</code> , corresponding to the value of the <code>name</code> attribute in the <code>TabItem</code> tag item;<br/>
-        <code>TabItem</code> :Set the label item title through <code>title</code> .`
+        'zh-CN': `<div class="tip custom-block"><code>Tabs</code> ：通过 v-model 设置选中的页签项，对应 TabItem 页签项中 name 属性的值；<br />
+        <code>TabItem</code> ：通过 title 设置页签项标题， name 设置页签项的值，disabled 设置页签项禁用，默认插槽自定义对应的内容。</div>`,
+        'en-US': `<div class="tip custom-block"><p> <code>Tabs</code> :Set the selected tag item through the v-model , corresponding to the value of the name attribute in the TabItem tag item;<br/>
+        <code>TabItem</code> :Set the label item title through title .nameSet the value of tab items.disabledSet tab items to be disabled.Customize the corresponding content for the default slot.</div>`
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -441,6 +441,81 @@ export default {
           'demoId': 'custom-tab-title'
         }
       ]
+    },
+    {
+      'name': 'tab-item',
+      'type': 'component',
+      'props': [
+        {
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '设置页签项禁用，设置为 true 则无法点击',
+            'en-US': 'Set tab items to disable, set to true to prevent clicking'
+          },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'lazy',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '设置本页签项内容是否为懒加载，默认为否',
+            'en-US': 'Set whether the content of this tab is lazy loading, default to no'
+          },
+          'demoId': 'lazy'
+        },
+        {
+          'name': 'name',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '页签项的值', 'en-US': 'Value of tab items' },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'title',
+          'type': 'string',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '页签项标题', 'en-US': 'Tab Item Title' },
+          'demoId': 'basic-usage'
+        },
+        {
+          'name': 'with-close',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '页签项是否展示删除按钮，与 Tabs 的 with-close 取或，只要有一个为true，则此项展示删除按钮',
+            'en-US': `Does the tab item display a delete button, which is equal to or greater than the 'with close' option in Tabs? As long as one of these options is true, this option displays the delete button`
+          },
+          'demoId': 'tabs-events-close'
+        }
+      ],
+      'events': [
+        {
+          'name': 'tab-nav-update',
+          'type': '() => void',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '当页签项的 title 值发生变化时触发',
+            'en-US': 'Triggered when the title value of the tab item changes'
+          },
+          'demoId': ''
+        }
+      ],
+      'slots': [
+        {
+          'name': 'default',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '页签项对应内容部分的默认插槽，用来自定义页签项对应的页面内容',
+            'en-US':
+              'The default slot for the content section corresponding to the tab item, used to customize the page content corresponding to the tab item'
+          },
+          'demoId': 'basic-usage'
+        }
+      ]
     }
   ],
   types: [

package/demos/pc/app/text-popup/basic-usage.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#basic-usage')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#basic-usage')
   const small = preview.locator('input')
   const larger = preview.locator('textarea')
 

package/demos/pc/app/text-popup/clear-value.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 清空value值', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#clear-value')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#clear-value')
   const button = preview.getByRole('button', { name: '点击清除' })
   const small = preview.locator('input')
   const larger = preview.locator('textarea')

package/demos/pc/app/text-popup/placeholder.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 提示占位文本', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#placeholder')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#placeholder')
   const small = preview.locator('input')
   const larger = preview.locator('textarea')
 

package/demos/pc/app/text-popup/readonly.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 只读', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#readonly')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#readonly')
   const small = preview.locator('input')
   const larger = preview.locator('textarea')
 

package/demos/pc/app/text-popup/separtor.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 分隔符', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#separtor')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#separtor')
   const small = preview.locator('input')
   const larger = preview.locator('textarea')
 

package/demos/pc/app/text-popup/value.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#value')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#value')
   const small = preview.locator('input')
   const larger = preview.locator('textarea')
 

package/demos/pc/app/text-popup/webdoc/text-popup.js

@@ -22,7 +22,7 @@ export default {
       'demoId': 'readonly',
       'name': { 'zh-CN': '只读', 'en-US': 'Read-only' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>readonly</code> 设置是否只读。</p>\n',
+        'zh-CN': '<p>通过 <code>readonly</code> 设置是否只读。</p>\n',
         'en-US': '<p>You can use <code>readonly</code> to set whether to read only. </p>\n'
       },
       'codeFiles': ['readonly.vue']
@@ -31,7 +31,7 @@ export default {
       'demoId': 'separtor',
       'name': { 'zh-CN': '分隔符', 'en-US': 'Separator' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>separtor</code> 设置分隔符,在文本框中输入回车就是分隔符的位置。</p>\n',
+        'zh-CN': '<p>通过 <code>separtor</code> 设置分隔符,在文本框中输入回车就是分隔符的位置。</p>\n',
         'en-US':
           '<p>You can use <code>separtor</code> to set the separator. Enter the position of the separator in the text box and press Enter. </p>\n'
       },
@@ -41,7 +41,7 @@ export default {
       'demoId': 'value',
       'name': { 'zh-CN': '绑定值', 'en-US': 'Bound Value' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>value</code> 或 <code>v-model</code> 设置绑定值。</p>\n',
+        'zh-CN': '<p>通过 <code>value</code> 或 <code>v-model</code> 设置绑定值。</p>\n',
         'en-US': '<p>You can set the binding value using <code>value</code> or <code>v-model</code>. </p>\n'
       },
       'codeFiles': ['value.vue']
@@ -56,7 +56,7 @@ export default {
       'demoId': 'width',
       'name': { 'zh-CN': '宽度', 'en-US': 'Width' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>width</code> 设置宽度。</p>\n',
+        'zh-CN': '<p>通过 <code>width</code> 设置宽度。</p>\n',
         'en-US': '<p>You can set the width through <code>width</code>. </p>\n'
       },
       'codeFiles': ['width.vue']
@@ -66,7 +66,7 @@ export default {
     {
       'name': 'text-popup',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'value',
           'type': 'string',
@@ -79,7 +79,7 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置输入框内的提示占位文本',
+            'zh-CN': '输入框内的提示占位文本',
             'en-US': 'Set the prompt placeholder text in the text box.'
           },
           'demoId': 'placeholder'
@@ -87,21 +87,21 @@ export default {
         {
           'name': 'readonly',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': '设置是否只读', 'en-US': 'Set whether to read only' },
+          'defaultValue': 'false',
+          'desc': { 'zh-CN': '是否只读', 'en-US': 'Set whether to read only' },
           'demoId': 'readonly'
         },
         {
           'name': 'width',
           'type': 'number , string',
-          'defaultValue': '该属性的默认值为 150',
-          'desc': { 'zh-CN': '设置宽度', 'en-US': 'Set width' },
+          'defaultValue': '150',
+          'desc': { 'zh-CN': '宽度', 'en-US': 'Set width' },
           'demoId': 'width'
         },
         {
           'name': 'separtor',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 ,',
+          'defaultValue': '',
           'desc': { 'zh-CN': '分隔符', 'en-US': 'Separator' },
           'demoId': 'separtor'
         }

package/demos/pc/app/text-popup/width.spec.ts

@@ -4,7 +4,7 @@ test('Textpopup 宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('text-popup#width')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#width')
   const textPopup = preview.locator('.tiny-text-popup')
 
   await expect(textPopup).toHaveCSS('width', '500px')

package/demos/pc/app/time-line/basic-usage.spec.ts

@@ -4,7 +4,7 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-line#basic-usage')
 
-  const timeline = page.locator('#preview .tiny-steps')
+  const timeline = page.locator('#basic-usage .tiny-steps')
   const nodes = timeline.locator('.normal')
 
   await expect(nodes.first()).toHaveClass(/process-done/)

package/demos/pc/app/time-line/custom-field.spec.ts

@@ -1,11 +1,11 @@
 import { test, expect } from '@playwright/test'
 
-test('自定义数据映射规则', async ({ page }) => {
+test('自定义字段', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
 
-  await page.goto('time-line#different-data')
+  await page.goto('time-line#custom-field')
 
-  const timeline = page.locator('#preview .tiny-steps')
+  const timeline = page.locator('#custom-field .tiny-steps')
   const nodes = timeline.locator('.timeline')
 
   await expect(nodes.first().locator('.date-time .date')).toHaveText('2018-04-15')

package/demos/pc/app/time-line/custom-horizontal-timeline.spec.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('自定义节点顶部与底部内容', async ({ page }) => {
+test('自定义横向时间线', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#custom-normal-step')
+  await page.goto('time-line#custom-horizontal-timeline')
 
-  const node = page.locator('#preview .tiny-steps .normal').first()
+  const node = page.locator('#custom-horizontal-timeline .tiny-steps .normal').first()
   // 自定义顶部内容
   await expect(node.locator('.custom-top')).toBeVisible()
   await expect(node.locator('.custom-top')).toContainText('已下单')

package/demos/pc/app/time-line/custom-vertical-timeline.spec.ts

@@ -3,13 +3,13 @@ import { test, expect } from '@playwright/test'
 test('自定义竖向时间线', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
 
-  await page.goto('time-line#custom-vertical-step')
+  await page.goto('time-line#custom-vertical-timeline')
 
-  const node = page.locator('#preview .tiny-steps .timeline').first()
+  const node = page.locator('#custom-vertical-timeline .tiny-steps .timeline').first()
   // 自定义左侧内容
-  await expect(node.locator('ul > span').first()).toHaveCSS('text-align', 'right')
-  await expect(node.locator('ul > span').first()).toHaveText('已下单')
+  await expect(node.locator('span').first()).toHaveClass('custom-left')
+  await expect(node.locator('span').first()).toHaveText('已下单')
   // 自定义右侧内容
-  await expect(node.locator('ul > span').nth(1)).toHaveCSS('margin-left', '15px')
-  await expect(node.locator('ul > span').nth(1)).toContainText('2019')
+  await expect(node.locator('span').nth(1)).toHaveCSS('margin-left', '15px')
+  await expect(node.locator('span').nth(1)).toContainText('2019')
 })

package/demos/pc/app/time-line/set-node-width.spec.ts

@@ -1,14 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('节点长度设置', async ({ page }) => {
+test('宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#set-step-width')
+  await page.goto('time-line#set-node-width')
 
-  const node1 = page.locator('#preview .tiny-steps').first().locator('.tiny-timeline-item').first()
-  const { width: itemWidth1 } = await node1.boundingBox()
-  expect(Math.round(itemWidth1)).toBeCloseTo(200)
+  const node1 = page.locator('#set-node-width .tiny-steps').nth(0).locator('.tiny-timeline-item').first()
+  await expect(node1).toHaveCSS('width', '200px')
 
-  const node2 = page.locator('#preview .tiny-steps').nth(1).locator('.tiny-timeline-item').first()
-  const { width: itemWidth2 } = await node2.boundingBox()
-  expect(Math.round(itemWidth2)).toBeCloseTo(160)
+  const node2 = page.locator('#set-node-width .tiny-steps').nth(1).locator('.tiny-timeline-item').first()
+  await expect(node2).toHaveCSS('flex', '0 0 20%')
 })

package/demos/pc/app/time-line/set-start-value.spec.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('设置序号起始值', async ({ page }) => {
+test('序号起始值', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-line#set-start-value')
 
-  const nodes = page.locator('#preview .tiny-steps .normal')
-  await expect(nodes.nth(1).locator('.icon')).toHaveText('3')
-  await expect(nodes.nth(2).locator('.icon')).toHaveText('4')
+  const nodes = page.locator('#set-start-value .tiny-steps .tiny-timeline-item')
+  await expect(nodes.nth(1).locator('.icon span')).toHaveText('3')
+  await expect(nodes.nth(2).locator('.icon span')).toHaveText('4')
 })

package/demos/pc/app/time-line/shape.spec.ts

@@ -1,14 +1,14 @@
 import { test, expect } from '@playwright/test'
 
-test('节点外观风格', async ({ page }) => {
+test('圆点外观', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-line#shape')
 
-  const timeline = page.locator('#preview .tiny-steps-timeline')
+  const timeline = page.locator('#shape .tiny-steps-timeline')
   await expect(timeline.locator('.dot').first()).toBeVisible()
   await expect(timeline.locator('.tiny-timeline-item__content .time').first()).toBeVisible()
 
-  await page.getByRole('button', { name: '点击切换shape的值为 circle' }).click()
+  await page.getByRole('button', { name: '点击切换 shape 为 circle' }).click()
   await expect(timeline.locator('.dot').first()).not.toBeVisible()
   await expect(timeline.locator('.tiny-timeline-item__content .time').first()).not.toBeVisible()
 })

package/demos/pc/app/time-line/status.spec.ts

@@ -4,7 +4,7 @@ test('节点状态', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-line#status')
 
-  const timeline = page.locator('#preview .tiny-steps-timeline')
+  const timeline = page.locator('#status .tiny-steps-timeline')
   const timelineItems = timeline.locator('.tiny-timeline-item')
   await expect(timelineItems.first()).toHaveClass(/timeline-item--primary/)
   await expect(timelineItems.nth(1)).toHaveClass(/timeline-item--success/)

package/demos/pc/app/time-line/timeline-item.spec.ts

@@ -4,7 +4,7 @@ test('步骤条节点组件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-line#basic-usage')
 
-  const timeline = page.locator('#preview .tiny-steps')
+  const timeline = page.locator('#basic-usage .tiny-steps')
   const nodes = timeline.locator('.normal')
 
   await expect(nodes.first()).toHaveClass(/process-done/)

package/demos/pc/app/time-line/vertical-timeline.spec.ts

@@ -1,10 +1,14 @@
 import { test, expect } from '@playwright/test'
 
-test('纵向时间线', async ({ page }) => {
+test('竖向时间线', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#vertical-step')
+  await page.goto('time-line#vertical-timeline')
 
-  const timeline = page.locator('#preview .tiny-steps')
-  await expect(timeline).not.toHaveClass(/is-horizontal/)
-  await expect(timeline.locator('div').first()).toHaveClass('tiny-steps-timeline')
+  const node1 = page.locator('#vertical-timeline .tiny-steps').nth(0).locator('.tiny-steps-timeline')
+  await expect(node1).not.toHaveClass('text-bottom')
+
+  const node2 = page.locator('#vertical-timeline .tiny-steps').nth(1).locator('.tiny-timeline-item')
+  await expect(node2.nth(0).locator('.name')).toHaveText('已签收')
+  await expect(node2.nth(1).locator('.name')).toHaveText('运输中')
+  await expect(node2.nth(2).locator('.name')).toHaveText('已下单')
 })

package/demos/pc/app/time-line/webdoc/time-line.js

@@ -220,7 +220,7 @@ export default {
             'zh-CN': '节点时间信息对应的字段名',
             'en-US': 'The name of the field corresponding to the node time information'
           },
-          'demoId': 'custome-filed'
+          'demoId': 'custom-field'
         },
         {
           'name': 'vertical',
@@ -282,7 +282,7 @@ export default {
     {
       'name': 'timeline-item',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'node',
           'type': 'ITimelineItem',

package/demos/pc/app/time-picker/basic-usage.spec.ts

@@ -4,38 +4,17 @@ test('时间选择器基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#basic-usage')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor > input')
-  const timeSelect = page.locator('.tiny-time-panel')
-  const hourSelect = timeSelect.locator('.tiny-scrollbar').first()
-  const minSelect = timeSelect.locator('.tiny-scrollbar').nth(1)
-  const secondSelect = timeSelect.locator('.tiny-scrollbar').nth(2)
+  // 测试滚动选择时间
+  const timePicker = page.getByRole('textbox', { name: '18:42:00' }).first()
+  await page.getByRole('textbox', { name: '18:40:00' }).first().click()
+  await page.getByRole('listitem').filter({ hasText: '42' }).first().click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(timePicker).toBeVisible()
 
-  // 测试非法输入是否赋予默认值
-  await expect(timePicker).toHaveValue('18:40:00')
-  await timePicker.click()
-  await expect(timeSelect).toBeVisible()
-  await timePicker.fill('inValidInput')
-  await timePicker.press('Enter')
-  await expect(timePicker).toHaveValue('18:40:00')
-  // 测试可选时间范围
-  await timePicker.click()
-  await expect(hourSelect.locator('.tiny-time-spinner__item')).toHaveCount(24)
-  await expect(minSelect.locator('.tiny-time-spinner__item')).toHaveCount(60)
-  await expect(secondSelect.locator('.tiny-time-spinner__item')).toHaveCount(60)
-  await expect(hourSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(21)
-  await expect(minSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(30)
-  await expect(secondSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(0)
-  await hourSelect.locator('.tiny-time-spinner__item').getByText('19').click()
-  await minSelect.locator('.tiny-time-spinner__item').getByText('42').click()
-  await secondSelect.locator('.tiny-time-spinner__item').getByText('01').click()
-  await expect(hourSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(21)
-  await expect(minSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(0)
-  await expect(secondSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(0)
-  await expect(timePicker).toHaveValue('19:42:01')
-  // 测试清除按钮
-  await timePicker.hover()
-  await expect(preview.locator('.tiny-date-editor--time svg.baseClearicon')).toBeVisible()
-  await preview.locator('.tiny-date-editor--time svg.baseClearicon').click()
-  await expect(timePicker).toHaveValue('')
+  // 测试箭头选择时间
+  const timePickerArrowControl = page.getByRole('textbox', { name: '19:42:00' }).nth(1)
+  await page.getByRole('textbox', { name: '18:42:00' }).nth(1).click()
+  await page.locator('.tiny-time-spinner__wrapper > i:nth-child(2)').first().click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(timePickerArrowControl).toBeVisible()
 })