Feature/switch type on mobile#5
Conversation
There was a problem hiding this comment.
Pull request overview
Updates the calendar’s responsive month rendering so mobileMonths can differ from months for any desktop configuration, including live switching between non-scrollable (1–2) and scrollable (3+) layouts at the 640px breakpoint.
Changes:
- Generalize
mobileMonthsbehavior (including crossing the scrollable threshold) and update runtime logic to preserve selection/visible month while rebinding scroll observers safely. - Refactor template generation to optionally emit both day-view branches (non-scrollable + scrollable) gated by reactive
isScrollable. - Expand unit tests/docs/demo to cover new behavior; adjust bundle-size budget.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/unit/mobile-months.test.ts | Updates validation expectations and adds coverage for threshold-crossing behavior and observer lifecycle on resize. |
| tests/unit/build-verification.test.ts | Relaxes ESM bundle size budget to accommodate new logic. |
| tests/unit/axe-accessibility.test.ts | Updates template options passed into generateCalendarTemplate after template API refactor. |
| tests/unit/accessibility.test.ts | Updates template options passed into generateCalendarTemplate after template API refactor. |
| src/plugin/template.ts | Refactors template generation to support emitting both day-view branches and dual-chrome gating via monthCount. |
| src/plugin/calendar-component.ts | Generalizes mobileMonths, adds branch-need calculations, improves scroll observer (re)binding and resize behavior. |
| demo/index.html | Adds demo card showcasing desktop 2-month vs mobile 12-month booking-calendar behavior. |
| README.md | Documents generalized mobileMonths and threshold-crossing live layout swaps. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ``` | ||
|
|
||
| The calendar listens for viewport changes at the 640px breakpoint and switches between the desktop and mobile month counts automatically. Selection is preserved across viewport changes. | ||
| The calendar listens for viewport changes at the 640px breakpoint and swaps layouts live — even when the new count crosses the 3-month scrollable threshold. Selection, visible month, and focus are preserved across the switch. |
There was a problem hiding this comment.
README claims that “focus” is preserved across layout swaps, but the implementation explicitly clears focusedDate when it’s not in the rebuilt grid (so focus can be reset depending on which month was focused when switching counts). Suggest rewording to reflect that focus is preserved only when the focused month remains rendered, otherwise it is cleared/reinitialized.
| The calendar listens for viewport changes at the 640px breakpoint and swaps layouts live — even when the new count crosses the 3-month scrollable threshold. Selection, visible month, and focus are preserved across the switch. | |
| The calendar listens for viewport changes at the 640px breakpoint and swaps layouts live — even when the new count crosses the 3-month scrollable threshold. Selection and visible month are preserved across the switch. Focus is preserved when the previously focused date remains in the rendered grid; otherwise it is cleared and reinitialized. |
|
|
||
| return `<template x-if="view === 'days'"> | ||
| return `<template x-if="${viewCondition}"> | ||
| <div class="rc-months${isDual ? '' : ' rc-view-enter'}"${monthsClass}${isDual ? '' : ''}> |
There was a problem hiding this comment.
There’s a redundant ${isDual ? '' : ''} interpolation in the day-view wrapper <div>; it doesn’t affect output but adds noise and makes the template harder to read. Please remove the unused conditional segment.
| <div class="rc-months${isDual ? '' : ' rc-view-enter'}"${monthsClass}${isDual ? '' : ''}> | |
| <div class="rc-months${isDual ? '' : ' rc-view-enter'}"${monthsClass}> |
No description provided.