fix(ui-docs): Reveal hidden dropdown menu in popover component and fix it to be working

front/ui-docs/.vitepress/config.ts

@@ -50,7 +50,7 @@ export default defineConfig({
                 ],
               },
               { text: 'Input', link: '/components/ui/input' },
-              { text: 'Popover', link: '/components/ui/popover' },
+              { text: 'Popover (Dropdown Menu)', link: '/components/ui/popover' },
               { text: 'Textarea', link: '/components/ui/textarea' },
               { text: 'Toggle', link: '/components/ui/toggle' },
             ],

front/ui-docs/components/ui/popover.md

@@ -37,11 +37,19 @@ const seperatorMenu = ref(false)
 const subMenu = ref(false)
 const extraItemsMenu = ref(false)
 const fullMenu= ref(false)
+const open = ref(false)
 </script>
 
-# Popover
+# Popover (Dropdown Menu)
 
-Popovers (`Popover`) are visually hidden menus of items activated by a simple button. Use popovers to create complex menus in a visually appealing way.
+Popovers (`Popover`) are dropdown menus activated by a button. Use popovers to create dropdown menus ranging from simple lists to complex nested menus.
+
+Common uses:
+
+- "More actions" dropdown menus
+- Navigation menus
+- Settings menus
+- Context menus (right-click menus)
 
 | Prop   | Data type | Required? | Description                                                |
 | ------ | --------- | --------- | ---------------------------------------------------------- |
@@ -71,14 +79,24 @@ You can also use the `toggleOpen` prop in the `<template #default`> tag if you p
 
 ```vue{8-12}
 <script setup lang="ts">
+const open = ref(false)
 const privacyChoices = ['pod', 'public', 'private']
 const bcPrivacy = ref('pod')
 </script>
 
 <template>
-  <Popover>
+  <Popover v-model:open="open">
     <template #default="{ toggleOpen }">
-      <Pill @click.stop="toggleOpen" :blue="bcPrivacy === 'pod'" :red="bcPrivacy === 'public'">
+      <Pill
+      @click="(e) => {
+        console.log('Pill clicked');
+        console.log('Before toggleOpen:', open);
+        toggleOpen();
+        console.log('After toggleOpen:', open);
+      }"
+        :blue="bcPrivacy === 'pod'"
+        :red="bcPrivacy === 'public'"
+      >
         {{ bcPrivacy }}
       </Pill>
     </template>
@@ -89,9 +107,18 @@ const bcPrivacy = ref('pod')
 </template>
 ```
 
-<Popover>
+<Popover v-model:open="open">
   <template #default="{ toggleOpen }">
-    <Pill @click.stop="toggleOpen" :blue="bcPrivacy === 'pod'" :red="bcPrivacy === 'public'">
+    <Pill
+    @click="(e) => {
+      console.log('Pill clicked');
+      console.log('Before toggleOpen:', open);
+      toggleOpen();
+      console.log('After toggleOpen:', open);
+    }"
+      :blue="bcPrivacy === 'pod'"
+      :red="bcPrivacy === 'public'"
+    >
       {{ bcPrivacy }}
     </Pill>
   </template>
@@ -453,10 +480,10 @@ const privacyChoices = ["private", "pod", "public"];
           <PopoverCheckbox v-model="cc">
             Creative Commons
             <template #after>
-              <Popover>
+              <Popover v-model:open="isOpen">
                 <template #default="{ toggleOpen }">
                   <Pill
-                    @click.stop="toggleOpen"
+                    @click="toggleOpen"
                     :blue="ccPrivacy === 'pod'"
                     :red="ccPrivacy === 'public'"
                   >
@@ -536,7 +563,7 @@ const privacyChoices = ["private", "pod", "public"];
         <PopoverCheckbox v-model="bc">
           Bandcamp
           <template #after>
-            <Popover>
+            <Popover v-model:open="isOpen">
               <template #default="{ toggleOpen }">
                 <Pill @click.stop="toggleOpen" :blue="bcPrivacy === 'pod'" :red="bcPrivacy === 'public'">
                   {{ bcPrivacy }}
@@ -551,9 +578,9 @@ const privacyChoices = ["private", "pod", "public"];
         <PopoverCheckbox v-model="cc">
           Creative Commons
           <template #after>
-            <Popover>
+            <Popover v-model:open="isOpen">
               <template #default="{ toggleOpen }">
-                <Pill @click.stop="toggleOpen" :blue="ccPrivacy === 'pod'" :red="ccPrivacy === 'public'">
+                <Pill @click="toggleOpen" :blue="ccPrivacy === 'pod'" :red="ccPrivacy === 'public'">
                   {{ ccPrivacy }}
                 </Pill>
               </template>