Port domainsview to new action pattern

dashboard/src/views/DomainsView.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, useTemplateRef, computed, inject } from 'vue';
-import { Button, ButtonGroup, TableView, TextInput, InputDialog } from '@cloudron/pankow';
+import { Button, TableView, TextInput, InputDialog, Menu } from '@cloudron/pankow';
 import Certificates from '../components/Certificates.vue';
 import SyncDns from '../components/SyncDns.vue';
 import DomainDialog from '../components/DomainDialog.vue';
@@ -74,6 +74,29 @@ const columns = ref({
   }
 });
 
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(domain, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-atlas',
+    label: t('domains.tooltipWellKnown'),
+    action: () => wellKnownDialog.value.open(domain),
+  }, {
+    icon: 'fa-solid fa-pencil-alt',
+    label: t('domains.tooltipEdit'),
+    action: onEdit.bind(null, domain),
+  }, {
+    separator: true,
+  }, {
+    icon: 'fa-solid fa-trash-alt',
+    label: t('domains.tooltipRemove'),
+    disabled: domain.domain.value === dashboardDomain.value,
+    action: onRemove.bind(null, domain),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
 const filteredDomains = computed(() => {
   if (!search.value) return domains.value;
 
@@ -104,6 +127,7 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
     <InputDialog ref="inputDialog" />
     <DomainDialog ref="domainDialog" @success="refreshDomains()"/>
     <WellKnownDialog ref="wellKnownDialog" @success="refreshDomains()"/>
@@ -121,12 +145,8 @@ onMounted(async () => {
           {{ DomainsModel.prettyProviderName(domain.provider) }}
         </template>
         <template #actions="domain">
-          <div class="table-actions">
-            <ButtonGroup>
-              <Button tool small secondary @click.stop="wellKnownDialog.open(domain)" v-tooltip="$t('domains.tooltipWellKnown')" icon="fa-solid fa-atlas" />
-              <Button tool small secondary @click.stop="onEdit(domain)" v-tooltip="$t('domains.tooltipEdit')" icon="fa-solid fa-pencil-alt" />
-            </ButtonGroup>
-            <Button tool small danger @click.stop="onRemove(domain)" v-tooltip="$t('domains.tooltipRemove')" :disabled="domain.domain === dashboardDomain" icon="fa-solid fa-trash-alt" />
+          <div style="text-align: right;">
+            <Button tool plain secondary @click.capture="onActionMenu(domain, $event)" icon="fa-solid fa-ellipsis" />
           </div>
         </template>
       </TableView>