Skip to content

fix: the mobile terminal can wrap lines and expand slot attributes #6165

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

Merged
merged 1 commit into from
May 16, 2025

Conversation

Elm1992
Copy link
Contributor

@Elm1992 Elm1992 commented May 12, 2025

Description

问题一:如果按钮太多移动端显示有问题,在移动端换行显示体验会好一点 image
image
这段css的作用是修复换行时候首个按钮左边没有 border 的问题

问题二:遇到个需求需要在接口显示当前 tab 下有多少条数据,而且一进来之后选中哪项是由用户行为决定的,需要固定 value,加个配置项可以满足更多用户需求。

改完之后是这样的
image

Type of change

Please delete options that are not relevant.

  • Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

  • New Features

    • Button group options can now include extra custom properties, allowing for more flexible button configurations.
    • Button group slots now provide access to the full option data, enabling richer and more dynamic button displays.
    • Example usage updated to show additional custom data (such as a numeric label) alongside button labels.
  • Style

    • Improved button group layout with flexible wrapping and enhanced styling for groups with no gaps between buttons.

Copy link

changeset-bot bot commented May 12, 2025

⚠️ No Changeset found

Latest commit: 8b0ef56

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link
Contributor

coderabbitai bot commented May 12, 2025

Walkthrough

The updates expand the type definition for button group option objects to allow arbitrary properties, adjust the button group component to expose the full option data to slots, and update an example to utilize and display an additional custom property on an option. Styles for flexible button wrapping and spacing are also introduced.

Changes

File(s) Change Summary
packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts Expanded the options type in VbenButtonGroupProps to allow arbitrary key-value properties on each option object, in addition to label and value.
packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue Extended slot scope to include full option data (data), and updated styles for .vben-check-button-group to support flex wrapping and .no-gap border/margin adjustments.
playground/src/views/examples/button-group/index.vue Added a num property to one option; updated slot usage to access and conditionally display this new property using the exposed data object in the slot scope.

Sequence Diagram(s)

sequenceDiagram
    participant ParentComponent
    participant VbenCheckButtonGroup
    participant SlotTemplate

    ParentComponent->>VbenCheckButtonGroup: Passes options (with extra properties)
    VbenCheckButtonGroup->>SlotTemplate: Exposes { label, value, data (full option) }
    SlotTemplate->>SlotTemplate: Accesses data.num and displays if present
Loading

Suggested reviewers

  • anncwb
  • mynetfan

Poem

In the garden of buttons, new seeds are sown,
With options that flex and data full-grown.
Now numbers may bloom beside every name,
And borders wrap gently in styling’s new frame.
A hop and a skip—UI’s delight,
More data for bunnies, and code shining bright! 🐇✨

Tip

⚡️ Faster reviews with caching
  • CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.

✨ Finishing Touches
  • 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ 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>, please review it.
    • 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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 generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this 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.

Copy link
Contributor

@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: 0

🧹 Nitpick comments (1)
playground/src/views/examples/button-group/index.vue (1)

171-176: White class might need attention

The implementation correctly leverages the expanded slot props by accessing the entire option object via the new data parameter. This allows displaying additional metadata like the count value.

Consider reviewing the white class on line 175. It appears to be a color class, but:

  1. Its purpose isn't clear in relation to the ml-2 class
  2. It might need to be replaced with a more specific utility class that follows your design system's naming conventions
-              <span v-if="data.num" class="white ml-2">{{ data.num }}</span>
+              <span v-if="data.num" class="ml-2 text-white">{{ data.num }}</span>
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9e67929 and 8b0ef56.

📒 Files selected for processing (3)
  • packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts (1 hunks)
  • packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue (2 hunks)
  • playground/src/views/examples/button-group/index.vue (2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
  • GitHub Check: Analyze (javascript-typescript)
  • GitHub Check: Test (windows-latest)
  • GitHub Check: Check (windows-latest)
  • GitHub Check: Lint (ubuntu-latest)
  • GitHub Check: Lint (windows-latest)
  • GitHub Check: Check (ubuntu-latest)
  • GitHub Check: post-update (windows-latest)
  • GitHub Check: post-update (ubuntu-latest)
🔇 Additional comments (5)
packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts (1)

39-39: Good improvement to support flexible button options

This change enhances the options type definition by adding an index signature to allow arbitrary properties on button option objects. This extension enables storing and accessing additional metadata on button options, which aligns with the PR objective of displaying data counts and supporting more flexible configuration scenarios.

playground/src/views/examples/button-group/index.vue (1)

22-22: LGTM - Added number property demonstrates type enhancement

This change adds a num property to the second button option, taking advantage of the expanded type definition that now allows arbitrary properties.

packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue (3)

122-124: Good enhancement to pass complete option data to slot

Extending the slot scope to include the full option object as data improves component flexibility, allowing consumers to access and display any additional properties on button options.


130-132: Perfect solution for mobile wrapping

Adding display: flex and flex-wrap: wrap directly addresses the PR objective of fixing the mobile display issue by enabling line wrapping for buttons, improving the layout when there are many buttons.


166-175: Good border styling for wrapped buttons

These CSS rules ensure proper border styling when buttons wrap to new lines in the no-gap mode:

  • Setting the first button's right border width to 0
  • Adding a left border to subsequent buttons
  • Using negative margin to create seamless connections

This implementation addresses the visual inconsistency mentioned in the PR objectives, ensuring that the first button in a wrapped line has a proper border.

@jinmao88 jinmao88 merged commit a23bc4c into vbenjs:main May 16, 2025
14 checks passed
mynetfan pushed a commit that referenced this pull request May 19, 2025
baohaojie123 added a commit to baohaojie123/vue-vben-admin that referenced this pull request Jun 4, 2025
* commit 'd0b8349a2d9913080dbe5256bdff23ab80bb72e6':
  perf: stub unbuild params (vbenjs#6210)
  fix: in mixed layout mode, the sidebar does not display when the first child node is an external link (vbenjs#6219)
  perf: perf the control logic of Tab (vbenjs#6220)
  fix(@vben-core/shadcn-ui): fix disabled functionality not working in VbenTree component (vbenjs#6205)
  fix: css style (vbenjs#6176)
  fix: the mobile terminal can wrap lines and expand slot attributes (vbenjs#6165)
  feat(tabs): 支持计算属性作为标签标题,解决 vbenjs#6170 的问题 (vbenjs#6163)
  types: 导出authentication组件的type,自定义toolbarList时类型使用ToolbarType (vbenjs#6158)

# Conflicts:
#	docs/src/guide/essentials/route.md
@github-actions github-actions bot locked and limited conversation to collaborators Jun 16, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants