Skip to content
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

feat(tree-menu): [tree-menu] Add static data and unused topic variables for rectification #2803

Merged
merged 4 commits into from
Jan 17, 2025
Merged

feat(tree-menu): [tree-menu] Add static data and unused topic variables for rectification #2803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
092db94
feat(tree-menu): [tree-menu] Add static data and unused topic variabl…
wuyiping0628 Jan 14, 2025
429c81f
Merge branch 'dev' of github.com:opentiny/tiny-vue into wyp/tree-menu…
wuyiping0628 Jan 14, 2025
ea8ce05
Merge branch 'dev' of github.com:opentiny/tiny-vue into wyp/tree-menu…
wuyiping0628 Jan 15, 2025
3fe8b02
feat(tree-menu): [tree-menu] Add static data and unused topic variabl…
wuyiping0628 Jan 15, 2025
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
2 changes: 1 addition & 1 deletion examples/sites/demos/apis/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default {
type: 'Array',
defaultValue: '',
desc: {
'zh-CN': '数据源',
'zh-CN': '服务端数据',
wuyiping0628 marked this conversation as resolved.
Show resolved Hide resolved
'en-US': ''
},
mode: ['mobile-first'],
Expand Down
169 changes: 168 additions & 1 deletion examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,174 @@
<template>
<tiny-tree-menu placeholder="输入关键字搜索"></tiny-tree-menu>
<tiny-tree-menu placeholder="输入关键字搜索" :data="treeData"></tiny-tree-menu>
wuyiping0628 marked this conversation as resolved.
Show resolved Hide resolved
</template>

<script setup>
import { TinyTreeMenu } from '@opentiny/vue'
import { ref } from 'vue'

const treeData = ref([
{
id: 100,
label: '组件总览'
},
{
id: 200,
label: '使用指南',
children: [
{
id: 201,
label: '更新日志'
},
{ id: 202, label: '环境准备' },
{ id: 203, label: '安装' },
{
id: 204,
label: '引入组件',
children: [
{ id: 20401, label: '按需引入' },
{ id: 20402, label: '完整引入' }
]
},
{ id: 205, label: '开发示例' },
{ id: 206, label: '国际化' },
{ id: 207, label: '主题配置' },
{ id: 208, label: '表单校验配置' },
{ id: 209, label: '常见问题' }
]
},
{
id: 300,
label: '框架风格',
children: [
{
id: 301,
label: 'Color 色彩'
},
{ id: 302, label: 'Container 版型' },
{ id: 303, label: 'Font 字体' },
{ id: 304, label: 'Icon 图标' },
{ id: 305, label: 'Layout 布局' }
]
},
{
id: 400,
label: '导航组件',
children: [
{
id: 401,
label: 'Anchor 锚点'
},
{ id: 402, label: 'Guide 引导' },
{ id: 403, label: 'Breadcrumb 面包屑' }
]
},
{
id: 500,
label: '容器组件',
children: [
{
id: 501,
label: 'Carousel 走马灯'
},
{ id: 502, label: 'Collapse 折叠面板' },
{ id: 503, label: 'DialogBox 对话框' }
]
},
{
id: 600,
label: '表单组件',
children: [
{
id: 60101,
label: 'Button 按钮',
url: 'button'
},
{
id: 60102,
label: 'DatePicker 日期选择器',
url: 'date-picker'
},
{
id: 60103,
label: 'Select 选择器',
url: 'select'
},
{
id: 60104,
label: 'DropTimes 下拉时间',
url: 'drop-times'
},
{
id: 60105,
label: 'Input 输入框',
url: 'input'
}
]
},
{
id: 700,
label: '业务组件',
children: [
{
id: 701,
label: 'Amount 金额'
},
{ id: 702, label: 'Area 片区' },
{ id: 703, label: 'Company 公司' }
]
},
{
id: 800,
label: '其他组件',
children: [
{
id: 801,
label: '废弃组件',
children: [
{
id: 80101,
label: 'CreditCardForm 信用卡表单',
url: 'credit-card-form'
},
{
id: 80102,
label: 'DetailPage 表头详情栏',
url: 'detail-page'
}
]
},
{
id: 802,
label: '新增组件',
children: [
{
id: 80201,
label: 'QrCode 二维码',
url: 'qr-code'
},
{
id: 80202,
label: 'Watermark 水印',
url: 'watermark'
},
{
id: 80203,
label: 'MindMap 脑图',
url: 'mind-map'
},
{
id: 80204,
label: 'Skeleton 骨架屏',
url: 'skeleton'
}
]
},
{
id: 803,
label: 'BulletinBoard 公告牌'
},
{ id: 804, label: 'Calendar 日历' }
]
}
])
</script>
19 changes: 17 additions & 2 deletions examples/sites/demos/pc/app/tree-menu/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,26 @@
import { test, expect } from '@playwright/test'

test('基本使用，无数据场景', async ({ page }) => {
test('静态数据', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tree-menu#basic-usage')

const wrap = page.locator('#basic-usage')
const treeMenu = wrap.locator('.tiny-tree-menu')
const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')

await expect(treeMenu.locator('.tiny-input__inner')).toBeVisible()
await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeHidden()
await treeNodeContent.filter({ hasText: /^使用指南$/ }).click()
await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeVisible()
await treeNode.filter({ hasText: /^环境准备$/ }).click()
await expect(treeNode.filter({ hasText: /^环境准备$/ })).toHaveClass(/is-current/)
await treeNodeContent.filter({ hasText: /^使用指南$/ }).click()
await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeHidden()

// 过滤功能
await treeMenu.locator('.tiny-input__inner').fill('新增组件')
await expect(page.getByTitle('新增组件')).toBeVisible()
await expect(treeNodeContent.filter({ hasText: /^使用指南$/ })).toBeHidden()
await treeMenu.locator('.tiny-input__inner').clear()
await expect(treeNodeContent.filter({ hasText: /^使用指南$/ })).toBeVisible()
})
171 changes: 170 additions & 1 deletion examples/sites/demos/pc/app/tree-menu/basic-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<tiny-tree-menu placeholder="输入关键字搜索"></tiny-tree-menu>
<tiny-tree-menu placeholder="输入关键字搜索" :data="treeData"></tiny-tree-menu>
</template>

<script>
Expand All @@ -8,6 +8,175 @@ import { TinyTreeMenu } from '@opentiny/vue'
export default {
components: {
TinyTreeMenu
},
data() {
return {
treeData: [
{
id: 100,
label: '组件总览'
},
{
id: 200,
label: '使用指南',
children: [
{
id: 201,
label: '更新日志'
},
{ id: 202, label: '环境准备' },
{ id: 203, label: '安装' },
{
id: 204,
label: '引入组件',
children: [
{ id: 20401, label: '按需引入' },
{ id: 20402, label: '完整引入' }
]
},
{ id: 205, label: '开发示例' },
{ id: 206, label: '国际化' },
{ id: 207, label: '主题配置' },
{ id: 208, label: '表单校验配置' },
{ id: 209, label: '常见问题' }
]
},
{
id: 300,
label: '框架风格',
children: [
{
id: 301,
label: 'Color 色彩'
},
{ id: 302, label: 'Container 版型' },
{ id: 303, label: 'Font 字体' },
{ id: 304, label: 'Icon 图标' },
{ id: 305, label: 'Layout 布局' }
]
},
{
id: 400,
label: '导航组件',
children: [
{
id: 401,
label: 'Anchor 锚点'
},
{ id: 402, label: 'Guide 引导' },
{ id: 403, label: 'Breadcrumb 面包屑' }
]
},
{
id: 500,
label: '容器组件',
children: [
{
id: 501,
label: 'Carousel 走马灯'
},
{ id: 502, label: 'Collapse 折叠面板' },
{ id: 503, label: 'DialogBox 对话框' }
]
},
{
id: 600,
label: '表单组件',
children: [
{
id: 60101,
label: 'Button 按钮',
url: 'button'
},
{
id: 60102,
label: 'DatePicker 日期选择器',
url: 'date-picker'
},
{
id: 60103,
label: 'Select 选择器',
url: 'select'
},
{
id: 60104,
label: 'DropTimes 下拉时间',
url: 'drop-times'
},
{
id: 60105,
label: 'Input 输入框',
url: 'input'
}
]
},
{
id: 700,
label: '业务组件',
children: [
{
id: 701,
label: 'Amount 金额'
},
{ id: 702, label: 'Area 片区' },
{ id: 703, label: 'Company 公司' }
]
},
{
id: 800,
label: '其他组件',
children: [
{
id: 801,
label: '废弃组件',
children: [
{
id: 80101,
label: 'CreditCardForm 信用卡表单',
url: 'credit-card-form'
},
{
id: 80102,
label: 'DetailPage 表头详情栏',
url: 'detail-page'
}
]
},
{
id: 802,
label: '新增组件',
children: [
{
id: 80201,
label: 'QrCode 二维码',
url: 'qr-code'
},
{
id: 80202,
label: 'Watermark 水印',
url: 'watermark'
},
{
id: 80203,
label: 'MindMap 脑图',
url: 'mind-map'
},
{
id: 80204,
label: 'Skeleton 骨架屏',
url: 'skeleton'
}
]
},
{
id: 803,
label: 'BulletinBoard 公告牌'
},
{ id: 804, label: 'Calendar 日历' }
]
}
]
}
}
}
</script>
Loading
Loading