From 3b432a0209689fbb8f92a6401816d88add8c0e5c Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 7 Apr 2025 13:58:58 +0530
Subject: [PATCH] fix: added multi action button

---
 frontend/components.d.ts                      |  1 +
 frontend/src/components/MultiActionButton.vue | 61 +++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 frontend/src/components/MultiActionButton.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index ef8a8359..648edc46 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -156,6 +156,7 @@ declare module 'vue' {
     MobileLayout: typeof import('./src/components/Layouts/MobileLayout.vue')['default']
     MobileSidebar: typeof import('./src/components/Mobile/MobileSidebar.vue')['default']
     MoneyIcon: typeof import('./src/components/Icons/MoneyIcon.vue')['default']
+    MultiActionButton: typeof import('./src/components/MultiActionButton.vue')['default']
     MultipleAvatar: typeof import('./src/components/MultipleAvatar.vue')['default']
     MultiSelectEmailInput: typeof import('./src/components/Controls/MultiSelectEmailInput.vue')['default']
     MuteIcon: typeof import('./src/components/Icons/MuteIcon.vue')['default']
diff --git a/frontend/src/components/MultiActionButton.vue b/frontend/src/components/MultiActionButton.vue
new file mode 100644
index 00000000..b7e5d3ce
--- /dev/null
+++ b/frontend/src/components/MultiActionButton.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="flex items-center">
+    <Button
+      variant="solid"
+      class="border-0 rounded-br-none rounded-tr-none"
+      :label="activeButton.label"
+      :size="$attrs.size"
+      :class="$attrs.class"
+      @click="() => activeButton.onClick()"
+    >
+      <template #prefix>
+        <component
+          v-if="activeButton.icon"
+          :is="activeButton.icon"
+          class="h-4 w-4"
+        />
+      </template>
+    </Button>
+    <Dropdown
+      :options="parsedOptions"
+      size="sm"
+      class="flex-1 [&>div>div>div]:w-full"
+      placement="right"
+    >
+      <template v-slot="{ togglePopover }">
+        <Button
+          variant="solid"
+          @click="togglePopover"
+          icon="chevron-down"
+          class="!w-6 justify-start rounded-bl-none rounded-tl-none border-0 pr-0 text-xs"
+        />
+      </template>
+    </Dropdown>
+  </div>
+</template>
+<script setup>
+import { Dropdown } from 'frappe-ui'
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const activeButton = ref(props.options?.[0] || {})
+
+const parsedOptions = computed(() => {
+  return (
+    props.options?.map((option) => {
+      return {
+        label: option.label,
+        onClick: () => {
+          activeButton.value = option
+        },
+      }
+    }) || []
+  )
+})
+</script>