feat:[calendar-view]The calendar view supports click events #3279
Conversation
WalkthroughThis pull request introduces a new event named Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as Calendar Component
participant R as Renderless API
participant M as TinyModal
U->>C: Click on a date
C->>R: Invoke selectDay(date) with API
R->>R: Process day selection and filter events via dealEvents
R-->>C: Return processed date and event data
C->>M: Call TinyModal with date & event info
M-->>C: Display modal with formatted details
Possibly related PRs
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
examples/sites/demos/pc/app/calendar-view/calendar-event.spec.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (18)
🚧 Files skipped from review as they are similar to previous changes (17)
🔇 Additional comments (4)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
Walkthrough此PR为日历视图组件添加了日期点击事件的支持，允许用户在点击日期时触发回调函数，并接收当前点击的日期和相关日程事件作为参数。此外，还优化了输入框的边框显示。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| } | ||
| } | ||
|
|
||
| const dealEvents = (props, api, date) => { |
There was a problem hiding this comment.
The dealEvents function is defined but not exported, which might limit its reusability in other parts of the codebase. Consider exporting it if it needs to be used elsewhere.
WalkthroughThis PR adds support for date click events to the calendar view component, allowing users to trigger a callback function when they click on a date and receive the current clicked date and related schedule events as parameters. In addition, the border display of the input box is also optimized. Changes
|
discreted66
force-pushed
the
calendarEvent
branch
from
f85557d to
236e0c8
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/renderless/src/calendar-view/index.ts (1)
366-376: Consider exporting the dealEvents utility functionThe
dealEventsfunction is defined but not exported, which might limit its reusability in other parts of the codebase.-const dealEvents = (props, api, date) => { +export const dealEvents = (props, api, date) => { return date.map(item => { let event = api.getEventByTime(item, props._constants.DAY_START_TIME, props._constants.DAY_END_TIME) event.forEach(e => { delete e.dayArr; delete e.dayNumber; }); return event }) }
🧹 Nitpick comments (2)
examples/sites/demos/pc/app/calendar-view/calendar-event.vue (1)
30-32: Well implemented date click handlerThe dateClick method properly displays the clicked date and related events in a message modal, providing good visual feedback to users.
Consider whether this implementation needs internationalization support for the message text "点击日期" to accommodate non-Chinese users in the future.
packages/renderless/src/calendar-view/index.ts (1)
369-372: Consider using object destructuring for cleaner property removalRather than using
deleteoperations, consider using object destructuring to create new objects without the unwanted properties, which can be more efficient and clearer.- event.forEach(e => { - delete e.dayArr; - delete e.dayNumber; - }); + event = event.map(e => { + const { dayArr, dayNumber, ...rest } = e; + return rest; + });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
examples/sites/demos/apis/calendar-view.js(1 hunks)examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue(2 hunks)examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue(2 hunks)examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts(2 hunks)examples/sites/demos/pc/app/calendar-view/calendar-event.vue(2 hunks)examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js(3 hunks)packages/renderless/src/calendar-view/index.ts(3 hunks)packages/renderless/src/calendar-view/vue.ts(3 hunks)packages/theme-saas/src/calendar-view/index.less(3 hunks)packages/theme/src/base/reset.less(1 hunks)packages/theme/src/calendar-view/index.less(3 hunks)packages/theme/src/month-table/index.less(1 hunks)packages/vue/src/calendar-view/src/mobile-first.vue(3 hunks)packages/vue/src/calendar-view/src/pc.vue(1 hunks)packages/vue/src/date-panel/src/pc.vue(1 hunks)packages/vue/src/date-range/src/pc.vue(1 hunks)packages/vue/src/year-range/src/pc.vue(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/renderless/src/calendar-view/vue.ts (1)
packages/renderless/src/calendar-view/index.ts (2)
selectDay(321-364)computedSelectDay(310-319)
🔇 Additional comments (38)
packages/vue/src/year-range/src/pc.vue (1)
7-7: Improved conditional class application for sidebarThis change enhances the conditional logic for applying the
has-sidebarclass by checking for the presence of shortcuts rather than just the existence of the shortcuts object. Usingstate.shortcuts?.lengthensures the class is only applied when there are actual shortcut items to display, making it consistent with the rendering condition on line 14.packages/vue/src/date-range/src/pc.vue (1)
18-18: Improved conditional class application for sidebarThis change enhances the conditional logic for applying the
has-sidebarclass by checking for the presence of shortcuts rather than just the existence of the shortcuts object. Usingstate.shortcuts?.lengthensures the class is only applied when there are actual shortcut items to display, making it consistent with the rendering condition on line 27.packages/vue/src/date-panel/src/pc.vue (1)
18-18: Improved conditional class application for sidebarThis change enhances the conditional logic for applying the
has-sidebarclass by checking for the presence of shortcuts rather than just the existence of the shortcuts object. Usingstate.shortcuts?.lengthensures the class is only applied when there are actual shortcut items to display, making it consistent with the rendering condition on line 28.packages/theme/src/month-table/index.less (1)
27-27: Improved layout with full-width table.This change ensures the month table occupies the full width of its parent container, providing a better visual experience and consistent layout across different screen sizes.
examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue (2)
6-6: LGTM: Date click event binding added.The event binding is properly added to the calendar view component, enabling date click functionality.
29-31: LGTM: Date click handler implementation.The
dateClickmethod correctly handles the date click event, displaying the clicked date and associated events in a modal. The implementation is consistent with other event handlers in this component.examples/sites/demos/apis/calendar-view.js (1)
241-250: LGTM: Well-documented new event.The
date-clickevent is properly documented with clear descriptions in both Chinese and English. The documentation accurately describes the callback parameters and correctly references the demo files.examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue (2)
6-6: LGTM: Date click event binding added.The event binding is properly added to the calendar view component, enabling date click functionality.
23-25: LGTM: Date click handler with Composition API.The
dateClickmethod is correctly implemented using the Composition API style. It properly displays the clicked date and associated events in a modal, consistent with other event handlers.examples/sites/demos/pc/app/calendar-view/calendar-event.vue (1)
6-6: Great addition of date-click event listener!The date-click event has been properly integrated into the calendar view component, enhancing interactivity by allowing users to interact with individual dates.
packages/theme/src/base/reset.less (2)
162-162: Simplified scrollbar corner stylingChanged from using a CSS variable to a transparent background, which makes the styling simpler and more consistent.
167-167: Simplified scrollbar track stylingSimilar to the corner styling, changed from using a CSS variable to a transparent background. This provides a cleaner appearance when scrolling and is more consistent with modern UIs.
packages/theme-saas/src/calendar-view/index.less (4)
65-65: Enhanced interactivity with pointer cursorAdding the cursor pointer to list items in the header improves the UX by visually indicating clickable elements to users.
355-355: Consistent pointer cursor for all interactive elementsAdding the same cursor pointer styling here maintains consistency across different calendar views, reinforcing the interactive nature of these elements.
363-370: Improved styling for today and current dateThe addition of dedicated styling for
.is-todayand.currentclasses ensures visual consistency when highlighting the current date in the calendar. Using the brand color makes the current date more prominent.
416-422: Consistent styling for week day indicatorsSimilar to the date styling, these changes ensure that both
.is-todayand.currentclasses for week days have the same visual treatment, maintaining consistency throughout the calendar component.examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts (2)
14-15: Good test coverage with appropriate locatorsThese new locators are well-defined for testing the date click functionality, targeting both the date element to click and the message that appears afterward.
33-35: Complete test coverage for date click featureThe test now verifies that clicking on a date triggers the expected behavior, ensuring the new feature works correctly. The wait time allows for the modal to be fully displayed before checking its visibility.
packages/theme/src/calendar-view/index.less (3)
361-364: Good addition of cursor pointer for interactive datesAdding the
cursor: pointerstyle to the list items clearly indicates to users that the dates are clickable, which improves the user experience.
374-377: Good addition of.currentclass for highlighting selected datesAdding the
.currentclass that uses the same styling as.is-todayprovides consistent visual feedback when a date is selected, enhancing the user experience.
425-431: Consistent styling for both today and selected date indicatorsThe updates to use CSS variables for the text color and the addition of the
.currentclass for week days ensures consistent styling between today's date and selected dates.packages/renderless/src/calendar-view/vue.ts (3)
1-5: Good addition of computedSelectDay importIncluding this import is necessary for the date-click functionality to work correctly.
45-52: Properly exposed computedSelectDay in APIThe computedSelectDay function is now correctly exposed in the API list, making it available to components.
275-276: Enhanced selectDay with props and api parametersThe selectDay function now receives additional parameters (props, api) which allows it to access and use event data through the dealEvents function. This is crucial for the date-click functionality to work properly.
packages/vue/src/calendar-view/src/mobile-first.vue (3)
162-164: Good implementation of date click handlerAdding both the cursor-pointer class and click event handler makes the dates interactive. The click event correctly triggers the selectDay function with the date parameter.
173-175: Enhanced visual feedback for selected datesThe class binding now checks both the current date and the selected date using computedSelectDay, providing consistent visual feedback to users.
184-186: Consistent styling for week day indicatorsThe styling for week day text is now consistent with the date styling, changing color when either the date is today or is selected.
examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js (4)
168-171: Good documentation of new date-click eventThe documentation clearly explains the new date-click event in Chinese, which is essential for developers to understand this new feature.
180-182: Good English documentation for date-click eventThe documentation includes both Chinese and English explanations, making it accessible to a wider audience of developers.
376-377: Updated feature description with new eventThe feature description is properly updated to include the new date-click event in the list of available events.
380-382: Added date-click to API listThe date-click event is now properly listed in the APIs array, making it discoverable when browsing the component documentation.
packages/vue/src/calendar-view/src/pc.vue (3)
110-110: Good addition of click handler for date selectionAdding the
@click="selectDay(date)"handler to the week date list items enables users to interact with dates directly, improving usability of the calendar component.
118-119: Good visual feedback for selected datesAdding the
currentclass whencomputedSelectDay(date)is true provides visual feedback to users when a date is selected, enhancing the UX by making the current selection clear.
126-128: Consistent styling for week day displayAdding the same
currentclass to the week day span ensures consistent styling between date and weekday elements when a date is selected.packages/renderless/src/calendar-view/index.ts (4)
310-319: Well-structured helper function for date selection stateThe
computedSelectDayfunction appropriately handles both multi-select and single-select cases, providing a clean abstraction for determining if a date is selected.
321-323: Good addition of API parameter to selectDay functionAdding the
apiparameter to theselectDayfunction enables access to other API methods, specifically for retrieving date events. This is a necessary change to support the new click event feature.
337-338: Good implementation of event data retrievalThe code correctly retrieves events related to selected dates using the
dealEventshelper function, ensuring that both dates and their associated events are available for the click handler.Also applies to: 359-360
341-342: Proper event emission with date and event dataThe code properly emits the
date-clickevent with both the selected date(s) and related events, providing consumers with all the data they need to handle date selections effectively.Also applies to: 362-363
discreted66
force-pushed
the
calendarEvent
branch
from
236e0c8 to
8d22be2
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/renderless/src/calendar-view/index.ts (1)
366-376: ThedealEventsfunction is defined but not exported.The function correctly processes events for selected dates, but it's not exported which might limit its reusability in other parts of the codebase.
Consider exporting this function if it needs to be used elsewhere:
- const dealEvents = (props, api, date) => { + export const dealEvents = (props, api, date) => {
🧹 Nitpick comments (2)
packages/vue/src/calendar-view/__tests__/calendar-view.test.tsx (1)
1-15: Good start on test coverage, but consider expanding it.The test successfully verifies that the component renders correctly, but it doesn't test the new date-click functionality.
Consider adding a test case that simulates a date click and verifies that the
date-clickevent is emitted with the correct parameters:+ test('date-click event', async () => { + const onDateClick = vi.fn() + const wrapper = mount(() => <CalendarView year={2023} month={5} onDateClick={onDateClick}></CalendarView>) + + await nextTick() + // Find a date element and trigger click + const dateElement = wrapper.find('.tiny-calendar-view__day:not(.is-disabled)') + await dateElement.trigger('click') + + // Verify event was emitted with correct parameters + expect(onDateClick).toHaveBeenCalled() + // Additional assertions on the parameters if needed + })packages/renderless/src/calendar-view/index.ts (1)
358-363: New date-click event for single-select mode.The implementation correctly handles the single-select case, but there's an inconsistency in the emitted payload format compared to multi-select mode.
In multi-select mode, you emit
(selectedDates, dateEvent)while in single-select mode you emit(selectedDate, dateEvent[0]). This inconsistency could make it harder for consumers to handle the event. Consider normalizing the event payload structure:- emit('date-click', state.selectedDate, dateEvent[0]) + emit('date-click', [state.selectedDate], dateEvent[0])Or alternatively, normalize the multi-select case to match the single-select format.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
examples/sites/demos/apis/calendar-view.js(1 hunks)examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue(2 hunks)examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue(2 hunks)examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts(2 hunks)examples/sites/demos/pc/app/calendar-view/calendar-event.vue(2 hunks)examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js(3 hunks)packages/renderless/src/calendar-view/index.ts(3 hunks)packages/renderless/src/calendar-view/vue.ts(3 hunks)packages/theme-saas/src/calendar-view/index.less(3 hunks)packages/theme/src/base/reset.less(1 hunks)packages/theme/src/calendar-view/index.less(3 hunks)packages/theme/src/month-table/index.less(1 hunks)packages/vue/src/calendar-view/__tests__/calendar-view.test.tsx(1 hunks)packages/vue/src/calendar-view/src/mobile-first.vue(3 hunks)packages/vue/src/calendar-view/src/pc.vue(1 hunks)packages/vue/src/date-panel/src/pc.vue(1 hunks)packages/vue/src/date-range/src/pc.vue(1 hunks)packages/vue/src/year-range/src/pc.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (15)
- packages/theme/src/month-table/index.less
- packages/vue/src/year-range/src/pc.vue
- packages/vue/src/date-range/src/pc.vue
- examples/sites/demos/mobile-first/app/calendar-view/calendar-event.vue
- examples/sites/demos/apis/calendar-view.js
- packages/vue/src/date-panel/src/pc.vue
- packages/theme/src/base/reset.less
- packages/theme/src/calendar-view/index.less
- packages/theme-saas/src/calendar-view/index.less
- packages/vue/src/calendar-view/src/mobile-first.vue
- examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
- packages/renderless/src/calendar-view/vue.ts
- examples/sites/demos/pc/app/calendar-view/calendar-event.vue
- packages/vue/src/calendar-view/src/pc.vue
- examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts
🔇 Additional comments (5)
examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue (2)
6-6: LGTM! Event handler added for date clicks.The
@date-clickevent binding correctly connects to the new handler function.
23-25: Good implementation of thedateClickhandler.The function correctly receives both the clicked date and associated events as parameters and displays them in a formatted message. This matches the pattern used by other event handlers in this file.
packages/renderless/src/calendar-view/index.ts (3)
310-319: LGTM! New helper function to determine if a day is selected.The
computedSelectDayfunction correctly handles both multi-select and single-select modes, properly checking disabled states and empty values.
321-323: API parameter added to support the new event functionality.The function signature update enables access to the API needed for the new feature.
337-341: New date-click event for multi-select mode.The implementation correctly handles the multi-select case by retrieving associated events and emitting them with the selected dates.
discreted66
force-pushed
the
calendarEvent
branch
from
8d22be2 to
36ecfe3
Compare
3 participants
PR
日历视图支持点击事件,优化inut边框显示
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
New Features
Tests
Style
Documentation