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

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

playground/app/pages/components/context-menu.vue

@@ -86,6 +86,12 @@ const items = computed(() => [
   }]
 ])
 
+const itemsWithColor = computed(() => Object.keys(theme.variants.color).map(color => ({
+  color: (color as keyof typeof theme.variants.color),
+  icon: 'i-heroicons-swatch',
+  label: color
+})))
+
 const sizes = Object.keys(theme.variants.size)
 
 const size = ref('md' as const)
@@ -104,5 +110,11 @@ defineShortcuts(extractShortcuts(items.value))
         Right click here
       </div>
     </UContextMenu>
+
+    <UContextMenu :items="itemsWithColor" class="min-w-48" :size="size">
+      <div class="flex items-center justify-center rounded-md border border-dashed border-[var(--ui-border-accented)] text-sm aspect-video w-72">
+        Color right click here
+      </div>
+    </UContextMenu>
   </div>
 </template>

playground/app/pages/components/dropdown-menu.vue

@@ -122,6 +122,12 @@ const items = computed(() => [
   }]
 ])
 
+const itemsWithColor = computed(() => Object.keys(theme.variants.color).map(color => ({
+  color: (color as keyof typeof theme.variants.color),
+  icon: 'i-heroicons-swatch',
+  label: color
+})))
+
 const sizes = Object.keys(theme.variants.size)
 
 const size = ref('md' as const)
@@ -141,6 +147,14 @@ defineShortcuts(extractShortcuts(items.value))
           <UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
         </template>
       </UDropdownMenu>
+
+      <UDropdownMenu :items="itemsWithColor" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" class="min-w-48">
+        <UButton label="Color" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
+
+        <template #custom-trailing>
+          <UIcon name="i-heroicons-check-badge" class="shrink-0 size-5 text-[var(--ui-primary)]" />
+        </template>
+      </UDropdownMenu>
     </div>
   </div>
 </template>