refactor(@dpc-sdp/ripple-ui-core): ♻️ use a single collector index

dpc-sdp · Sep 17, 2024 · 621ea1a · 621ea1a
1 parent 220219c
commit 621ea1a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 24 deletions.
diff --git a/packages/ripple-ui-core/src/components/accordion/RplAccordion.vue b/packages/ripple-ui-core/src/components/accordion/RplAccordion.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, ref, type Ref, provide, useSlots } from 'vue'
-import RplContent from '../content/RplContent.vue'
 import { useExpandableState } from '../../composables/useExpandableState'
 import {
   useRippleEvent,
@@ -45,10 +44,10 @@ const slots = useSlots()
 
 const itemise = (inputId: string): string => `accordion-${props.id}-${inputId}`
 
-const initialActiveIndexes: Ref<string[]> = ref([])
+const sharedActiveItems: Ref<string[]> = ref([])
 
 // Prop based items
-initialActiveIndexes.value.push(
+sharedActiveItems.value.push(
   ...props.items.reduce(
     (result: string[], current: AccordionItem): string[] => {
       if (current.active) {
@@ -62,35 +61,32 @@ initialActiveIndexes.value.push(
 )
 
 // Slot based items
-initialActiveIndexes.value.push(
+sharedActiveItems.value.push(
   ...(slots.default
     ? slots.default().reduce((result: string[], current): string[] => {
-        if (current.props.active) {
+        if (current.props?.active) {
           return [...result, itemise(current.props.id)]
         }
         return result
       }, [])
     : [])
 )
 
-const sharedActiveItems = ref(initialActiveIndexes.value)
-
 const itemLength = computed(() =>
   props.items.length > 0
     ? props.items.length
     : (slots?.default?.()?.length as number) || 0
 )
 
 const { isItemExpanded, isAllExpanded, toggleItem } = useExpandableState(
-  initialActiveIndexes.value,
+  [],
   itemLength.value,
   sharedActiveItems
 )
 
 provide('activeItems', {
-  initialActiveIndexes: initialActiveIndexes,
-  totalItems: itemLength.value,
   sharedActiveItems: sharedActiveItems,
+  totalItems: itemLength.value,
   parentId: props.id
 })
 
@@ -114,8 +110,8 @@ const toggleAll = () => {
       }
     })
     slots.default?.().forEach((item) => {
-      if (!isItemExpanded(itemise(item.props.id))) {
-        toggleItem(itemise(item.props.id))
+      if (!isItemExpanded(itemise(item.props!.id))) {
+        toggleItem(itemise(item.props!.id))
       }
     })
   }
@@ -129,8 +125,8 @@ const toggleAll = () => {
       }
     })
     slots.default?.().forEach((item) => {
-      if (isItemExpanded(itemise(item.props.id))) {
-        toggleItem(itemise(item.props.id))
+      if (isItemExpanded(itemise(item.props!.id))) {
+        toggleItem(itemise(item.props!.id))
       }
     })
   }

diff --git a/packages/ripple-ui-core/src/components/accordion/RplAccordionItem.vue b/packages/ripple-ui-core/src/components/accordion/RplAccordionItem.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, ref, computed, useSlots } from 'vue'
+import { inject, ref, computed, useSlots, type Ref } from 'vue'
 import RplIcon from '../icon/RplIcon.vue'
 import RplExpandable from '../expandable/RplExpandable.vue'
 import { useExpandableState } from '../../composables/useExpandableState'
@@ -40,18 +40,16 @@ const { emitRplEvent } = useRippleEvent('rpl-accordion', emit)
 
 const slots = useSlots()
 
-const { initialActiveIndexes, totalItems, sharedActiveItems, parentId } =
-  inject('activeItems', {
-    initialActiveIndexes: [],
-    totalItems: 0,
-    sharedActiveItems: ref<string[]>(),
-    parentId: ''
-  })
+const { sharedActiveItems, totalItems, parentId } = inject('activeItems', {
+  sharedActiveItems: ref<string[]>(),
+  totalItems: 0,
+  parentId: ''
+})
 
 const { isItemExpanded, toggleItem } = useExpandableState(
-  initialActiveIndexes,
+  [],
   totalItems,
-  sharedActiveItems
+  sharedActiveItems as Ref<string[]>
 )
 
 const toggleSingle = () => {