Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

breakpointsBase missing Vue prop #7607

Labels
t0ggles Linked to the t0ggles task Vue

Comments

@antoinematyja
Copy link

Check that this is really a bug

  • I confirm

Reproduction link

https://codesandbox.io/p/devbox/swiper-vue-responsive-breakpoints-forked-4hxz99?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clyec2qcu00083b6r1hog7vd9%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clyec2qcu00023b6r6z484t08%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clyec2qcu00053b6r85tf249l%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clyec2qcu00073b6rgzwd17wk%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B54.431703297464246%252C45.568296702535754%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clyec2qcu00023b6r6z484t08%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyec2qct00013b6r6pubmj4q%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%257D%255D%252C%2522id%2522%253A%2522clyec2qcu00023b6r6z484t08%2522%252C%2522activeTabId%2522%253A%2522clyec2qct00013b6r6pubmj4q%2522%257D%252C%2522clyec2qcu00073b6rgzwd17wk%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyec2qcu00063b6rexpyae27%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%2522%257D%255D%252C%2522id%2522%253A%2522clyec2qcu00073b6rgzwd17wk%2522%252C%2522activeTabId%2522%253A%2522clyec2qcu00063b6rexpyae27%2522%257D%252C%2522clyec2qcu00053b6r85tf249l%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyec2qcu00033b6ric89s3en%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522id%2522%253A%2522clyec2qcu00043b6r1emegopi%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clyebyns2000hdmfe0a5sejpt%2522%257D%255D%252C%2522id%2522%253A%2522clyec2qcu00053b6r85tf249l%2522%252C%2522activeTabId%2522%253A%2522clyec2qcu00033b6ric89s3en%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Bug description

The param breakpointsBase was introduced quite recently and was added to React/Vue libraries in 10.3.0 with these commits:
0eb4122
6800dbb

However the Vue commit adds an emit value when it should have added a prop.
A prop breakpoints: { type: String, default: undefined }, should have been added at line 53.

Without this prop, setting breakpointsBase="container" on the Swiper component does nothing (breakpoints still rely on window width).

Expected Behavior

The swiper breakpoints should rely on container width

Actual Behavior

The swiper breakpoints rely on window width

Swiper version

11.1.4

Platform/Target and Browser Versions

macOS Chrome 126

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR
@nolimits4web
Copy link
Owner

t0ggles-create swiper

Copy link

t0ggles bot commented Jul 9, 2024

Task nolimits4web/SWIPER-146 was created

t0ggles task SWIPER-146

@t0ggles t0ggles bot added the t0ggles Linked to the t0ggles task label Jul 9, 2024
Copy link

t0ggles bot commented Jul 15, 2024

Task nolimits4web/SWIPER-146 status changed to Done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment