-
Notifications
You must be signed in to change notification settings - Fork 278
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(tree-menu): [tree-menu] Add static data and unused topic variabl…
…es for rectification (#2803) * feat(tree-menu): [tree-menu] Add static data and unused topic variables for rectification * feat(tree-menu): [tree-menu] Add static data and unused topic variables for rectification
- Loading branch information
1 parent
312dbcf
commit d59b0ea
Showing
10 changed files
with
399 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
169 changes: 168 additions & 1 deletion
169
examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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() | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.