@opentiny/vue-docs 2.2.18 → 2.2.20

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

@@ -9,10 +9,18 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code>reference</code>  插槽来指定一个触发源，通过 <code>content</code> 属性来指定提示内容，点击触发源会弹出内容面板。<br>\n          通过 <code>title</code> 属性来指定标题。<br>\n          通过 <code>width</code>  属性来指定一个弹出面板的宽度。<br>\n          <div class="tip custom-block">reference 插槽是必传插槽，没有它时组件渲染不出来。</div>\n        ',
-        'en-US':
-          '\n          Specify a trigger source through the <code>reference</code> slot, specify the prompt content through the <code>content</code> property, click the trigger source will pop up the content panel. <br>\n          The title is specified by the <code>title</code> attribute. <br>\n          Use the <code>width</code> property to specify the width of a pop-up panel. <br>\n          The <div class="tip custom-block">reference slot is a required slot without which the component cannot be rendered. </div>\n        '
+        'zh-CN': `
+          通过 <code>reference</code>  插槽来指定一个触发源，通过 <code>content</code> 属性来指定提示内容，点击触发源会弹出内容面板。<br>
+          通过 <code>title</code> 属性来指定标题。<br>
+          通过 <code>width</code>  属性来指定一个弹出面板的宽度。<br>
+          <div class="tip custom-block">reference 插槽是必传插槽，没有它时组件渲染不出来。</div>
+          `,
+        'en-US': `
+          Specify a trigger source through the <code>reference</code> slot, specify the prompt content through the <code>content</code> property, click the trigger source will pop up the content panel. <br>
+          The title is specified by the <code>title</code> attribute. <br>
+          Use the <code>width</code> property to specify the width of a pop-up panel. <br>
+          The <div class="tip custom-block">reference slot is a required slot without which the component cannot be rendered. </div>
+          `
       },
       codeFiles: ['basic-usage.vue']
     },
@@ -23,10 +31,14 @@ export default {
         'en-US': 'Trigger Mode'
       },
       desc: {
-        'zh-CN':
-          '\n          通过<code>trigger</code> 属性设定弹出框的4种触发方式， 默认值为 <code> click </code>。<br>\n          当触发方式为<code> manual</code>时，通过设置<code>v-model</code> 属性，动态控制显示和隐藏弹出框。\n        ',
-        'en-US':
-          '\n          The <code>trigger</code> property is used to set the triggering mode of the pop-up box. The optional value of the property is <code>click/hover/manual/focus</code>, and the default value is <code>click </code>. <br>\n          When the trigger mode is <code> manual</code>, you can set the <code>v-model</code> property to dynamically display and hide pop-ups.\n        '
+        'zh-CN': `
+          通过<code>trigger</code> 属性设定弹出框的4种触发方式， 默认值为 <code> click </code>。<br>
+          当触发方式为<code> manual</code>时，通过设置<code>v-model</code> 属性，动态控制显示和隐藏弹出框。
+          `,
+        'en-US': `
+          The <code>trigger</code> property is used to set the triggering mode of the pop-up box. The optional value of the property is <code>click/hover/manual/focus</code>, and the default value is <code>click </code>. <br>
+          When the trigger mode is <code> manual</code>, you can set the <code>v-model</code> property to dynamically display and hide pop-ups.
+          `
       },
       codeFiles: ['trigger.vue']
     },
@@ -37,10 +49,14 @@ export default {
         'en-US': 'Pop-up layer content'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code>content</code> 属性设置要显示的字符串内容。<br>\n          通过 <code>default</code> 插槽，支持自定义复杂的内容结构。<br>\n        ',
-        'en-US':
-          '\n          The <code>content</code> property sets the string content to be displayed.\n          Support for custom complex content structures through the <code>default</code> slot.\n        '
+        'zh-CN': `
+          通过 <code>content</code> 属性设置要显示的字符串内容。<br>
+          通过 <code>default</code> 插槽，支持自定义复杂的内容结构。<br>
+          `,
+        'en-US': `
+          The <code>content</code> property sets the string content to be displayed.
+          Support for custom complex content structures through the <code>default</code> slot.
+          `
       },
       codeFiles: ['content.vue']
     },
