feat(list): allow using explicit color for the list items

related: #87

Author: jd-solanki

docs/components/ui/misc/UIMiscColoredActionsMenu.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+const items = [
+  {
+    icon: 'i-bx-send',
+    text: 'Send',
+  },
+  {
+    icon: 'i-bx-edit',
+    text: 'Edit',
+  },
+  {
+    icon: 'i-bx-trash',
+    text: 'Delete',
+    color: 'danger', // [!code hl]
+  },
+]
+</script>
+
+<template>
+  <div class="max-w-550px">
+    <ABtn
+      icon="i-bx-file"
+      append-icon="i-bx-chevron-down"
+    >
+      Invoice
+      <AMenu>
+        <!-- ℹ️ `model-value="null"` will be all list items clickable -->
+        <AList
+          :model-value="null"
+          :items="items"
+        />
+      </AMenu>
+    </ABtn>
+  </div>
+</template>

docs/components/ui/user/UIUserUserMenu.vue

@@ -31,6 +31,7 @@ const items = [
       class="cursor-pointer"
     >
     <AMenu>
+      <!-- ℹ️ `model-value="null"` will be all list items clickable -->
       <AList
         :model-value="null"
         :items="items"

docs/ui/misc.md

@@ -18,3 +18,13 @@
 :::
 
 ::::
+
+::::card Colored Actions Menu {bordered}
+
+<br>
+
+:::code UIMiscColoredActionsMenu
+<<< @/components/ui/misc/UIMiscColoredActionsMenu.vue
+:::
+
+::::

packages/anu-vue/src/components/list-item/AListItem.vue

@@ -31,7 +31,7 @@ else
 
 // useLayer
 const { styles, classes } = getLayerClasses(
-  computed(() => props.isActive ? (props.color || 'primary') : undefined),
+  computed(() => (props.color ?? props.isActive) ? (props.color || 'primary') : undefined),
   computed(() => props.isActive ? (props.variant || 'light') : 'text'),
   toRef(props, 'states'),
   { statesClass: 'states:10' },
@@ -59,7 +59,7 @@ const { styles, classes } = getLayerClasses(
       >
         <i
           v-if="props.icon && !props.iconAppend"
-          class="text-xl"
+          class="text-lg"
           :class="props.icon"
           @click="$emit('click:icon')"
         />

packages/anu-vue/src/components/list/AList.vue

@@ -64,7 +64,7 @@ function handleListItemClick(item: AListPropItems[number]) {
         v-bind="typeof item === 'string' ? {} : item"
         :avatar-append="props.avatarAppend"
         :icon-append="props.iconAppend"
-        :color="props.color"
+        :color="typeof item === 'object' ? item.color : props.color"
         :variant="props.variant"
         :states="props.states"
         :is-active="options[index]?.isSelected as unknown as boolean"