cloudron-box/dashboard/src/components/ActionBar.vue

<script setup>

import { computed, useTemplateRef } from 'vue';
import { Menu, Button, ButtonGroup } from '@cloudron/pankow';

const props = defineProps({
  actions: {
    type: Array,
    default: () => [],
  },
});

const quickActions = computed(() => {
  return props.actions.filter(a => a.quickAction && !(typeof a.visible !== 'undefined' && !a.visible));
});

const menuElement = useTemplateRef('menuElement');
function onMenu(event) {
  menuElement.value.open(event, event.currentTarget);
}

</script>

<template>
  <div class="action-bar">
    <Menu ref="menuElement" :model="actions" />
    <ButtonGroup class="quick-action-group">
      <Button tool secondary v-for="quickAction in quickActions" :key="quickAction" :icon="quickAction.icon" @click="quickAction.action()" v-tooltip.top="quickAction.label"/>
      <Button tool secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0"/>
    </ButtonGroup>
    <Button tool plain secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0" class="menu-action" />
  </div>
</template>

<style scoped>

.action-bar {
  display: flex;
  gap: 5px;
  justify-content: end;
  min-height: 31px;
  align-items: center;
}

.menu-action {
  display: block;
}

tr:hover .menu-action {
  display: none;
}

.quick-action-group {
  display: none;
}

tr:hover .quick-action-group {
  display: block;
}


</style>