Collapse item with AList

I want to build a collapsed items list. But item slot doesn’t work as expected. How to create a simple collapse with AList ? Here is the code :

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

const items = [{
  title: 'Apparence',
  subtitle: 'Apparence desc...',
},
{
  title: 'Network',
  subtitle: 'Network desc...',
}]
const selected = ref(new Set())
</script>

<template>
  <AList
    v-model="selected"
    :items="items"
    multi
    class="[--a-list-gap:0.25rem]"
  >
    <template #item="{ item, itemIndex }">
      <ATypography
        :title="[item.title, 'text-red']"
        :subtitle="item.subtitle"
      />
      <div v-if="selected.has(itemIndex)">I want to put collapsed content here, but this slot is not displayed ! Title isn't red.</div>
    </template>

    <template #append="{ itemIndex }">
      <div
        i-fa-chevron-right
        class="transition-transform text-gray hover:bg-opacity-0"
        :class="selected.has(itemIndex) && 'rotate-90'"
      />
    </template>
  </AList>
</template>

[ManUtopiK]

This ACollapse component has nothing to do with UI. You can use it multiple way. I’m not sure what you mean by decouple it from actual UI.

Here an example without UI.

<ACollapse>
  <template #trigger="{ value, toggle }">
    <div @click="toggle()">
      Toggle collapse
    </div>
  </template>

  <div>
    Collapsed content...
  </div>
</ACollapse>

Result :

With ABtn :

<ACollapse>
  <template #trigger="{ value, toggle }">
    <ABtn color="success" @click="toggle()">
      Toggle collapse
    </ABtn>
  </template>

  <div>
    Collapsed content...
  </div>
</ACollapse>

With AAvatar :

<ACollapse>
  <template #trigger="{ value, toggle }">
    <AAvatar
      content="A"
      @click="toggle()"
    />
  </template>

  <div>
    Collapsed content...
  </div>
</ACollapse>

And how I use it in my app :

[ManUtopiK]

That’s it ! Ok, I close this issue even if in its current state it is not possible to do collapsing with AList…