From 498db5ca214bcb224d76a5459d830a8197ccf486 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 3 Oct 2023 14:54:58 +0200
Subject: [PATCH] docs(popover): add `panel` slot example

Resolves #763
---
 .../content/examples/PopoverExampleSlot.vue   | 11 +++++++++
 docs/content/6.overlays/3.popover.md          | 23 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 docs/components/content/examples/PopoverExampleSlot.vue

diff --git a/docs/components/content/examples/PopoverExampleSlot.vue b/docs/components/content/examples/PopoverExampleSlot.vue
new file mode 100644
index 00000000..0737b6e9
--- /dev/null
+++ b/docs/components/content/examples/PopoverExampleSlot.vue
@@ -0,0 +1,11 @@
+<template>
+  <UPopover>
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel="{ close }">
+      <div class="p-8">
+        <UButton label="Close" @click="close" />
+      </div>
+    </template>
+  </UPopover>
+</template>
diff --git a/docs/content/6.overlays/3.popover.md b/docs/content/6.overlays/3.popover.md
index 7e65d03e..07338a3e 100644
--- a/docs/content/6.overlays/3.popover.md
+++ b/docs/content/6.overlays/3.popover.md
@@ -14,6 +14,7 @@ links:
 ::component-example
 #default
 :popover-example
+
 #code
 ```vue
 <template>
@@ -53,7 +54,27 @@ Use the `mode` prop to switch between `click` and `hover` modes.
 
 ### `panel`
 
-Use the `#panel` slot to fill the content of the panel.
+Use the `#panel` slot to fill the content of the panel. You will have access to the `open` property and the `close` method in the slot scope.
+
+::component-example
+#default
+:popover-example-slot
+
+#code
+```vue
+<template>
+  <UPopover>
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel="{ close }">
+      <div class="p-8">
+        <UButton label="Close" @click="close" />
+      </div>
+    </template>
+  </UPopover>
+</template>
+```
+::
 
 ## Props