Feat ✨ drop menu 支持 filterable 本地搜索 #552

HiNaruta · 2024-08-23T08:47:10Z

🤔 这个 PR 的性质是？(至少选择一个)

🔗 相关 Issue

#550

💡 需求背景和解决方案

当下拉选项过多时, 有搜索功能可以更方便的找到目标

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

文档已补充或无须补充
代码演示已提供或无须提供
TypeScript 定义已补充或无须补充

Summary by CodeRabbit

新功能
- 添加了对下拉菜单项的搜索功能，用户可以根据输入动态过滤选项。
- 引入了搜索占位符以提高用户体验。
- 增强了下拉菜单的交互性，允许用户实时筛选显示的选项。
- 在示例中展示了如何实现可搜索的下拉菜单。
文档
- 更新了文档，添加了 filterable 和 filter-placeholder 属性的说明。

feat: ✨ drop-menu 支持 filterable 本地搜索

feat: ✨ drop-menu 支持 filterable 本地搜索新增的配置参数

…搜索功能 feat: ✨ drop-menu 新增 filterable 本地搜索功能

netlify · 2024-08-23T08:47:14Z

✅ Deploy Preview for wot-design-uni ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`d2ff67a`
🔍 Latest deploy log	https://app.netlify.com/sites/wot-design-uni/deploys/66e505819fae220008c318e9
😎 Deploy Preview	https://deploy-preview-552--wot-design-uni.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

vercel · 2024-08-23T08:47:14Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
wot-design-uni	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 14, 2024 3:41am

coderabbitai · 2024-08-23T08:47:17Z

Walkthrough

此次更改为 wd-drop-menu-item 组件添加了搜索功能，使用户能够动态过滤下拉菜单选项。更新涉及新增属性和方法，以改善用户交互体验并提升组件的响应性。

Changes

文件	更改摘要
`src/.../types.ts` `src/.../wd-drop-menu-item.vue` `docs/component/drop-menu.md` `src/pages/dropMenu/Index.vue`	新增 `filterable` 和 `filterPlaceholder` 属性到 `dorpMenuItemProps`，引入搜索功能和过滤逻辑，更新了选项渲染逻辑以支持实时过滤，并在文档中添加了相关用法示例。

Possibly related issues

[新功能需求] wd-drop-menu-item新增可搜索功能 #550: 该功能请求希望在 wd-drop-menu-item 中新增搜索功能，与本次PR的新增功能相符。

Possibly related PRs

feat(drop-menu): 支持自定义图标以及覆盖默认点击事件 #479: 该PR也修改了 dorpMenuItemProps，新增与自定义相关的属性，与本次PR的 filterable 和 filterPlaceholder 属性的添加一致，表明对下拉菜单功能增强的关注。

Poem

🐰 在下拉中寻宝藏，
搜索功能真强壮。
用户输入随心愿，
选项过滤快如闪。
愉快操作皆欢颜！
🌼

Tip

OpenAI O1 model for chat

We have deployed OpenAI's latest O1 model for chat.
OpenAI claims that this model has superior reasoning capabilities than their GPT-4o model.
Please share any feedback with us in the discussions post.

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 0b2bade and d2ff67a.

Files selected for processing (1)

src/pages/dropMenu/Index.vue (3 hunks)

Additional comments not posted (1)

src/pages/dropMenu/Index.vue (1)

58-64: 代码看起来不错！

新增的可搜索下拉菜单演示代码结构清晰，涵盖了不同的使用场景，如：

不可搜索的下拉菜单

可搜索的下拉菜单

带自定义占位符的可搜索下拉菜单

这些示例能够很好地展示新功能的使用方法，提升了组件的可用性。代码风格与现有代码保持一致，整体实现很棒！

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?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between febe730 and c385cae.

Files selected for processing (2)

src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts (1 hunks)
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue (5 hunks)

Additional comments not posted (9)

src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts (2)

30-31: 确保属性名称的拼写正确

dorpMenuItemProps 中的 filterable 属性拼写正确，并且默认值为 false，符合预期。

32-33: 确保属性类型的正确性

filterPlaceholder 属性类型为 String，符合预期。

src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue (7)

19-26: 检查搜索组件的条件渲染

wd-search 组件根据 filterable 属性进行条件渲染，并绑定到 filterVal，逻辑正确。

