From 1e9959bb658288920a2c83a905490a37d2acf8f5 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Sat, 12 Oct 2024 04:16:13 +0530
Subject: [PATCH] feat: Update the design for the dropdown menu component
 (#10265)

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../dropdown-menu/DropdownMenu.story.vue      | 55 +++++++++++++++++++
 .../dropdown-menu/DropdownMenu.vue            | 35 ++++++++++++
 2 files changed, 90 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
 create mode 100644 app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
new file mode 100644
index 000000000..714f48144
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { ref } from 'vue';
+import DropdownMenu from './DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+const menuItems = [
+  { label: 'Edit', action: 'edit', icon: 'edit' },
+  { label: 'Publish', action: 'publish', icon: 'checkmark' },
+  { label: 'Archive', action: 'archive', icon: 'archive' },
+  { label: 'Delete', action: 'delete', icon: 'delete' },
+];
+const isOpen = ref(false);
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+const handleAction = () => {
+  isOpen.value = false;
+};
+</script>
+
+<template>
+  <Story title="Components/DropdownMenu" :layout="{ type: 'grid', width: 300 }">
+    <Variant title="Default">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+        <div class="relative">
+          <Button label="Open Menu" size="sm" @click="toggleDropdown" />
+          <DropdownMenu
+            v-if="isOpen"
+            :menu-items="menuItems"
+            class="absolute left-0 top-10"
+            @action="handleAction"
+          />
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Always Open">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+        <DropdownMenu :menu-items="menuItems" @action="handleAction" />
+      </div>
+    </Variant>
+
+    <Variant title="Custom Items">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+        <DropdownMenu
+          :menu-items="[
+            { label: 'Custom 1', action: 'custom1', icon: 'file-upload' },
+            { label: 'Custom 2', action: 'custom2', icon: 'document' },
+            { label: 'Danger', action: 'delete', icon: 'delete' },
+          ]"
+          @action="handleAction"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 000000000..74115a31e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  menuItems: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['action']);
+
+const handleAction = action => {
+  emit('action', action);
+};
+</script>
+
+<template>
+  <div
+    class="bg-white dark:bg-slate-800 absolute rounded-xl z-50 py-3 px-1 gap-2 flex flex-col min-w-[136px] shadow-lg"
+  >
+    <Button
+      v-for="item in menuItems"
+      :key="item.action"
+      :label="item.label"
+      :icon="item.icon"
+      variant="ghost"
+      size="sm"
+      class="!justify-start w-full hover:bg-white dark:hover:bg-slate-800 z-60 font-normal"
+      :text-variant="item.action === 'delete' ? 'danger' : ''"
+      @click="handleAction(item.action)"
+    />
+  </div>
+</template>