From 6fd5a70ac93ec32a629c430d317c8d4cc65a2187 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sun, 14 May 2023 15:08:16 +0200
Subject: [PATCH] docs: improve `ContextMenu` example

---
 docs/components/content/examples/ContextMenuExample.vue | 9 +++++----
 docs/content/5.overlays/5.context-menu.md               | 7 ++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/components/content/examples/ContextMenuExample.vue b/docs/components/content/examples/ContextMenuExample.vue
index 2f13f734..3afaa36b 100644
--- a/docs/components/content/examples/ContextMenuExample.vue
+++ b/docs/components/content/examples/ContextMenuExample.vue
@@ -1,11 +1,12 @@
 <script setup>
 const { x, y } = useMouse()
+const { y: windowY } = useWindowScroll()
 
 const isOpen = ref(false)
 const virtualElement = ref({ getBoundingClientRect: () => ({}) })
 
-function openContextMenu () {
-  const top = unref(y)
+function onContextMenu () {
+  const top = unref(y) - unref(windowY)
   const left = unref(x)
 
   virtualElement.value.getBoundingClientRect = () => ({
@@ -20,8 +21,8 @@ function openContextMenu () {
 </script>
 
 <template>
-  <div class="w-full" @contextmenu.prevent="openContextMenu">
-    <Placeholder class="h-20 w-full flex items-center justify-center">
+  <div class="w-full" @contextmenu.prevent="onContextMenu">
+    <Placeholder class="h-96 select-none w-full flex items-center justify-center">
       Right click here
     </Placeholder>
 
diff --git a/docs/content/5.overlays/5.context-menu.md b/docs/content/5.overlays/5.context-menu.md
index 6df25c48..a3a8f996 100644
--- a/docs/content/5.overlays/5.context-menu.md
+++ b/docs/content/5.overlays/5.context-menu.md
@@ -11,12 +11,13 @@ github: true
 ```vue
 <script setup>
 const { x, y } = useMouse()
+const { y: windowY } = useWindowScroll()
 
 const isOpen = ref(false)
 const virtualElement = ref({ getBoundingClientRect: () => ({}) })
 
-function openContextMenu () {
-  const top = unref(y)
+function onContextMenu () {
+  const top = unref(y) - unref(windowY)
   const left = unref(x)
 
   virtualElement.value.getBoundingClientRect = () => ({
@@ -31,7 +32,7 @@ function openContextMenu () {
 </script>
 
 <template>
-  <div @contextmenu.prevent="openContextMenu">
+  <div @contextmenu.prevent="onContextMenu">
     <UContextMenu v-model="isOpen" :virtual-element="virtualElement">
       <!-- Content -->
     </UContextMenu>