Merge pull request #461 from ismail9k/validate-itemsToShow

Validate itemsToShow configuration

Author: ismail9k

docs/config.md

@@ -5,7 +5,7 @@
 | Prop                   | Default                          | Description                                                                                                                                                                           |
 | ---------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `enabled`              | true                             | Controlled weather the carousel is enabled or disabled. <Badge text="0.8.0"/>                                                                                                         |
-| `itemsToShow`          | 1                                | Count of items to showed per view (can be a fraction).                                                                                                                                |
+| `itemsToShow`          | 1                                | Count of items to showed per view (can be a fraction). Must be between 1 and the total number of slides. If set to a value less than 1, it defaults to 1. If set to a value greater than the total number of slides, it defaults to the total number of slides.                                                                                                                               |
 | `itemsToScroll`        | 1                                | Number of slides to be scrolled                                                                                                                                                       |
 | `wrapAround`           | false                            | Enable infinite scrolling mode.                                                                                                                                                       |
 | `snapAlign`            | 'center'                         | Controls the carousel position alignment, can be 'start', 'end', 'center-[odd\|even]'                                                                                                 |

src/components/Carousel/Carousel.ts

@@ -188,6 +188,13 @@ export const Carousel = defineComponent({
           min: minSlideIndex.value,
         })
       }
+
+      // Validate itemsToShow
+      config.itemsToShow = getNumberInRange({
+        val: config.itemsToShow,
+        max: slidesCount.value,
+        min: 1,
+      })
     }
 
     const ignoreAnimations = computed<false | string[]>(() => {

tests/integration/carousel.spec.ts

@@ -104,6 +104,18 @@ describe('Carousel.ts', () => {
     await triggerKeyEvent('ArrowLeft')
     expect(wrapper.props('modelValue')).toBe(1)
   })
+
+  it('Should default itemsToShow to 1 if less than 1', async () => {
+    await wrapper.setProps({ itemsToShow: 0 })
+    const slides = wrapper.findAll('.carousel__slide--visible')
+    expect(slides.length).toBe(1)
+  })
+
+  it('Should default itemsToShow to slidesCount if greater than slidesCount', async () => {
+    await wrapper.setProps({ itemsToShow: 10 })
+    const slides = wrapper.findAll('.carousel__slide--visible')
+    expect(slides.length).toBe(5)
+  })
 })
 
 describe('Slotted Carousel.ts', () => {