Dropdown fix (#31)

* Fix v-model not working

* Fix clicking off not closing dropdown

* Update DropdownSelect.vue

lib/components/base/DropdownSelect.vue

@@ -2,6 +2,7 @@
   <div
     tabindex="0"
     role="combobox"
+    ref="dropdown"
     :aria-expanded="dropdownVisible"
     class="animated-dropdown"
     @focus="onFocus"
@@ -31,7 +32,7 @@
         >
           <input
             :id="`${name}-${index}`"
-            v-model="selectedValue"
+            v-model="radioValue"
             type="radio"
             :value="option"
             :name="name"
@@ -62,12 +63,16 @@ export default {
       type: String,
       default: null,
     },
+    modelValue: {
+      type: String,
+      default: null,
+    },
   },
-  emits: ['input', 'change'],
+  emits: ['input', 'change', 'update:modelValue'],
   data() {
     return {
       dropdownVisible: false,
-      selectedValue: this.defaultValue,
+      selectedValue: this.modelValue || this.defaultValue,
       focusedOptionIndex: null,
     }
   },
@@ -75,14 +80,23 @@ export default {
     selectedOption() {
       return this.selectedValue || this.placeholder || 'Select an option'
     },
+    radioValue: {
+      get() {
+        return this.modelValue || this.selectedValue
+      },
+      set(newValue) {
+        this.$emit('update:modelValue', newValue)
+        this.selectedValue = newValue
+      },
+    },
   },
   methods: {
     toggleDropdown() {
       this.dropdownVisible = !this.dropdownVisible
+      this.$refs.dropdown.focus()
     },
     selectOption(option, index) {
-      this.selectedValue = option
-      this.$emit('input', this.selectedValue)
+      this.radioValue = option
       this.$emit('change', { option, index })
       this.dropdownVisible = false
     },
@@ -138,7 +152,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--gap-sm) var(--gap-md);
+    padding: var(--gap-sm) var(--gap-lg);
     background-color: var(--color-button-bg);
     cursor: pointer;
     user-select: none;