arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-30 03:38:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(Dropdown): pass event to item click

Browse Source
This commit is contained in:
Benjamin Canac
2022-08-12 17:16:00 +02:00
parent 593573a286
commit 1f7f28835d
2 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/pages/examples.vue
View File

@@ -83,7 +83,7 @@
Dropdown with avatar: Dropdown with avatar:
</div> </div>
<UDropdown :items="customDropdownItems" placement="bottom-end" @hover="onHover"> <UDropdown :items="customDropdownItems" placement="bottom-end">
<button class="flex"> <button class="flex">
<UAvatar src="https://picsum.photos/200/300" /> <UAvatar src="https://picsum.photos/200/300" />
</button> </button>
@@ -282,15 +282,14 @@ function onSubmit () {
console.warn('submit') console.warn('submit')
} }
function onHover (item) {
console.log(item)
}
const dropdownItems = [ const dropdownItems = [
[{ [{
label: 'Edit', label: 'Edit',
icon: 'heroicons-solid:pencil', icon: 'heroicons-solid:pencil',
click: () => onClick() click: (e) => {
e.preventDefault()
onClick()
}
}, { }, {
label: 'Duplicate', label: 'Duplicate',
icon: 'heroicons-solid:duplicate' icon: 'heroicons-solid:duplicate'

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

@@ -19,7 +19,7 @@
<MenuItems :class="baseClass" static> <MenuItems :class="baseClass" static>
<div v-for="(subItems, index) of items" :key="index" class="py-1"> <div v-for="(subItems, index) of items" :key="index" class="py-1">
<MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled }" :disabled="item.disabled" as="div"> <MenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled }" :disabled="item.disabled" as="div">
<Component v-bind="item" :is="(item.to && NuxtLink) || (item.click && 'button') || 'div'" :class="resolveItemClass({ active, disabled })" @click="onItemClick(item)" @mouseover="$emit('hover', item)"> <Component v-bind="item" :is="(item.to && NuxtLink) || (item.click && 'button') || 'div'" :class="resolveItemClass({ active, disabled })" @click="e => onItemClick(e, 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" v-bind="{ size: 'xxs', ...item.avatar }" :class="itemAvatarClass" /> <Avatar v-if="item.avatar" v-bind="{ size: 'xxs', ...item.avatar }" :class="itemAvatarClass" />
@@ -134,8 +134,6 @@ const props = defineProps({
} }
}) })
defineEmits(['hover'])
const [trigger, container] = usePopper({ const [trigger, container] = usePopper({
placement: props.placement, placement: props.placement,
strategy: props.strategy, strategy: props.strategy,
@@ -168,19 +166,20 @@ function resolveItemClass ({ active, disabled }: { active: boolean, disabled: bo
) )
} }
function onItemClick (item: any) { function onItemClick (e, item: any) {
if (item.disabled) { if (item.disabled) {
return return
} }
if (item.click) { if (item.click) {
item.click() item.click(e)
} }
} }
const menuApi: Ref<any> = ref(null) const menuApi: Ref<any> = ref(null)
let openTimeout: NodeJS.Timeout | null = null let openTimeout: NodeJS.Timeout | null = null
let closeTimeout: NodeJS.Timeout | null = null let closeTimeout: NodeJS.Timeout | null = null
onMounted(() => { onMounted(() => {
setTimeout(() => { setTimeout(() => {
const menuProvides = trigger.value?.$.provides const menuProvides = trigger.value?.$.provides