Simple actions menu with AList about anu

[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...

[jd-solanki]

With the latest changes in this commit you can now use below code snippet to achieve the desired result:

<script lang="ts" setup>
const items = [
  { title: 'Send' },
  { title: 'Edit' },
  { title: 'Delete' },
]

const triggerAction = (index: number) => {
  alert(`You Clicked: "${items[index].title}"`)
}
</script>

<template>
  <div class="cards-demo-container">
    <ABtn
      variant="text"
      class="!text-gray"
      icon="i-bx-home"
      icon-only
    >
      <AMenu
        trigger="hover"
        placement="bottom-end"
      >
        <AList
          :model-value="null"
          :items="items"
          class="[--a-list-gap:0.25rem]"
          @update:modelValue="triggerAction"
        />
      </AMenu>
    </ABtn>
  </div>
</template>

[jd-solanki]

@ManUtopiK I hope this is resolved now. Can we close this?

[jd-solanki]

Hey, we merged the changes. I hope this will resolve the issue now.

[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>