AccordionItem.vue - Script: getExpandCondition

AccordionItem.vue

<script lang="ts">
... // content hidden

export default defineComponent({
  name: "AccordionItem",
  
  ... // content hidden
  
  setup(props: Props) {
    const id = ref(useId());
    const isExpanded = ref(props.defaultIsOpen || false);
    const allowMultiple = inject("allowMultiple") as boolean;
    const indices = inject("indices") as Indices;
    const expandedIndex = inject("expandedIndex") as ExpandedIndex;
    
    ... // content hidden

    const getExpandCondition = (
      arrIndex: string | Array<string>,
      itemIndex: string
    ) => {
      if (Array.isArray(arrIndex)) {
        return arrIndex.includes(itemIndex);
      }

      return arrIndex === itemIndex;
    };

    watch(
      () => expandedIndex.value,
      () => {
        isExpanded.value = getExpandCondition(expandedIndex.value, id.value);
      }
    );


    onMounted(watchExpand);
    onUpdated(watchExpand);

    return { isExpanded, toggleContent };
  },
});
</script>