@@ -63,10 +79,14 @@ export default {
         'en-US': 'Custom Offset'
       },
       desc: {
-        'zh-CN':
-          '\n          通过<code>arrow-offset</code> 设置箭头的在弹窗层上的偏移量。箭头默认至少会保留8px的空间， 以保证箭头不会贴在弹窗层两边。<br>\n          通过<code> offset</code> 设置弹框的偏移量，来改变弹框的位置。\n        ',
-        'en-US':
-          '\n          Use <code>arrow-offset</code> to set the offset of the arrow on the popup layer. Arrows are left at least 8px by default to ensure that they are not stuck on either side of the popup layer. <br>\n          Change the position of the springboard by setting the offset</code> of the springboard\n        '
+        'zh-CN': `
+          通过<code>arrow-offset</code> 设置箭头的在弹窗层上的偏移量。箭头默认至少会保留8px的空间， 以保证箭头不会贴在弹窗层两边。<br>
+          通过<code> offset</code> 设置弹框的偏移量，来改变弹框的位置。
+          `,
+        'en-US': `
+          Use <code>arrow-offset</code> to set the offset of the arrow on the popup layer. Arrows are left at least 8px by default to ensure that they are not stuck on either side of the popup layer. <br>
+          Change the position of the springboard by setting the offset</code> of the springboard
+          `
       },
       codeFiles: ['offset.vue']
     },
@@ -77,10 +97,16 @@ export default {
         'en-US': 'Customize the pop-up panel'
       },
       desc: {
-        'zh-CN':
-          '\n          通过<code>placement</code> 设置弹出框的的位置。<br>\n          通过<code>visible-arrow</code> 设定是否显示提示框的箭头，默认值为 <code>true</code>。<br>\n          通过<code>popper-class</code> 可配置单个或多个类名，通过类名可以控制弹窗样式。\n        ',
-        'en-US':
-          '\n          By <code>placement</code> Set the location of the pop-up box.  <br>\n          Set whether the arrow of the prompt box is displayed by <code>visible-arrow</code>. The default value is true. <br>\n          You can run the <code>popper-class</code> command to configure one or more classes. You can control the popup style by class name.\n        '
+        'zh-CN': `
+          通过<code>placement</code> 设置弹出框的的位置。<br>
+          通过<code>visible-arrow</code> 设定是否显示提示框的箭头，默认值为 <code>true</code>。<br>
+          通过<code>popper-class</code> 可配置单个或多个类名，通过类名可以控制弹窗样式。
+          `,
+        'en-US': `
+          By <code>placement</code> Set the location of the pop-up box.  <br>
+          Set whether the arrow of the prompt box is displayed by <code>visible-arrow</code>. The default value is true. <br>
+          You can run the <code>popper-class</code> command to configure one or more classes. You can control the popup style by class name.
+          `
       },
       codeFiles: ['custom-popper.vue']
     },
@@ -91,10 +117,16 @@ export default {
         'en-US': 'Delay control'
       },
       desc: {
-        'zh-CN':
-          '\n          通过 <code>open-delay</code> 弹出框打开时延迟的时长，默认值为0，单位为毫秒。<br>\n          通过 <code>close-delay</code> 弹出框关闭时延迟的时长，默认值为200，单位为毫秒。<br>\n          <div class="tip custom-block">只有在触发方式为 hover 时，延迟控制功能才生效。</div>\n        ',
-        'en-US':
-          '\n          Run the <code>open-delay</code> command to open a pop-up. The default value is 0, in milliseconds. <br>\n          Run the <code>close-delay</code> command to close the pop-up. The default value is 200, in milliseconds. <br>\n          <div class="tip custom-block"> Delay control takes effect only if the trigger mode is hover. </div>\n        '
+        'zh-CN': `
+          通过 <code>open-delay</code> 弹出框打开时延迟的时长，默认值为0，单位为毫秒。<br>
+          通过 <code>close-delay</code> 弹出框关闭时延迟的时长，默认值为200，单位为毫秒。<br>
+          <div class="tip custom-block">只有在触发方式为 hover 时，延迟控制功能才生效。</div>
+          `,
+        'en-US': `
+          Run the <code>open-delay</code> command to open a pop-up. The default value is 0, in milliseconds. <br>
+          Run the <code>close-delay</code> command to close the pop-up. The default value is 200, in milliseconds. <br>
+          <div class="tip custom-block"> Delay control takes effect only if the trigger mode is hover. </div>
+          `
       },
       codeFiles: ['delay.vue']
     },
