Skip to content

feat(select-wrapper,base-select,tree-select,grid-select):tree-select support lazy loading #3915

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zzcr merged 1 commit into from
Dec 19, 2025
+574 −169
Merged

feat(select-wrapper,base-select,tree-select,grid-select):tree-select support lazy loading #3915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions examples/sites/demos/apis/tree-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,44 @@ export default {
},
mode: ['pc'],
pcDemo: 'map-field'
},
{
name: 'lazy',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否懒加载子节点，配合 load 属性使用',
'en-US': 'Whether to lazily load child nodes and use them in conjunction with the load attribute'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'lazy',
mfDemo: 'lazy'
},
{
name: 'load',
type: '(node, resolve) => void',
defaultValue: '',
desc: {
'zh-CN':
'加载子树数据的方法。点击节点后，组件开始调用load方法，只有在load函数内调用resolve(data)，才表示返回下级的数据成功。',
'en-US':
'Method of loading subtree data. After the node is clicked, the component starts to call the load method. Only when resolve(data) is called in the load function, the data at the lower level is successfully returned.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'lazy',
mfDemo: 'lazy'
},
{
name: 'after-load',
type: 'Function',
defaultValue: '',
desc: {
'zh-CN': '节点懒加载完成后的回调函数',
'en-US': 'Callback function after node lazy loading is completed'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'lazy',
mfDemo: 'lazy'
}
]
}
Expand All @@ -281,6 +319,9 @@ interface ITreeNode {

interface ITreeOption {
data: ITreeNode[] // 树数据，用法同 Tree
lazy?: boolean // 是否懒加载子节点
load?: (node: ITreeNodeVm, resolve: IResolveType) => void // 加载子树数据的方法
afterLoad?: (data: any) => void // 节点懒加载完成后的回调函数
}
`
},
Expand Down
59 changes: 59 additions & 0 deletions examples/sites/demos/mobile-first/app/tree-select/lazy.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<template>
<tiny-tree-select v-model="value" :tree-op="treeOp" lazy :load="load" :after-load="afterLoad"></tiny-tree-select>
</template>

<script>
import { TinyTreeSelect } from '@opentiny/vue'

export default {
components: {
TinyTreeSelect
},
data() {
return {
value: '',
treeOp: {}
}
},
methods: {
// node 为点击的节点，resolve 为回调函数，用于异步返回下层节点的数据
load(node, resolve) {
console.log('即将加载节点下级数据：', node)

// 通过 level =0 来识别第一次加载
if (node.level === 0) {
resolve([
{ value: '1', label: '一级 1' },
{ value: '2', label: '一级 2' },
{ value: '3', label: '一级 3' }
])
}
// 通过 data 有值，识别是用户点击后的加载
else if (node.data) {
const parentId = node.data.value
const parentLabel = node.data.label

const children = Array.from({ length: 5 }, (v, k) => k + 1).map((num) => ({
value: `${parentId}-${num}`,
label: `${parentLabel}-${num}`,
disabled: Math.random() - 0.5 > 0, // 随机禁用节点
isLeaf: Math.random() - 0.5 > 0 // 随机设置叶子节点
}))

// 模拟异步返回
setTimeout(() => resolve(children), Math.random() * 2 * 1000)
}
},
afterLoad(data) {
console.log('afterLoad 属性触发：', data)
}
}
}
</script>

<style scoped>
[data-tag='tiny-base-select'],
[data-tag='tiny-tree-select'] {
width: 280px;
}
</style>
12 changes: 12 additions & 0 deletions examples/sites/demos/mobile-first/app/tree-select/webdoc/tree-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,18 @@ export default {
},
codeFiles: ['disabled.vue']
},
{
demoId: 'lazy',
name: {
'zh-CN': '懒加载',
'en-US': 'Lazy loading'
},
desc: {
'zh-CN':
'通过 <code>lazy</code> 属性，启用懒加载模式。<br>通过 <code>load</code> 函数属性，触发加载，初始会执行一次。<br>通过 <code>after-load</code> 函数属性，监听下级节点加载完毕的事件。'
},
codeFiles: ['lazy.vue']
},
Comment on lines +71 to +82
Copy link

@coderabbitai coderabbitai bot Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add missing en-US description.

The new lazy demo entry is missing the en-US description (Line 80), while the zh-CN description is complete. The PC version of this file (examples/sites/demos/pc/app/tree-select/webdoc/tree-select.js) includes both translations. Add the en-US description for i18n completeness.

🔎 Apply this diff to add the missing en-US description: 
       desc: {
         'zh-CN':
-          '通过 <code>lazy</code> 属性，启用懒加载模式。<br>通过 <code>load</code> 函数属性，触发加载，初始会执行一次。<br>通过 <code>after-load</code> 函数属性，监听下级节点加载完毕的事件。'
+          '通过 <code>lazy</code> 属性，启用懒加载模式。<br>通过 <code>load</code> 函数属性，触发加载，初始会执行一次。<br>通过 <code>after-load</code> 函数属性，监听下级节点加载完毕的事件。',
+        'en-US':
+          'Enable lazy loading mode with the <code>lazy</code> property. <br>load is triggered by the <code>load</code> function property, which is initially executed once. <br>afterLoad </code> function properties are used to listen for events when a subordinate node has finished loading.'
       },
🤖 Prompt for AI Agents 
In examples/sites/demos/mobile-first/app/tree-select/webdoc/tree-select.js
around lines 71 to 82, the demo entry for 'lazy' has a zh-CN description but is
missing the en-US description; add an 'en-US' field mirroring the zh-CN content
in English (e.g. "Enable lazy loading via the <code>lazy</code> prop. Use the
<code>load</code> function prop to trigger loading — it runs once initially. Use
the <code>after-load</code> function prop to listen for when child nodes finish
loading.") so both locales are present for i18n completeness.

{
demoId: 'map-field',
name: {
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/select-wrapper/all-text.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test'

test('多选时自定义全部的文本', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('select#all-text')
await page.goto('select-wrapper#all-text')
const wrap = page.locator('#all-text')
const select = wrap.locator('.tiny-select').nth(0)
const dropdown = page.locator('body > .tiny-select-dropdown')
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/select-wrapper/all-text.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</template>

<script>
import { TinySelect, TinyOption } from '@opentiny/vue'
import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'

export default {
components: {
Expand Down
10 changes: 5 additions & 5 deletions examples/sites/demos/pc/app/select-wrapper/allow-create.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
test('点击选中', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.waitForTimeout(300)
await page.goto('select#allow-create')
await page.goto('select-wrapper#allow-create')

const wrap = page.locator('#allow-create')
const select = wrap.locator('.tiny-select').nth(0)
Expand All @@ -16,18 +16,18 @@ test('点击选中', async ({ page }) => {
await input.dispatchEvent('keyup', { KeyboardEvent })

await expect(input).toHaveValue('测试 allow-create')
await dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' }).click()
await dropdown.locator('.tiny-option').filter({ hasText: '测试 allow-create' }).click()
await expect(input).toHaveValue('测试 allow-create')

await input.click()
await expect(input).toHaveValue('')
await expect(dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
await expect(dropdown.locator('.tiny-option').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
})

test('enter 选中', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.waitForTimeout(300)
await page.goto('select#allow-create')
await page.goto('select-wrapper#allow-create')

const wrap = page.locator('#allow-create')
const select = wrap.locator('.tiny-select').nth(1)
Expand All @@ -46,5 +46,5 @@ test('enter 选中', async ({ page }) => {
await input.click()

await expect(input).toHaveValue('')
await expect(dropdown.getByRole('listitem').filter({ hasText: 'ab' })).toHaveClass(/selected/)
await expect(dropdown.locator('.tiny-option').filter({ hasText: 'ab' })).toHaveClass(/selected/)
})
9 changes: 8 additions & 1 deletion examples/sites/demos/pc/app/select-wrapper/allow-create.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,14 @@
</template>

<script>
import { TinySelect, TinyOption, TinyInput, TinyButton, TinyDialogBox, TinyModal } from '@opentiny/vue'
import {
TinySelectWrapper as TinySelect,
TinyOption,
TinyInput,
TinyButton,
TinyDialogBox,
TinyModal
} from '@opentiny/vue'

export default {
components: {
Expand Down
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/select-wrapper/automatic-dropdown.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'

test('不可搜索时，获取焦点不下拉', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('select#automatic-dropdown')
await page.goto('select-wrapper#automatic-dropdown')
const wrap = page.locator('#automatic-dropdown')
const input = wrap.locator('.tiny-input__inner').first()
const dropdown = page.locator('.tiny-select-dropdown').first()
Expand All @@ -16,16 +16,16 @@ test('不可搜索时，获取焦点不下拉', async ({ page }) => {

test('可搜索时，获取焦点自动下拉', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('select#automatic-dropdown')
await page.goto('select-wrapper#automatic-dropdown')
const wrap = page.locator('#automatic-dropdown')
const input = wrap.locator('.tiny-input__inner').nth(1)
const dropdown = page.locator('.tiny-select-dropdown').nth(1)

await wrap.getByRole('button').nth(1).click()
// 聚焦下拉
await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
await expect(input).toHaveValue('上海')
// 验证选中
await input.click()
await expect(page.getByRole('listitem').filter({ hasText: '上海' })).toHaveClass(/selected/)
await expect(dropdown.locator('.tiny-option').filter({ hasText: '上海' })).toHaveClass(/selected/)
})
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/select-wrapper/automatic-dropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
</template>

<script>
import { TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
import { TinySelectWrapper as TinySelect, TinyOption, TinyButton } from '@opentiny/vue'

export default {
components: {
Expand Down
10 changes: 5 additions & 5 deletions examples/sites/demos/pc/app/select-wrapper/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@ import { test, expect } from '@playwright/test'

test('基础用法标签式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('select#basic-usage')
await page.goto('select-wrapper#basic-usage')
const wrap = page.locator('#basic-usage')
const select = wrap.locator('.tiny-select').nth(0)
const input = select.locator('.tiny-input__inner')
const dropdown = page.locator('body > .tiny-select-dropdown')
const dropdown = page.locator('body > .tiny-select-dropdown').nth(0)
const option = dropdown.locator('.tiny-option')

await input.click()
await option.filter({ hasText: '天津' }).click()
await expect(input).toHaveValue('天津')
await select.locator('.tiny-input__suffix svg').click()
await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
await expect(dropdown.locator('.tiny-option').filter({ hasText: '天津' })).toHaveClass(/selected/)
await option.filter({ hasText: '深圳' }).click()
await expect(input).toHaveValue('深圳')
await input.click()
Expand All @@ -25,7 +25,7 @@ test('基础用法标签式', async ({ page }) => {

test('基础用法配置式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('select#basic-usage')
await page.goto('select-wrapper#basic-usage')
const wrap = page.locator('#basic-usage')
const select = wrap.locator('.tiny-select').nth(1)
const input = select.locator('.tiny-input__inner')
Expand All @@ -36,7 +36,7 @@ test('基础用法配置式', async ({ page }) => {
await option.filter({ hasText: '天津' }).click()
await expect(input).toHaveValue('天津')
await select.locator('.tiny-input__suffix svg').click()
await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
await expect(dropdown.locator('.tiny-option').filter({ hasText: '天津' })).toHaveClass(/selected/)
await option.filter({ hasText: '深圳' }).click()
await expect(input).toHaveValue('深圳')
await input.click()
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/select-wrapper/basic-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
</template>

<script>
import { TinySelect, TinyOption } from '@opentiny/vue'
import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
Copy link

@coderabbitai coderabbitai bot Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Search for TinySelectWrapper and TinySelect in the repository
# First, find the main export files for these components

echo "=== Searching for TinySelectWrapper definition ==="
fd -t f "select-wrapper" -i | head -20

echo -e "\n=== Searching for TinySelect definition ==="
fd -t f "select" -i | grep -v node_modules | grep -v dist | head -20

echo -e "\n=== Looking for export statements with TinySelectWrapper ==="
rg -n "export.*TinySelectWrapper" --type=ts --type=vue

echo -e "\n=== Looking for export statements with TinySelect ==="
rg -n "export.*TinySelect" --type=ts --type=vue | grep -v TinySelectWrapper | head -10

Repository: opentiny/tiny-vue

Length of output: 1958

🏁 Script executed:

#!/bin/bash
# Let's find the actual component source code

echo "=== Finding package structure ==="
ls -la packages/ | head -20

echo -e "\n=== Searching for select-wrapper component source ==="
find . -path ./node_modules -prune -o -path ./dist -prune -o -type f -name "*select-wrapper*" -print | head -20

echo -e "\n=== Searching for select component source ==="
find . -path ./node_modules -prune -o -path ./dist -prune -o -type f -name "*select.vue" -o -name "*select.ts" -print | grep -E "packages|src" | head -20

echo -e "\n=== Looking in vue package ==="
ls -la packages/vue/src/components/ | grep -i select

Repository: opentiny/tiny-vue

Length of output: 2090

🏁 Script executed:

#!/bin/bash
# Let's explore the vue package structure

echo "=== Structure of packages/vue ==="
ls -la packages/vue/src/

echo -e "\n=== Looking for select components ==="
ls -la packages/vue/src/

echo -e "\n=== Find all select-related files ==="
find packages/vue -name "*select*" -type f 2>/dev/null | grep -v node_modules | head -20

echo -e "\n=== Find select.ts or select.vue in packages ==="
find packages -name "select.ts" -o -name "select.vue" 2>/dev/null | grep -v node_modules | head -20

Repository: opentiny/tiny-vue

Length of output: 25878

🏁 Script executed:

#!/bin/bash
# Let's look at what files are in select and select-wrapper directories

echo "=== Files in select directory ==="
ls -la packages/vue/src/select/

echo -e "\n=== Files in select-wrapper directory ==="
ls -la packages/vue/src/select-wrapper/

echo -e "\n=== Content of select-wrapper index ==="
cat packages/vue/src/select-wrapper/index.ts 2>/dev/null || echo "Not found"

echo -e "\n=== Content of select index ==="
cat packages/vue/src/select/index.ts 2>/dev/null || echo "Not found"

Repository: opentiny/tiny-vue

Length of output: 2814

🏁 Script executed:

#!/bin/bash
# Let's check the src directories

echo "=== Files in select/src ==="
ls -la packages/vue/src/select/src/

echo -e "\n=== Files in select-wrapper/src ==="
ls -la packages/vue/src/select-wrapper/src/

echo -e "\n=== Content of select-wrapper/src/index.vue ==="
head -100 packages/vue/src/select-wrapper/src/index.vue 2>/dev/null || echo "Not found"

echo -e "\n=== Content of select/src/index.vue ==="
head -100 packages/vue/src/select/src/index.vue 2>/dev/null || echo "Not found"

Repository: opentiny/tiny-vue

Length of output: 941

🏁 Script executed:

#!/bin/bash
# Let's check the index.ts files which contain the actual component logic

echo "=== Content of select-wrapper/src/index.ts ==="
cat packages/vue/src/select-wrapper/src/index.ts

echo -e "\n=== Content of select/src/index.ts (first 150 lines) ==="
head -150 packages/vue/src/select/src/index.ts

Repository: opentiny/tiny-vue

Length of output: 10964

🏁 Script executed:

#!/bin/bash
# Let's get the complete select/src/index.ts to compare props

echo "=== Full content of select/src/index.ts ==="
cat packages/vue/src/select/src/index.ts

Repository: opentiny/tiny-vue

Length of output: 7658

🏁 Script executed:

#!/bin/bash
# Let's compare the props more carefully - let me extract and compare them

echo "=== Analyzing prop differences ==="
python3 << 'EOF'
import re

# Read both files
with open('packages/vue/src/select-wrapper/src/index.ts', 'r') as f:
    wrapper_content = f.read()

with open('packages/vue/src/select/src/index.ts', 'r') as f:
    select_content = f.read()

# Extract props section
wrapper_props = re.search(r'props:\s*\{(.*?)\n  \},', wrapper_content, re.DOTALL)
select_props = re.search(r'props:\s*\{(.*?)\n  \},', select_content, re.DOTALL)

if wrapper_props and select_props:
    wrapper_text = wrapper_props.group(1)
    select_text = select_props.group(1)
    
    # Find differences by comparing line by line
    wrapper_lines = set(wrapper_text.strip().split('\n'))
    select_lines = set(select_text.strip().split('\n'))
    
    only_in_wrapper = wrapper_lines - select_lines
    only_in_select = select_lines - wrapper_lines
    
    if only_in_wrapper or only_in_select:
        print("Props ONLY in SelectWrapper:")
        for line in sorted(only_in_wrapper):
            if line.strip():
                print(f"  {line.strip()}")
        
        print("\nProps ONLY in Select:")
        for line in sorted(only_in_select):
            if line.strip():
                print(f"  {line.strip()}")
    else:
        print("All props are identical between SelectWrapper and Select")
else:
    print("Could not parse props")
EOF

Repository: opentiny/tiny-vue

Length of output: 147

🏁 Script executed:

#!/bin/bash
# Let's do a simple diff instead

echo "=== Diff between select-wrapper and select props ==="
diff -u <(sed -n '/props: {/,/},/p' packages/vue/src/select/src/index.ts | grep -E "^\s+(.*?):" | head -50) <(sed -n '/props: {/,/},/p' packages/vue/src/select-wrapper/src/index.ts | grep -E "^\s+(.*?):" | head -50)

echo -e "\n=== Check for InputBoxType vs inputBoxType ==="
grep -n "inputBoxType\|InputBoxType" packages/vue/src/select/src/index.ts
grep -n "inputBoxType\|InputBoxType" packages/vue/src/select-wrapper/src/index.ts

Repository: opentiny/tiny-vue

Length of output: 314

🏁 Script executed:

#!/bin/bash
# Let's check the exact lines around the InputBoxType/inputBoxType difference

echo "=== Select InputBoxType (lines 325-335) ==="
sed -n '325,335p' packages/vue/src/select/src/index.ts

echo -e "\n=== SelectWrapper inputBoxType (lines 325-335) ==="
sed -n '325,335p' packages/vue/src/select-wrapper/src/index.ts

echo -e "\n=== Component names ==="
echo "Select name:"
grep "name: \$prefix" packages/vue/src/select/src/index.ts
echo "SelectWrapper name:"
grep "name: \$prefix" packages/vue/src/select-wrapper/src/index.ts

Repository: opentiny/tiny-vue

Length of output: 782

API Incompatibility: TinySelectWrapper does not fully implement TinySelect interface.

The import alias does not guarantee API compatibility. Verified differences:

  • Property name mismatch: InputBoxType (Select) vs inputBoxType (SelectWrapper) — case-sensitive, will cause prop binding failures
  • Default value mismatch: 'input' (Select) vs 'normal' (SelectWrapper) for the box type property

These breaking changes risk silent bugs where templates work but props are ignored. Either ensure TinySelectWrapper props match TinySelect exactly, or document that this is not a drop-in replacement.

import { iconFile } from '@opentiny/vue-icon'
export default {
Expand Down
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/select-wrapper/binding-obj.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@ import { test, expect } from '@playwright/test'

test('binding-obj', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('select#binding-obj')
await page.goto('select-wrapper#binding-obj')

const wrap = page.locator('#binding-obj')
const input = wrap.locator('.tiny-input__inner')
const dropdown = page.locator('.tiny-select-dropdown')
const valueLocator = wrap.locator('.value')

await input.click()
await dropdown.getByRole('listitem').filter({ hasText: '重庆' }).click()
await dropdown.locator('.tiny-option').filter({ hasText: '重庆' }).click()
await expect(input).toHaveValue('重庆')
await expect(valueLocator).toHaveText('{ "val": "选项 4", "id": 4 }')

await input.click()
await dropdown.getByRole('listitem').filter({ hasText: '天津' }).click()
await dropdown.locator('.tiny-option').filter({ hasText: '天津' }).click()
await expect(input).toHaveValue('天津')
await expect(valueLocator).toHaveText('{ "val": "选项 3", "id": 3 }')
})
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/select-wrapper/binding-obj.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</template>

<script>
import { TinySelect, TinyOption } from '@opentiny/vue'
import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'

export default {
components: {
Expand Down
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/select-wrapper/cache-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@ import { expect, test } from '@playwright/test'

test('cache-op', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('select#cache-usage')
await page.goto('select-wrapper#cache-usage')

const wrap = page.locator('#cache-usage')
const dropdown = page.locator('.tiny-select-dropdown')
const input = wrap.locator('.tiny-input__inner')
const cacheValue = wrap.locator('.cache-value')

await input.click()
await dropdown.getByRole('listitem').filter({ hasText: '北京' }).click()
await dropdown.locator('.tiny-option').filter({ hasText: '北京' }).click()
await expect(cacheValue).toContainText(['选项 1'])

await input.click()
await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
await dropdown.locator('.tiny-option').filter({ hasText: '上海' }).click()
await expect(cacheValue).toContainText(['选项 2'])
})
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/select-wrapper/cache-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</template>

<script>
import { TinySelect } from '@opentiny/vue'
import { TinySelectWrapper as TinySelect } from '@opentiny/vue'

export default {
components: {
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/select-wrapper/clear-no-match-value.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'

test('单选找不到匹配值', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('select#clear-no-match-value')
await page.goto('select-wrapper#clear-no-match-value')
const wrap = page.locator('#clear-no-match-value')
const input = wrap.locator('.tiny-input__inner').nth(0)

Expand All @@ -13,7 +13,7 @@ test('单选找不到匹配值', async ({ page }) => {

test('多选找不到匹配值', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('select#clear-no-match-value')
await page.goto('select-wrapper#clear-no-match-value')
const wrap = page.locator('#clear-no-match-value')
const tag = wrap.locator('.tiny-select').nth(1).locator('.tiny-tag')

Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/select-wrapper/clear-no-match-value.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</template>

<script>
import { TinySelect, TinyOption } from '@opentiny/vue'
import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'

export default {
components: {
Expand Down
Loading
Loading