modtool/src/components/VCollaps.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const active=ref(false);
const props=defineProps({
  selected: Boolean,
  name: String
});
const emit = defineEmits(['collapse-open']);

onMounted(() => {
    active.value = props.selected
    if (active.value) {
      emit('collapse-open')
    }
});

function toggle () {
    active.value=!active.value;
    if (active.value) {
        emit('collapse-open')
    }
}
</script>

<template>
  <div class="card" >
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center" @click.prevent="toggle">
        <h5 class="card-title">{{ props.name }}</h5>
        <div class="collapse-header" :class="{ 'is-active': active }"></div>
      </div>
      <Transition name="fade">
        <div class="collapse-content" v-show="active">
          <div class="collapse-content-box">
            <slot></slot>
          </div>
        </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped>

.card-title {
    display: flex;
}
.collapse-header {
    display: flex;
    content: url('../assets/arrow-down.svg');
    transform: rotate(-90deg);
}
.is-active  {
    transform: rotate(0deg);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0
}
</style>