AccordionItem.vue - script: watchExpand

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;

    const watchExpand = () => {
      if (allowMultiple) {
        let newIndices;

        if (isExpanded.value) {
          newIndices = [...indices.value, id.value];
        } else {
          newIndices = indices.value.filter(
            (itemIndex) => itemIndex !== id.value
          );
        }
        expandedIndex.value = newIndices;
      } else if (isExpanded.value) {
        expandedIndex.value = id.value;
      }
    };
    
    const toggleContent = () => {
      isExpanded.value = !isExpanded.value;
    };


    onMounted(watchExpand);
    onUpdated(watchExpand);
  },
});
</script>