app/components/Ui/Button/Submit.vue

<template>
  <v-btn class="mr-4 ot-green ot-white--text" :class="hasOtherActions ? 'pr-0' : ''" @click="submitAction(mainAction)" ref="mainBtn">

    {{ $t(mainAction) }}

    <v-divider class="ml-3" :vertical="true" v-if="hasOtherActions"></v-divider>

    <v-menu
      :top="dropDirection === 'top'"
      offset-y
      left
      v-if="hasOtherActions"
      :nudge-top="dropDirection === 'top' ? 6 : 0"
      :nudge-bottom="dropDirection === 'bottom' ? 6 : 0"
    >
      <template #activator="{ on, attrs }">
        <v-toolbar-title v-on="on">
          <v-icon class="pl-3 pr-3">
            {{ dropDirection === 'top' ? 'fa-caret-up' : 'fa-caret-down'}}
          </v-icon>
        </v-toolbar-title>
      </template>
      <v-list
        :min-width="menuSize"
      >
        <v-list-item
          dense
          v-for="(action, index) in actions"
          :key="index"
          class="subAction"
          v-if="index > 0"
        >
          <v-list-item-title v-text="$t(action)" @click="submitAction(action)" />
        </v-list-item>
      </v-list>
    </v-menu>
  </v-btn>
</template>

<script setup lang="ts">
import {computed, ComputedRef, ref, Ref} from "@vue/reactivity";

const props = defineProps({
    actions: {
      type: Array,
      required: true
    },
    dropDirection: {
      type: String,
      required: false,
      default:'bottom'
    }
})

const emit = defineEmits(['submit'])

const mainBtn: Ref = ref(null)
const menuSize = computed(()=>{
  // Btn size + 40px de padding
  return mainBtn.value?.$el.clientWidth + 40
})

const submitAction = (action: string) => {
  emit('submit', action)
}

const mainAction: ComputedRef<string> = computed(()=>{
  return props.actions[0] as string
})

const hasOtherActions: ComputedRef<boolean> = computed(()=>{
  return props.actions.length > 1
})

</script>

<style scoped>
.v-list-item--dense{
  min-height: 25px;
}
.subAction{
  cursor: pointer;
}
</style>