Fix index update

ismail9k · Dec 8, 2024 · 64db019 · 64db019
1 parent 355869e
commit 64db019
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/components/Carousel/Carousel.ts b/src/components/Carousel/Carousel.ts
@@ -75,7 +75,10 @@ export const Carousel = defineComponent({
     // current active config
     const config = reactive<CarouselConfig>({ ...fallbackConfig.value })
 
-    watch(fallbackConfig, () => Object.assign(config, fallbackConfig.value))
+    watch(fallbackConfig, () => {
+      Object.assign(config, fallbackConfig.value)
+      updateBreakpointsConfig()
+    })
 
     // slides
     const currentSlideIndex = ref(props.modelValue ?? 0)

diff --git a/src/components/Slide/Slide.ts b/src/components/Slide/Slide.ts
@@ -13,6 +13,7 @@ import {
   onMounted,
   VNode,
   onUpdated,
+  watch,
 } from 'vue'
 
 import { injectCarousel } from '@/injectSymbols'
@@ -44,6 +45,7 @@ export const Slide = defineComponent({
     }
 
     const index = ref(props.index)
+    watch(() => props.index, (i) => index.value = i)
 
     const isActive: ComputedRef<boolean> = computed(
       () => index.value === carousel.currentSlide

diff --git a/tests/integration/__snapshots__/carousel.spec.ts.snap b/tests/integration/__snapshots__/carousel.spec.ts.snap
@@ -13,9 +13,9 @@ exports[`SSR Carousel > renders server side properly 1`] = `
         <li style="width: 50%;" class="carousel__slide carousel__slide--visible carousel__slide--next" id="v-2">3 <input type="text"></li>
         <li style="width: 50%;" class="carousel__slide" id="v-3">4 <input type="text"></li>
         <li style="width: 50%;" class="carousel__slide" id="v-4">5 <input type="text"></li>
-        <li style="width: 50%;" class="carousel__slide carousel__slide--clone carousel__slide--visible carousel__slide--prev" aria-hidden="true">1 <input type="text" tabindex="-1"></li>
-        <li style="width: 50%;" class="carousel__slide carousel__slide--clone carousel__slide--visible carousel__slide--active" aria-hidden="true">2 <input type="text" tabindex="-1"></li>
-        <li style="width: 50%;" class="carousel__slide carousel__slide--clone carousel__slide--visible carousel__slide--next" aria-hidden="true">3 <input type="text" tabindex="-1"></li>
+        <li style="width: 50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">1 <input type="text" tabindex="-1"></li>
+        <li style="width: 50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">2 <input type="text" tabindex="-1"></li>
+        <li style="width: 50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">3 <input type="text" tabindex="-1"></li>
       </ol>
     </div><button type="button" class="carousel__prev" aria-label="Navigate to previous slide" title="Navigate to previous slide"><svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing to the left">
         <title>Arrow pointing to the left</title>
@@ -50,8 +50,8 @@ exports[`SSR Carousel > renders slotted server side properly 1`] = `
         <li style="width: 100%;" class="carousel__slide" id="v-2">3</li>
         <li style="width: 100%;" class="carousel__slide" id="v-3">4</li>
         <li style="width: 100%;" class="carousel__slide" id="v-4">5</li>
-        <li style="width: 100%;" class="carousel__slide carousel__slide--clone carousel__slide--visible carousel__slide--active" aria-hidden="true">1</li>
-        <li style="width: 100%;" class="carousel__slide carousel__slide--clone carousel__slide--next" aria-hidden="true">2</li>
+        <li style="width: 100%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">1</li>
+        <li style="width: 100%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">2</li>
       </ol>
     </div>
     <div class="carousel__liveregion carousel__sr-only" aria-live="polite" aria-atomic="true">Item 1 of 5</div>
@@ -78,7 +78,7 @@ exports[`Wrap around Carousel.ts > renders wrapAround correctly 1`] = `
       <li style="width: 33.333333333333336%;" class="carousel__slide" id="v-6">7 <input type="text"></li>
       <li style="width: 33.333333333333336%;" class="carousel__slide carousel__slide--visible carousel__slide--prev" id="v-7">8 <input type="text"></li>
       <li style="width: 33.333333333333336%;" class="carousel__slide carousel__slide--visible carousel__slide--active" id="v-8">9 <input type="text"></li>
-      <li style="width: 33.333333333333336%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">1 <input type="text" tabindex="-1"></li>
+      <li style="width: 33.333333333333336%;" class="carousel__slide carousel__slide--clone carousel__slide--visible carousel__slide--next" aria-hidden="true">1 <input type="text" tabindex="-1"></li>
       <li style="width: 33.333333333333336%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">2 <input type="text" tabindex="-1"></li>
       <li style="width: 33.333333333333336%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">3 <input type="text" tabindex="-1"></li>
       <li style="width: 33.333333333333336%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">4 <input type="text" tabindex="-1"></li>