Skip to content

refactor(components): [image/image-viewer] use type-based definitions#23444

Merged
rzzf merged 1 commit into
element-plus:devfrom
snowbitx:refactor/use-type-image
Jan 18, 2026
Merged

refactor(components): [image/image-viewer] use type-based definitions#23444
rzzf merged 1 commit into
element-plus:devfrom
snowbitx:refactor/use-type-image

Conversation

@snowbitx
Copy link
Copy Markdown
Contributor

@snowbitx snowbitx commented Jan 18, 2026 •
edited by coderabbitai Bot
Loading

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.

ref #23399

Summary by CodeRabbit

  • Refactor

    • Updated TypeScript type exports for Image Viewer and Image components to improve type definitions and IDE support.
    • Reorganized component prop type declarations with explicit default values for better type clarity.

  • Documentation

    • Added deprecation notices for legacy component prop type import paths. Users relying on old type exports should migrate to the new public type aliases.

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 18, 2026 •
edited
Loading

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 18, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

The PR refactors props declarations for image-viewer and image components by introducing explicit TypeScript interfaces (ImageViewerProps, ImageProps) and new type aliases (ImageViewerCrossorigin, ImageCrossorigin). It replaces ExtractPropTypes with ExtractPublicPropTypes for public API exports and updates component files to use typed defineProps with withDefaults instead of the previous prop object pattern.

Changes

Cohort / File(s) Summary
Image Viewer Type Definitions
packages/components/image-viewer/src/image-viewer.ts		 Introduced ImageViewerCrossorigin type and ImageViewerProps interface; replaced ExtractPropTypes with ExtractPublicPropTypes; added ImageViewerPropsPublic public alias with deprecation notice; refactored crossorigin prop to use new type
Image Viewer Component
packages/components/image-viewer/src/image-viewer.vue		 Switched from defineProps(imageViewerProps) to defineProps<ImageViewerProps>() with withDefaults; added explicit default values for urlList, initialIndex, infinite, closeOnPressEscape, zoomRate, scale, minScale, maxScale
Image Type Definitions
packages/components/image/src/image.ts		 Introduced ImageFitType, ImageCrossorigin types and ImageProps interface; expanded imageProps to include explicit prop declarations and defaults; added ImagePropsPublic public alias with ExtractPublicPropTypes; removed ExtractPropTypes dependency
Image Component
packages/components/image/src/image.vue		 Switched from defineProps(imageProps) to withDefaults(defineProps<ImageProps>(), {...}); added explicit default values for src, fit, previewSrcList, initialIndex, infinite, closeOnPressEscape, zoomRate, scale, minScale, maxScale

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

Suggested reviewers

  • btea
  • rzzf
  • keeplearning66

Poem

🐰 Props once hidden in objects so dense,
Now dance in interfaces, bright and immense,
With defaults laid bare and types crystal clear,
The component's contract is welcomed here!
Crossorigin springs forth, typed and true,
A modernized Vue, refreshing anew! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check ✅ Passed The title clearly and specifically describes the main refactoring effort across both image and image-viewer components toward type-based prop definitions.
Description check ✅ Passed The PR description includes the required checklist with all items marked complete and references issue #23399, fulfilling the repository's contribution requirements.

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

✨ Finishing touches
  • 📝 Generate docstrings

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.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Jan 18, 2026

Open in StackBlitz

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

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

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

commit: 50a859b

@btea btea mentioned this pull request Jan 18, 2026
Closed
64 tasks
@rzzf rzzf changed the title refactor(components): [image,image-viewer] use type-based definitions refactor(components): [image/image-viewer] use type-based definitions Jan 18, 2026
@rzzf rzzf merged commit bb1813b into element-plus:dev Jan 18, 2026
25 of 26 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 18, 2026

@snowbitx Thanks for your contribution! ❤️

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 18, 2026

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

@element-bot element-bot mentioned this pull request Jan 30, 2026
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@btea btea btea approved these changes

@rzzf rzzf rzzf approved these changes

Assignees

@snowbitx snowbitx

Labels

Contribution::Community Needs Review

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@snowbitx @btea @rzzf