refactor: MultiActionButton dropdown

frontend/src/components/MultiActionButton.vue

@@ -25,25 +25,22 @@
       </template>
     </Button>
     <Dropdown
-      v-show="showDropdown"
+      v-if="showDropdown"
       :options="parsedOptions"
       size="sm"
-      class="flex-1 [&>div>div>div]:w-full"
       placement="right"
-    >
+      :button="{
-      <template v-slot="{ togglePopover }">
+        icon: 'chevron-down',
-        <Button
+        variant: $attrs.variant,
-          :variant="$attrs.variant"
+        size: $attrs.size,
-          @click="togglePopover"
+        class:
-          icon="chevron-down"
+          '!w-6 justify-start rounded-bl-none rounded-tl-none border-0 pr-0 text-xs',
-          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 { DropdownOption } from '@/utils'
 import { computed, ref } from 'vue'
 
 const props = defineProps({
@@ -57,13 +54,18 @@ const showDropdown = ref(props.options?.length > 1)
 const activeButton = ref(props.options?.[0] || {})
 
 const parsedOptions = computed(() => {
+  debugger
   return (
     props.options?.map((option) => {
       return {
         label: option.label,
-        onClick: () => {
+        component: (props) =>
-          activeButton.value = option
+          DropdownOption({
-        },
+            option: option.label,
+            active: props.active,
+            selected: option.label === activeButton.value.label,
+            onClick: () => (activeButton.value = option),
+          }),
       }
     }) || []
   )