UI-322 : Fixed dropdownMenu Bug (#330)

Co-authored-by: Ghita Nekt <[email protected]>
youcan-shop · Apr 18, 2024 · f7b1ff9 · f7b1ff9
1 parent 778bd6c
commit f7b1ff9
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 5 deletions.
diff --git a/packages/vue3/src/_dev/App.vue b/packages/vue3/src/_dev/App.vue
@@ -2,20 +2,71 @@
 import 'uno.css';
 import '../assets/main.css';
 import { ref } from 'vue';
-import { RichText } from '~/components';
+import { Badge, Divider, DropdownMenu, DropdownMenuItem } from '~/components';
 
-const content = ref('Default value');
+const imgSrc = ref('https://i.imgur.com/61WTxIG.jpg');
 </script>
 
 <template>
   <div class="container">
-    <RichText v-model="content" />
-    <p>{{ content }}</p>
+    <DropdownMenu position="bottom">
+      <div class="avatar">
+        <img :src="imgSrc" alt="avatar" srcset="">
+      </div>
+      <template #MenuItems>
+        <DropdownMenuItem label="Account" />
+        <Divider thickness="light" />
+        <DropdownMenuItem label="With accessory">
+          <template #accessory>
+            <i class="i-youcan:rocket-launch" />
+          </template>
+        </DropdownMenuItem>
+        <DropdownMenuItem label="With Badge">
+          <template #icon>
+            <Badge state="success" :size="20">
+              Badge
+            </Badge>
+          </template>
+        </DropdownMenuItem>
+        <DropdownMenuItem label="Notification" />
+        <DropdownMenuItem label="Logout" class="custom-class">
+          <template #icon>
+            <i class="i-youcan:sign-out" />
+          </template>
+        </DropdownMenuItem>
+      </template>
+    </DropdownMenu>
   </div>
 </template>
 
 <style scoped>
 .container {
   margin: 30px;
 }
+
+.custom-class {
+  color: var(--red-500); /* Change this to your desired color */
+}
+
+.avatar {
+  width: 55px;
+  height: 55px;
+  overflow: hidden;
+  transition: all 200ms linear;
+  border: 2px solid var(--gray-300);
+  border-radius: 50%;
+  box-shadow: var(--shadow-md-brand);
+  cursor: pointer;
+}
+
+.avatar:hover {
+  border: 2px solid var(--gray-400);
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
 </style>
diff --git a/packages/vue3/src/components/DropdownMenu/DropdownMenu.vue b/packages/vue3/src/components/DropdownMenu/DropdownMenu.vue
@@ -26,6 +26,10 @@ const handleScroll = () => {
   show.value = false;
 };
 
+const closeMenu = () => {
+  show.value = false;
+};
+
 onMounted(() => {
   window.addEventListener('scroll', handleScroll);
 });
@@ -43,7 +47,7 @@ onClickOutside(dropdownMenu, () => show.value = false);
       <slot />
     </div>
     <Transition name="fade-in">
-      <div v-if="show" ref="triggeredElement" class="triggered-element">
+      <div v-if="show" ref="triggeredElement" class="triggered-element" @click="closeMenu">
         <slot name="MenuItems" />
       </div>
     </Transition>