Generic Button Menu component

aleksis/core/assets/components/generic/ButtonMenu.vue

+<template>
+  <v-menu
+      transition="slide-y-transition"
+      offset-y
+  >
+    <template #activator="{ on, attrs }">
+      <slot name="activator" v-bind="{ on, attrs }">
+        <v-btn outlined text v-bind="attrs" v-on="on">
+          <v-icon center>
+            {{ icon }}
+          </v-icon>
+        </v-btn>
+      </slot>
+    </template>
+
+    <v-list>
+      <slot/>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+export default {
+  name: "ButtonMenu",
+  props: {
+    icon: {
+      type: String,
+      required: false,
+      default: "mdi-dots-horizontal",
+    }
+  }
+};
+</script>
+
+<style scoped></style>

aleksis/core/assets/components/person/PersonActions.vue

@@ -25,81 +25,78 @@
           {{ $t("preferences.person.change_preferences") }}
         </v-btn>
 
-        <v-menu
+        <button-menu
           v-if="
             data.person.canImpersonatePerson ||
             data.person.canInvitePerson ||
             data.person.canDeletePerson
           "
         >
-          <template #activator="{ on, attrs }">
-            <v-btn outlined text v-bind="attrs" v-on="on">
-              <v-icon center>mdi-dots-horizontal</v-icon>
-            </v-btn>
-          </template>
-          <v-list>
-            <v-list-item
-              v-if="data.person.canImpersonatePerson"
-              :to="{
-                name: 'impersonate.impersonateByUserPk',
-                params: { uid: data.person.userid },
-                query: { next: $route.path },
-              }"
-            >
-              <v-list-item-icon>
-                <v-icon>mdi-account-box-outline</v-icon>
-              </v-list-item-icon>
-              <v-list-item-content>
-                <v-list-item-title>
-                  {{ $t("person.impersonation.impersonate") }}
-                </v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
+          <v-list-item
+            v-if="data.person.canImpersonatePerson"
+            :to="{
+              name: 'impersonate.impersonateByUserPk',
+              params: { uid: data.person.userid },
+              query: { next: $route.path },
+            }"
+          >
+            <v-list-item-icon>
+              <v-icon>mdi-account-box-outline</v-icon>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ $t("person.impersonation.impersonate") }}
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
 
-            <v-list-item
-              v-if="data.person.canInvitePerson"
-              :to="{
-                name: 'core.invitePerson',
-                params: { id: data.person.id },
-              }"
-            >
-              <v-list-item-icon>
-                <v-icon>mdi-account-plus-outline</v-icon>
-              </v-list-item-icon>
-              <v-list-item-content>
-                <v-list-item-title>
-                  {{ $t("person.invite") }}
-                </v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
+          <v-list-item
+            v-if="data.person.canInvitePerson"
+            :to="{
+              name: 'core.invitePerson',
+              params: { id: data.person.id },
+            }"
+          >
+            <v-list-item-icon>
+              <v-icon>mdi-account-plus-outline</v-icon>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ $t("person.invite") }}
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
 
-            <v-list-item
-              v-if="data.person.canDeletePerson"
-              :to="{
-                name: 'core.deletePerson',
-                params: { id: data.person.id },
-              }"
-              class="error--text"
-            >
-              <v-list-item-icon>
-                <v-icon color="error">mdi-delete</v-icon>
-              </v-list-item-icon>
-              <v-list-item-content>
-                <v-list-item-title>
-                  {{ $t("person.delete") }}
-                </v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-          </v-list>
-        </v-menu>
+          <v-list-item
+            v-if="data.person.canDeletePerson"
+            :to="{
+              name: 'core.deletePerson',
+              params: { id: data.person.id },
+            }"
+            class="error--text"
+          >
+            <v-list-item-icon>
+              <v-icon color="error">mdi-delete</v-icon>
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ $t("person.delete") }}
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </button-menu>
       </template>
     </template>
   </ApolloQuery>
 </template>
 
 <script>
+import ButtonMenu from "../generic/ButtonMenu.vue";
 export default {
   name: "PersonActions",
+  components: {
+    ButtonMenu,
+  },
   props: {
     id: {
       type: String,