From 774858187e16ec433bf36cd9f7a573227e60b1e5 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 4 Apr 2024 15:13:08 +0200
Subject: [PATCH] playground(popover): add all sides for click mode

---
 playground/pages/popover.vue | 54 +++++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/playground/pages/popover.vue b/playground/pages/popover.vue
index 16a35c4c..a167cd1c 100644
--- a/playground/pages/popover.vue
+++ b/playground/pages/popover.vue
@@ -14,19 +14,47 @@ function send () {
 
 <template>
   <div class="text-center">
-    <UPopover v-model:open="open" arrow>
-      <UButton label="Click me" color="white" />
+    <div>
+      <UPopover arrow :content="{ side: 'top' }">
+        <UButton label="Click me top" color="white" />
 
-      <template #content>
-        <div class="flex justify-center gap-2 p-4 w-48">
-          <UButton label="Close" color="gray" @click="open = false" />
-          <UButton label="Send" color="black" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" />
-        </div>
-      </template>
-    </UPopover>
+        <template #content>
+          <div class="w-48 h-16" />
+        </template>
+      </UPopover>
+
+      <div class="flex items-center gap-2 my-2">
+        <UPopover arrow :content="{ side: 'left' }">
+          <UButton label="Click me top" color="white" />
+
+          <template #content>
+            <div class="w-48 h-16" />
+          </template>
+        </UPopover>
+
+        <UPopover arrow :content="{ side: 'right' }">
+          <UButton label="Click me top" color="white" />
+
+          <template #content>
+            <div class="w-48 h-16" />
+          </template>
+        </UPopover>
+      </div>
+
+      <UPopover v-model:open="open" arrow>
+        <UButton label="Click me bottom" color="white" />
+
+        <template #content>
+          <div class="flex justify-center gap-2 p-4 w-48">
+            <UButton label="Close" color="gray" @click="open = false" />
+            <UButton label="Send" color="black" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" />
+          </div>
+        </template>
+      </UPopover>
+    </div>
 
     <div class="mt-24">
-      <UPopover mode="hover" :content="{ side: 'top' }">
+      <UPopover mode="hover" arrow :content="{ side: 'top' }">
         <UButton label="Hover me top" color="white" />
 
         <template #content>
@@ -35,7 +63,7 @@ function send () {
       </UPopover>
 
       <div class="flex items-center gap-2 my-2">
-        <UPopover mode="hover" :content="{ side: 'left' }">
+        <UPopover mode="hover" arrow :content="{ side: 'left' }">
           <UButton label="Hover me left" color="white" />
 
           <template #content>
@@ -43,7 +71,7 @@ function send () {
           </template>
         </UPopover>
 
-        <UPopover mode="hover" :content="{ side: 'right' }">
+        <UPopover mode="hover" arrow :content="{ side: 'right' }">
           <UButton label="Hover me right" color="white" />
 
           <template #content>
@@ -52,7 +80,7 @@ function send () {
         </UPopover>
       </div>
 
-      <UPopover mode="hover">
+      <UPopover mode="hover" arrow>
         <UButton label="Hover me bottom" color="white" />
 
         <template #content>