arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-17 21:48:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Popover): handle hover mode with padding like dropdown

Browse Source
This commit is contained in:
Benjamin Canac
2023-08-02 22:16:31 +02:00
parent e2146a5a58
commit dc951ff69d
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/runtime/components/overlays/Popover.vue
View File

@@ -15,7 +15,7 @@
</slot>
</HPopoverButton>
<div v-if="open" ref="container" :class="[ui.container, ui.width]" @mouseover="onMouseOver">
<div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
<Transition appear v-bind="ui.transition">
<HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
<slot name="panel" :open="open" :close="close" />
@@ -80,7 +80,7 @@ export default defineComponent({
const ui = computed<Partial<typeof appConfig.ui.popover>>(() => defu({}, props.ui, appConfig.ui.popover))
const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))
const [trigger, container] = usePopper(popper.value)
@@ -100,6 +100,12 @@ export default defineComponent({
popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
})
const containerStyle = computed(() => {
const offsetDistance = (props.popper as PopperOptions)?.offsetDistance || (ui.value.popper as PopperOptions)?.offsetDistance || 8
return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
})
function onMouseOver () {
if (props.mode !== 'hover' || !popoverApi.value) {
return
@@ -146,6 +152,7 @@ export default defineComponent({
popover,
trigger,
container,
containerStyle,
onMouseOver,
onMouseLeave
}