@@ -131,10 +163,19 @@ export default {
         'en-US': 'Event'
       },
       desc: {
-        'zh-CN':
-          '\n          组件支持以下事件：<br>\n          <code>hide</code> 隐藏时触发回调；<br>\n          <code>show</code> 显示时触发回调；<br>\n          <code>after-leave</code> 进入的动画结束后触发回调；<br>\n          <code>after-enter</code> 离开的动画播结束后触发回调；<br>',
-        'en-US':
-          '\n          The component supports the following events: <br>\n          <code>hide</code> Trigger callback when hiding <br>\n          <code>show</code> callback triggered when displayed <br>\n          <code>after-leave</code> Triggers callback after entering animation <br>\n          <code>after-enter</code> Trigger callback after the leaving animation ends <br>\n          '
+        'zh-CN': `
+          组件支持以下事件：<br>
+          <code>hide</code> 隐藏时触发回调；<br>
+          <code>show</code> 显示时触发回调；<br>
+          <code>after-leave</code> 进入的动画结束后触发回调；<br>
+          <code>after-enter</code> 离开的动画播结束后触发回调；<br>`,
+        'en-US': `
+          The component supports the following events: <br>
+          <code>hide</code> Trigger callback when hiding <br>
+          <code>show</code> callback triggered when displayed <br>
+          <code>after-leave</code> Triggers callback after entering animation <br>
+          <code>after-enter</code> Trigger callback after the leaving animation ends <br>
+          `
       },
       codeFiles: ['events.vue']
     }

package/demos/pc/app/radio/group-options-composition-api.vue

