fix(slider): Fix the issue of horizontal and vertical mode conversion #3696
Conversation
WalkthroughA watcher was added in packages/renderless/src/slider/vue.ts to observe changes to the vertical prop and trigger api.setBarStyle() and api.setButtonStyle() when it toggles. No other logic, error handling, or public API signatures were modified. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Vue as Vue Component
participant Watcher as vertical Watcher
participant API as Slider API
User->>Vue: Toggle prop: vertical
Vue-->>Watcher: Detect change (vertical)
Note over Watcher: Orientation changed
Watcher->>API: setBarStyle()
Watcher->>API: setButtonStyle()
API-->>Vue: Styles updated
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Pre-merge checks (3 passed)✅ Passed checks (3 passed)
Poem
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. ✨ Finishing touches
🧪 Generate unit tests
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/renderless/src/slider/vue.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
| watch( | ||
| () => props.vertical, | ||
| () => { | ||
| api.setBarStyle() | ||
| api.setButtonStyle() | ||
| } | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Run the orientation watcher after DOM updates; also refresh all orientation-dependent metrics.
By default, watch callbacks run before the DOM flush; if setBarStyle/setButtonStyle read sizes/classes, results can be stale. Run with flush:'post' and refresh tip/marks as they depend on orientation too.
- watch(
- () => props.vertical,
- () => {
- api.setBarStyle()
- api.setButtonStyle()
- }
- )
+ watch(
+ () => props.vertical,
+ () => {
+ api.setBarStyle()
+ api.setButtonStyle()
+ api.setTipStyle()
+ api.getPoints()
+ api.getLabels()
+ },
+ { flush: 'post' }
+ )📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| watch( | |
| () => props.vertical, | |
| () => { | |
| api.setBarStyle() | |
| api.setButtonStyle() | |
| } | |
| ) | |
| watch( | |
| () => props.vertical, | |
| () => { | |
| api.setBarStyle() | |
| api.setButtonStyle() | |
| api.setTipStyle() | |
| api.getPoints() | |
| api.getLabels() | |
| }, | |
| { flush: 'post' } | |
| ) |
🤖 Prompt for AI Agents
In packages/renderless/src/slider/vue.ts around lines 207 to 213, the watcher
for props.vertical runs before the DOM is flushed and only updates bar/button
styles; change the watch to run after DOM updates by adding { flush: 'post' }
and also refresh orientation-dependent metrics by invoking the tip and marks
update methods (e.g., api.setTipStyle() and api.setMarks() or their equivalents)
alongside api.setBarStyle() and api.setButtonStyle() so tip/marks reflect the
new orientation.
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