diff --git a/docs/app/components/content/examples/context-menu/ContextMenuCheckboxItemsExample.vue b/docs/app/components/content/examples/context-menu/ContextMenuCheckboxItemsExample.vue new file mode 100644 index 00000000..ea6c558c --- /dev/null +++ b/docs/app/components/content/examples/context-menu/ContextMenuCheckboxItemsExample.vue @@ -0,0 +1,40 @@ + + + diff --git a/docs/app/components/content/examples/dropdown-menu/DropdownMenuCheckboxItemsExample.vue b/docs/app/components/content/examples/dropdown-menu/DropdownMenuCheckboxItemsExample.vue new file mode 100644 index 00000000..fe9b2f40 --- /dev/null +++ b/docs/app/components/content/examples/dropdown-menu/DropdownMenuCheckboxItemsExample.vue @@ -0,0 +1,46 @@ + + + diff --git a/docs/content/3.components/context-menu.md b/docs/content/3.components/context-menu.md index b71a06bc..eb8ea2df 100644 --- a/docs/content/3.components/context-menu.md +++ b/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. diff --git a/docs/content/3.components/dropdown-menu.md b/docs/content/3.components/dropdown-menu.md index 7a79e54b..268f7123 100644 --- a/docs/content/3.components/dropdown-menu.md +++ b/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. diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue index eaddcfbd..7ec7bbbd 100644 --- a/src/runtime/components/ContextMenu.vue +++ b/src/runtime/components/ContextMenu.vue @@ -1,7 +1,7 @@