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.

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

refactor(searchbar): move to script setup #3087

Open
wants to merge 1 commit into
base: v4
Choose a base branch
from

Conversation

subordon
Copy link
Contributor

@subordon subordon commented May 21, 2024

这个 PR 做了什么? (简要描述所做更改)

这个 PR 是什么类型? (至少选择一个)

  • feat: 新特性提交
  • fix: bug 修复
  • docs: 文档改进
  • style: 组件样式/交互改进
  • type: 类型定义更新
  • perf: 性能、包体积优化
  • refactor: 代码重构、代码风格优化
  • test: 测试用例
  • chore(deps): 依赖升级
  • chore(demo): 演示代码改进
  • chore(locale): 国际化改进
  • chore: 其他改动(是关于什么的改动?)

这个 PR 涉及以下平台:

  • NutUI H5 @nutui/nutui
  • NutUI Taro @nutui/nutui-taro

这个 PR 是否已自测:

Summary by CodeRabbit

  • 新功能

    • 引入了新的搜索栏组件,具有可定制的输入类型、形状、占位符、可清除选项、样式和事件处理功能。
  • 文档

    • 更新了搜索栏组件的文档,增加了SearchbarPropsSearchbarInstanceSearchbarInputAlignSearchbarShape等类型定义。
  • 配置

    • 在配置文件中为搜索栏组件添加了新的设置键值对"setup": true

Copy link

coderabbitai bot commented May 21, 2024

Walkthrough

此次更新增强了 Searchbar 组件的类型定义和导出,改进了类型安全性和代码清晰度。同时,添加了新的配置项和功能,使 Searchbar 组件在 Vue 和 Taro 项目中的使用更加灵活和方便。

Changes

文件路径 变更摘要
src/config.json 在 "Searchbar" 对象下新增 "setup": true 键值对
src/packages/__VUE/searchbar/... 引入并导出 SearchbarProps, SearchbarInstance, SearchbarInputAlign, SearchbarShape 类型定义
src/packages/__VUE/searchbar/index.taro.ts 导出 Searchbar 组件及其相关类型,定义并导出 SearchbarInstance 类型
src/packages/__VUE/searchbar/index.ts 导出 Searchbar 组件及其相关类型,定义并导出 SearchbarInstance 类型
src/packages/__VUE/searchbar/searchbar.taro.vue 引入 SearchbarProps 类型定义,添加组件属性及其默认值,定义计算属性和事件处理函数
src/packages/__VUE/searchbar/searchbar.vue 引入 SearchbarProps 类型定义,添加组件属性及其默认值,定义计算属性和事件处理函数

🐰✨

代码如诗,更新如画,

搜索栏中,功能放大。

类型定义,清晰明了,

Vue 与 Taro,皆可安家。

兔子欢喜,代码升华。

🚀🌟


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.

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 as PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration 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.

Copy link

codecov bot commented May 21, 2024

Codecov Report

Attention: Patch coverage is 93.18182% with 15 lines in your changes are missing coverage. Please review.

Project coverage is 83.93%. Comparing base (87f044d) to head (8b4fb57).
Report is 3 commits behind head on v4.

Files Patch % Lines
src/packages/__VUE/searchbar/searchbar.vue 92.75% 15 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##               v4    #3087      +/-   ##
==========================================
- Coverage   83.99%   83.93%   -0.07%     
==========================================
  Files         226      227       +1     
  Lines       22939    22903      -36     
  Branches     2476     2468       -8     
==========================================
- Hits        19268    19224      -44     
- Misses       3653     3661       +8     
  Partials       18       18              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

Outside diff range and nitpick comments (8)
src/packages/__VUE/searchbar/doc.md (2)

Line range hint 3-3: 请修正标题级别,确保标题级别逐级递增,以提高文档的结构清晰度。

- ### 介绍
+ ## 介绍

Line range hint 111-111: 请确保链接有效,避免文档中出现死链。