Line range hint 28-35: 确保选项渲染逻辑的正确性

使用 filterOptions 替代直接使用 options，确保只显示过滤后的结果，逻辑正确。

84-85: 初始化过滤相关的数据属性

filterVal 和 filterOptions 的初始化符合预期。

117-131: 监控选项变化并更新过滤选项

watch 函数监控 options 的变化并更新 filterOptions，逻辑正确。

149-160: 处理过滤值变化的逻辑

handleFilterChange 函数管理过滤逻辑，确保在输入清空时重置 filterOptions，逻辑正确。

162-170: 封装过滤逻辑

formatFilterOptions 函数封装了过滤逻辑，确保根据 labelKey 和 filterVal 进行过滤，逻辑正确。

188-193: 在关闭时清空搜索

在关闭菜单时清空搜索框以避免闪烁，逻辑合理。

Moonofweisheng

感谢你的PR！
希望将新增的搜索功能的演示文档补充完整一下。

HiNaruta · 2024-09-12T08:20:13Z

感谢你的PR！希望将新增的搜索功能的演示文档补充完整一下。

演示文档在哪里补充?

coderabbitai

Actionable comments posted: 0

Outside diff range and nitpick comments (2)

src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue (2)

152-173: 看起来不错！过滤逻辑实现正确。

handleFilterChange 和 formatFilterOptions 函数正确地实现了过滤逻辑。handleFilterChange 处理搜索输入的更改并相应地更新 filterOptions。如果输入为空，则重置 filterOptions 以显示所有可用选项。如果输入有值，则调用 formatFilterOptions 根据搜索输入过滤选项。

formatFilterOptions 通过检查每个选项的标签是否包含 filterVal 来执行实际的过滤。它使用临时数组存储过滤后的选项，然后在下一个 tick 中将其分配给 filterOptions，以在模板中触发响应式更新。

对于中小型选项列表，使用 indexOf 进行过滤是一种简单有效的方法。

但是，对于较大的数据集，考虑使用更高效的搜索算法或库来优化性能。

183-196: 看起来不错！选择函数更新正确。

更新后的 choose 函数从 filterOptions 而不是 options 属性中选择一个项目，确保了所选项目基于显示给用户的过滤选项。

在发出所选值并关闭下拉菜单后，它会检查 filterVal 是否有值。如果有，它会在 300ms 延迟后调用 handleFilterChange，并传入一个空值来清除搜索输入。这可以防止由于异步更新 filterOptions 而可能发生的任何视觉上的闪烁。

300ms 的延迟是一个合理的值，可以确保流畅的用户体验。

不过，考虑通过 prop 让延迟时间可配置，以便为不同的用例提供灵活性。

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between c385cae and c288e7f.

Files selected for processing (1)

src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue (5 hunks)

Additional comments not posted (4)

src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue (4)

19-26: 看起来不错！

在模板中添加 wd-search 组件以实现搜索功能的方式是正确的。根据 filterable 属性有条件地渲染搜索输入框，并通过 v-model 指令将输入值绑定到 filterVal 数据属性，实现了双向数据绑定。同时，@change 事件处理程序触发 handleFilterChange 函数，以便在输入值更改时执行过滤逻辑。

28-28: 看起来不错！

将 v-for 指令更新为遍历 filterOptions 而不是 options 的更改是正确的。这确保了下拉菜单根据用户的搜索输入显示过滤后的选项。

87-88: 看起来不错！

为过滤功能添加了两个新的响应式引用：filterVal 和 filterOptions，并使用适当的默认值进行初始化。filterVal 保存搜索输入的当前值，filterOptions 根据搜索输入存储过滤后的选项。这确保了在未提供搜索输入时的正确行为。

120-134: 看起来不错！

为 options 属性添加了一个新的观察器，以根据当前的搜索输入更新 filterOptions。当启用 filterable 并且 filterVal 有值时，它会调用 formatFilterOptions 函数来过滤选项。这确保了下拉菜单始终根据用户的搜索输入和可用选项显示相关选项。

Moonofweisheng · 2024-09-12T10:41:19Z

感谢你的PR！希望将新增的搜索功能的演示文档补充完整一下。

演示文档在哪里补充?

项目中有docs和对应的演示页面。在演示页面补充相应的代码，在docs中补充相应的示例即可

