arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(ContextMenu/DropdownMenu): handle checkbox items type

Browse Source 
Resolves #2144
This commit is contained in:
Benjamin Canac
2024-10-15 17:06:17 +02:00
parent 0759e29c22
commit 8ef6e712ac
9 changed files with 451 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/runtime/components/DropdownMenu.vue
View File

@@ -1,7 +1,7 @@
<!-- eslint-disable vue/block-tag-newline -->
<script lang="ts">
import { tv, type VariantProps } from 'tailwind-variants'
import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps, DropdownMenuTriggerProps, DropdownMenuItemProps } from 'radix-vue'
import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps, DropdownMenuTriggerProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps } from 'radix-vue'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/dropdown-menu'
@@ -12,7 +12,7 @@ const appConfig = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof
const dropdownMenu = tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu || {}) })
export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<DropdownMenuItemProps, 'disabled'> {
export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<DropdownMenuItemProps, 'disabled'>, Pick<DropdownMenuCheckboxItemProps, 'checked'> {
label?: string
icon?: string
avatar?: AvatarProps
@@ -22,12 +22,13 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
* The item type.
* @defaultValue 'link'
*/
type?: 'label' | 'separator' | 'link'
type?: 'label' | 'separator' | 'link' | 'checkbox'
slot?: string
open?: boolean
defaultOpen?: boolean
children?: DropdownMenuItem[] | DropdownMenuItem[][]
onSelect?(e: Event): void
onUpdateChecked?(checked: boolean): void
}
type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
@@ -35,6 +36,11 @@ type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>, Pick<DropdownMenuTriggerProps, 'disabled'> {
size?: DropdownMenuVariants['size']
items?: T[] | T[][]
/**
* The icon displayed when an item is checked.
* @defaultValue appConfig.ui.icons.check
*/
checkedIcon?: string
/**
* The content of the menu.
* @defaultValue { side: 'bottom', sideOffset: 8 }
@@ -113,6 +119,7 @@ const ui = computed(() => dropdownMenu({
:items="items"
:portal="portal"
:label-key="labelKey"
:checked-icon="checkedIcon"
>
<template v-for="(_, name) in proxySlots" #[name]="slotData: any">
<slot :name="name" v-bind="slotData" />