arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-15 04:29:37 +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/ContextMenu.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 { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuTriggerProps, ContextMenuItemProps } from 'radix-vue'
import type { ContextMenuRootProps, ContextMenuRootEmits, ContextMenuContentProps, ContextMenuTriggerProps, ContextMenuItemProps, ContextMenuCheckboxItemProps } from 'radix-vue'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/context-menu'
@@ -12,7 +12,7 @@ const appConfig = _appConfig as AppConfig & { ui: { contextMenu: Partial<typeof
const contextMenu = tv({ extend: tv(theme), ...(appConfig.ui?.contextMenu || {}) })
export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<ContextMenuItemProps, 'disabled'> {
export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<ContextMenuItemProps, 'disabled'>, Pick<ContextMenuCheckboxItemProps, 'checked'> {
label?: string
icon?: string
avatar?: AvatarProps
@@ -22,12 +22,13 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
* The item type.
* @defaultValue 'link'
*/
type?: 'label' | 'separator' | 'link'
type?: 'label' | 'separator' | 'link' | 'checkbox'
slot?: string
open?: boolean
defaultOpen?: boolean
children?: ContextMenuItem[] | ContextMenuItem[][]
onSelect?(e: Event): void
onUpdateChecked?(checked: boolean): void
}
type ContextMenuVariants = VariantProps<typeof contextMenu>
@@ -35,6 +36,11 @@ type ContextMenuVariants = VariantProps<typeof contextMenu>
export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'>, Pick<ContextMenuTriggerProps, 'disabled'> {
size?: ContextMenuVariants['size']
items?: T[] | T[][]
/**
* The icon displayed when an item is checked.
* @defaultValue appConfig.ui.icons.check
*/
checkedIcon?: string
/** The content of the menu. */
content?: Omit<ContextMenuContentProps, 'as' | 'asChild' | 'forceMount'>
/**
@@ -103,6 +109,7 @@ const ui = computed(() => contextMenu({
: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" />

26
src/runtime/components/ContextMenuContent.vue
View File

@@ -11,6 +11,7 @@ interface ContextMenuContentProps<T> extends Omit<RadixContextMenuContentProps,
portal?: boolean
sub?: boolean
labelKey: string
checkedIcon?: string
class?: any
ui: typeof _contextMenu
uiOverride?: any
@@ -62,13 +63,17 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
<UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, active })" />
</span>
<span v-if="item.children?.length || item.kbds?.length || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
<span :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
<slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="(item as T)" :active="active" :index="index">
<UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, active })" />
<span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })">
<UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
</span>
</slot>
<ContextMenu.ItemIndicator as-child>
<UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon })" />
</ContextMenu.ItemIndicator>
</span>
</slot>
</DefineItemTemplate>
@@ -108,7 +113,24 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
</template>
</UContextMenuContent>
</ContextMenu.Sub>
<ContextMenu.Item v-else as-child :disabled="item.disabled" :text-value="get(item, props.labelKey as string)" @select="item.onSelect">
<ContextMenu.CheckboxItem
v-else-if="item.type === 'checkbox'"
:checked="item.checked"
:disabled="item.disabled"
:text-value="get(item, props.labelKey as string)"
:class="ui.item({ class: [uiOverride?.item, item.class] })"
@update:checked="item.onUpdateChecked"
@select="item.onSelect"
>
<ReuseItemTemplate :item="item" :index="index" />
</ContextMenu.CheckboxItem>
<ContextMenu.Item
v-else
as-child
:disabled="item.disabled"
:text-value="get(item, props.labelKey as string)"
@select="item.onSelect"
>
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<ContextMenuItem, 'type'>)" custom>
<ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.class], active })">
<ReuseItemTemplate :item="item" :active="active" :index="index" />

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" />

28
src/runtime/components/DropdownMenuContent.vue
View File

@@ -1,3 +1,4 @@
<!-- eslint-disable vue/block-tag-newline -->
<script lang="ts">
import { tv } from 'tailwind-variants'
import type { DropdownMenuContentProps as RadixDropdownMenuContentProps, DropdownMenuContentEmits as RadixDropdownMenuContentEmits } from 'radix-vue'
@@ -11,6 +12,7 @@ interface DropdownMenuContentProps<T> extends Omit<RadixDropdownMenuContentProps
portal?: boolean
sub?: boolean
labelKey: string
checkedIcon?: string
class?: any
ui: typeof _dropdownMenu
uiOverride?: any
@@ -21,6 +23,7 @@ interface DropdownMenuContentEmits extends RadixDropdownMenuContentEmits {}
type DropdownMenuContentSlots<T extends { slot?: string }> = Omit<DropdownMenuSlots<T>, 'default'> & {
default(props?: {}): any
}
</script>
<script setup lang="ts" generic="T extends DropdownMenuItem">
@@ -66,13 +69,17 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
<UIcon v-if="item.target === '_blank'" :name="appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, active })" />
</span>
<span v-if="item.children?.length || item.kbds?.length || !!slots[item.slot ? `${item.slot}-trailing`: 'item-trailing']" :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
<span :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
<slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="(item as T)" :active="active" :index="index">
<UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, active })" />
<span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })">
<UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
</span>
</slot>
<DropdownMenu.ItemIndicator as-child>
<UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon })" />
</DropdownMenu.ItemIndicator>
</span>
</slot>
</DefineItemTemplate>
@@ -115,7 +122,24 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
</template>
</UDropdownMenuContent>
</DropdownMenu.Sub>
<DropdownMenu.Item v-else as-child :disabled="item.disabled" :text-value="get(item, props.labelKey as string)" @select="item.onSelect">
<DropdownMenu.CheckboxItem
v-else-if="item.type === 'checkbox'"
:checked="item.checked"
:disabled="item.disabled"
:text-value="get(item, props.labelKey as string)"
:class="ui.item({ class: [uiOverride?.item, item.class] })"
@update:checked="item.onUpdateChecked"
@select="item.onSelect"
>
<ReuseItemTemplate :item="item" :index="index" />
</DropdownMenu.CheckboxItem>
<DropdownMenu.Item
v-else
as-child
:disabled="item.disabled"
:text-value="get(item, props.labelKey as string)"
@select="item.onSelect"
>
<ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" custom>
<ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.class], active })">
<ReuseItemTemplate :item="item" :active="active" :index="index" />