HiNaruta · 2024-09-14T01:35:31Z

感谢你的PR！希望将新增的搜索功能的演示文档补充完整一下。

演示文档在哪里补充?

项目中有docs和对应的演示页面。在演示页面补充相应的代码，在docs中补充相应的示例即可

已补充文档和示例

晚上doc文档

HiNaruta · 2024-10-21T06:01:06Z

感谢你的PR！希望将新增的搜索功能的演示文档补充完整一下。

演示文档在哪里补充?

项目中有docs和对应的演示页面。在演示页面补充相应的代码，在docs中补充相应的示例即可

补充后是有什么不正确? 一直未见更新

HiNaruta added 3 commits August 23, 2024 16:23

feat: ✨ drop-menu 支持 filterable 本地搜索

8b0db82

feat: ✨ drop-menu 支持 filterable 本地搜索

feat: ✨ drop-menu 新增 filterable 本地搜索功能

740d7d7

feat: ✨ drop-menu 支持 filterable 本地搜索新增的配置参数

Merge pull request #1 from HiNaruta/feat-✨-drop-menu-新增-filterable-本地…

c385cae

…搜索功能 feat: ✨ drop-menu 新增 filterable 本地搜索功能

vercel bot deployed to Preview August 23, 2024 08:48 View deployment

coderabbitai bot reviewed Aug 23, 2024

View reviewed changes

HiNaruta mentioned this pull request Aug 23, 2024

[新功能需求] wd-drop-menu-item新增可搜索功能 #550

Open

Moonofweisheng requested changes Sep 12, 2024

View reviewed changes

Merge branch 'master' into feat-✨-drop-menu-支持-filterable-本地搜索

c288e7f

vercel bot deployed to Preview September 12, 2024 09:23 View deployment

coderabbitai bot reviewed Sep 12, 2024

View reviewed changes

演示页面补充相应的代码，在docs中补充相应的示例

440503d

vercel bot deployed to Preview September 14, 2024 01:32 View deployment

feat-✨-drop-menu-支持-filterable-本地搜索

0b2bade

晚上doc文档

vercel bot deployed to Preview September 14, 2024 03:34 View deployment

完善文档示例

d2ff67a

vercel bot deployed to Preview September 14, 2024 03:41 View deployment

HiNaruta requested a review from Moonofweisheng October 21, 2024 02:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat ✨ drop menu 支持 filterable 本地搜索 #552

Feat ✨ drop menu 支持 filterable 本地搜索 #552

HiNaruta commented Aug 23, 2024 •

edited by coderabbitai bot

Loading

netlify bot commented Aug 23, 2024 •

edited

Loading

vercel bot commented Aug 23, 2024 •

edited

Loading

coderabbitai bot commented Aug 23, 2024 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

coderabbitai bot left a comment

Moonofweisheng left a comment

HiNaruta commented Sep 12, 2024

coderabbitai bot left a comment

Moonofweisheng commented Sep 12, 2024

HiNaruta commented Sep 14, 2024

HiNaruta commented Oct 21, 2024

Feat ✨ drop menu 支持 filterable 本地搜索 #552

Are you sure you want to change the base?

Feat ✨ drop menu 支持 filterable 本地搜索 #552

Conversation

HiNaruta commented Aug 23, 2024 • edited by coderabbitai bot Loading

🤔 这个 PR 的性质是？(至少选择一个)

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

Summary by CodeRabbit

netlify bot commented Aug 23, 2024 • edited Loading

✅ Deploy Preview for wot-design-uni ready!

vercel bot commented Aug 23, 2024 • edited Loading

coderabbitai bot commented Aug 23, 2024 • edited Loading

Walkthrough

Changes

Possibly related issues

Possibly related PRs

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

Moonofweisheng left a comment

Choose a reason for hiding this comment

HiNaruta commented Sep 12, 2024

coderabbitai bot left a comment

Choose a reason for hiding this comment

Moonofweisheng commented Sep 12, 2024

HiNaruta commented Sep 14, 2024

HiNaruta commented Oct 21, 2024

HiNaruta commented Aug 23, 2024 •

edited by coderabbitai bot

Loading

netlify bot commented Aug 23, 2024 •

edited

Loading

vercel bot commented Aug 23, 2024 •

edited

Loading

coderabbitai bot commented Aug 23, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)