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

chore(Dropdown): support item avatar

Browse Source
This commit is contained in:
Benjamin Canac
2022-02-16 12:15:26 +01:00
parent 223a477a5e
commit c0661c3580
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/runtime/components/elements/Dropdown.vue
View File

@@ -22,8 +22,9 @@
<Component v-bind="item" :is="(item.to && 'Link') || 'button'" :class="resolveItemClass({ active, disabled })" @click="onItemClick(item)"> <Component v-bind="item" :is="(item.to && 'Link') || 'button'" :class="resolveItemClass({ active, disabled })" @click="onItemClick(item)">
<slot :name="item.slot" :item="item"> <slot :name="item.slot" :item="item">
<Icon v-if="item.icon" :name="item.icon" :class="itemIconClass" /> <Icon v-if="item.icon" :name="item.icon" :class="itemIconClass" />
<Avatar v-if="item.avatar" :src="item.avatar" :alt="item.label" :class="itemAvatarClass" size="xs" />
{{ item.label }} <span class="truncate">{{ item.label }}</span>
</slot> </slot>
</Component> </Component>
</MenuItem> </MenuItem>
@@ -43,6 +44,7 @@ import {
} from '@headlessui/vue' } from '@headlessui/vue'
import Icon from '../elements/Icon' import Icon from '../elements/Icon'
import Avatar from '../elements/Avatar'
import Link from '../elements/Link' import Link from '../elements/Link'
import { classNames, usePopper } from '../../utils' import { classNames, usePopper } from '../../utils'
import $ui from '#build/ui' import $ui from '#build/ui'
@@ -54,6 +56,7 @@ export default {
MenuItems, MenuItems,
MenuItem, MenuItem,
Icon, Icon,
Avatar,
Link Link
}, },
props: { props: {
@@ -106,6 +109,10 @@ export default {
itemIconClass: { itemIconClass: {
type: String, type: String,
default: () => $ui.dropdown.item.icon default: () => $ui.dropdown.item.icon
},
itemAvatarClass: {
type: String,
default: () => $ui.dropdown.item.avatar
} }
}, },
setup (props) { setup (props) {

5
src/runtime/presets/default.ts
View File

@@ -284,11 +284,12 @@ const dropdown = {
container: 'w-48 z-20', container: 'w-48 z-20',
base: 'u-bg-white divide-y u-divide-gray-100 rounded-md ring-1 u-ring-gray-200 shadow-lg', base: 'u-bg-white divide-y u-divide-gray-100 rounded-md ring-1 u-ring-gray-200 shadow-lg',
item: { item: {
base: 'group flex items-center px-4 py-2 text-sm w-full', base: 'group flex items-center gap-3 px-4 py-2 text-sm w-full',
active: 'u-bg-gray-100 u-text-gray-900', active: 'u-bg-gray-100 u-text-gray-900',
inactive: 'u-text-gray-700', inactive: 'u-text-gray-700',
disabled: 'cursor-not-allowed opacity-50', disabled: 'cursor-not-allowed opacity-50',
icon: 'mr-3 h-5 w-5 u-text-gray-400 group-hover:u-text-gray-500' icon: 'h-5 w-5 u-text-gray-400 group-hover:u-text-gray-500 flex-shrink-0',
avatar: '-my-0.5 group-hover:u-bg-gray-200 flex-shrink-0'
} }
} }