Skip to content

Commit

Permalink
fix: Hover mode on Dropdown & Popover (#48)
Browse files Browse the repository at this point in the history
  • Loading branch information
smarroufin authored Apr 12, 2022
1 parent 656b6e1 commit 8bc4902
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 4 deletions.
10 changes: 8 additions & 2 deletions src/runtime/components/elements/Dropdown.vue
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,12 @@ export default {
const menuProvides = trigger.value?.$.provides
const menuProvidesSymbols = Object.getOwnPropertySymbols(menuProvides)
menuApi.value = menuProvidesSymbols.length && menuProvides[menuProvidesSymbols[0]]
// stop trigger click propagation on hover
menuApi.value.buttonRef.addEventListener('click', (e) => {
if (props.mode === 'hover') {
e.stopPropagation()
}
}, true)
}, 0)
})
Expand All @@ -195,7 +201,7 @@ export default {
openTimeout = openTimeout || setTimeout(() => {
menuApi.value.openMenu && menuApi.value.openMenu()
openTimeout = null
}, 200)
}, 50)
}
function onMouseLeave () {
Expand All @@ -215,7 +221,7 @@ export default {
closeTimeout = closeTimeout || setTimeout(() => {
menuApi.value.closeMenu && menuApi.value.closeMenu()
closeTimeout = null
}, 100)
}, 200)
}
return {
Expand Down
10 changes: 8 additions & 2 deletions src/runtime/components/overlays/Popover.vue
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,12 @@ export default {
const popoverProvides = trigger.value?.$.provides
const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
// stop trigger click propagation on hover
popoverApi.value.button.addEventListener('click', (e) => {
if (props.mode === 'hover') {
e.stopPropagation()
}
}, true)
}, 0)
})
Expand All @@ -119,7 +125,7 @@ export default {
openTimeout = openTimeout || setTimeout(() => {
popoverApi.value.togglePopover && popoverApi.value.togglePopover()
openTimeout = null
}, 200)
}, 50)
}
function onMouseLeave () {
Expand All @@ -138,7 +144,7 @@ export default {
closeTimeout = closeTimeout || setTimeout(() => {
popoverApi.value.closePopover && popoverApi.value.closePopover()
closeTimeout = null
}, 100)
}, 200)
}
return {
Expand Down

1 comment on commit 8bc4902

@vercel
Copy link

@vercel vercel bot commented on 8bc4902 Apr 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ui – ./

nuxthq-ui.vercel.app
ui-nuxtlabs.vercel.app
ui-git-dev-nuxtlabs.vercel.app

Please sign in to comment.