mirror of
https://github.com/directus/directus.git
synced 2026-02-01 01:45:27 -05:00
Allow v-menu tooltip to stay active on hover (#7948)
* allow v-menu tooltip to stay active on hover * remove overlooked code in previous commit
This commit is contained in:
@@ -4,8 +4,8 @@
|
||||
ref="activator"
|
||||
class="v-menu-activator"
|
||||
:class="{ attached }"
|
||||
@pointerenter="onPointerEnter"
|
||||
@pointerleave="onPointerLeave"
|
||||
@pointerenter.stop="onPointerEnter"
|
||||
@pointerleave.stop="onPointerLeave"
|
||||
>
|
||||
<slot
|
||||
name="activator"
|
||||
@@ -36,7 +36,12 @@
|
||||
:style="styles"
|
||||
>
|
||||
<div class="arrow" :class="{ active: showArrow && isActive }" :style="arrowStyles" data-popper-arrow />
|
||||
<div class="v-menu-content" @click.stop="onContentClick">
|
||||
<div
|
||||
class="v-menu-content"
|
||||
@click.stop="onContentClick"
|
||||
@pointerenter.stop="onPointerEnter"
|
||||
@pointerleave.stop="onPointerLeave"
|
||||
>
|
||||
<slot
|
||||
v-bind="{
|
||||
toggle: toggle,
|
||||
@@ -57,6 +62,7 @@ import { defineComponent, ref, PropType, computed, watch, nextTick } from 'vue';
|
||||
import { usePopper } from './use-popper';
|
||||
import { Placement } from '@popperjs/core';
|
||||
import { nanoid } from 'nanoid';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
@@ -241,7 +247,18 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
function useEvents() {
|
||||
let timeout: ReturnType<typeof setTimeout> | null = null;
|
||||
const isHovered = ref(false);
|
||||
|
||||
watch(
|
||||
isHovered,
|
||||
debounce((newHoveredState) => {
|
||||
if (newHoveredState) {
|
||||
if (!isActive.value) activate();
|
||||
} else {
|
||||
deactivate();
|
||||
}
|
||||
}, props.delay)
|
||||
);
|
||||
|
||||
return { onClick, onPointerLeave, onPointerEnter };
|
||||
|
||||
@@ -253,20 +270,12 @@ export default defineComponent({
|
||||
|
||||
function onPointerEnter() {
|
||||
if (props.trigger !== 'hover') return;
|
||||
if (timeout) return;
|
||||
timeout = setTimeout(() => {
|
||||
activate();
|
||||
}, props.delay);
|
||||
isHovered.value = true;
|
||||
}
|
||||
|
||||
function onPointerLeave() {
|
||||
if (hoveringOnPopperContent.value === true) return;
|
||||
|
||||
if (props.trigger !== 'hover') return;
|
||||
if (timeout === null) return;
|
||||
clearTimeout(timeout);
|
||||
deactivate();
|
||||
timeout = null;
|
||||
isHovered.value = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user