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

chore(Dropdown): hover mode with padding instead of offset + improve docs (#242)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sylvain Marroufin
2023-05-31 14:28:14 +02:00
committed by GitHub
parent 9827de0b58
commit 8bdb8c45f7
4 changed files with 66 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/runtime/components/elements/Dropdown.vue
View File

@@ -15,7 +15,7 @@
</slot>
</MenuButton>
<div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" @mouseover="onMouseOver">
<div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
<transition appear v-bind="ui.transition">
<MenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background]" static>
<div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
@@ -127,7 +127,7 @@ export default defineComponent({
const ui = computed<Partial<typeof appConfig.ui.dropdown>>(() => defu({}, props.ui, appConfig.ui.dropdown))
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)
@@ -149,6 +149,12 @@ export default defineComponent({
}, 200)
})
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' || !menuApi.value) {
return
@@ -194,6 +200,7 @@ export default defineComponent({
ui,
trigger,
container,
containerStyle,
onMouseOver,
onMouseLeave,
omit