refactor(components): [calendar] use type-based definitions by zhongli-kira · Pull Request #23419 · element-plus/element-plus

zhongli-kira · 2026-01-17T18:08:09Z

Please make sure these boxes are checked before submitting your PR, thank you!

Make sure you follow contributing guide English | (中文 | Español | Français).
Make sure you are merging your commits to dev branch.
Add some descriptions and refer to relative issues for your PR.

Summary by CodeRabbit

Refactor
- Unified and strengthened prop interfaces across calendar components for a clearer, more stable public API.
- Components now use explicit typed prop interfaces with sensible defaults (controller defaulted to "button"; header behavior standardized).
- Legacy implicit prop aliases are deprecated in favor of the new public interfaces to simplify usage and migration.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

github-actions · 2026-01-17T18:08:17Z

coderabbitai · 2026-01-17T18:08:24Z

Warning

Rate limit exceeded

@rzzf has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 12 minutes and 37 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 8d99705 and af1229d.

📒 Files selected for processing (3)

packages/components/calendar/src/calendar.ts
packages/components/calendar/src/date-table.ts
packages/components/calendar/src/select-controller.ts

📝 Walkthrough

Walkthrough

Replaced runtime ExtractPropTypes-based exported prop aliases with explicit TypeScript interfaces for Calendar, DateTable, and SelectController; updated .vue components to use defineProps() (withDefaults where applicable) and removed ExtractPropTypes imports while keeping ExtractPublicPropTypes and adding deprecation notes.

Changes

Cohort / File(s)	Summary
Calendar core types `packages/components/calendar/src/calendar.ts`	Added exported `CalendarProps` interface; removed `ExtractPropTypes` import and the ExtractPropTypes-based exported alias; retained `ExtractPublicPropTypes` and added deprecation notice for the old public alias and runtime `calendarProps`.
Calendar component `packages/components/calendar/src/calendar.vue`	Switched from `defineProps(calendarProps)` to `defineProps<CalendarProps>()` (type import) and applied `withDefaults({ controllerType: 'button' })`; removed runtime `calendarProps` import.
Date table core types `packages/components/calendar/src/date-table.ts`	Added exported `DateTableProps` interface; removed `ExtractPropTypes`-based exported alias and trimmed vue type imports.
Date table component `packages/components/calendar/src/date-table.vue`	Switched from `defineProps(dateTableProps)` to `defineProps<DateTableProps>()` (type import); removed runtime `dateTableProps` import.
Select controller core types `packages/components/calendar/src/select-controller.ts`	Added exported `SelectControllerProps` interface; removed `ExtractPropTypes`-based exported alias and cleaned up vue type imports.
Select controller component `packages/components/calendar/src/select-controller.vue`	Switched from `defineProps(selectControllerProps)` to `defineProps<SelectControllerProps>()` (type import); removed runtime `selectControllerProps` import and adjusted emits import.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

refactor(components): [affix] use type-based definitions #23400 — same refactor pattern: replace ExtractPropTypes exports with explicit TS interfaces and update components to use defineProps().
refactor(components): [alert] use type-based definitions #23401 — similar conversion of runtime prop objects to exported TypeScript interfaces and .vue typed defineProps usage.
refactor(components): [autocomplete] use type-based definitions #23410 — comparable change for another component set (runtime prop objects → explicit interfaces and deprecations).

Suggested reviewers

rzzf
btea
keeplearning66

Poem

🐰 I hopped through props both old and new,
I traded extracts for interfaces true,
Defaults snug with withDefaults in sight,
Types now tidy, components light,
A little hop — the build stays bright.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description only contains an unchecked template checklist without any actual description, implementation details, or reference to related issues as required by the template.	Add a meaningful description explaining the refactoring rationale, benefits, and breaking changes. Reference any related issues. Check off the contributing guide and branch verification items.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'refactor(components): [calendar] use type-based definitions' clearly and specifically describes the main change: converting the calendar component from runtime props to type-based definitions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/components/calendar/src/select-controller.ts`:
- Around line 11-14: SelectControllerProps currently declares date as optional
but the runtime prop validation (selectControllerProps) marks it required;
update the interface so date is non-optional (remove the ? on date in
SelectControllerProps) to match the runtime contract and avoid undefined types,
and then check any callers of SelectControllerProps/SelectController (or
functions referencing props.date) to ensure they supply a Dayjs instance to
satisfy the new type.

pkg-pr-new · 2026-01-18T05:00:13Z

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus/element-plus@23419

npm i https://pkg.pr.new/element-plus/element-plus@23419

yarn add https://pkg.pr.new/element-plus/[email protected]

commit: af1229d

github-actions · 2026-01-18T05:05:59Z

🧪 Playground Preview: https://element-plus.run/?pr=23419
Please comment the example via this playground if needed.

github-actions · 2026-01-18T09:04:44Z

@zhongli-kira Thanks for your contribution! ❤️

zhongli-kira added 2 commits January 18, 2026 01:11

refactor(components): [calendar] use type-based definitions

9020cc6

refactor(components): [calendar] use type-based definitions

0bbcde7

pull-request-triage Bot assigned zhongli-kira Jan 17, 2026

pull-request-triage Bot added the Needs Review label Jan 17, 2026

github-actions Bot added the Contribution::Community label Jan 17, 2026

coderabbitai Bot reviewed Jan 17, 2026

View reviewed changes

Comment thread packages/components/calendar/src/select-controller.ts

btea mentioned this pull request Jan 18, 2026

Refactor Component Props to type-based declarations #23399

Closed

64 tasks

refactor(components): [calendar] use type-based definitions

70ca5a7

zhongli-kira added 4 commits January 18, 2026 13:29

refactor(components): [calendar] use type-based definitions

eee410c

refactor(components): [calendar] use type-based definitions

6e91e1d

refactor(components): [calendar] use type-based definitions

71fa925

refactor(components): [calendar] use type-based definitions

3333aaf

btea reviewed Jan 18, 2026

View reviewed changes

Comment thread packages/components/calendar/src/date-table.ts

zhongli-kira and others added 3 commits January 18, 2026 16:22

refactor(components): [calendar] use type-based definitions

e2c2208

refactor(components): [calendar] use type-based definitions

8d99705

refactor: update

af1229d

rzzf approved these changes Jan 18, 2026

View reviewed changes

btea approved these changes Jan 18, 2026

View reviewed changes

btea merged commit e60c87f into element-plus:dev Jan 18, 2026
16 checks passed

This was referenced Jan 19, 2026

refactor(components): [transfer] use type-based definitions #23460

Merged

refactor(components): [popconfirm] use type-based definitions #23455

Merged

refactor(components): [timelineItem] use type-based definitions #23479

Merged

element-bot mentioned this pull request Jan 30, 2026

D2M #23568

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(components): [calendar] use type-based definitions#23419

refactor(components): [calendar] use type-based definitions#23419
btea merged 10 commits into
element-plus:devfrom
zhongli-kira:components/calendar

zhongli-kira commented Jan 17, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

github-actions Bot commented Jan 17, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jan 17, 2026 •

edited

Loading

Rate limit exceeded

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

pkg-pr-new Bot commented Jan 18, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jan 18, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jan 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

zhongli-kira commented Jan 17, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pkg-pr-new Bot commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jan 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

zhongli-kira commented Jan 17, 2026 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Jan 17, 2026 •

edited

Loading

coderabbitai Bot commented Jan 17, 2026 •

edited

Loading

pkg-pr-new Bot commented Jan 18, 2026 •

edited

Loading

github-actions Bot commented Jan 18, 2026 •

edited

Loading