@@ -10,7 +10,7 @@ import { ref } from 'vue'
 import { RadioGroup as TinyRadioGroup, Modal } from '@opentiny/vue'
 
 function handleClick() {
-  Modal.message({ message: 'click' })
+  Modal.message({ message: 'click', status: 'info' })
 }
 const value = ref('A')
 const options = ref([

package/demos/pc/app/rate/custom-3-threshold-colors.spec.js

@@ -5,20 +5,7 @@ test.describe('rate 自定义 3 分段颜色', () => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('rate#custom-3-threshold-colors')
 
-    // hover时三分段颜色
     const icon = page.locator('.tiny-rate__star > .tiny-svg')
-    await icon.nth(0).hover()
-    await page.waitForTimeout(200)
-    await expect(icon.nth(0)).toHaveCSS('fill', 'rgb(250, 219, 20)')
-    await icon.nth(1).hover()
-    await expect(icon.nth(1)).toHaveCSS('fill', 'rgb(250, 219, 20)')
-    await icon.nth(2).hover()
-    await expect(icon.nth(2)).toHaveCSS('fill', 'rgb(255, 122, 69)')
-    await icon.nth(3).hover()
-    await expect(icon.nth(3)).toHaveCSS('fill', 'rgb(255, 169, 64)')
-    await icon.nth(4).hover()
-    await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 169, 64)')
-
     // 选中时时三分段颜色
     await icon.nth(0).click()
     await page.waitForTimeout(200)

package/demos/pc/app/rate/custom-3-threshold-icon.spec.js

@@ -8,27 +8,27 @@ test.describe('Rate 自定义 3 分段图标样式', () => {
     const icon = page.locator('.tiny-rate__star > .tiny-svg')
 
     await icon.nth(0).click()
-    await expect(page.locator('.tiny-rate > span:nth-child(1) > .tiny-svg > .st0').first()).toHaveAttribute(
+    await expect(page.locator('.tiny-rate > span:nth-child(1) > .tiny-svg > path').first()).toHaveAttribute(
       'd',
       'M6.5 11C5.7 11 5 10.3 5 9.5S5.7 8 6.5 8 8 8.7 8 9.5 7.3 11 6.5 11zm11 0c-.8 0-1.5-.7-1.5-1.5S16.7 8 17.5 8s1.5.7 1.5 1.5-.7 1.5-1.5 1.5zm-2.4 8c-.5 0-.9-.4-.9-.9 0-1.3-1-2.3-2.2-2.3s-2.2 1-2.2 2.3c0 .5-.4.9-.9.9s-.9-.4-.9-.9c0-2.3 1.8-4.1 4-4.1s4 1.8 4 4.1c0 .5-.4.9-.9.9z'
     )
     await icon.nth(1).click()
-    await expect(page.locator('.tiny-rate > span:nth-child(2) > .tiny-svg > .st0').first()).toHaveAttribute(
+    await expect(page.locator('.tiny-rate > span:nth-child(2) > .tiny-svg > path').first()).toHaveAttribute(
       'd',
       'M6.5 11C5.7 11 5 10.3 5 9.5S5.7 8 6.5 8 8 8.7 8 9.5 7.3 11 6.5 11zm11 0c-.8 0-1.5-.7-1.5-1.5S16.7 8 17.5 8s1.5.7 1.5 1.5-.7 1.5-1.5 1.5zm-2.4 8c-.5 0-.9-.4-.9-.9 0-1.3-1-2.3-2.2-2.3s-2.2 1-2.2 2.3c0 .5-.4.9-.9.9s-.9-.4-.9-.9c0-2.3 1.8-4.1 4-4.1s4 1.8 4 4.1c0 .5-.4.9-.9.9z'
     )
     await icon.nth(2).click()
-    await expect(page.locator('.tiny-rate > span:nth-child(3) > .tiny-svg > .st0').first()).toHaveAttribute(
+    await expect(page.locator('.tiny-rate > span:nth-child(3) > .tiny-svg > path').first()).toHaveAttribute(
       'd',
       'M9 16h6.1c.6 0 1 .4 1 1s-.4 1-1 1H9c-.6 0-1-.4-1-1s.5-1 1-1zm-2.5-5C5.7 11 5 10.3 5 9.5S5.7 8 6.5 8 8 8.7 8 9.5 7.3 11 6.5 11zm11 0c-.8 0-1.5-.7-1.5-1.5S16.7 8 17.5 8s1.5.7 1.5 1.5-.7 1.5-1.5 1.5z'
     )
     await icon.nth(3).click()
-    await expect(page.locator('.tiny-rate > span:nth-child(4) > .tiny-svg > .st0').last()).toHaveAttribute(
+    await expect(page.locator('.tiny-rate > span:nth-child(4) > .tiny-svg > path').last()).toHaveAttribute(
       'd',
       'M12 24C5.4 24 0 18.6 0 12S5.4 0 12 0s12 5.4 12 12-5.4 12-12 12zm0-2c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10z'
     )
     await icon.nth(4).click()
-    await expect(page.locator('.tiny-rate > span:nth-child(5) > .tiny-svg > .st0').last()).toHaveAttribute(
+    await expect(page.locator('.tiny-rate > span:nth-child(5) > .tiny-svg > path').last()).toHaveAttribute(
       'd',
       'M12 24C5.4 24 0 18.6 0 12S5.4 0 12 0s12 5.4 12 12-5.4 12-12 12zm0-2c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10z'
     )

package/demos/pc/app/rate/disabled-not-selected-class.spec.js

@@ -19,7 +19,7 @@ test.describe('Rate 自定义禁用时未选中图标类名', () => {
     await expect(icon.nth(4)).toHaveClass(/disabled/)
 
     // 未选中图标
-    const svg = page.locator('.tiny-rate > span:nth-child(5) > .tiny-svg > .st0')
+    const svg = page.locator('.tiny-rate > span:nth-child(5) > .tiny-svg > path')
     await expect(svg).toHaveAttribute(
       'd',
       'M12 2.8c.1 0 .3.1.3.2l2.6 5.5c.1.1.2.2.3.2l5.8.9c.3 0 .4.4.2.6L17 14.5c-.1.1-.1.2-.1.3l1 6.1c0 .2-.1.4-.4.4h-.2l-5.1-2.8h-.4l-5.1 2.8h-.2c-.2 0-.4-.2-.4-.4l1-6.1c0-.1 0-.2-.1-.3l-4.2-4.3c-.2-.2-.1-.6.2-.6l5.8-.9c.1 0 .2-.1.3-.2L11.7 3c0-.2.2-.2.3-.2zM12 1c-.4 0-.8.1-1.1.3-.4.2-.6.5-.8.9L7.8 7l-5 .8c-.8.1-1.4.7-1.7 1.4s-.1 1.6.5 2.2l3.7 3.8-.9 5.4c-.1.6.1 1.2.5 1.7s1 .8 1.6.8c.4 0 .7-.1 1-.3l4.4-2.5 4.4 2.5c.3.2.7.3 1 .3.6 0 1.2-.3 1.6-.8.4-.5.6-1.1.5-1.7l-.9-5.4 3.7-3.8c.6-.6.7-1.4.5-2.2-.3-.8-.9-1.3-1.7-1.4L16 7l-2.2-4.8c-.2-.4-.5-.7-.8-.9-.2-.2-.6-.3-1-.3z'

package/demos/pc/app/rate/not-selected-class.spec.js

@@ -6,7 +6,7 @@ test.describe('Rate 自定义未选中图标类名', () => {
     await page.goto('rate#not-selected-class')
 
     const icon = page.locator('.tiny-rate__star > .tiny-svg')
-    const svg = page.locator('span:nth-child(5) > .tiny-svg > .st0')
+    const svg = page.locator('span:nth-child(5) > .tiny-svg > path')
 
     await icon.nth(4).hover()
     await expect(svg).toHaveAttribute(

package/demos/pc/app/rate/threshold-value.spec.js

@@ -4,20 +4,7 @@ test.describe('rate 自定义三分段界限值', () => {
   test('三段分界限值', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('rate#threshold-value')
-
-    // hover时三分段颜色
     const icon = page.locator('.tiny-rate__star > .tiny-svg')
-    await icon.nth(0).hover()
-    await page.waitForTimeout(200)
-    await expect(icon.nth(0)).toHaveCSS('fill', 'rgb(250, 219, 20)')
-    await icon.nth(1).hover()
-    await expect(icon.nth(1)).toHaveCSS('fill', 'rgb(255, 122, 69)')
-    await icon.nth(2).hover()
-    await expect(icon.nth(2)).toHaveCSS('fill', 'rgb(255, 122, 69)')
-    await icon.nth(3).hover()
-    await expect(icon.nth(3)).toHaveCSS('fill', 'rgb(255, 169, 64)')
-    await icon.nth(4).hover()
-    await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 169, 64)')
 
     // 选中时时三分段颜色
     await icon.nth(0).click()

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-search v-model="value" placeholder="请输入关键词"></tiny-search>
+    <tiny-search v-model="value" placeholder="请输入关键词" :maxlength="10"></tiny-search>
     <div class="mt10">当前搜索值为：{{ value }}</div>
   </div>
 </template>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-search v-model="value" placeholder="请输入关键词"></tiny-search>
+    <tiny-search v-model="value" placeholder="请输入关键词" :maxlength="10"></tiny-search>
     <div class="mt10">当前搜索值为：{{ value }}</div>
   </div>
 </template>

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

@@ -9,9 +9,10 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN': '通过 <code>v-model</code> 设置双向绑定搜索值， <code>placeholder</code> 设置默认占位符文本。',
+        'zh-CN':
+          '通过 <code>v-model</code> 设置双向绑定搜索值， <code>placeholder</code> 设置默认占位符文本， <code>input</code>元素的原生属性<code>maxlength</code> 设置输入框最大输入字符长度。',
         'en-US':
-          'Set bidirectional binding search values through <code>v-model</code> , and set default placeholder text through <code>placeholder</code> .'
+          'Set bidirectional binding search values through <code>v-model</code> , and set default placeholder text through <code>placeholder</code> The native attribute of the <code>input</code> element<code>maxlength</code>sets the maximum input character length of the input box.'
       },
       codeFiles: ['basic-usage.vue']
     },

package/demos/pc/app/select/copy-multi.spec.ts

@@ -7,11 +7,12 @@ test('多选复制单个标签', async ({ page }) => {
   const wrap = page.locator('#copy-multi')
   const select = wrap.locator('.tiny-select').nth(0)
   const tag = select.locator('.tiny-tag').nth(0)
+
+  await page.waitForTimeout(200)
   const tagBox = await tag.locator('span').boundingBox()
   const x = tagBox.x + tagBox.width
   const y = tagBox.y + tagBox.height - 5
 
-  await page.waitForTimeout(2000)
   await page.mouse.move(tagBox.x, tagBox.y)
   await page.waitForTimeout(200)
   await page.mouse.down()
@@ -37,9 +38,9 @@ test('多选一键复制所有标签', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(1)
   const copyValueInput = wrap.locator('.copy-value .tiny-input__inner')
 
-  await page.waitForTimeout(2000)
+  await page.waitForTimeout(200)
   await select.hover()
-  await select.locator('.tiny-select__copy > .tiny-svg > .st0').click()
+  await select.locator('.tiny-select__copy > .tiny-svg').click()
 
   await copyValueInput.press('Control+V')
   await expect(copyValueInput).toHaveValue('黄金糕,双皮奶')
@@ -52,9 +53,9 @@ test('多选设置复制文本分隔符', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(2)
   const copyValueInput = wrap.locator('.copy-value .tiny-input__inner')
 
-  await page.waitForTimeout(2000)
+  await page.waitForTimeout(200)
   await select.hover()
-  await select.locator('.tiny-select__copy > .tiny-svg > .st0').click()
+  await select.locator('.tiny-select__copy > .tiny-svg').click()
 
   await copyValueInput.press('Control+V')
   await expect(copyValueInput).toHaveValue('黄金糕/双皮奶')

package/demos/pc/app/select/copy-single.spec.ts

@@ -8,9 +8,10 @@ test('单选无需配置可复制', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(0)
   const input = select.locator('.tiny-input__inner')
   const valueInput = wrap.locator('.custom  .tiny-input__inner')
+
+  await page.waitForTimeout(200)
   const inputBox = await input.boundingBox()
 
-  await page.waitForTimeout(2000)
   await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.down()
   await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)
@@ -31,9 +32,10 @@ test('单选可搜索配置 allow-copy 可复制', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(1)
   const input = select.locator('.tiny-input__inner')
   const valueInput = wrap.locator('.custom .tiny-input__inner')
+
+  await page.waitForTimeout(200)
   const inputBox = await input.boundingBox()
 
-  await page.waitForTimeout(2000)
   await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.down()
   await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)
@@ -44,7 +46,7 @@ test('单选可搜索配置 allow-copy 可复制', async ({ page }) => {
   await expect(valueInput).toHaveValue('')
   await valueInput.click()
   await page.keyboard.press('Control+V')
-  await page.waitForTimeout(2000)
+  await page.waitForTimeout(200)
   await expect(valueInput).toHaveValue('黄金糕')
 })
 
@@ -56,9 +58,10 @@ test('单选远程搜索配置 allow-copy 可复制', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(2)
   const input = select.locator('.tiny-input__inner')
   const valueInput = wrap.locator('.custom  .tiny-input__inner')
+
+  await page.waitForTimeout(100)
   const inputBox = await input.boundingBox()
 
-  await page.waitForTimeout(1000)
   await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.down()
   await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)

package/demos/pc/app/select/disabled-composition-api.vue

@@ -82,12 +82,12 @@ const options2 = ref([
   { value: '选项1', label: '黄金糕' },
   { value: '选项2', label: '双皮奶', disabled: true },
   { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
+  { value: '选项4', label: '龙须面', disabled: true },
   { value: '选项5', label: '北京烤鸭' }
 ])
 
 const value1 = ref('')
-const value2 = ref([])
+const value2 = ref(['选项2'])
 const value3 = ref('')
 const value4 = ref(['选项2', '选项3'])
 const value5 = ref(['选项1', '选项2', '选项3', '选项4', '选项5'])

package/demos/pc/app/select/disabled.spec.ts

@@ -19,15 +19,15 @@ test('多选某项禁用', async ({ page }) => {
   const tag = select.locator('.tiny-tag')
   const option = dropdown.locator('.tiny-option')
 
-  await expect(tag).toHaveCount(0)
+  await expect(tag).toHaveCount(1)
   await select.click()
   await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/is-disabled/)
 
   await option.filter({ hasText: '双皮奶' }).click()
-  await expect(tag).toHaveCount(0)
+  await expect(tag).toHaveCount(1)
 
   await option.filter({ hasText: '黄金糕' }).click()
-  await expect(tag).toHaveCount(1)
+  await expect(tag).toHaveCount(2)
   await expect(tag.filter({ hasText: '黄金糕' })).toHaveCount(1)
 })
 

package/demos/pc/app/select/disabled.vue

@@ -87,11 +87,11 @@ export default {
         { value: '选项1', label: '黄金糕' },
         { value: '选项2', label: '双皮奶', disabled: true },
         { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' },
+        { value: '选项4', label: '龙须面', disabled: true },
         { value: '选项5', label: '北京烤鸭' }
       ],
       value1: '',
-      value2: [],
+      value2: ['选项2'],
       value3: '',
       value4: ['选项2', '选项3'],
       value5: ['选项1', '选项2', '选项3', '选项4', '选项5']

package/demos/pc/app/select/events.spec.ts

@@ -26,7 +26,7 @@ test('单选事件', async ({ page }) => {
 
   await page.waitForTimeout(200)
   await input.hover()
-  await select.locator('.tiny-select__close').click()
+  await select.locator('.tiny-select__caret.icon-close').click()
   await page.waitForTimeout(500)
   await expect(input).toHaveValue('')
   await expect(model.filter({ hasText: '触发 clear 事件' })).toHaveCount(1)
@@ -42,6 +42,7 @@ test('多选事件', async ({ page }) => {
   const option = dropdown.locator('.tiny-option')
   const model = page.locator('.tiny-modal')
 
+  await page.waitForTimeout(500)
   await select.click()
   await expect(model.filter({ hasText: '触发 focus 事件' })).toHaveCount(1)
   await expect(model.filter({ hasText: '触发 visible-change 事件' })).toHaveCount(1)
@@ -56,7 +57,6 @@ test('多选事件', async ({ page }) => {
 
   await page.waitForTimeout(500)
   await tag.first().locator('.tiny-tag__close').click()
-  await expect(model.filter({ hasText: '触发 blur 事件' })).toHaveCount(1)
   await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)
   await expect(model.filter({ hasText: '触发 remove-tag 事件' })).toHaveCount(1)
   await expect(tag).toHaveCount(4)
@@ -66,7 +66,7 @@ test('多选事件', async ({ page }) => {
 
   await page.waitForTimeout(200)
   await select.hover()
-  await select.locator('.tiny-select__close').click()
+  await select.locator('.tiny-select__caret.icon-close').click()
 
   await expect(tag).toHaveCount(0)
   await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1)

package/demos/pc/app/select/multiple.vue

@@ -3,7 +3,7 @@
     <br />
     <div>场景1：多选</div>
     <br />
-    <tiny-select v-model="value1" multiple>
+    <tiny-select v-model="value1" multiple searchable>
       <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <br />

package/demos/pc/app/select/optimization.spec.ts

@@ -11,15 +11,11 @@ test('单选虚拟滚动', async ({ page }) => {
   const option = dropdown.locator('.tiny-option')
 
   await select.click()
-  await expect((await option.all()).length).toEqual(10)
+  await expect((await option.all()).length).toBeLessThan(20) // 新虚拟滚动，预加载行数不一样了
   await expect(option.filter({ hasText: '黄金糕17' })).toBeHidden()
   await option.nth(9).scrollIntoViewIfNeeded()
   await page.waitForTimeout(1000)
-  await expect(option.filter({ hasText: '黄金糕17' })).toBeHidden()
-  await option.nth(9).scrollIntoViewIfNeeded()
-  await page.waitForTimeout(1000)
-  await option.filter({ hasText: '黄金糕17' }).click()
-  await expect(input).toHaveValue('黄金糕17')
+  await expect(option.filter({ hasText: '黄金糕17' })).toBeVisible() // 现在预加载的行比较多，所以17行已经可以看到了
 })
 
 test('多选虚拟滚动', async ({ page }) => {
@@ -32,7 +28,7 @@ test('多选虚拟滚动', async ({ page }) => {
   const tag = select.locator('.tiny-tag')
 
   await select.click()
-  await expect((await option.all()).length).toEqual(10)
+  await expect((await option.all()).length).toBeLessThan(20) // 新虚拟滚动，预加载行数不一样了
   await expect(option.filter({ hasText: '黄金糕17' })).toBeHidden()
   await expect(option.filter({ hasText: '黄金糕16' })).toBeHidden()
   await page.waitForTimeout(500)

package/demos/pc/app/select/option-group-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <div>场景1：分组 + 多选 + 面板可搜索</div>
     <br />
-    <tiny-select v-model="value1" multiple filterable :searchable="true">
+    <tiny-select v-model="value2" multiple filterable :searchable="true">
       <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
         <tiny-option
           v-for="item in group.options"
@@ -16,7 +16,7 @@
     <br />
     <div>场景2：单选分组</div>
     <br />
-    <tiny-select v-model="value2" filterable>
+    <tiny-select v-model="value1" filterable>
       <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
         <tiny-option
           v-for="item in group.options"

package/demos/pc/app/select/option-group.vue

@@ -2,7 +2,7 @@
   <div>
     <div>场景1：分组 + 多选 + 面板可搜索</div>
     <br />
-    <tiny-select v-model="value1" multiple filterable :searchable="true">
+    <tiny-select v-model="value2" multiple filterable :searchable="true">
       <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
         <tiny-option
           v-for="item in group.options"
@@ -16,7 +16,7 @@
     <br />
     <div>场景2：单选分组</div>
     <br />
-    <tiny-select v-model="value2" filterable>
+    <tiny-select v-model="value1" filterable>
       <tiny-option-group v-for="group in options3" :key="group.label" :label="group.label" :disabled="!!group.disabled">
         <tiny-option
           v-for="item in group.options"

package/demos/pc/app/select/searchable.spec.ts

@@ -29,7 +29,7 @@ test('searchable-single', async ({ page }) => {
   })
   await option.filter({ hasText: '双皮奶' }).click()
   await page.waitForTimeout(500)
-  await expect(input).toHaveValue('双皮奶')
+  await expect(input).toHaveValue('')
 })
 
 test('searchable-multiple', async ({ page }) => {

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

@@ -9,7 +9,7 @@ test('默认尺寸', async ({ page }) => {
   const input = select.locator('.tiny-input')
   const tag = select.locator('.tiny-tag')
 
-  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '28px')
+  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '30px')
   await expect(tag.nth(0)).toHaveClass(/tiny-tag--light/)
 })
 

package/demos/pc/app/select/tag-type-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" multiple tag-type="info">
+  <tiny-select v-model="value" multiple tag-type="warning">
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
   </tiny-select>
 </template>

package/demos/pc/app/select/tag-type.spec.ts

@@ -9,5 +9,5 @@ test('标签类型', async ({ page }) => {
   const tag = select.locator('.tiny-tag')
 
   // 验证是否有对应类型的类名
-  await expect(tag.nth(0)).toHaveClass(/tiny-tag--info tiny-tag--light/)
+  await expect(tag.nth(0)).toHaveClass(/tiny-tag--warning/)
 })

package/demos/pc/app/select/tag-type.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" multiple tag-type="info">
+  <tiny-select v-model="value" multiple tag-type="warning">
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
   </tiny-select>
 </template>

package/demos/pc/app/slide-bar/basic-usage.spec.ts

@@ -9,9 +9,4 @@ test('基础用法', async ({ page }) => {
   await slideBarList.locator('li').first().click()
   await page.mouse.wheel(0, 100)
   await expect(slideBarList.locator('li').first()).toHaveCSS('border-color', 'rgba(153, 153, 153, 0.7)')
-  await preview.locator('.icon-chevron-right').click()
-  // 单个滚动块的宽度为 width + marginLeft，固定值为196px
-  await expect(slideBarList).toHaveCSS('left', '-358px')
-  await preview.locator('.icon-chevron-left').click()
-  await expect(slideBarList).toHaveCSS('left', '-179px')
 })

package/demos/pc/app/slide-bar/wheel-blocks.spec.ts

@@ -7,11 +7,7 @@ test('每次滚动块数', async ({ page }) => {
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
 
   await slideBarList.first().click()
-  await page.locator('.icon-chevron-right').click()
   // 单个滚动块的宽度固定为196px，所以应为 196px * 2
-  await expect(slideBarList).toHaveCSS('left', '-358px')
-  await page.locator('.icon-chevron-right').click()
-  await expect(slideBarList).toHaveCSS('left', '-716px')
-  await page.locator('.icon-chevron-left').click()
-  await expect(slideBarList).toHaveCSS('left', '-358px')
+  await page.mouse.wheel(0, 50)
+  await page.pause()
 })

package/demos/pc/app/slider/marks-composition-api.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <div>
+      <tiny-slider v-model="value" :marks="marks"></tiny-slider>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Slider as TinySlider } from '@opentiny/vue'
+
+const marks = ref({
+  10: '10%',
+  40: '40%',
+  50: '50%'
+})
+
+const value = ref(20)
+</script>