-
Notifications
You must be signed in to change notification settings - Fork 8k
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
fix: the mobile terminal can wrap lines and expand slot attributes #6165
Conversation
|
WalkthroughThe 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
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
Suggested reviewers
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this 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 attentionThe 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:
- Its purpose isn't clear in relation to the
ml-2
class- 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
📒 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 optionsThis 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 enhancementThis 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 slotExtending 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 wrappingAdding
display: flex
andflex-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 buttonsThese 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.
…6165) Co-authored-by: sqchen <chenshiqi@sshlx.com>
* 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
Description
问题一:如果按钮太多移动端显示有问题,在移动端换行显示体验会好一点 image

这段css的作用是修复换行时候首个按钮左边没有 border 的问题
问题二:遇到个需求需要在接口显示当前 tab 下有多少条数据,而且一进来之后选中哪项是由用户行为决定的,需要固定 value,加个配置项可以满足更多用户需求。
改完之后是这样的

Type of change
Please delete options that are not relevant.
Summary by CodeRabbit
New Features
Style