diff --git a/src/util/vue.tsx b/src/util/vue.tsx index 8b3ca3d..16bb826 100644 --- a/src/util/vue.tsx +++ b/src/util/vue.tsx @@ -12,6 +12,7 @@ import { onUnmounted, ref, shallowRef, + toRef, unref, watchEffect } from "vue"; @@ -211,3 +212,42 @@ export function processedPropType(...types: PropTypes[]): PropType>; } + +export function trackHover(element: VueFeature): Ref { + const elementComponent = element[ComponentKey]; + const isHovered = ref(false); + + element[ComponentKey] = defineComponent({ + props: { + element: { + type: Object as PropType, + required: true + } + }, + setup: function (props) { + const element = toRef(props, "element"); + + onUnmounted(() => (isHovered.value = false)); + return () => ( +
(isHovered.value = true)} + onPointerleave={() => (isHovered.value = false)} + > + {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */} + {unwrapRef(element) == null ? "" : renderJSX(unwrapRef(element)!)} +
+ ); + } + }) as GenericComponent; + + const elementGatherProps = element[GatherProps].bind(element); + element[GatherProps] = () => ({ + element: { + [ComponentKey]: elementComponent, + [GatherProps]: elementGatherProps + } + }); + + return isHovered; +}