chore(Dropdown): pass event to item click

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

View File

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

View File

@@ -19,7 +19,7 @@
<MenuItems :class="baseClass" static>
<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">
<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">
<Icon v-if="item.icon" :name="item.icon" :class="itemIconClass" />
<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({
placement: props.placement,
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) {
return
}
if (item.click) {
item.click()
item.click(e)
}
}
const menuApi: Ref<any> = ref(null)
let openTimeout: NodeJS.Timeout | null = null
let closeTimeout: NodeJS.Timeout | null = null
onMounted(() => {
setTimeout(() => {
const menuProvides = trigger.value?.$.provides