@opentiny/vue-docs 2.2.6 → 2.2.7

package/demos/pc/app/select/clear-no-match-value.vue

@@ -1,11 +1,15 @@
 <template>
   <div>
-    <p>场景1：单选，val 找不到匹配值，val为：{{ val }}</p>
+    <p>
+      场景1：单选，val 找不到匹配值，val为： ,<span class="val">{{ val }}</span>
+    </p>
     <tiny-select v-model="val" :clear-no-match-value="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
 
-    <p>场景2：多选，multiVal 找不到匹配值，multiVal为：{{ multiVal }}</p>
+    <p>
+      场景2：多选，multiVal 找不到匹配值，multiVal为：<span class="multi-val">{{ multiVal }}</span>
+    </p>
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>

package/demos/pc/app/select/copy-multi-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <p>场景1：多选复制单个标签</p>
-    <tiny-select v-model="value1" multiple tag-selectable>
+    <tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景2：多选一键复制所有标签</p>
-    <tiny-select v-model="value2" multiple copyable>
+    <tiny-select ref="selectCopyable" v-model="value2" multiple copyable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景3：多选设置复制文本分隔符</p>
@@ -13,7 +13,7 @@
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>复制到此处：</p>
-    <tiny-input v-model="copyValue"></tiny-input>
+    <tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>
   </div>
 </template>
 

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

