Merge pull request #430 from ismail9k/383-hot-reloading-not-working

fix(carousel): dynamically recalculate slots in render function
ismail9k · Nov 27, 2024 · 8a9e2e1 · 8a9e2e1
2 parents 10f4a19 + 5711457
commit 8a9e2e1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/components/Carousel.ts b/src/components/Carousel.ts
@@ -18,7 +18,7 @@ import {
 
 import { DEFAULT_CONFIG } from '@/partials/defaults'
 import { carouselProps } from '@/partials/props'
-import { CarouselConfig, CarouselExposed, CarouselNav } from '@/types'
+import { CarouselConfig, CarouselData, CarouselExposed, CarouselNav } from '@/types'
 import {
   debounce,
   throttle,
@@ -411,15 +411,15 @@ export default defineComponent({
     // Init carousel
     emit('before-init')
 
-    const data = {
+    const data = reactive<CarouselData>({
       config,
       slidesCount,
       slideSize,
       currentSlide: currentSlideIndex,
       maxSlide: maxSlideIndex,
       minSlide: minSlideIndex,
       middleSlide: middleSlideIndex,
-    }
+    })
 
     expose<CarouselExposed>({
       updateBreakpointsConfig,
@@ -462,11 +462,10 @@ export default defineComponent({
       return `translate${translateAxis}(${dragOffset - totalOffset}px)`
     })
 
-    const slotSlides = slots.default || slots.slides
-    const slotAddons = slots.addons
-    const slotsProps = reactive(data)
-
     return () => {
+      const slotSlides = slots.default || slots.slides
+      const slotAddons = slots.addons
+
       if (!config.enabled) {
         return h(
           'section',
@@ -478,8 +477,9 @@ export default defineComponent({
         )
       }
 
-      const slidesElements = getSlidesVNodes(slotSlides?.(slotsProps))
-      const addonsElements = slotAddons?.(slotsProps) || []
+      const slidesElements = getSlidesVNodes(slotSlides?.(data))
+      const addonsElements = slotAddons?.(data) || []
+
       slidesElements.forEach((el: typeof SlideComponent, index: number) => {
         if (el.props) {
           el.props.index = index

diff --git a/src/types/carousel.ts b/src/types/carousel.ts
@@ -1,4 +1,4 @@
-import { Ref } from 'vue'
+import { Reactive, Ref } from 'vue'
 
 import {
   BREAKPOINT_MODE_OPTIONS,
@@ -60,5 +60,5 @@ export interface CarouselMethods extends CarouselNav {
 }
 export interface CarouselExposed extends CarouselMethods {
   nav: CarouselNav
-  data: CarouselData
+  data: Reactive<CarouselData>
 }