feat(DropdownMenu/ContextMenu): handle color field in items (#2510)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app/components/content/examples/context-menu/ContextMenuColorItemsExample.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const items = [
+  [
+    {
+      label: 'View',
+      icon: 'i-heroicons-eye'
+    },
+    {
+      label: 'Copy',
+      icon: 'i-heroicons-document-duplicate'
+    },
+    {
+      label: 'Edit',
+      icon: 'i-heroicons-pencil'
+    }
+  ],
+  [
+    {
+      label: 'Delete',
+      color: 'error' as const,
+      icon: 'i-heroicons-trash'
+    }
+  ]
+]
+</script>
+
+<template>
+  <UContextMenu :items="items" class="w-48">
+    <div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
+      Right click here
+    </div>
+  </UContextMenu>
+</template>

docs/app/components/content/examples/dropdown-menu/DropdownMenuColorItemsExample.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const items = [
+  [
+    {
+      label: 'View',
+      icon: 'i-heroicons-eye'
+    },
+    {
+      label: 'Copy',
+      icon: 'i-heroicons-document-duplicate'
+    },
+    {
+      label: 'Edit',
+      icon: 'i-heroicons-pencil'
+    }
+  ],
+  [
+    {
+      label: 'Delete',
+      color: 'error' as const,
+      icon: 'i-heroicons-trash'
+    }
+  ]
+]
+</script>
+
+<template>
+  <UDropdownMenu :items="items" class="w-48">
+    <UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
+
+    <template #profile-trailing>
+      <UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
+    </template>
+  </UDropdownMenu>
+</template>

docs/content/3.components/context-menu.md

@@ -20,9 +20,11 @@ Use the `items` prop as an array of objects with the following properties:
 
 - `label?: string`{lang="ts-type"}
 - `icon?: string`{lang="ts-type"}
+- `color?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `kbds?: string[] | KbdProps[]`{lang="ts-type"}
 - [`type?: "link" | "label" | "separator" | "checkbox"`{lang="ts-type"}](#with-checkbox-items)
+- [`color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}](#with-color-items)
 - [`checked?: boolean`{lang="ts-type"}](#with-checkbox-items)
 - `disabled?: boolean`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
@@ -191,6 +193,16 @@ name: 'context-menu-checkbox-items-example'
 To ensure reactivity for the `checked` state of items, it's recommended to wrap your `items` array inside a `computed`.
 ::
 
+### With color items
+
+You can use the `color` property to highlight certain items with a color.
+
+::component-example
+---
+name: 'context-menu-color-items-example'
+---
+::
+
 ### With custom slot
 
 Use the `slot` property to customize a specific item.

docs/content/3.components/dropdown-menu.md

@@ -20,9 +20,11 @@ Use the `items` prop as an array of objects with the following properties:
 
 - `label?: string`{lang="ts-type"}
 - `icon?: string`{lang="ts-type"}
+- `color?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `kbds?: string[] | KbdProps[]`{lang="ts-type"}
 - [`type?: "link" | "label" | "separator" | "checkbox"`{lang="ts-type"}](#with-checkbox-items)
+- [`color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}](#with-color-items)
 - [`checked?: boolean`{lang="ts-type"}](#with-checkbox-items)
 - `disabled?: boolean`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
@@ -273,6 +275,16 @@ name: 'dropdown-menu-checkbox-items-example'
 To ensure reactivity for the `checked` state of items, it's recommended to wrap your `items` array inside a `computed`.
 ::
 
+### With color items
+
+You can use the `color` property to highlight certain items with a color.
+
+::component-example
+---
+name: 'dropdown-menu-color-items-example'
+---
+::
+
 ### Control open state
 
 You can control the open state by using the `default-open` prop or the `v-model:open` directive.