feat(dropdown): [dropdown] add visible attribute to support user-defined panel display. #2774
Conversation
|
Warning Rate limit exceeded@chenxi-20 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 6 minutes and 47 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (4)
WalkthroughThis pull request introduces a new Changes
Sequence DiagramsequenceDiagram
participant User
participant Button
participant Dropdown
User->>Button: Click to show/hide
Button->>Dropdown: Toggle visibility
Dropdown-->>User: Update visibility state
Possibly related PRs
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
examples/sites/demos/pc/app/dropdown/visible-composition-api.vue (2)
22-39: Add type safety and improve variable naming.Consider the following improvements:
- Add TypeScript interface for menu items
- Use more descriptive variable names (e.g.,
menuItemsinstead ofoptions)- Consider extracting menu items to a shared constant for consistency between demos
Example implementation:
interface MenuItem { label: string; disabled?: boolean; } const menuItems: MenuItem[] = [ { label: '黄金糕' }, { label: '点击我隐藏' }, { label: '螺蛳粉' }, { label: '双皮奶' }, { label: '蚵仔煎' } ]
40-44: Improve event handler naming and type safety.The
itemClickhandler could be more descriptive and type-safe.Example implementation:
interface MenuClickEvent { itemData: MenuItem; } const handleMenuItemClick = (event: MenuClickEvent) => { if (event.itemData.label === '点击我隐藏') { visible.value = false } }examples/sites/demos/pc/app/dropdown/visible.vue (1)
31-47: Extract shared menu items to avoid duplication.The menu items are duplicated between the Options API and Composition API demos. Consider extracting them to a shared constant.
Create a new file
dropdown-constants.ts:export const MENU_ITEMS = [ { label: '黄金糕' }, { label: '点击我隐藏' }, { label: '螺蛳粉' }, { label: '双皮奶' }, { label: '蚵仔煎' } ]examples/sites/demos/pc/app/dropdown/visible.spec.ts (1)
3-27: Improve test readability and coverage.Consider the following improvements:
- Use English for test descriptions
- Extract repeated selectors to constants
- Add test cases for edge cases (e.g., rapid toggling, disabled state)
Example implementation:
const SELECTORS = { wrapper: '#visible', dropdownMenu: 'body > .tiny-dropdown-menu', container: '#all-demos-container', showButton: 'text=点击显示', hideButton: 'text=点击隐藏' } test('should support manual visibility control', async ({ page }) => { // ... existing test logic with SELECTORS ... }) test('should handle rapid visibility toggling', async ({ page }) => { // ... new test case ... }) test('should maintain visibility when disabled', async ({ page }) => { // ... new test case ... })examples/sites/demos/apis/dropdown.js (1)
221-231: LGTM! Consider enhancing the documentation.The property definition is well-structured and follows Vue's v-model convention. While the description mentions priority over
trigger, it would be helpful to add a note in the description about how this property interacts with thetriggerproperty when both are used.desc: { - 'zh-CN': '手动控制下拉弹框显隐，优先级高于trigger', + 'zh-CN': '手动控制下拉弹框显隐，优先级高于trigger。当设置为true时，trigger属性的hover/click行为将被忽略。', - 'en-US': 'Manually control the display and hide of the dropdown menu, with priority higher than the trigger' + 'en-US': 'Manually control the display and hide of the dropdown menu, with priority higher than the trigger. When set to true, the hover/click behavior of the trigger property will be ignored.' },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
examples/sites/demos/apis/dropdown.js(1 hunks)examples/sites/demos/pc/app/dropdown/visible-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dropdown/visible.spec.ts(1 hunks)examples/sites/demos/pc/app/dropdown/visible.vue(1 hunks)examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js(1 hunks)packages/renderless/src/dropdown/index.ts(6 hunks)packages/renderless/src/dropdown/vue.ts(3 hunks)packages/renderless/types/dropdown.type.ts(1 hunks)packages/vue/src/dropdown/src/index.ts(1 hunks)packages/vue/src/dropdown/src/pc.vue(4 hunks)
🔇 Additional comments (8)
packages/renderless/types/dropdown.type.ts (2)
23-23: LGTM! Type enhancement for menuItems.The addition of empty array as a valid type for
menuItemsimproves type safety by explicitly handling the empty state.
31-32: LGTM! Well-structured state properties for visibility control.The new state properties effectively support the visibility control feature:
triggerproperly types the activation methodvisibleIsBooleantracks external visibility controlpackages/vue/src/dropdown/src/pc.vue (1)
219-219: LGTM! Proper conditional directive binding.The clickoutside directive is correctly conditioned on
!state.visibleIsBoolean, ensuring it only applies when visibility isn't externally controlled.packages/renderless/src/dropdown/vue.ts (2)
64-65: LGTM! Well-implemented computed property.The
visibleIsBooleancomputed property effectively determines when visibility is externally controlled.
92-96: LGTM! Proper visibility state management.The watch logic correctly handles both scenarios:
- Watches
props.visiblewhen externally controlled- Falls back to
state.visiblefor internal controlpackages/renderless/src/dropdown/index.ts (2)
48-59: LGTM! Robust visibility state management.The show/hide methods properly handle both scenarios:
- Emit events when visibility is externally controlled
- Manage internal state otherwise
Also applies to: 75-86
213-215: LGTM! Proper event initialization.The initEvent method correctly skips hover/click handlers when visibility is externally controlled, preventing conflicts with the v-model:visible binding.
examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js (1)
114-126: LGTM! Well-structured demo entry.The demo entry is properly formatted and provides clear descriptions in both languages, accurately explaining the new
visibleproperty's functionality and its priority over thetriggerproperty.
|
@chenxi-20 有一个问题，当 visible 默认值设置为 true 时，dropdown 并未自动展开。 |
@chenxi-20 There is a problem. When the default value of visible is set to true, dropdown does not expand automatically. |
|
@chenxi-20 建议增加一个 visible 默认为 true 的 demo，并补充对应的测试用例。 大致如下： |
@chenxi-20 suggested adding a demo with visible defaulting to true and adding corresponding test cases. It's roughly as follows: |
|
@chenxi-20 这个demo只是为了演示 v-model:visible，需要移除多余的属性配置：show-icon / item-click / hideOnClick。 如果是为了特殊的演示目的，可以在这个demo下面另设一个关联的demo。 类似以下这样：
|
@chenxi-20 This demo is just to demonstrate v-model:visible, and the redundant attribute configuration needs to be removed: show-icon / item-click / hideOnClick. If it is for special demonstration purposes, you can set up another associated demo below this demo. Something like this:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
examples/sites/demos/pc/app/dropdown/visible.spec.ts (1)
10-15: Enhance test coverage for visibility transitions.Consider adding assertions to verify:
- Transition states during show/hide
- Dropdown content visibility
- Accessibility attributes (aria-expanded, aria-hidden)
examples/sites/demos/pc/app/dropdown/visible-composition-api.vue (1)
18-21: Consider adopting TypeScript for better type safety.Adding TypeScript would provide better type checking and developer experience. Consider:
- Renaming the file to .vue.ts
- Adding type annotations for props and events
packages/renderless/src/dropdown/index.ts (2)
Line range hint
63-86: Consider extracting common patterns.The show/hide functions share similar patterns. Consider:
- Extracting timeout handling into a separate function
- Creating constants for common values
+const CLICK_TIMEOUT = 0; +const handleVisibilityTimeout = (callback, trigger, timeout) => { + clearTimeout(Number(state.timeout)); + state.timeout = setTimeout( + callback, + trigger === 'click' ? CLICK_TIMEOUT : timeout + ); +};
Line range hint
269-290: Document the visibility control flow.The mounted hook handles different visibility scenarios, but the logic flow could be clearer. Consider adding JSDoc comments to explain:
- When visibleIsBoolean is used
- The purpose of broadcasting initial visibility
- The relationship between is-disabled and clickOutside
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
examples/sites/demos/pc/app/dropdown/visible-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dropdown/visible.spec.ts(1 hunks)examples/sites/demos/pc/app/dropdown/visible.vue(1 hunks)packages/renderless/src/dropdown/index.ts(7 hunks)packages/renderless/src/dropdown/vue.ts(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- examples/sites/demos/pc/app/dropdown/visible.vue
- packages/renderless/src/dropdown/vue.ts
🔇 Additional comments (6)
examples/sites/demos/pc/app/dropdown/visible.spec.ts (2)
8-8: Consider using a more reliable visibility check.The locator
body > .tiny-dropdown-menuwithvisible=truemight not be reliable for checking visibility. Consider using CSS properties or specific visibility classes instead.
16-17: Verify intended behavior for outside clicks.The test expects the dropdown to remain visible when clicking outside. This differs from typical dropdown patterns where outside clicks close the dropdown. Please confirm if this is the intended behavior.
examples/sites/demos/pc/app/dropdown/visible-composition-api.vue (2)
1-16: Well-structured template implementation!The template follows Vue 3 composition API best practices with proper v-model binding and slot usage.
22-22: Review initial visibility state.Setting
visibletotrueinitially means the dropdown will be open on mount. Consider:
- Setting initial state to
falsefor better UX- Adding a prop to control initial visibility
✅ Verification successful
Review initial visibility state.
The review comment is valid. Other dropdown and select components in the codebase don't initialize their visibility state as
true. Instead, they use:
- Props like
automatic-dropdownto control visibility- Internal state management
- Event-based visibility control
Setting
visibletotrueinitially is inconsistent with the codebase patterns and could lead to unexpected behavior.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if other dropdown components follow similar patterns ast-grep --pattern 'const visible = ref($value)'Length of output: 50
Script:
#!/bin/bash # Find dropdown-related files fd dropdown -e vue # Search for visibility ref patterns in Vue files rg "const.*visible.*=.*ref\(" -t vueLength of output: 881
Script:
#!/bin/bash # Check content of composition API dropdown files cat "examples/sites/demos/pc/app/base-select/automatic-dropdown-composition-api.vue" "examples/sites/demos/pc/app/grid/operation-column/dropdown-composition-api.vue" "examples/sites/demos/pc/app/select/automatic-dropdown-composition-api.vue"Length of output: 5198
packages/renderless/src/dropdown/index.ts (2)
42-59: Clean implementation of visibility control!The separation between controlled (boolean) and uncontrolled visibility states is well-implemented.
96-101: Ensure consistent event values.The
handle-clickevent emits different values based onvisibleIsBoolean. This might cause confusion for consumers. Consider:
- Documenting this behavior clearly
- Normalizing the event value to be consistent
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
examples/sites/demos/pc/app/dropdown/visible.vue (1)
1-16: Simplify the demo to focus on v-model:visible functionalityFollowing the PR comments, the demo should focus solely on demonstrating the
v-model:visiblebinding. Consider these improvements:
- Remove the redundant
item-dataprop- Consider internationalizing the text "点击显示/隐藏"
- The manual click handler may be unnecessary since
v-model:visibleprovides two-way binding<template> <tiny-dropdown v-model:visible="visible"> - <div @click="handleClick">点击{{ visible ? '隐藏' : '显示' }}</div> + <div>{{ visible ? 'Hide' : 'Show' }}</div> <template #dropdown> <tiny-dropdown-menu> <tiny-dropdown-item v-for="(item, index) in options" :key="index" :label="item.label" - :item-data="item" :disabled="item.disabled" ></tiny-dropdown-item> </tiny-dropdown-menu> </template> </tiny-dropdown> </template>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
examples/sites/demos/pc/app/dropdown/visible-composition-api.vue(1 hunks)examples/sites/demos/pc/app/dropdown/visible.spec.ts(1 hunks)examples/sites/demos/pc/app/dropdown/visible.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- examples/sites/demos/pc/app/dropdown/visible.spec.ts
- examples/sites/demos/pc/app/dropdown/visible-composition-api.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR Unit Test
🔇 Additional comments (1)
examples/sites/demos/pc/app/dropdown/visible.vue (1)
29-29: Verify the default visible behaviorPer kagol's comment, please verify that setting
visible: trueby default correctly expands the dropdown automatically.✅ Verification successful
Default visible behavior is correctly implemented
The implementation setsvisible: trueby default and the test suite confirms the dropdown starts in an expanded state, with the toggle button showing "点击隐藏" (Click to hide).🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for tests verifying the default visible behavior rg -l "visible.*true" examples/sites/demos/pc/app/dropdown/visible.spec.tsLength of output: 129
Script:
#!/bin/bash # Get the content of both implementation and test files echo "=== visible.vue content ===" cat examples/sites/demos/pc/app/dropdown/visible.vue echo -e "\n=== visible.spec.ts content ===" cat examples/sites/demos/pc/app/dropdown/visible.spec.tsLength of output: 2104
d77aaff to
13d20d1
Compare
13d20d1 to
43fb544
Compare
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Release Notes
New Features
v-model:visibleproperty.Improvements
Documentation
Testing