- [ConfigProvider 组件](#/zh-CN/component/configprovider)
+ [ConfigProvider 组件](正确的链接)
src/packages/__VUE/searchbar/doc.taro.md (2)

Line range hint 3-3: 请修正标题级别,确保标题级别逐级递增,以提高文档的结构清晰度。

- ### 介绍
+ ## 介绍

Line range hint 114-114: 请确保链接有效,避免文档中出现死链。

- [ConfigProvider 组件](#/zh-CN/component/configprovider)
+ [ConfigProvider 组件](正确的链接)
src/packages/__VUE/searchbar/doc.en-US.md (3)

Line range hint 3-3: Please correct the heading levels to ensure they increment by one level at a time, improving the document's structural clarity.

- ### Intro
+ ## Intro

Line range hint 112-112: Please ensure the link is valid to avoid dead links in the document.

- [ConfigProvider component](#/en-US/component/configprovider)
+ [ConfigProvider component](correct link)

Line range hint 55-55: Please correct the table formatting to ensure all data is displayed correctly.

- | v-model | current input value | number / | string | `''` |
+ | v-model | current input value | number \| string | `''` |
src/packages/__VUE/searchbar/searchbar.taro.vue (1)

174-177: 在 valueBlur 方法中使用了 setTimeout 来处理焦点问题,建议添加注释说明其必要性。

Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits Files that changed from the base of the PR and between f0e3799 and 8b4fb57.
Files selected for processing (8)
  • src/config.json (2 hunks)
  • src/packages/__VUE/searchbar/doc.en-US.md (1 hunks)
  • src/packages/__VUE/searchbar/doc.md (1 hunks)
  • src/packages/__VUE/searchbar/doc.taro.md (1 hunks)
  • src/packages/__VUE/searchbar/index.taro.ts (1 hunks)
  • src/packages/__VUE/searchbar/index.ts (1 hunks)
  • src/packages/__VUE/searchbar/searchbar.taro.vue (1 hunks)
  • src/packages/__VUE/searchbar/searchbar.vue (1 hunks)
Files skipped from review due to trivial changes (1)
  • src/config.json
Additional Context Used
GitHub Check Runs (1)
codecov/patch success (8)

src/packages/__VUE/searchbar/searchbar.vue: [warning] 138-139: src/packages/__VUE/searchbar/searchbar.vue#L138-L139
Added lines #L138 - L139 were not covered by tests


src/packages/__VUE/searchbar/searchbar.vue: [warning] 169-169: src/packages/__VUE/searchbar/searchbar.vue#L169
Added line #L169 was not covered by tests


src/packages/__VUE/searchbar/searchbar.vue: [warning] 175-176: src/packages/__VUE/searchbar/searchbar.vue#L175-L176
Added lines #L175 - L176 were not covered by tests


src/packages/__VUE/searchbar/searchbar.vue: [warning] 187-188: src/packages/__VUE/searchbar/searchbar.vue#L187-L188
Added lines #L187 - L188 were not covered by tests


src/packages/__VUE/searchbar/searchbar.vue: [warning] 191-192: src/packages/__VUE/searchbar/searchbar.vue#L191-L192
Added lines #L191 - L192 were not covered by tests


src/packages/__VUE/searchbar/searchbar.vue: [warning] 195-196: src/packages/__VUE/searchbar/searchbar.vue#L195-L196
Added lines #L195 - L196 were not covered by tests


src/packages/__VUE/searchbar/searchbar.vue: [warning] 199-200: src/packages/__VUE/searchbar/searchbar.vue#L199-L200
Added lines #L199 - L200 were not covered by tests


src/packages/__VUE/searchbar/searchbar.vue: [warning] 204-205: src/packages/__VUE/searchbar/searchbar.vue#L204-L205
Added lines #L204 - L205 were not covered by tests

Additional comments not posted (11)
src/packages/__VUE/searchbar/index.ts (3)

1-5: 代码导入和工具函数调用看起来没有问题,符合Vue组件的标准实践。


7-11: 类型导出清晰明了,符合预期的功能需求。


13-13: 组件的导出方式正确,既支持命名导出也支持默认导出,便于不同的导入方式。

src/packages/__VUE/searchbar/index.taro.ts (3)

1-5: 代码导入和工具函数调用看起来没有问题,符合Taro组件的标准实践。


7-11: 类型导出清晰明了,包括了特定于Taro平台的类型,符合预期的功能需求。


13-13: 组件的导出方式正确,既支持命名导出也支持默认导出,便于不同的导入方式。

src/packages/__VUE/searchbar/searchbar.taro.vue (5)

1-63: 模板部分使用了Vue的动态绑定和事件处理,结构清晰,符合最佳实践。


66-76: 导入和组件选项配置正确,没有问题。


78-115: 属性定义详尽,包括了搜索栏的各种功能需求,类型注解增强了类型安全。


134-154: 计算属性的定义正确,合理使用了Vue的响应式特性来处理动态样式。


209-213: onMounted 生命周期钩子的使用正确,用于在组件挂载时设置输入焦点,这是输入元素的常见做法。

Comment on lines +138 to +139
style = { ...style, ...props.focusStyle }
}
Copy link

Choose a reason for hiding this comment

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

请确保新增的代码行都有相应的测试覆盖,以保证功能的正确性和代码的健壮性。

Also applies to: 169-169, 175-176, 187-188, 191-192, 195-196, 199-200, 204-205

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant