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

feat(DropdownMenu): add #item slot for consistency

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-17 12:18:37 +02:00
parent ea19a3061f
commit 1dcc1f5074
6 changed files with 184 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,17 @@
<script lang="ts">
import { tv } from 'tailwind-variants'
import type { DropdownMenuContentProps as RadixDropdownMenuContentProps, DropdownMenuContentEmits as RadixDropdownMenuContentEmits } from 'radix-vue'
import theme from '#build/ui/dropdown-menu'
import type { DropdownMenuItem, DropdownMenuSlots } from '#ui/types'
const dropdownMenu = tv(theme)()
interface DropdownMenuContentProps<T> extends Omit<RadixDropdownMenuContentProps, 'asChild' | 'forceMount'> {
items?: T[] | T[][]
portal?: boolean
sub?: boolean
class?: any
ui: any
ui: typeof dropdownMenu
}
interface DropdownMenuContentEmits extends RadixDropdownMenuContentEmits {}
@@ -40,20 +44,20 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
<template>
<DefineItemTemplate v-slot="{ item, active, index }">
<slot name="leading" :item="item" :active="active" :index="index">
<UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ active })" />
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ active })" />
<UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ active })" />
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ active })" />
</slot>
<span v-if="item.label || $slots.default" :class="ui.itemLabel()">
<span v-if="item.label || $slots.label" :class="ui.linkLabel()">
<slot name="label" :item="item" :active="active" :index="index">
{{ item.label }}
</slot>
</span>
<span v-if="$slots.trailing || item.children?.length || item.shortcuts?.length" :class="ui.itemTrailing()">
<span v-if="$slots.trailing || item.children?.length || item.shortcuts?.length" :class="ui.linkTrailing()">
<slot name="trailing" :item="item" :active="active" :index="index">
<UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.itemTrailingIcon()" />
<span v-else-if="item.shortcuts?.length" :class="ui.itemTrailingShortcuts()">
<UIcon v-if="item.children?.length" :name="appConfig.ui.icons.chevronRight" :class="ui.linkTrailingIcon()" />
<span v-else-if="item.shortcuts?.length" :class="ui.linkTrailingShortcuts()">
<UKbd v-for="(shortcut, shortcutIndex) in item.shortcuts" :key="shortcutIndex" size="md" v-bind="typeof shortcut === 'string' ? { value: shortcut } : shortcut" />
</span>
</slot>
@@ -65,7 +69,9 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
<DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group()">
<template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
<DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label()">
<ReuseItemTemplate :item="item" :index="index" />
<slot :name="item.slot || 'item'" :item="item" :index="index">
<ReuseItemTemplate :item="item" :index="index" />
</slot>
</DropdownMenu.Label>
<DropdownMenu.Sub v-else-if="item?.children?.length">
<DropdownMenu.SubTrigger
@@ -75,9 +81,11 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
:open="item.open"
:default-open="item.defaultOpen"
:text-value="item.label"
:class="ui.item()"
:class="ui.link()"
>
<ReuseItemTemplate :item="item" :index="index" />
<slot :name="item.slot || 'item'" :item="item" :index="index">
<ReuseItemTemplate :item="item" :index="index" />
</slot>
</DropdownMenu.SubTrigger>
<UDropdownMenuContent
@@ -98,11 +106,13 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
</UDropdownMenuContent>
</DropdownMenu.Sub>
<DropdownMenu.Item v-else as-child :disabled="item.disabled" :text-value="item.label" @select="item.select">
<ULink v-slot="{ active, ...slotProps }" v-bind="omit((item as DropdownMenuItem), ['label', 'icon', 'avatar', 'shortcuts', 'slot', 'open', 'defaultOpen', 'select', 'children', 'type'])" custom>
<ULinkBase v-bind="slotProps" :class="ui.item({ active })">
<ReuseItemTemplate :item="item" :active="active" :index="index" />
</ULinkBase>
</ULink>
<slot :name="item.slot || 'item'" :item="item" :index="index">
<ULink v-slot="{ active, ...slotProps }" v-bind="omit((item as DropdownMenuItem), ['label', 'icon', 'avatar', 'shortcuts', 'slot', 'open', 'defaultOpen', 'select', 'children', 'type'])" custom>
<ULinkBase v-bind="slotProps" :class="ui.link({ active })">
<ReuseItemTemplate :item="item" :active="active" :index="index" />
</ULinkBase>
</ULink>
</slot>
</DropdownMenu.Item>
</template>
</DropdownMenu.Group>