@@ -10,7 +10,7 @@ test('多选复制单个标签', async ({ page }) => {
   const x = tagBox.x + tagBox.width
   const y = tagBox.y + tagBox.height - 5
 
-  await page.waitForTimeout(200)
+  await page.waitForTimeout(2000)
   await page.mouse.move(tagBox.x, tagBox.y)
   await page.waitForTimeout(200)
   await page.mouse.down()
@@ -36,6 +36,7 @@ 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 select.hover()
   await select.locator('.tiny-select__copy > .tiny-svg > .st0').click()
 
@@ -50,6 +51,7 @@ 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 select.hover()
   await select.locator('.tiny-select__copy > .tiny-svg > .st0').click()
 

package/demos/pc/app/select/copy-single-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>场景1：单选无需配置可复制</p>
-    <tiny-select ref="selectRef" v-model="value1" :options="options1"> </tiny-select>
+    <tiny-select v-model="value1" :options="options1"> </tiny-select>
     <p>场景2：单选可搜索配置 allow-copy 可复制</p>
     <tiny-select ref="selectRef" v-model="value1" :options="options1" filterable :filter-method="filter" allow-copy>
     </tiny-select>
@@ -20,7 +20,7 @@
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p class="font-style">粘贴至此处：</p>
-    <tiny-input v-model="inputVal" type="text"></tiny-input>
+    <tiny-input v-model="inputVal" type="text" class="custom"></tiny-input>
   </div>
 </template>
 
@@ -39,7 +39,7 @@ const options2 = ref([])
 const value1 = ref('选项1')
 const value2 = ref('Alabama')
 const inputVal = ref('')
-const selectRef = ref()
+const selectRef = ref(null)
 const loading = ref(false)
 const list = ref([])
 

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

@@ -4,15 +4,15 @@ test('单选无需配置可复制', async ({ page }) => {
   await page.goto('select#copy-single')
 
   const wrap = page.locator('#copy-single')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
   const valueInput = wrap.locator('.custom  .tiny-input__inner')
+  const inputBox = await input.boundingBox()
 
-  await page.waitForTimeout(1000)
-  await page.mouse.move(393, 285)
-  await page.waitForTimeout(1000)
+  await page.waitForTimeout(2000)
+  await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.down()
-  await page.waitForTimeout(1000)
-  await page.mouse.move(345, 285)
-  await page.waitForTimeout(200)
+  await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.up()
   await page.keyboard.press('Control+C')
   await expect(valueInput).toHaveValue('')
@@ -27,15 +27,14 @@ test('单选可搜索配置 allow-copy 可复制', async ({ page }) => {
 
   const wrap = page.locator('#copy-single')
   const select = wrap.locator('.tiny-select').nth(1)
+  const input = select.locator('.tiny-input__inner')
   const valueInput = wrap.locator('.custom .tiny-input__inner')
+  const inputBox = await input.boundingBox()
 
-  await page.waitForTimeout(800)
-  await page.mouse.move(400, 350)
-  await page.waitForTimeout(800)
+  await page.waitForTimeout(2000)
+  await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.down()
-  await page.waitForTimeout(800)
-  await page.mouse.move(344, 350)
-  await page.waitForTimeout(200)
+  await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.up()
   await page.waitForTimeout(800)
 
@@ -51,15 +50,15 @@ test('单选远程搜索配置 allow-copy 可复制', async ({ page }) => {
   await page.goto('select#copy-single')
 
   const wrap = page.locator('#copy-single')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const input = select.locator('.tiny-input__inner')
   const valueInput = wrap.locator('.custom  .tiny-input__inner')
+  const inputBox = await input.boundingBox()
 
   await page.waitForTimeout(1000)
-  await page.mouse.move(410, 433)
-  await page.waitForTimeout(1000)
+  await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.down()
-  await page.waitForTimeout(1000)
-  await page.mouse.move(346, 433)
-  await page.waitForTimeout(200)
+  await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.up()
   await page.keyboard.press('Control+C')
   await expect(valueInput).toHaveValue('')

package/demos/pc/app/select/copy-single.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>场景1：单选无需配置可复制</p>
-    <tiny-select ref="selectRef" v-model="value1" :options="options1"> </tiny-select>
+    <tiny-select v-model="value1" :options="options1"> </tiny-select>
     <p>场景2：单选可搜索配置 allow-copy 可复制</p>
     <tiny-select ref="selectRef" v-model="value1" :options="options1" filterable :filter-method="filter" allow-copy>
     </tiny-select>

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

@@ -45,7 +45,7 @@ const value2 = ref([])
 
 const change = () => {
   Modal.message({
-    message: 'change 事件',
+    message: '触发 change 事件',
     duration: 500
   })
 }

package/demos/pc/app/select/filter-method-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>场景1：组件默认过滤</p>
-    <tiny-select v-model="value1" ref="selectRef" filterable>
+    <tiny-select v-model="value1" ref="selectRef" filterable no-match-text="No Match">
       <tiny-option
         v-for="item in options"
         v-show="!item.filter"
@@ -12,7 +12,14 @@
       </tiny-option>
     </tiny-select>
     <p>场景2：自定义过滤</p>
-    <tiny-select v-model="value2" ref="customFilterRef" filterable :filter-method="customFilterMethod" clearable>
+    <tiny-select
+      v-model="value2"
+      ref="customFilterRef"
+      filterable
+      :filter-method="customFilterMethod"
+      clearable
+      no-match-text="No Match"
+    >
       <tiny-option
         v-for="item in options"
         v-show="!item.filter"

package/demos/pc/app/select/filter-method.spec.ts

@@ -53,12 +53,12 @@ test('自定义过滤', async ({ page }) => {
 
   // 1.1 没有过滤到内容
   await input.click()
-  // 1.1.1 验证 no-match-text (待修复)
-  // await expect(page.getByText('No Match')).toBeHidden()
+  // 1.1.1 验证 no-match-text
+  await expect(page.getByText('No Match')).toBeHidden()
   await input.press('1')
   await expect(input).toHaveValue('1')
   await input.press('Enter')
-  // await expect(page.getByText('No Match')).toBeVisible()
+  await expect(page.getByText('No Match')).toBeVisible()
 
   await page.waitForTimeout(500)
   let allListItems = await option.all()

package/demos/pc/app/select/is-drop-inherit-width.spec.ts

@@ -23,11 +23,10 @@ test('下拉弹框宽度与输入框一致', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(1)
   const dropdown = page.locator('body > .tiny-select-dropdown')
   const input = select.locator('.tiny-input__inner')
-  const option = dropdown.locator('.tiny-option')
 
   await select.click()
   const inputBox = await input.boundingBox()
-  const listitemBox = await option.first().boundingBox()
-  const result = listitemBox.width - inputBox.width
-  await expect(result).toBeCloseTo(0, 0)
+  const dropdownBox = await dropdown.boundingBox()
+  const result = dropdownBox.width - inputBox.width
+  await expect(result < 1).toBe(true)
 })

package/demos/pc/app/select/manual-focus-blur-composition-api.vue

@@ -4,7 +4,7 @@
       <tiny-button @click="handleFocus"> 点击获取焦点 </tiny-button>
       <tiny-button @click="handleBlur"> 点击失去焦点 </tiny-button>
     </div>
-    <tiny-select v-model="value" ref="drop" filterable>
+    <tiny-select v-model="value" ref="dropRef" filterable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
   </div>

package/demos/pc/app/select/manual-focus-blur.spec.ts

@@ -3,14 +3,15 @@ import { test, expect } from '@playwright/test'
 test('手动聚焦失焦', async ({ page }) => {
   await page.goto('select#manual-focus-blur')
   const wrap = page.locator('#manual-focus-blur')
-  const select = wrap.locator('.tiny-select').nth(2)
-  const input = select.locator('.tiny-input__inner')
   const dropdown = page.locator('body > .tiny-select-dropdown')
-  const option = dropdown.locator('.tiny-option')
   const button = wrap.locator('.tiny-button')
 
-  await button.first().click()
+  await page.waitForTimeout(2000)
+  // 手动聚焦下拉
+  await button.nth(0).click()
   await expect(dropdown).toBeVisible()
+
+  // 手动失焦收起
   await button.nth(1).click()
   await expect(dropdown).toBeHidden()
 })

package/demos/pc/app/select/nest-grid-composition-api.vue

@@ -37,7 +37,7 @@ import { ref, reactive } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 
 const value1 = ref('')
-const value2 = reactive([])
+const value2 = ref([])
 const value3 = ref('')
 
 const gridOpSingle = reactive({
@@ -74,10 +74,10 @@ const gridOpMulti = reactive({
 
 const filter = (value) => {
   if (!value) {
-    return gridOpSingle.value.data
+    return gridOpSingle.data
   }
 
-  return gridOpSingle.value.data.filter((item) => {
+  return gridOpSingle.data.filter((item) => {
     return item.city.includes(value)
   })
 }

package/demos/pc/app/select/nest-tree-composition-api.vue

@@ -1,7 +1,28 @@
 <template>
   <div class="demo-select">
+    <p>场景1：下拉树单选</p>
     <tiny-select
-      v-model="treeRadio"
+      v-model="treeValue1"
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <p>场景2：下拉树多选</p>
+    <tiny-select
+      v-model="treeValue2"
+      multiple
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <p>场景3：下拉树可搜索</p>
+    <tiny-select
+      v-model="treeValue3"
+      filterable
+      :filter-method="filter"
+      clearable
       value-field="id"
       text-field="label"
       render-type="tree"
@@ -14,7 +35,10 @@
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 
-const treeRadio = ref(10)
+const treeValue1 = ref(10)
+const treeValue2 = ref([9, 6])
+const treeValue3 = ref('')
+
 const treeOp = ref({
   data: [
     {
@@ -53,6 +77,12 @@ const treeOp = ref({
     }
   ]
 })
+
+const filter = (value, data) => {
+  if (!value) return true
+
+  return data.label.includes(value)
+}
 </script>
 
 <style scoped>

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

@@ -27,7 +27,7 @@ test('多选虚拟滚动', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(1)
   const dropdown = page.locator('body > .tiny-select-dropdown')
   const option = dropdown.locator('.tiny-option')
-  const tag = page.locator('#preview .tiny-select .tiny-tag')
+  const tag = select.locator('.tiny-tag')
 
   await select.click()
   await expect((await option.all()).length).toEqual(10)
@@ -39,11 +39,10 @@ test('多选虚拟滚动', async ({ page }) => {
   await option.nth(9).scrollIntoViewIfNeeded()
   await expect(option.filter({ hasText: '黄金糕16' })).toBeVisible()
   await expect(option.filter({ hasText: '黄金糕17' })).toBeVisible()
-  // TODO: 修改多选虚拟滚动后打开
-  // await option.filter({ hasText: '黄金糕17' }).click()
-  // await expect(tag.first()).toHaveText('黄金糕17')
-  // await expect((await tag.all()).length).toEqual(1)
-  // await option.filter({ hasText: '黄金糕16' }).click()
-  // await expect((await tag.all()).length).toEqual(2)
-  // await expect(tag.nth(1)).toHaveText('+ 1')
+  await option.filter({ hasText: '黄金糕17' }).click()
+  await expect(tag.first()).toHaveText('黄金糕17')
+  await expect((await tag.all()).length).toEqual(1)
+  await option.filter({ hasText: '黄金糕16' }).click()
+  await expect((await tag.all()).length).toEqual(2)
+  await expect(tag.nth(1)).toHaveText('+ 1')
 })

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

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('标签类型', async ({ page }) => {
+  await page.goto('select#tag-type')
+
+  const wrap = page.locator('#tag-type')
+  const select = wrap.locator('.tiny-select')
+  const tag = select.locator('.tiny-tag')
+
+  // 验证是否有对应类型的类名
+  await expect(tag.nth(0)).toHaveClass(/tiny-tag--info tiny-tag--light/)
+})

package/demos/pc/app/select/webdoc/select.cn.md

@@ -4,4 +4,4 @@ title: Select 选择器
 
 # Select 选择器
 
-> Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。
+Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。

package/demos/pc/app/select/webdoc/select.en.md

@@ -4,4 +4,4 @@ title: Select Selector
 
 # Select Selector
 
-> Select selector is a UI component that displays and selects data from a drop-down list box.
+Select selector is a UI component that displays and selects data from a drop-down list box.

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

@@ -338,9 +338,9 @@ export default {
       'name': { 'zh-CN': '下拉表格禁用选项', 'en-US': 'Select Table Disable Options' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>select-config</code> （多选）或 <code>radio-config</code> （单选）属性的<code>checkMethod</code>自定义禁用逻辑，返回 true(启用) / false(禁用)。</p>\n',
+          '<p>通过 <code>select-config</code> （多选）或 <code>radio-config</code> （单选）属性的 <code>checkMethod</code> 自定义禁用逻辑，返回 true (启用) / false (禁用)。</p>\n',
         'en-US':
-          "<p>By customizing the disable logic through the <code>select-config</code> (multiple selection) or <code>radio-config</code> (single selection) attribute's<code>checkMethod</code>, return true(Enable) / false(disable)</p>"
+          "<p>By customizing the disable logic through the <code>select-config</code> (multiple selection) or <code>radio-config</code> (single selection) attribute's <code>checkMethod</code>, return true (Enable) / false (disable)</p>"
       },
       'codeFiles': ['nest-grid-disable.vue']
     },
@@ -455,7 +455,7 @@ export default {
     {
       'name': 'select',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'allow-copy',
           'type': 'boolean',
@@ -481,7 +481,7 @@ export default {
         {
           'name': 'autocomplete',
           'type': 'string',
-          'defaultValue': 'off',
+          'defaultValue': "'off'",
           'desc': {
             'zh-CN': '输入框的原生 autocomplete 属性',
             'en-US': 'The native autocomplete attribute of the input box'
@@ -500,7 +500,7 @@ export default {
         },
         {
           'name': 'clear-no-match-value',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
             'zh-CN': '是否自动清空无法在 options 中找到匹配项的值',
@@ -607,8 +607,8 @@ export default {
         },
         {
           'name': 'input-box-type',
-          'type': '"input" | "underline"',
-          'defaultValue': 'input',
+          'type': "'input' | 'underline'",
+          'defaultValue': "'input'",
           'desc': {
             'zh-CN': '输入框的显示类型',
             'en-US': 'Display type of input box'
@@ -639,7 +639,7 @@ export default {
         {
           'name': 'loading-text',
           'type': 'string',
-          'defaultValue': '加载中',
+          'defaultValue': "'加载中'",
           'desc': {
             'zh-CN': '远程加载时显示的文本',
             'en-US': 'Text displayed during remote loading'
@@ -690,7 +690,7 @@ export default {
         {
           'name': 'no-match-text',
           'type': 'string',
-          'defaultValue': '无匹配数据',
+          'defaultValue': "'无匹配数据'",
           'desc': {
             'zh-CN': '搜索条件无匹配时显示的文本，也可以使用 empty 插槽设置',
             'en-US':
@@ -701,7 +701,7 @@ export default {
         {
           'name': 'no-data-text',
           'type': 'string',
-          'defaultValue': '暂无相关数据',
+          'defaultValue': "'暂无相关数据'",
           'desc': {
             'zh-CN': '选项列表为空时显示的文本，也可以使用 empty 插槽设置',
             'en-US': 'The text displayed when the option list is empty can also be set using empty slots'
@@ -723,7 +723,7 @@ export default {
           'name': 'placement',
           'type': 'IPlacement',
           'typeAnchorName': 'IPlacement',
-          'defaultValue': 'bottom-start',
+          'defaultValue': "'bottom-start'",
           'desc': {
             'zh-CN': '下拉弹框相对于触发源的弹出位置',
             'en-US': 'The pop-up position of the pull-down pop-up box relative to the trigger source'
@@ -733,7 +733,7 @@ export default {
         {
           'name': 'placeholder',
           'type': 'string',
-          'defaultValue': '请选择',
+          'defaultValue': "'请选择'",
           'desc': { 'zh-CN': '占位符', 'en-US': 'Placeholder' },
           'demoId': 'native-properties'
         },
@@ -790,7 +790,7 @@ export default {
         },
         {
           'name': 'render-type',
-          'type': '"tree" | "grid"',
+          'type': "'tree' | 'grid'",
           'defaultValue': '',
           'desc': {
             'zh-CN': '渲染为下拉表格或下拉树，需结合 grid-op / tree-op 使用',
@@ -820,7 +820,7 @@ export default {
         },
         {
           'name': 'size',
-          'type': '"medium" | "small" | "mini"',
+          'type': "'medium' | 'small' | 'mini'",
           'defaultValue': '',
           'desc': {
             'zh-CN': '输入框尺寸。',
@@ -850,7 +850,7 @@ export default {
         },
         {
           'name': 'tag-type',
-          'type': '"success" | "info" | "warning" | "danger" ',
+          'type': "'success' | 'info' | 'warning' | 'danger'",
           'defaultValue': '',
           'desc': {
             'zh-CN': '标签类型，仅多选适用。使用 aurora 主题时设置该属性为 info',
@@ -874,7 +874,7 @@ export default {
         {
           'name': 'text-split',
           'type': 'string',
-          'defaultValue': ',',
+          'defaultValue': "','",
           'desc': {
             'zh-CN': '自定义复制文本的分隔符，需结合 copyable 属性使用',
             'en-US': 'The separator for custom copied text needs to be used in conjunction with the copyable attribute'
@@ -884,7 +884,7 @@ export default {
         {
           'name': 'text-field',
           'type': 'string',
-          'defaultValue': 'label',
+          'defaultValue': "'label'",
           'desc': {
             'zh-CN': '显示值字段',
             'en-US': 'Show Value Fields'
@@ -894,7 +894,7 @@ export default {
         {
           'name': 'value-field',
           'type': 'string',
-          'defaultValue': 'value',
+          'defaultValue': "'value'",
           'desc': {
             'zh-CN': '绑定值字段',
             'en-US': 'Bind Value Field'
@@ -904,7 +904,7 @@ export default {
         {
           'name': 'value-key',
           'type': 'string',
-          'defaultValue': 'value',
+          'defaultValue': "'value'",
           'desc': {
             'zh-CN': '作为 value 唯一标识的键名，绑定值为对象类型时必填',
             'en-US':

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

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slide-bar#basic-usage')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#basic-usage')
   const slideBarContainer = preview.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   await slideBarList.locator('li').first().click()
@@ -11,7 +11,7 @@ test('基础用法', async ({ page }) => {
   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', '-196px')
+  await expect(slideBarList).toHaveCSS('left', '-358px')
   await preview.locator('.icon-chevron-left').click()
-  await expect(slideBarList).toHaveCSS('left', '0px')
+  await expect(slideBarList).toHaveCSS('left', '-179px')
 })

package/demos/pc/app/slide-bar/custom-content.spec.ts

@@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
 test('自定义滚动块内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slide-bar#custom-content')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   await expect(slideBarList.first().locator('li span').first()).toContainText('标题')
   await expect(slideBarList.first().locator('li div').first()).toContainText('语言')

package/demos/pc/app/slide-bar/custom-tag.spec.ts

@@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
 test('自定义 DOM 标签', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slide-bar#custom-tag')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   // 自定义的标签为 div
   await expect(slideBarList.locator('li').first().locator('div')).toHaveCount(3)

package/demos/pc/app/slide-bar/slide-bar-events.spec.ts

@@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
 test('滚动块事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slide-bar#slide-bar-events')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   await slideBarList.locator('li').first().click()
   await expect(page.locator('.tiny-modal').filter({ hasText: 'before-click 事件' })).toBeVisible()

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

@@ -3,16 +3,15 @@ import { test, expect } from '@playwright/test'
 test('每次滚动块数', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slide-bar#wheel-blocks')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
 
   await slideBarList.first().click()
-  await preview.locator('.icon-chevron-right').click()
+  await page.locator('.icon-chevron-right').click()
   // 单个滚动块的宽度固定为196px，所以应为 196px * 2
-  await expect(slideBarList).toHaveCSS('left', '-392px')
-  await preview.locator('.icon-chevron-right').click()
-  await expect(slideBarList).toHaveCSS('left', '-784px')
-  await preview.locator('.icon-chevron-left').click()
-  await expect(slideBarList).toHaveCSS('left', '-392px')
+  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')
 })

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

@@ -137,7 +137,7 @@ export default {
     {
       'name': 'split',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'mode',
           'type': `'horizontal' | 'vertical'`,