refactor(components): [divider/result/page-header] use type-based definitions#23417
Conversation
|
👋 @william-xue, seems like this is your first time contribution to element-plus. |
📝 WalkthroughWalkthroughReplaces runtime prop objects with explicit exported TypeScript prop interfaces for Divider, PageHeader, and Result; removes Changes
Sequence Diagram(s)(Skipped — changes are refactors of prop typing and defaults, not multi-component sequential flows.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@packages/components/divider/src/divider.vue`:
- Around line 26-30: The current change replaced type-only
defineProps<DividerProps>() (used with withDefaults) which drops runtime
validators defined in dividerProps; restore runtime validation by using the
runtime props object instead of the type-only signature—call
defineProps(dividerProps) (still wrapped by withDefaults if default values are
needed) so the validators on direction, contentPosition and borderStyle from
dividerProps are preserved; update the code around withDefaults, defineProps,
dividerProps and DividerProps accordingly to maintain types while keeping the
runtime validators.
🧹 Nitpick comments (2)
packages/components/result/src/result.ts (1)
31-35: Avoid drift between IconMap keys and ResultProps.icon union.
Derive the icon type fromIconMapso updates stay in sync.♻️ Suggested refactor
+export type ResultIcon = keyof typeof IconMap + export interface ResultProps { title?: string subTitle?: string - icon?: 'primary' | 'success' | 'warning' | 'info' | 'error' + icon?: ResultIcon }packages/components/divider/src/divider.ts (1)
8-12: KeepDividerPropsunions aligned with runtimevalues.Line 8–11 hand-codes string unions that must stay in sync with
dividerProps.values. Consider extracting shared literal arrays to avoid drift.♻️ Suggested refactor to share literals
+export const dividerDirections = ['horizontal', 'vertical'] as const +export const dividerContentPositions = ['left', 'center', 'right'] as const +export type DividerDirection = typeof dividerDirections[number] +export type DividerContentPosition = typeof dividerContentPositions[number] + export interface DividerProps { - direction?: 'horizontal' | 'vertical' - contentPosition?: 'left' | 'center' | 'right' + direction?: DividerDirection + contentPosition?: DividerContentPosition borderStyle?: BorderStyle } export const dividerProps = buildProps({ direction: { type: String, - values: ['horizontal', 'vertical'], + values: dividerDirections, default: 'horizontal', }, contentPosition: { type: String, - values: ['left', 'center', 'right'], + values: dividerContentPositions, default: 'center', }, // ... } as const)
6478db4 to
7601e1f
Compare
|
Hello, @william-xue, your PR title does not meet the standards, please refer to here. |
commit: |
|
🧪 Playground Preview: https://element-plus.run/?pr=23417 |
|
@william-xue Thanks for your contribution! ❤️ |

将组件props类型从ExtractPropTypes改为直接定义接口
使用withDefaults为props提供默认值
统一组件中props的类型导入和使用方式
Please make sure these boxes are checked before submitting your PR, thank you!
devbranch.Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.