arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-21 15:31:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(DropdownMenu): handle size prop (#125)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Silver343
2024-06-19 10:50:25 +01:00
committed by GitHub
parent 5b2e7d8bad
commit dfa99362d4
12 changed files with 1753 additions and 1162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<script lang="ts">
import { tv } from 'tailwind-variants'
import { tv, type VariantProps } from 'tailwind-variants'
import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps, DropdownMenuTriggerProps, DropdownMenuItemProps } from 'radix-vue'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
@@ -29,7 +29,10 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'custom'>, Pi
select?(e: Event): void
}
type DropdownVariants = VariantProps<typeof dropdownMenu>
export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>, Pick<DropdownMenuTriggerProps, 'disabled'> {
size?: DropdownVariants['size']
items?: T[] | T[][]
/**
* The content of the menu.
@@ -83,7 +86,9 @@ const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffse
const arrowProps = toRef(() => props.arrow as DropdownMenuArrowProps)
const proxySlots = omit(slots, ['default']) as Record<string, DropdownMenuSlots<T>[string]>
const ui = computed(() => tv({ extend: dropdownMenu, slots: props.ui })())
const ui = computed(() => tv({ extend: dropdownMenu, slots: props.ui })({
size: props.size
}))
</script>
<template>

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

@@ -2,7 +2,7 @@
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'
import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots } from '#ui/types'
const dropdownMenu = tv(theme)()
@@ -48,7 +48,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
<DefineItemTemplate v-slot="{ item, active, index }">
<slot :name="item.slot || 'item'" :item="(item as T)" :index="index">
<slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="(item as T)" :active="active" :index="index">
<UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ active })" />
<UAvatar v-if="item.avatar" :size="(ui.itemLeadingAvatarSize() as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ active })" />
<UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ active })" />
</slot>
@@ -64,7 +64,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
<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({ active })" />
<span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds()">
<UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" size="md" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
<UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="(ui.itemTrailingKbdsSize() as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
</span>
</slot>
</span>