Something

frontend/app/components/layouts/Dropdown.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue';
 import { AddContextMenu, HideContextMenu } from '@/services/ContextMenu';
-const props = defineProps(['options', 'onselect', 'selected']);
+const props = defineProps(['options', 'onselect', 'selected', 'keyFunc']);
 const options = props.options;
 const selectCallback = props.onselect;
 const initialSelect = props.selected;
@@ -10,19 +10,23 @@ const dropdown = ref(null);
 const selected = ref(initialSelect);
 
 onMounted(() => {
+    if(props.keyFunc == undefined) props.keyFunc = (option) => option;
+    else selected.value = props.keyFunc(initialSelect);
+
     let context = [];
     if(props.selected == undefined) selected.value = "undefined";
     watch(() => props.selected, () => {
-        selected.value = props.selected;
+        selected.value = props.keyFunc(props.selected);
     });
-    options.forEach(name => {
+    options.forEach(obj => {
+        const name = props.keyFunc(obj);
         context.push({
             icon: selected.value == name ? 'icons/iconoir/regular/check.svg' : false,
             name,
             action: () => {
                 HideContextMenu();
                 selected.value = name;
-                if(selectCallback) selectCallback(name);
+                if(selectCallback) selectCallback(obj);
             }
         });
     });