[UCarousel] inside [UModal] = incorrect (negative) pages value in indicators slot

Gringo675 commented 5 months ago

Environment

Operating System: Windows_NT
Node Version: v20.12.0
Nuxt Version: 3.11.1
CLI Version: 3.11.1
Nitro Version: 2.9.5
Package Manager: npm@10.5.0
Builder: -
User Config: app, modules, routeRules, imports, components, runtimeConfig, colorMode
Runtime Modules: @nuxt/ui@2.15.0
Build Modules: -

Version

2.13.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-qyflse?file=app.vue

Please open preview in new tab and wait till the error appears.

Description

Code from Carousel.vue:

    const pages = computed(() => {
      if (!itemWidth.value) {
        return 0
      }

      return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1
    })

Sometimes, when the carousel dimensions change, we may get the wrong pages value (when carouselWidth.value and itemWidth.value changes handled unsimultaniously, as I get it). In most cases this is not very bad, because after a moment the value will return to the correct one. But if you place the carousel in a modal, this code may produce a negative number, which will lead to a fatal error in the renderList vue function. The solution is simple, just check the result for a negative number:

return Math.max(props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1, 0)

Additional context

No response

Logs

No response

sandros94 commented 5 months ago

This should have been fixed with #1619 and can be checked with @nuxt/ui-edge@2.15.1-28538566.b62cd79. Feel free to reopen if I'm mistaken.

P.S.: great reproduction ❤️

Gringo675 commented 5 months ago

No, #1619 don't fix this bug.

As I said, the solution is simple, just check the result for a negative number in pages computed function:

return Math.max(props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1, 0)

nuxt / ui