Skip to content

Commit

Permalink
fix(Popover): improve placement with hover mode
Browse files Browse the repository at this point in the history
Improvement of #781
  • Loading branch information
benjamincanac committed Jan 3, 2024
1 parent c6aa421 commit bc00f9c
Showing 1 changed file with 23 additions and 6 deletions.
29 changes: 23 additions & 6 deletions src/runtime/components/overlays/Popover.vue
Original file line number Diff line number Diff line change
Expand Up @@ -124,15 +124,32 @@ export default defineComponent({
})
const containerStyle = computed(() => {
if (props.mode !== 'hover') {
return {}
}
const offsetDistance = (props.popper as PopperOptions)?.offsetDistance || (ui.value.popper as PopperOptions)?.offsetDistance || 8
const placement = popper.value.placement?.split('-')[0]
const padding = `${offsetDistance}px`
return props.mode === 'hover' ? {
paddingTop: padding,
paddingBottom: padding,
paddingLeft: padding,
paddingRight: padding
} : {}
if (placement === 'top' || placement === 'bottom') {
return {
paddingTop: padding,
paddingBottom: padding
}
} else if (placement === 'left' || placement === 'right') {
return {
paddingLeft: padding,
paddingRight: padding
}
} else {
return {
paddingTop: padding,
paddingBottom: padding,
paddingLeft: padding,
paddingRight: padding
}
}
})
function onMouseOver () {
Expand Down

1 comment on commit bc00f9c

@vercel
Copy link

@vercel vercel bot commented on bc00f9c Jan 3, 2024

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 – ./

ui-nuxt-js.vercel.app
ui-git-dev-nuxt-js.vercel.app
ui.nuxt.com

Please sign in to comment.