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

[Gringo675]

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: [email protected]
• Builder: -
• User Config: app, modules, routeRules, imports, components, runtimeConfig, colorMode
• Runtime Modules: @nuxt/[email protected]
• 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]

This should have been fixed with #1619 and can be checked with @nuxt/[email protected]. Feel free to reopen if I'm mistaken.

P.S.: great reproduction ❤️

[Gringo675]

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)