fix(carousel): fix carousel don't update the indicator and items when data change(#1244)

* fix(carousel): add methods of remove item

* fix: if delete item is current item then go next

Co-authored-by: Ryan2128 <33176053+Ryan2128@users.noreply.github.com>

packages/carousel/src/carousel.ts

@@ -43,6 +43,7 @@ export interface InjectCarouselScope {
   type: string
   items: Ref<UnwrapRef<CarouselItem[]>>
   loop: boolean
-  updateItems: (item: CarouselItem) => void
+  addItem: (item: CarouselItem) => void
+  removeItem: (uid: number) => void
   setActiveItem: (index: number) => void
 }

packages/carousel/src/item.vue

@@ -29,6 +29,7 @@ import {
   computed,
   toRefs,
   getCurrentInstance,
+  onUnmounted,
 } from 'vue'
 import {
   autoprefixer,
@@ -158,8 +159,8 @@ export default defineComponent({
 
     // lifecycle
     onMounted(() => {
-      if (injectCarouselScope.updateItems) {
-        injectCarouselScope.updateItems({
+      if (injectCarouselScope.addItem) {
+        injectCarouselScope.addItem({
           uid: instance.uid,
           ...props,
           ...toRefs(data),
@@ -168,13 +169,17 @@ export default defineComponent({
       }
     })
 
+    onUnmounted(() => {
+      if (injectCarouselScope.removeItem) {
+        injectCarouselScope.removeItem(instance.uid)
+      }
+    })
+
     return {
       data,
-
       itemStyle,
       translateItem,
       type: injectCarouselScope.type,
-
       handleItemClick,
     }
   },

packages/carousel/src/main.vue

@@ -236,10 +236,18 @@ export default defineComponent({
       })
     }
 
-    function updateItems(item) {
+    function addItem(item) {
       items.value.push(item)
     }
 
+    function removeItem(uid) {
+      const index = items.value.findIndex(item => item.uid === uid)
+      if (index !== -1) {
+        items.value.splice(index, 1)
+        if(data.activeIndex === index) next()
+      }
+    }
+
     function itemInStage(item, index) {
       const length = items.value.length
       if (
@@ -358,7 +366,8 @@ export default defineComponent({
       type: props.type,
       items,
       loop: props.loop,
-      updateItems,
+      addItem,
+      removeItem,
       setActiveItem,
     })