-
Notifications
You must be signed in to change notification settings - Fork 316
Comments
feat: allow switching between max-width and min-width#2127
Open
DamianGlowala wants to merge 4 commits intomain from
Open
feat: allow switching between max-width and min-width #2127DamianGlowala wants to merge 4 commits intomain from
max-width and min-width #2127DamianGlowala wants to merge 4 commits intomain from
Conversation
@DamianGlowala
DamianGlowala
requested a review
from danielroe
as a code owner
February 19, 2026 19:11
Deploying nuxt-image with Cloudflare Pages Cloudflare Pages
Latest commit:
23744f4
Status: ✅ Deploy successful!
Preview URL:
https://c98105b6.nuxt-image.pages.dev
Branch Preview URL:
https://feat-responsive-breakpoints.nuxt-image.pages.dev
📝 WalkthroughWalkthroughAdds a new responsiveBreakpoints option (values: 'max-width' | 'min-width') to the Nuxt Image module and types, with default 'max-width' and a per-component prop. Passes the option through NuxtImg/NuxtPicture to the runtime sizing logic, updates getSizes/finaliseSizeVariants to generate media queries according to the chosen strategy, and exposes the prop in BaseImageProps. Documentation pages were updated with configuration and prop examples. Tests and snapshots were updated/duplicated to cover both breakpoint modes. Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@test/nuxt/picture.test.ts`:
- Line 359: Add the missing trailing comma after the object property
responsiveBreakpoints: 'min-width' in the test case so the object literal
conforms to the linter rules; locate the object containing the
responsiveBreakpoints property in picture.test.ts (search for
"responsiveBreakpoints" or the test that configures picture component) and
append a comma after 'min-width'.
- Around line 330-338: The test attempts to delete a non-configurable property
nuxtApp.$img and also includes a redundant afterEach; remove the delete
nuxtApp.$img line from the beforeEach and delete the entire afterEach block,
leaving only deletion of nuxtApp._img in beforeEach so useImage() can lazily
recreate $img from _img without causing a TypeError and to avoid duplicate
teardown.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@test/nuxt/picture.test.ts`:
- Around line 330-338: Remove the unsafe deletion of nuxtApp.$img and the
redundant afterEach block: only delete nuxtApp._img in the beforeEach because
useImage() will lazily recreate $img from _img; remove the entire afterEach(...)
that duplicates the beforeEach cleanup and also remove the now-unused afterEach
import at the top of the test file; leave any deletion of nuxtApp.$img out to
avoid TypeError for the non-configurable getter created by
nuxtApp.provide('img', ...).
codecov-commenter
commented
Feb 19, 2026
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@ ## main #2127 +/- ## ======================================== + Coverage 6.83% 6.86% +0.02% ======================================== Files 80 80 Lines 3729 3742 +13 Branches 142 142 ======================================== + Hits 255 257 +2 - Misses 3424 3435 +11 Partials 50 50 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
🔗 Linked issue
resolves #1211
📚 Description
Adds
responsiveBreakpointsoption to choose betweenmax-width(default) andmin-widthfor generatingsizesprop. This option can be configured both for a module and for a given component.Naming can be changed if anyone suggests a better suited alternative.