fix: selector value binding (#87)

frontend/components/Form/Select.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-  const emit = defineEmits(["update:modelValue"]);
+  const emit = defineEmits(["update:modelValue", "update:value"]);
   const props = defineProps({
     label: {
       type: String,
@@ -37,26 +37,32 @@
       type: String,
       default: "name",
     },
-    value: {
+    valueKey: {
       type: String,
       default: null,
-      required: false,
+    },
+    value: {
+      type: String,
+      default: "",
     },
   });
 
   const selectedIdx = ref(-1);
+
   const internalSelected = useVModel(props, "modelValue", emit);
 
   watch(selectedIdx, newVal => {
     internalSelected.value = props.items[newVal];
   });
 
+  watch(internalSelected, newVal => {
+    if (props.valueKey) {
+      emit("update:value", newVal[props.valueKey]);
+    }
+  });
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function compare(a: any, b: any): boolean {
-    if (props.value) {
-      return a[props.value] === b[props.value];
-    }
-
     if (a === b) {
       return true;
     }

frontend/pages/item/[id]/edit.vue

@@ -233,6 +233,7 @@
     loading: false,
 
     // Values
+    obj: {},
     id: "",
     title: "",
     type: "",
@@ -248,11 +249,13 @@
     editState.title = attachment.document.title;
     editState.type = attachment.type;
     editState.modal = true;
+
+    editState.obj = attachmentOpts.find(o => o.value === attachment.type);
   }
 
   async function updateAttachment() {
     editState.loading = true;
-
+    console.log(editState.type);
     const { error, data } = await api.items.updateAttachment(itemId.value, editState.id, {
       title: editState.title,
       type: editState.type,
@@ -282,7 +285,14 @@
       <template #title> Attachment Edit </template>
 
       <FormTextField v-model="editState.title" label="Attachment Title" />
-      <FormSelect v-model="editState.type" label="Attachment Type" value="value" name="text" :items="attachmentOpts" />
+      <FormSelect
+        v-model="editState.obj"
+        v-model:value="editState.type"
+        label="Attachment Type"
+        value-key="value"
+        name="text"
+        :items="attachmentOpts"
+      />
       <div class="modal-action">
         <BaseButton :loading="editState.loading" @click="updateAttachment"> Update </BaseButton>
       </div>

frontend/pages/profile.vue

@@ -226,7 +226,7 @@
         </template>
 
         <div v-if="group" class="p-5 pt-0">
-          <FormSelect v-model="currency" value="code" label="Currency Format" :items="currencies" />
+          <FormSelect v-model="currency" label="Currency Format" :items="currencies" />
           <p class="m-2 text-sm">Example: {{ currencyExample }}</p>
 
           <div class="mt-4 flex justify-end">