Simple actions menu with AList

I want to build a simple actions menu, but using AList is not relevant as we can’t handle click on each list items. How to do that ? Here is my code :

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

const items = [
  { title: 'Send' },
  { title: 'Edit' },
  { title: 'Delete' },
]

const selected = ref(0)
watch(selected, () => {
  console.log(selected.value)
  // We should handle value with item index ?
})
</script>

<template>
  <ABtn variant="text" class="!text-gray" icon="i-bi-three-dots-vertical" icon-only>
    <AMenu
      trigger="hover"
      placement="bottom-end"
    >
      <AList
        v-model="selected"
        :items="items"
        class="[--a-list-gap:0.25rem]"
      />
    </AMenu>
  </ABtn>
</template>

Also, item 0 is selected at mount time. I don’t want that. If I use const selected = ref(), hovering item don’t trigger background overlay.

[ManUtopiK]

Awesome ! You made a lot of works 🚀 It simplify a lot the process. So, I’ve been rewriting my simple menu with this :

<script lang="ts" setup>
function onSend() {
  console.log('Sended')
}
function onEdit() {
  console.log('Edited')
}
function onDelete() {
  console.log('Deleted')
}
</script>

<template>
  <ABtn>
    <AMenu>
      <AList>
        <AListItem title="Send" /><!-- No @click event : No pointer cursor and item highlight = good -->
        <AListItem title="Send" @click="onSend" /><!-- No pointer cursor and item highlight = bad -->
        <AListItem title="Edit" class="states:10 cursor-pointer" @click="onEdit" /><!-- Looks good :) -->
        <AListItem title="Delete" value="1" @click="onDelete" /><!-- Looks good :) -->
      </AList>
    </AMenu>

    Open Menu
  </ABtn>
</template>

I can get it worked, but we must add custom class or an arbitrary value attribute to display the list item with the cursor pointer and to be highlighted on hover. It’s not very intuitive…

[ManUtopiK]

Yes, everything seems good to me now !

This works as expected:

<AMenu>
  <AList>
    <AListItem title="Send" /><!-- No @click event : No pointer cursor and item highlight = good -->
    <AListItem title="Send" @click="onSend" /><!-- Good now :) -->
  </AList>
</AMenu>