feat(ContextMenu/DropdownMenu): handle checkbox items type

Resolves #2144

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const showSidebar = ref(true)
+const showToolbar = ref(false)
+
+const items = computed(() => [{
+  label: 'View',
+  type: 'label' as const
+}, {
+  type: 'separator' as const
+}, {
+  label: 'Show Sidebar',
+  type: 'checkbox' as const,
+  checked: showSidebar.value,
+  onUpdateChecked(checked: boolean) {
+    showSidebar.value = checked
+  },
+  onSelect(e?: Event) {
+    e?.preventDefault()
+  }
+}, {
+  label: 'Show Toolbar',
+  type: 'checkbox' as const,
+  checked: showToolbar.value,
+  onUpdateChecked(checked: boolean) {
+    showToolbar.value = checked
+  }
+}, {
+  label: 'Collapse Pinned Tabs',
+  type: 'checkbox' as const,
+  disabled: true
+}])
+</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/DropdownMenuCheckboxItemsExample.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const showBookmarks = ref(true)
+const showHistory = ref(false)
+const showDownloads = ref(false)
+
+const items = computed(() => [{
+  label: 'Interface',
+  icon: 'i-heroicons-window',
+  type: 'label' as const
+}, {
+  type: 'separator' as const
+}, {
+  label: 'Show Bookmarks',
+  icon: 'i-heroicons-bookmark',
+  type: 'checkbox' as const,
+  checked: showBookmarks.value,
+  onUpdateChecked(checked: boolean) {
+    showBookmarks.value = checked
+  },
+  onSelect(e?: Event) {
+    e?.preventDefault()
+  }
+}, {
+  label: 'Show History',
+  icon: 'i-heroicons-clock',
+  type: 'checkbox' as const,
+  checked: showHistory.value,
+  onUpdateChecked(checked: boolean) {
+    showHistory.value = checked
+  }
+}, {
+  label: 'Show Downloads',
+  icon: 'i-heroicons-arrow-down-on-square',
+  type: 'checkbox' as const,
+  checked: showDownloads.value,
+  onUpdateChecked(checked: boolean) {
+    showDownloads.value = checked
+  }
+}])
+</script>
+
+<template>
+  <UDropdownMenu :items="items" :content="{ align: 'start' }" class="w-48">
+    <UButton label="Open" color="neutral" variant="outline" icon="i-heroicons-bars-3" />
+  </UDropdownMenu>
+</template>

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

@@ -22,7 +22,7 @@ Use the `items` prop as an array of objects with the following properties:
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `kbds?: string[] | KbdProps[]`{lang="ts-type"}
-- `type?: "link" | "label" | "separator"`{lang="ts-type"}
+- [`type?: "link" | "label" | "separator" | "checkbox"`{lang="ts-type"}](#with-checkbox-items)
 - `disabled?: boolean`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
@@ -174,6 +174,21 @@ slots:
 
 ## Examples
 
+### With checkbox items
+
+You can use the `type` property with `checkbox` and use the `checked` / `onUpdateChecked` properties to control the checked state of the item.
+
+::component-example
+---
+collapse: true
+name: 'context-menu-checkbox-items-example'
+---
+::
+
+::note
+To ensure reactivity for the `checked` state of items, it's recommended to wrap your `items` array inside a `computed`.
+::
+
 ### With custom slot
 
 Use the `slot` property to customize a specific item.

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

@@ -22,7 +22,7 @@ Use the `items` prop as an array of objects with the following properties:
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `kbds?: string[] | KbdProps[]`{lang="ts-type"}
-- `type?: "link" | "label" | "separator"`{lang="ts-type"}
+- [`type?: "link" | "label" | "separator" | "checkbox"`{lang="ts-type"}](#with-checkbox-items)
 - `disabled?: boolean`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
@@ -256,6 +256,21 @@ slots:
 
 ## Examples
 
+### With checkbox items
+
+You can use the `type` property with `checkbox` and use the `checked` / `onUpdateChecked` properties to control the checked state of the item.
+
+::component-example
+---
+collapse: true
+name: 'dropdown-menu-checkbox-items-example'
+---
+::
+
+::note
+To ensure reactivity for the `checked` state of items, it's recommended to wrap your `items` array inside a `computed`.
+::
+
 ### Control open state
 
 You can control the open state by using the `default-open` prop or the `v-model:open` directive.