mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
chore(Dropdown): pass event to item click
This commit is contained in:
@@ -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'
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user